Hi there - my name is Jesse Showalter & welcome to Intro to UI/UX Design. Together you and I are going to learn everything you need to get started working as a UI/UX Designer using Figma.
Hi there - my name is Jesse Showalter & welcome to Intro to UI/UX Design. Together you and I are going to learn everything you need to get started working as a UI/UX Designer using Figma.
This course is aimed at people new to design, new to User Interface and User Experience design. Even if you’re not totally sure what UI/UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step.
First we’ll define what the differences are between UI and UX design
Then you’ll learn what user centered design is and what makes design “good”
You’ll learn about how to conduct some research
The you will learn how to design a series of wireframes for a mobile application
From there we’ll look at how to implement colors & images properly in your designs.
You’ll learn the do’s & don’ts around typography
You’ll learn how to create your own icons, buttons & other UI components.
You’ll learn how to create Components, Constraints, and Variants in Figma
We’ll build a simple Style Guide and pattern library for our project in Figma
You’ll understand how to make both simple & advanced micro interactions, page transitions & animations
You will walk through the UX & UI design process from start to finish as you complete your class project all the way through to the end.
Once finished with your project you will learn some crucial insights about getting hired in the industry and use the results of your project to build your very own design portfolio.
We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms commonly used in the UI/UX industry. By doing this you will develop a mature understanding of the industry and will be able to confidently build on these foundations until you get hired for your first design job.
Now is the time to upgrade your career & go from UI/UX Zero to Hero.
What will you learn?
Hey there!
I'm excited to help you get started with UI and UX design. This course will introduce you to the theory and practice of UI and UX concepts. You'll start by learning the core concepts and methodologies used by industry professionals. Then, you'll get to apply these methodologies in a hands-on exploration, learning the tools and techniques as you design your first UI/UX portfolio piece.
After completing this course, you’ll be able to:
Understand and define the various fields of UI and UX Design.
Understand popular design techniques used by industry professionals such as wireframes, Type scales, Components, and proper use of color.
Ideate and sketch wireframes using different representations of web elements.
Use Figma to create polished and interactive prototypes.
What should you know before starting this course?
This course does not require any prerequisite knowledge. This is an introductory course for anyone interested in learning UI and UX design!
What will you create?
Throughout this course, you will be tasked with applying the concepts learned by completing a capstone project. You’ll concept and design a hotel booking experience similar to AirBnB.
This project will demonstrate the actual deliverables expected of designers in the industry, and guide you through the process of making your first designs!
I’m excited for you to start your journey into Intro to UI and UX Design!
Let get started
What’s the difference between UI & UX design?
While “design” is often equated with graphic design or visual design, ”design” is a large discipline with lots of sub-disciplines – everything from industrial design to package design falls under the umbrella of design. Merriam-Webster offers one appropriately broad definition of design:
to plan and make (something) for a specific use or purpose.
Intentionality and problem-solving are at the core of design. Design can include tasks ranging from thinking about what color a button should be on a screen, to deciding how elevator buttons are designed to make the most sense to users.
In recent years, user interface (UI) design and user experience (UX) design have been at the forefront of conversations about design. Understanding UI and UX design help focus our work on the experience of the user while ensuring products and systems meet real needs in an intuitive and pleasant way.
When we say products and systems we’re mainly talking about digital products and digital systems like mobile apps, web applications, software, and the systems that are working in the background to make those products function well.
What is User Interface (UI) Design?
A user interface is the interface through which a user interacts with a device. For example, on a mobile phone, the user interface is what is displayed on the screen of the device.
A user interface is what a user interacts with. For devices with screens, the user interface is what is displayed on the device’s screen.
In the early days of computing, only users with a certain level of technical skill could use the systems, which were controlled by punch cards or command lines. But with the introduction of the Graphical User Interface (GUI) in the 1980s, personal computers became accessible to many more people and user interface (UI) design emerged as a field.
Apple's Lisa, the first GUI-based personal computer available to the public, was introduced in 1983 but it was a commercial flop. The Macintosh, which followed in 1984, had a more refined design that included iconography and typefaces created by Susan Kare. With the advent of the GUI, UI design became a field of its own, with designers like Kare leading the way.
User interface (UI) design is a design discipline focused on the visual elements of the interface, for example:
Layout: Where do elements appear on the screen?
Colors: What palette is used and what emotions do those colors evoke?
Typography: What typefaces are used and what do they communicate?
Interaction design: How do elements respond to user interaction?
Brand identity: How do all of the visual elements come together to represent the brand’s vision?
Responsiveness and usability: Is the interface easy to use across different devices?
Accessibility and inclusivity: Does the interface work for everyone?
Front-end development: What is the code and technical backbone powering the interface?
What is User Experience (UX) Design?
User experience refers to any interaction a user has with a product or service. UX design considers each and every element that shapes this experience, how it makes the user feel, and how easy it is for the user to accomplish their desired tasks.
This could be anything from how a physical product feels in your hand, to how straightforward the checkout process is when buying something online. The goal of UX design is to create easy, efficient, relevant, and all-round pleasant experiences for the user.
Don Norman, co-founder of the Nielsen Norman Group coined the term “user experience” in the 1990s. According to Norman,
User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
In simpler terms, UX design is the process of creating products (digital or physical) that are practical and usable. Peter Morville’s UX honeycomb breaks down the ideal characteristics even further:
Usable: A product needs to be simple, easy to use, and familiar.
Useful: A product must fill a need. If the product isn’t filling a perceived gap in the users’ lives, then there is no real reason for them to use it.
Desirable: The visual aesthetics of the product need to be attractive and evoke positive emotions.
Findable: If the user has a problem with a product, they should be able to quickly find a solution.
Accessible: The product or service needs to be accessible to everyone, including those with disabilities.
Credible: The company and its products need to be trustworthy.
How It All Fits Together: Five Elements of UX Design
Distinguishing between all this different terminology can be confusing! What are the differences between UI design and UX design?
One useful model for understanding where these terms overlap and differ is the “Five Elements of UX Design” from Jesse James Garrett. This model shows the layered steps required to turn an idea into a functional product, with each layer of the model building upon one another, from the bottom up. The layers are arranged from abstract to concrete. UX design encompasses the entire model, while UI design focuses on the surface layer.
Strategy
What problem is this product intended to solve? This layer, the most abstract of the model, takes into consideration both user needs and business goals.
Example: Mobile PhoneWho is the target audience and how will it fit into their lives? Smartphones with a smaller form factor might target users who are frequently on the go, or those who want to reduce their smartphone use.
Scope
What is the product that will be created to solve the problem? Within this layer, the team defines functional requirements (what features to build) and content requirements (written and visual information to include).
Example: Mobile PhoneWhat are the product specifications, such as the size of the screen and amount of storage available? Which apps are included by default with the phone? What aspects of the experience are customizable?
Structure
How is the design organized and how do interactions work? This layer includes information architecture (the structure and organization of content) and interaction design (the interactive experience of the product).
Example: Mobile PhoneHow do users access key applications? What functionality is accessible from the screen and from physical buttons? What should appear on the home screen and lock screen by default — for example, does the phone display the time and the weather?
Skeleton
How is information presented and arranged? This layer begins to consider interface design (design of interface elements), navigation design (how users move through a system), and information design (presenting information to facilitate understanding). A common output at this stage is a set of wireframes.
Example: Mobile PhoneWhere and how can users access search? Are some elements on the home screen larger than others? How is information arranged in menus and toolbars? Can users customize their workspace?
Surface
How does the product look and feel to users? This stage emphasizes visual design, for example, what colors and typefaces are used, and is the stage where UI design is front and center (though it is not exclusive to the surface).
Example: Mobile PhoneWhat colors and typefaces does the system use? Are a light mode and a dark mode available? What is the icon style? What kind of animations occur on-screen? What sounds does the interface make?
Who Are the User and End-User?
Hey there! We've talked about "the user" a lot, but who exactly are we talking about?
When we say "the user," we're referring to anyone who uses or maintains the product. This can include people like system administrators, IT experts, and computer technicians. In the early days of computing, these were often the only people who used computer systems because they required technical knowledge to operate.
But with the introduction of personal computers and GUIs, there are now a wider range of potential non-technical end-users. It's helpful to distinguish between the user and the end-user: the person who will ultimately use the product, who may not have the technical know-how or skill of the product's administrators.
For instance, a medical device may have different users, including doctors and technicians who use the device for monitoring, and who may help patients set up their device or interpret its readings. The end-user of this medical device would be the patient who needs to interact with the interface on a regular basis. In other cases, like deciding which web browser to use at home, the user and end-user may be the same person.
At the heart of user-centered design (UCD) is the user. UCD involves users in product development from the outset, treating design as an iterative process that incorporates user feedback during development and after launch. User-centered design considers both the user's environment, technology, and emotional state, as well as business goals.
If this all sounds familiar, you're on the right track! UX and UI design are user-centered disciplines, and their methodologies typically fall under the umbrella of user-centered design. There are many similarities between the methodologies we've covered in this lesson, and any of them can help us prioritize and collaborate more effectively as designers.
While user-centered design processes may differ in their steps, they generally involve the following activities:
Understand: Put yourself in the user's shoes and empathize with their needs.
Specify: Identify a particular problem to solve.
Design: Brainstorm and develop solutions.
Evaluate: Test the product or prototypes to assess success and incorporate feedback.
The methodologies we’ve described so far ensure that teams are aligned and that user needs are at the center of the process, but what defines a “good” user experience? What makes a product or design truly great?
Numerous attempts to answer this question help make design critique less subjective. Designer and information architect Peter Morville’s UX honeycomb, pictured to the right, is one example of a framework for understanding the many facets of a positive user experience:
Useful: fulfills a user’s needs
Usable: easy to use and understand
Desirable: visually attractive and succinct
Findable: easy to navigate and find information
Accessible: users with disabilities can use the product
Credible: the product, company, and services are trustworthy
Valuable: delivers business value
The distinction between descriptors like these is helpful when assessing a product or design. For example, a usable and desirable design may not be useful or answer a user’s needs. A visually desirable design may not be usable or findable if it obscures important information or functionality. Any product that doesn’t consider accessibility and equity may (whether intentionally or not) exclude a portion of the population who would otherwise find it useful.
Helpful resources for further study
https://semanticstudios.com/user_experience_design/
https://www.uxpin.com/studio/blog/ux-honeycomb-definition-and-use/
Introduction to UX Research
We’ve spent a lot of time in this lesson walking through different design methodologies and emphasizing the role of the user in these processes. Where does this information about users come from?
User research is the systematic study of target users of a product or interface to understand their behaviors, needs, and motivations. This is a broad field of its own, and in some organizations, a separate user researcher primarily focuses on this work. In addition, every UX or UI designer is likely conducting some user research. User research can happen at every stage of the design process to inform decisions.
Quantitative Data is anything that are measurable
how many users visited
how many clicks
etc…
Ways of collecting Quantitative data
online surveys or questioners
web or app analytics
A/B testing
publicly available statistics
Qualitative Data has to do with reason and motivation of the user
why did a user click
why did they purchase
why didn’t they click the button we wanted them to
etc…
Attitudinal vs Behavioral
Attitudinal is…
what people say
asking people what they think, what they expect
Behavioral is…
what people do
watching people actually use things
So if you have both Qualitative and Quantitative Data you might be able to say something like
"25% of users are abandoning their cart while checking out, and through our user interviews we found that users didn’t know how to apply their discount code so they gave up."
Ways of collecting data
Interviews
Surveys
A/B testing
Focus groups
Card sorting
Diary Studies
A skilled user researcher is able to tell stories and frame their research in digestible ways that are useful and compelling for others within the organization. Tools like user personas, user journey maps, and storyboards can be used to present and understand the key points from user research across an organization.
Helpful Resources for further learning
https://www.nngroup.com/articles/quantitative-user-research-methods/
https://careerfoundry.com/en/blog/ux-design/quantitative-ux-research/
https://maze.co/guides/ux-research/qualitative-ux-research-methods/#quantitative
Having project requirements is important because it provides a clear understanding of what needs to be accomplished in a project. These requirements outline the objectives and goals of the project, as well as the resources and constraints that will impact the project's development.
Without project requirements, it is easy for a project to become disorganized and unfocused. This can lead to wasted resources, missed deadlines, and unsatisfactory results. Project requirements provide a roadmap for the project team to follow, ensuring that everyone is working towards the same end goal.
In addition, project requirements allow for effective communication between stakeholders. By clearly outlining the objectives and goals of the project, stakeholders can provide feedback and input on the project's development. This feedback can be used to refine the project requirements and ensure that the final product meets the needs of all stakeholders.
Overall, having project requirements is essential for ensuring the success of a project. They provide a clear understanding of what needs to be accomplished, allow for effective communication between stakeholders, and ensure that the project stays on track and within budget.
Project Requirements
Mobile app
home screen
see lots of listing at once
see the following things at a glance
rating
price per person
photos
filter through different types of listing
apartments
houses
hotels
Nice to haves
search feature
favoriting feature
crazy unique locations finder
A UX user persona is a fictional character that represents the typical user of a product or service. It is created based on data collected from user research, which includes demographic information, user goals, behaviors, pain points, and motivations. The persona helps the UX design team to understand the users' needs, behaviors, and expectations, and to design a product that meets those needs.
The persona typically includes a name, photo, age, occupation, education, and other relevant demographic information. It also includes information about the user's goals, challenges, and motivations, as well as their preferred channels for communication and interaction.
By creating a UX user persona, the design team can empathize with the users and design a product that meets their needs and expectations. The persona also helps the team to communicate the user's needs to stakeholders and to prioritize features and functionalities.
Overall, creating a UX user persona is an essential step in the UX design process, as it helps ensure that the product is designed with the user in mind.
Helpful Articles for further learning
https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/
https://blog.adobe.com/en/publish/2017/09/29/putting-personas-to-work-in-ux-design-what-they-are-and-why-theyre-important
https://maze.co/guides/user-personas/
That’s a wrap! We got a walkthrough of foundational design methodologies and best practices, with an understanding of the key principles underpinning UI and UX design. Even as methodologies go in and out of vogue, core concepts, such as putting users at the center of design and iterating according to feedback, will never go out of style.
Here’s a summary of what we’ve covered:
What are UI and UX design
The five elements of UX design
User-centered design (UCD) is an iterative process that puts users at the center of product development and involves them in the design from the beginning. User-centered design processes generally involve the following activities: understand, specify, design, evaluate.
The UX Honeycomb diagram defines “good” UX design as useful, usable, desirable, findable, accessible, credible, and valuable.
Methods of user research include quantitative user research, qualitative user research
User persona
Project requirements for our capstone project
If you need help remembering what you’ve learned in this chapter download the cheat sheet handout and study up because in the next chapter we get into some hands on UX design with wireframes.
So now you have some strategy down on paper due to your research. The next step would be to create a user flow diagram which is basically a map of how a user gets from a to z in your app.
You have a good idea of how you want your users to flow from one task to another, but those tasks we built out represent screens that the user will be required to interact with. Screens always come with content, buttons, navigations, information, images, tabs, and a whole slew of other interface components.
Now the question is… how do we organize those components that still help the user accomplish their goal? Everything you add to your design either helps or hurts the desired goal, wireframes let you assess what you add before spending too much time on aesthetics.
Think of it like this.
My research told me that my users need to walk from point A to Point B in my living room to get to the front door
My user flow diagram is a chart of the steps the user will take for them to successfully reach the front door
The Wire-Frame is the detailed view of where the furniture is laid on on my way through the room, so I get to the front door without tripping on the coffee table
Wire-framing is an essential skill for UX Designers and other experience design participants. Yes, wire-framing is a skill, not just a technique. It can be done well or poorly and the result can have a huge impact on the outcome of the final product.
A wireframe is a low-fidelity design layout that serves 3 simple but exact purposes:
It presents the information that will be displayed on the page
It gives an outline of structure and layout of the page
It conveys the overall direction and description of the user interface
What’s a wireframe look like
The reason it’s called a wireframe is because of it’s crude “wirey” nature. It usually takes the form of simple lines, boxes, and boring text. Think of like a topographical map that you can then lay the photo on top of.
In the next video we'll look at some examples of wireframes and then see how they progress and turn into full blown products.
The key to a good wireframe is simplicity. All you need to do is show how elements are laid out on the page and how the site navigation should work. You can add fancy images and flashy typefaces later. While wire-framing keep these guidelines in mind:
Keep your colors to grayscale: white, black, and the grays in between.
Use a maximum of two generic fonts, maybe one serif and one sans-serif. Showing the hierarchy of information through font can be still shown through changing the size of the font and whether it is styled (bold, italics, etc.).
Avoid flashy graphics and images. Instead, try using simple rectangles and squares as placeholders with an “x” through the middle of the box to show where the image will be placed.
Pro tip: You can also do the same thing for videos by using a triangle as a play button at the center of the box.
Helpful resources for further learning
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
https://webflow.com/blog/what-is-a-wireframe
As technology continues to evolve, designers are faced with the challenge of finding the best tools to bring their ideas to life. Figma, a cloud-based design tool, has quickly become the go-to choice for UI and UX designers. Here are some reasons why Figma stands out from the rest.
Collaborative Design
One of Figma's biggest advantages is its collaborative design feature. Designers can easily invite team members to view and edit their designs in real-time, from anywhere in the world. This means that multiple designers can work on a single project simultaneously, reducing the time it takes to complete a project.
Versatile Design Capabilities
Figma's design capabilities are unmatched. It offers a wide range of design tools, including vector editing, prototyping, and wireframing. Additionally, Figma allows for easy integration with other design tools, making it a versatile option for designers.
Easy to Use Interface
Figma's user-friendly interface is another reason why it's so popular among designers. It's easy to learn and navigate, making it accessible for both beginners and professionals. The drag-and-drop interface is intuitive, and the toolbars and menus are well-organized, making it easy to find the features you need.
Cloud-Based Storage
Figma's cloud-based storage is another standout feature. It means that designers can access their work from anywhere, on any device, as long as they have an internet connection. This feature makes it easy for designers to share their work with others and collaborate seamlessly.
Conclusion
In conclusion, Figma is the ultimate tool for UI and UX designers. Its collaborative design feature, versatile design capabilities, easy-to-use interface, and cloud-based storage make it a top choice for designers worldwide. If you're looking for a design tool that can help you bring your ideas to life, Figma is definitely worth considering.
Sketching Low Fidelity Wireframes
Wireframing is an essential step in the design process, allowing designers to plan and organize the layout of a website or app before moving on to more detailed design work. Low fidelity wireframes, also known as rough sketches, are a great place to start when wireframing. They are quick to create and allow for easy iteration and refinement.
Tools for Low Fidelity Wireframing
There are many tools that designers can use to create low fidelity wireframes. One popular option is Figjam, a collaborative whiteboard tool that allows for quick and easy sketching. Other options include pencil and paper or digital sketching tools such as Sketch or Adobe XD.
Creating Low Fidelity Wireframes
When creating low fidelity wireframes, it's important to focus on the layout and content of the design rather than the details. The goal is to create a rough sketch that outlines the basic structure of the design, including the placement of key elements such as navigation menus, content areas, and calls to action.
Start by sketching out the overall layout of the design, including the header, footer, and main content area. Then, add in more detailed elements such as navigation menus and buttons. Keep the layout simple and easy to follow, avoiding clutter and unnecessary design elements.
Benefits of Low Fidelity Wireframes
Low fidelity wireframes offer several benefits to designers. First, they allow for quick and easy iteration, allowing designers to make changes and refine the design quickly. Second, they help to focus on the overall layout and content of the design, rather than getting bogged down in details too early in the process. Finally, they are a great way to communicate design ideas with stakeholders and get feedback early in the design process.
Moving to High Fidelity Wireframes
Once the low fidelity wireframes are complete, designers can move on to creating high fidelity wireframes. High fidelity wireframes are more detailed and include more design elements, such as color schemes, typography, and images. They are a more polished version of the low fidelity wireframes and serve as a blueprint for the final design.
One way to create high fidelity wireframes is to bring the low fidelity wireframes into a design tool such as Figma or Adobe XD and add in more detailed design elements. Another option is to start from scratch and create the high fidelity wireframes directly in the design tool.
In conclusion, low fidelity wireframes are an essential tool for designers, allowing for quick iteration and refinement of design ideas. By focusing on the overall layout and content of the design, designers can create a strong foundation for the final design.
Designing High Fidelity Wireframes
Wireframing is an important step in the process of designing any digital product, be it a website or a mobile app. At its core, wireframing is about creating a visual representation of the user interface (UI) of the product. While low fidelity wireframes are great for quickly testing ideas and getting early feedback, high fidelity wireframes are essential for creating a detailed and polished design.
What are High Fidelity Wireframes?
High fidelity wireframes are detailed and polished versions of low fidelity wireframes. They are created after the initial design concept has been tested and validated, and are used to flesh out the details of the design. High fidelity wireframes typically include more detailed UI elements, such as icons, images, and typography, and are often created in a design program like Figma.
The Benefits of High Fidelity Wireframes
There are several benefits to creating high fidelity wireframes:
More Accurate Feedback: High fidelity wireframes are more detailed, so they give stakeholders a better sense of what the final product will look like. This leads to more accurate feedback, which can help to refine the design and catch any issues early on.
Better Communication: High fidelity wireframes are more polished and professional-looking, which makes them easier to communicate to stakeholders. They can be used to show off the design concept to executives, investors, or other stakeholders who may not be as familiar with the design process.
More Efficient Design: High fidelity wireframes allow designers to focus on the details of the design, rather than spending time on basic layout and structure. This can help to speed up the design process and make it more efficient.
Tips for Designing High Fidelity Wireframes
When designing high fidelity wireframes, it's important to keep a few things in mind:
Stick to the Style Guide: High fidelity wireframes should adhere to the style guide of the brand or product. This ensures consistency across all design elements and makes the final product look more polished.
Use Realistic Content: High fidelity wireframes should use realistic content, such as actual product images and text. This helps stakeholders to better visualize the final product and gives a more accurate sense of what the user experience will be like.
Test and Iterate: High fidelity wireframes are not the final product, so it's important to test and iterate on the design. Usability testing and user feedback can help to refine the design and catch any issues before the final product is released.
In conclusion, high fidelity wireframes are an essential part of the design process. They allow designers to flesh out the details of the design, communicate the concept to stakeholders, and speed up the design process. By following these tips and best practices, designers can create high fidelity wireframes that are both effective and efficient.
Prototyping Wireframes Before High Fidelity Designs
Wireframes are a crucial part of the design process for any digital product or app. They provide a visual representation of the layout and structure of the user interface, allowing designers to plan and refine their ideas before moving on to high fidelity designs.
However, wireframes can often be too abstract or vague to truly capture the user experience. This is where prototyping comes in. By creating a basic prototype of your wireframe, you can test and iterate on your design in a more tangible way.
A basic prototype can be as simple as a clickable PDF or a series of static images that simulate user interactions. This allows designers to test the functionality and usability of their wireframe before investing too much time and resources into high fidelity designs.
One of the easiest ways to create a basic prototype is to use a prototyping tool like Figma or XD. These tools allow you to link your wireframe screens together and simulate user interactions like scrolling, clicking buttons, and filling out forms.
Another option is to use a design tool like Sketch or Adobe XD to create a basic prototype by linking your wireframe screens together with hotspots or clickable elements. While this method requires a bit more manual work, it can be a good option for designers who prefer to work with a single tool.
By prototyping your wireframes, you can catch potential usability issues and make design changes early in the process. This can save time and resources in the long run, as it allows you to refine your design before investing in high fidelity mockups and development.
In conclusion, prototyping wireframes is an essential step in the design process that can help you create more effective and user-friendly digital products. Whether you use a prototyping tool or manually link your screens together, taking the time to create a basic prototype will ultimately result in a better end product.
How Wireframes Will Prepare Us for User Interface Design
Before designing a user interface, it is important to have a clear understanding of what the user will see and experience when interacting with the software. This is where wireframes come in handy. Wireframes are simple, black-and-white layouts that illustrate the basic components and structure of a user interface. In this blog post, we will discuss how wireframes will prepare us for user interface design.
Understanding the Layout
Wireframes provide a clear understanding of the layout of the user interface. By breaking down the design into basic components, we can easily identify the placement of buttons, menus, and other elements. This allows us to make critical decisions about the placement of each component, and how it will interact with other parts of the interface. Additionally, wireframes allow us to identify potential issues early on, before investing time and resources in the final design.
Clarifying User Needs
Wireframes also help us clarify the user's needs. By creating a rough outline of the user interface, we can identify areas where the user may become frustrated or confused. By testing and revising the wireframes, we can ensure that the final design is intuitive and easy to use. This can lead to increased user satisfaction and a higher adoption rate for the software.
Streamlining the Design Process
Wireframes also streamline the design process. By creating a clear and concise layout, we can avoid getting bogged down in the details of the design. Instead, we can focus on the overall user experience and create a product that is both functional and visually appealing. This helps us save time and resources, and ultimately results in a better design.
Conclusion
In conclusion, wireframes are an essential tool for preparing us for user interface design. They provide a clear understanding of the layout, clarify user needs, and streamline the design process. By utilizing wireframes, we can create a user interface that is both effective and enjoyable to use.
Color in UI Design
Color is one of the most powerful tools that designers have at their disposal. It can evoke emotions, influence behavior, and communicate ideas. In UI design, color plays an important role in shaping the user's perception and overall experience. The 60-30-90 color rule is a popular rule of thumb that designers use to create visually appealing color schemes that are easy on the eyes.
Understanding the 60-30-90 Color Rule
The 60-30-90 color rule is a simple guideline that suggests dividing your color scheme into three parts:
60% of your design should be a dominant color
30% of your design should be a secondary color
10% of your design should be an accent color
The dominant color is the primary color that sets the tone for your design. It's the color that the user sees first and that anchors the rest of the color scheme. The secondary color is used to add contrast and depth to your design. It should complement the dominant color and provide a visual break from it. The accent color is the pop of color that draws the user's attention to specific elements of your design, such as buttons or links.
Applying the 60-30-90 Color Rule in UI Design
To apply the 60-30-90 color rule in UI design, start by selecting your dominant color. This color should be the one that best represents your brand or the mood you want to convey. Once you have your dominant color, select a secondary color that complements it and provides contrast. This color should be used sparingly throughout your design to add depth and visual interest. Finally, select an accent color that pops and draws the user's attention to specific elements. This color should be used sparingly and strategically to prevent it from overwhelming the design.
Conclusion
The 60-30-90 color rule is a simple and effective way to create visually appealing color schemes for UI design. By dividing your color scheme into three parts - dominant, secondary, and accent - you can create a balanced and harmonious design that is easy on the eyes. When applying this rule, remember to select colors that complement each other and that best represent your brand or the mood you want to convey. By following this rule, you can create a color scheme that enhances the user's experience and helps them navigate your design with ease.
Typography Basics
Typography is an essential part of User Interface (UI) design. It can make or break the user experience, and therefore, designers should pay close attention to the typefaces they choose. In this post, we'll explore type scales and font pairing, two crucial aspects of UI design that can have a significant impact on the overall look and feel of a website or application.
Type Scales
Type scales refer to the sizes and hierarchy of different font sizes used in a design. A well-planned type scale helps create a cohesive visual hierarchy that guides users through the content in a natural way. A designer can create a type scale by selecting a base font size and scaling it up or down to create additional sizes.
One of the most popular type scales is the modular scale. The modular scale is a sequence of numbers that are used to determine font sizes, margins, and other design elements. It is based on a simple ratio, such as 1.5 or 1.618, which is repeated throughout the design. This creates a harmonious and consistent look that is pleasing to the eye.
Font Pairing
Font pairing is the process of selecting two or more typefaces that complement each other and work together in a design. Choosing the right combination of fonts is crucial to the success of a design project, as it can affect the readability and overall aesthetic of the design.
There are several font pairing techniques that designers can use. One of the most popular is to pair a serif font with a sans-serif font. This creates a contrast between the two typefaces and helps guide the user through the content. Another popular technique is to pair fonts with similar proportions. This creates a harmonious look that is easy on the eyes.
When choosing fonts, it's important to consider the context in which they will be used. For example, a display font might be appropriate for a large heading, but it may not be suitable for body text. It's also important to consider the readability of the font, especially for long blocks of text.
Accessibility Considerations
When designing for the web, it's important to consider accessibility. This includes ensuring that the font size is legible and that there is sufficient contrast between the text and the background. Designers should also consider using web-safe fonts that are easily readable on different devices and platforms.
Conclusion
In conclusion, type scales and font pairing are essential aspects of UI design that can have a significant impact on the user experience. Choosing the right typeface and font pairing can help guide users through the content and create a cohesive visual hierarchy. By considering accessibility and context, designers can create designs that are not only visually appealing but also user-friendly.
Typographic Scales
A typographic scale is a system of organizing font sizes in a hierarchical way. This helps to create a consistent visual rhythm throughout a design. It typically involves choosing a base font size and then defining a set of sizes that are scaled up or down from the base size by a certain ratio. For example, a typical scale might have a base size of 16 pixels, with each subsequent size being 1.5 times the previous size (24px, 36px, 54px, etc.). This creates a harmonious progression of font sizes that can be used for headings, subheadings, body text, and other elements throughout a design. By setting these sizes as Figma styles, it becomes easy to maintain consistency throughout a project.
The 8 point pixel grid
The 8 point pixel grid is a design system that helps create consistency and alignment in user interfaces. It involves dividing the screen into a grid of 8x8 pixel squares and aligning all design elements to that grid. This helps to ensure that elements are evenly spaced and sized, making the interface more visually appealing and easier to use. By using this grid, designers can create a more organized layout that is easier to understand and navigate, resulting in a better user experience.
Columns Layouts
Column layouts are a common design pattern used in user interface design. They involve dividing the screen into vertical columns of varying widths, which can be used to organize different types of content or functionality. For example, a common layout might have a narrow column on the left-hand side of the screen for navigation, with a wider column on the right for displaying content. By using columns in this way, designers can create a clear hierarchy of information and make it easier for users to find what they're looking for. Additionally, columns can be used to create a modular design system, where different components can be combined and rearranged to create new layouts quickly and easily. This can be especially useful in situations where designs need to be adapted for different screen sizes or device types.
Vertical Rhythm
Vertical rhythm is a design principle that helps create a consistent visual flow throughout a user interface. It involves aligning elements on a page based on a grid that takes into account not only the horizontal spacing, but also the vertical spacing between lines of text. By aligning elements to this grid, designers can create a more harmonious and easy-to-follow layout. Vertical rhythm can also help improve readability, as it ensures that lines of text are evenly spaced and not too close together. In general, vertical rhythm is an important consideration for any design that involves text, as it can help create a more polished and professional look.
Capstone Project: Design a Mobile App for Booking Unique Hotels and Vacations
Create a mobile app that allows users to discover and book unique and interesting hotels and vacation experiences. The app should feature a home page that showcases featured destinations and experiences, as well as a search bar for users to find accommodations and activities based on location and interests.
The detail/listing screen should display information about each unique accommodation or experience, including photos, pricing, availability, and reviews. Users should be able to book directly through the app and receive confirmation of their reservation.
Design the app in Figma, using a mobile-friendly layout and intuitive navigation. Consider the user journey and make sure the app is easy to use and visually appealing.
Remember the project requirements
Project Requirements
Mobile app
home screen
see lots of listing at once
see the following things at a glance
rating
price per person
photos
filter through different types of listing
apartments
houses
hotels
Nice to haves
search feature
favoriting feature
crazy unique locations finder
Prototyping in Figma
Prototyping is an essential step in the design process, allowing designers to bring their ideas to life and test them before they are fully developed. Figma is a powerful tool for prototyping, allowing designers to create interactive, clickable prototypes quickly and easily.
Getting Started
To begin prototyping in Figma, you first need to create a design in Figma's design editor. Once your design is complete, you can switch to the prototype view by clicking on the "Prototype" tab in the top left-hand corner of the screen.
Creating Interactions
In Figma's prototype view, you can create interactions by selecting an element in your design and then clicking on the "Prototype" button that appears to the right of the element. From here, you can choose the type of interaction you want to create, such as a tap, hover, or swipe.
Linking Screens
To create a prototype with multiple screens, you can link your screens together by creating hotspots. Hotspots are clickable areas that link to other screens in your prototype. To create a hotspot, select an element in your design, click on the "Prototype" button, and then drag the blue handle that appears to the screen you want to link to.
Previewing Your Prototype
Once you have created your prototype, you can preview it by clicking on the "Play" button in the top right-hand corner of the screen. This will open a preview window where you can interact with your prototype and test your interactions.
Sharing Your Prototype
Finally, you can share your prototype with others by clicking on the "Share" button in the top right-hand corner of the screen. This will generate a shareable link that you can send to others to view and interact with your prototype.
Overall, Figma is a powerful tool for prototyping, allowing designers to quickly and easily create interactive, clickable prototypes that can be shared with others. By using Figma's prototyping features, designers can bring their ideas to life and test them before they are fully developed, helping to ensure the success of their design projects.
Color
The 60-30-90 color rule is a simple and effective way to create visually appealing color schemes for UI design. By dividing your color scheme into three parts - dominant, secondary, and accent - you can create a balanced and harmonious design that is easy on the eyes.
Typography
Type scales and font pairing are essential aspects of UI design that can have a significant impact on the user experience. Choosing the right typeface and font pairing can help guide users through the content and create a cohesive visual hierarchy.
Let’s talk a little about the career landscape for UI and UX designers so that you have an understanding of what people are looking for and how you may want to start applying
Interested in designing wireframes, creating color palettes, or conducting user research? Whether you prefer to specialize or work across different stages of the design process, there is a place for you in the UI and UX career landscape.
Let’s talk about a few things you need to know as you enter the UI/UX workforce
Generalists vs. Specialists
Within the UI and UX design field, generalists focus on a broad range of work across multiple stages of the design process, while specialists focus on one or a few areas.
Smaller organizations and startups are more likely to hire a generalist, who can cover many different types of tasks as part of a smaller team. In organizations with a robust and mature UI and UX practice, roles tend to be more specialized.
Many UX professionals move between different types of roles and companies during their career. Earlier stage roles are often more focused on execution, while mid-level and senior roles are likely to be focused on strategy.
Job titles?
Different companies may shape each role differently, so it’s important to read each job description and understand the size of the team and expectations for the role within that organization.
Generalists: UI/UX Designer
Some companies may seek out a UI/UX Designer, who can design the holistic experience of a product or service from start to finish. UI/UX designers use user insights to shape the strategy, scope, structure, and skeleton of a design, then create low-fidelity prototypes such as wireframes and then move into high fidelity UI design like we did int his course.
These types of design roles may also be called Digital Product Designer, but what that really means is that you are present for a larger part of the process.
Specialists Within UI or UX Design
Specialist roles focus on a particular aspect of UI or UX design, such as UI design or UX research. Some companies have entire teams devoted to a particular function.
UI Designer: Designing Visual Interfaces
UI designers are focused on the design of user interfaces, or what will appear on the screen through which a user interacts with a device.
This role is most responsible for the visceral experience of the product, ensuring it sets its best foot forward and makes a good impression on users.
A day in the life of a UI designer may include:
Creating high-fidelity digital prototypes of a design
Deciding on a color palette for a mobile app
Creating a visual style guide for a new sub-brand
Checking the accessibility of a design
Communicating with developers about technical design requirements
UX Designer: Designing the users experience and journey
UX designers are responsible for the holistic experience of a product or service from start to finish. They use user insights to shape the strategy, scope, structure, and skeleton of a design, create low-fidelity prototypes such as wireframes, and think about information architecture and interaction design. They also are involved in user research, including conducting interviews and creating surveys to send to customers.
A day in the life of a UX designer may include:
Creating wireframes for an upcoming web launch
Working on an onboarding flow for a mobile application
Interviewing users
Creating user flow diagrams
Developing user personas
UX Researcher: Studying Users
UX researchers use a range of qualitative, quantitative, and mixed methods to explore why users behave the way they do and what their pain points are. They are also responsible for disseminating research findings and advocating for the user across the company.
A day in the life of a user researcher may include:
Interviewing users
Creating a survey to send to customers
Analyzing research data
Presenting research results to the rest of the team
Developing user personas, journey maps, or storyboards
More Specialist Roles in UX
Some more examples of specialist roles include:
Information architect: Information architects focus how information is structured and how users navigate a product. This role may perform content audits, create site maps, and use techniques like card sorting and tree testing.
Interaction designer: Interaction designers focus on the interactive aspects of a design, for example, how does the interface give feedback to a user after an action? How long should an animation within an interface be? What sound should the interface make when there’s an error?
Usability tester: Usability testing is part of evaluative research, which occurs after a design or prototype is completed. Usability testers determine pain points within a product and suggest improvements.
UX writer: UX writers focus specifically on product copy, for example, error messages, the microcopy that appears on a button, or the onboarding copy for an application.
Review
There are many types of roles within the UX field, and professionals can move between different types of roles over the course of their careers.
Generalist roles focus on the entire design process including both UX and UI design, while
Specialist roles focus on specific areas of the design process, such as UI design, user research, or information architecture.
UI designers are focused on the design of user interfaces, or what will appear on the screen through which a user interacts with a device.
UX Designers are focused on the users experience, they think about how the user moves from screen to screen and desire to make the experience easy and intuitive
There are many types of roles within the UX field, and professionals can move between different types of roles over the course of their careers.
Which role can you picture yourself in? Do you think you’d rather be a generalist and focus on the entire design process, or specialize in a particular area? What kind of company can you picture yourself working for?
Every designer needs a portfolio to display the work they have done. You will use this portfolio to apply for jobs and talk with recruiters about your design process and the skills you bring to the table. Dribbble and Behance are great places that are free to use to setup and maintain your portfolio. Thankfully you already have some work to display from this course so let’s build your first portfolio shop and upload them to both of these platforms.
Keep Designing
Touch design every day
look around you for good and bad UX
Challenge yourself
Focus on what you’re bad at and aim to improve incrementally
If you struggle with color, search for color pallets and apply them
If you struggle with typography master 1 font and then grow from there
If you struggle with UX, download apps and observe how common flows work
Build larger designs and larger portfolio pieces
Dribbble shots are great but large projects with full user flows are even better
Learn how to write about your design process, this will help you learn how to talk about your designs and your process
Fill Your portfolio
aim to get 10 “shots” up online and 2-3 case studies
Figure out what type of work you want to do and focus on that
Start applying for jobs before you are ready
Start applying for jobs knowing you will hear “no”
When you hear “no” ask what you can do to improve to be ready for a job like that
Apply those lesson to your work and refine your portfolio
Apply again
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.