Make your Web Design process simple, effective and painless with this Web Design course

Description

Make your Web Design process simple, effective and painless with this Web Design course

From the past few years, 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 layout? How to setup 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 of your website

• Wire-frame those ideas

• Convert wireframes to Design Mockups

• Getting Specs and Style Guides ready for Developers

• Creating Prototypes to show the flows and interactions

• How to design Responsive views of your Website in Photoshop

• Save time by improving your Web Design Workflow

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 modern process of creating Responsive web design from gathering information and design briefs from client to creating sketches, wire-frames 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

• Web Designer
• UI Designer
• Web Developer
• Graphic Designer
• Creative Director
• Project Managers
• Frontend Developers

Course content

• Introduction
  • What you will learn in this course?
• Requirements to take this course
  • Skills and Apps you need to take this course
  • → Links to download extensions
• Organizing your Web Design Project
  • How to organize a design project
  • Naming PSD, layers and groups
  • Matching naming conventions with Developers
  • Quiz for organizing Web Design project
  • → Links Organizing your design project
• Gathering project information from client
  • What are design briefs?
  • Links and examples of Design Breifs
  • Getting client's initial Sketches and ideas
  • Questions to ask your client before every Web Design Project
  • Using Content Gathering template for website's content
  • → Links and resources for this sections
• Sketching, Wireframing, Atomic Design & 8point Grid system
  • Using Mood Boards for Web Design projects (Design Direction)
  • Sketching and Ideation (early sketches)
  • Introduction to Balsamiq Mockups
  • Wireframing in Balsamiq mockups part 1
  • Wireframing in Balsamiq mockups part 2
  • Atomic Design framework
  • 8-point Grid System
  • → Links and resources for this sections
• Style Guides, colors and typographics scales
  • Experimenting with Colors and Font Combinations
  • What are UI Style Guides?
  • Examples of UI Style Guides
  • Creating UI Style Guide using Photoshop
  • Selecting Type Scale for Responsive Web Design
  • Quiz for Wireframes, Ideation and UI Style guides
  • → Links and resources for this sections
  • Create a Style Guide of any Website or App
• Designing for Desktop/Large View (Wstudio Web Design Project)
  • Calculating your grid and guides using online tools
  • →Links Online tools for Grid Calculations
  • Creating Modular Bootstrap 4 Grid in Photoshop manuallay
  • Planning your Grid for Desktop View
  • How to use White Space in your Web Design
  • Setting up Art Boards in Photoshop
  • 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
• Planning Responsive Web Design
  • Responsive Web Design considerations Part 1
  • Responsive Web Design considerations Part 2
• Designing for Tablet/Medium View (Wstudio Web Design Project)
  • Planning grid for Tablet/Medium view
  • Designing Header/Hero area
  • Designing Steps section (How it works)
  • Desining and adjusting Team section
  • Designing footer for tablet view
• Designing for Mobile/Small View (Wstudio Web Design Project)
  • 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
  • Desinging Footer for Small devices
  • → PSD and Design Source Files
• Designing for Developers
  • What Developers need to know about your Web Design?
  • Generating Red Line Spacing specifications for Developers → Part 1
  • Generating Red Line Spacing specifications for Developers → Part 2
  • Which layer styles can be converted to Code (HTML)?
  • → Links to see live web design inspirations or coded solutions
  • Installing Zeplin for Web Design Collaboration
  • Creating UI Style Guide with code using Zeplin
  • → Link and resources for Design Developer Collaboration and code generation
  • Zepling vs Avocode → Comparison of Designer/Developer Collaboration tools
  • Sympli vs Avocode → Comparison of Designer/Developer Collaboration tools
• Prototyping with Invision app
  • Introduction to Prototypes
  • Getting familiar with Invision App for Prototyping
  • Building Interactive Prototype with Invision App
  • → Links to prototyping tools
• SVGs and Icon Fonts in Web Design
  • Using Iconmoon App to create Custom Icon Fonts
  • Using and Exporting SVG Graphics
  • What to do NEXT?
  • BONUS LECTURE