• LOGIN
  • No products in the basket.

Login

Modern Web Design – Wireframes to Style Guide

Modern Web Design - Wireframes to Style Guide

Course Description

Learn to create the responsive website with the  [course_title] 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

  • video 0.2 what we will cover in this course
    00:03:00
  • video 1.1 skills-and-apps-you-need-to-take-this-courseautogenerated
    00:02:00
  • video 1.2. Photoshop extensions We Need
    00:07:00
  • video 2.1.how To Organize A Design Project
    00:05:00
  • video 2.2 client’s Sketches
    00:04:00
  • video 2.2 naming psd layers and groups
    00:05:00
  • video 2.3.naming Conventions To Help Developers
    00:03:00
  • video 3.1.design Briefs
    00:10:00
  • video 3.3 getting More Info On Project
    00:05:00
  • video 3.4.content_template for gathering information
    00:03:00
  • video 4.1.moodboards
    00:06:00
  • video 4.2.ideation Phase
    00:05:00
  • video 4.3.introduction To Balsamiq
    00:10:00
  • video 4.4desining Wireframes Part 1
    00:08:00
  • video 4.5.desining Wireframes Part 2
    00:14:00
  • video 4.6.atomic Design
    00:08:00
  • video 4.7.8pt Grid
    00:09:00
  • video 5.1.typeface And Color Combinations
    00:04:00
  • video 5.2.ui Style Guides
    00:07:00
  • video 5.3.examples Of Ui Style Guides
    00:03:00
  • video 5.4.how I Created My Style Guide
    00:07:00
  • video 5.5.styleguide-typescale Explained
    00:03:00
  • video 5.6.Styleguide-assignment
    00:01:00
  • video 6.1.online tools for grid calcuations
    00:13:00
  • video 6.2.planning your grid
    00:05:00
  • video 6.3.whitespace-plan
    00:06:00
  • video 6.4.setting Up Artboard For Desktop Design
    00:07:00
  • video 6.5.designing Header And Hero Part 1
    00:12:00
  • video 6.6 designing Header And Hero Part 2
    00:09:00
  • video 6.7.designing Steps Area Part 1
    00:10:00
  • video 6.8.designing Step Area Part 2
    00:09:00
  • video 6.9.userreviews Area Design
    00:09:00
  • video 6.10.adjusting White Space And Vertical Rhythem
    00:06:00
  • video 6.11.desining Team Part1
    00:11:00
  • video 6.12.desining Team Part2
    00:07:00
  • video 6.13.footer Design Part1
    00:08:00
  • video 6.14.footer Design Part2
    00:11:00
  • video 7.1.Responsive Design Considerations Part 1
    00:07:00
  • video 7.2.Responsive Design Considerations Part 2
    00:06:00
  • video 7.3.Establishing Grid For Tablets
    00:07:00
  • video 7.4.Header Area For Tablet View
    00:11:00
  • video 7.5.Section how it work – steps
    00:10:00
  • video 7.6.Section team Tablet View
    00:09:00
  • video 7.7 footer Design
    00:09:00
  • video 8.1.mobile Artboard And Grids
    00:04:00
  • video 8.2.header Mobile View
    00:11:00
  • video 8.3.steps Section-mobile
    00:09:00
  • video 8.4.section 2 Team Members For Mobile
    00:09:00
  • video 8.5.footer And Final Adjustments
    00:08:00
  • video 9.1.what Developes Needs To Know
    00:05:00
  • video 9.2.Red Line Document with Ink 1
    00:10:00
  • video 9.3.Red Line Document with Ink 2
    00:06:00
  • video 9.4.which layer styles you can use photoshop
    00:08:00
  • video 9.5.installing Using Zeplin
    00:10:00
  • video 9.6.style Guides With Zeplin
    00:14:00
  • video 9.7.tools-zeplin-avocode-1
    00:04:00
  • video 9.8.avocode And Sympli
    00:06:00
  • video 10.1. What Are Prototypes
    00:04:00
  • video 10.2.getting Familiar With Invision App For Prototyping
    00:07:00
  • video 10.3.creating First Prototype With Invision App
    00:06:00
  • video 11.1 using iconmoon app to create custom icon fonts set
    00:08:00
  • video 11.2 Using SVG in Web design
    00:11:00

Course Reviews

4.7

4.7
6 ratings
  • 5 stars0
  • 4 stars0
  • 3 stars0
  • 2 stars0
  • 1 stars0

No Reviews found for this course.

Comming Soon!
Original price was: £329.00.Current price is: £25.00.
TAKE THIS COURSE

or

Get all courses for only £49

2000+ Globally Recognised Premium Courses


This course includes:
access
01 Year of full Course access
cert
Endorsed Certificate of Compleiton
unit
62 Units
quiz
0 Quiz
duration
7 hours, 34 minutes of total Unit + Quiz duration
cpd ciq
money-back-14days
money-back-14days
Select your currency
GBP Pound sterling