Creative Layout Design for Websites and Mobile Apps from Udemy

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

What's inside

Learning objectives

Basics of layout design, grids and vertical rhythm
Stop making boring layouts for websites and mobile apps

Design creative layouts with secret techniques

Basics of layout design, grids and vertical rhythm
Stop making boring layouts for websites and mobile apps
Design creative layouts with secret techniques

Syllabus

Introduction

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

Learn how to use Grids and understand margins, vertical rhythm and one of my secret technique for spacing out design elements in Web Design or Mobile App Design

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

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

Basics of Grid Systems, gutters and margins explained

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

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

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? The biggest problem UI Designers face these days

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

Let's see how much you know until now

I will disucss 5 commonly seen layouts like Single Column, two column, multi column, flower layout and masonry grid layouts with tons of examples from different Web and Mobile App Designs

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 layouts and how to use different percentage columns for them

Design a 2 column Header Layout for a Website

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

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

Design a flower layout by showing features of a product

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

Learn and implement simple layout design secret techniques and create more engaging layouts for your Web and Mobile App Design projects

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

How to use margins creatively in your Layout Design

Use big margins in Mobile App Design and show it to me

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

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

Design a featured section overlapping your header

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

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

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

What you need to do next after finishing this course

Just a bonus for my students

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops effective layout techniques for UI design, enhancing user engagement and storytelling

Covers diverse layout types, including single-column, multi-column, flower, and masonry grid layouts

Emphasizes creative and unconventional layout design approaches, encouraging experimentation

Provides practical examples and sample layouts to demonstrate effective layout implementation

Emphasizes the importance of understanding content in relation to layout design

Requires access to software for hands-on layout design practice

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Creative Layout Design for Websites and Mobile Apps with these activities:

Follow tutorials on grid systems

Show steps

Develop hands-on skills in using grid systems

Browse courses on Grid Systems

Show steps

Find and watch video tutorials on creating grids
Experiment with different grid layouts using online tools

Show all one activities

Career center

Learners who complete Creative Layout Design for Websites and Mobile Apps will develop knowledge and skills that may be useful to these careers:

UI Designer

A UI Designer creates the user interface for websites and mobile apps. They work closely with UX Designers to ensure that the user interface is both visually appealing and easy to use. This course can help you learn the basics of layout design, which is essential for creating user interfaces that are both visually appealing and user-friendly. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for UI Designers to understand.

See salaries and explore the career path for UI Designer

UX Designer

A UX Designer focuses on the user experience of a website or mobile app. They work closely with UI Designers to ensure that the user interface is both visually appealing and easy to use. This course can help you learn the basics of layout design, which is essential for creating user interfaces that are both visually appealing and user-friendly. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for UX Designers to understand.

See salaries and explore the career path for UX Designer

Interaction Designer

An Interaction Designer is responsible for the design of the interactions between users and websites or mobile apps. This includes designing the user interface, user experience, and overall flow of the website or mobile app. This course can help you learn the basics of layout design, which is essential for creating websites and mobile apps that are both visually appealing and easy to use. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Interaction Designers to understand.

See salaries and explore the career path for Interaction Designer

Web Designer

A Web Designer creates and maintains websites. They use a variety of software to create the layout and design of a website, including HTML, CSS, and JavaScript. This course can help you learn the basics of layout design, which is essential for creating visually appealing and user-friendly websites. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Web Designers to understand.

See salaries and explore the career path for Web Designer

Front-End Developer

A Front-End Developer is responsible for the front-end development of a website or mobile app. They work closely with Web Designers and UI Designers to implement the design of the website or mobile app. This course can help you learn the basics of layout design, which is essential for creating front-end code that is both visually appealing and user-friendly. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Front-End Developers to understand.

See salaries and explore the career path for Front-End Developer

Visual Designer

A Visual Designer creates visual content for a variety of purposes, including websites, mobile apps, and print publications. This course can help you learn the basics of layout design, which is essential for creating visually appealing content. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Visual Designers to understand.

See salaries and explore the career path for Visual Designer

Graphic designer

A Graphic Designer creates visual content for a variety of purposes, including websites, mobile apps, and print publications. This course can help you learn the basics of layout design, which is essential for creating visually appealing content. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Graphic Designers to understand.

See salaries and explore the career path for Graphic designer

Product Designer

A Product Designer is responsible for the overall design of a product, including the user interface, user experience, and industrial design. This course can help you learn the basics of layout design, which is essential for creating products that are both visually appealing and user-friendly. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Product Designers to understand.

See salaries and explore the career path for Product Designer

Art Director

An Art Director is responsible for the visual design of a product, including the layout, typography, and color scheme. This course can help you learn the basics of layout design, which is essential for creating visually appealing products. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Art Directors to understand.

See salaries and explore the career path for Art Director

Creative Director

A Creative Director is responsible for the overall creative vision of a product, including the design, marketing, and branding. This course can help you learn the basics of layout design, which is essential for creating products that are both visually appealing and effective. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Creative Directors to understand.

See salaries and explore the career path for Creative Director

Information Architect

An Information Architect is responsible for the organization and structure of a website or mobile app. This includes creating sitemaps, wireframes, and other documentation. This course can help you learn the basics of layout design, which is essential for creating websites and mobile apps that are easy to navigate and use. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Information Architects to understand.

See salaries and explore the career path for Information Architect

Motion Designer

A Motion Designer creates animated content for websites, mobile apps, and other digital products. This course can help you learn the basics of layout design, which can be useful for understanding how to create animated content that is visually appealing and engaging. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Motion Designers to understand.

See salaries and explore the career path for Motion Designer

Marketing Manager

A Marketing Manager is responsible for the development and execution of marketing campaigns. This includes creating marketing materials, managing marketing budgets, and developing marketing strategies. This course may be useful for Marketing Managers who want to learn more about layout design, as it can help them create marketing materials that are both visually appealing and effective. The course covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Marketing Managers to understand.

See salaries and explore the career path for Marketing Manager

User Researcher

A User Researcher conducts research to understand the needs and wants of users. This research can be used to inform the design of websites, mobile apps, and other products. This course can help you learn the basics of layout design, which can be useful for understanding how users interact with websites and mobile apps. The course also covers topics such as grids, vertical rhythm, and margins, which are all important concepts for User Researchers to understand.

See salaries and explore the career path for User Researcher

Brand Manager

A Brand Manager is responsible for the development and execution of a brand strategy. This includes creating brand guidelines, managing brand communications, and developing brand partnerships. This course may be useful for Brand Managers who want to learn more about layout design, as it can help them create brand materials that are both visually appealing and effective. The course covers topics such as grids, vertical rhythm, and margins, which are all important concepts for Brand Managers to understand.

See salaries and explore the career path for Brand Manager