Web Design: Workflow of Modern Web Design

$49.99

With Workflow of Modern Web Design, you will learn the modern process and tools of Responsive Web Design using Balsamiq Mockups, Photoshop, Zeplin, and Invision App. Learn the importance of gathering information, sketching and wireframing, style guides for developers, and more! Project Files included.

Length: 7 hrs 33 min

This title is available in the Total Training All-Access library.

Subscribe Now

Description

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

In this Workflow of Modern Web Design 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 developersTools 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.

Within 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: How do I change a layout? How do I set up grids for responsive web design? Which content should I 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
  • Get Specs and Style Guides ready for Developers
  • Create Prototypes to show the flows and interactions

Now if you are ready to learn modern web design and become a top notch Web Designer, Start this course Now!

 

Sample clip

 

 

 

CHAPTER 01: INTRODUCTION
Introduction to Modern Web Design Workflow
What Will You Learn in this Course?
 
CHAPTER 02: REQUIREMENTS
Skills and Apps you Need to Take This Course
Adobe® Photoshop® Extensions Needed
 
CHAPTER 03: ORGANIZING YOUR WEB DESIGN PROJECT
How to Organize a Design Project
Naming PSD Files, Layers, and Groups
Matching Naming Conventions with Developers
 
CHAPTER 04: GATHERING PROJECT INFO FROM CLIENT
What are Design Briefs?
Getting Client’s Initial Sketches and Ideas
Questions to Ask Your Clients
Using Content Gathering Template for Site Content
 
CHAPTER 05: SKETCHING, WIREFRAMING & MORE
Using Mood Boards
Sketching and Ideation
Intro to Balsamiq® Mockups
Wireframing in Balsamiq, Part 1
Wireframing in Balsamiq, Part 2
Atomic Design Framework
8-Point Grid System
 
CHAPTER 06: STYLE GUIDES, COLORS, AND TYPOGRAPHICAL SCALES
Experimenting with Colors and Font Combinations
What are UI Style Guides?
UI Style Guides Examples
Creating UI Style Guide in Photoshop
Selecting Type Scale for Responsive Web Design
 
CHAPTER 07: DESIGNING FOR DESKTOP/LARGE VIEW
Calculating Grids and Guides Using Online Tools
Planning Your Grid for Desktop View
Using White Space in Your Design
Setting Up Artboards in Photoshop
Designing Heading/Hero Area, Part 1
Designing Heading/Hero Area, Part 2
Designing Steps Section, Part 1
Designing Steps Section, Part 2
Designing User Reviews Section
Adjusting White Space & Vertical Rhythm
Designing Team Section, Part 1
Designing Team Section, Part 2
Designing Footer Section, Part 1
Designing Footer Section, Part 2
 
CHAPTER 08: PLANNING RESPONSIVE DESIGN
Responsive Web Design Considerations, Part 1
Responsive Web Design Considerations, Part 2
 
CHAPTER 09: DESIGNING FOR TABLET/MEDIUM VIEW
Planning the Grid for Tablet/Medium View
Designing Header/Hero Area
Designing Steps Section – How it Works
Designing and Adjusting Team Section
Designing Footer for Tablet View
 
CHAPTER 10: DESIGNING FOR MOBILE/SMALL VIEW
Setting Up Artboard and Grids for Mobile View
Designing Header for Small Devices
Designing Steps Section for Small Devices
Designing Team Section for Small Devices
Designing Footer for Small Devices
 
CHAPTER 11: DESIGNING FOR DEVELOPERS
What Developers Need to Know about Web Design
Generating Red Line Spacing Specifications for Developers, Part 1
Generating Red Line Spacing Specifications for Developers, Part 2
Converting Layer Styles to Code – HTML
Installing Zeplin for Web Design Collaboration
Creating UI Style Guides with Code Using Zeplin
Comparing Tools: Zeplin vs. Avocode
Comparing Tools: Avocode vs. Sympli
 
CHAPTER 12: PROTOTYPING WITH INVISION APP
What are Prototypes?
Getting Familiar with Invision App for Prototyping
Building an Interactive Prototype with Invision App
 
CHAPTER 13: SVG ICONS AND FONTS
Creating Custom Icon Fonts with Iconmoon App
Using and Exporting SVG Graphics

Muhammad Ahsan Pervaiz

Muhammad Ahsan Pervaiz is an award-winning, multi-talented designer. His hunger for perfecting the User Interface from all aspects has led him to work with clients all over the world, including the USA, Australia, UK, and United Arab Emirates. With a career spanning over 10 years, his work includes projects for FORTUNE 500 companies such as INTEL, PANASONIC and Coca Cola.

Muhammad’s experience includes improving the User Experience of the UK GP Tools Mobile App, games and e-commerce websites, and creating new design patterns for showing passwords safely in password fields. He’s worked from App Icon Design to App UI Design, and from wireframes and prototypes to mockup design.

His ultimate goal is to make more awesome UI Designers, and ease the pain of learning for newcomers in this field of UI Design.

You may also like…