DESIGN STUFFS

This view includes the presenter notes, indicated by a ^ at the beginning of the line. To view the presentation as a deck, please go here.

Aly Fluckey @wtfluckey

---

1. Plan

at least a little bit

---

CONTENT

---

keep it simple

---

why so superfluous?

---

establish hierarchy

^ display all of the different elements in our design effectively how important are they? what level of focus or attention needs to be placed on them? shopping cart example - better make the path to checkout easy

---

Hierarchy is also about storytelling; it’s about our user’s journey through the website and the user flow we create --Rachel Shillcock

^ - how does the content relate to each other? how it will be laid out? - make the content as easy to digest as possible - not just about content and images - headings, lists, quotes, imagery etc - break up the content and make it easier to communicate

---

some ways to help establish hierarchy

• color
• contrast
• size
• alignment
• repetition
• whitespace

---

create a sitemap

^ talk about sitemap example

---

set the tone

^ think about the intent of the product creative and fun? modern and sophisticated? make sure everything portrays the tone and motive images colors fonts actual content

---

sketch

^ - brainstorm - experiment - take notes - have fun

---

wireframes

balsamiq.com

^ think about layout and flow both on page level and site level

---

COLOR

---

the basics

---

primary

red, blue and yellow, also known as base colors

---

secondary

green, purple and orange, made when you mix 2 primary colors together

---

tertiary

created when you mix 1 primary color and 1 secondary color

---

warm family

---

cool family

---

complementary

pair of colors opposite the color spectrum, examples: red & green, blue & orange, yellow & purple

will create the strongest contrast

---

^ hue - color itself (red) tint - white shade - black tone - grey opinions on lots of pure white and black

---

emotions

and choosing a color scheme

---

tools

---

Kuler

---

Paletton

---

TYPE

---

---

---

serif fonts have the little feet (embellishments) more classic easier to read in print

---

sans-serif fonts don't have the feet more modern easier to read on web

---

so which one do I use?

---

one size does not fit all

but there are some rules of thumb

---

1. don't use more than 3 fonts on a single page
2. don't switch fonts mid-sentence without a very good reason
3. use sans serif fonts for online body text and serif fonts for headlines and print
4. Use monospace fonts for typewriter text and code blocks
5. Use script and fantasy fonts for accents

more bad fonts

---

choosing fonts

^ tone & intent create contrast by using 2 different fonts create even more contrast by pairing a serif font w/ a sans font

---

font families

pairings

^ one or more fonts that share common design features ex: Helvetica

^ choosing a font family that has both sans & serif fonts gives flexibility and also ensures that the fonts will look good together because of their similar qualities

---

resources

• google fonts
• typekit
• typecast

^ - http://www.google.com/fonts/ - free, easy to use, shows impact on page load time - https://typekit.com/fonts - free but limited - http://typecast.com/ - free, see how the fonts you've chosen will play together on the screen, generates HTML/CSS

---

size

contrast

and space

^ older audience? larger font? contrast - make sure it's readable space - allow room to breathe

---

modular scale

^ helps increase readability and legibility

• helps balance white-space
• doesn't guarantee good design
  • tool to help set type and give design a head start

---

common ratios

2:3 (perfect fifth)
3:4 (perfect fourth)
1:1.618 (golden section)
3:5 (major sixth)

type-scale

---

trust your eyes

^ optical measurements are more visually accurate than mathematical ones

• if something is off, change it

---

responsive type

^ create responsive breakpoints and change the sizes of your fonts as screens get smaller

---

IMAGERY

^ stock images included link to list of free stock image sites remember to read about licensing! always remember tone and intent

---

1. Plan

at least a little bit

2. Iterate

a lot

^ after you've done some planning and you've started to build, remember to iterate don't get too tied to an idea or feature if it isn't working, change it MVP concept - what minimum features need to be finished for it to be 'complete'?

---

frameworks

^ twitter bootstrap and zurb foundation use from the beginning! invest time into customizing!

---

cheat sheet

^ important to make sure that everything looks good on smaller screens

• chrome responsive emulator

---

@media screen and (max-width: 1280px) {

	.desktop-to-tablet-class {
		width: 75%;
	}
}

@media screen and (max-width: 768px) {

	.tablet-to-mobile-class {
		width: 85%;
	}
}

@media screen and (max-width: 320px) {

	.mobile-and-below-class {
		width: 100%;
	}
}

^ remember to include your responsive stylesheet AFTER your base stylesheet or you're gonna have a bad time

---

use relative units

---

questions?

---

• design school for developers
• balsamiq wireframes
• characteristics of color and color schemes
• kuler
• paletton
• google fonts
• typekit
• typecast
• free stock photos
• font-family pairings
• test type contrast
• modular type-scale
• twitter bootstrap
• zurb foundation
• responsive design gifs
• responsive cheat sheet

---

THANK YOU!