Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Workflow of Modern Web Design → Ideation, Wireframing, Mockups & Prototype

via Skillshare

Overview

From the past few years, the job of a traditional Web Designer has been drastically changed. Designing for each and every screen (Responsive Web Design) is not easy. Questions like these come to mind of every young web designer e.g. How to change the layout? How to set up grids for responsive web design? Which content to hide and show?

Now in every Web Design project, we designers

  • Gather project requirements (from client and users)
  • Sketch early Ideas
  • Wire-frame those ideas
  • Convert wireframes to Mockups
  • Getting Specs and Style Guides ready for Developers
  • Creating Prototypes to show the flows and interactions

Every modern designer uses more than 2 to 3 tools in Web Design process. Designers also need to collaborate with Developers a lot so how to solve all these problems.

So in this course, I will show you the modern process of creating Responsive web design from gathering information and design briefs from client to creating sketches, wireframes and prototypes or even style guides for developers.

Tools you will learn during this course are

  • Adobe Photoshop
  • Balsamiq Mockups
  • Invision App
  • Zeplin App

Design frameworks you will touch in this course are

  • Atomic Design framework
  • 8-Point Grid System

I will show other similar online apps for Web Designers at the end and compare their pros and cons.

Now if you are ready to learn the modern web design and become a top notch Web Designer

Start this course Now

Syllabus

  • Introduction
  • What we will cover in this course
  • Course Requriements
  • Photoshop Extensions we need
  • How to organize a web design project
  • Organizing your PSD layers and Groups
  • Maching naming conventions with Developers
  • What is a good Design Brief?
  • Getting Initial Ideas and early Sketches
  • Questions to ask your client before every Web Design Project
  • Using Content Gathering template for website's content
  • Mood Boards for Web Design
  • Ideation Phase (at least 3 layouts)
  • Introduction to Balsamiq Mockups
  • Wireframing in Balsamiq mockups part 1
  • Wireframing in Balsamiq mockups part 2
  • Atomic Design framework
  • 8-point Grid System
  • Typeface and Color Selection
  • What are UI Style Guides?
  • Examples of UI Style Guides
  • Lets create a Style Guide
  • Type Scale Explained
  • Online Tools for Grid Calcuations
  • Planning your Grid for Desktop View
  • How to use White Space in Web Design
  • Setting up artboard and grids for Desktop view
  • Designing Header/Hero area Part 1
  • Designing Header/Hero area Part 2
  • Designing Steps section Part 1
  • Designing Steps section Part 2
  • Designing User Reviews section
  • Adjusting white space and vertical rhythm
  • Designing Team section Part 1
  • Designing Team section Part 2
  • Designing Footer Part 1
  • Designing Footer Part 2
  • Responsive Web Design considerations Part 1
  • Responsive Web Design considerations Part 2
  • Planning grid for Tablet/Medium view
  • Designing Header/Hero area for Tablet
  • Designing Steps section (How it works) for Tablet
  • Designing Team Section for Tablets
  • Designing footer for tablet view
  • Setting up Art Boards for Mobile View
  • Designing Header for Small devices
  • Designing Steps Section for Small devices
  • Designing Team Section for Small devices
  • Designing footer for tablet view
  • What Developers need to know about your Web Design?
  • Creating Red Line Spacing specifications for Developers → Part 1
  • Creating Red Line Spacing specifications for Developers → Part 2
  • Which layer styles can be converted to Code (HTML)?
  • Installing Zeplin for Web Design Collaboration
  • Creating UI Style Guide with Zeplin
  • Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools
  • Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools
  • Introduction to Prototypes
  • Getting familiar with Invision App for Prototyping
  • Prototyping with Invision app
  • Creating Custom Icon Fonts using Iconmoon app
  • Using and Exporting SVG Icons in Web design
  • Style Guide in 2020 using Figma
  • Handoff in Figma and Adobe XD 2020
  • Prototyping using Adobe XD and Figma 2020

Taught by

Muhammad Ahsan

Reviews

Start your review of Workflow of Modern Web Design → Ideation, Wireframing, Mockups & Prototype

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.