[uilearn.com] UI Learn

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

UX vs UI

In the last decade, the industry has a specific jargon for almost every aspect of design, but rarely everybody agrees on them.

What it means to be a UI/UX designer in one organization might not mean the same in another, let alone to other professionals.

The terms user interface and user experience are thrown around like a punching back and people can’t settle on which acronym means which thing.

This is purely my point of view, so you can understand where I am coming from.

Before we even start to think about the two, I don’t like separating them as a practice. That separation means that one can exist without the other and I simply don’t believe that to be true.

Any digital product is created by some type of an interface, and while some pieces can be more easily isolated for critique or discussion, they don’t have much value without a great user experience.

UI is focused on the product, a series of snapshots in time. UX focuses on the user and their journey through the product

Scott Jenson – Product Strategist at Google

Homework:

Take a step back from a project you are working on or your personal website even.

Write down what is the main problem you are trying to solve from the user’s perspective. Establish one baseline “point A” (get more leads) as well as some additional associates with the problem.

And now write down the answer to their problem… the point B.

For example, if you’re buying a drill, you don’t really “want” the drill, you want the hole that it can produce. And often you actually don’t want a hole as an end product, you probably actually want the result that that particular hole will allow for you.

It’s up to you as the designer of the product to determine how far you will take the solution. And don’t forget, oftentimes general solutions can be better than highly specific ones.

What is the main problem or problems surrounding the users’ “Point A” and where do they want to go “Point B”

This is how I view UX design—point A to point B.

The interface is a stepping stone that will bridge the gap between having the problem and solving the problem.

Project Organization

I can’t tell you the times I regretted not organizing my file structure.

This method will help you stay on track designing and not to worry about everything outside file organization.

This is my way that I organize design projects.

I change some small stuff here and there, but overall this is the system I use to make my process more streamlined.

  • Clients
    • NIKE
      • Contracts
      • I keep the legal documents separate from the design documents. I also like to keep the contracts at a high level here as opposed to putting each individual contract under the project folder. This lets me know that I can always find design-related material in the projects folder and never risk-sharing confidential items with the wrong person.
        • Master Service Agreement (MSA)
        • Statement of Work (SOW)
        • Non-Disclosure Agreement (NDA)
        • Subcontractor Agreement
      • Projects
        • iOS App
          • Assets
          • This is like the junk drawer, but still needs to be somewhat organized
            • From Client
              • Brand Assets
            • Old Designs
            • Reference Material
            • Stock Images
            • Icon Sets
          • Design
            • sketch

              • _archive

                • never throw anything away

              • file naming convention

                • Client Name
                • Project
                • Type of Document (UX, UI, Flows, Etc.)
                • Your Initials
                • Version Number

              • [project] [platform] [stage] [name] v0.1.sketch

              • I typically start all version numbers at v0.1 as a personal preference. As small incremental progress is made and I feel like enough has changed to warrant a new name, I will bump the number to v0.2 and archive v0.1 and never throw it away.

              • I will bump the version to 1.0 before I present it to the client for the first time. After the initial presentation I will incrementally adjust v1.1, 1.2, 1.3, and so on.

              • None of these numbers have inherent value on their own. They are used exclusively to help you keep track of your work. So if there is another numbering system you really like, go for it! This is what I do, but you are the designer and you should name your files in a way that makes you comfortable. Never tried a method like this? Download the sample project folder structure and give it a go, but don’t feel burdened with i

          • Review
            • 2021-01-01 UI
              1. app icon
              2. launch image
              3. create new account
              4. sign up
              5. forgot password
            • 2021-01-02 Onboarding
              1. create account.png
              2. log in.png
              3. forgot password.png
            • [Year Month Day] + Title
              • This is where all exported designs get ready for presentation. Think of this folder as a dressing room before you go out on stage.
              • Naming conventions here are critical for ease of presentation and document sharing.
              • Name every folder with the following naming convention. This will ensure that items are chronological by year, then month, then day. The Title is meant to give you a small hint as to what is in the folder.
              • Hyphens and spaces are optional and can be substituted with whatever you prefer. I do encourage the use of spaces in file names, simply because that makes them a little more searchable from Spotlight on the Mac. For example I might hit CMD \ (my custom spotlight shortcut) then type in mymonero sketch. This will immediately take me to that document name. Using hyphens will sometimes confuse the searching functionality.
              • Protip – searching for a design file in the spotlight is a great way to access the entire folder inside of Finder with ⌘ the return, which will go to that particular file, whereas return by itself will open the file. Your choice depending on what you want to do.
          • Prototype

Homework

  • Create the sample file structure and familiarize yourself
  • Recreate your own file structure with UI Learn as the client name instead of NIKE
  • Make sure you’re using a cloud service like Dropbox or Google Drive if you don’t want to fall victim to hard drive failure issues. I personally use Dropbox.
  • Put any work you’ve created so far in the Projects folder with an appropriate name folder
  • Use this as your new digital structure for future projects (if you want to, of course)

Design Process

  1. Understand the problem
  2. Determine the complexity
  3. Use lists, content maps, and user flows to help guide the project
  4. Wireframe or not based on project complexity
  5. Set design direction
  6. Present early and often
  7. Explore, iterate, and exploit
  8. Systematize

Why

It’s important to understand the high-level overview for the design process because it’s very easy to get stuck on individual details without knowing the larger strategy.

Choosing the color and the style of a button is important, but more importantly what is the strategy behind the button’s existence in the first place.

Choosing your weapon

I love design tools and altho I use Sketch for the majority of my work I test every single design tool out there. I am familiar with Sketch, Figma, XD and even inVision Studio.

If you haven’t done that take on the challenge just to explore different tools, just play with it.

However, with that said I know that the most efficient way to work is not jumping from Sketch to Figma to XD. Just pick one tool and stick with it, learn the ins and outs of it. Every shortcut, create custom shortcuts that would make your workflow incredibly fast.

At the end of the day - you are the designer. This a decision you can take for your designs, as different companies use different tools - so having a knowledge of all of them is very important.

My goal for the course is for YOU to learn design tactics and workflows that can be implemented even if you decide to use Photoshop.

What are the deciding factors?

If you just got hired at a product company or an agency and everybody uses Framer, well surprise - you are going to learn to use Framer.

Whatever the toolset of the company is using that would be expected from you as well. Design software has become very similar so it doesn’t take long to learn a new one - don’t let that scare you.

If you’re going solo, you have less to worry about in regards to the team, but you do need to ask about the preferred file format, if any, before starting a project.

Just like with any part of the design process, communication is key.

Don’t make assumptions that can jeopardize the future of your project without setting expectations first.

Cost

  • Sketch – 30-day free trial then $99 for up to a year’s worth of free updates and Sketch Cloud.
  • Figma – Free for a single user with 3 projects and $12/month for access to unlimited projects and team library features.
  • Adobe XD – Free for one shared prototype and shared design specs. $9.99/mo and 2GB of cloud storage for unlimited shared prototypes and design specs with 100GB of cloud storage.
  • InVision Studio – Free with one active prototype. $15/mo. for 3 prototypes. $25/mo. for unlimited prototypes.
  • Framer X – No free plan. Starts at $12/month for unlimited updates and projects. $79/month to access Team Store (library)

Capabilities

Each tool has slightly different features to varying degrees. Sketch has a very specific way of dealing with symbols and overrides for text and images, whereas Figma, Studio, and XD are more similar in the way you edit components right in place. I’ll cover much more of this later, so don’t let this concern you right now.

Typography Essentials

Inconsistent usage of font sizes and weights is often what the majority of designers struggle with.

And I am not talking about designing old vintage signatures where you can use 10 different sizes and weights and it looks amazing, but I am talking about interface design, where you need to have a reliable and consistent system.

I have this rule of four that I’ve learned a while back, and while all rules can be broken, first you need to understand the boundaries and why do they exist in the first place.

This is a good rule of thumb to start with.

You can come to the realization that working with 1-2 type sizes works best for you, and this is totally fine - even the more experienced you get the fewer sizes you will use.

What are some variations of a font size?

  • ALL CAPS
  • Bold Headlines
  • Regular text
  • Emphasized

Typography HIG

The styles are as follows:

  • Titles & Actions = 17pt
  • Subtitles & Body Copy = 15pt
  • Secondary Actions = 13pt
  • Metadata = 11pt

Color

The easiest way to distinguish a title from a subtitle is to make the title text black and the subtitle to be an action or a lighter gray.

Weight

Similar to color if you play with font weights this can give different definitions to the text used in the design. You can look at the paragraph and the username - they use the same font size but just bumping it up to bold makes the treatment different. What if we made the paragraph bold? Pretty harsh to read ain’t it?

Position

Simply changing the position of text can affect its meaning used in the context of an interface. Take, for example, the right-aligned text of set value inside of the Settings panel inside of iOS.

Case

Changing between different text cases can impact the look and the perceived functionality of what you’re designing.

  • Lowercase
  • Uppercase
  • Title Case

Lowercase

It’s rarely a good idea to use just lowercase unless you have a very strong reason to do so. Either that be a branding thing or something else.

UPPERCASE

UPPERCASE can be a very nice way to provide an interesting variety in your typography mix. Keep in mind that UPPER CASE LETTERS will appear to be a font size larger. UPPER CASE ****might be used for smaller titles on lists of things, or maybe even primary action buttons.

Title Case

Title Case is great for titles. Make sense, right? So keep that in mind for your titles, but you may also experiment with Title Case on your buttons or actions as well. It’s a subtle, yet handy differentiator when it comes to handling typography.

Homework:

For your design exercise, I want you to design a screen for a smart AC (think of Nest if you are struggling) control screen.

Parameters for the design

  • Use the SF Pro font https://developer.apple.com/fonts/ Scroll to Fonts and click “Download SF Pro”
  • If you’re on Windows you can still use SF Pro, but it requires a little work. Totally fine to use Inter, Roboto, or Helvetica.
  • Assume that the AC controller is already connected to your phone.
  • Use no more than 4 type sizes for all of your data. Use either 24pt, 17pt, 15pt, or 13pt fonts.
  • Design on either an iPhone X canvas size (375x812) OR the size of the device you have in your pocket. If possible mirror to Figma, Sketch etc. while designing.
  • Try to use text as much as possible as the interface. Try not to rely on too many boxes or button shapes.
  • Possible attributes for the settings screen to design:
    • Room Name
    • Temperature
    • Status (On/off)
    • Electricity Usage
    • Check for updates
    • Firmware version

System Fonts

How familiar is a user with a specific system is maybe the main deciding factor when you talk about fonts, especially when designing native iOS or Android apps.

Your phone is a utility tool most importantly - you use it to check the weather, wake up in the morning, go to bed in the evening or waste your time on social media. It is just a passageway for the content you are trying to hear, see watch or… consume.

When we talk about web interfaces you can go a little bit crazy with fonts, however, I’d say that learning to design with a system font is the best way to understand deeply the world of typography.

You are the designer , so unless there are font requirements for your project, YOU should decide when to use system font and when you feel like going custom.

Homework

Continuing our homework from the last lesson.

Design a subscription (paywall) screen/s for your smart home app that we started. If you are struggling to find the inspiration you can find some on Mobbin.

If you have used SF Pro, I’d recommend you use Roboto for this one. Also, think of how will this scale on Mobile and Tablet.

The screen should contain:

  • Title - No Ads
  • Paragraph - Get rid of all those banners and videos when you open the app
  • Two payment:
    • $1.99/month - Monthly, cancel anytime. - Save 50%
    • $0.99/week - Weekly, cancel anytime
  • Notice - Subscriptions will automatically renew and your credit card will be charged at the end of each period unless you unsubscribe at least 24 hours before. To manage your subscription, access your Apple ID profile in your phone settings and look for the Subscriptions section.

Text Hierarchy

Hierarchy is a system in which members of an organization or society are ranked according to relative status or authority. In our case, these are interface elements.

Hierarchy is important because it elevates the significance of one interface element over another in the context of a general layout. Usually, you create your hierarchy first with your type size and style.

When you start considering hierarchy for your screen you can ask yourself:

  • What is the planned user action that I want customers to achieve?
  • Is there something specific they need to accomplish?
  • What can they do on that particular screen?
  • What is the single most important piece of information on the screen? What is the second? What is the third?

Ranking things one above the other and sometimes not the most important thing should be the most prominent. This is hierarchy explained super simple.

Homework

Design a leaderboard screen or screens. You can think of it as a fitness score who workout out the most, or any other even that interests you.

You should use avatars and names.

Be sure that you would use a numbered list, so each person has a number or ranking, and give them some score (the person in the first position should have the highest score).

Create a filter on top: All-Time | Last 7 Days | Last 90 Days

Give the list of people a title you decide where it should go above or below the filters.

Think of how you can make the screen more interesting, maybe the top 3 are showcased differently than the others in the list? Maybe they have an award? You decide what works best.

Remember what we discussed in the lesson.

  • What is the most important piece of information?
  • Revise your typography to reflect the hierarchy
  • Use type size, weight, and color to your liking
  • Put yourself constraints and maintain consistency

Text and Elements

Combining text with elements is really starting to get into interface design. I mean let’s face it, how often would you see just one line of text.

Often times it’s text plus some other text, or with an image, or with some visual element.

Our goal when working with text and elements is to create a nice and cohesive balance.

Key takeaways:

  • Pay attention to overall balance at a high-level. (zoom out)
  • Create the balance at a low level—size, spacing, color, copy, etc. (zoom in)
  • Be generous with your negative space surrounding all text elements.
  • When aligning text horizontally, align with the baseline.

Homework

Design a list view of an e-commerce website, this includes how it will look both on mobile and desktop. Reference: https://www.nike.com/bg/w/new-3n82y

DO NOT COPY IT 1:1

Color Picking Methods

Colors can be overwhelming. Sometimes for me is also hard to pick the right color for a project.

In this lesson, I am going to break down the basics of choosing the color and cover RGB, HEX, HSL, HSB and you can pick your desired method.

RGB stands from Red, Greed, and Blue. In every color, there is a mix of RGB. This is what comes from your monitor. There are 255 values of each color on the spectrum. So if you select 255 on each value you will get pure white, and if you do 0 you will get pure black. Remembering and using RGB codes is hard and not very intuitive really.

What you will find a bit more useful is HSB and HSL really.

Homework:

Create a red rectangle, duplicate it into 4 rectangles on an 800x600 artboard

  • HSB
    • change only the HUE
    • change only the SATURATION
    • change only the BRIGHTNESS
  • HSL
    • change HUE and LIGHTNESS and you’ll see that the same changes occur
    • change the SATURATION and you’ll see that this is the difference
  • HEX
    • adjust the red positions
    • adjust the green positions
    • adjust the blue positions

The Importance of Gray

Text, backgrounds, panels, form controls — almost everything in an interface is grey.

You’ll need more greys than you think, too — three or four shades might sound like plenty but it won’t be long before you wish you had something a little darker than shade #2 but a little lighter than shade #3.

In practice, you want 8-10 shades to choose from (more on this in “ Define your shades up front ”). Not so many that you waste time deciding between shade #77 and shade #78, but enough to make sure you don’t have to compromise too much.

True black tends to look pretty unnatural, so start with a really dark grey and work your way up to white in steady increments.

Homework:

Design a simple calculator with three different color schemes.

  1. Neutral grey
  2. Warm or Cool grey
  3. Fully colorful with lighter and darker variants used as “colorful” greys

You decide on the HUE, but used limited saturation and brightness for the grey buttons.

Primary and Secondary Colors

If you think of a primary call to action, immediately some of them pop in your mind, login, signup, enroll, save think about them as making forward progress.

Secondary actions often cancel, edit, skip, filtering, back things that don’t often make forward progress.

When designing primary actions think about how much it should stand out, it should be the main call to action on the screen.

Homework:

Redesign airbnb.com or design a similar product. Up to you.

  • Choose a single primary color that passes AA accessibility with a score of 4.5 or higher
  • Design desktop or mobile, you decide—but in both options present a primary “search” button or with a search icon (or icon + label
  • Make sure the color is strong and full. No border buttons on this assignment! =)
  • Use any type of input field style you’d like
  • Keep it very simple overall. Focus on your color usage.
  • Add a few navigation items at the top a Sign In button.
  • Feel free to rename the nav items.
  • Focus on the exact color you are using for the primary call-to-action and the navigation items

Color Modifications

It’s hard to figure out and it’s hard to know how many colors should I need and how much of this color should I use. Should I modify these colors it can be very overwhelming.

Hopefully, we managed to make this a tad bit easier. But what I want to focus on in this lesson is that a certain color is going to look one way at a certain background than another. So if we take a blue call to action on a green background versus a white background versus a black background.

Colors reflex based on surfaces, so right now if you bump up your monitor’s brightness it will light up your face, the same way if you lower it down it will become darker.

Homework

Design a small calendar widget modal for creating a new event. Can be mobile or more of a floating UI in an 800px wide canvas.

Try to show someone who has filled it halfway out so far. So some input has been added, other inputs have not been completed, and one of them is currently selected.

Keep in mind all of the Typography and Layout principles we’ve colored, but focus primarily on COLOR on this one.

Working with Gradients

Gradients have 3 main use cases,

They can be used for adding visual interest —jazzing things up or making them pop.

They can be used for utility —fading things out or making smooth transitions.

And They can also be used for interactivity —creating depth.

Try different gradients in practice.

Homework

Recreate the Sketch icon with gradients, or the Figma icon and spice it up with gradients. Why am I giving the Sketch one? It has multiple gradients and even lines gradients so it will be valuable to learn how they did it.

Dark Interfaces

Dark mode has got specific rules that we should follow to make it natural for the users.

I personally love using everything that is made a dark interface and it’s my preference, altho it has some limitations when designing dark mode.

Practical uses of a dark mode?

  • Reduce eye strain
  • Support visual hierarchy
  • Make solution feel more mysterious
  • Create an impression of luxury
  • Improve readability in the nighttime hours
  • Ensure the context of use (entertainment apps used in late hours)

When to avoid it:

  • The solution is used during the day outside.
  • There is a lot of text to read

iOS Human Interface Guidelines main principles:

General:

  • Focus on content.
  • Test your design in both light and dark appearances.
  • Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings (tips from the section above will ensure this).

Color:

  • Use colors that adapt to the current appearance (use dynamic colors – two color palettes).
  • Ensure sufficient color contrast in all appearances.
  • Soften the color of white backgrounds (white background – darker color accents, dark background – lighter color accents).

Icons & Images:

  • Use SF Symbols wherever possible (The easily adjust to dark and light modes).
  • Design individual glyphs for light and dark appearances when necessary.
  • Make sure full-color images and icons look good.

Text:

  • Use the system-provided label colors for labels.
  • Use system views to draw text fields and text views.

Material Design main principles:

General:

  • Darken with grey (use dark grey instead of pure black)
  • Color with accents (apply limited color accents)
  • Conserve energy (darker colors save the power of devices with OLED displays)
  • Enhance accessibility (use principles mentioned in the section above)

Homework

Here you have three options that I would like you to choose one from:

  1. Take an existing project that you have worked on, not the full project but 2-3 screens, and create a dark theme out of it.

  2. If you want something extremely new, open https://mobbin.design/apps/airbnb and pick 2 screens that you want from here and recreate them in Dark mode. Feel free to change buttons colors, position, or whatever you want!

  3. Create a flow of screens no matter what the topic is. I advise you to stick to 3 screens no more or less so you don’t get overwhelmed with doing a full-fledged UI project. IT should be dark mode!

Grids

We all love falling into systems, and the grid is something that can help you design faster and more consistently. However let’s keep in mind that this is not something static, this is rigid and like all rules, we can break them. In fact, in a lot of projects, I don’t even start with grids, I prefer first to have the content ready and figure it out from there.

You don’t want to be limited to be working just inside this grid. Yeah, sometimes this can set some boundaries that you can work in but not always.

When it comes to mobile tho, I can’t really recall when was the last time I actually used a grid. What is important for native apps is the spacing of elements that you have to incorporate, and the margins on left and right. I look at it being more of a one-column grid, the only option to have a grid is if you have some horizontal layout that you can scroll through.

This grid isn’t made to work just with elements but with a spacing of text and font sizes as well, often times the rationale behind the grid doesn’t come from “I just want this number” but a well-thought process why we should use exactly this spacing in these areas.

Homework

Design a movie streaming app of your favorite tv show or favorite character. Create one desktop version of it and one mobile version. Look at how elements and grids scale up and down. If you want use a red mark when submitting the homework. You should include their name, a call to action, some bio, and whatever else you decide to include.

Don’t worry if you are not sure what you are doing. We are going to cover more in-depth how to deal with responsive design later on.

Alignment

Alignment is often easily omitted as it’s one of the few design principles which are in fact visible. It’s a hidden background process that is used to manipulate and position foreground active elements in a simple yet powerful way.

Alignment is especially important amongst publication sites and news platforms. If delivered successfully, alignment vastly improves the customer reading experience. I, therefore, intend to demonstrate how Medium has understood the intricacies of alignment within their user interface design in order to create structure and order throughout their site.

Homework:

I would want you to design a simple form that would include:

  • Back arrow
  • Title Image
  • Small title (description)
  • 5 paragraph sentence for a description
  • quantity input field
  • add to cart button

Focus on alignment and scalability.

Keep in mind that especially with forms people scan the left edge of all options.

Look how you can left align options as much as possible. Look how you can make a sense of ownership over the child content.

Spacing

In design have four main factors in such as:

  • Content
  • Graphic
  • Navigation
  • Identify

Spacing has not only an impact directly on these factors but also on aesthetics design.

Even more, it gives the page a united harmonic look. It decides you want them to pay attention to what.

If you know the principle of spacing, you can use it in all your products. And you have a powerful strength of designers.

In conclusion

  • You will improve the readability/legibility of the user by the respect the information hierarchy, which allows track and comprehend information more easily.
  • You will have a strong spacing system with limited values and limited application rules
  • Developers will become faster as they know all the rules of your spacing system.

Homework

Design a simple login screen with the following elements.

  • logo
  • email [input field]
  • password [input field]
  • sign in CTA
  • forgot the password link

Try three different versions of density on three separate artboards to compare.

  1. high density (0-4px margin/padding)
  2. medium density (8-16px margin/padding)
  3. low density (16-24px margin/padding)

BONUS

Include an additional screen with the email input field active with the keyboard showing.

EXTRA BIG BONUS

Show an error state for the email field that says “Invalid email format” or something similar.

Mastering Whitespace

In interaction design, white space or “negative space”, refers to the empty space between and around elements of a design or page layout — between paragraphs, pictures, buttons, icons, and other items on your web page.

It is often overlooked and neglected.

Well, despite its name, whitespace does not need to be white!

It can be any color, texture, pattern, or even a background image.

Homework

Design a news website.

Focus on what is the most important in these websites - content first.

The content should be readable and scalable. If you are struggling to find the inspiration you can search on Dribbble.

However, I don’t want you to copy a design 1:1.

For example, I am a Formula one fan so I’d redesign their homepage.

Interactive Layouts

For the majority of our designs, we are going to be designing simple static screens. But what will set you apart is when you start introducing these little delights of interactions.

Let’s be honest, interfaces aren’t all static. Especially in our day in age, everything is swiping, tapping, exploring different patterns.

Homework:

Create a simple task management app layout. Add around 6 or so tasks to the main screen.

Then design an expanded version of one of the tasks that include some additional notes.

Animate between them.

Put as much or as little detail into it as you’d like.

Working with Inspiration

Using design reference is great as a starting point sometimes, whether it’s a typeface, color, or layout. Using something just to spark the thinking is great. This comes with its good and bad things, although you should be mindful of what are you taking as a reference the line where a reference becomes rip off is very thin.

Copying a design pixel by pixel, screen by screen gets you exposed to design decisions that you wouldn’t have made on your own. There is a big difference between learning how something is done and reproducing it.

It’s tempting and easy to do, but if you focus too much on other people’s work you won’t be able to fully have confidence in your own work. What you should do is use inspiration or copy just one aspect, whether that’s typography, layout, or color.

Oftentimes copying that one thing doesn’t make sense, simply because this is synonymous with that existing product. If you look at Stripe’s gradient and if you replicate it, everybody will know from where you took it. So even if you want to do this angled view, it’s not really worth it because people will know from where you actually took it.

Homework

You have two assignments for this lesson.

Screenshot 2 designs that you like, one desktop and one mobile. Note down the things you really make the design good and the things you think they can improve on.

Recreate the same screen exactly as they have it designed. Maybe change the typography if they use a paid font, but everything else replicates it 1:1.

After you have done this pick the one single elements you like the most and create a design of your own. The app/website should not be the same vertical as your inspiration.

So if you copy something from Fintech don’t use it on a fintech product/website. Use it as inspiration and create something new and original.

Working with Images

A picture is worth a thousand words.

This is simply because we can digest more information with a quick glance at one photo. How often have you heard somebody tell you oh I am more of a visual person. Well, that’s a fact, a lot of us are more visual, we just respond better to visual elements. This mainly comes because we have eyes, we always look at things, we recognize things.

It’s the same thing, you are looking at me right now - and I am looking at you. This creates some sort of emotion and images do the exact same thing.

Pictures, images, illustrations are quicker to see and digest information. Why do you think Instagram became so popular so fast? How it all started and how their product pivoted. Instagram launched as a whiskey and bourbon check-in, plan, and share photos. However Kevin Systrom saw that majority of people use it mainly to share photos and sometime in 2010 they pivoted just to photo sharing with the ability to like, comment, and share plus add filters just on a mobile device.

Resources:
:free:Free: Unsplash , Pexels , Pixabay

:dollar:Paid: Shutterstock , Depositphotos , iStock
Homework
Create an onboarding flow of a fictitious app (or you can use some past project of yours). I want you to use all methods:

  1. Create that flow with static images. Think of how to pick the right images to spark the correct emotion.
  2. Use illustrations. You can try to draw one but if that’s hard there are plenty of resources out there. https://undraw.co/ and https://www.humaaans.com/ just to name two.
  3. Use icons to convey the benefits in a single screen rather than split in a flow.

Buttons

A button is a fundamental UI element that will heavily affect your interaction design. They have the power to compel users to convert, to carry out an action.

Buttons are a middleman between the user and the product and are charged with keeping the conversation between person and machine going.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like Dialogs, Forms, Toolbars, etc. The distinction between buttons and links matters!

Homework

Design a small card that will serve as a mini-style guide for a family of buttons. Choose any typography or color scheme you want to use.

Card should include

  • Title (button styles or any kind of interesting theme name you can come up with)
  • Your avatar and a byline “mini-style guide by [your name]”
  • Body copy

Save (primary)

  • Sort / Filter / Cancel (secondary)
  • Dropdown with a down arrow Select… ▼
  • Close (secondary icon only (x))
  • Edit (text only button, underline, or different color)
  • Delete

Create a secondary screen using your defined styles for the title, primary, and secondary

Are you sure you’d like to delete this? This action cannot be undone

  • Delete (primary)
  • Cancel (secondary)

The Importance of Dividers

Designing an app may seem easy at first glance, but when you actually get to start prototyping it, things get complicated.

What at first seemed simple started to get complex when you realize that it’s not so easy to make a choice on how to design a certain element.

Even a simple and most common task of visual separation for two or more content blocks starts to get complicated.

While the ultimate goal is to simplify our interfaces and make them more functional and usable, we should think twice when separating content bylines and dividers. Developing a cleaner UI design also means removing any unnecessary elements and there are lots of things that can be done to improve mobile UX without adding line elements that just take up space.

Homework

Design a mobile screen with a “favorite” or “curated” list of contacts with 5-10 people. It can people you actually know or a list of characters from The Office, etc. you decide.

One contact should contain:

  • A profile photo
  • A name
  • A description of the contact [Mobile phone, Message, etc.] Use an icon as well if you’d like

Create different artboards for each variation of the design using…

  • .5px borders
  • 1px borders
  • 2px borders
  • 4px borders (the large you go, you’ll need to go lighter with the color so it’s not too visually heavy)

Now try the same design with no dividers whatsoever, except for the negative space measurement between the elements.

Now try to apply your favorite version of design to a larger “contacts” screen where there are 5-7 people who start with the letter A, then B, then C, and so on.

You only need to show 3-4 sections to get the idea going.

Creating Depth

Adding a sense of depth to a design can make that design seem more realistic and increase visual interest.

Since we are 3-dimensional beings, the lack of one dimension on-screen means our compositions appear less than lifelike.

Adding back the illusion of the missing dimension will add back a sense of reality.

Can flat design have depth?

When we talk about flat design, we refer to designs with no shadows, gradients, or any other effects that mimic how light interacts with real-life objects.

While it’s more difficult to create depth without any shadows or gradients, it’s not impossible. We have to think about it differently since colors and shapes are all we have at our disposal.

When we think about light, the lighter parts are usually closer to us than the dark parts. This means that we can create depth only by using a shade of a certain color. Mark Rise does this job exceptionally well.

Color, therefore, is the best tool for you to convey distance. The lighter elements will feel like they are raised from the page.

Predefine your set of shadows and how you want to measure distance. Then create a variety of buttons on light and dark backgrounds:

  • Flat button
  • Raised button
  • Floating button
  • Indented/Pressed button
  • Hovered button

Integrate those into an interface and create a simple booking form. If you are struggling with ideas, go to booking.com and redesign their booking form.

IOS vs Android

Apple and Google are both very smart companies with a zillion users each.

They will make UX mistakes like anyone else, but in general, when they define a design language for the default way in which their system should work, they’re not going to be making incredibly glaring mistakes.

So while I present two ways of doing everything (the iOS way and the Android way), neither is wrong. If your users are able to confidently navigate and use the app you’re creating, then no one can tell you not to use tabs on iOS or modal views on Android.

This video is done in the spirit of learning to “think in iOS” or “think in Android” – and if your goal is to make an app for both platforms, but have each feel native to the system it’s on, then this guide will be a huge help.

Homework

Design an email app (if you are struggling to figure out which one you can check https://mobbin.design/).

Focus on all of the modals and screens that pop up.

Try to come up with the same styles and patterns they use. Do this both for iOS and Android.

Navigation Elements

When talking about navigation the sole purpose of it is to navigate, simply don’t get lost. That’s why every single product has to have good navigation, it needs to help the user navigate between scenarios. It’s going to help you organize information better.

You need to be cautious of the places where you use navigation. On checkout, you don’t want to showcase a lot of places a customer might want to click and steer his attention away from completing a purchase. On login, you don’t really need it yet as the person hasn’t entered your product.

You can think of your navigation as a good menu in a restaurant, there are some restaurants that offer great seasonal dishes, and they have 3-5 main meals and it’s super easy to choose from. However, there are some restaurants in my town where the menu feels like the bible. It’s pages of possible options and it always takes me at least 30 minutes to order something. This is very overwhelming.

Don’t get me wrong, lots of options are not a bad thing. Especially on bigger websites that offer a lot of products and services, you can look at Stripe for example they have a lot of use cases targeting different demographics.

But, if you want a person to accomplish a specific task then the options are much more limited, it’s a flow.

Homework

We are going to use these designs as a base point for building in the future homework. Pick what makes you excited about either one. Or do all of the two.

Option 1

Design mobile app navigation (shell) for an iOS or Android app based on messaging. You can add content if you’d like, but think of this as an isolated exercise for navigation items primarily. I know it can be difficult to not worry about the UX, but this is purely conceptual to flex our visual design skills right now.

Include the following…

  1. Profile
    Use an image for the user’s avatar. You decide whether to put it in the main tab bar at the bottom similar to Instagram, in the top bar similar to Twitter, or in a more tab similar to Facebook.
  2. Search
    Decide if this should be in the main tab bar or in the top as an icon.
  3. [Action]
  4. You decide the action. Examples (post, message, record, add a photo, add video, etc. This will be the primary way a user adds content to the app.
  5. Feed
    This could possibly contain messages, photos, or a combination. It’s not required for you to add content right now—mainly focus on the “navigation” shell.
  6. Activity
    Notifications, likes, comments, replies, etc. Feel free to substitute for something else if you’d like.
  7. Settings
    This will eventually hold things like privacy, security, account, etc.

I’ve intentionally listed 6 items so you can’t put them all side by side in the bottom tab bar. :blush:

Use pttrns.com or mobbin.design for inspiration if you’d like.

If you’re rather come up with your own app navigation idea that’s fine too!

Option 2

Come up with a fake name and an optional logo for a fictitious company. Design responsive web navigation (shell) for an online SaaS (software as a service) app with the following items:

  • Why [Product Name]
  • Features
  • Pricing
  • Resources
    • Articles
    • Videos
    • Knowledgebase
  • Log In
  • Sign Up

Create TWO views for this option

  1. One for a 1440px wide desktop view with a header containing the navigation elements. Make sure you show a version with each state.
  2. Create a mobile version (responsive) of the exact same elements, but redesign it so it fits properly. Also, show the (menu) button that would activate the mobile menu if it’s not showing by default.

Additional reading:

Forms and Fields

There isn’t a digital product where you need to paste information and that’s not a form.

If you are posting a tweet or something on your Instagram stories those are one-way or another forms. Each time when you extract user information you seek input.

The majority of this lesson is going to be focused on text-based inputs.

Keep in mind all of the different events that can happen when somebody wants to complete a form. Remember - we are designing for a person. So know what their starting and ending point will be it’s going to take us a lot further in terms of having really good forms.

Homework

Well we’ve been talking about inputs quite a lot, haven’t we!

Now I want you to design your own system similar to what I did in this lesson. All of the variations I discussed should be included there and here is some guidance:

16px text for labels and input text

12-14px for any helper, error, and success text.

Feel free to adjust the text size and colors. It’s ok to have labels slightly smaller than the input text as you see fit, however helper text should rarely be larger than label or input sizes.

After you have designed your fields now let’s create some different forms for a mobile app and/or a desktop app.

If you choose to go with desktop limit the width of the fields to be around 400px wide.

1. Sign Up

Items to include on this screen

  • Brand logo - Company Name and a title of the screen
  • A simple way for a user to access the login screen if they already have created an account.

Input Fields

  • Name
  • Email
  • Password with Strength Indicator
  • Include any 3rd party account options like Apple, Twitter, Facebook, Gmail, etc. (optional)

Things to decide for the sign up screen(s) 1. Should everthing be shown on one screen or should I break up name, email, and password on three separate screens to make room for the password strength indicator? 2. Should I have different font sizes for my desktop and mobile versions? 3. Should I have Sign Up and Log In two completely different views or should they be tabs that quickly switch back and forth? 4. Should you use left aligned labels, top aligned labels, or float labels?

2. Log In

  • Logo, Name, and or Title of screen
  • Some way to access the “Log In” screen if the user already has an account
  • Email
  • Password
    • The ability to show/hide the password
  • Error message for invalid login (Write a nice error message in a complete sentence. Short, sweet, and a little friendly)
  • A forgot password link somewhere near the “Password” field

You may need to produce 3~ screens to show all the variations of…

  • Default state
  • Active input (keyboard showing if on mobile)
  • Error message

3. Forgot Password

  • A small message that informs the user what will happen once they enter their email.
  • Email input field
  • Error message

List and Card Views

For the majority of products cards and lists are the thing that is consumed the most by the users.

Cards are slightly more useful when you want to group more than one piece of information together - property photo, location, rent, etc. All of these can. be easily seen as a group together if they are contained in a card. Look at almost all social apps, they use a card-based layout for what the users generated in the platform.

Lists are most often used as a utility, where scannability is a bigger factor in the overall experience.

Lists:

  • Don’t always signify interactivity
  • You need an icon
  • Emphasize hierarchy
  • More scannable in groups
  • Take up less space
  • Groups small amounts of content

Cards:

  • Can signify interactivity
  • Demphasize hierarchy
  • Less scannable in groups
  • Take up more space
  • Groups large amounts of content

Homework

Design a feed for your workouts (or any other type of app). Try to include something similar or go solo and figure out what you want to have.

  • Image of the workout
  • Name of the workout
  • How long will be the workout?
  • A small paragraph
  • Think of how to show numbers (either people who took the workout or rating of the workout)

Create a minimum of 5 variations of your feed design using the guide I showcase to you earlier in the video.

Sorting and Filtering

People that use your product, especially in the field of e-commerce, lie somewhere on the spectrum of those who know what they’re looking for on one end to the ones that have come just to browse on the other.

Search, Sort, and Filter are essential to help the groups of users on the first half of the spectrum. These mechanisms are particularly important as the time taken by the user to find a product is inversely proportional to the likelihood of a purchase.

The key differences are:

  1. Sorting rearranges existing content.
  2. Filtering removes content.

Homework:

Add filter and sorting functionality to your fictitious app or website’s list view.

  1. One mobile view that uses an inline filtering system that sits above your content.
  2. One mobile view uses a simple icon or button to trigger the filter view.
  3. Design an accompanying desktop view that exposes the filters, either in the top above the content or on the left column.

Tables

Designing tables is quite challenging even for seasoned designers. It’s not always clear what the user is supposed to do with the information inside of the table in the first place.

A well-designed table will give the ability user to scan, analyze, compare, sort, change data, get more insights.

Remember that your customer needs to feel comfortable when using these tables in a specific scenario.

Homework:

  1. Design a pricing plan table similar to the examples above. Show three tiers with progressively more features for each plan. Callout the major differences, visually. Larger or smaller type for the plan name? What about the price? And call to action? Will one plan be recommended over the other?

  2. Design another table that is somehow related to the content of your fictitious app. It might be analytics data, or database data… possibly even some type of administrative backend data that might be used internally for the functioning of your app. Design a read-only mode and an edit mode where information can be changed and saved.

1 симпатия