DFW - Designing for the Web [OVERVIEW]

Designing for the Web

Introduction

When you go to websites, what grabs your attention? What makes you want to stay and explore? Is it a plain site with few pictures, that looks like an essay?  Or is it a site that has color, pictures, videos, interactive activities, etc.?  I have a feeling that you answered that you prefer a site like the last question describes. You may not want a site that is overloaded and too busy, that is the reason for white space, to not have too much going on. However, you have to have something going on to capture your audience. 

In this course, we will not only learn how to code and make websites, but we will be working on creating websites that are interesting and that our audience wants to stay and explore.  This module will start you on that part of the course, the design part of web design.  You may not think you are creative, but you are! Sometimes, we haven’t used our creativity much recently and we might think we aren’t creative, but remember when you were in elementary school? Remember how much you liked to color and draw? Do you remember how hard you worked to draw the very best picture you could and how proud you were of it?  We need to recapture that feeling again.  In this module, we’ll work on helping you become a designer, an artist of sorts.  We may not all be DaVinci or Banksy, but we all can bring our own design to our work.

As you work through this module, make sure you are reading all of the content, and make sure you are looking at all of the images and videos, as they contain important information that may show up on your test. Also, make sure you are taking notes, so you’ll remember what you are learning.

List of Lessons

  • Principles of Design
  • Color in Web Design
  • Typography for the Web
  • The Importance of Branding and Color in Business
  • Viewpoints and Layouts

Essential Questions

  1. Why is an understanding of the principles of design important for web designers?
  2. What is the importance of using responsive web design?
  3. What is the importance of viewports in web design?
  4. Why should a web designer understand color theory?
  5. Why are brands important to businesses?
  6. What are the 4 most important parts of a web page layout?

Key Terms

Alignment | A design technique of how the elements of the design are lined up in relation to each other.

Brand | A business or marketing concept that helps people identify a particular company, product, or individual. Usually it is a name, symbol, or other marker that distinguishes the public identity of the company.

CMYK | A subtractive color mode used in printing – C is for cyan (blue), Y is for yellow, M is for magenta (dark pink) and K is for black.

Color Palette | A combination of colors used in a design.

Color Formatting | The different ways colors are mixed together, such as CMYK and RGB.

Color Theory | The science and art of using color and how humans perceive color.

Contrast | A design technique to make elements of the design stand out from other elements which can be done in many ways, including shadows, light, color, size, and juxtaposition.

HSL | A color format that stands for Hue, Saturation, and Lightness.

Hue | The degree on the color wheel of the color (0-360). 0 is red, 120 is green, and 240 is blue.

Lightness | The amount of white or black mixed with the color. 0% lightness is black and 100% is white.

Principle of Design | The rules a designer follows to create effective and attractive designs.

Proximity | A design technique of putting things close to one another or away from one another to create understanding. Unity is created by putting items closer together.

Repetition | A design technique where elements of the design are repeated several times.

RGB | An additive color format that is the amount of red, green, and blue primary colors of light that are added together to create the color in a digital format. Black is no light and white is all light. It is written like this: rgb(255,255,255) is white and rgb(0,0,0) is black. All other colors are between these numbers. The first number is the amount of red light, the second number is the amount of green light, and the last number is the amount of blue light.

Responsive Web Design | Websites that are created to look good on all devices and automatically adjust to the size of the device.

Saturation | The depth of color from 0% to 100%, 100% is full color and 0% is gray.

Usability | How easy it is for the user/viewer to use the site.

UX | User experience.

Viewport | The user’s visible area of the web page, it varies by device.

Web Design Principles| Guidelines to create polished, functional websites.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION