Flat design, part 2

In yesterday’s post, I gave you a quick intro & overview of the latest web design trend, flat design.

Today I’m going to go into a little more detail and show you some of the specific tools & strategies I use when putting together flat designs in Photoshop.

Click here to download the flat UI color palette that I mention in the video.

21 Responses to Flat design, part 2

  • Dave Cleveland says:

    Hey Zach, are you going to follow up on this tutorial on how we take this Photoshop design and turn it into a website design, possibly a WordPress theme?

  • Dave Cleveland says:

    Hey Zach, are you going to follow up on this tutorial on how we take this Photoshop design and turn it into a website design, possibly a WordPress theme?

  • Nadia says:

    Much thanks for all your input! I’ve truly enjoyed and learned a lot from your step by step program. Cannot wait to see what you have coming out soon.

    Thanks Again!

  • Since your series on flat UI, I have 2 clients who are now interested in me building a new website for them. What is the process you recommend? I’ve downloaded the free UI kits but not sure of the most efficient workflow to address everything including responsive sites etc.

    I noticed they have a template or two, but the support seems to be lacking. I look forward to hearing your advice.


    • Hi Randy, that’s awesome to hear! This is something I’ve been working out, myself. It’s certainly do-able to do it with Artisteer, but the Artisteer responsive framework is not very good. I am currently working with a theme that is a nice starting point that also uses the foundation framework, so I’ll keep you guys posted with my findings there!

      I’ll be doing a post soon about using paneled layouts with artisteer themes.

      • I’ll be anxious to see what theme works for you. I’ve been looking at all the themeforest offering but they don’t quite take it to the level I’m looking for. Clearly the responsive nature is critical. One thing I’ve noticed is that there is distinction between Flat UI and Metro design. Some of the Metro designs look more like the “Flat” designs in your training. I’m OK with photoshop but I don’t want to spend hours coding from scratch anymore so a good template is a must for me. I look forward to your discussion.


  • Dave McCormack says:

    This was just awesomeness Zach!!!

    Very cool and really good going, I really enjoyed this!

    Thank you so much for your efforts I receive a better understanding each time I watch something of yours!

  • Dave Cleveland says:

    Zach, Just wanted to say thanks for all the time and effort you put into these at no cost. We really do appreciate it.


    • Yep! Your process will be a little different than mine because Illustrator is laid out a little differently than photoshop, but you can certainly do it. The oldest version of the adobe products I’ve used is CS2, and I know it would have worked there. The nice thing about flat design is that, because it uses so few layer styles and such, it doesn’t require tons of knowledge of photoshop/illustrator to implement.

  • rodbarbee says:

    Zach, this is really helpful, and not just the Flat Design aspect. Using Photoshop for initial site design seems so much easier than having to wrestle with Artisteer at the start. Seems like it creates an easy to follow path for when you finally get to Artisteer to build the site. Plus the added benefit of already having created needed graphics.
    I’m really looking forward to your Photoshop training. I’ve been using Photoshop since version 5.5 but mainly for editing photos and the occasional poster, calendar, or card. I think I’m going to love using it for web design.

    • You’re spot-on, Rob. If I designed solely in Artisteer, my sites would look much less awesome. You’re also right about it making it easier in Artisteer, because the challenge you face is no longer, “How can I make Artisteer create something nice,” and is instead, “How can I re-create this nice-looking design here in Artisteer.” I think you’ll dig it too. There’s even a sweet photoshop plugin that exports any custom layer style to CSS for you, which means that any fancy buttons you make in PS can be easily migrated to your website. :D

Add Comment Register

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent Comments