Week 2 / Unit 8: Design Part 1 (Deonna Hodges)

Transcript

1. Currently @Instacart Formerly @Netflix Hello! I’m Deonna. @DeonnaHodges
3. Whirlwind Guide to Design what will we cover? M U R M U R Creating a Product Spec Brief Guide to Wireframing Resources
4. how do I make a “good” product spec?
5. How will the user navigate between screens to complete the required user stories? Navigation Flow product spec overview Put yourself in the shoes of the user. What should the app do from their perspective? User Stories What surfaces does your app need to have in order for it to function? Screens https://hackmd.io/@nesquena/H1wGpVUh7?type=view
6. instagram mvp: user stories?
7. instagram: required user stories post a photo to their feed create a new account log in to and out of an existing account search for other users like a photo follow / unfollow another user view a feed of photos
8. instagram: optional user stories add a comment to a photo tap a photo to view details (and comments) see “trending” photos search for photos via #hashtag see notifications for likes / follows see a profile page see their followers / who they’re following view other user’s profiles and photo feeds
9. how do I map out the functionality I want to support?
10. wireframing
11. wireframing: goals what is a wireframe? why wireframe? what tools should I use? https://cacoo.com/wp-app/uploads/2018/10/7-Marko-Perics-wireframe-example.gif
12. wireframing: flight booking app?
13. wireframing: flight booking app field for departure city field for destination city field for departure date field for return date button to perform the search
14. wireframing what does your app need to accomplish? what feature is highest priority? what feature is most important for the user? what is the user’s goal when they interact with this screen? how can the content be organized to help the user achieve this goal? what should a user see when they first open your app? where does it make sense for your main message / logo to go? what is the “call to action”? where does it make sense for it to be? what would the user expect to see on each screen of the app?
15. wireframing: guess the app
16. wireframing: guess the app
17. wireframing: guess the app
18. wireframing: guess the app
19. wireframing: guess the app
20. wireframing: guess the app
21. whirlwind guide to design
22. Choose a personality for what you’re trying to build. Will it be serious, playful, luxurious, academic, futuristic? cult of personality layout Start with a feature, not with a specific style of layout. What does your app need? features first Use grayscale for your first design. Rely on size, whitespace, contrast to emphasize what needs to be emphasized. good to be gray
23. features first / good to be gray Refactoring UI
24. cult of personality
25. Use font weight and color instead of just font size to empahsize and deemphasize content. weighty issues visual hierarchy Start with more whitespace than you think you need. Biggest mistake: things look crowded space out What do you want the user to notice? What actions do you want them to take? Emphasize those, deemphasize the rest. empha-size queen
26. Refactoring UI space out
27. Refactoring UI empha-size queen / weighty issues
28. Research font pairings to get a sense of what works well. Experiment. reading is fundamental text Readability is most important when it comes to blocks of text. Align your text to make it most readable (in English, left). pair well Don’t use too many font sizes. Establish a few (headers, subheaders, paragraph content, button text, etc.). And be consistent. step on the typescale
29. Refactoring UI reading is fundamental
30. Refactoring UI step on the typescale
31. pair well
32. Take some time to define the colors you want to use. Define your primary, neutral, and accent colors. refined palettes color You may have to use hex while programming, but prefer HSL for designing, as colors that are similar look more similar in code. remove the hex
33. Refactoring UI remove the hex
34. Refactoring UI refined palettes
35. User-uploaded content can be unpredictable. Make sure crucial design elements don’t depend on the aspect ratio / resolution of these images. fade to back images If you use background images under text, make sure there is an overlay or shadow over the image to add constrast to ensure text is readable. unpredictable uploads Blurry icons are the worst. If you use iconography, make sure they are in SVG format (or the platform equivalent). svg, yeah you know me
36. Refactoring UI fade to black
37. Refactoring UI unpredictable uploads
38. Refactoring UI unpredictable uploads
39. ...so what if I don’t want to / have time to create a good design? ui kits to the rescue! android ui kit on figma community https://www.figma.com/community/file/807688557354960949 ios ui kit on figma community https://www.figma.com/community/file/809487622678629513
40. M U R M U R photo credit: johannes-plenio
41. Resources Dribble (design inspiration): https://dribbble.com/ Product Hunt (product + design inspiration): https://www.producthunt.com/ Coolors (color palette inspiration): https://coolors.co/ Designspiration (Pinterest for design): https://www.designspiration.com/ Material Design Specification (Google’s Material design system best practices): https://material.io/design Brainstorming UI Kit (Figma): https://www.figma.com/community/file/809487915193584778 Getting Started with Figma: https://www.youtube.com/watch?v=hrHL2VLMl7g Mood Board Examples: https://www.invisionapp.com/inside-design/mood-board-examples/ Font Pair: https://fontpair.co/ Typewolf: https://www.typewolf.com/
42. You can find me at Any questions? Thanks! @DeonnaHodges