How to Design a Modern Flat Web Design: 35 Easy-to-Follow Photoshop Tutorials and Guides

When it comes to web design styles and directions, a lot of people and designers lean to simplicity in UI and minimalistic forms and elements. In other words, a lot of people like flat design. Flat design gained its popularity among users and commitment of thousands of designers thanks to its heavy use and advocacy by Microsoft and Apple brands.


Flat design is all about minimalistic forms, plain graphics, simple and clean UI elements. These principals make flat web design popular throughout many years and that is why it is so popular among many web designers generations. There are multiple benefits of using flat design style in your web design and graphics projects. Here are some of the most significant:

  • Simple interface
  • Readable clean typography
  • Compatible with responsive design
  • Legibility and adaptability for any screen size
  • Positive effect on the loading speed.

If you want to master flat design, but don’t know where to start from, we have compiled a list of 35 Easy-to-Follow Photoshop Tutorials and Guides which will help you master it step-by-step and apply some of the provided flat design techniques for creating your own awesome flat design artworks. Some of them are provided in the form of video tutorials, other are easy-to-follow guides. Photoshop will help you make the first steps in flat design thanks to its intuitive interface and simple actions: Get Photoshop as part of a Creative Cloud single-app plan for just US$19.99/mo.

There are a lot of pre-designed free graphics which will help you create your first flat design projects. We offer a wide range of free website PSD templates so you can easily create your first website design.

  1. Ultimate Guide to Flat Website Design

This helpful and extended guide explains in detail the paradox of flat design, its popularity. In this guide, you can find a lot of useful information: the collection of articles about flat design, flat design tutorials, free graphics, and website layouts based on flat design.

Cost: Free

  1. Flat Design – An Introduction

Learn the basics of flat design, its origin and brief history, etc.

  1. The 7-Minute Guide to Flat Design 2.0

Learn about a new flat design trend – Flat Design 2.0. The author reveals a few common effects which designers employ to achieve that Flat-2.0 look. Learn them and employ in your own flat design projects.

  1. The Flat Design 2.0 Revolution

Another comprehensive guide to a moderate iteration of the flat design, known as flat design 2.0. In this guide, you will find out what are four features which are typical for flat design 2.0 version.

  1. A Complete Guide to Flat Design in Website Designing

A must-read guide for those who like flat design and want to work in this style. This comprehensive guide explains what is flat design, features of the flat design, guiding principles of flat design. You will learn how to make use of flat design in the process of creating websites and web pages. Besides you will find a lot of other trends explained which are related to flat design.

Cost: Free

  1. Creating a Flat Design Look in Photoshop

This 3-minute explanatory video from Paul Trani shows how to create a flat design look and long shadows using 3D.

Cost: Free

  1. Flat Design Photoshop Tutorial #1 | UI Design Tutorial for Beginners

A simple 7-minute video tutorial that explains the basic techniques of flat design using Photoshop.

Cost: Free

  1. Photoshop Tutorial: Flat Design Tutorial

A short 8-minutes video tutorial that shows how to create a flat house icon.

Cost: Free

  1. 10 Flat Design Tips & Techniques Photoshop Tutorial

This YouTube 49-minutes video from Tutvid, explains in 10 simple steps how to build a confirmation pop up badge user interface using flat design techniques in Photoshop.

Cost: Free

  1. Flat Icon Photoshop Tutorial

Learn how to create quick flat graphics in Photoshop from scratch watching this short 8-minutes video tutorial from Jaysen Batchelor.

Cost: Free

  1. How to Create a Website in Flat Design Style (Video Tutorial)

This 17-minutes video tutorial covers general principals of flat web design. The tutorial is created for web design beginner level.

Cost: Free

  1. Photoshop Tutorial: Flat Design

The video shows the general techniques for creating flat shapes and icons in Photoshop.

Cost: Free

  1. Tutorial Photoshop CC: Flat Design Landscape

Learn how to create a flat landscape design from this 14-minute video tutorial.

Cost: Free

  1. Photoshop/Illustrator Tutorial – Flat Design One Page Website

An 80-minute informative and descriptive tutorial on how to create a one-page website layout with flat UI elements, like icons and other must-have website elements.

Cost: Free

  1. Video Tutorial: Create Flat Web Design with Photoshop

The video includes a two-hour tutorial that will help you learn flat web design basics and master latest flat UI techniques. The video includes:

  • An overview of the modern web design;
  • A step-by-step tutorial;
  • A website mockup and prototyping;
  • An introduction to the 960 grid;
  • Flat UI kit package to get started with Flat UI;
  • Flat UI colours palette.

Cost: $20

  1. How to Make a Flat Earth Designs | Flat Design Photoshop Tutorial

This video tutorial explains how to make a flat Earth design elements using Photoshop.

Cost: Free

  1. How to Create a Flat UI Style Button in Photoshop CC

In this video, a web designer, Piet Alberts, explains and shows how to create a semi-flat UI button. Also, he will teach you how to create a hover and selected states for the button.

Cost: Free

  1. Flat Design Potted Plants

In this 18-minute video tutorial, you will learn how to design minimal flat potted plants with different styles and of pots and leaves.

Cost: Free

  1. Video Tutorial: Flat Design Animations

This short 5-minute video will explain how to create flat design animations.

Cost: Free

  1. How to Create Stylish Flat Space Icons in Adobe Photoshop

Learn how to create trendy flat-style space icons with long shadow effects in Adobe Photoshop, using simple shapes and path operations.

Cost: Free

  1. Animation: Create a Flat Design GIF

The course is designed for those who want to master flat design GIF. You can learn how to create a 3D-looking animation of planet Earth in Adobe After Effects.

Cost: Paid Subscription (7.50 EUR/month)

  1. The Ultimate Guide to Flat Design

]In this guide, you can find a lot of helpful UI kits, a pre-designed package of UI elements and parts. Some of the UI kits are provided for free, other more comprehensive are paid. All the kits come in PSD format and are fully editable in Photoshop.

Cost: Free and Paid

  1. Create a Website Flat Design in Photoshop using Flat UI (Video Tutorial)

In this tutorial, you will learn and master Photoshop techniques some of the professional designers use for creating awesome flat design layouts.

Cost: Free

  1. Flat Long Shadows: Step-by-step Tutorial, Resources and Examples

If you want to learn how to create a long shadow for flat icons and small UI elements, this tutorial is right for you.

Cost: Free

  1. Principles of Flat Design

The guide explains the key 5 principles of flat design. You must learn them before you make your first steps in flat design.

  1. Best Practices for Flat Design

This guide will help you master some great practices which will help create awesome flat designs.

  1. Designing a Trending Website: A Tutorial for Flat Design & Minimalism

This tutorial will explain how to create a minimalistic website in flat style design.

  1. What Is Flat Design? Design in 60 Seconds

A quick explanation video that tells about flat design.

Cost: Free

  1. The Beginner’s Guide to Flat Design

A comprehensive beginner’s guide to flat design basics.




If you seek some inspiration for your flat design projects, this visual inspiration guide shows some best examples of websites, icons and graphics created in flat design style.

  1. Getting Started With Flat Web Design

This guide provides some general principles and best practices which are applied in flat design

  1. 11 Resources to Help You Create a Flat Design Responsive Site

In this article, you will find a lot of useful resources for creating flat designs, including UI kits, responsive frameworks, icons and elements, flat UI colours etc.

  1. The Ultimate Guide To Flat Design

Another small guide to flat design for beginners.

  1. Flat Design: An Evolving Trend

In this guide, you will learn about flat design as an evolving trend. It explains what is material design, what is Flat Design 2.0, how flat design changed and how it looks in 2017-2018 and reveals some up-to-date trends related to flat design.

  1. Hopefully, the Ultimate Guide to a Flat Icon Set

Learn how to create a flat icon set for user interfaces.

(1 votes, average: 5 out of 5)

Latest News

Free 4th July Flyer in PSD

Grab this Free 4th July Flyer in PSD in order to create a high-end flyer invitation design for your upcoming party or music event or meeting dedicated to the 4th of July.

2 Free Metal Bottle Caps Mock-ups in PSD

Download these 2 Free Metal Bottle Caps Mock-ups in PSD, simply paste your logo, label or any other type of design using smart objects, and your design presentation is ready to be showcased.

Free Summer Nature Watercolor

Add a splash of watercolor summer colors to your print or packaging design projects in one single click and your design will play out in fresh colors. Spruce up your designs with these vivid Free 8 Summer Nature Watercolor backgrounds.

Free Indie Music Flyer in PSD

Spread the word about an upcoming music party or music concert event using this high-end, print-ready Free Indie Music Flyer in PSD. Its design and layout is easy-to-customize, so you can easily change any design element, edit and paste custom indie music event details, add a logo and custom image or photo.

Mens Sports Tank Top MockUp Set

Create a great-looking design presentation for your end clients using this high-end Men’s Sports Tank Top MockUp Set. Within a few simple tweaks, you can easily change a color of a tank top, edit its background, quickly paste any print, logo or artwork design you wish. Thanks to smart objects the customization will be a […]

Free Pet Shop Tri-Fold Brochure in PSD

Promote your pet shop services or special offers using our exclusive Free Pet Shop Tri-Fold Brochure in PSD. This pre-designed print-ready brochure template is super easy-to-customize thanks to smart objects. You can easily change any design element, edit colors, add your custom text, business details and logo to make it fully personalized in several clicks.

Women’s Sports Tank Top Mockup Set

Download this easy-to-edit Women’s Sports Tank Top Mockup Set in PSD. You can easily customize any of the sports tank tops mockups by inserting your own sports t-shirt design, logo, branding or an original artwork designs via smart objects. These highly customizable smart objects allow changing any design element, including colors of tanks tops, the […]

Free Interior Wall Mock-up in PSD

Download this exclusive Free Interior Wall Mock-up in PSD which you can customize to fit your design or personal needs. You can put any print design artwork, be it a poster design, a painting design, etc. Thanks to smart objects it’s easy to customize and add your custom design.

16 T-shirt MockUps Mega Bundle

Download this mega mockup bundle that consists of 16 multipurpose t-shirt mockups. Simple adjustments allow you to easily move any design element, change colors, background color and paste your own logo, artwork or print design within a few clicks. The bundle includes men’s and women’s tank top t-shirts, long sleeve t-shirts and hoodie mockups which […]

Free Church Conference Flyer in PSD

Spread the word about a church-related event, religious holiday celebration event, church conference or meeting, using this Free Church Conference Flyer in PSD. It can be easily customized by adding church-related event details, changing colors via smart objects.

2 Free Animated Travel Instagram Stories in PSD

Do you run a travel agency website? Chances are you have major social media accounts set for the promotion of your travel agency or travel services. We have created these exclusive 2 Free Animated Travel Instagram Stories in PSD which you can easily customize and use in order to attract more clients and spread the word […]

Free Mouse Pad Mock-up in PSD

Showcase your own graphic design project, be it a logo design, brand label design or any other print or branding design, using this exclusive Free Mouse Pad Mock-up in PSD.