Web Design

Style Guide

Style Guide

Header / Headline – 2-3x larger than body text
Bhead – 1.5x larger than body text
Navigation – 16-18px
Body – 16-18px
Footer – 2-4px smaller than the body text

Typography

  • Serif

Humanist Serif – for journalism and or historical

Example: Sorts Mill Goudy, Palatino, Garamond, Crimson Text, Cardo

Transitional Serif – for traditional academia and legal

Example: Times New Roman, Poly,  Lora, Droid Serif, Baskerville

Moderm Serif – for arts and culture

Example: Playfair Display, Oranienbaum, Old Standard TT, Didot, Bodoni

Egyptian Serif / Slab Serif – for marketing and promotional

Example: Rockwell, Patua One, Coustard, Bitter, Arvo

  • Sans-serif

Humanist Sans-serif – for government, education and finance

Example: Verdana, Open Sans, Gill Sans, Droid Sans, Cabin

Transitional Sans-serif – for technology or transportation

Example: Trebuchet MS, Source Sans Pro, PT Sans, Lato, Helvetica

Geometric Sans-serif – science or architecture

Example: Roboto, Raleway, Futura, Exo, Century Gothic

  • Script

Mix Typefaces

Font Style

Don’t choose two fonts from the same style

Don’t choose two fonts from the same class

When mixing classes, find a similar trait. For example

Epic (Humanist Serif) & Myriad (Humanist Sans)

Perpetua (Transitional Serif) & Gill Sans (Humanist Sans)

Sorts Mill Goudy & Cabin

Lato & Baskerville

Layout

Symmetrical Layout – equal on both sides of a vertical axis, all the elements should be centered on the grid
Asymmetrical layouts – have a large off-center focal point, and that the utilize other elements to create balance

Layout Layout

Layout

Vertical Navigation

  • Place the brand in the upper left of the layout
  • Navigation should be directly below the brand
  • Main content should be right next to the navigation
  • Secondary content should be right next to the main content

Horizontal Navigation

  • Place the brand in the upper left of the layout
  • Navigation should be directly next to the brand
  • Main content should be directly below the brand and navigation
  • Secondary content should be directly below the main content

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in HTML/CSS and tagged , , , , . Bookmark the permalink.