Sierrameat

Initial Sketches

When creating a website, I typically start with a series of rough sketches that will lay out the structure of the site. From there, I revise a few elements based on discussions with the client.

sm-sketchsm-sketch-websm-sketch-mobile

 

Wireframe

After a general outline is established with the sketching process, I proceed to create a digital wireframe. Like the sketches, the wire frame must incorporate very little “design” elements, such as color, images, and typography. The purpose of the wireframe is to finalize the structure of a site and establish a visual hierarchy.

sm-wireframe

 

Desktop and Mobile Final Compositions

The final step of the design process is creating a full color comp. Here, we will incorporate the traditional design elements, including typography, colors, photography, icons and logos. A comp will typically be sent to a client for approval upon completion, and then will be handed to our developer to create a full, functioning site.

sm-final-compsm-final-comp-mobile

 

 

 

 

JVC

Wireframes

Initial wireframes were shown to the client to show navigational flow, positioning, and page layouts. The wireframe consisted of 3 main page layouts. Home Page, Product Category Page, and Product Detail page.

Initial Wireframes →


Home Page Concept

jvc-home-concept


Category Page Concept

jvc-category-concept


Detail Page Concept

jvc-detail-conecpt


Branding

We wanted to keep the branding consistent across their digital media. Icons used on their product boxes were also used on the product detail pages to keep it consistent.

round-icons

A similar treatment was used on icons used throughout their site as well.

support-icons


Final Product

Subtle Design changes were made throughout the process but the overall structure remained the same. Homepage Banners were uniquely designed to showcase a particular product with a call to action. Below is the final version of the homepage across multiple devices.

Desktop View

jvc-final-1


Tablet View

jvc-tablet-2


Mobile View

jvc-mobile-1.