Web Design: Wireframes to Prototypes
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.
Buy Now AED 274.99 + VAT
Monthly Subscription Starting at AED 99 + VAT
- Level Professional
- Duration 41 hours
- Course by California Institute of the Arts
-
Offered by
About
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: - Responsive web design and mobile web challenges - Mobile-first approach - Web typography - The relationship between design and programming and whether it is important to know how to code - The different web technologies that make the web work, such as HTML, CSS, JavaScript, server-side coding, and databases. This course is the continuation of the course Web Design: Strategy and Information Architecture, in which students completed the first half of a large scale project"developing a comprehensive plan for a complex website. If you are intending to complete the assignments in this course to earn a certificate you must complete the Strategy and Information Architecture course first so you have the materials and data needed to begin creating wireframes and mockups in this course. This is the fourth and last course in the UI/UX Design Specialization, which brings a design-centric approach to user interface (UI) and user experience (UX) design, and offers practical, skill-based instruction centered around a visual communications perspective, rather than on one focused on marketing or programming alone. These courses are ideal for anyone with some experience in graphic or visual design and who would like to build their skill set in UI or UX for app and web design. It would also be ideal for anyone with experience in front- or back-end web development or human-computer interaction and want to sharpen their visual design and analysis skills for UI or UX.Modules
Course Overview
-
1
Videos
-
6
Readings
1
Videos
- Course Introduction
6
Readings
- About this course
- About the assignments
- Project Brief
- Required tools
- Academic Integrity
- About CalArts and the Program in Graphic Design
How Peer Review Works
-
3
Videos
-
1
Readings
3
Videos
- Why Peer Review?
- Peer Review Tips
- How to apply feedback
1
Readings
- What is peer review?
Course Communication Policies
-
3
Readings
3
Readings
- Instructor Presence and Staff Support
- Forum Guidelines
- Requesting Peer Reviews
Introduction to Wireframes
-
2
Videos
-
1
Readings
2
Videos
- Introduction to Week 1
- Introduction to Wireframes
1
Readings
- Example Wireframes: Pasadena Conservatory of Music
Responsive Design
-
1
Videos
-
2
Readings
1
Videos
- Responsive Design: What size should your website be?
2
Readings
- Scrolling
- Further Reading
Navigation Systems
-
4
Videos
-
1
Assignment
1
Assignment
- Navigation Systems
4
Videos
- Introduction and Primary navigation
- Secondary and utility navigation
- Related content, inline links, indexes, and search
- Wayfinding
Common Design Patterns
-
5
Videos
-
1
Assignment
1
Assignment
- Common Design Patterns
5
Videos
- Header
- Footer
- Sidebar
- Content
- Common Form Elements
Homepage Content Strategies
-
2
Videos
2
Videos
- Introduction to Homepage Content Strategies
- Examples of Homepage Content Strategies
Build Your Wireframes
-
4
Videos
-
2
Readings
-
1
PeerReview
1
Peer Review
- Wireframes
4
Videos
- Wireframing Tools
- Wireframes: Bradley
- Wireframes: Alyson, part 1
- Wireframes: Alyson, part 2
2
Readings
- Try it yourself: Sketch out a wireframe
- A Final Thought for the Week
Introduction to Visual Mockups
-
2
Videos
2
Videos
- Introduction to Week 2
- Visual Mockups
Design Principles and Whitespace
-
4
Videos
-
1
Assignment
1
Assignment
- Design Principles/Whitespace
4
Videos
- Design Principles
- What is whitespace?
- Using whitespace to style a form
- A visual comparison
The Grid
-
1
Readings
1
Readings
- The Grid
Web Typography
-
2
Videos
-
1
Readings
-
1
Assignment
1
Assignment
- Web Typography
2
Videos
- Web Fonts
- Web Typography: A few tips
1
Readings
- Further Reading
Web History, Skeuomorphs & Flat Design
-
1
Readings
1
Readings
- Web History, Skeuomorphs & Flat Design
Moodboards
-
1
Readings
1
Readings
- Moodboards
Create Your Mockups
-
3
Videos
-
1
PeerReview
1
Peer Review
- Visual Mockups: Home Pages
3
Videos
- Creating Visual Mockups
- Moodboards and Homepage Mockup: Bradley
- Homepage Mockup: Alyson
Bonus Content
-
1
Videos
-
2
Readings
1
Videos
- Interview with Rob Hope: Web design trends
2
Readings
- More from Rob Hope: EBook on Landing Page Hot Tips
- A Final Thought for the Week
Welcome to Codelandia
-
1
Videos
-
1
Readings
1
Videos
- Introduction to Week 3
1
Readings
- A Web Design History Primer
Is coding important?
-
6
Videos
-
2
Readings
6
Videos
- 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
2
Readings
- How to become a unicorn
- Try it yourself: Styling Buttons
Refine Your Mockups
-
1
PeerReview
1
Peer Review
- Visual Mockups: Full Set
Bonus Material
-
2
Readings
2
Readings
- Further "Reading"
- A Final Thought for the Week
Making Clickable Mockups
-
1
Videos
1
Videos
- Introduction to Week 4
Clickable Prototypes
-
5
Videos
5
Videos
- Clickable Prototypes Introduction
- Invision Introduction
- Exporting Assets
- Importing Assets and Creating Hotspots
- Hotspot Templates
Dark Patterns
-
1
Readings
-
1
Discussion
1
Discussions
- Dark Patterns
1
Readings
- Dark Patterns
Final Project Submission
-
2
Videos
-
1
Readings
-
2
PeerReview
2
Peer Review
- Final Project Submission
- Clickable Prototype of Mockups
2
Videos
- Full Mockups: Bradley
- Full Mockups: Alyson
1
Readings
- A Final Thought for the Week
Auto Summary
"Web Design: Wireframes to Prototypes" is a comprehensive course in the Arts & Humanities domain, led by Coursera. It focuses on transforming UX research into user interfaces through wireframes, mockups, and prototypes, covering responsive design, web typography, and the link between design and coding. Spanning 2460 minutes, this course is part of the UI/UX Design Specialization and is ideal for those with graphic design or web development experience. Subscription options include Starter, Professional, and Paid plans. Perfect for enhancing skills in UI/UX design.
Roman Jaster