learn-co-curriculum / hs-intro-web-design-teachers-guide-white-space

###SWBATs Students will be able to understand the proper use of white space and incorporate it into the design of their site

###Motivation/ Why Should You Care? White space is important in web design because it increased content legibility, draws attention to your call-to-action, allows for increased interaction because your page isn't cluttered, and creates a balance among the elements of your page.

Lesson Plan

• White space (also called ‘negative space’) is the portion of a page left “empty”. It’s the space between graphics, margins, gutters, space between columns, space between lines of type or visuals.
• It should not be considered merely ‘blank’ space — it is an important element of design. It enables the objects in it to exist at all. White space is all about the use of hierarchy. The hierarchy of information, be it type, colour or images.
• A page without white space, crammed full of text or graphics, runs the risk of appearing busy, cluttered, and is typically difficult to read (people won’t even bother). This is why simple websites are scientifically better.
• Enough white space makes a website look ‘clean’. While clean design is crucial to communicating a clear message, it doesn’t just mean less content. Clean design means a design that makes the best use of the space it is in. To make a clean design, you have to know how to communicate clearly by using white space wisely.
• Made.com does white space well
  • The fine use of white space makes it easy to focus on the main message and visuals, and the body copy easy to read.
• White spaces promotes elegance and sophistication, improves legibility and drives focus.
• Think about this even when you are designing for a smaller screen. Less space doesn’t necessarily mean you should eliminate white space but it does mean you need to think more shrewdly about it.
• Strategically placing white space can also help you design a more flexible responsive site - it can give you more flexibility about how your content is rearranged as you design for different screen sizes.
• You can create white space
  • using the padding property around text and images
  • page margins
  • 'ragged right' typesetting (text flushed to the left margin)
• Check out the resources on Learn.co for more tips on using white space

###Conclusion Leaving blank spaces on your page actually increases the quality of design and chance of user interaction.

Hints/ Hurdles

• Show examples that are bad uses of white space

View SWBATs on Learn.co and start learning to code for free.