Wireframes Mock-ups · Wireframes Mock-ups • Plan the structure of your site (at various...

1
Wireframes Mock-ups • Plan the structure of your site (at various breakpoints) • Only use grayscale, but create contrast and hierarchy • Use boxes to represent images/icons • Create your copy (text) • Use a simple typeface like helvetica (but size type for hierarchy) • Finalize the design aesthetic of your site (basically, looks like your website just not coded yet) • Add colors • Select images/imagery/icons • Select typefaces • Make any other visual design choices (style, etc)

Transcript of Wireframes Mock-ups · Wireframes Mock-ups • Plan the structure of your site (at various...

Page 1: Wireframes Mock-ups · Wireframes Mock-ups • Plan the structure of your site (at various breakpoints) • Only use grayscale, but create contrast and hierarchy • Use boxes to

Wireframes Mock-ups• Plan the structure of your site (at various breakpoints)• Only use grayscale, but create contrast and hierarchy• Use boxes to represent images/icons• Create your copy (text)• Use a simple typeface like helvetica (but size type for hierarchy)

• Finalize the design aesthetic of your site (basically, looks like your website just not coded yet)• Add colors• Select images/imagery/icons• Select typefaces• Make any other visual design choices (style, etc)