Process outline: Building a website

1. Create a list of requirements that you want your website to meet.
2. Create your first wireframe:
   • focus on content organization and placement
   • Research what similar products do
3. Establish the 12-column grid system and spacing
   • set the max-width
   • use varying widths between sections to keep the eye moving
4. Select the typography
   • select heading and body fonts
5. Create your type scale and vertical rhythm
   • select a pt size to create spacing and type size in multiples, such as 4pt or 8pt
   • determine line height fr h1, h2, h3, and p tags. Headings should have smaller line heights
6. Select imagery
   • get high-quality images, not pixelated ones
   • make sure you can read text on images. You might have to add a layer over the image
7. Pick and apply the color palette
8. Add finishing touches, like icons
9. Create 8 column grid for tablets
   • viewport: 768px
   • side margin: 32px
   • gutter: 16px
10. Create 4 column grid for mobile
    • viewport: 360px
    • side margin: 16px
    • gutter: 16px

Vertical rhythm

This table shows how you can determine margins with font size and line height: