OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

UX / UI Design Mastery - From Zero To Live Website

Aleksandar Cucukovic

Most designers when they learn just skip the fundamentals and move straight to their favorite software and start designing. And then they realize that something is wrong with their design, but because they skipped the theory, they don't know what is the issue and how to fix it.

That is the reason I asked over 60.000 of my students and turned the answers I got into the biggest online UI/UX design course ever created.

Hey designer, my name is Alex and in this course we will cover:

Read more

Most designers when they learn just skip the fundamentals and move straight to their favorite software and start designing. And then they realize that something is wrong with their design, but because they skipped the theory, they don't know what is the issue and how to fix it.

That is the reason I asked over 60.000 of my students and turned the answers I got into the biggest online UI/UX design course ever created.

Hey designer, my name is Alex and in this course we will cover:

  • UX Design Basics

  • Design Briefs

  • Project Proposals

  • User Research and Personas

  • Competitive Analysis

  • User Flows

  • Paper Wireframes

  • Layouts and Grids

  • Typography and Font Pairing

  • Iconography

  • Color Selection

  • Working With Images

  • Mood Boards

  • UI Kits

  • Design Systems

  • Design a website in Adobe Xd and Figma

  • Build it in Webflow and launch it

  • Create Case Studies

  • Cover where to find a job you want

Over two years of work went into making this course and over 15 years of learning and working with clients. There is over 28 hours of video content inside, plus templates and practice files are included as well so you can kickstart your career and your learning process much faster.

By the end of this course you will make better design decisions, know which problems to solve, who are you designing for and why as well as how to structure and organize your files for faster work and delivery. Finally, you will gain new valuable skills that employers are looking for in a UI / UX designer, so you will be able to find a better job more easily.

I look forward to see you in class.

Have a creative day.

Alex

Enroll now

What's inside

Syllabus

In this section you will learn what the UX design is and how to use it in your workflow.
Course Structure And Project Files
Figma Course Updates
Read more
Section 1 UX Design Basics
What Is UX Design
What does UX Designer Do
Is UX the same as UI
Skills UX Designer needs
In House VS Freelance UX Designer
Tools For UX Designers
Section 1 Resources & Assignment
Every project requires a good design brief and understanding of the requirements so in this section we will talk about that.
Section 2 - Design Briefs
What is a design brief
Creating a design brief in Adobe Xd
Design Brief in Figma
Section 2 Resources & Assignment
When you understand what your client needs, you have to send them a project proposal, detailing what will be done in the project, and what is not in the project scope as well as your pricing.
Section 3 - Project Proposals
What is a project proposal
When should you send it
Creating a project proposal in Adobe Xd
Proposal cover
Project details
Project pricing
Terms and conditions
About you
Project Proposal In Figma
Section 3 Resources & Assignment
Now that you know what you are doing, you have to understand who are you doing it for and that's where the user research and personas come into play.
Section 4 - User Research And Personas
What is a User Persona
Types of research methods
Quantitative VS Qualitative
Choosing your participants
Visualizing your data
Creating your User Persona
User Personas In Figma
Section 4 Resources & Assignment
Before you start designing, you have to analyze the competition, see what they are doing right and where they are wrong, so you can avoid making the same mistakes as them.
Section 5 - Competitive Analysis
What is a competitive analysis
Types of competitive analysis
How to do a complete analysis
How to do a feature analysis
Which tools to use
Things to look out for
Section 5 Assignment
Before you design all your pages, you have to understand the best routes users will take on your website both for tasks and in general, that's where user flows come in handy.
Section 6 - User Flows
What are user flows
Different user flow types
When are they used
Creating user flows in Adobe Xd
Working with flowcharts in Adobe Xd
Sharing your flows
Section 6 Resources & Assignment
Now it's finally time to explore some layouts, but instead of doing it in your software of choice, we well do it on a piece of paper because it's faster and cheaper for your client.
Section 7 - Paper Wireframes
What are paper wireframes
Which elements to include
Wireframe styles
Equipment you need
Drawing on plain paper
Drawing on dot grid paper
Using printable templates
Sharing your wireframes
Section 7 Resources & Assignment
When you jump into your software of choice, you have to organize your content and structure it so it make visual sense, as well as for development later.
Section 8 - Layout And Grids
What is a layout
What is a grid system and why is it important
How to set up grids in Adobe Xd
Working with Bootstrap
Working with 8px Grid System
Horizontal rhythm in Adobe Xd
Section 8 Resources & Assignment
Typography is half of your design so it's really important to choose the good one and to pair and contrast it well with the rest of your design.
Section 9 - Typography And Font Pairing
Typefaces VS Fonts
Font Types
Font weights and how to use them
Choosing fonts
Font pairing
Font scale
Section 9 Resources & Assignment
As visual elements, icons are really powerful because one icon can tell a better story then multiple lines of text so choosing good icon style and packs is essential.
Section 10 - Iconography
What are icons
Different types of icons
Icon libraries, packs and file formats
Free VS Premium Icons
Tips for best results
Section 10 Resources & Assignment
Color balance is essential in making your visitors feel welcome and in the right mood for making a purchase of your site. Balancing right colors is an art in itself.
Section 11 - Color Selection
Why color is important
Which colors exist
Color combinations
Color selection tools

Save this course

Save UX / UI Design Mastery - From Zero To Live Website to your list so you can find it easily later:
Save

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 UX / UI Design Mastery - From Zero To Live Website with these activities:
Review Basic Design Principles
Reinforce your understanding of fundamental design principles before diving into UX/UI specifics. This will provide a solid foundation for making informed design decisions throughout the course.
Browse courses on Design Principles
Show steps
  • Read articles or watch videos on design principles like balance, contrast, and hierarchy.
  • Analyze existing websites and identify how these principles are applied.
Review 'Don't Make Me Think' by Steve Krug
Understand the core principles of usability and user-centered design. This book provides a foundational understanding of how users interact with websites and applications.
View Don't Make Me Think, Revisited: A Common Sense... on Amazon
Show steps
  • Read the book and take notes on key concepts.
  • Apply the principles to websites you use regularly and identify areas for improvement.
Redesign a Favorite Website
Apply the concepts learned in the course by redesigning a website you frequently use. This hands-on project will solidify your understanding of UX/UI principles and design processes.
Show steps
  • Choose a website you want to redesign.
  • Identify usability issues and areas for improvement.
  • Create wireframes and mockups of your redesigned website.
  • Prototype your design using Figma or Adobe XD.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Create a UI Kit
Solidify your understanding of UI elements and design systems by creating your own UI kit. This will help you develop a keen eye for detail and consistency in design.
Show steps
  • Choose a specific style or theme for your UI kit.
  • Design a set of common UI elements, such as buttons, input fields, and navigation menus.
  • Organize your UI kit in a design tool like Figma or Adobe XD.
Review 'The Design of Everyday Things' by Don Norman
Gain a deeper understanding of design principles and how they apply to everyday objects. This book will broaden your perspective on design thinking and user experience.
View Things That Make Us Smart: Defending Human... on Amazon
Show steps
  • Read the book and reflect on the design of objects you use daily.
  • Identify examples of good and bad design based on the principles discussed in the book.
Build a Portfolio Website
Showcase your UX/UI design skills by creating a professional portfolio website. This will allow you to present your projects and attract potential clients or employers.
Show steps
  • Plan the structure and content of your portfolio website.
  • Design the layout and user interface of your website.
  • Develop your website using Webflow or another website builder.
  • Create case studies for your projects.
  • Launch your website and promote it online.
Follow Advanced Figma Tutorials
Enhance your proficiency in Figma by following advanced tutorials on topics such as prototyping, animation, and design systems. This will help you become a more skilled and efficient designer.
Show steps
  • Search for advanced Figma tutorials on YouTube or other online platforms.
  • Choose tutorials that cover topics you want to learn more about.
  • Follow the tutorials step-by-step and practice the techniques demonstrated.

Career center

Learners who complete UX / UI Design Mastery - From Zero To Live Website will develop knowledge and skills that may be useful to these careers:
User Interface Designer
A user interface designer focuses on the visual elements users interact with on a website or application. This course helps UI designers gain a strong foundation in interface design principles. Covering topics like typography, color selection, and iconography, the course helps one create visually appealing and effective user interfaces. The course's focus on design systems and UI kits is particularly relevant, as it provides a structured approach to UI design, allowing to maintain consistency and efficiency across projects. Learning to design a website in Adobe XD and Figma allows prospective user interface designers to build skills in popular tools.
See salaries and explore the career path for User Interface Designer
User Experience Designer
The user experience designer aims to make technology usable, enjoyable, and accessible. This course helps aspiring user experience designers learn the foundations of UX. With instruction in user research, personas, user flows, and wireframing, the course provides the methodological background necessary for success. The emphasis on understanding user needs and behaviors, conducting competitive analysis, and creating effective user flows will enable a user experience designer to create user-centered designs that meet both user and business goals. This course, which covers UX design basics, is a valuable resource for anyone pursuing a career as a user experience designer.
See salaries and explore the career path for User Experience Designer
Web Designer
A web designer plans and creates websites, ensuring they are both visually appealing and functional. The course provides web designers with skills in UX and UI design. The course covers key aspects of web design, including layout, grid systems, typography, and color selection. The hands-on experience of designing and building a website in Adobe XD, Figma, and Webflow prepares web designers to bring their designs to life. Learning to create case studies is valuable as well, since it enables web designers to demonstrate their design process and results to potential clients. The course also teaches where to find a job.
See salaries and explore the career path for Web Designer
Interaction Designer
The interaction designer concentrates on how users interact with a digital product, focusing on creating intuitive and engaging experiences. This course helps interaction designers by training them in how to design user flows and create wireframes using Figma and Adobe XD. Instruction in user research and usability testing would also be helpful in the design process. The focus on creating design briefs and project proposals will enable interaction designers to communicate their ideas effectively to clients and stakeholders. This will allow one to create products that are both usable and enjoyable for the user.
See salaries and explore the career path for Interaction Designer
Product Designer
The product designer is involved in the entire product development process, from ideation to launch, focusing on creating user-centered and effective products. This course helps product designers learn fundamental UX/UI principles, user research, and design methodologies. Instruction in creating user personas, conducting competitive analysis, and developing user flows informs the design process. Learning to design and prototype in Adobe XD and Figma ensures a product designer can bring their ideas to life. The course's focus on design systems and UI kits is particularly valuable, as it allows product designers to create scalable and consistent designs.
See salaries and explore the career path for Product Designer
User Researcher
A user researcher investigates user behaviors, needs, and motivations through various research methods. This course helps user researchers understand how to conduct effective user research. The course covers different types of research methods, including quantitative and qualitative approaches, and how to choose the right participants. Learning how to visualize data and create user personas is an essential skill for a user researcher. Further, the course teaches one to analyze the competition to understand current market trends. The course may therefore benefit a user researcher.
See salaries and explore the career path for User Researcher
Information Architect
An information architect organizes and structures content in a way that makes it easy for users to find what they need. This course may assist information architects. With instruction in UX and UI principles, the course provides a foundation for creating effective information architectures. The focus on user flows and wireframing allows an information architect to visualize and test different information structures. Further, the course teaches designers how to analyze the competition to understand current market trends. This may be useful for those wishing to pursue this role.
See salaries and explore the career path for Information Architect
Usability Analyst
A usability analyst evaluates the ease of use of a website or application, identifying areas for improvement. This course may benefit usability analysts. The course covers UX design basics, user research, and user flows, which are essential for understanding how users interact with a product. Emphasis on wireframing, which allows one to create prototypes for usability testing. Learning about design briefs and project proposals may help analysts communicate recommendations to stakeholders. This course’s lessons in UX design may therefore be of use to those aspiring to usability testing.
See salaries and explore the career path for Usability Analyst
Front-End Developer
A front end developer implements visual elements and user interfaces of a website or application. This course may be useful for front end developers, as it covers the fundamentals of UI and UX design. While the primary focus of a front end developer is coding, understanding design principles allows them to collaborate effectively with designers. Learning to work with layouts, grids, typography, and color selection helps a front end developer implement designs accurately. Experience building websites in Webflow complements a front end developer’s skill set.
See salaries and explore the career path for Front-End Developer
Accessibility Specialist
An accessibility specialist ensures that websites and applications are usable by people with disabilities. This course may be useful to accessibility specialists. While the course does not explicitly focus on accessibility, understanding UX and UI design principles helps one create more accessible designs. Learning about user research and user flows allows one to consider the needs of diverse users. The course’s coverage of typography and color selection enables accessibility specialists to make informed decisions about visual elements. While not the primary focus, the course provides a foundation for understanding accessibility considerations in design.
See salaries and explore the career path for Accessibility Specialist
Digital Marketing Specialist
The digital marketing specialist promotes products or services through online channels. While not directly related to marketing, this course may be useful for digital marketing specialists. Understanding UX and UI design principles enables them to create more effective landing pages and online advertisements. Learning how to conduct competitive analysis helps digital marketing specialists understand market trends and user preferences. This can lead to a better understanding of customers and more effective marketing campaigns. The course may be relevant to digital marketing specialists.
See salaries and explore the career path for Digital Marketing Specialist
Graphic designer
A graphic designer creates visual concepts that communicate ideas, inspire, inform, or captivate consumers. This course may be useful for the graphic designer. Although it focuses on UX/UI design, the course covers design principles such as typography, iconography, and color selection, which apply to graphic design. Learning about user research and user flows may help graphic designers create designs that are more user-centered and effective. The course's coverage of Adobe XD and Figma provides graphic designers with additional tools for their design work. This course might be helpful for graphic designers.
See salaries and explore the career path for Graphic designer
Project Manager
The project manager plans, organizes, and oversees projects to ensure they are completed on time and within budget. This course may be related to the tasks of project managers. Understanding the design process and UX/UI principles allows the project manager to communicate effectively with designers and stakeholders. Learning about design briefs and project proposals allows project managers to create clear and concise project plans. The course may therefore be beneficial for project managers.
See salaries and explore the career path for Project Manager
Business Analyst
A business analyst identifies the business needs of their clients and stakeholders to determine solutions to business problems. While the course focuses on design, a business analyst may find it to be helpful in their tasks. Learning about user research and competitive analysis allows one to understand user needs and market trends. The course covers design briefs and project proposals, which may help business analysts communicate their ideas effectively. Although not directly related, a business analyst may find this course useful.
See salaries and explore the career path for Business Analyst
Technical Writer
A technical writer creates documentation that helps people understand and use technology. Although design-focused, technical writing may be aided through this course. Understanding UX/UI principles allows technical writers to create documentation that is user-friendly and easy to navigate. Learning about user research and user flows may help technical writers create documentation that meets the needs of their users. The course, while not focused on writing, may be useful for technical writers.
See salaries and explore the career path for Technical Writer

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in UX / UI Design Mastery - From Zero To Live Website.
Cover image
Don't Make Me Think, Revisited
Save
Classic in the field of usability and user experience. It emphasizes the importance of intuitive design and clear navigation. Reading this book will help you understand the core principles of user-centered design, which are essential for creating effective and enjoyable user interfaces. It's a highly recommended read for anyone starting in UX/UI design.
Don't Make Me Think, Revisited: A Common Sense...
Paperback
$$
Don't Make Me Think, Revisited : A Common Sense...
Hardcover
$$$
Don't Make Me Think, Revisited: A Common Sense...
Kindle Edition
$$
Cover image
Things That Make Us Smart
Save
Explores the principles of good design and how they apply to everyday objects. It emphasizes the importance of usability, learnability, and memorability in design. Reading this book will help you develop a critical eye for design and understand how to create user-friendly products. It provides a broader perspective on design thinking that complements the specific skills taught in the course.
Things That Make Us Smart: Defending Human...
Kindle Edition
$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
28.5 total hours
Via
Udemy
Instructor
Aleksandar Cucukovic
Language
English
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

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.

Affiliate disclosure

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.

© 2016 - 2025 OpenCourser