Name: Modern Web Design – Wireframes to Style Guide
Price: 315.00 GBP
Rating: 4.7 (6 reviews)

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

Course Curriculum

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

FAQs

This course is for anyone who's interested in this topic and wants to learn more about it. This course will also help you gain potential professional skills.

No prior qualifications are needed to take this course.

You can study this course from wherever and whenever you want. You can study at your own pace and from any device. Just log in to your account from any device and start learning!

Yes, there is a test at the end of the course. Once you’ve completed all the modules of the course, you will have to give a multiple-choice test. The questions will be based on the topics of the modules you studied. And of course, you can take the test at any time, from any device and from anywhere you want.

Don’t worry if you fail the test, you can retake it as many times as you want.

You don’t have to wait a minute after your payment has been received, you can begin immediately. You will create your login details during the checkout process and we will also send you an email confirming your login details.

We make the payment process easy for you. You can either use your Visa, MasterCard, American Express, Solo cards or PayPal account to pay for the online course. We use the latest SSL encryption for all transactions, so your order is safe and secure.

After you complete the course, you’ll immediately receive a free printable PDF certificate. Hard Copy certificate is also available, and you can get one for just £9! You may have to wait for 3 to 9 days to get the hard copy certificate.