We may earn an affiliate commission when you visit our partners.
Joshua Wilder Oakley
Learn web design basics with Figma, covering UX/UI principles, wireframing, image integration, and prototyping for multi-page websites. Enroll today.
Prerequisite details
To optimize your success in this program, we've created a list of prerequisites and recommendations to help you prepare for the curriculum. Prior to enrolling, you should have the following knowledge:
- Digital Arts Fluency
You will also need to be able to communicate fluently and professionally in written and spoken English.
Register for this course and see more details by visiting:
OpenCourser.com/course/fwfp4y/web
Here's a deal for you
Save money when you learn with a deal that may be relevant to this course.
All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
OPENCOURSER
What's inside
Syllabus
Traffic lights
Traffic lights
Read about what's good
what should give you pause and
possible dealbreakers
Learners will be taking their first steps into web design using industry-standard software, Figma
This course explores UX/UI principles and how they can help learners create stronger impact with their websites
Learners will advance their ability to create multi-page websites, which can really help them build professional portfolios
Save this course
Create your own learning path.
Save this course to your list so you can find it easily later.
Save
Save
Reviews summary
Foundational web design with figma
According to students, this course is an excellent starting point for learning web design basics, especially for those new to the field or to Figma. Learners consistently praise its clear explanations of UX/UI principles and the highly practical, hands-on Figma projects that help solidify concepts. While many found the instructor's guidance clear and demonstrations useful, some suggest the pace can be slow for those with prior experience. A key point raised is that the course offers a solid foundation but is not suitable for intermediate or advanced learners seeking deeper dives into complex topics or cutting-edge trends.
Remains highly relevant for new web designers despite rapid industry changes.
"This course was absolutely fantastic! ... Highly recommend for anyone starting out in web design."
"Excellent course for beginners! I had no prior experience with Figma or UX/UI, and this course made it so accessible."
"The content felt outdated in some parts, especially regarding current web design trends... Not for intermediate users."
Covers core UX/UI principles effectively and comprehensively.
"The instructor explained UX/UI principles so clearly... The step-by-step guidance on prototyping was a game-changer for me."
"I particularly enjoyed learning about moodboards and design thinking, which are not always covered in intro courses."
"The UX/UI principles were explained in a way that made them easy to understand and apply."
Hands-on exercises effectively build confidence and skills.
"The hands-on Figma projects were incredibly useful. I feel much more confident in my design skills now."
"The exercises really helped solidify the concepts... The hands-on projects were the best part."
"The practical exercises using Figma were invaluable. I'm already applying what I've learned to my personal projects."
Highly effective for those new to web design and Figma.
"This course was absolutely fantastic! The instructor explained UX/UI principles so clearly..."
"Excellent course for beginners! I had no prior experience with Figma or UX/UI, and this course made it so accessible."
"The course is incredibly well-structured and easy to follow. The instructor's explanations are concise and clear, making complex topics digestible."
While generally good, some found the pace slow and content less deep.
"The instructor was knowledgeable, though sometimes the pace felt a little slow."
"The basics are covered, but it doesn't go very deep. I felt it was a bit slow-paced at times..."
"I was hoping for more advanced prototyping techniques and less time on very basic Figma functions."
Provides a solid foundation but may be too basic for experienced designers.
"If you already have some experience with design tools, you might find it too simplistic. Good for absolute beginners only."
"Found this course to be a bit too basic... Not for intermediate users."
"If you're looking for advanced topics, you'll need to look elsewhere. But for what it promised, it delivered."
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 Web Design with these
activities:
Review Wireframing Basics
Show steps
Refresh your knowledge of wireframing principles to enhance your understanding of the early stages of website design.
Browse courses on
Wireframing
Show steps
-
Read an article on wireframing best practices.
-
Sketch out a simple website layout using pen and paper.
-
Use an online wireframing tool to create a basic prototype.
Read the book Design for the Web by Jerry Cao
Show steps
This book will teach you the essential principles of web design.
View
Fundamentals of Plan Making: Methods and...
on Amazon
Show steps
-
Read the book from cover to cover
-
Take notes on the key concepts
-
Apply the principles you learn to your own web design projects
Follow a tutorial on how to create a website using Figma
Show steps
Following a tutorial will help you learn the basics of web design and how to use Figma.
Browse courses on
Web Development
Show steps
-
Find a tutorial that is appropriate for your skill level
-
Follow the tutorial step-by-step
-
Experiment with different design elements and techniques
Nine other activities
Expand to see all activities and additional details
Show all 12 activities
Join a study group with other students in the course
Show steps
Studying with other students can help you learn the material more effectively.
Show steps
-
Find other students in the course who are interested in forming a study group
-
Meet regularly to discuss the course material and work on projects together
Explore Figma's Image Editing Features
Show steps
Solidify your understanding of Figma's capabilities for image manipulation and optimization in web designs.
Browse courses on
Figma
Show steps
-
Watch a video tutorial on image editing in Figma.
-
Follow a step-by-step guide to optimize an image for the web using Figma.
-
Experiment with Figma's image editing tools to adjust an image for a website.
Create a series of wireframes for a simple landing page
Show steps
Creating wireframes will help you understand the basic structure and layout of a web page.
Browse courses on
Wireframing
Show steps
-
Choose a simple landing page to use as your reference
-
Use a wireframing tool to create your first wireframe
-
Iterate on your wireframe until you are happy with the design
Attend a local web design meetup
Show steps
Attending a meetup will help you connect with other web designers and learn about new trends.
Browse courses on
Web Design
Show steps
-
Find a local web design meetup
-
Attend the meetup
-
Network with other attendees
Attend a Web Design Workshop
Show steps
Enhance your practical skills and knowledge by participating in a web design workshop focused on Figma.
Browse courses on
Web Design
Show steps
-
Research and find a reputable web design workshop.
-
Register for the workshop and prepare any necessary materials.
-
Attend the workshop and actively participate in the activities.
-
Follow up with the workshop organizers or attendees to continue learning.
Write a blog post about your experience learning web design with Figma
Show steps
Writing a blog post will help you reflect on what you have learned and share your knowledge with others.
Browse courses on
Web Design
Show steps
-
Choose a topic that you want to write about
-
Write an outline of your blog post
-
Write the first draft of your blog post
-
Edit and revise your blog post
-
Publish your blog post
Participate in a web design workshop
Show steps
Participating in a workshop will give you the opportunity to learn from experienced web designers.
Browse courses on
Web Design
Show steps
-
Find a web design workshop that is appropriate for your skill level
-
Participate in the workshop
-
Apply the skills you learn to your own web design projects
Design and prototype a website using Figma
Show steps
This project will give you hands-on experience with the entire web design process.
Browse courses on
Web Design
Show steps
-
Choose a topic for your website
-
Create a wireframe for your website
-
Design the visual elements of your website
-
Create a prototype of your website
-
Get feedback on your website from others
Design a Multi-Page Website Prototype
Show steps
Apply your knowledge of web design concepts and Figma to create a functional prototype for a multi-page website.
Browse courses on
Prototyping
Show steps
-
Create a wireframe for each page of the website.
-
Design the user interface for each page using Figma.
-
Link the pages together to create a prototype.
-
Test the prototype with a user to gather feedback.
Review Wireframing Basics
Show steps
Refresh your knowledge of wireframing principles to enhance your understanding of the early stages of website design.
Browse courses on
Wireframing
Show steps
Show steps
Show steps
- Read an article on wireframing best practices.
- Sketch out a simple website layout using pen and paper.
- Use an online wireframing tool to create a basic prototype.
Read the book Design for the Web by Jerry Cao
Show steps
This book will teach you the essential principles of web design.
View
Fundamentals of Plan Making: Methods and...
on Amazon
Show steps
Show steps
Show steps
- Read the book from cover to cover
- Take notes on the key concepts
- Apply the principles you learn to your own web design projects
Follow a tutorial on how to create a website using Figma
Show steps
Following a tutorial will help you learn the basics of web design and how to use Figma.
Browse courses on
Web Development
Show steps
Show steps
Show steps
- Find a tutorial that is appropriate for your skill level
- Follow the tutorial step-by-step
- Experiment with different design elements and techniques
Nine other activities
Expand to see all activities and additional details
Show all 12 activities
Join a study group with other students in the course
Show steps
Studying with other students can help you learn the material more effectively.
Show steps
Show steps
Show steps
- Find other students in the course who are interested in forming a study group
- Meet regularly to discuss the course material and work on projects together
Explore Figma's Image Editing Features
Show steps
Solidify your understanding of Figma's capabilities for image manipulation and optimization in web designs.
Browse courses on
Figma
Show steps
Show steps
Show steps
- Watch a video tutorial on image editing in Figma.
- Follow a step-by-step guide to optimize an image for the web using Figma.
- Experiment with Figma's image editing tools to adjust an image for a website.
Create a series of wireframes for a simple landing page
Show steps
Creating wireframes will help you understand the basic structure and layout of a web page.
Browse courses on
Wireframing
Show steps
Show steps
Show steps
- Choose a simple landing page to use as your reference
- Use a wireframing tool to create your first wireframe
- Iterate on your wireframe until you are happy with the design
Attend a local web design meetup
Show steps
Attending a meetup will help you connect with other web designers and learn about new trends.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Find a local web design meetup
- Attend the meetup
- Network with other attendees
Attend a Web Design Workshop
Show steps
Enhance your practical skills and knowledge by participating in a web design workshop focused on Figma.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Research and find a reputable web design workshop.
- Register for the workshop and prepare any necessary materials.
- Attend the workshop and actively participate in the activities.
- Follow up with the workshop organizers or attendees to continue learning.
Write a blog post about your experience learning web design with Figma
Show steps
Writing a blog post will help you reflect on what you have learned and share your knowledge with others.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Choose a topic that you want to write about
- Write an outline of your blog post
- Write the first draft of your blog post
- Edit and revise your blog post
- Publish your blog post
Participate in a web design workshop
Show steps
Participating in a workshop will give you the opportunity to learn from experienced web designers.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Find a web design workshop that is appropriate for your skill level
- Participate in the workshop
- Apply the skills you learn to your own web design projects
Design and prototype a website using Figma
Show steps
This project will give you hands-on experience with the entire web design process.
Browse courses on
Web Design
Show steps
Show steps
Show steps
- Choose a topic for your website
- Create a wireframe for your website
- Design the visual elements of your website
- Create a prototype of your website
- Get feedback on your website from others
Design a Multi-Page Website Prototype
Show steps
Apply your knowledge of web design concepts and Figma to create a functional prototype for a multi-page website.
Browse courses on
Prototyping
Show steps
Show steps
Show steps
- Create a wireframe for each page of the website.
- Design the user interface for each page using Figma.
- Link the pages together to create a prototype.
- Test the prototype with a user to gather feedback.
Career center
Learners who complete Web Design will develop knowledge and skills
that may be useful to these careers:
Web Developer
Web Developer
A Web Developer designs, deploys, and maintains websites and web applications. This course provides a foundation by teaching tools and techniques such as UX/UI principles and hands-on practice with designing in Figma. This course can help you start a career as a Web Developer by providing you with the skills to design and build websites from scratch.
UX Designer
UX Designer
A UX Designer enhances the user experience of a website or application. This course is a great place to begin learning UX fundamentals, as you will learn about UX/UI principles, moodboarding, and design thinking. These are concepts that all UX Designers need to be familiar with.
Front-End Developer
Front-End Developer
A Front-End Developer focuses on the user interface of the website or application. By learning Figma, UX/UI principles, and getting practice with wireframing in this course, you can gain an understanding of how to think like a Front-End Developer.
Graphic Designer
Graphic Designer
A Graphic Designer uses visual elements to communicate ideas. In this course, you will learn about typography, color theory, and other design elements. These elements are important for Graphic Designers to know.
UI Designer
UI Designer
A UI Designer focuses on creating the user interface of a website or application. Figma, UX/UI principles, and wireframing are all relevant skills for a UI Designer to have, which makes this a great course for beginners.
Art Director
Art Director
An Art Director oversees the visual aspects of a project. This course can introduce you to the fundamentals of design and give you a good starting point if you want to pursue a career as an Art Director.
Marketing Manager
Marketing Manager
A Marketing Manager develops and executes marketing campaigns. While this course is not directly related to marketing, it can help you develop a creative mindset and learn about visual communication.
Product Designer
Product Designer
A Product Designer designs physical or digital products. This course can help you develop a foundation in design and learn about UX/UI principles, which are important for Product Designers.
Social Media Manager
Social Media Manager
A Social Media Manager creates and executes social media campaigns. This course can help you develop a creative mindset and learn about visual communication, which are important for Social Media Managers.
UX Researcher
UX Researcher
A UX Researcher conducts research to improve the user experience of a website or application. This course can help you learn about UX/UI principles and how to conduct user research.
Information Architect
Information Architect
An Information Architect organizes and structures websites and applications. This course can help you learn about UX/UI principles and how to design effective information architectures.
Visual Designer
Visual Designer
A Visual Designer creates visual elements for websites, applications, and other media. This course can help you learn about typography, color theory, and other design principles.
Copywriter
Copywriter
A Copywriter writes text for websites, applications, and other media. While this course does not teach copywriting, it can help you develop a creative mindset and learn about visual communication.
Animator
Animator
An Animator creates animations for websites, applications, and other media. This course can help you develop a creative mindset and learn about visual communication.
Photographer
Photographer
A Photographer takes pictures for websites, applications, and other media. This course can teach you about composition, lighting, and other photography principles.
For more career information including salaries, visit:
OpenCourser.com/course/fwfp4y/web
Reading list
We've selected nine 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
Web Design.
This classic book on UX design provides a comprehensive overview of the field, covering topics such as user research, interaction design, and information architecture. It great resource for anyone looking to gain a deeper understanding of UX design.
Provides practical advice on how to make websites more usable and user-friendly. It covers topics such as navigation, layout, and content writing. Reading this book will help you identify and fix common usability problems on your website.
Provides a gentle introduction to web design, covering the basics of HTML, CSS, and JavaScript. It great resource for anyone looking to get started with web design or learn more about the fundamentals.
Provides a comprehensive overview of web development, covering topics such as HTML, CSS, JavaScript, PHP, and MySQL. It great resource for anyone looking to learn more about web development or become a full-stack developer.
Save
Provides a deep dive into CSS, covering advanced topics such as CSS grid, flexbox, and animations. It great resource for anyone looking to improve their CSS skills and create more complex and visually appealing websites.
Provides a collection of creative and inspiring web design ideas. It great resource for anyone looking for inspiration or ideas for their own web design projects.
Provides a comprehensive overview of CSS3, covering the latest features and techniques. It great resource for anyone looking to learn more about CSS3 or improve their CSS skills.
Provides a comprehensive overview of JavaScript, covering the latest features and techniques. It great resource for anyone looking to learn more about JavaScript or become a JavaScript developer.
Provides a comprehensive overview of web development, covering the basics of HTML, CSS, JavaScript, and jQuery. It great resource for anyone looking to learn more about web development or become a full-stack developer.
For more information about how these books relate to this course, visit:
OpenCourser.com/course/fwfp4y/web
Share
Similar courses
Similar courses are unavailable at this time. Please try again later.
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