Web Design |
|
0.1 Promo-Workflow |
|
00:03:00 |
|
0.2 What we will cover in this course |
|
00:03:00 |
Requirements to take this course |
|
1.1 Skills-and-apps-you-need-to-take-this-course auto generated |
|
00:02:00 |
|
1.2. Photoshop Extensions We Need |
|
00:07:00 |
Organizing your Web Design Project |
|
2.1 How To Organize A Design Project |
|
00:05:00 |
|
2.2 Client’s Sketches |
|
00:04:00 |
|
2.2 Naming Psd layers and Groups |
|
00:06:00 |
|
2.3.Naming Conventions To Help Developers |
|
00:03:00 |
Gathering project information from client |
|
3.1 Design Briefs |
|
00:10:00 |
|
3.3 Getting More Info On Project |
|
00:05:00 |
|
3.4 Content Template For Gathering Information |
|
00:03:00 |
Sketching, Wireframing, Atomic Design & 8point Grid system |
|
4.1 Mood boards |
|
00:06:00 |
|
4.2 Ideation Phase |
|
00:05:00 |
|
4.3 Introduction To Balsamiq |
|
00:10:00 |
|
4.4 Desining Wireframes Part 1 |
|
00:08:00 |
|
4.5 Desining Wireframes Part 2 |
|
00:14:00 |
|
4.6 Atomic Design |
|
00:08:00 |
|
4.7 8pt Grid |
|
00:09:00 |
Style Guides, colors and typographics scales |
|
5.1 Typeface And Color Combinations |
|
00:04:00 |
|
5.2 Ui Style Guides |
|
00:07:00 |
|
5.3 Examples Of Ui Style Guides |
|
00:03:00 |
|
5.4 How I Created My Style Guide |
|
00:07:00 |
|
5.5 Style Guide-Type Scale Explained |
|
00:03:00 |
|
5.6 Style Guide-Assignment |
|
00:01:00 |
Designing for Desktop/Large View (Wstudio Web Design Project) |
|
6.1 Online Tools For Grid Calculations |
|
00:13:00 |
|
6.2 Planning Your Grid |
|
00:05:00 |
|
6.3 White Space Plan |
|
00:06:00 |
|
6.4 Setting Up Artboard For Desktop Design |
|
00:07:00 |
|
6.5 Designing Header And Hero Part 1 |
|
00:12:00 |
|
6.6 Designing Header And Hero Part 2 |
|
00:09:00 |
|
6.7 Designing Steps Area Part 1 |
|
00:10:00 |
|
6.8 Designing Step Area Part 2 |
|
00:09:00 |
|
6.9. User Reviews Area Design |
|
00:09:00 |
|
6.10 Adjusting White Space And Vertical Rhythem |
|
00:06:00 |
|
6.11 Desining Team Part 1 |
|
00:11:00 |
|
6.12 Desining Team Part 2 |
|
00:07:00 |
|
6.13 Footer Design Part 1 |
|
00:08:00 |
|
6.14 Footer Design Part 2 |
|
00:11:00 |
Planning Responsive Web Design |
|
7.1 Responsive Design Considerations Part 1 |
|
00:06:00 |
|
7.2 Responsive Design Considerations Part 2 |
|
00:06:00 |
Designing for Tablet/Medium View (Wstudio Web Design Project) |
|
7.3.Establishing Grid For Tablets |
|
00:07:00 |
|
7.4.Header Area For Tablet View |
|
00:11:00 |
|
7.5.Section how it work – steps |
|
00:10:00 |
|
7.6.Section team Tablet View |
|
00:09:00 |
|
7.7 footer Design |
|
00:09:00 |
Designing for Mobile/Small View (Wstudio Web Design Project) |
|
8.1.mobile Artboard And Grids |
|
00:04:00 |
|
8.2.header Mobile View |
|
00:11:00 |
|
8.3.steps Section-mobile |
|
00:09:00 |
|
8.4.section 2 Team Members For Mobile |
|
00:09:00 |
|
8.5.footer And Final Adjustments |
|
00:08:00 |
Designing for Developers |
|
9.1.what Developes Needs To Know |
|
00:05:00 |
|
9.2.Red Line Document with Ink 1 |
|
00:10:00 |
|
9.3.Red Line Document with Ink 2 |
|
00:06:00 |
|
9.4.which layer styles you can use photoshop |
|
00:08:00 |
|
9.5.installing Using Zeplin |
|
00:10:00 |
|
9.6.style Guides With Zeplin |
|
00:14:00 |
|
9.7.tools-zeplin-avocode-1 |
|
00:04:00 |
|
9.8.avocode And Sympli |
|
00:06:00 |
Prototyping with Invision app |
|
10.1. What Are Prototypes |
|
00:04:00 |
|
10.2.getting Familiar With Invision App For Prototyping |
|
00:07:00 |
|
10.3.creating First Prototype With Invision App |
|
00:06:00 |
SVGs and Icon Fonts in Web Design |
|
11.1 using iconmoon app to create custom icon fonts set |
|
00:08:00 |
|
11.2 Using SVG in Web design |
|
00:11:00 |
Wordpress Training |
Introduction & installing Wordpress |
|
Course Outline |
|
00:02:00 |
|
Website Online Hosting |
|
00:10:00 |
|
Installing wordpress |
|
00:03:00 |
|
Installing wordpress theme ocean wp & elementor page builder |
|
00:02:00 |
|
Creating website pages & menu |
|
00:07:00 |
Wordpress page builder Familiarization |
|
Quick tour in Elementor |
|
00:04:00 |
|
Creative Art directions & layout inspirations for web design |
|
00:08:00 |
|
Familiarize with Elementor ( Sections ) |
|
00:16:00 |
|
Familiarize with Elementor ( widgets ) & Desiging them |
|
00:04:00 |
|
Brain storming & Tips for fast workflow with elementor |
|
00:10:00 |
Wordpress home page Design & development |
|
WordPress website header design & banner ( part 1 ) |
|
00:17:00 |
|
WordPress website header design & banner ( part 2 ) |
|
00:13:00 |
|
WordPress website header design & banner ( part 3 ) |
|
00:08:00 |
|
Features Section Design |
|
00:09:00 |
|
Png Section Design |
|
00:04:00 |
|
Email opt-in section |
|
00:11:00 |
|
Testmonials section design |
|
00:12:00 |
|
Image carousel section (slider) design |
|
00:10:00 |
|
WordPress Website Footer Design |
|
00:13:00 |
|
WordPress Customizer tour & website logo |
|
00:18:00 |
|
Finalizing our home page & design hints |
|
00:05:00 |
Wordpress About Us page Design & development |
|
About Us page Design ( part1 ) |
|
00:17:00 |
|
About Us page Design ( part2 ) |
|
00:18:00 |
|
About Us page Design ( part3 ) |
|
00:12:00 |
Wordpress Contact Us & blog page design & development |
|
Contact Us page & Blog Page Creation |
|
00:23:00 |
|
Creating WordPress Blog & Posting with Elementor |
|
00:21:00 |
Wordpress Responsive website & publishing website |
|
WordPress Mobile & Tablet Responsive Website |
|
00:21:00 |
|
Publishing wordpress website & creating maintance & coming soon pages |
|
00:09:00 |
Free Plugins to mimic the Elementor Pro |
|
Free plugins to Mimic the Elementor pro |
|
00:14:00 |
Exporting & importing our Elementor pages |
|
Exporting & Importing Elementor pages |
|
00:05:00 |
Creating Our Wordpress ecommerce store |
|
installing woocommerce plugin ( Ecommerce Section ) |
|
00:06:00 |
|
Making the first product (simple product) |
|
00:09:00 |
|
Making Variable products |
|
00:09:00 |
|
Up sells & cross sells Products |
|
00:04:00 |
|
Discount coupons |
|
00:06:00 |
|
Designing ecommerce store with elementor |
|
00:14:00 |
Wordpress website customization |
|
Converting WordPress Website to https |
|
00:04:00 |
|
Google Analytics & webmaster tool (SEO ranking) |
|
00:10:00 |
|
Speeding up our wordpress website |
|
00:13:00 |
|
Optimizing images & creative images Art directions |
|
00:11:00 |
|
Understanding subdomains |
|
00:06:00 |
Wordpress Website Backup, official email & more |
|
Website official email (domain email & device setup) |
|
00:05:00 |
|
Site back up & site lock trust seal English |
|
00:09:00 |
Course Certification |
|
Order Your Certificate QLS |
|
00:00:00 |
Assignment |
|
Assignment – Web Design and WordPress Training |
|
3 weeks, 5 days |