-
Notifications
You must be signed in to change notification settings - Fork 0
/
design.html
335 lines (308 loc) · 11.2 KB
/
design.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE Design>
<html>
<head>
<title>Design Cheat Sheet</title>
<meta http-equiv="content-type" content="text/Design;charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<link rel="stylesheet" href="cheatsheet.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500|Roboto+Slab:300,400,700" rel="stylesheet" />
</head>
<body class="design">
<header>
<h1>NCSS Cheat Sheets</h1>
<nav class="sheet-nav">
<a href="html.html">HTML</a>
<a href="css.html">CSS</a>
<a class="selected" href="design.html">Design</a>
<a href="profile.html">Example</a>
</nav>
</header>
<figure class="cheatsheet">
<figcaption>Basics</figcaption>
<figure>
<img alt="Colour scheme examples" src="images/design/colours.png">
</figure>
<article>
<h1>Colours</h1>
<p>
The simplest colour schemes use a single highlight colour, along with a few grey tones (don't use too many!).
When used sparingly this highlight colour will stand out. Think YouTube or Facebook.
</p>
<p>
A step to make this look more professional is to tint your greys with either the same colour, or a complimentary colour.
For a green highlight, you could tint your light and dark greys with a blue.
For a pink highlight you could tint them yellow to make them warmer.
</p>
<p>
If you're confident with your colour choices, you can pick a secondary colour to go along with your highlight colour.
It's tough to get this right, but blue & pink, blue & orange, pink & purple, green & purple, these can all work.
</p>
<p>
Avoid using a dark colour scheme.
They're hard to do well and they often look intimidating or outdated.
</p>
</article>
<figure>
<img alt="Typeface examples" src="images/design/typefaces.png">
</figure>
<article>
<h1>Typeface</h1>
<p>
The first step is to choose a decent body typeface from <a target="_blank" href="https://fonts.google.com">Google Fonts</a>.
This is one that will be used everywhere and is readable.
You'll want to choose either a "Serif" or "Sans-serif" typeface, sans-serifs look more modern and are easier to read on screens.
You don't want a "Display" typeface, those are for headings and logos.
</p>
<p>
Avoid particularly "interesting" typefaces. It shouldn't be the loudest thing on the page, but it should be different enough
to arial that your page looks distinct.
</p>
<p>
Choose a typeface that has a lot of variants, you want very bold variants as well as thin variants.
You can use those variants for headings, buttons, links and unimportant information.
</p>
<p>
If you're feeling bold you can also choose a different typeface for your logo and/or for your headings.
This should contrast, be loud and interesting.
Look at "Display" typefaces for these.
Make sure the style fits the idea of your brand.
</p>
</article>
</figure>
<figure class="cheatsheet">
<figcaption>Strategies</figcaption>
<figure>
<img alt="Alignment examples" src="images/design/alignment.png">
</figure>
<article>
<h1>Grids & Alignment</h1>
<p>
One simple trick to make any interface look professional is to make sure everything lines up.
It's important that things line up vertically, but they can also line up horizontally as well.
</p>
<p>
We've taught you about using grid layouts, this will help.
But it's easy to miss when something doesn't.
</p>
<p>
Avoid using center-aligned text. It doesn't line up vertically, and it's quite hard to read.
You can break this rule for headings - but often its best to just keep it left aligned.
</p>
</article>
<figure>
<img alt="Contrast examples" src="images/design/contrast.png">
</figure>
<article>
<h1>Contrast</h1>
<p>
Use size, boldness, italics, colour, backgrounds and borders to create contrast with other elements.
Make things bigger, brighter, or bolder to make them stand out, or smaller, italic and softer to hide them.
</p>
<p>
Contrast can be used to:
</p>
<ul>
<li>
Highlight important information, like the "Post" button.
</li>
<li>
Create hierarchy in the page, showing where important elements are, like headings.
</li>
<li>
Distinguish one region from another, for example distinguishing a post from a comment.
</li>
<li>
Minimise importance of non-core information, like terms of service or the date something was posted.
</li>
</ul>
</article>
<figure>
<img alt="Whitespace examples" src="images/design/whitespace.png">
</figure>
<article>
<h1>Whitespace</h1>
<p>
Whitespace is intentionally blank areas. They don't specifically have to be "white".
</p>
<p>
Use whitespace to seperate out your elements and create structure in the page.
Prefer to use whitespace to do this, rather than using borders.
</p>
<p>
If your page looks crowded, or cramped, you should add more whitespace.
Typically people under-utilise whitespace - so try using more!
</p>
</article>
<figure>
<img alt="Flat, Skeuomorphic and Material examples" src="images/design/material.png">
</figure>
<article>
<h1>Flat & Material</h1>
<p>
Over the last five years there has been a push against high-detail interfaces.
Instead of making things look physical designers have used flat colours.
</p>
<p>
Material design is a compromise between "Skeuomorphic" (faking physicality) and flat.
Subtle shadows, gradients, small rounding, and subtle borders are used to create contrast
and afford interaction.
</p>
</article>
</figure>
<figure class="cheatsheet">
<figcaption>Visual Details</figcaption>
<figure>
<img alt="Colour scheme examples" src="images/design/rounding.png">
</figure>
<article>
<h1>Rounding Corners</h1>
<p>
To make an interface more friendly and to make items pop from the page,
you can round the corners of buttons, images, or containers.
</p>
<p>
Don't overdo it! Make them small, and consistent.
</p>
</article>
<figure>
<img alt="Flat colour examples" src="images/design/flat.png">
</figure>
<article>
<h1>Flat Colour Boxes</h1>
<p>
Rather than using borders to divide up space, use flat colours.
Remember to combine this with whitespace so it doesn't look cramped.
</p>
</article>
<figure>
<img alt="Shadow examples" src="images/design/shadow.png">
</figure>
<article>
<h1>Shadows</h1>
<p>
You can use shadows to make something look like it's "on top" of the page.
This should be subtle (grey and small, rather than black and large).
</p>
</article>
<figure>
<img alt="Border example" src="images/design/borders.png">
</figure>
<article>
<h1>Borders</h1>
<p>
Use borders minimally! If you can, avoid using them all together.
It's very easy to get carried away putting them on everything.
Instead, use single lines to divide content, rather than full borders.
</p>
</article>
</figure>
<figure class="cheatsheet single-column">
<figcaption>User Experience</figcaption>
<article>
<h1>Affording Interaction</h1>
<p>
Think of a playstation controller. What makes the buttons on it look pressable?
</p>
<p>
They're rounded, they're raised, they have colourful symbols.
These are called "affordances".
They communicate how something should be used.
</p>
<p>
Things which can be clicked, should look like they can be clicked.
When you hover over them they should change to show they're clickable.
When they're pressed they should look "pressed".
</p>
<p>
If something is draggable, it should look draggable.
That doesn't mean you should use real-world affordances,
but it should be consistent with what people expect.
For example, hyperlinks are blue and have underlines.
</p>
</article>
<article>
<h1>Grouping Actions</h1>
<p>
Related things should be grouped together, unrelated things should not.
This should also match the hierarchy of your page.
</p>
<p>
Items for navigation that are at the same "level" should be grouped together.
For example, if you're on a user's profile it makes sense to have links to
their friends seperate from top-level "Home" and "My Profile" links.
</p>
<p>
Similarly, actions like "Post" or "Comment" should be in appropriate locations.
You want the "Comment" actions to be near or at the level of comments.
</p>
</article>
<article>
<h1>Personas</h1>
<p>
These are imaginary users that you can use to figure out what should happen in your interface.
</p>
<p>
Create a rough profile of them, a name and their motivations.
Use it to "test" your interfaces.
Or to discover missing features.
</p>
<p>
For example, in my fashion social network:
</p>
<p>
Bloggie Teen<br>
Amateur fashion blogger, wants to increase their audience, but currently only has a few followers.<br>
Mostly uses their phone to access Hyper.<br>
</p>
</article>
<article>
<h1>User Stories</h1>
<p>
These are stories of how a Persona might use your website.
Use them to describe the high-level functionality of a feature,
seperate to how the interface or back-end works.
</p>
</article>
</figure>
<figure class="cheatsheet single-column">
<figcaption>Feedback</figcaption>
<article>
<h1>Getting Feedback</h1>
<p>
Ask a couple of people for feedback on a design.
Tell them which parts specifically you want feedback on.
For example you might say "please give me feedback on the structure of this page".
</p>
<p>
Don't invite too many people to give feedback.
If you need to make a choice as a group, choose between a few options,
don't get feedback on every step of the design.
</p>
<p>
Remember when people are critiquing your work, it's the work
<em>and not you</em> that they are critiquing.
You can always improve your work!
</p>
<p>
PS: sometimes the people giving feedback will be wrong.
</p>
</article>
<article>
<h1>Giving Feedback</h1>
<p>
Respect the person who you are giving feedback to.
</p>
<p>
Give specific feedback about issues and <em>a reason why you think its an issue</em>.
If your reason is vague, it's not a good reason.
</p>
<p>
Avoid giving suggestions, but if they're stuck and they want suggestions then its okay.
</p>
<p>
Remember that other people have feelings too, and that you aren't always right.
</p>
</article>
</figure>
</body>
</html>