Creative Layout Design for Websites and Mobile Apps

Name: Creative Layout Design for Websites and Mobile Apps
Rating: 4.5 (199 reviews)

Design more engaging and attractive layout for your Websites and Mobile Apps and stop making simple boxed layout

Created byMuhammad Ahsan Pervaiz

Last updated 1/2020

English

What you'll learn

Basics of Layout Design, Grids and Vertical Rhythm
Stop making boring layouts for Websites and Mobile Apps
Design creative layouts with secret techniques

Course content

4 sections • 23 lectures • 3h 25m total length

Introduction to Layout Design Course2:28
See what you are going to learn in this Layout Design course made for Web and UI Designers

Purpose of Layout Design → Questions you must ask before starting a layout8:59
What is the basic purpose of Layout Design and why a lot of UI Designers deviate from it and make the layouts useless
Content defines the Layout7:44
Your Content will always define the layout. If you don't have your content, you can't start layout for your Website or Mobile App
What are Grids, Gutters and Margins8:24
Basics of Grid Systems, gutters and margins explained
How to combine columns in Grid Systems like Bootstrap4:46
How to combine columns in Grids for Beginners. A lot of new UI and Web Designers make this mistake
How to create Vertical Grid & Vertical Rhythm?11:55
How to create and use Vertical Rhythm Grid in your Designs to improve layouts of your Websites and Mobile Apps
Secrets of Layout ► Creating Vertical Space Blocks9:12
One of the biggest secrets of Layout Design is using a vertical spacing block system. See here how to create and use it to improve your Web Designs and UI Designs
How to balance Layout and properly use white space blocks?10:39
How to balance layout? The biggest problem UI Designers face these days
Examples of Balancing Layouts10:20
Examples of different Website and Mobile App Designs showing how to balance your layouts creatively
Layout Basics

Single Column ► Centered layouts9:33
How to create Centered Layouts and how to use them properly in Web Design and User Interface Designs
Design a Single Column Layout Website Hero Header
Two Column Layout in Web & Mobile Apps9:55
Two Column layouts and how to use different percentage columns for them
Design a 2 column Header Layout for a Website
Multi Column Layout Design8:51
3 or 4 or multi column layouts and when to use them in Web Design and Mobile App Design
Design a multi column grid features section
Using Flower Layout in Web and Mobile App Design7:03
You will learn a simple but effective layout design type which is flower layout
Design a flower layout by showing features of a product
Masonry Grid Layouts and their pros and cons9:59
How to use masonry grid in your layout design with a lot of examples

Using alternate percentage combos in Layout Design9:14
Use percentage combos effectively for your layouts in Web Design and UI Design
Using big margins creatively in your Web and Mobile Apps Layouts10:50
How to use margins creatively in your Layout Design
Use big margins in Mobile App Design and show it to me
Out of Box + Overlapping elements technique for Layout Design7:30
Out of box layout designs and overlapping design elements in layouts. Learn how to do that with a lot of examples for your next Website Design or Mobile App Design project
Examples of using Out of Box Technique in Web and Mobile App Design11:14
Example usage of Out of box and overlapping technique used in Web Designs & Mobile app designs
Design a featured section overlapping your header
Using Emphasis in Layout Design ► One big point of interest technique10:59
Using size and emphasis in layout design and how a simple layout can be elegant with this technique
Using Movement in Layout Design7:15
How to use movement in your design elements to create effective layouts for your UI Designs
Center Aligned with left aligned technique for Layout Design15:18
A simple and most commonly ignored technique to create better centered layouts
What to do NEXT?0:37
What you need to do next after finishing this course
BONUS Lecture1:43
Just a bonus for my students

Requirements

Just a curious mind

Description

Layout is one the things that tells the story of your design. How your website or mobile app design unfolds the story, it all depends on the layout. If your layout is great, your user engagement will rise like erupting volcano

It's one of the design areas where most Web Designers & User Interface Designers struggle a lot. I have put some basic and some advanced layout Design techniques which I have figured out after poking and analyzing hundreds of different Web and Mobile App Designs from many great designers

So don't get stuck with boring boxed layouts

Things you will learn in this course are

Design more engaging and powerful layouts
Don't design similar boring layouts like other UI Designers
Why do we create layouts (their purpose)
What are grids, gutters and margins
How to use one, two or multi column layouts
What are flower layouts an when to use them
What is masonry grid layout?
How to use margins creatively in Website or Mobile App Layouts
How to use out of box and overlapping methods in layout design
Figuring out one simple rule that can make your layout superb

with tons of examples and sample layouts. I try to explain every principle of layout design in simple terms so it would be easier for you to digest. I have 5+ assignment for you to master this layout design skill

So let's jump in and start designing awesome layouts Now

Who this course is for:

Web Designer
Web Developers
Beginner Designers
Graphic Designers
Mobile App Designers
UI Designers
UX Designers

Creative Layout Design for Websites and Mobile Apps

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Basics of Layout Design → Grids, Gutters, Margins and Vertical Rhythm8 lectures • 1hr 12min

Types of Layouts → When and how to use them properly5 lectures • 45min

Advanced Layout Design Techniques ► Expalined in simple ways9 lectures • 1hr 15min

Requirements

Description

Who this course is for: