Designing for the Web

Responsive design

• designing for different platforms that adjust when viewed on different devices
• can design for mobile first, then scale up of other devices
• responsive layout
  • images and text scale
  • navigation buttons shrink or change format
  • columns expand or collapse

Grid design

• grid layout system
  • 960 Grid System
  • Yaml
  • Responsive Grid System
  • Bootstrap
  • The Grid System
  • Grid Based Web Design Resources
• work with ratios
  • use em for type
    • FitText
  • use percentages for images
• align everything
  • columns
  • nav buttons
  • images
  • gutters even both horizontally and vertically
• use whitespace
  • ok to leave blank rows/columns
• think responsive design
  • must look good on different devices

Typography

• font pairing
  • better to use complementary vs too similar
• contrast
  • heavy/light
  • curvy/straight
• scale
  • large/large
  • large/small
  • small/medium
• tone
  • should fit tone or feel of design
• go big with scripts and slabs
  • give script most importance
• be courageous
  • pair fonts with lots of contrast
• pair suggestions
  • google fonts
  • font connection
• other techniques
  • overlapping text
  • drop shadows
  • in-line fonts
  • touching text
  • vary letter case