DesignModo’s Flat UI Pro Review Part 01, the PSD’s

I’m not really familiar with reviewing UI kits, but I’m going to give it a shot. I recently received the Flat UI Pro Kit from Designmodo and I’d like to go over what I like, what I don’t like, and all the in-between.

The cool thing about this kit is it actually came with the HTML, so making a site with the Flat UI Pro Elements should be a cinch! Let’s get into it…

I’d like to break this up into two separate pieces. First I’m going to go over the PSD files, than I’ll go over the HTML.

Flat UI Pro PSD

Upon unzipping the Flat UI Pro zip file you’ll see a few folders. Under the PSD folder you’ll find the following:

  • Assets

    The assets folder comes with the assets.psd file. Not sure if it’s just my version or not, but I had to rename the file with a .psd extension or else it wouldn’t work. In any case, this file comes with all the cool Mac Gadgets. The file includes an iMac, MacBook Pro, iPad – Black and White, and iPhone – Black and White. All very large so if you’d like to showcase your portfolio in a neat, flat creative way, you shouldn’t have any problems.

    It also includes the Swatches Folder. Within this folder you’ll find a beautiful set of bright colors. Use different variations of greens, blues, orange, grays, and purples in your site. Just open your swatches panel in Photoshop and import them via the included file.

  • Glyphs

    This includes all your simple and clean glyph icons. Usually used for elements like navigation menus. Included is the .psd file which contains glyphs in 24px and 16px. Additionally, you have SVG files which have a few more goodies. They include the social icons, and some additional form elements. I kind of wish these were in the psd file as well.

  • Icons

    Oh this is fun stuff! These icons are so unique, I just love ’em. Once you get into this folder, you’ll see the png folder. This folder already has the icons with a transparent background, AND they are retina ready! There’s a total of 50 icons!

    In the psd folder you have two .psd files. One is with the retina icons, and the other is with the normal icons. What I like about this is, the icons aren’t flattened. Each icon is in a folder with a few different layers, so you can edit the icons, export in pieces, change the colors, etc. It really allows you to be as creative as you want without being locked in. (That’s how they got the amazingly cool effects on the Flat UI website.)

  • UI

    The meat and bones (or meat and potatoes, whatever!). Here’s where all your Photoshop prototyping takes off! This file has everything to make a good website. All your button styles are here, drop downs, form fields, tags, labels, navigations, and more. Just click the folder, drag the element, and that’s it!

Now, let’s see how fast I can create a mock-up using the Flat UI Pro Elements.

Boom! Did it in 15 minutes. Yes it’s quiet and super sped up, but that’s OK!

Sample Site


The elements in Designmodo’s Flat UI Pro are amazing. They’re clean, elegant, simple, and flat! The way the files are set up makes it incredibly easy to use and allows for full creative control.

The only thing that threw me off a bit was the file names, where some were missing extensions, and others had it.

I would’ve also liked to see some files with examples, similar to the bricks UI. They had form examples, post examples, and a few other neat things as well. Incase anyone get’s stuck, I think it’d be nice to have some of these things to fall back on and tweak.

Other then that, it’s a great set to work with. On part two, I’m going to review the HTML part and see if I can integrate it with the Genesis Sandbox starter theme. We’ll see how easy or difficult that may be!

Have you used the UI Kit yet? What do you think?

Focus on what matters!

Focus on what matters!

No more wasting time trying to figure out how to code it all!  Sign up below and I'll share my tips and tricks on how to build websites fast, professionaly, and with minimum code!

You have Successfully Subscribed!