Duration
3 days
Overview
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.
Course Outline
- Not Getting Caught up in the Details: Wireframes
- Introduction to Week
- 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
- Finally, Make it Beautiful: The Mockup Phase
- 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
- An Excursion to Codelandia
- 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
- Putting it all Together: Final Presentation
- Clickable Prototypes Introduction
- Invision Introduction
- Exporting Assets
- Importing Assets and Creating Hotspots
- Hotspot Templates
- Full Mockups: Bradley
- Full Mockups: Alyson
Programme scope, delivery arrangements and suitability are confirmed during enquiry.