Website Design

Methods and Process Focus

Daniel Hatch
Dan Hatch Portfolio

--

Typeagogy.com is a website for discussing type trends and lettering design. During graduate school, I have been collecting type artifacts and other types of image paraphernalia. Initial sketches help work out the concept that has been rolling around in the back of my mind.

Sketches

Created on an iPad with the use of an Apple Pencil. Using sketches allowed me to explore several differing designs for the landing page quickly without having to commit to wireframes or surface comps.

Sitemap

After exploring a few sketch ideas it was easy to put the sitemap together. Information architecture allows you to see the structure of the entire website. This helped to form out the pages and content structure needed to support the features needed in this website.

Wireframes

Using those sketches it is easy to refine them into a wireframe to outline the blueprints for the website. Once it is in the digital version, it becomes easy to rearrange the furniture and layout of the website. The use of Sketch makes it easy to update and copy content to work out the structure of the digital experience.

Prototype

With wireframes in hand, the next step is to create a click through prototype to test the structure of website. This stage also help fill in the gaps that may not have been designed in the sketch and wireframe process. Inevitably many missing pieces are filled in here before moving onto the surface comp stage of the design process.

Surface Comps

Next stage…haven’t finished this part yet! Excited to get this website designed and prototyped.

--

--

Daniel Hatch
Dan Hatch Portfolio

UVU Newbie Professor, User Experience Practitioner, Life Photographer and Person