Booking options
£25
Course Images
Modern Web Design - Wireframes to Style Guide
By iStudy UK
- 30 Day Money Back Guarantee
- Completion Certificate
- 24/7 Technical Support
Highlights
On-Demand course
7 hours 34 minutes
All levels
Description
Learn to create the responsive website with the Modern Web Design - Wireframes to Style Guide course.
To make a website responsive is the first work nowadays because of the number of mobile and tab users. Older website owners are now starting to recreate their website or make it responsive. In this course, you will master the skills for creating the responsive website using Balsamiq Mockups, Photoshop, Zeplin and Invision App.
The course teaches you how to design for the developers. The system of building Prototypes for showing website flows and interactions, designing Wireframes using Balsamiq Mockups, design and develop a coded Style Guide for Developers, creating Online Style Guide using Zeplin, creating grid system for different screens e.g. PC, Tablet or Smart Phones will be discussed in the course,
Upon completion, you will be able to design and develop responsive websites.
What Will I Learn?
Learn the professional process of a Responsive Web Design Project
Know the Questions to get project details from Clients
What should a Design Brief have?
Learn all about building and using Mood Boards in your projects
Understand the IDEATION process (early Sketching)
Design and Develop Grid system for different screens e.g PC, Tablet or Smart Phones
Design Wireframes using Balsamiq Mockups
How to set up Grids and Guides for Responsive Web Design
Learn the developers' mind 'How Developers code your design '
How to design and develop a coded Style Guide for Developers
Build Prototypes to show website flows and interactions
Create Online Style Guide using Zeplin
How to Design for Developers
Understand design frameworks like Atomic Design or Content first approach
Learn tools like Zeplin, Balsamiq Mockups and Invision App
Requirements
Good knowledge of Adobe Photoshop CC
Modern Web Design - Wireframes to Style Guide | |||
0.2 what we will cover in this course | 00:03:00 | ||
1.1 skills-and-apps-you-need-to-take-this-courseautogenerated | 00:02:00 | ||
1.2. Photoshop extensions We Need | 00:07:00 | ||
2.1.how To Organize A Design Project | 00:05:00 | ||
2.2 client's Sketches | 00:04:00 | ||
2.2 naming psd layers and groups | 00:05:00 | ||
2.3.naming Conventions To Help Developers | 00:03:00 | ||
3.1.design Briefs | 00:10:00 | ||
3.3 getting More Info On Project | 00:05:00 | ||
3.4.content_template for gathering information | 00:03:00 | ||
4.1.moodboards | 00:06:00 | ||
4.2.ideation Phase | 00:05:00 | ||
4.3.introduction To Balsamiq | 00:10:00 | ||
4.4desining Wireframes Part 1 | 00:08:00 | ||
4.5.desining Wireframes Part 2 | 00:14:00 | ||
4.6.atomic Design | 00:08:00 | ||
4.7.8pt Grid | 00:09:00 | ||
5.1.typeface And Color Combinations | 00:04:00 | ||
5.2.ui Style Guides | 00:07:00 | ||
5.3.examples Of Ui Style Guides | 00:03:00 | ||
5.4.how I Created My Style Guide | 00:07:00 | ||
5.5.styleguide-typescale Explained | 00:03:00 | ||
5.6.Styleguide-assignment | 00:01:00 | ||
6.1.online tools for grid calcuations | 00:13:00 | ||
6.2.planning your grid | 00:05:00 | ||
6.3.whitespace-plan | 00:06:00 | ||
6.4.setting Up Artboard For Desktop Design | 00:07:00 | ||
6.5.designing Header And Hero Part 1 | 00:12:00 | ||
6.6 designing Header And Hero Part 2 | 00:09:00 | ||
6.7.designing Steps Area Part 1 | 00:10:00 | ||
6.8.designing Step Area Part 2 | 00:09:00 | ||
6.9.userreviews Area Design | 00:09:00 | ||
6.10.adjusting White Space And Vertical Rhythem | 00:06:00 | ||
6.11.desining Team Part1 | 00:11:00 | ||
6.12.desining Team Part2 | 00:07:00 | ||
6.13.footer Design Part1 | 00:08:00 | ||
6.14.footer Design Part2 | 00:11:00 | ||
7.1.Responsive Design Considerations Part 1 | 00:07:00 | ||
7.2.Responsive Design Considerations Part 2 | 00:06:00 | ||
7.3.Establishing Grid For Tablets | 00:07:00 | ||
7.4.Header Area For Tablet View | 00:11:00 | ||
7.5.Section how it work - steps | 00:10:00 | ||
7.6.Section team Tablet View | 00:09:00 | ||
7.7 footer Design | 00:09:00 | ||
8.1.mobile Artboard And Grids | 00:04:00 | ||
8.2.header Mobile View | 00:11:00 | ||
8.3.steps Section-mobile | 00:09:00 | ||
8.4.section 2 Team Members For Mobile | 00:09:00 | ||
8.5.footer And Final Adjustments | 00:08:00 | ||
9.1.what Developes Needs To Know | 00:05:00 | ||
9.2.Red Line Document with Ink 1 | 00:10:00 | ||
9.3.Red Line Document with Ink 2 | 00:06:00 | ||
9.4.which layer styles you can use photoshop | 00:08:00 | ||
9.5.installing Using Zeplin | 00:10:00 | ||
9.6.style Guides With Zeplin | 00:14:00 | ||
9.7.tools-zeplin-avocode-1 | 00:04:00 | ||
9.8.avocode And Sympli | 00:06:00 | ||
10.1. What Are Prototypes | 00:04:00 | ||
10.2.getting Familiar With Invision App For Prototyping | 00:07:00 | ||
10.3.creating First Prototype With Invision App | 00:06:00 | ||
11.1 using iconmoon app to create custom icon fonts set | 00:08:00 | ||
11.2 Using SVG in Web design | 00:11:00 | ||
Mock Exam | |||
Final Exam |
About The Provider
We understand more than anyone how important it is for yo...
Reviews
There are no reviews for Modern Web Design - Wireframes to Style Guide yet.Why not be the first one to review this course?