└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Design Bursts 2 | 3 | **When?** 4 | These are currently running on Wednesdays mornings before the start of the week's project for the duration of FAC14, weeks 1-8 in London. 5 | 6 | **What?** 7 | Half hour workshops/presentations every week to learn a little about one aspect of design, which can then be built on and included in that weeks project. 8 | 9 | **Why?** 10 | This idea came about as a result of the feedback we got time and time again from students after going through Design Week. Whilst design week is concentrated more on understanding the problem we are trying to solve with technology and learn about user centred approaches, students felt that they would love to also be taught some basic UX/UI concepts. 11 | 12 | We think that by introducing little design snippets throughout we can ensure that students have a better understanding and appreciation of design, be better prepared to Design Week, make a the projects better for their portfolios and also understand deeply the meaning of working in a multidisciplinary team when they are out in the job market. 13 | 14 | **How?** 15 | @nogainbar and @maxgerber are creating presentations for each week which they are delivering on Wednesdays just before projects start. 16 | 17 | 18 | Please give us any feedback on this idea, and help us improve it! If it all goes well, we can think about adding it to the coursebook. 😄 🎉 19 | 20 | see also this [issue](https://github.com/foundersandcoders/master-reference/issues/882) 21 | 22 | 23 | 24 | ## Week 1: Design Patterns 25 | [Silde deck](https://docs.google.com/presentation/u/3/d/1Qus1BOmpF-3rMBiulsyUf0YVPgubFHzmH9tcu6wrc9A/edit?usp=sharing) 26 | 27 | Useful links: 28 | + https://www.awwwards.com/4-creative-navigation-ui-patterns-for-great-ux.html 29 | + http://patterntap.com/patterntap 30 | + https://dribbble.com/ 31 | + https://www.awwwards.com/ 32 | + https://www.behance.net/ 33 | + https://codepen.com/ 34 | 35 | 36 | ## Week 2: Layout and Spacing 37 | [Slide Deck](https://docs.google.com/presentation/d/1mbzmHJ8UFGosmjwJaxOSJl-PuaQtqxzJKKU4ExGWxrg/edit#slide=id.g3d4c4019a0_1_276) 38 | 39 | Useful links: 40 | 41 | + Rule of thirds: 42 | https://designmodo.com/rule-thirds-grid-outline/ 43 | 44 | + scanning patterns: 45 | https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/ 46 | 47 | + iOS guidelines UI do's and dont's!: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ 48 | 49 | + material design: 50 | https://material.io/design/layout/spacing-methods.html#spacing 51 | 52 | + geeking out even more on material design: 53 | https://material.io/design/layout/understanding-layout.html# 54 | 55 | + iOS guidelines: 56 | https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ 57 | 58 | ## Week 3: Intro to Grids 59 | [Watch the presentation in glorious technicolour!](https://vimeo.com/281249318) 60 | 61 | [Slide Deck](https://docs.google.com/presentation/d/11rIDhbzacs6AUFTVCiJd9f0Ud73TvM4Q9LScMVhctUY/edit?ts=5b4f0840#slide=id.g26a95a14fb_0_0) 62 | 63 | Some useful links for you! 64 | 65 | + Make an 8pt grid 66 | https://spec.fm/specifics/8-pt-grid 67 | 68 | + GRIDINATOR 69 | https://www.ecommercebestseo.com/resources/gridinator/ 70 | 71 | + Brief history of the grid: 72 | https://99designs.co.uk/blog/tips/history-of-the-grid-part-1/ 73 | 74 | + A Comprehensive Introduction to Grids in Web Design: 75 | https://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-grids-in-web-design--cms-26521 76 | 77 | + The Grid System: Building a Solid Design Layout 78 | https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout 79 | 80 | + The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment 81 | https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/ 82 | 83 | ## Week 4: Intro to UI Elements 84 | [Watch the presentation in glorious technicolour!](https://vimeo.com/282589418) 85 | 86 | [Slide Deck](https://docs.google.com/presentation/d/1f8ryxVIngpu4KMv8rr5domBiCGKfgC3r25TstZbnvcg/edit#slide=id.g26a95a14fb_0_0) 87 | 88 | ## Week 5: ~ B R E A K ~ 89 | 90 | ## Week 6: Colour in UI 91 | 92 | [Slide Deck](https://docs.google.com/presentation/d/1xetApQbBIUhMZeG9zBUL0f5QOE249oPRqOEYhIGbeTo/edit) 93 | 94 | ### Useful Links for Colour Visualisation 95 | 96 | + [HSL Picker](http://hslpicker.com/#7000a8) 97 | + [Coolors](https://coolors.co) 98 | + [Khroma Generator](http://khroma.co/generator/) 99 | + [Material UI Palette](https://www.materialpalette.com/) 100 | + [Adobe Colour Wheel](https://color.adobe.com/create/color-wheel/) 101 | + [Hailpixel](https://color.hailpixel.com/) 102 | 103 | ## Week 7: Typography 104 | 105 | [Slide Deck](https://docs.google.com/presentation/d/1Wkte5MuX6Nn6ai3JwudYR7772fK3moi9pGV4Im7b95E/edit?ouid=112090581299612081698&usp=slides_home&ths=true) 106 | 107 | [Watch the presentation in glorious technicolour!](https://vimeo.com/285082879) 108 | 109 | ### Useful Links for Typography 110 | 111 | https://www.justmytype.co/ 112 | https://www.typewolf.com/ 113 | https://thedesignteam.io/the-type-snob-f221969a884b 114 | https://www.imarc.com/blog/best-font-size-for-any-device 115 | https://www.crazyegg.com/blog/psychology-of-fonts-infographic/ 116 | https://visual.ly/community/infographic/lifestyle/fonts-and-feelings-psychology-typography 117 | https://www.companyfolders.com/blog/font-psychology-how-typefaces-hack-our-brains 118 | https://www.creativebloq.com/typography/20-perfect-type-pairings-3132120 119 | 120 | ### Free fonts! 121 | https://fonts.google.com/ 122 | http://inspirationfeed.com/60-free-hipster-fonts-to-download/ 123 | http://hipfonts.com/category/free/ 124 | 125 | ### Tools 126 | http://type-scale.com/ 127 | https://fontpair.co/ 128 | 129 | 130 | ## Week 8: Wireframes 131 | 132 | ### Show and tell 133 | For the last design burst we did a **Show and Tell** of best moments of design bursts and their use. Different people volunteered to show the classroom projects from the whole 8 weeks and explain their thinking about design decision and implementation! it was awesome!! 134 | 135 | [Slide Deck](https://docs.google.com/presentation/d/1l5DCpoFwiMLNi0X4gnqqStav--XQJ7-sdLyW86zgxBc/edit?usp=sharing) 136 | 137 | 138 | [Watch the presentation about wireframes]() 139 | 140 | ### Useful Links for Wireframes 141 | https://balsamiq.com/ 142 | http://sneakpeekit.com/ 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | --------------------------------------------------------------------------------