-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
86 lines (62 loc) · 4.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
---
layout: default
---
#### This is a page about quick tips for improving your design. <br>For resources check out the [blog](blog/).
## Hierarchy and Contrast
At the end of the day, design is all about creating hierarchy and contrast. The design decision we make non-verbally communicate to our readers and users on what to expect, what we want them to read, and how we want them to read it.
* **White space is your friend** <br>
It draws more attention to what is present. <br>
Read More: [Less is More](http://www.vanseodesign.com/web-design/whitespace/)
* **Prioritize the elements on your page and make the most important stand out more than the rest.** <br>
Read more: [Dominance in design](http://www.vanseodesign.com/web-design/dominance/)
## Color Theory
* **Use high contrast between colors**<br>
Consider a wider audience! A significant number of the population are color blind. Using high contrast colors helps _everyone_ read the content on your site.
* [Test your color contrast](http://colorfilter.wickline.org/) <br>
* [Test background and foreground text color](http://leaverou.github.io/contrast-ratio/)
* **Code fall-backs into color** <br>
If you decide to code a color with `rgba()`, include a fall-back above it which is a solid `rgb()` value for older browsers that can't read `rgba()`: <br>
`color: rgb(12,15,134);`
`color: rgba(12,15,134,.6);`
## Typography
Ask most web designers and they'll agree with the old web design quote "95% of web design is typography". It _is_ that important in web design
* **Include line-height on all typographic elements**<br> `line-height` can completely change your site. Headlines should have a `line-height` of at least `1.2` or `1.3` and body copy (paragraphs and long reads) should have a `line-height` of at least `1.6` or `1.7`. <br>
`line-height: 1.6` can be applied to `body` css and then changed only when needed on individual type styles. <br>
[Learn more from masters of Web Type, Information Architects](https://ia.net/know-how/responsive-typography-the-basics)
* **Let the website design carry the tone, and pick typefaces that are readable, not overdone**<br>
Type expert John Kane recommends picking typefaces based on the
* history of a font
* the intended audience
* the intended tone
* the context in which the text is presented
<br>From [John Kane's A Type Primer](http://www.amazon.com/Type-Primer-2nd-John-Kane/dp/0205066445/ref=sr_1_1?ie=UTF8&qid=1423750096&sr=8-1&keywords=type+primer), pg. 72
* **Use a max-width on text elements like `<p>` and `h-elements`** <br> Shoot for 50-75 characters per line, including punctuation and spaces.
* **Always style the following for text in CSS**:
* `font-family`
* `font-size`
* `line-height`
* `font-weight`
* `color`
* **Unless it's a headline, _stop_ centering type** <br>
Centering type is for short lines, headlines, or French restaurant menus. If you're writing a paragraph, left alignment is best because each line starts at the same place, which let's reader read quickly.
* **Fonts on your computer, may not be on a user's. TEST TEST TEST** <br>
[Read more about fonts](http://practicaltypography.com/font-basics.html)
* **Check out Practical Typography's suggestions** <br>
[Buttrick's Practical Typography](http://practicaltypography.com/summary-of-key-rules.html) is a GREAT place to learn more about type.
## Grids and Layout
* **Depending on the language of your design, consider the direction that the language is typically read.**<br> For English, we read left to right, so this is why most websites keep their main content on the left and their ads on the right. Consider languages when designing a page and how elements are placed.
* **Use a grid system**
<br> Columns and math may seem tidious but it can really tie your site and it's content and elements together. Things will be systematic and not arbitrary choices. Also a grid isn't restricting, it actually opens up a lot of options.
<br> If grids seem overwhelming, start with a 12-column grid. It’s flexible because it’s divisible by 1, 2, 3, 4, 6, 12, etc. 18- or 24- columns are pretty standard.
* **Grid lines are guides, but not rules**. Break the grid when you want something to stand out.
* **Patterns create consistency** <br>
Allow yourself to use patterns over and over as it builds consistency. (eg. 4-4-4, 6-6, 4-8, etc). Use something like [Neat](http://neat.bourbon.io/) to make grids easier to work with or build out your own
## Principles of Good Design
* **“Good Design is invisible”**<br>
— Dieter Rams, [10 Principles of Good Design](https://readymag.com/shuffle/dieter-rams/)
<br><br>
It doesn't stand out, it looks seamless and effortless.
* **“Content precedes design. Design in the absence of content is not design, it’s decoration.”** <br>
— Jeffrey Zeldman, [Content precedes design](http://www.zeldman.com/2008/05/06/content-precedes-design/)
* **“Art is about aesthetics, Design is about function’s effect on aesthetics.”**<br>
— Sam, me, right now.