Course Description

With the Flat Design Tutorial you will learn to create amazing webdesign and prototypes with Photoshop.

  • Fast & simple. ***NO CODING NEEDED***.
  • In 2 hours, you will learn about the latest flat UI techniques
  • You will use Photoshop, Flat UI components and other great resources.


This course is for aspiring web and product designer willing to sharpen their design and Photoshop skills. In a 2-hour tutorial, you will receive a good introduction to Flat Design, which is the latest trend in modern Web Design.

If you are new to Photoshop, this is a good place to start as the course will walk you through every step of the prototyping process.


The course includes:

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

For this course, you will need:

  • Photoshop CS5 + - you can download the 30-day trial version on the Adobe Creatrive site.
  • The rest of the materials is available for downloaded in the course content.

By the end of the course:

  • You will have a better understanding of website prototyping
  • You will get better at organizing your workflow with photoshop layers

Front End & iOS Developer

sandy ludosky

My name is Sandy. I am a freelance Web Designer and Developer based out of Toronto, in Ontario, Canada. I specialize in Front-End development with HTML, CSS, CSS3 Animation, Sass, Javascript and JQuery. I love creating beautiful, professional and user-friendly websites using the Adobe Creative Suite: Photoshop, Illustrator and Flash to name a few. Also, I am keen on Web marketing, Web analytics, Visual Design, Video Editing, Photography and WordPress development. On top of being a Udemy instructor, I am an avid learner of new technologies and digital stuff.

Course curriculum

  • 1

    Introduction

    • Introduction

    • Project Overview

  • 2

    Set Up

    • The Course Files

    • Course Files (download)

  • 3

    Design Process

    • Header - Part I

    • Header - Part II

    • About Section

    • Services - Part I

    • Services - Part II

  • 4

    Finalizing Mockup

    • Team Section - Part I

    • Team Section - Part II

    • Contact Section - Part I

    • Contact Section - Part II

    • Footer