A Short DIY Guide On How To Design

A Short DIY Guide On How To Design remixed from Stanford's virtual crash course on design thinking and a host of other free design resources.

Transcript

1. A Short DIY Guide On How To Design By Osioke “sprime” Itseuwa
2. Overview of this guide Everyone can design, because design is how we do the things we do. Anytime you solve a problem, you have utilised your design skills. We just need the confidence to bring out what we already know.
3. Overview of this guide In the simplest sense, when you do design as a profession, your work boils down to: 1. Empathising 2. Researching 3. Prototyping/Creating Instead of telling you more about design, go through this guide and experience it by doing a design thinking exercise. This design thinking exercise is based on Stanford’s virtual course on design thinking.
4. Design thinking exercise For this guide, we are going to redesign the gift giving experience for a partner. We are NOT redesigning the gift and we are not redesigning your gift giving experience. We are designing the gift giving experience for your partner. You can always pick a different experience/challenge and apply the same steps to come up with a useful solution. To pick a different experience/challenge look at the challenges/difficulties around you and pick one.
5. Design thinking exercise You can look at how hard it is to get to work and use the steps below to redesign your going to work experience. Whoever you are designing for becomes the user and they are the ones to answer your questions. For the design thinking exercise we will complete 6 tasks, and on completing these tasks you would have learnt how to think and work as a designer.
6. Empathy & Research Task 1: [ ] Get a partner you can ask a few questions. This can be your friend, a colleague, your sibling or a random stranger. • This partner will be your ‘user’ for the whole of this exercise. • Get a pen and note or a recorder to note their responses to your questions that tell you more about the experience you are trying to improve. The most important part of designing for someone is to gain empathy for that person. This is where researching comes in.
7. Empathy & Research To gain empathy for your user, you have to to understand them. To understand them, you have to research on them. You use the insights you gain from the user research to design and create. To research, you interview people who experience or have experienced what you want to improve on. They might not have a problem with it, but in interviewing them you gain insight and learn ways you can create an enjoyable experience by gaining empathy for them.
8. Empathy & Research Let us continue with the exercise. Task 2: [ ] Ask your partner about the last time they gave a gift, what happened? How was it? • How did they come up with the idea for the gift? What was difficult about finding and giving this gift? What was hard/easy about finding and giving the gift? • In asking, try to understand what happened and why it happened. Take note of things they find interesting or surprising. Do this for about 4 mins. It can be less or more, depending on the time you have available.
9. Research some more After the first interviews, follow up on things that you found interesting. You are going to ask more questions and dig deeper. As you ask more questions, try to dig for feelings and emotion. Ask `WHY?` often. • Read this article on the 5 Whys as developed by Toyota to understand the power of asking why in design.
10. Research some more Task 3: [ ] Ask more questions to dig deeper on the answers they gave that you found interesting. • Try to ask till you see/hit an emotion of pain as they answer you or try to answer you. Emotion is very key in design. It is by easing people pains that you design good solutions. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
11. Capture Findings From Research Interviews To capture findings and insights from your research complete the following tasks. Task 4.1: [ ] Write out the Needs List. • Based off your notes, write out separately the things your partner was trying to accomplish by giving a gift. What were they trying to do by going through that experience. What does gift giving do for them. Needs should be verbs. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
12. Capture Findings From Research Interviews To capture findings and insights from your research complete the following tasks. Task 4.2: [ ] Write out the Insights List. • Based off your notes, write out separately the things that stood out to you as you did the interviews. These are the things you noticed would be helpful in improving that experience for your user. This is the Insights List. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
13. Capture Findings From Research Interviews Task 4.3: [ ] Define problem statement • Create a problem statement by combining the items in your Needs List with items in your Insights List. Use this template: UserName [replace with user’s name/description] needs/wants a way to _______________________________________ [write out user need], surprisingly // because // but [choose one that flows best to include in the sentence] ___________________________________________ [write insight]. Example: Ali needs a way make the most of his time, but he doesn’t know how to manage his time, he doesn’t even know people can manage their time.
14. Prototyping To create, draw or prototype an interactable version of your solution (app, website or service), complete the following tasks. Task 5.1: [ ] Define possible solutions, products or services based off findings • If you need help doing this, watch how to generate ideas. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
15. Prototyping [ ] Hand draw/sketch/prototype possible solution • If you need help doing this, watch how to build your creative confidence. ◦ You can also search online to see how other apps which solve this problem were designed, to get inspiration on what to sketch. Product Hunt is a good site for this. ◦ Read these articles to learn how to create new designs by looking at what others have created: ▪ Develop an eye for design by breaking down other designs [Article] ▪ Stealing Your Way to Original Designs [Article] • Do this for about 6 mins. It can be less or more, depending on the time you have available.
16. Prototyping Task 5.3: [ ] Walk your partner/potential-user through sketched solution and get feedback on why your solution works for them, or why is doesn’t work. • You are presenting this solution not to validate your solution, but to collect feedback, hear what your potential user feels about the solution and improve on it. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
17. Prototyping Task 5.4: [ ] Apply findings from feedback back into sketch and improve on your sketch • Read this guide on UX Sketching for tips on how to sketch and improve your sketches • Do this for about 4 mins. It can be less or more, depending on the time you have available.
18. Construct Full Designs To create proper designs, complete the following tasks. Task 6.1: [ ] Use Figma to convert your sketches into digital images/wireframes • For help with using Figma watch this Intro to Figma video. • For more detailed tutorials on the different tools and features of Figma, go through this video playlist. • Do this for about 8 mins. It can be less or more, depending on the time you have available.
19. Construct Full Designs Task 6.2: [ ] Share finished design with your user/partner for more feedback on how to improve the design. • Remember this is to collect feedback and not to validate your solution. • Do this for about 4 mins. It can be less or more, depending on the time you have available.
20. Construct Full Designs Task 6.3: [ ] Implement feedback if any, and adjust any errors on the design Now you have completed the design thinking exercise. The next set of steps take you through improving the quality of your design and making them more professional.
21. Improving Your Designs Source: Boreme.com
22. Improving Your Designs To improve your designs: • Join a community of designers, where you can get feedback from other designers like you • Create a https://dribbble.com/ account and keep looking at design posts everyday • Subscribe to http://sidebar.io/ • Buy and read the book The Design of Everyday Things (Here is a free course on YouTube on the book by the author) • Read this article on Design Concept and Inspiration
23. Improving Your Designs You can stop here. But for more content on how to improve your designs, go through the next few pages. It will take you step by step through different resources that tell you: • How to arrange information and content in a way that guides the user to take the right steps while using your product • How to pick the right colours and fonts for your design • How to get inspirations, icons and assets you need to improve your design • And other free and useful resources to improve your designs Click through and use the resources here to learn how to create and design beautiful digital experiences for the web.
24. Visual Hierarchy, Layout and Information Architecture in Web Design To know and understand how to properly arrange information in your designs to lure in users, go through these resources. • Understanding Visual Hierarchy in Web Design - "Visual hierarchy is one of the most important principles behind effective web design. This article will examine why developing a visual hierarchy is crucial on the web, the theory behind it, and how you can use some very basic exercises in your own designs to put these principles into practice." • Visual Direction in Web Design - "One of the big secrets of design is learning how to guide the visual direction of viewers; This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works." • The Psychology of Content Design [Article]
25. Colour Theory - Picking colours for your designs To pick the right colours for your designs, go through these resources. • An Introduction to Color Theory for Web Designers [Article] • 6 Beginner “Safety First” Color Guidelines for the Web [Article] • Hex Colour Generator - A random colour generator • Colour Tool - A tool to help you create colour palettes for your interface
26. Typography - Picking Fonts Go through the resources below to understand typography and how to pick fonts for your designs. • An animated short video on the History of Typography • A Comprehensive Guide to Typography Basics [Article] • A Beginner’s Guide to Pairing Fonts [Article] • How to design with only text [Video] • Your body text is too small [Article] • Checklist for Better Web Typography [Article]
27. Typography - Picking Fonts Go through the resources below to understand typography and how to pick fonts for your designs. • FontPair - A tool to help designers find the best Google font pairs. • Google Fonts - Free fonts collated by Google. • WhatFont - A Chrome extension that instantly helps you identify any webfont. • WhatTheFont - A tool that can identify fonts from a picture or screenshot of a site or flyer.
28. Getting assets for your designs To get free icons, illustrations, and images for your designs, use these tools. • Font Awesome - Pixel perfect icons • Fontello - Pixel perfect icons • Modern Pictograms - Pixel perfect icons • Typicons - Pixel perfect icons • Foundation Icon Fonts 2 - Pixel perfect icons • Undraw Illustrations - Free illustrations • Unsplash - Beautiful and free images • DrawKit - Beautiful and free images
29. Making Your Designs Work To make your designs really shine, use these resources. • Designing for the next step [Article] • Designing with Grids to help arrange your designs [Article] • Understanding unified designs and why unity is important in design [Article] • White Space: Designing the Invisible [Article] • The power of empty space [Video]
30. List of free design tools • POP by Marvel - Easily convert your paper sketches to interactive prototypes for free. • Use Wirify to see the Wireframe-d version of any site you like. • Figma - A vector-based interface design tool with real-time collaboration. • WhatFont - A Chrome extension that instantly helps you identify any webfont. • WhatTheFont - A tool that can identify fonts from a picture or screenshot of a site or flyer. • Google Fonts - Free fonts collated by Google. • FontPair - A tool to help designers find the best Google font pairs. • Colour Tool - A tool to help you create colour palettes for your interface. • Hex Colour Generator - A random colour generator
31. Extras • How to design a logo yourself [Article]
32. 1 min short survey to help us improve this board Please help us go through this 1 min short survey to help us improve this learning resource.