Learn UI Design course (part 1)

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

BEGIN HERE

RESOURCES

  • The most important videos to watch if you’re in a rush . If you’ve got minimum time to get maximum results, I recommend watching the following videos to get an overview of the Learn UI Design methodology:
  • 20 Things to No by Learn UI Design. Your very first cheatsheet! A checklist of habits beginning designers should avoid . I’ve been working with and helping beginning designers for years, and these are some of the most common mistakes they make. Avoid these for a year or two to save yourself a lot of hassle. Now when you’re a wizened, battle-hardened pro, I release you from these. But until then… :wink:

Full access/coaching links . If you enrolled in the full access or 1-on-1 coaching plans, you’ll want to bookmark the following resources.

  • Slack channel . For design feedback and discussion.
  • Live Redesign Vault . A database of over 30 live redesigns I’ve done from student submissions. All students can attend future sessions. Make sure you’ll receive notifications of them here.

User experience resources:

  • UX vs. UI: A Concise Explanation by Learn UI Design. If you’re new to digital design, you might appreciate one more explanation of what exactly we’ll be focusing on.
  • Learn UX Design . My course on creating usable, intuitive web and mobile apps. As Learn UI Design students, you can enroll in Learn UX Design at any point, even if enrollment isn’t “officially” open – just email me :slightly_smiling_face:
  • Magic Ink by Bret Victor. Incredible essay on what UX is – including strategies and case studies for how to design good experiences.
  • The Art of Innovation by Tom Kelley. Easy and inspiring read on user-centered & design thinking.

CHOOSING A DESIGN APP

I most recommend Figma for going through this course. Sketch is also industry-standard. A bit on each:

Figma Sketch
Price Free until you need inter-file libraries or collaborators. $12/month for unlimited projects. 30-day free trial. $99 for the app, which includes updates for one year. Get future updates for $79/year.
Platform Web, Mac, Windows Mac
Popularity Most popular app, but losing market share. Second-most popular and gaining market share.
In this course Most lessons are in Figma. Some lessons are in Sketch.

The functionality and interfaces are so similar that needing to switch from one to the other is not difficult. So pick whichever makes the most sense for you now, and don’t fret if you need to learn the other at some point.

What I would specifically not recommend is using Adobe Photoshop or Illustrator to complete this course. They are designed for completely different use-cases than UI design, and, a bit like using a Swiss Army Knife to cut down a tree. Just use a chainsaw!

HOMEWORK

INTRODUCE YOURSELF

Introduce yourself in the Slack #introduce-yourself channel with the following:

  • What’s your name?
  • Where do you live? (optional, but we sometimes organize student meet-ups)
  • Why do you want to learn UI design? For work? Your own startup? Want to freelance?

BASELINE DESIGN

Choose a project you’d really like to do some design work for (ideas in the “For Your Portfolio” section below), and design 1-2 of the main screens for it. Your goal is simply to get a baseline of where your UI skills are at right now. When done, post it to the #1-introductory-topics channel. Don’t worry – we’re very beginner friendly! :slightly_smiling_face:

FOR YOUR PORTFOLIO

Note: If you’re going through Learn UI Design with the goal of creating a portfolio, pay special attention to the “For Your Portfolio…” notes at the bottom of many lessons – they will contain extra assignments and sometimes direct you to watch videos in a different order.

If you want to create a UI portfolio in conjunction with this course, your first assignment is to brainstorm 3-5 sample projects you might include in your portfolio (ultimately, you’ll want to launch your portfolio with at least 3).

There are a few different types of projects that UI beginners might include in their portfolio before they’ve actually been hired for design projects:

  • Side projects . These are projects that are actually designed and developed, yet no one is getting paid. Perhaps you’re a developer, or perhaps you can team up with one to design and develop something real, it’s undeniably powerful to be able to show future employers an actual app that real users are using .
  • "I-wish-it-existed" apps . These are apps you wish existed, but currently do not. They may not have any real chance of actually being developed – but that doesn’t mean you can’t do the design work as if they were .
  • Unsolicited redesigns . If you use an app frequently and know how it might be improved, you can redesign part (or all) of it as if you were a designer at that company. But a word of warning: since you’re not privy to the actual business goals of the app you’re redesigning, you may put in a lot of work into a solution that, in reality, would be completely rejected by the company you had in mind.
  • Good Samaritan Projects . Use a website like catchafire.org to find and connect with non-profits looking for free design work. This is a fantastic way to get a feel of a real-world design project without having the added stress of negotiation and payment. If you go this route, please watch the videos on Goals and Brand and Getting Good Design Feedback first.

For more, check out my free article How to Create Your UX/UI Portfolio (Without Much Experience). In particular, the first section is on choosing projects to feature in your portfolio before you’ve done any paid design work.

INTRODUCTION TO FIGMA

RESOURCES

  • :memo: Lesson Figma File . Fonts used:
    • Bebas Neue. Font Squirrel has all weights; Google Fonts has regular only
    • Input Sans Narrow. TypeNetwork download is $5 per weight; Adobe Fonts download free with Creative Cloud.
    • Note : to install a font, (1) download it and (2) (a) double-click the file (for Mac) or (b) right-click and select Install (for Windows).
  • Figma Mirror : App for viewing Figma designs on your iOS and Android devices.
  • Figma Cheatsheet by Xinling Wang. Printable reference for Figma shortcut keys. To view in Figma, click ☰ > Help & Account > Keyboard Shortcuts.

INTRODUCTION TO SKETCH

RESOURCES

  • Fonts used in this video:
    • Bebas Neue. Font Squirrel has all weights; Google Fonts has regular only
    • Input Sans Narrow. TypeNetwork download is $5 per weight; Adobe Fonts
    • Note : to install a font, (1) download it and (2) (a) double-click the file (for Mac) or (b) right-click and select Install (for Windows).
  • Sketch Mirror : App for viewing Sketch designs on your iOS and Android devices.
  • Sketch Cheatsheet by Manuel Ebert. Printable reference for Sketch shortcut keys.

SETTING UP YOUR WORKSPACE FOR RAPID UI DESIGN

Update [April 2021] : to set up a Mac keyboard shortcut for uppercase in Figma, enter “Uppercase” for the menu title (instead of “Text Upper Case”).

Update [May 2021]: Skyfonts has removed batch downloading of top Google Fonts – and even downloading a single font no longer appears to go through the SkyFonts app. It’s probably not worth using this service anymore.

RESOURCES

  • :memo: Lesson Figma file . Fonts used: Adelle Sans.
  • Plugins
    • Better Font Picker by Nitin Gupta
    • Content Reel by Microsoft. Figma plugin for quickly adding realistic data – names, cities, photos – to your designs.
    • Stark (Figma, Sketch).Useful for accessibility purposes (we’ll get there in a few units :sunglasses:)
  • Icon sets
    • Quantum Icons (Figma file :warning: IN PROGRESS :building_construction:). An icon set I’m creating for Learn UI Design students. Features compact, squared-off icons perfect for data-heavy or technical applications. Will continue to update over time.
    • Material Design Icons (Figma plugin, Sketch library). Google has created the largest set of clean/simple icons for free usage.
    • Feather Icons (Figma plugin, Sketch library) by Cole Bemis. A set of larger, more rounded icons for friendly or clean/simple brands.
    • Entypo Icons (Figma file, Sketch library). Another go-to icon set I’ve used a lot in the past. Sketch file can be imported into Figma.
  • Other files, apps, links, etc.
    • Drag-in assets ZIP file. A folder with cursor images, UI faces, and lorem ipsum and three- alphabet text files you can quickly access via e.g. Spotlight search.
    • Learn UI Design color palettes . A set of color swatches divided into 4 palette types (covered in detail in Building a Brand-Based Palette).
    • aText by Tran Ky Nam. Automated text entry app. $5 for Mac or Windows.
    • Top Google Fonts . A link to batch install hundreds of the most popular Google Fonts.
    • Good Fonts Table . Another go-to resource for Learn UI Design students.
    • WhatFont. This Chrome/Safari/Firefox plugin is what I use to identify nice fonts when I’m browsing the web. I wasn’t going to mention it until the typography section, but students have loved this plugin, so I’m adding it here. (Special thanks to Learn UI Design student Zack Michener for adopting the plugin for Firefox!)

HOW TO BUILD YOUR DESIGN GUT INSTINCT

RESOURCES

HOMEWORK

:memo: Lesson Figma file

Find 5-10 sites with great interface design. Write out what you believe makes each of these great, along with some screenshots of each. You can fill in the analysis and imagery into the Sketch template linked above.

Post your finished analysis to the Slack channel. Don’t be afraid to “take over” the channel with your post – it’s there for everyone to post homework, and get feedback! There are more than enough overly-negative designer communities online; this is not one of them.

FOR YOUR PORTFOLIO…

In the same way that we pick out elements from great sites and apps we love, design recruiters and hiring managers will look at your portfolio for little signals you can do their job well.

You might be tempted to show tons of different projects of all different types. But consider for a second your ideal employer (whether it’s one company, a few different, or just a general category of company – e.g. “funded startups likely to hit $1B valuations”).

Write out answers to the following questions:

  • Who is your ideal employer ?
  • What types of projects would most convince them to hire you? (e.g. ecommerce, marketplaces, specific industries, etc.)
  • What platforms would they be most interested in seeing? (e.g. web, mobile, tablet, VR/AR, etc.)

You might find it useful to look at designer job listings or talk to anyone you know who works at those companies.

Based on this reflection, adjust your 3-5 project ideas accordingly.

STARTING A PROJECT: BRAND & GOALS

Note : the video shows an outdated version of the Good Fonts Table, which has been updated to a Figma doc (and contains many more fonts)

RESOURCES

  • :memo: Lesson Figma file
  • Starting a Project Cheatsheet by Learn UI Design. Includes sample goals, brand adjectives, and brand value questions to ponder as you start a project.
  • The Brand Chart by Learn UI Design. Figma file with most common brands (fancy, friendly, quirky, techie, clean/simple) at four axes and center, and example sites plotted therein.

HOMEWORK

Using your newfound understanding of brand and how it’s conveyed, what is Learn UI Design’s brand ? What signals have you gotten – from typography, color, imagery, tone of voice, etc. – that support this brand? What could I do to make the brand of Learn UI Design even more consistent and clear? Post your answer to #1-introductory-topics.

FOR YOUR PORTFOLIO

For each of your 3-5 portfolio project ideas, use the Starting a Project cheatsheet (linked above) to help you determine (a) the brand you’re trying to achieve and (b) the goals for that app. It’s not critical that you start experimenting with typography, colors, or style tiles at this point – we’ll get to that soon enough.

If any of your portfolio projects will actually be developed (whether it’s a side project, something for work, or a free project for a non-profit), be particular conscientious of what your goals are. It can be incredibly impressive to see a designer’s portfolio that gives before/after snapshots of how successful they design was – e.g. “My design raised the average sale from $14.58 to $18.22” or “The average app store rating is 4.8 stars since the redesign, an increase of .9 stars”, etc. But you’re unlikely to make a bold impact like that unless you know what you’re striving for, and (to some degree) how much improvement is possible .

FINDING & USING DESIGN INSPIRATION

HOMEWORK

Four things for homework today:

  1. Set up a dribbble account (if you don’t have one already), and follow a few accounts that you like. Suggestions are below.
  2. Create a folder on your desktop (or somewhere easily accessible) for capturing screenshots of sites you like. Add screenshots from 3 sites to get things started. If you have done the homework for the Gut Instinct video, you can use the sites you found for that.
  3. Create a moodboard for your current project . I encourage you to post it to #1-introductory-topics and explain what sorts of things you were going for. Note: most UI projects will have a majority of items in the moodboard be other user interface designs – don’t let the Echo moodboard example lead you astray in that regard!
  4. Do some copywork of one of your favorite designs. Note: the idea here is to copy as best you can without opening up the dev tools or “tracing” the image in Sketch. You want to try and imitate the layout, the colors, the sizes all by eye . When done, post your results on Slack.

RESOURCES

FOR YOUR PORTFOLIO…

For each of your portfolio project ideas, create a moodboard of inspiration. There are a lot of reasons to include something in your moodboard:

  • Competitors who do something particularly well
  • Sites from unrelated industries who do a good job achieving a similar brand value
  • Sites that use a brand color or font well that you think you’d like to use
  • Stuff that inspires you for unrelated reasons

Moodboards are typically not included in your portfolio directly, but sometimes you’ll mention what’s inspired you as part of the story of your project – more on that soon.

3 METHODS FOR DESIGNING ABOVE YOUR LEVEL

HOMEWORK

:memo: Lesson Figma file

Note: This homework file is in Figma. If you don’t use Figma, you can open the homework file, export it as an SVG, and open it in your UI design app of choice.

I want you to put all these methods into practice.

Take 45 minutes , duplicate the Figma file above, shut off your internet connection, and open up the homework file you downloaded. You’re going to be creating variations on this, but focused on doing the following 3 things:

  • Iterating quickly: duplicate your current frame (cmd+D) and try a new idea; don’t pause to pick favorites, just keep going
  • Failing left/right: any value you change (font size, styling, color, opacity, etc.), don’t just move it until you hit the right value. Conscientiously look at one value that’s too far to one side, another that’s too far to the other, and then decide on the happy medium
  • Sleep on it: After 45 minutes of hard design iteration, save and quit. Don’t even try and evaluate your favorite design or option right now – save it for the morning.

When this exercise is over, feel free to post your iterations – or even just your favorites. If you’re tackling these videos in order, you will not have seen any videos on specific topics – like color, typography, alignment, etc. – but you should start to be getting an idea for what things work and what things don’t work.

And that is the goal.

Required fonts: Piazzolla, Source Sans Pro

RESOURCES

FOR YOUR PORTFOLIO…

Using some of the skills from this lesson, play around with small elements from each of your portfolio project ideas – colors, fonts, buttons and form controls, important pieces of UI, etc. You’ll be making a style tile for each project.

It may take a few days to create this for all 3-5 projects.

When you’re finished, narrow down your projects to just the 3 that you think you’d be able to do the best job on and will also appeal to your ideal employers.

Before moving on, go ahead and watch the portfolio lesson next. It will give you a bird’s eye view of what you’ll be working on as you continue through the rest of the course.

INTRODUCTION: ANALYZING AESTHETICS

FOR YOUR PORTFOLIO

One of the main points of this lesson is that good design is logical . It’s based on reasons. And when you see a good design, you can reverse-engineer those reasons.

This is important for your portfolio because one fo the biggest ways you can set yours apart from other designers’ is by explaining your design rationale s in your portfolio . This course will give you a lot of language to talk about the “why” behind the decision – pay attention to it, because it can be a strategic advantage for you.

Remember: if you can design one nice thing, that could be luck . But if you can design many nice things, and explain why each works, that’s skill .

ALIGNMENT

RESOURCES

  • :memo: Lesson Figma file
  • 3 Pro Tips on Alignment by Learn UI Design. A blog post of mine that goes into some detail on alignment. Most of it is also covered in this lesson, but the alternate example might help things click :slightly_smiling_face:

HOMEWORK

:memo: Homework Figma file

This file is a messy version of an “business inbox” that shows alerts for your company. Your job is to align all of the elements to achieve a neat, clean effect. When complete, compare to this assignment’s Common Mistakes guide, make changes accordingly, and post on the Slack.

Required fonts: Roboto

FOR YOUR PORTFOLIO…

If you’re featuring any enterprise apps in your portfolio, alignment is especially critical in making things look neat, since there are already so many more demands for what you need to display on the screen. It can be worth calling out any clever scheme for keeping things neat and aligned that you use.

SPACING

HOMEWORK

Coming soon.

CONSISTENCY

RESOURCES

HOMEWORK

Design a sign-up/log-in experience for a web or mobile app, paying particular attention to consistency of controls.

Please include the following functionality on the page(s):

  • Signup fields (first name, last name, email, password, agreement to terms of service, etc.)
  • Login fields (email, password)
  • Authentication via social media accounts
  • Ability to [view password]
  • Link for forgotten password
  • “Remember Me” toggle

There are a few interesting questions you need to answer with respect to consistency here:

  • Consistency between signup/login – which is presented as more important? Or are they equal? Why? (this might depend on the type of app you choose to complete the exercise for)
  • Consistency between email/password authentication and social media-based authentication - which is presented as more important, or are they equal? Why?
  • Consistency between different controls - buttons, text inputs, toggle controls, etc.

As you design, keep in mind the principles we’ve talked about:

  • Consistency first. A good way to start is by entering all text and controls in as consistent a manner as possible. It’d be great to see a screenshot of your work at this point.
  • Only break consistency with reason. Logically similar means visually similar.
  • For areas where you’re not confident (e.g. typography, color, etc.), lean towards simple solutions, and don’t overthink it. We’ll get there!

SIZING

RESOURCES

FOR YOUR PORTFOLIO…

It’s fairly common to include a “style guide” in a UI portfolio – a layout of the colors, type styles, and components used in particular project. The 5 major font sizes can be a fantastic template for doing type styles in a style guide. However, if you’re going through these lessons in order, I’d encourage you to spend more time designing your portfolio projects before solidifying styles into a guide.

SIMPLICITY

RESOURCES

  • :memo: Lesson Figma file
  • Simplicity checklist by Learn UI Design. A printable resource that allows you to keep the 6 strategies – and their sub-heuristics – close at hand while designing.
  • Clean Up Your Mess by Daniel Higginbotham. A fantastic tour of (basically all) of the 6 strategies applied to a messy poster design. Also great in that it considers visual design from a UX perspective – good visual design aids experience .

HOMEWORK

Homework Figma file

Redesign a Wikipedia article, but optimized for aesthetics. Wikipedia is a fantastic resource, but it’s clear that having a clean, no-nonsense interface was never one of their chief aims.

Because this assignment is open-ended, it’ll be one of the most challenging to date. But you’re ready for it :+1:. It might help to go element-by-element and consciously ask which of the 6 strategies you can apply to that particular element – alignment, spacing, consistency, lightening, hiding, and removing.

(In particular, the ‘hide’ strategy will be useful for this exercise. Wikipedia has a lot of functionality, and while you may not want to remove it entirely, you should try to significantly simplify the interface)

Two other notes:

  • Wikipedia is primarily a place for reading , so sizing the text well (font size, line height, line length) is one of your first priorities
  • Although Wikipedia’s current brand is quite neutral, it’s worth jotting down a few adjectives describing how you want readers to feel about the site – and at least considering if your fonts, colors, and imagery back up that brand

For an extra twist, you can try designing at a tablet size (~768px) or a mobile size (~320px)

Note : although Wikipedia looks like a hot mess, all the functionality is in there for a reason. In a true redesign, our first aim would be to understand how all the functionality fits together in the user experience. However, this is a purely visual exercise, and you are welcome to make assumptions about how important various functionality is for the sake of this practice exercise.

Give it a good attempt before looking for inspiration, but if you’re stuck, you might look at some dribbble shots of beautiful articles (Rally’s Nat Geo World Atlas, Kyril Ku’s “Clean Article Layout”).

When you’ve finished, check your work against the Common Mistakes for this assignment, make any fixes, and then post your results to the Slack for feedback and review.

LIGHTING & SHADOWS

RESOURCES

HOMEWORK

Homework Figma file

Modify the design above by adding shadows to the following elements:

  • Header
  • Cards
  • Switch button
  • Radio buttons
  • Checkboxes
  • Segmented button
  • Floating “add” button

When you come up with a solution you’re pleased with, you may wish to repeat the exercise, but going for a totally different style of shadow. You may also color, resize, or in any way adjust the UI elements as you go.

When finished, check your work against the Common Mistakes guide, and post the exported image file to Slack, and explain any particular challenges you faced or solutions you’re proud of.

INTRODUCTION TO HSB

RESOURCES

  • The HSB Color System: A Practitioner’s Primer by Learn UI Design. My public guide to HSB, including a section (not covered in this lesson) on the difference between HSL and HSB.
  • Never Use Black by Ian Storm Taylor. A great corollary to the inverse behavior of saturation and brightness is that the darkest colors will all have surprisingly high saturation. Note: this is most applicable to design that wants to use real-world lighting/coloring cues. Many great designs still use #000000 – but I highly recommend giving it a break.

HOMEWORK

Play the HSB color guessing game! That’s right. Your homework is a game. You’re welcome to post high scores! The goal is to develop an intuitive understanding of HSB.

FOR YOUR PORTFOLIO…

Explaining your rationale is critical for portfolio write-ups. This unit will give you the language to talk about the rationale behind something most people believe is subjective – color . As you use the HSB system in your designs, experiment with what making a particular color more or less saturated, more or less bright would do to the feel of the design. As always, tie your color decisions to the brand goals of the design.

LUMINOSITY

RESOURCES

FREQUENTLY ASKED QUESTIONS

Wait – RGB are luminosity low-points and CMY are luminosity high-points? Is it coincidence these are the standard screen design and print design color systems?

First, you should know that this technical aside is totally not required reading or understanding. It’s just for those of you who’ve asked.

Now, to answer the question: no, it’s not coincidence .

So, you may notice a trend here. All of these color systems – RGB, CMY, HSB, HSL – are TLAs. That’s because color is, mathematically speaking, a 3-dimensional space. Let’s take RGB for a second here. Each dimension is the same length – 256 (that is 0-255, or, if you prefer 00-FF). It’s a cube! One corner is white; the opposite corner is black. R, G, and B make up 3 more corners, and if you think about it, you’ll realize cyan (green-blue), magenta (red-blue), and yellow (red-green) make up the other 3 corners.

Now imagine holding that cube, and then rotating it in your hand so the black and white corners (which are opposite each other) are directly on top of each other. If you viewed the cube from above (allowing yourself to see through the cube to see all 6 non-B/W corners), you’d notice a hexagon made by those corners – the hue wheel. It takes some fancy math to pretend those are all in one plane, as they are in the HSB system. But that fancy math is what’s responsible for making R, G, B, C, M, and Y unique points as far as luminosity goes. It’s definitely not arbitrary.

GRAY: THE MOST IMPORTANT COLOR

HOMEWORK

Create a dribbble-style wireframe of a task/project management app that helps you manage work or personal projects. The goal here is simply to get more comfortable using gray by designing a screen of medium complexity – it could include e.g. tasks, descriptions, assignees, due dates, comments, documents, events, reminders, and more.

I’d like you to follow a few steps here:

  1. Browse dribbble’s wireframes (UENO also has many good high-fidelity wireframes)
  2. Create an initial sketch of the screens with pencil and paper
  3. Jot down a few adjectives describing the brand (note: since you’re confined to gray and most imagery would be user-uploaded anyways, your brand will likely just fairly neutral – “clean and simple” – but this is worth getting in the habit of anyways)
  4. Design the screen in the app of your choice using the grayscale techniques in the video above
  5. When you’ve completed the first draft of the design, perform a “squint test” – which elements stand out the most? Which stand out the least? List them out and verify this is indeed a reasonable order of importance, correcting the design as necessary.
  6. Post the results to the Slack

Since this is an open-ended design, it’s significantly more challenging than some of the downloadable homework assignments. It’s worth mentally reviewing lessons from the Fundamentals unit – e.g. the 6 strategies of simplicity, my cheatsheet for proper sizing, etc.

VARIATIONS: THE MOST IMPORTANT COLOR SKILL

RESOURCES

  • :memo: Lesson Figma file
  • UI Color Cheatsheet by Learn UI Design . You may have grabbed this cheatsheet in the Luminosity lesson, but if not, here it is again. Now that you know how hue, saturation, and brightness move in combination, you can job your memory with this cheatsheet.

HOMEWORK

Homework Figma file

Coloring time! Add color (and otherwise style as you’d like) the art app search design attached above. While you’re allowed to use as many colors as necessary (such as yellow for the star), focus on making adjustments from a base color of your choice as much as possible.

Remember the techniques discussed in the video:

  • The opacity technique for creating lighter variations
  • The softlight black technique for creating darker variations
  • The just-barely-colored technique for generating matching grays (especially useful for text)

When you’re finished, check your work against the Common Mistakes list, make any changes, and post your design to Slack.

Fonts required : Source Sans Pro

3 WAYS TO FIX CLASHING COLORS

RESOURCES

  • :memo: Lesson Figma file
  • UI Color Cheatsheet by Learn UI Design. To make luminosities contrast, you have to understand how to move them up or down (by shifting H, S, and B). The UI Color Cheatsheet has you covered on that one.

PICKING A PRIMARY UI COLOR

RESOURCES

  • The Future is Fluid: Inside Dynamic Logos . An eye-opening look at how a brand can “think beyond a single hue”. Again, this sort of thing is not to be used as a hammer – but this is one of the best branding articles out there.

FOR YOUR PORTFOLIO…

As we write our portfolio writeups, we always want to explain the rationales for design decisions. Clearly articulating why your primary brand color meets the brand goals is an easy win.

CREATING A BRAND-BASED PALETTE

RESOURCES

  • :memo: Lesson Figma file
  • Learn UI Design colors (for Sketch, for Figma). A set of color swatches divided into 4 palette types – primary, playful, muted, and vibrant (as explained in the video).
    • For Figma, you can add this file as a Library (if you have the professional plan), or simply copy the color styles into files you’d like to reference them from.
    • For Sketch, select “Add Library to Sketch”, and then you can use these colors as Layer Styles or via library color swatches.

HOMEWORK

Homework Figma file

Add color to the attached mobile design, using a different color for each category of ingredients in the list (and the header). I recommend re-creating one of the palettes talked about in the video (by watching the video, though not copying it – or the color swatches library – exactly). And, of course, make variations as you find interesting!

Add a brief list of brand adjectives you feel are conveyed by each palette.

When finished post to Slack.

FOR YOUR PORTFOLIO…

Creating a nice palette of multiple colors is exponentially more difficult than using a single hue well. If you’re able to create particularly beautiful color palettes for your portfolio projects, feature them prominently – they’re an excellent signal of a skilled visual designer.

DARK INTERFACES

RESOURCES

HOMEWORK

Homework Figma file

Re-create the attached dashboard UI as a dark interface. Feel free to modify the specifics (colors, stylings, information displays) in order to achieve a more natural dark design.

Check your results against the Common Mistakes guide, then post to #3-color on the Slack.

Required fonts: Fira Sans

GRADIENTS

RESOURCES

  • :memo: Lesson Figma file
  • Gradient Generator Tool by Learn UI Design . A tool I created for making linear, radial, and conic gradients in hue-based color systems (such has HSB and HCL). Export as SVG and drag file into your design app of choice.

HOMEWORK

Homework Figma file

Recolor the screen in the attached homework, using a different color gradient for each user of the app. You can imagine, if it helps, that each user was able to pick their own gradient out from a list when signing up for the app. Try to come up with a set of gradients that creates a tasteful, coherent whole. You’re welcome to use the gradient generator tool somewhat, but please also try picking at least some gradients by hand. Post your completed design to the Slack.

Required fonts: Rubik

FOR YOUR PORTFOLIO…

Gradients are one of the easiest ways to make a boring design a little more interesting. While they certainly don’t belong in every project, you can feature them where they support your brand goals to show off a little more advanced usage of color.

INTRO TO TYPOGRAPHY

RESOURCES

As mentioned in this lesson, there are fundamentally two skills to UI typography: choosing good fonts and styling text . In this unit, the lessons related to each skill will be interspersed. However, if you want to master one or the other first, here are the videos pertaining to each.

Lessons related to choosing good fonts :

  1. Good Fonts Table
  2. Choosing Fonts Overview
  3. Choosing Body Fonts
  4. Brand & Letterform
  5. Pairing Typefaces

Lessons related to styling text :

  1. Styling Text I: The Basic Rules
  2. Styling Text II: Interactive Apps
  3. Styling Text III: Editorial

GOOD FONTS TABLE

The Good Fonts Table is a Figma file with over 100 free or very cheap high-quality fonts. These are fonts I use often throughout Learn UI Design and in my own career – and the recommendations are so thorough, I could use nothing else for the entire rest of my design career (this is hardly to brag; Vignelli said he could get by on 6).

Included for each font:

  • Usage recommendations (what brand does each font evoke?)
  • Overview of weights and styles
  • Text samples
  • Download links

CHOOSING FONTS: OVERVIEW

RESOURCES

HOMEWORK

Begin your own personal font database.

Download WhatFont, the browser extension for Chrome/Safari/Firefox. Use it to identify at least one font you’re not already familiar with and store (a) a screenshot and (b) a note on its brand (as far as you can see), interesting characteristics, and where you think it would work well. You can do this in a Figma file, a note-taking app, or wherever is most convenient.

CHOOSING BODY FONTS

RESOURCES

  • :memo: Lesson Figma file
  • Typography Checklist by Learn UI Design. A cheatsheet containing, among other things, the criteria for good body fonts.
  • Talking Type by Jessica Hische. Notes from some typography talks by designer/letterer extraordinaire. Excellent thoughts – with plenty of examples – from an industry leader.

HOMEWORK

For each of the following typefaces, write a brief description of whether or not the font makes a good body font – and why .

  • Cormorant
  • DIN 2014
  • Josefin Sans
  • Manrope
  • Overpass
  • Raleway

STYLING TEXT I: THE BASIC RULES

RESOURCES

  • :memo: Lesson Figma file
  • Typography Checklist by Learn UI Design. A cheatsheet containing, among other things, these basic rules of styling text.
  • Practical Typography by Matthew Butterick. A thorough guide that is half about proper use of typographic characters (quotes, dashes, and spaces) and half about actually more practical aspects of typography. I particularly recommend the “Typography in 10 Minutes” section – though it won’t be huge news to someone who’s finished this section.

HOMEWORK

Design a text-heavy page – e.g. the start of a chapter in an online book, an encyclopedia entry, a blog post, a newspaper article, etc. Once you’ve decided on what you want to do, jot down a few words or phrases describing the brand you’re trying to evoke. As you complete the design, pay special attention to styling text “by the rules”.

BRAND & LETTERFORM

RESOURCES

HOMEWORK

Create five 800x600 “shots” showing off type set in each of the 5 major brands – clean/simple , friendly , fancy , techie , and quirky . You pick the context, the fonts, and any other design elements. Be conscientious about how strong you’re trying to convey each brand – and for each shot, note (a) the brand you’re trying to achieve, and (b) the strength you’re going for (subtle, moderate, strong).

STYLING TEXT II: INTERACTIVE APPS

RESOURCES

HOMEWORK

:memo: Homework Figma file

In the file above, there are two designs whose text has been replaced with 16px unstyled Helvetica. Your job is to style every instance of Helvetica appropriate to its role in the interface and the brand of the design (presumably including choosing a new font). A brief note about the brand has been left next to each design.

When you’ve completed the assignment, you can look at the second page of the Figma file for my proposed solutions.

PAIRING FONTS

RESOURCES

  • :memo: Lesson Figma file
  • Typography Checklist by Learn UI Design. A cheatsheet containing, among other things, the principles in this lesson.
  • The Step-by-Step Guide to Pairing Fonts by Learn UI Design. My blog post on the same topic. Will be review to anyone watching this unit, but contains a few different examples to help drive the points home.
  • The Value of Multi-Typeface Design by Bethany Heck. Warning: advanced practice only ! Bethany is an amazing typographer, and perhaps the world’s leading advocate for pairing 4, 5, or even more typefaces in a single design. In this article, she explains her thought process over a number of excellent examples.
  • Best Practices of Combining Typefaces - Smashing Magazine. Has some great examples, but most of them (6 of 8?) boil down to “pick a more standard, run-of-the-mill body font”

HOMEWORK

Similar to the homework in Brand & Letterform, you’re going to be creating 5 more typographical “shots” (loosely defined as a 600x800 px piece of UI showing off some font pairings in a semi-realistic context). Include at least one low-brand pairing (non-superfamily, preferably) and at least one high-brand shot from a variety of different settings (though you don’t need to follow the 5 major brands framework if you don’t want to).

FOR YOUR PORTFOLIO…

The logic of pairing fonts laid out in this lesson is (a) very commonly used by designers, but (b) almost never stated by designers. Outlining the font-pairing logic in your own designs can be a strong way to differentiate yourself as a rationale-based designer. And, let’s face it, those skeleton overlays look really cool! :sunglasses:

STYLING TEXT III: EDITORIAL

HOMEWORK

:memo: Lesson Figma file

The Figma file above contains an article about the history of luxury wristwatches. All the text is currently set in 16px Helvetica. Your task is to choose new fonts and style the text to create a fully branded, beautiful article page.

Begin by jotting down some adjectives or phrases describing the brand you’d like to achieve.

The following elements are shown in the file for styling:

  • Title
  • Headers
  • Body text
  • Pull quotes (2)
  • Caption
  • Nutshell

Please also add:

  • A drop cap
  • A run-in
  • One other text element, your choice – a sidebar, footnotes, alternatively-formatted quotes, etc.

When complete, double-check that your design backs up the brand you wrote down at the beginning.

2 симпатии