We may earn an affiliate commission when you visit our partners.
Course image
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

Read more

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.

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Syllabus

Learn web design basics using Figma, we will focus on UX/UI principles and explore wireframing, moodboards and design thinking for effective solutions.
This lesson covers integrating images into web designs using best practices for choice and placement and refining wireframes from low to high fidelity.
We will cover further refinement of wireframes - introducing the prototype phase in Figma, creating usable interactions with UX/UI principles.

Good to know

Know what's good
, what to watch for
, 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

Save Web Design 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 Web Design with these activities:
Review Wireframing Basics
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
This book will teach you the essential principles of web design.
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
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
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
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
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
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
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
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
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
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
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.

Career center

Learners who complete Web Design will develop knowledge and skills that may be useful to these careers:
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
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
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
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
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
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
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
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
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
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
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
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
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
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
A Photographer takes pictures for websites, applications, and other media. This course can teach you about composition, lighting, and other photography principles.

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

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Web Design.
GenAI for UX Designers
Most relevant
Figma UI UX Design Essentials
Most relevant
UI Design using Material Design 3: Designing a Reminder...
Most relevant
UI Design and Advanced UX Project
Most relevant
Try It: Fundamentals of Figma
Most relevant
Complete Figma Megacourse: UI/UX Design Beginner to Expert
Most relevant
Prototypes in Figma: Creating an Initial Low Fidelity...
Most relevant
Designing a Low Fidelity Prototype in Figma
Most relevant
Product Design, Prototyping, and Testing
Most relevant
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 - 2024 OpenCourser