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.
Very useful again, Zach. Thanks!
Thanks Helen! Excited to see some of your awesome flat designs when you finish ’em. 🙂
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. 😀
Zach, can i do this in Illustrator an older version…Mike
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.
Zach, Just wanted to say thanks for all the time and effort you put into these at no cost. We really do appreciate it.
Thanks
Dave
You’re welcome Dave, thanks for always being awesome!
Great stuff! In this video you mention the site http://designmodo.com/flat/
Do you suggest we purchase these design elements? I notice they have PSD and HTLM or both. Which do you suggest?
Thanks and I look forward to the next lesson!
Hi Randy, glad you enjoyed it! I personally am just using their free one that you can sign up for here: http://designmodo.com/flat-free/
However, I’m sure their paid one is worth it!
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!
Thanks a lot, glad you enjoyed it! 😀
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.
Thanks
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.
Randy
I’ll keep you in the loop! The one I’ve been messing with (to answer your other comment) is the “good bones” theme. http://themeforest.net/item/good-bones-the-wp-sandbox-theme/4735502?ref=zacholas321
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!
Thanks Nadia! I can’t tell you how happy it makes me to hear that. 🙂
What do you think of the Business essentials Premium and Flatpack – multipurpose themes from themeforest?
http://themeforest.net/item/business-essentials-premium-wordpress-theme/4375646
http://themeforest.net/item/flatpack-multipurpose-business-wordpress-theme/4624428
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?
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?