Course Summary
Learn how to create effective wireframes and prototypes for web design with this Coursera course. Gain hands-on experience using industry-standard tools and techniques to bring your web design ideas to life.Key Learning Points
- Learn how to create wireframes and prototypes for web design
- Gain hands-on experience using industry-standard tools and techniques
- Understand the best practices for effective web design
Related Topics for further study
Learning Outcomes
- Create effective wireframes and prototypes for web design
- Understand the best practices for effective web design
- Gain hands-on experience using industry-standard tools and techniques
Prerequisites or good to have knowledge before taking this course
- Basic knowledge of web design concepts
- Access to a computer with internet connection
Course Difficulty Level
IntermediateCourse Format
- Online
- Self-paced
Similar Courses
- Web Design for Everybody: Basics of Web Development & Coding
- Responsive Web Design
- User Experience Design
Related Education Paths
Notable People in This Field
- Product Director at Google
- Director of The Design Lab at University of California, San Diego
Related Books
Description
This course is focused on the application of the early UX research to actual user interfaces: the creation of wireframes, high-fidelity mockups, and clickable prototypes. Along the way we will also discuss:
Outline
- Course Overview
- Course Introduction
- Why Peer Review?
- Peer Review Tips
- How to apply feedback
- About this course
- About the assignments
- Project Brief
- Required tools
- Academic Integrity
- About CalArts and the Program in Graphic Design
- What is peer review?
- Instructor Presence and Staff Support
- Forum Guidelines
- Requesting Peer Reviews
- Not Getting Caught up in the Details: Wireframes
- Introduction to Week 1
- Introduction to Wireframes
- Responsive Design: What size should your website be?
- Introduction and Primary navigation
- Secondary and utility navigation
- Related content, inline links, indexes, and search
- Wayfinding
- Header
- Footer
- Sidebar
- Content
- Common Form Elements
- Introduction to Homepage Content Strategies
- Examples of Homepage Content Strategies
- Wireframing Tools
- Wireframes: Bradley
- Wireframes: Alyson, part 1
- Wireframes: Alyson, part 2
- Example Wireframes: Pasadena Conservatory of Music
- Scrolling
- Further Reading
- Try it yourself: Sketch out a wireframe
- A Final Thought for the Week
- Navigation Systems
- Common Design Patterns
- Finally, Make it Beautiful: The Mockup Phase
- Introduction to Week 2
- Visual Mockups
- Design Principles
- What is whitespace?
- Using whitespace to style a form
- A visual comparison
- Web Fonts
- Web Typography: A few tips
- Creating Visual Mockups
- Moodboards and Homepage Mockup: Bradley
- Homepage Mockup: Alyson
- Interview with Rob Hope: Web design trends
- The Grid
- Further Reading
- Web History, Skeuomorphs & Flat Design
- Moodboards
- More from Rob Hope: EBook on Landing Page Hot Tips
- A Final Thought for the Week
- Design Principles/Whitespace
- Web Typography
- An Excursion to Codelandia
- Introduction to Week 3
- Do I Need to Learn How to Code?
- Survey of Web Technologies
- HTML vs. CSS vs. Javascript: A metaphorical adventure
- HTML Basics
- CSS Basics
- Web Inspector
- A Web Design History Primer
- How to become a unicorn
- Try it yourself: Styling Buttons
- Further "Reading"
- A Final Thought for the Week
- Putting it all Together: Final Presentation
- Introduction to Week 4
- Clickable Prototypes Introduction
- Invision Introduction
- Exporting Assets
- Importing Assets and Creating Hotspots
- Hotspot Templates
- Full Mockups: Bradley
- Full Mockups: Alyson
- Dark Patterns
- A Final Thought for the Week
Summary of User Reviews
Learn the basics of web design with this course on wireframes and prototypes. Students have given high praise for the practicality and hands-on approach of the course. Many have found the instructor to be engaging and easy to follow.Key Aspect Users Liked About This Course
Practicality and hands-on approach.Pros from User Reviews
- Easy to follow instructor
- Practical and useful content
- Great for beginners
- Interactive assignments
- Good pace
Cons from User Reviews
- Lacks advanced material
- Not very challenging
- Some topics are repetitive
- Could benefit from more visuals
- Limited interaction with other students
Roman Jaster
4.9 Raiting
Design iPhone App Mockup & Prototype using FREE Mac Software
- 4.5
-
![]()
![]()
![]()
![]()
![]()
No experience necessary. Get professional looking app mockups and prototypes using Pages, a free Mac application. Do you have an app idea but don’t know where to get started?...
UI Animation using Sketch 3, Principle App, and Flinto
- 4
-
![]()
![]()
![]()
![]()
![]()
Learn to prototype UI animations and micro-interactions using Sketch, Flinto, Principle, Marvel & Invision Craft Plugin UPDATE June 2017 - Nested Symbols!...
Coding for Designers, Managers, & Entrepreneurs II
- 4.5
-
![]()
![]()
![]()
![]()
![]()
Do you want to experience what it is to go from idea to code? If you’re a hands-on collaborator with developers, this course is specifically designed for you....
Design a User Experience for Social Good & Prepare for Jobs
- 4.8
-
![]()
![]()
![]()
![]()
![]()
In this course, you will design a dedicated mobile app and a responsive website focused on social good. You’ll learn how to interview for entry-level UX design positions....
