Simple2Wed.com Web Dev

s2w-Desktop-Index-Page.png

Project Details

Company
Simple 2 Wed
Project Responsibilities
Project Manager, Ui and Front-end Web Design.
Tools Used
Sketch, Atom, BitBucket and WordPress.
Coding Languages
HTML, CSS and Bootstraps.

Introduction

Simple2Wed.com is a website that informs the viewer about getting married on the Santa Monica beaches. I managed this project and was responsible the Ui and Front-end Website Design. I was also responsible for creating the desktop and mobile website using the Bootstraps mobile first grid system in a WordPress framework.

Design Challenge

To create a mobile experience that increases scrolling and less clicking.

Assumptions Made

The assumption that was made when designing the Simple2Wed.com mobile header was that it would be easy to code to the design specifications.

Hifi Comps

s2w-desktop-Index-page-hifi-comp.png1

s2w-desktop-Index-page-hifi-comp1.png

s2w-mobile-index-page-hifi-comp2.png

s2w-desktop-services-page-hifi-comp2.png

Hifi Comps

These are the original Sketch hifi comps that I used for referencing purposes to build the desktop and mobile interactive website pages.

Final Product

s2w-Desktop-Index-Page.png

s2w-Desktop-Index-Page.png

s2w-mobile-product-final.png

s2w-services-page-desktop-final-product.png

Conclusion

The final interactive website took a total of four weeks to complete. I was responsible for reporting/fixing bugs and cross browser testing for mobile and desktop. The original assumption, that coding the mobile header to design specifications would be easy, was incorrect. I wanted the mobile logo to be a different size than the desktop version so I created css media query breakpoints. This allowed the desktop logo to be swapped in for the mobile logo. Please ask to view source code in person.

BACK