Creative Layout Design for Websites and Mobile Apps
4.5 (72 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
458 students enrolled

Creative Layout Design for Websites and Mobile Apps

Design more engaging and attractive layout for your Websites and Mobile Apps and stop making simple boxed layout
4.5 (72 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
458 students enrolled
Last updated 1/2020
English [Auto-generated]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 1 article
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
  • Just a curious mind

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
Course content
Expand all 23 lectures 03:25:34
+ Introduction
1 lecture 02:28

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

Preview 02:28
+ Basics of Layout Design → Grids, Gutters, Margins and Vertical Rhythm
8 lectures 01:11:59

What is the basic purpose of Layout Design and why a lot of UI Designers deviate from it and make the layouts useless

Preview 08:59

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

Content defines the Layout

Basics of Grid Systems, gutters and margins explained

What are Grids, Gutters and Margins

How to combine columns in Grids for Beginners. A lot of new UI and Web Designers make this mistake

Preview 04:46

How to create and use Vertical Rhythm Grid in your Designs to improve layouts of your Websites and Mobile Apps

How to create Vertical Grid & Vertical Rhythm?

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

Secrets of Layout ► Creating Vertical Space Blocks

How to balance layout? The biggest problem UI Designers face these days

How to balance Layout and properly use white space blocks?

Examples of different Website and Mobile App Designs showing how to balance your layouts creatively

Examples of Balancing Layouts

Let's see how much you know until now

Layout Basics
5 questions
+ Types of Layouts → When and how to use them properly
5 lectures 45:21

How to create Centered Layouts and how to use them properly in Web Design and User Interface Designs

Single Column ► Centered layouts
Design a centered layout for a website Hero header using Bootstrap 12 column grid and show it to me
Design a Single Column Layout Website Hero Header
1 question

Two Column layouts and how to use different percentage columns for them

Two Column Layout in Web & Mobile Apps
Use two columns of any width and create a Header Hero section of a website using Bootstrap 12 column grid
Design a 2 column Header Layout for a Website
1 question

3 or 4 or multi column layouts and when to use them in Web Design and Mobile App Design

Multi Colum Layout Design
You can create a web design or mobile app design using 3 column or 4 column layouts. Just create a section or a mobile screen and use 3 columns grid at least
Design a multi column grid features section
1 question

You will learn a simple but effective layout design type which is flower layout

Preview 07:03
Design a product features section using flower layout where the product is in the middle You can use fitbit Versa2 or any other product page and create your own design
Design a flower layout by showing features of a product
1 question

How to use masonry grid in your layout design with a lot of examples

Masonry Grid Layouts and their pros and cons
+ Advanced Layout Design Techniques ► Expalined in simple ways
9 lectures 01:14:40

Use percentage combos effectively for your layouts in Web Design and UI Design

Using alternate percentage combos in Layout Design

How to use margins creatively in your Layout Design

Using big margins creatively in your Web and Mobile Apps Layouts
Create a Cooking App (or any other App) using big margins on left side and show that layout to me by using a Mobile Mockup
Use big margins in Mobile App Design and show it to me
1 question

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

Out of Box + Overlapping elements technique for Layout Design

Example usage of Out of box and overlapping technique used in Web Designs & Mobile app designs

Examples of using Out of Box Technique in Web and Mobile App Design
Use overlapping technique in your design and overlap the features section over the header you have designed previously You can show overlapping in Web Design or a Mobile App screen (whichever is easier for you)
Design a featured section overlapping your header
1 question

Using size and emphasis in layout design and how a simple layout can be elegant with this technique

Using Emphasis in Layout Design ► One big point of interest technique

How to use movement in your design elements to create effective layouts for your UI Designs

Using Movement in Layout Design

A simple and most commonly ignored technique to create better centered layouts

Center Aligned with left aligned technique for Layout Design

What you need to do next after finishing this course

What to do NEXT?

Just a bonus for my students

BONUS Lecture