• 0.1 Promo-Workflow

• 0.2 What we will cover in this course

• 1.1 Skills-and-apps-you-need-to-take-this-course auto generated

• 1.2. Photoshop Extensions We Need

• 2.1 How To Organize A Design Project

• 2.2 Client’s Sketches

• 2.2 Naming Psd layers and Groups

• 2.3.Naming Conventions To Help Developers

• 3.1 Design Briefs

• 3.3 Getting More Info On Project

• 3.4 Content Template For Gathering Information

• 4.1 Mood boards

• 4.2 Ideation Phase

• 4.3 Introduction To Balsamiq

• 4.4 Desining Wireframes Part 1

• 4.5 Desining Wireframes Part 2

• 4.6 Atomic Design

• 4.7 8pt Grid

• 5.1 Typeface And Color Combinations

• 5.2 Ui Style Guides

• 5.3 Examples Of Ui Style Guides

• 5.4 How I Created My Style Guide

• 5.5 Style Guide-Type Scale Explained

• 5.6 Style Guide-Assignment

• 6.1 Online Tools For Grid Calculations

• 6.2 Planning Your Grid

• 6.3 White Space Plan

• 6.4 Setting Up Artboard For Desktop Design

• 6.5 Designing Header And Hero Part 1

• 6.6 Designing Header And Hero Part 2

• 6.7 Designing Steps Area Part 1

• 6.8 Designing Step Area Part 2

• 6.9. User Reviews Area Design

• 6.10 Adjusting White Space And Vertical Rhythem

• 6.11 Desining Team Part 1

• 6.12 Desining Team Part 2

• 6.13 Footer Design Part 1

• 6.14 Footer Design Part 2

• 7.1 Responsive Design Considerations Part 1

• 7.2 Responsive Design Considerations Part 2

• 7.3.Establishing Grid For Tablets

• 7.4.Header Area For Tablet View

• 7.5.Section how it work – steps

• 7.6.Section team Tablet View

• 7.7 footer Design

• 8.1.mobile Artboard And Grids

• 8.2.header Mobile View

• 8.3.steps Section-mobile

• 8.4.section 2 Team Members For Mobile

• 8.5.footer And Final Adjustments

• 9.1.what Developes Needs To Know

• 9.2.Red Line Document with Ink 1

• 9.3.Red Line Document with Ink 2

• 9.4.which layer styles you can use photoshop

• 9.5.installing Using Zeplin

• 9.6.style Guides With Zeplin

• 9.7.tools-zeplin-avocode-1

• 9.8.avocode And Sympli

• 10.1. What Are Prototypes

• 10.2.getting Familiar With Invision App For Prototyping

• 10.3.creating First Prototype With Invision App

• 11.1 using iconmoon app to create custom icon fonts set

• 11.2 Using SVG in Web design

No lessons available.

• Course Outline

• Website Online Hosting

• Installing wordpress

• Installing wordpress theme ocean wp & elementor page builder

• Creating website pages & menu

• Quick tour in Elementor

• Creative Art directions & layout inspirations for web design

• Familiarize with Elementor ( Sections )

• Familiarize with Elementor ( widgets ) & Desiging them

• Brain storming & Tips for fast workflow with elementor

• WordPress website header design & banner ( part 1 )

• WordPress website header design & banner ( part 2 )

• WordPress website header design & banner ( part 3 )

• Features Section Design

• Png Section Design

• Email opt-in section

• Testmonials section design

• Image carousel section (slider) design

• WordPress Website Footer Design

• WordPress Customizer tour & website logo

• Finalizing our home page & design hints

• About Us page Design ( part1 )

• About Us page Design ( part2 )

• About Us page Design ( part3 )

• Contact Us page & Blog Page Creation

• Creating WordPress Blog & Posting with Elementor

• WordPress Mobile & Tablet Responsive Website

• Publishing wordpress website & creating maintance & coming soon pages

• Free plugins to Mimic the Elementor pro

• Exporting & Importing Elementor pages

• installing woocommerce plugin ( Ecommerce Section )

• Making the first product (simple product)

• Making Variable products

• Up sells & cross sells Products

• Discount coupons

• Designing ecommerce store with elementor

• Converting WordPress Website to https

• Google Analytics & webmaster tool (SEO ranking)

• Speeding up our wordpress website

• Optimizing images & creative images Art directions

• Understanding subdomains

• Website official email (domain email & device setup)

• Site back up & site lock trust seal English