Learn UI/UX Design in a weekend

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:

1. Understand: Put yourself in the user's shoes and empathize with their needs.

2. Specify: Identify a particular problem to solve.

3. Design: Brainstorm and develop solutions.

4. 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

1. online surveys or questioners

2. web or app analytics

3. A/B testing

4. 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

1. Interviews

2. Surveys

3. A/B testing

4. Focus groups

5. Card sorting

6. 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

1. Mobile app

2. home screen

3. see lots of listing at once

4. see the following things at a glance

   1. rating

   2. price per person

   3. photos

5. filter through different types of listing

   1. apartments

   2. houses

   3. hotels

Nice to haves

1. search feature

2. favoriting feature

3. 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:

1. It presents the information that will be displayed on the page

2. It gives an outline of structure and layout of the page

3. 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:

1. 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.

2. 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.

3. 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:

1. 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.

2. 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.

3. 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.

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

1. Mobile app

2. home screen

3. see lots of listing at once

4. see the following things at a glance

   1. rating

   2. price per person

   3. photos

5. filter through different types of listing

   1. apartments

   2. houses

   3. hotels

Nice to haves

1. search feature

2. favoriting feature

3. 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