Bootcamp
Search…
CSS.5: Web Design Basics

Introduction

The following is a tutorial on basic web design. We hope that students can apply these design principles to all projects in Coding Bootcamp and beyond. You will need a (free) Udemy account to watch this video.
Free Web Design Tutorial - Web Design for Web Developers: Build Beautiful Websites!
Udemy
There are really no hard or fast rules when it comes to web design but you can use the following guidelines as recommendation

Typography

  • Use font-size between 15px and 25px
  • Use big font sizes for headlines
  • Use line spacing between 120% and 150% of the font-size
  • 45 to 90 characters per line
  • Use font families such as such as Sans-serif or Serif
    • Sans-serif
      • Open Sans
      • Lato
      • Raleway
      • Monsterrat
      • PT Sans
    • Serif
      • Cardo
      • Merriweather
      • PT Serif
  • Use minimal typeface. A good rule of thumb is nothing more than 2

Colors

  • Use only one base color (other than black, white or grey)
Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨
A great place to find colors
  • Use a tool if you want to use more colors
    • One example is using a color wheel with color theory
  • Use highly attractive colors to draw attention such to key features such as a "Sign up" button
  • Try not to use too much black in your colors
  • Choose your colors wisely as they evoke different emotions
Web design color theory: how to create the right emotions with color in web design
TNW | Tnw
A website with details on what colors evoke the different types of emotions

Images

The options below should complement the look and feel of your website so play around with all the options before deciding on one
  • Put text directly on the image
    • Choose highly contrasting colors for the text
  • Overlay the image with color gradients
    • Avoid the use of black or white gradients
  • Put text in a box above your image
  • Blur your image
  • Floor fade your image (image should "fade" away at the bottom)

Icons

  • Use icons to list features or steps of your website
    • Helps a user to quickly browse your website and get an idea of what your website is all about
  • Use icons for actions and links
    1. 1.
      Icons should be instantly recognizable
    2. 2.
      Label your icons with text (if possible)
  • Icons should play a supporting role and not take center stage of your design
  • Use icon fonts whenever possible
    • Prefer vector icons (e.g .svg) over raster images (e.g. .jpeg, .gif)