12 |
13 |
14 |
--------------------------------------------------------------------------------
/design-brief.markdown:
--------------------------------------------------------------------------------
1 | # [ProjectName] Design Brief
2 |
3 | ## A brief summary of the business / site goals.
4 | *What problems are you trying to solve? What is the purpose of the app? (2-3 sentences)*
5 |
6 | ## The key users.
7 | *Describe behaviors, expectation, knowledge, or other characteristics. (One sentence each)*
8 |
9 | ## Scenarios in which your app or site will be used.
10 | *These should be short narratives of the above users with your app / site. (One sentence each)*
11 |
12 | ## Design style guidelines to follow.
13 | *These are a list of qualities or characteristics (usually adjectives) you'd like the design to follow. The more specific you are with these the easier it will be for you to create a compelling design (e.g. don't use "Clean"). (2-3 words)*
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Starter kit for Design for developers project
2 |
3 | This is meant to help you kick start your design for developers project. Fork this repo and get designing. Follow each weeks instructions after you have watched the corresponding videos.
4 |
5 | Throughout the process make sure you are checking back to [the design resources](https://learn.thoughtbot.com/design-for-developers-resources/).
6 |
7 | ## Week 1 - Design brief
8 | Edit design-brief.markdown in this projects main folder. Make sure to stick to those guidelines as much as possible. You can also check out the [sample brief that Kyle wrote](http://forum.thoughtbot.com/t/sample-design-brief-for-the-design-for-developers-workshop/289/2) to get a better idea of what to write.
9 |
10 | **When you are done push up to github and paste a link to it in the forums. Make sure to notify Kyle by including @kylefiedler in your message.**
11 |
12 | Take a look at the [design fundamental resources](https://learn.thoughtbot.com/design-for-developers-resources/#design-fundementals) before you start. There are a ton of helpful websites and books there to help reinforce some of these core design concepts.
13 |
14 | ## Week 2 - Sketches and basic wireframes
15 | This weeks workshop involves a lot of work. You should do all of your sketches and start to build your projects layout in the browser.
16 |
17 | ### Sketches
18 | As many as possible. You'd be surprised at how some of what you think are the worst ideas end up sparking something that makes the final design. What ever it is get it down on paper and record it and move on to something else.Sometimes it helps to time yourself. When doing these with clients I tend to keep them to 30s or a min each.
19 |
20 | Take a look at the [grid resources](https://learn.thoughtbot.com/design-for-developers-resources/#grid-systems) before you start. There are a ton of helpful grid websites, videos and books there to help you figure out how to best use a grid in your design.
21 |
22 | **Throw photos or scans of your sketches in the sketches folder and post a link to them in the Learn forum.**
23 |
24 | ### Wireframes
25 | Start building your project with HTML & CSS. For now stick to gray scale and Helvetica. This way you can focus on creating a great layout. That doesn't mean that you can't use those tones in background colors, lines or other graphical elements. If fact I would encourage that. Use those grays to help you focus on your hierarchy.
26 |
27 | If you'd like to use the index.html and style.css that I have set up feel free. If you want to use Haml and Scss, go for it. If you want to use your own grid framework, go ahead. As long as it is in this repo it works for me.
28 |
29 | *One note: don't do any real programming. Stick to static content for now. I want you focused on design problems not programming ones*
30 |
31 | Take a look at the [HTML & CSS resources](https://learn.thoughtbot.com/design-for-developers-resources/#html-css) before you start. There are a ton of helpful grid websites, videos and books there to help you build out your wireframes.
32 |
33 | **Once done you can use [Github pages](http://pages.github.com/) to easily host or you can put it someone else your prefer and agian post to the forum for feedback**
34 |
35 | ## Week 3 - Edit the typography
36 | This week you should focus on your projects typography. Make sure that your type is sized and spaced constantly, that there is a rhythm as you read down and across the page. Make sure that you have a strong hierarchy in your type that works with the hierarchy of your entire design. Think about typefaces that will work well with your design and start placing them into your design. Start by incorporating them one at a time.
37 |
38 | Take a look at the [typography resources](https://learn.thoughtbot.com/design-for-developers-resources/#typography) before you start. There are a ton of helpful websites, books and videos there to help you figure out which typefaces to choose and how to size and space them.
39 |
40 | **As you add in typefaces feel free to ask for help, advice, critique post to the forum**
41 |
42 | ## Week 4 - Add in colors
43 | This week focus on adding in color to your project. Start slow and only add in one color at a time. Make sure that you are choosing colors for specific reasons and not just because of your taste.
44 |
45 | Take a look at the [color resources](https://learn.thoughtbot.com/design-for-developers-resources/#color-texture) before you start. There are a ton of helpful websites there to help you figure out which colors to choose and pair.
46 |
47 | **As you add in colors feel free to ask for help, advice, critique post to the forum**
48 |
49 | ## Week 5 - Iterate and refine
50 | This week is your chance to iterate and refine your design. Is there something that has been bothering you about the layout? Is that header just a little too big? What about adding slight shadow or softening your corners?
51 |
--------------------------------------------------------------------------------
/stylesheets/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v2.1.2 | MIT License | git.io/normalize */
2 |
3 | /* ==========================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /**
8 | * Correct `block` display not defined in IE 8/9.
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | main,
20 | nav,
21 | section,
22 | summary {
23 | display: block;
24 | }
25 |
26 | /**
27 | * Correct `inline-block` display not defined in IE 8/9.
28 | */
29 |
30 | audio,
31 | canvas,
32 | video {
33 | display: inline-block;
34 | }
35 |
36 | /**
37 | * Prevent modern browsers from displaying `audio` without controls.
38 | * Remove excess height in iOS 5 devices.
39 | */
40 |
41 | audio:not([controls]) {
42 | display: none;
43 | height: 0;
44 | }
45 |
46 | /**
47 | * Address styling not present in IE 8/9.
48 | */
49 |
50 | [hidden] {
51 | display: none;
52 | }
53 |
54 | /* ==========================================================================
55 | Base
56 | ========================================================================== */
57 |
58 | /**
59 | * 1. Set default font family to sans-serif.
60 | * 2. Prevent iOS text size adjust after orientation change, without disabling
61 | * user zoom.
62 | */
63 |
64 | html {
65 | font-family: sans-serif; /* 1 */
66 | -ms-text-size-adjust: 100%; /* 2 */
67 | -webkit-text-size-adjust: 100%; /* 2 */
68 | }
69 |
70 | /**
71 | * Remove default margin.
72 | */
73 |
74 | body {
75 | margin: 0;
76 | }
77 |
78 | /* ==========================================================================
79 | Links
80 | ========================================================================== */
81 |
82 | /**
83 | * Address `outline` inconsistency between Chrome and other browsers.
84 | */
85 |
86 | a:focus {
87 | outline: thin dotted;
88 | }
89 |
90 | /**
91 | * Improve readability when focused and also mouse hovered in all browsers.
92 | */
93 |
94 | a:active,
95 | a:hover {
96 | outline: 0;
97 | }
98 |
99 | /* ==========================================================================
100 | Typography
101 | ========================================================================== */
102 |
103 | /**
104 | * Address variable `h1` font-size and margin within `section` and `article`
105 | * contexts in Firefox 4+, Safari 5, and Chrome.
106 | */
107 |
108 | h1 {
109 | font-size: 2em;
110 | margin: 0.67em 0;
111 | }
112 |
113 | /**
114 | * Address styling not present in IE 8/9, Safari 5, and Chrome.
115 | */
116 |
117 | abbr[title] {
118 | border-bottom: 1px dotted;
119 | }
120 |
121 | /**
122 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
123 | */
124 |
125 | b,
126 | strong {
127 | font-weight: bold;
128 | }
129 |
130 | /**
131 | * Address styling not present in Safari 5 and Chrome.
132 | */
133 |
134 | dfn {
135 | font-style: italic;
136 | }
137 |
138 | /**
139 | * Address differences between Firefox and other browsers.
140 | */
141 |
142 | hr {
143 | -moz-box-sizing: content-box;
144 | box-sizing: content-box;
145 | height: 0;
146 | }
147 |
148 | /**
149 | * Address styling not present in IE 8/9.
150 | */
151 |
152 | mark {
153 | background: #ff0;
154 | color: #000;
155 | }
156 |
157 | /**
158 | * Correct font family set oddly in Safari 5 and Chrome.
159 | */
160 |
161 | code,
162 | kbd,
163 | pre,
164 | samp {
165 | font-family: monospace, serif;
166 | font-size: 1em;
167 | }
168 |
169 | /**
170 | * Improve readability of pre-formatted text in all browsers.
171 | */
172 |
173 | pre {
174 | white-space: pre-wrap;
175 | }
176 |
177 | /**
178 | * Set consistent quote types.
179 | */
180 |
181 | q {
182 | quotes: "\201C" "\201D" "\2018" "\2019";
183 | }
184 |
185 | /**
186 | * Address inconsistent and variable font size in all browsers.
187 | */
188 |
189 | small {
190 | font-size: 80%;
191 | }
192 |
193 | /**
194 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
195 | */
196 |
197 | sub,
198 | sup {
199 | font-size: 75%;
200 | line-height: 0;
201 | position: relative;
202 | vertical-align: baseline;
203 | }
204 |
205 | sup {
206 | top: -0.5em;
207 | }
208 |
209 | sub {
210 | bottom: -0.25em;
211 | }
212 |
213 | /* ==========================================================================
214 | Embedded content
215 | ========================================================================== */
216 |
217 | /**
218 | * Remove border when inside `a` element in IE 8/9.
219 | */
220 |
221 | img {
222 | border: 0;
223 | }
224 |
225 | /**
226 | * Correct overflow displayed oddly in IE 9.
227 | */
228 |
229 | svg:not(:root) {
230 | overflow: hidden;
231 | }
232 |
233 | /* ==========================================================================
234 | Figures
235 | ========================================================================== */
236 |
237 | /**
238 | * Address margin not present in IE 8/9 and Safari 5.
239 | */
240 |
241 | figure {
242 | margin: 0;
243 | }
244 |
245 | /* ==========================================================================
246 | Forms
247 | ========================================================================== */
248 |
249 | /**
250 | * Define consistent border, margin, and padding.
251 | */
252 |
253 | fieldset {
254 | border: 1px solid #c0c0c0;
255 | margin: 0 2px;
256 | padding: 0.35em 0.625em 0.75em;
257 | }
258 |
259 | /**
260 | * 1. Correct `color` not being inherited in IE 8/9.
261 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
262 | */
263 |
264 | legend {
265 | border: 0; /* 1 */
266 | padding: 0; /* 2 */
267 | }
268 |
269 | /**
270 | * 1. Correct font family not being inherited in all browsers.
271 | * 2. Correct font size not being inherited in all browsers.
272 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
273 | */
274 |
275 | button,
276 | input,
277 | select,
278 | textarea {
279 | font-family: inherit; /* 1 */
280 | font-size: 100%; /* 2 */
281 | margin: 0; /* 3 */
282 | }
283 |
284 | /**
285 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
286 | * the UA stylesheet.
287 | */
288 |
289 | button,
290 | input {
291 | line-height: normal;
292 | }
293 |
294 | /**
295 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
296 | * All other form control elements do not inherit `text-transform` values.
297 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
298 | * Correct `select` style inheritance in Firefox 4+ and Opera.
299 | */
300 |
301 | button,
302 | select {
303 | text-transform: none;
304 | }
305 |
306 | /**
307 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
308 | * and `video` controls.
309 | * 2. Correct inability to style clickable `input` types in iOS.
310 | * 3. Improve usability and consistency of cursor style between image-type
311 | * `input` and others.
312 | */
313 |
314 | button,
315 | html input[type="button"], /* 1 */
316 | input[type="reset"],
317 | input[type="submit"] {
318 | -webkit-appearance: button; /* 2 */
319 | cursor: pointer; /* 3 */
320 | }
321 |
322 | /**
323 | * Re-set default cursor for disabled elements.
324 | */
325 |
326 | button[disabled],
327 | html input[disabled] {
328 | cursor: default;
329 | }
330 |
331 | /**
332 | * 1. Address box sizing set to `content-box` in IE 8/9.
333 | * 2. Remove excess padding in IE 8/9.
334 | */
335 |
336 | input[type="checkbox"],
337 | input[type="radio"] {
338 | box-sizing: border-box; /* 1 */
339 | padding: 0; /* 2 */
340 | }
341 |
342 | /**
343 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
344 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
345 | * (include `-moz` to future-proof).
346 | */
347 |
348 | input[type="search"] {
349 | -webkit-appearance: textfield; /* 1 */
350 | -moz-box-sizing: content-box;
351 | -webkit-box-sizing: content-box; /* 2 */
352 | box-sizing: content-box;
353 | }
354 |
355 | /**
356 | * Remove inner padding and search cancel button in Safari 5 and Chrome
357 | * on OS X.
358 | */
359 |
360 | input[type="search"]::-webkit-search-cancel-button,
361 | input[type="search"]::-webkit-search-decoration {
362 | -webkit-appearance: none;
363 | }
364 |
365 | /**
366 | * Remove inner padding and border in Firefox 4+.
367 | */
368 |
369 | button::-moz-focus-inner,
370 | input::-moz-focus-inner {
371 | border: 0;
372 | padding: 0;
373 | }
374 |
375 | /**
376 | * 1. Remove default vertical scrollbar in IE 8/9.
377 | * 2. Improve readability and alignment in all browsers.
378 | */
379 |
380 | textarea {
381 | overflow: auto; /* 1 */
382 | vertical-align: top; /* 2 */
383 | }
384 |
385 | /* ==========================================================================
386 | Tables
387 | ========================================================================== */
388 |
389 | /**
390 | * Remove most spacing between table cells.
391 | */
392 |
393 | table {
394 | border-collapse: collapse;
395 | border-spacing: 0;
396 | }
397 |
--------------------------------------------------------------------------------