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


As you already know, flat design has been quite popular in the recent period and we, here at Designmodo, have been doing everything we could to promote it, because we love it ourselves.

Therefore we also have a video tutorial on how to create such as design in Photoshop and we hope you will learn a lot out of it.

In the tutorial you will see Photoshop techniques professional designers use to come up with their amazing flat layouts and you will also be able to follow and learn these techniques yourself.

In the tutorial you will see that we have used many of our own resources from the Flat Design Kit (free version) and Flat UI Pro (paid version), which we encourage you to use as well.

The video tutorial is only a bit less than 18 minutes long, so it will not take very long time for you to watch it.

You will learn about placing of elements, color palettes and some fonts you can use. You will also get to see how to use the grid in the Flat UI Kit, which is always a useful tool when designing in Photoshop. And we just really want you to see the video and learn from it. So, without further adieu, here’s the video.

Subscribe to our YouTube Channel for new and useful videos.

Flat Web Design Tutorial


  1. Adam Jun 25, 11:58 am

    Subscribed and watching now :)
    Thanks for these!

  2. Phil Jun 25, 12:33 pm

    Hey there,
    thanx for the vid, it really was fun watching but i have asked myself, why are you not layouting at 100% Zoom? Then the sizes you intend to create would be pixelperfect and not 701 instead of 700 like in the header and so on. Also why are you using Pt for Fontsize and not also Pixels? Or the grid – putting a visual grid in the background is better than no grid at all, but PS offers a great and easy way to create a grid, that is even magnetic to elements, so they align perfectly.

    I don’t mean to nag about the video, maybe i get the intention wrong and those things aren’t meant to be dealt with, but theses bascis among others are also quite important, when you plan to create projects for clients, right?

    • Wiktor Malinowski Jun 25, 1:09 pm

      The most painful part was when they’ve resized the button in the most ugly way. They killed that shape.

  3. Brad Jun 25, 1:15 pm

    Thanks for tutorial. I’m beginner in Photoshop and this lesson is very useful for me.

  4. jean bragantin Jun 25, 3:35 pm

    What the font name that start with L, please, tks

  5. Phil Stringfellow Jun 25, 3:56 pm

    Really? Really?!?!

    A tutorial for the much-flaunted “flat” design and this is the best you can do? Specifically stating a height for the design when you haven’t completed the layout yet? Designing at 77% and not fully zoomed in, giving you the chance to miss crucial pixels and measurements – like dropping the guide at 100ish pixels and not 100px exactly? Resizing elements like rounded rectangles with scaling the corner effect properly.

    Seriously, do yourself a favour and do not watch this video if you have any hope of becoming a better designer. This video will teach you bad practices, give you no real idea of what designing for the real world is like and most of all, make you a lazy designer cashing in on trends – and badly at that.

    • Adrian Jun 25, 4:09 pm

      Thank you for suggestions. Are you interested to make an tutorial for us? To learn beginners designers how to work in Photoshop.

      • Phil Stringfellow Jun 25, 7:29 pm

        I don’t pretend to have enough knowledge to be able to teach novice users of Photoshop, and it’s my inherent belief that a lot of knowledge of Photoshop is through experimenting. Chuck Anderson stands as a testament to being self-taught, and though following tutorials is a good way to learn your way around the program, it doesn’t give you the skill, insight or the inspiration in finding your own way.

        • Adrian Jun 25, 7:56 pm

          Absolutely agree about Psdtuts+. You need to understand that now we share or sell PSD’s, but not teaching how to use Photoshop, this tutorial was an experiment.

          My propose was real offer for you :). And this offer is available for all who love to write or record tutorials for us.

  6. Dima Jun 25, 11:37 pm

    Really cool tutorial, very clear from my point of view. Well done

  7. spencergoldade Jun 26, 12:34 am

    I thank you very much for the UI Kit, I think it will be a great resource.

    However, I have to agree with many of the other people that this video is teaching some bad habits to new aspiring designers. Simply trying to explain that away by assuming that those new people may not understand if you made a more in depth video also seems a bit insulting. I think you guys have done a great job on the UI Kit, and I know this video is an experiment, so I won’t dig in too deep though.

    Please, in your next video, consider not dumbing things down too much, and even if you do, please explain what you are doing and why so that it gives new aspiring creatives an opportunity to learn and not just copy or cut corners.

  8. Phil Jun 26, 10:13 am

    The nice folks at ustwo have released a very good and useful tutorial about how to set up PS right and have a professional start in working with it. You can find it here:

    Also Adrian, i would also like to provide help/tuts if time and topic allow that – was that offer open to anybody? Do you have actual issues to be dealt with?

  9. reza Jul 4, 1:41 pm

    I have watched your video and found a lot of nice techniques to use in my website. However, several questions have been unanswered in my mind, may you please make them solved?
    1-What is the advantage of creating a website with photoshop, as you learned in this video? how i can use the psd file after all?
    2- I want to use PHP as the programming language for my web application? then what is the best way to have a flat design? can you suggest a sample or tutorial which help us about this? Is it enough to import the CSS and JS folders into our website assets folder? and then use the metro ui convention in our view pages (assume we use MVC model)?
    thank in advance.

    • Adrian Jul 4, 2:43 pm

      After you creating design Photoshop, you need to make it in code. So, for this you need web developing abilities.

  10. monjurul hoque Jul 22, 10:55 pm

    nice your flat web desighn tutorial

  11. Douglas Idugboe Jul 27, 5:37 am

    Do you have a tutorial on how to now turn this into a web page? If not, that would make a wonderful follow-up video tutorial to this one.

  12. Jerralyn Tanoc Sep 14, 10:48 am

    I can now follow the design trends. Thank you or this tutorial on how to create Flat UI.

Leave a Reply

* Minimum length: 20 characters