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
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.
UDACITY40
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
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
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
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
Here are nine courses similar to
Web Design.
GenAI for UX Designers
OpenCourser.com/course/c2mc1u/genai
GenAI for UX Designers
Most relevant
Figma UI UX Design Essentials
OpenCourser.com/course/cf9stf/figma
Figma UI UX Design Essentials
Most relevant
UI Design using Material Design 3: Designing a Reminder App
OpenCourser.com/course/f8gik2/ui
UI Design using Material Design 3: Designing a Reminder...
Most relevant
UI Design and Advanced UX Project
OpenCourser.com/course/2zbk4z/ui
UI Design and Advanced UX Project
Most relevant
Try It: Fundamentals of Figma
OpenCourser.com/course/mllkoi/try
Try It: Fundamentals of Figma
Most relevant
Complete Figma Megacourse: UI/UX Design Beginner to Expert
OpenCourser.com/course/328a2h/complete
Complete Figma Megacourse: UI/UX Design Beginner to Expert
Most relevant
Prototypes in Figma: Creating an Initial Low Fidelity Design
OpenCourser.com/course/ddmojc/prototypes
Prototypes in Figma: Creating an Initial Low Fidelity...
Most relevant
Designing a Low Fidelity Prototype in Figma
OpenCourser.com/course/mnycmz/designing
Designing a Low Fidelity Prototype in Figma
Most relevant
Product Design, Prototyping, and Testing
OpenCourser.com/course/nbv15n/product
Product Design, Prototyping, and Testing
Most relevant
Effort
6 hours
Via
Udacity
Instructor
Joshua Wilder Oakley
Language
English
Good to know
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
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