Learn UI Design course (part 2)

Поделиться Курсом / Книгой / и тд.
#1

COMPONENT LIBRARIES I: CONTROLS

RESOURCES

  • :memo: Lesson Figma file
  • Component Database by Learn UI Design. A Figma file with images of major components from popular component libraries. This is meant to help you understand where to be consistent, and some of the options available to you – not to constrain you to a small number of choices for every type of control. Featured libraries:
  • Other style guides with easily-browsable component libraries:
  • Anything but dropdowns by Learn UI Design. A list of controls to consider, in particular, if (a) your users need to select a lot of data throughout your designs and (b) your designs are for a mobile device.

HOMEWORK

Start a component library featuring 8+ of the following components:

  • Button (different visibility/size/color can count as different controls)
  • Segmented button
  • Textbox
  • Text area
  • Dropdown
  • Radio button
  • Checkbox
  • Switch
  • Tag
  • Slider
  • File input
  • Date picker

Start by jotting down a few notes on the brand you’re trying to achieve with your components. As you design the components, test them in realistic screens – or, better yet, start creating a library from screens that are already designed.

Don’t post this to the student community yet – you will do more work on this in the next lesson.

COMPONENT LIBRARIES II: STATES

RESOURCES

:memo: Lesson Figma file

Component States & Variations
Button States: normal, hover, active (pressed), focus, disabled

Sizes: 1+ as needed for design
Colors: contextual colors as needed for design (e.g. “Delete” button is red)
Visibilities: 1-3 as needed for design (e.g. 3 levels of pop)|
|Segmented button i.e. Button group|States: normal (selected and unselected), hover (selected and unselected), active (selected and unselected), focus (selected and unselected), disabled (selected and unselected)|
|Textbox
i.e. input|States: normal, focus (currently typing), disabled, error|
|Text area
i.e. text field|Same as textbox|
|Dropdown
i.e. Select|Dropdown control states: normal, focus (with menu open and with menu closed), disabled
Dropdown list item states: normal, active, hover, focus|
|Radio button|States: selected, unselected, focus (selected and unselected), disabled (selected and unselected)|
|Checkbox|States: selected, unselected, focus (selected and unselected), disabled (selected and unselected)
Note: you can also have an “indeterminate” variation of all of the above for when a parent checkbox has children that are a mixed of checked and unchecked|
|Switch
i.e. toggle|States: on, off, focus (on and off), disabled (on and off)|
|Tag
i.e. badge, pill|State for read-only pills: normal
States for removable pills: normal, hover (optional), focus, disabled|
|Slider
i.e. range|States: normal, focus, disabled|
|File input|Same as textbox|
|Date picker|Same as textbox|

HOMEWORK

Complete the component library you started in the first part of this lesson, including major states for your controls. You don’t need to specify every single possible permutation of states for every single control, but a viewer should have a general idea of e.g. whether the focus state for a button and a textbox looks radically different.

When finished, post the results to #5-ui-components, along with a brief reflection:

  • What is the brand of your component library?
  • How well were you able to maintain consistency?
  • What was trickiest?
  • What was the biggest lesson?

FOR YOUR PORTFOLIO…

It’s not uncommon to post a style guide as part of a portfolio project writeup. It can be a great thing to include if (a) you can clearly articulate why you made the various decisions you did in developing your style guide, or (b) you can format your component library to look particularly visually interesting – e.g. searching dribbble for “component library” will bring up a whole host of projects that are presented much better than just screenshotting Figma.

VECTOR ILLUSTRATION

RESOURCES

HOMEWORK

Create a vector-based illustration of a favorite drink, whether it’s a hot cup of a coffee, or a cool glass of lemonade. Post your illustration to Slack, along with a brief summary of what vector skills you learned or honed by doing this.

(If you’re adding a title to your illustration, remember to pick a font that – in some way – reinforces the brand of the drink or illustration style. E.g. a classic cocktail may have a more formal or vintage title. A lemonade might have a care-free handwritten title)

ICON DESIGN

RESOURCES

  • :memo: Lesson Figma file
  • The Noun Project . A great site for finding ideas for what icons could look like. An awful site for downloading glyphs and expecting them to work with your particular app and brand.

HOMEWORK

:memo: Homework Figma file

This one’s a three-parter! You’ll want to set aside a few hours for these.

  1. Copywork : Create a pixel-for-pixel copy of 3 icons from each of the attached icon sets.
  2. Consistency : Create icons for each of the missing “top 10” icons in the attached file. As you do, focus on maintaining consistency with the other icons in the set (though things like overall size, line width, spacing width, border radius, unique visual features, repeated shapes – and, of course, visual weight).
  3. Creativity : Design from scratch 3-5 icons in a consistent visual style. Pick a brand, design, or theme for the icons that is personally or professionally meaningful to you. I encourage you to go more towards product icons than creative icons (since the former is much more common in app design) – but if you’re more passionate about illustration and want to convey more complex ideas, then larger, more detailed icons will be the way to go.

Post your results to Slack, along with what you learned, struggled with, or otherwise noticed (since these exercises may take multiple sessions, and you’ll probably learn quite a bit from each, feel free to post each part separately as you go through them).

PHOTOGRAPHY & IMAGERY

RESOURCES

  • :memo: Lesson Figma file
  • My favorite FREE photography sites:
    • Unsplash . The king of free image sites, this is a treasure trove of high-quality, interesting photography. And the site was created by designers, go figure . My #1 stop for any photography goose chase on the web. Free for commercial use; no attribution required.
    • Pexels . Same deal here; hundreds of thousands of beautiful stock photos. Free for commercial use; no attribution required.
    • Pixabay . And once more: free photos, use them for whatever you wish, however you wish . Just note that you’ll see a lot of Shutterstock “ads” in the interface as you do. But always worth searching if Unsplash and Pexels don’t turn up anything interesting.
  • My favorite PAID photography sites:
    • Stocksy . The new generation of stock photos – unique, interesting, high-quality, and royalty free (e.g. pay once and be done, as opposed to “renting” the image for a certain timeframe, medium, and number of views). Cost is based on size (the smallest size is $10, and works for many contexts)
    • Twenty20 . Another newer stock photo site. Unfortunately, a lot of photos here aren’t available immediately for web/app designs, though you can request their staff review a photo to see if you can use it.
  • Background removal . These automated tools don’t always get quite what you’re looking for, so I’ll list a few of them.
    • Remove.bg
    • Adobe’s Background Removal
    • Removal.ai
    • Photoshop . If you love this lesson and really want to dive deep into amazing imagery, you are guaranteed to need Photoshop. Currently $20/month for a single app Adobe Creative Cloud subscription. There are a half-dozen ways to remove a background in this mother of all image-editing apps.
  • Backgrounds and textures . I’m always looking for more resources here (particularly free ones). If you know of any, please email me.
    • Subtle Patterns . The original resource listing tons of great background patterns.
    • Rawpixel . Plenty of free textures and backgrounds. The “free” filter is the one you want :wink:
  • Duotone effect in Figma by Miggi. A tutorial by a Figma employee on the duotone effect. A nice trick to have in your back pocket.

Finding good imagery to use in your interfaces is a surprisingly difficult task. Here are a few resources for finding good images around the web. Know of any other ones? Email me.

FOR YOUR PORTFOLIO…

Using good imagery is basically a cheat code of UI design. In practice, an interface will only look as good as the imagery a user decides to upload for it. But in your portfolio, you have more control over things. Use it. When possible, show off screens that look particularly great thanks to high-quality imagery.

LISTS & TABLES

RESOURCES

  • :memo: Lesson Figma file
  • Designing Better Data Tables by Matthew Ström. A solid article with great general advice for data tables, but also some more advanced details of numbers in tables (learn what a lining tabular figure is!)
  • Simplicity from Learn UI Design. Can’t get enough tables? The Simplicity lesson shows another table-editing example.
  • Learn UX Design by Erik Kennedy. Lists and tables are one of the areas where UX and UI come together most noticeably. If you particularly liked this lesson, you might also be interested in my course on UX design – which, as a UI student, you can enroll in at any time, even if it’s not an “official” enrollment period. Just email me :slightly_smiling_face:

HOMEWORK

Design a list of apartments in an apartment-finder app (web or mobile).

You might want to consider including information such as the following:

  • A description of the space
  • A picture of the space (will all listings have this?)
  • Price
  • Neighborhood
  • Address or cross-streets
  • Number of bedrooms, bathrooms
  • Appropriate controls for sorting, filtering, and searching

As you design the list, think about the following questions:

  • What is the main distinguisher in the list?
  • What is the most sensible sort order ?
  • What are the main questions the user wants to answer provided they’re on this list?
  • What are the methods for finding an item that make the most sense? (visual scanning, filtering, sorting, search, etc.)
  • What happens when any text field is very long ?
  • What happens when any text field is empty ?
  • What is displayed when any image field is empty ?

Make sure to include some fields populated with blank or particularly long values. When complete, post your design and questionnaire answers to the student community.

FOR YOUR PORTFOLIO…

Screens that show off lists or tables, especially in mobile or enterprise apps, are likely to have quite a lot of thought process behind the specifics of their design. This is the ideal sort of reasoning that works great in a portfolio writeup.

CHARTS & DATA VISUALIZATIONS

RESOURCES

HOMEWORK

:memo: Figma homework file

Add in the missing data visualizations from the attached budgeting/financial app design.

  • Include one rectangular chart (bar or line) that thoughtfully lays out how recent spending has compared to the monthly budget
  • Style the “Spending x Category” pie chart
  • Style the scalar numerical displays

You may add in or re-arrange any data visualization as you wish. The goal is to make something that you would like to use, both in functionality and aesthetics.

RESPONSIVE UI DESIGN

RESOURCES

  • :memo: Lesson Figma File
  • Responsive Patterns by Brad Frost. The best compilation of patterns for responsive design. Includes generalized examples with code, so it’s useful for developer and designer alike.
  • Responsive Web Font Size Design Guidelines by Erik Kennedy. My blog post on choosing font sizes for responsive websites.
  • Font Size Principles by Erik Kennedy. This the nerdy deep-dive into calculating sizes for everything from billboard to books. It’s one of the less immediately practical things I’ve ever written, but if you like universal principles , it may clear some things up – even if you never visit the page again.
  • Material Design Component Behavior by Google. A summary of responsive patterns from the always insightful, always well-written Material Design docs.

HOMEWORK

:memo: Homework Figma file

Define responsive behavior for the FlowerFriend mockup above by creating mockups at alternate screen sizes.

  • Choose sizes based on what the content wants , of course (as shown in the lesson)
  • Feel free to re-arrange or resize elements in the original design to make it gel nicer with a responsive plan
  • As you create the smaller mockups, think carefully about which pattern you chose:
    • Rows-to-columns
    • Hide - Move the unimportant to new pages or modals
    • Drop - Move the unimportant down
    • Remove - Delete the unimportant entirely

Fonts required: Fira Sans.

DESIGNING MULTI-STATE SCREENS

RESOURCES

HOMEWORK

:memo: Homework Figma file

Design out the full states for the two screens of an RSS-reader app linked above.

I encourage you to open up the file and determine the full list of screens for yourself, but you can double-check against this list afterwards to make sure you’ve covering your bases:

  • List - no unread articles
  • List - no posted articles
  • List - refreshing feed
  • List - can’t fetch articles
  • List - actions panel open
  • List - showing unread/starred articles (if displayed differently)
  • Article - cannot display as RSS, go to website
  • Article - share
  • Article - favorited
  • Article - lengthy author name
  • Article - no image

Fonts required: Noticia Text

ACCESSIBILITY

RESOURCES

  • :memo: Lesson Figma file

  • Tools . Downloadable and web-hosted tools.

    • Accessible Color Generator by Learn UI Design . Find the closest colors to your brand colors that meet accessibility contrast guidelines.
    • Stark by Cat Noone & friends . Extension for Sketch, Figma, and Adobe XD for (A) viewing your app as a colorblind user and (B) measuring color contrast accessibility. Free version is fantastic; paid version is $60/year.
    • Tota11y by Khan Academy . A bookmarklet that you can activate on any web page to find accessibility issues.

  • Accessibility checklists . Longform guides to help you ferret out accessibility issues.

    • Checklist by The A11y Project . The most in-depth checklist I could find on meeting a11y guidelines. A bit more developer-centric, but UI designers will do well to familiarize themselves with these terms, ideas, and solutions.
    • Accessibility Guidelines Checklist by Vox Media . A thorough checklist of web accessibility best practices, broken out by design, dev, PM, QA, and editorial (writers). Solid resource.

  • Articles and reports . Other written resources to help with your accessibility skills.

    • 7 Things Every Designer Should Know About Accessibility by Jesse Hausler . An incredible, in-depth article reviewing many of the things in this video – but be sure to check out tips 5, 6, and 7, which I didn’t cover above.
    • Screen Reader Survey #9 by WebAIM . The largest survey of screen reader usage, this will start to give you a glance into the life of someone using assisted technologies. Which mobile platform are they highly likely to use? What disability type is by far the most common for those using screen readers? What is the most problematic element for screen readers to handle? It’s all in here, folks.
    • I Used the Web For a Day With Just a Keyboard by Chris Ashton . A non-disabled user investigates the biggest problems with using the web via keyboard. Includes code snippets for fixing various keyboard-related a11y issues.
    • Inclusive Components by Heydon Pickering . Includes super in-depth development advice on how to make common interface patterns accessible.

HOMEWORK

Perform a brief accessibility review of a design or live site or app you’ve been a part of creating. Answer the following questions about it:

  1. Is color relied on to display state for any critical information?
  2. Are there places where the text doesn’t have enough contrast?
  3. Are focus states lacking for any clickable/hoverable elements?
  4. Are form labels always visible, even when typing into the form?
  5. If appropriate, are there keyboard shortcuts?

Check out Stark and Tota11y below for tools to review Sketch designs and live sites, respectively.

FOR YOUR PORTFOLIO…

Accessibility concerns can influence quite a bit about a site – colors, component styling, etc. The rationale for these changes is a great thing to call out in portfolios, especially if you’re interested in making accessibility a larger part of your design career.

OVERLAYING TEXT ON IMAGES

RESOURCES

  • 7 Rules for Creating Gorgeous UI, Part 2 . The first rule in this article of mine is a similar list of text-on-image methods, but with a little less detail. Nonetheless, it’s a quick way to reference these methods if you don’t have time to watch the video.

10 METHODS OF TRUNCATING TEXT

RESOURCES

MOBILE: IOS

RESOURCES

Design guidelines:

  • iOS Visual Guidelines by Learn UI Design. Apple’s iOS design guidelines are a bit difficult to read through, so I’ve tried to compile what I consider the most idiosyncratic patterns iOS uses into a heavily-illustrated guide.
    • Including: iPhone Screen sizes – an evergreen resource you should probably just bookmark now :slightly_smiling_face:
  • iOS Human Interface Guidelines by Apple. OK, I guess I should throw in the official guidelines too, right? In all seriousness, you’ll be referencing these a ton as you design an iOS app.
  • iOS vs. Android App UI Design by Learn UI Design. If you’re already familiar with Android/Material Design conventions, this read is a great way to quickly become familiar with the main differences in how they do things. To be perfectly honest, they’re more similar than different!
  • iOS Font Size Guidelines by Learn UI Design. My more in-depth guides to sizing (and styling) text in the iOS style.

Sketch and Figma resources:

MOBILE: ANDROID/MATERIAL DESIGN

RESOURCES

Design guidelines:

Sketch & Figma resources:

GRIDS

RESOURCES

  • Grids Are Good (Right?). Fantastic slideshow by Khoi Vihn (now design director of Adobe) & Mark Boulton. Builds a grid system from the ground up for a “Yahoo”-like portal website. 100% worth watching.

HOMEWORK

Inspiration PDF file

Your homework is to create a “Swiss style” poster advertising the Learn UI Design course. What is the Swiss style? It’s a clean and minimalist, grid-based style popular in the mid-1900s. Please download and study the inspiration PDF linked above . Creating a poster in this style will help you isolate the skill of working with grids.

A few notes:

  • Color: Keep color to a minimum – simple and flat, if there’s any at all
  • Typography: Stick to grotesque fonts (don’t worry: I don’t expect you to know what that means) like Helvetica, Arial, Roboto, Inter, Acumin. You will want to default towards bolder weights, and definitely keep basically everything left-aligned.
  • Content: As you’re advertising this course, you might want to mention benefits, lessons, testimonials, or other details. A very thorough summary can be found at learnui.design. Note that images – especially the ones that happen to be on the marketing page – typically align poorly with text.
  • Horizontal multiples: To get the most out of this assignment, try creating a poster where some set of elements repeats 3-4 times horizontally, and then that “row” repeats at least twice vertically (as seen on the fourth and last posters in the inspiration PDF)

CREATING A DESIGN PORTFOLIO

RESOURCES

  • Portfolio Checklists by Learn UI Design . Two cheatsheets of sorts – the first for considering your portfolio as a whole, and the second with some reflective questions to help you create a good narrative out of your writeups.
  • How to Create a Great UX/UI Portfolio Without Much Experience by Learn UI Design . A public, written guide covering a lot of the same stuff in this video.
  • The Case Study Factory by Fabricio Teixeira & Caio Braga . A lot of popular UX schools have been churning out beginning designers with extremely similar portfolios. Fabricio and Caio give their take on what’s wrong - and what to do instead. Worth the read.

In an ideal world, every designer would know enough HTML and CSS to hand-code their own portfolio. This allows you to have complete creative freedom and show your work in a totally unique way. In reality, many of us don’t know how to code proficiently yet, and a template site will be the easiest solution for now. Here are a few high-quality portfolio template sites:

  • Semplice . A popular option for portfolios. “By designers, for designers” captures their brand well – these templates look really nice, and the pricing is merciful.
  • Squarespace . A great all-purpose website builder that excels at portfolios. I found their editor to be intuitive and fast to use.

(Please let me know if you have experience with any of the above – or want to add another one to the list!)

HOMEWORK

This lesson’s homework is based on ideal project personas. While the questions may be a bit more personal in nature, I encourage you to post them to Slack anyways.

  1. Who are your 2-3 top dream clients (or dream employers)? Choose based on where you are right now. Apple may be your ultimate dream employer, but if you have no design experience, try thinking about what dream projects will be the best stepping stones toward Apple.
  2. What would a hiring manager from that company be looking for in a designer? Think about industry, platforms you’d be working on, special considerations for that company, and who its competitors are. If possible, read job descriptions for that company (be aware these are often inane buzzword bingo with little correlation to the actual job).
  3. How can you tailor your portfolio to be hired at your dream clients job? Try to think of 2+ ways for each dream client.
  4. What is your design specialty? (similarly: how will you label yourself) Which services will you specialize in?
  5. Which services will you not do? You turn down certain jobs so that you can specialize deeper and more knowledgeably in what you do do

FOR YOUR PORTFOLIO

If you’ve been following the portfolio track of this course, you’ve already basically done the reflections in the Portfolio Checklist. But if not, please complete it now.

Now let’s talk about something else.

The single best way to get recruiters and design managers to pay attention to your portfolio – and interview you – is to have extremely high-quality visual designs .

There are thousands of people graduating UX bootcamps and degree programs with poor to mediocre visual design skills. I want you to be far better than them. But to be far better than them, you’ll need to:

  • Create more designs
  • Iterate more widely in the projects you work on
  • Analyze pro-quality work to grow quicker

The first unit has already set you down this path, but the Fundamentals, Color, Typography, and Components units will further help you in this regard. Though these units might feel like a “distraction” from creating a portfolio as quickly as possible, in the end, the most efficient way to get a job is to quickly become as skilled a designer as possible. I highly encourage studying any video from these videos that’s even remotely related to your portfolio projects.

(That being said, you have lifetime access to these materials, so there’s no rush to watch every last thing right now)

FINDING CLIENTS

RESOURCES

  • Client Screener Checklist by Learn UI Design . Once you’re talking to a client, you’ll want to determine that you can do good work for them. Here is a comprehensive list of questions that help you get a good idea of the project at hand. Important: I’ve starred some questions that you’ll want to be clear on if you want to avoid common pitfalls of client work.
  • Design is a Job by Mike Monteiro. This book is the best “business of design” book I’ve ever read. Includes a bit on finding good clients – as well as avoiding bad ones – but so much more.

HOMEWORK

What’s a client-finding method that you’ve been underutilizing? Post it to the Slack, along with (a) a short description of what you will do to improve, and (b) by when. You didn’t think you were getting off easy, did you?

PRESENTING & GETTING GOOD FEEDBACK ON YOUR DESIGNS

RESOURCES

  • How to Give Me Really Useful Feedback cheatsheet by Rob Williams . An awesome one-pager you can hand to your clients at the beginning of a project or presentation. I’ve done it for many of my own clients. Since I’m doling out unasked for advice, I also remind my clients that I love them and want them to succeed at everything they do, including giving me feedback!
  • Design is a Job by Mike Monteiro . Mike is the father figure every designer needs. This book is a no-nonsense guide to client work, and I’ve taken a TON of ideas from it, both in this lesson and in my career. Absolutely worthwhile. Oh, and if you ever have trouble getting paid by a client, you might want to watch this memorably-named talk of his.
  • Sean Wes Podcast by Sean McCabe . Sean McCabe’s podcast is another great place to learn about client work. You’ll notice a lot of similarity in the ideas here – he’s another big inspiration. I’ve linked to one of my favorite episodes, but there are plenty to choose from.

CLICK-THROUGH PROTOTYPES

HOMEWORK

None – despite what I mentioned in the video :wink:

DEVELOPER HANDOFF

RESOURCES

COMPLETING THE COURSE

2 симпатии