UI UX Design Patterns - by University UX Instructor from Udemy

PART 1:

Design patterns are a set of User Interface guidelines and rules that pertain to how users use products and user interface elements. Understanding these design patterns is a must for any UX or UI designer. Things like form fields, dropdown, navigation bars, tab bars, date pickers etc. We will deep dive into each user interface component and will cover best practices for the following:

• Form fields• Buttons• Dropdowns• Date pickers• Radio buttons, Checkboxes & Toggles• Address Forms & Search Forms• Tab Bars & Title Bars• Accordions & Tabs• Tool Tips & Shadows• Thumbnails & Carousel • Modals & Lightboxes• Menus & Drawers• Wizards, Breadcrumbs & Pagination• Icons & Photos

Using design patterns can be extremely helpful, mostly because they save time (money) and get us better results, faster. Which is the core philosophy of agile application development. As designers, we can leverage these patterns and use them in our daily design decision-making because these patterns and components are used every day across many user experiences and users have been accustomed to how these patterns work. These patterns are less risky than designing something from scratch or creating a brand new user interface. We don’t need to apply them exactly as they are to every problem we encounter, but rather we can build on top of them, using our experience to inform our decisions because we know that these patterns work.

Regarding the Figma fileThere are instructions in the video called "course material" and I have attached instructions as wellThere are specific course material attached to each video topic as well but you can download all of them in the class called "course material"

PART 2 - We will then go step-by-step and build out the design components within live prototypes together using the design tool figma

Hope you enjoy the class

What's inside

Syllabus

Introduction

Class Structure

Course Material

Introduction to Design Material

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Explores UI design patterns, which are essential for creating user-friendly interfaces and improving overall user experience

Covers a wide range of UI components, including form fields, buttons, dropdowns, and date pickers, providing a comprehensive overview

Focuses on using design patterns to save time and improve results, aligning with the core principles of agile application development

Involves building design components within live prototypes using Figma, offering hands-on experience with a popular design tool

Includes creating various web and iPhone components, such as radio buttons, menu drawers, modals, and date pickers, enhancing practical skills

Requires using Figma, which may necessitate a subscription or license, potentially posing a barrier for some learners

Reviews summary

Essential ui ux design patterns overview

According to learners, this course provides a solid foundation in essential UI/UX design patterns, covering a wide range of components from form fields to modals. Students particularly appreciate the clear explanations and the practical second half, which demonstrates how to build these patterns using Figma. While many find the practical exercises valuable for applying concepts, some note that the course offers breadth over depth, potentially being too basic for experienced designers or requiring additional resources for mastery. A few recent reviews mention the Figma interface shown may be slightly outdated, though the core principles remain relevant.

Pace may not suit all experience levels.

"As a beginner, I sometimes felt a bit overwhelmed by the speed of new concepts."

"For someone with some prior experience, this course felt a little too basic in parts."

"I think this course is best suited for beginners or those needing a quick refresher on standard patterns."

Instructor explains concepts simply and effectively.

"The instructor did a fantastic job explaining complex ideas in a very simple way."

"I found the explanations of why certain patterns work and their best use cases very clear."

"His teaching style is easy to follow, making the core concepts accessible."

Covers a wide array of fundamental UI patterns.

"I was impressed by the sheer number of design patterns covered; it's a great reference."

"The list of UI components discussed, from buttons to accordions, felt very comprehensive for an intro."

"This course gave me a good overview of almost every common UI element I encounter daily."

Hands-on practice building patterns in Figma is useful.

"Building the patterns step-by-step in Figma was incredibly helpful for understanding their construction."

"The second part of the course, focusing on Figma demos, was the most practical part for me."

"Learning to create modals and drawers in Figma solidified my understanding of their structure and function."

Figma interface may be slightly outdated.

"Some elements in the Figma demos looked slightly different from the current version I'm using."

"Following along in Figma was mostly fine, but the UI in the videos isn't the latest version."

"The core Figma principles are taught, but the interface shown feels a bit behind the curve."

Covers many topics but lacks deep dives.

"While many patterns are covered, I wish there was more depth on the nuances and advanced usage of some."

"It's a great introduction, but don't expect deep dives into the complexities of each pattern."

"I felt like we moved quickly from one pattern to the next without fully exploring each one."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in UI UX Design Patterns - by University UX Instructor with these activities:

Review UI/UX Fundamentals

Show steps

Reinforce your understanding of core UI/UX principles before diving into specific design patterns. This will provide a solid foundation for understanding the 'why' behind the patterns.

Browse courses on User Interface Design

Show steps

Review basic design principles like hierarchy, contrast, and balance.
Familiarize yourself with common UI elements and their functions.
Study examples of good and bad UI/UX design.

Review 'Don't Make Me Think' by Steve Krug

Show steps

Gain a deeper understanding of usability principles and how they relate to design patterns. This book provides a practical and accessible guide to creating user-friendly interfaces.

View Don't Make Me Think, Revisited: A Common Sense... on Amazon

Show steps

Read the book and take notes on key concepts.
Reflect on how the principles apply to the design patterns covered in the course.
Identify examples of good and bad usability in existing interfaces.

Recreate UI Components in Figma

Show steps

Solidify your understanding of design patterns by recreating them in Figma. This hands-on practice will improve your proficiency with the tool and reinforce your knowledge of component structure and properties.

Show steps

Choose a few design patterns covered in the course (e.g., dropdowns, modals, tab bars).
Recreate each pattern in Figma, paying attention to detail and best practices.
Experiment with different variations and customizations.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Review 'Refactoring UI' by Adam Wathan and Steve Schoger

Show steps

Enhance your visual design skills and learn how to refine your UI designs. This book provides practical advice on typography, color, layout, and spacing.

View Melania on Amazon

Show steps

Read the book and take notes on key concepts.
Apply the techniques to your own design projects.
Compare your designs before and after refactoring.

Design a Mobile App Interface

Show steps

Apply your knowledge of design patterns to a real-world project. Designing a mobile app interface will challenge you to make informed design decisions and integrate various UI components effectively.

Show steps

Define the purpose and target audience of your mobile app.
Sketch out the user flows and key screens.
Design the interface in Figma, using appropriate design patterns for each screen.
Prototype the app and test its usability.

Document Your Design Process

Show steps

Reflect on your design process and create a written document outlining your decisions and rationale. This will help you solidify your understanding of design patterns and improve your communication skills.

Show steps

Choose a design project you've worked on (e.g., the mobile app interface).
Document your design process, including your goals, research, design decisions, and testing results.
Explain why you chose specific design patterns and how they contribute to the user experience.

Help others in online forums

Show steps

Reinforce your understanding of UI/UX design patterns by helping others. Explaining concepts and answering questions will solidify your knowledge and improve your communication skills.

Show steps

Find online forums or communities related to UI/UX design.
Answer questions and provide guidance to other designers.
Share your knowledge and experience with design patterns.

Career center

Learners who complete UI UX Design Patterns - by University UX Instructor will develop knowledge and skills that may be useful to these careers:

User Interface Designer

A user interface designer focuses on the visual elements of a digital product and how users interact with them. As a user interface designer, you will be creating interfaces that are intuitive, efficient, and visually appealing. This course on user interface design patterns helps you understand established conventions for various UI elements like form fields, buttons, dropdowns, and navigation bars. By learning to leverage these patterns and components, you'll be able to make sound design decisions, reduce design risks, and accelerate the design process when creating user interfaces for web and mobile applications. The course's hands-on approach, where you build design components within live prototypes using Figma, provides practical experience directly applicable to the daily work of a user interface designer.

See salaries and explore the career path for User Interface Designer

User Experience Designer

A user experience designer focuses on the overall feel of a product, including usability, accessibility, and desirability. As a user experience designer, you aim to create products that provide seamless and enjoyable experiences for users. The principles covered in this course on user interface design patterns provide a foundation for designing user-centered experiences. By learning about established patterns for UI elements like date pickers, radio buttons, and modals, you'll better understand user expectations and design solutions that align with those expectations. The course emphasizes leveraging patterns to save time and improve results, which is a core philosophy of agile development that user experience designer should champion. The use of Figma is also a plus, as UX designer often use the tool for their work.

See salaries and explore the career path for User Experience Designer

Interaction Designer

An interaction designer focuses on how users interact with a product or service. As an interaction designer, you consider both the user interface and the user experience, ensuring ease of use, clear feedback, and efficient task completion. This course in user interface design patterns is useful for interaction designers, who must have a strong understanding of how different UI elements function and how they can be combined to create effective interactions. By learning about patterns for elements like wizards, breadcrumbs, and pagination, you'll be able to design complex interactions that are intuitive and easy to navigate. The course's emphasis on using patterns to save time and reduce risk is especially valuable in iterative design processes.

See salaries and explore the career path for Interaction Designer

Product Designer

A product designer is involved in the entire product development process, from ideation to launch. As a product designer, you collaborate with cross-functional teams to define product requirements, create prototypes, and oversee the final implementation. The user interface design patterns explored in this course provide product designers with a valuable toolkit for making informed design decisions. Learning about the best practices for UI elements like accordions, tabs, tool tips, and carousels enables you to contribute meaningfully to product discussions and ensure a cohesive and user-friendly product experience. By understanding why certain patterns work, as well as how to implement them using Figma, you'll be able to advocate for design solutions that align with user needs and business goals.

See salaries and explore the career path for Product Designer

Web Designer

A web designer creates the visual layout and design of websites. As a web designer, you focus on aesthetics, usability, and ensuring a positive user experience. This course may be useful, as the design patterns covered, such as those for form fields, buttons, and navigation menus, are fundamental to web design. The course's hands-on exercises using Figma to build these components provide practical experience in implementing design patterns in a web context. Knowledge of established UI patterns can help improve the efficiency and effectiveness of a web designer's work and provides a foundation for creating engaging and user-friendly websites.

See salaries and explore the career path for Web Designer

Mobile App Designer

A mobile app designer specializes in designing user interfaces and user experiences for mobile applications. As a mobile app designer, you consider the unique constraints and opportunities of mobile devices, such as screen size, touch input, and mobile-specific UI patterns. This course may be useful, as the design patterns covered, such as tab bars, title bars, and mobile date pickers, are highly relevant to mobile app design. The course provides valuable insights into best practices for creating intuitive and engaging mobile experiences. The use of Figma for prototyping mobile components is also directly applicable to the daily activities of a mobile app designer.

See salaries and explore the career path for Mobile App Designer

Front-End Developer

A front end developer implements the user interface of a website or application. As a front end developer, you work closely with designers to translate visual designs into functional code. This course may be useful, as understanding common UI design patterns allows a front end developer to better collaborate with designers and implement user interfaces that are both visually appealing and user-friendly. By learning about patterns for elements like modals, lightboxes, and menus, you can write code that effectively implements these patterns and ensures a consistent user experience. This ultimately helps the front end developer deliver high quality and user friendly code.

See salaries and explore the career path for Front-End Developer

UX Researcher

A UX researcher conducts user research to understand user needs, behaviors, and motivations. As a UX researcher, you use various research methods to gather insights that inform design decisions. While this course focuses primarily on UI design patterns, a UX researcher may find it useful to understand these patterns because they influence how users interact with interfaces. A strong understanding of existing patterns helps UX researchers to frame their research questions, design effective research studies, and analyze research findings in the context of established UI conventions. The course material may also help to understand the rationale behind pattern adoption.

See salaries and explore the career path for UX Researcher

Information Architect

An information architect focuses on organizing and structuring information within a website or application. As an information architect, you create sitemaps, navigation systems, and content hierarchies that make it easy for users to find what they need. This course may be useful, as the design patterns covered, such as wizards, breadcrumbs, and pagination, are directly related to information architecture. Understanding how these patterns function and how they impact user navigation helps the information architect to design effective and intuitive information structures. The course will give helpful user interface context.

See salaries and explore the career path for Information Architect

Usability Analyst

A usability analyst evaluates the ease of use of websites and applications. As a usability analyst, you conduct usability testing, analyze user feedback, and make recommendations for improving the user experience. This course may be useful, as familiarity with common UI design patterns helps a usability analyst assess the effectiveness of user interfaces. By understanding established patterns for elements like form fields, buttons, and dropdowns, usability analysts can more easily identify usability issues and suggest improvements that align with user expectations. This makes it easier to test and analyze user interfaces.

See salaries and explore the career path for Usability Analyst

Digital Strategist

A digital strategist develops and executes digital marketing strategies. As a digital strategist, you focus on achieving business goals through online channels. This course may be useful, as understanding user interface design patterns provides a better understanding of user behavior and preferences, which can inform digital marketing strategies. By understanding how users interact with websites and applications, a digital strategist can develop more effective campaigns and create more engaging user experiences. Such an understanding will provide a solid basis for strategizing.

See salaries and explore the career path for Digital Strategist

Marketing Manager

A marketing manager oversees the planning, development, and execution of marketing campaigns. As a marketing manager, you focus on promoting products or services and reaching target audiences. This course may be useful, as a general understanding of user interface design patterns may help marketing managers to better understand the user experience and how it impacts marketing efforts. While not directly related to marketing, familiarity with UI principles may inform marketing strategies and ensure a cohesive brand experience. The marketing manager may therefore find the course material useful in their marketing campaigns.

See salaries and explore the career path for Marketing Manager

Technical Writer

A technical writer creates documentation for software and hardware products. The technical writer may find this course useful, since a technical writer must document various aspects of a user interface, and a strong understanding of the common components of UI is necessary. In particular, the course covers form fields, buttons, dropdowns, date pickers, radio buttons, checkboxes and toggles, address forms, search forms, tab bars, title bars, accordions and tabs, tool tips and shadows, thumbnails and carousel, modals and lightboxes, menus and drawers, wizards, breadcrumbs, pagination, icons and photos. These are all elements that a technical writer may need to document in their role.

See salaries and explore the career path for Technical Writer

Project Manager

A project manager oversees the planning, execution, and closing of projects. A project manager may find this course useful because a project manager needs to interface with design teams and development teams to plan resource allocation and deliver projects on time. The project manager may find the course useful for facilitating discussions about project time lines and resource allocation. At many companies, project managers have very little experience in user interface design, but this course may give them some context for managing complex projects in the UI/UX domain.

See salaries and explore the career path for Project Manager

Product Manager

A product manager is responsible for the strategy, roadmap, and feature definition of a product. As a product manager, you need to interface with design teams and development teams to plan resource allocation and deliver projects on time. The product manager may find the course useful for facilitating discussions about product features. At many companies, product managers have very little experience in user interface design, but this course may give them some context for managing complex projects in the UI/UX domain.

See salaries and explore the career path for Product Manager

UI UX Design Patterns - by University UX Instructor

What's inside

Syllabus

Traffic lights

Save this course

Reviews summary

Essential ui ux design patterns overview

Activities

Career center

Reading list

Share

Similar courses