Course 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
-
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
Course Reviews
No Reviews found for this course.
or
Get all courses for only £492000+ Globally Recognised Premium Courses
This course includes:
Related Courses
5 hours, 47 minutes
15
