Black friday

Save big!

All courses under $5 - for a limited time!
watching now
5 Students
62 Lessons
Intermediate

What You Will Learn?

  • You'll get the skills to design a responsive website in Photoshop
  • You'll learn to create mood boards to plan your designs
  • You'll be able to create style guides for your web design
  • You'll practice transfering your designs to your developers
  • You'll learn to use Zeplin and Invision App

Curriculum

7h 27m
Section 1: Introduction to Modern Web Design Course
07:28
Section 2: Organizing your Web Design Project
13:53
How to Organize a Design Project
04:57
Naming your layers and Groups in Photoshop
05:40
Naming Conventions to help Web Developers
03:16
Section 3: Getting Client requirements for your Web Design Project
22:30
Initial Sketches by your Client
03:52
Getting more information from Client
05:25
Content template for Gathering Client Info
03:26
Section 4: Wireframes, Atomic Design and 8px Grid System
59:12
Creating Mood boards
05:40
Ideation stage of Web Design
05:08
Creating Website Wire frames Part 1
07:55
Creating Website Wire frames Part 2
14:25
What is Atomic Design System?
07:32
Using 8 point or 8 px grid System
08:58
Section 5: Creating Style Guides for your Web Design Project
25:30
Starting with Typeface + Color Scheme Combos
04:26
Examples of UI Style Guides
03:10
How I created my Style Guide?
07:14
Style Guide Typography Scale explained
02:36
Assignment → Create a Style Guide
00:37
Section 6: Desktop View Web Design for Wstudio Project
2:00:15
Planning your Grid for Layout
05:20
Planning your White Space
05:35
Setting up Photoshop Art Boards for Desktop View
06:36
Design Header Hero section part 1
12:17
Design Header Hero Part 2 (Website Design)
08:32
Design Feature Steps section of Website Part 1
10:01
Design Feature Steps section of Website Part 2
08:36
Design User Reviews section
08:50
Adjust White Space + Vertical Rhythm
05:46
Design Team section part 1
10:33
Design Team section part 2
06:42
Design Footer section Part 1
08:19
Design Footer section Part 2 (Web Design Exercise)
10:37
Section 7: Designing Website for Tablet View
59:27
Responsive Design Considerations Part 1
06:30
Responsive Design Considerations Part 2
05:46
Creating Grids for Tablet View of the Web Design
07:21
Header section Design for Tablet View
11:17
How it works section Design for Tablet View
10:18
Design Team section for Tablet View
09:27
Footer section Design for Tablet View
08:48
Section 8: Designing Website for Mobile Devices (Small Screens)
40:14
Header Design for Mobile Screen
10:33
Design Steps section for Mobile Screens
08:53
Team section design for Mobile Screen in Photoshop
09:09
Footer and Final Adjustments for Mobile Screen View
07:39
Section 9: Designing for Developers (Hand Off your Photoshop files to your Developers)
1:03:02
What Developers need to know about your Designs
04:55
Red Line Specs documents with Ink Plugin part 1
10:15
Red Line Specs documents with Ink Plugin part 2
06:14
Which layer styles you can convert to HTML CSS code?
07:49
Creating Style Guide with Zeplin
14:13
Zeplin vs Avocode (third party plugins for Developer Hand Off)
03:45
Avocode vs Sympli
05:40
Section 10: Prototyping with Invision Online App
16:40
What are Prototypes?
03:49
Starting with Invision App for Prototyping
06:35
First Prototype with Invision App
06:16
Section 11: Advanced Web Design Tips
18:50
Using Iconmoon App to create Icon Fonts
08:13
Using SVG Icons in Web Design
10:37

Description

Requirements

  • Good knowledge of Adobe Photoshop
  • You need to know how grids work in web design

About the Instructor

Reviews 0
Students 2
Courses 1

Ahsan Butt has gone through the challenges of learning web design the hard way, going from scratch ending up working for Fortune 500 companies and creating designs for companies like Intel, Coca Cola, Panasonic and others. If you happen to enter his private office, you’ll find a gold medal hanging proudly from the times when he won Panasonic’s poster design competition, and then a stack of diplomas for creating awesome landing page designs in contests on 99designs.

What will make you identify even more with Ahsan Butt is that he’s not just a trainer who’s confidently giving away tips and tricks of his craft. He’s also a freelancer himself, having his international client base. He’s still actively into it knowing the pain points that you struggle with most. One of them, as for any freelancer out there, is lack of time. That’s why Ahsan makes learning the easiest it can get, so you have less pain absorbing the valuable information.

Join Ahsan Butt’s course on BitDegree to learn the workflow of the modern web design. In no time, you’ll be able to use wireframes, style guides, and much more to help you in your quest of creating outstanding web designs!

BitDegree platform reviews

Our students say Excellent
9.5 out of 10
trustpilot logo 1 trustpilot logo