UI Design for Web and Desktop

This Course

This course uses Figma as the design tool. As a designer, your aim is to create designs that are as good as possible, using established principles and techniques that translate well to code. My goal is to help you improve your designs over time by explaining the foundations of UI design and sharing my personal insights on how to divide your time between design and code. We will be using free icons from SF Symbols and images from Midjourney to achieve this.

What you'll design

This course on UI design is perfect for anyone who wants to learn more about the field. It will take you from feeling intimidated by a blank screen to confidently creating web app designs. You'll learn about UI patterns, color choices, and typography, and get hands-on experience with design software. By the end of the course, you'll be able to create a consistent design system and know how to solve design problems. It's an exciting opportunity!

Components

Components are a key feature in Figma that allow designers to create reusable elements for their designs. Components are essentially a group of layers that can be saved and reused throughout a design, making it easy to maintain consistency and efficiency. This course teaches you how to create multiple components and component sets for the icons, avatars, menu and content.

Design System

The Figma Design System is a set of elements, styles, and rules that ensure a product looks the same throughout. It makes designing easier and helps designers work together and get feedback from stakeholders. Figma's design system includes shared components, style guides, automatic arrangements, and teamwork tools. With these features, teams can create great designs quickly and easily.

UI Patterns

When designing wireframes, it is important to keep in mind the hierarchy of information and the flow of the design. Use established UI patterns to ensure consistency and familiarity for the user.I recommend using Mobbin.design to browse their extensive collection of real app screenshots organized by category.

Wireframing

Wireframes are skeletal outlines of a design that show its structure and layout without detailed design elements like colors or images. They are used by designers early in the design process to clarify the flow and organization of a design. Wireframes are flexible and can be easily changed as needed.

Fonts in Figma

Figma offers a wide variety of fonts to choose from, including both system fonts and Google fonts. These fonts can be accessed through the font dropdown menu in the Properties panel. Some of the good starting fonts are:

• San Francisco is a sans-serif font designed by Apple for use on its devices and operating systems
• Inter is a popular open-source font family and was specifically created to improve readability on screens, making it an ideal choice for digital designs
• Roboto is a modern sans-serif font designed by Google for use on Android devices and other Google products

Icons and Avatars

Often, teams rely on pre-made icon sets and illustrations to speed up the design process. As designers, it's essential to start on the right foot and build on the expertise of others. It's also important to learn how to customize icons and illustrations properly to fit your product. In this course, we'll be using SF Symbols, which is free and included in the course's source files.

Here are some of the best icon sets to get started with.

• SF Symbols 4 is a set of over 3,100 symbols designed by Apple for use in their products and user interfaces. It has a Mac app, which allows users to browse and customize the symbols in term of font width, rendering modes, colors, background and more
• Material Design Icons is a set of over 4,000 icons designed by Google for use in their Material Design language
• Hero Icons is a set of 292 beautiful hand-crafted SVG icons, by the makers of Tailwind CSS
• Feather Icons includes over 280 icons in a variety of categories, including arrows, devices, and social media icons
• Font Awesome is one of the largest library of icons used by designers. It offers both free and paid versions of their toolkit, with different features and benefits

AI Images with Midjourney

This course teaches how to create great visuals for your web apps using Midjourney. You'll learn the basics of Midjourney, including its available tools and features. Additionally, you'll discover how to generate effective photos and illustrations that communicate your message to your audience. By the end of the course, you'll be able to create professional-quality visuals that will make your web design stand out.

ChatGPT

ChatGPT is a helpful tool for creating content and titles. It's designed to help you make engaging content that keeps your readers interested. It has many features to make writing easier. You can use ChatGPT to create content for various purposes, such as blog posts, articles, presentations, and social media. You can customize the tool to suit your needs. With ChatGPT, you can make your content more informative and interesting.

Interactive Components

Interactive Components allow you to quickly create and compare different design options by prototyping interactions among variants in a component set. This helps you identify potential issues or areas for improvement in your design, resulting in a more effective design. In short, Interactive Components streamline your workflow and create engaging designs.

App Flow and Prototyping

The design tool is a fast way to create prototypes for app flows and interactions. By designing in this tool, you'll have more functionality for your app before you start coding. One of the main benefits of using this tool is the ability to avoid overcomplicating your design file. It's important to know that by using this tool, you'll have a clearer vision of your app's design and functionality, saving you time and effort in the long run.

Presentation

To capture your audience's attention, showcase your app in action with screenshots. Use these for landing pages, App Store submissions, presentations, and promotions. High-quality, visually appealing screenshots can convert potential users.