🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW
watching now
3 Students

Description

What Will You 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

Requirements

  • Good knowledge of Adobe Photoshop
  • You need to know how grids work in web design
  • NFT Certificate
  • 62 Lessons
  • Intermediate
  • English
  • 4.0 Rating
  • +110 XP

Share Course on Social media

Curriculum

Course consist of total 7h 27min of content, in total.

Section 2: Organizing your Web Design Project
13:53
Section 3: Getting Client requirements for your Web Design Project
22:30
What are Design Briefs?
09:47
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
Introduction to Balsamiq Mockups
09:34
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
What are UI Style Guides?
07:27
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
Online tools for Grid Calculations
12:31
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
Planning Mobile art board and Grids
04:00
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
Installing Zeplin for Hand Off
10:11
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

About the Instructor

Muhammad Ahsan Pervaiz

UX UI Designer 10+ Years of Experience
90% of students rated this instructor as excellent!

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!

See All Instructor Courses

BitDegree platform reviews