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

Conclusion

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?

Want to earn an extra $30,000 this year?

Me too! And guess what? I'm almost there already and it's only April! Check out what I'm doing here.

Comments

  1. Denis says

    Wow, it’s very easy to use! This guys have not so much info about this products but this article shows many features from this pack. Are you planning to make article about HTML version?

  2. says

    Nice review Jonathan. I purchased the ui kit over the weekend and now just getting a chance prototyping with it. Wish they had included more layout samples but overall couldn’t be happier.

    Cheers.

  3. Cutss says

    Is there someplace a tutorial exists on how to download the new 1.1 version and get it integrated with Bootstrap?

    I would like to develop my site; however, I am finding it hard getting started with the Flat UI pro kit. Any pointers would be helpful thanks!

    • Jonathan says

      If you purchased the pro version from design modo, they should have sent out an email with steps on how to upgrade.

  4. says

    Uhm, I can’t tell if you gave a good review for i have not tried this UI yet but with your review, it interests me to try this flat UI. :) Thanks for this share!

    • Jonathan says

      No problem. It’s a UI kit and it’s pretty sweet, so like any UI kit, they’re only really as good as how you use them. Personally I love it and I integrate with many designs.

  5. Bob says

    Thanks for putting this together. A shame this video is so fast, some really good content but dang if I can keep up with it. Redo it at slow speed and explain each step in detail and you could sell the tutorial to most of the folks who bought Flat UI Pro. A shame that the folks that put together Flat UI Pro don’t offer real tutorials in how to use the product either. Nor do they have any examples. Sigh…

    • Jonathan says

      Hi Bob, It was meant to be fast, I didn’t think people would want to site for 15 minutes watching me put together a website =). BUT, I will have full tutorials in the future regarding development, design, etc. So make sure to keep an eye out.

    • Jonathan says

      Great Question! Part 2 was going to be the HTML part of it, BUT since I use mostly WordPress, it was hard to work the review in considering I wouldn’t have an application to use it.

      However I will say that the HTML is clean and you can apply it pretty easily, just not with WordPress =). When I find a way, you can be sure that I’ll post it…

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>