Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Deonna Hodges
November 06, 2020

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

Deonna Hodges

November 06, 2020
Tweet

More Decks by Deonna Hodges

Other Decks in Design

Transcript

  1. Whirlwind Guide to Design what will we cover? M U

    R M U R Creating a Product Spec Brief Guide to Wireframing Resources
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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?
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. ...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
  14. 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/