Blog Posts

Site Map and High-level Sketches

Create a sitemap for your website. See example sitemap.

Sketch out wireframes for any unique pages on your website (i.e. for a portfolio website do the homepage, gallery page, project detail page, about page and contact us page). Once you have sketched out your idea and know where all your assets will be, create a high-level version of your wireframes using Illustrator (or another wireframing tool). Have these wireframes build on one of the grid layouts that you explored.

Site Map A:

Site Map B:

Sketch/ Wireframe 1-A

Sketch/ Wireframe 1-B

Sketch/ Wireframe 2-A

Sketch/ Wireframe 2-B

3 Grid Layouts

Create 3 different grid layouts for your site’s design. Use grayscale or color to distinguish the grid. Link to example sites that use a similar grid. In your blog post identify the grid type for each layout, based on the lecture.

MODULAR GRID

Example: https://www.nytimes.com/

COLUMN GRID

Example https://www.nationalgeographic.com/magazine

HIERARCHICAL GRID

Example: http://www.ricardopocci.com/project/guarana