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)