Overview

We love the latest flat design trend, and Square UI is made exactly in that style. The simple, colorful and flat-designed components of Square UI are perfect for almost any project, from complex web applications and small startup projects to websites.

  • image description

    Many components

    Don’t worry about having to create new parts with each website update. Our kits contain a huge number of components and icons.

  • image description

    Fast prototyping

    You will be able to quickly develop high-quality prototypes in full-color. Your clients will appreciate prototypes with beautiful components.

  • image description

    Save your time

    Do not waste time on the implemen- tation of the same components. Use your time to develop new ideas and projects.

  • image description

    Ready for Retina Display

    All components are made ​​with Shape Layers. You can change the size and maintain image quality. Plus every component is ready for use in Retina resolution.

  • image description

    Components fit together

    All components are made using the same styles and match each other wonderfully. You can easily combine them in a variety of design projects.

  • image description

    Elaborate design

    All components are thought out and are easy to integrate into any design project and layout.

Many useful elements

You will find Video players, Buttons, Text edits, Menus, Sliders, Beautiful Complex Blocks and many other useful web elements. Text elements use the Montserrat typeface, this font is available free on Google Web Fonts.

Fast Prototyping. Try to use!

This sample site was completed in just 10 minutes using standard elements. You can play with components too. Just Drag & Drop using the interactive whiteboard below.

Thanks for watching!

We hope you will enjoy this new product, and if you use it, do not forget to share your projects with us. We love to see all the great things you are working on!

133 Responses
  1. hector Feb 20, 3:41 pm

    Cool presentation! Very nice UI Kit.

    Drag & Drop interactive whiteboard is awesome! :D

    Reply
    +161
  2. David Feb 20, 3:59 pm

    Love it! Great work, guys.

    Reply
    +34
  3. Joseph Feb 20, 4:04 pm

    There is no doubt this is the best thing I’ve seen this week. I love the drag and drop presentation :) You guys rock!!

    Reply
    +34
  4. Berny Feb 20, 4:05 pm

    Just purchased, thanks for very clear and clean PSD files and for awesome Flat Design!

    Reply
    +18
  5. Chris Feb 20, 4:07 pm

    Bookmarked! I will use for my new app.

    And yeah, cool presentation!

    Reply
    +13
  6. Nazim Feb 20, 4:14 pm

    Really nice work guys, every component looks awesome !!

    Reply
    +16
  7. Harish Feb 20, 6:02 pm

    Wow not only is the UI kit awesome, the way you presenting it is really neat.

    Reply
    +10
  8. themecurve Feb 20, 9:22 pm

    awesome stuff and amazing presentation, really its very much impressive:)

    Reply
    +12
  9. E.T.Cook Feb 20, 11:49 pm

    It’d be great if you created a Bootstrap “plugin” that overwrites the default styles with the elements in this kit.

    Reply
    +75
    • nzube Feb 24, 12:14 am

      i will be the first in line to pay for a bootstrap designmodo special. like they say.. shut up and take my money.

      Reply
      +27
    • pepperstreet Feb 24, 4:57 pm

      Currently busy and my time is very limited… but it is definitely on my TODO list!!!

      I am going to buy a dev license and do a conversion into a separate Bootstrap theme, a Joomla 2.5/3.x template and a Drupal 7 theme.

      Estimate schedule is end of March/in April. I am a one-man-show, so have mercy ;-) You may follow me on twitter, my username is “pepperstreet” (all lowercase letters)

      Reply
      +5
      • Daniel Compton Feb 27, 4:05 am

        I’m not entirely sure but I think that even the Dev license doesn’t allow you to create derivative themes for sale, e.g. Bootstrap.

        Reply
        -1
      • pepperstreet Mar 19, 11:03 am

        Please, could someone clear up the confusion about the DEV license? The PSD sources restriction on re-distribution is clear…!

        But you are going to include HTML/CSS in the next updates and future products, right? How to deal with that? I would like to create CMS templates and themes, and most likely they will be bootstrap powered… at least the Joomla3.x template. Anything I have to consider?

        Reply
        -3
        • Adrian Mar 19, 11:19 am

          Hi, to be more clear check this table – http://designmodo.com/license/

          Reply
          -22
          • pepperstreet Mar 19, 11:29 am

            Wow, what a quick reply ;-) Thank you very much. Good news for my projects.

            Just curious about the PSD-Layouts. Actually, that does mean a simple re-arrangement of your elements is considered as a no derivative work? Hard to differentiate between a new layout and a re-distribution of your original collection?! I mean, the PSD will definitely include all your elements in layers.

            +6
          • Adrian Mar 19, 11:38 am

            I think you can use only a few elements from the pack to create an design, is not necessary to use all components. Is important do not resales or share archive of UI Kit.

            -21
  10. Joao Feb 21, 12:25 am

    Question: Does this include the sales type pages?

    Reply
    +4
    • Adrian Feb 21, 12:33 am

      Yes, this pack includes startup samples (sales type pages), in PSD format.

      Reply
      -19
      • Joao Feb 21, 12:38 am

        Awesome. Thanks for the quick reply, but mostly for the great product. There’s really nothing out there that even comes close to what you guys are offering – sounds like a cliché, I know! Thanks.

        Reply
        +8
  11. JoshuaChr Feb 21, 12:45 am

    Very nice layout kit. Also curious what you’re using for the whiteboard feature?

    Reply
    +2
    • pingram3541 Feb 21, 8:36 am

      its jquery ui – “draggable” and a bit of custom css to change the cursor. This is a great approach to a next level product if dm wanted to take this further…

      A magnet board so-to-speak that would export the resulting product – even if absolute positioned objects resulted, you’d still have the basic design complete and rewriting to cleaner relative div blocks and cleared floats would be a fast way to progress from prototype to final production.

      Reply
      +6
  12. bbcversus Feb 21, 1:30 am

    Amazing presentation and product! Fantastic work!

    Reply
    +4
  13. Mick Feb 21, 1:58 am

    Nice!

    Love the Metro look of this. Flat design rocks!

    Reply
    +4
  14. Chris Kluis Feb 21, 4:05 am

    I would buy this and pay 50-100 more if it came with bootstrap.css file to make it possible to prototype in CSS instead of photoshop.

    Reply
    +36
  15. Ahmad Awais Feb 21, 4:17 am

    Awesomeness has no limits.

    Reply
    +3
  16. Tim Feb 21, 4:30 am

    “…featuring the flat design trend”

    Just take that bit out and you’re good.

    Reply
    +5
  17. Davide De Maestri Feb 21, 12:05 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -14
  18. Max Sworcik Feb 21, 12:11 pm

    Great UI/UX Templates. Love it. But would be nice if there’s a chance to get it as fireworks PNG templates?

    Reply
    +1
    • Adrian Feb 21, 12:30 pm

      We discussed this option with our designers, and decided do not make for Fireworks. Sorry.

      Reply
      -13
  19. Umair Ulhaque Feb 21, 12:29 pm

    Sleek and simple as ideal for HTML5 development

    Reply
    +5
  20. Will Feb 21, 2:26 pm

    Good work. Thanks for amazing UI )

    Reply
    +2
  21. Arif Riyanto Feb 21, 3:08 pm

    Awesome! But, it’s too much..

    Reply
    -4
  22. azinicus Feb 21, 3:46 pm

    Awesome, bought it right away. Any idea what icon kit is used? I’d love to buy an icon kit as well, or be pointed to where I can find similar icons. Thanks.

    Reply
    +3
  23. Muhammad Faisal Feb 21, 4:59 pm

    Great work, best for app design.

    Reply
    +1
  24. Stephanie Stark Feb 21, 5:45 pm

    Looks great, I love flat design and the web presentation really sells it!

    Your social media buttons at the bottom wig out when I roll over them, though :p

    Reply
    +3
  25. pepperstreet Feb 22, 3:09 am

    Already mentioned it on Facebook. Awesome flat metro style variation.

    License question:
    Still unsure about single and developer license. Is it possible to create an HTML template or CMS theme, and then sell it to multiple customers?

    (this product could include sliced images of SquareUI, but maybe most parts are pure CSS properties! So, your UI is more or less a visuel guide and inspiration)

    Reply
    +4
    • Adrian Feb 22, 11:17 am

      Yes, you can, please purchase developers license, and you can mention us in your documentation file.

      thank you!

      Reply
      -5
  26. mashapplabs Feb 24, 10:36 am

    Hi all,
    I just bought the pack, you might’ve answered this somewhere else but I want to ask if I need to update my Photoshop to CS6, I have 5.1 and I see two errors when I open the files:

    1- “This document contains unknown data which will be discarded to keep layers editable. To preserve the original appearance instead, choose Flatten to load composite data as a flattened image.”

    2- When I try to open the swatches.aco file:
    “Could not complete your request because an unexpected end-of-file was encountered.”

    Reply
    +1
  27. virgilio Feb 24, 9:37 pm

    Hola

    If i buy the personal license may I update to the Developers?

    Reply
    +3
  28. Harsh Feb 25, 10:42 am

    What is the difference between the Personal License and the Developers License?

    Reply
    +1
  29. Brad Feb 25, 10:46 am

    Is it possible to include a PSD with all of the icons used in one place? At the moment they’re sort of all over the place through the different PSDs.

    Cheers

    Reply
    +1
  30. virgilio Feb 25, 1:12 pm

    I just bought the developers license via appsumo. Happy birthday? :D

    After buying the developers license I would love to create different and personal web design PSD templates, may I sell them?

    thx

    Reply
    -1
  31. christine Feb 27, 10:32 am

    Hi
    I’m not a developer but use a lot of wordpress – would this help me at all?

    Thanks

    Christine

    Reply
    0
    • Adrian Feb 27, 10:40 am

      You can use our elements in wp theme, remember that here are PSD files.

      Reply
      -16
      • Anggi Feb 28, 8:27 am

        Hi Adrian
        can we use this element for make any WP Themes that we can sell at our site? i just bought the developer license. Please let me know about this. Thanks

        Reply
        0
        • Adrian Feb 28, 9:24 pm

          yes you can, please check license page – http://designmodo.com/license/

          Reply
          -10
          • buster Mar 1, 12:31 am

            technically you CAN because they can’t license/patent generic shapes, you just can’t sell/include the psd’s or make images from the psd’s for sale…but since all these shapes can pretty much be recreated from html/css they can’t keep you from reselling YOUR actual creation! This goes for any bootstrap, wordpress, etc theme..you’re basically coding it from scratch using their inspiration that you paid for. I don’t possibly see how this could be argued any other way.

            +3
          • pepperstreet Mar 1, 2:26 pm

            Totally agree. IMHO, that is clearly described in the DEV license agreement. So, creating HTML/CSS templates should be no problem. If its not, then it should be changed and there is a need for a 3rd license for unlimited usage?!

            But its not allowed to re-distribute or include any original PSD file. There was another user asking for PSD-templates… which are more or less a derivative work. So, this is a special question, which is not 100% clear. IMHO, selling layout variations in PSD format is a re-distribution and can`t be allowed.

            0
  32. virgilio Feb 28, 9:30 pm

    After buying the developers license I would love to create different and personal web design PSD templates, may I sell them?

    Reply
    +1
  33. genius Mar 1, 10:27 pm

    Hi, I am not sure about the package, does it include all the things? PSD/HTML/CSS/jQuery with its working what you have present?

    Reply
    0
  34. zhnupy Mar 5, 11:16 pm

    What is the difference between the free version and the paid version ?

    Reply
    -1
  35. ozdemirveysel Mar 6, 10:21 am

    Cool. Love it and bookmarked ;)

    Reply
    0
  36. Dario Mar 7, 4:10 pm

    Hi, it is posible to buy the paid version in html/css/jquery format??

    Reply
    +6
    • Adrian Mar 7, 8:29 pm

      Yes, coming in a few weeks.

      Reply
      -1
      • Dario Mar 8, 7:24 pm

        Ok, i’ll wait then, Thanks!

        Reply
        +2
        • sarvesh Apr 11, 1:31 am

          Do you have a time frame as to when it would be available in html/css/jquery

          Reply
          +1
      • Vivek Aug 29, 10:35 pm

        Is the paid version available right now with html/css/js? I am more interested in getting the CSS so that I can use it directly. Please let me know so that I can purchase immediately.

        Reply
        0
      • Segun Sep 30, 12:06 pm

        Hello, I want the html5/CSS for this (responsiveness will be awesome). please keep me posted for purchase whenever it’s out.

        Reply
        +1
  37. William Mar 7, 10:49 pm

    your license is pretty confusing and wont hold up in court..

    For any resalable web applications or software programs, you should not include our graphic resources as an additional attachment. This will be considered as a redistribution of our resources which is forbidden by us.

    so this clearly means we can create html applications and resell it..

    Reply
    +3
    • Adrian Mar 7, 11:05 pm

      It means you can’t share our ui kits – how an attachment of your application.

      You can use developers license to make themes and templates for sells.

      Reply
      -14
  38. Maggs Mar 11, 9:42 pm

    Beautiful Designs!

    Though I thought it was an actual drag and drop wireframe UI program.
    That would be cool. :)

    Reply
    0
  39. Roy Jacosb Mar 16, 2:19 am

    Really great, but i’ll wait for the html/css/jquery version!
    Nice UI

    Reply
    +2
  40. morgan_jackson Mar 18, 10:29 am

    Hi Adrian,

    Awesome work on the kit! any update on the html/css/jquery version?

    Reply
    +2
    • Truong Nguyen Mar 19, 1:41 am

      I’m working on the Twitter Bootstrap for Square UI. I’ll provide some updates sometime this weekend.

      Reply
      +2
  41. Truong Nguyen Mar 19, 1:42 am

    Sorry, I didn’t mean to reply on behalf of Adrian. It was just plainly as a comment.

    Reply
    0
  42. morgan_jackson Mar 19, 6:20 am

    Thanks for the update Truong!

    Reply
    +2
  43. andrei Mar 20, 8:13 pm

    salut :)

    where i can find the cartoon you used in this preview UI ?

    Reply
    +2
  44. Rodrigo Franco Mar 20, 9:17 pm

    Any updates about the HTML/CSS for this kit?

    Reply
    +2
  45. QUBQ Mar 22, 12:34 am

    I get “The document was created with a different text engine option” error as well, what’s more there are no paragraph styles, no grid and guides. Some layers with bad naming (like rectangle 61 copy 8 indeed), poor layer organization, some weird layer stack decisions (like dedicating a folder for icon components instead of packing it in smart object, messed up layer order, improper text layers organization).
    For such a price usability in a professional environment is clearly limited, please consider adapting some grid (perhaps cssgrid.net) for your layouts and only create block sizes based on columns. Paragraph styles are a must as they separate content from presentation. It would be nice to see some improvements, keep up the good work!

    Reply
    0
  46. Armaan Gupta Mar 25, 2:47 pm

    Am potentially going to purchase this, however want to hear word on how soon html/css version will take for release?

    Reply
    +2
  47. Frank Mar 25, 9:15 pm

    Also very interested in this, but would only get it if there was an html/css version.

    Reply
    +7
  48. Chris Esplin Apr 8, 2:27 pm

    Has anyone started to adapt this for Bootstrap? I’m considering purchasing the dev license and forking Bootstrap 3.0 to match Square UI. It’d take at least a day and maybe a bunch more if I get ambitious to make the conversion, so I don’t want to waste my time if someone else is already on this.

    Thoughts?

    Reply
    +1
    • abitdodgy Apr 8, 4:32 pm

      Did you decide to take this on?

      Reply
      0
      • Chris Esplin Apr 8, 10:22 pm

        I have a bunch of work to get done before I can start on this, but I’ve forked Bootstrap here: https://github.com/deltaepsilon/bootstrap-square-ui

        and I hope to take care of this later in the month. If you watch the GitHub repo you’ll get emails once I start committing.

        Reply
        +11
        • Alex Apr 14, 11:28 pm

          I will gladly help with this

          Reply
          +2
          • Chris Esplin Apr 15, 12:04 am

            I could use the help. It’s not an easy task. I made my first commit last night, so I’m ready to start… but I still have to close out my current project before I can really dig in.

            My plan is to do something similar to the Bootstrap docs. It would be a page with all of the elements that we’ve adapted and the markup to render them. So in the process of building it out we can adapt the Bootstrap core files to the Square UI theme.

            Hit me up on GitHub @deltaepsilon or on Twitter @chrisesplin and we can coordinate.

            +5
          • epsilon May 7, 8:36 am

            I’ve started to build out the Elements page here: http://deltaepsilon.github.io/bootstrap-square-ui/

            It’s slow going at first, but it should pick up as more of the styles become repetitive.

            +7
          • Ben May 28, 6:25 am

            I would love a copy of the Square UI in html, when do you think you might be finished? How can I reward you for your efforts? Ben

            0
          • Chris Esplin May 28, 6:35 am

            The Elements page is done. I plan on finishing up the Navigation page this week. I’m not sure if it’s worth doing all of the components quite yet… it’s a ridiculous amount of work… but I might follow up with some components that I’ll need for my next prototype.

            If you end up using this, let me know what I need to fix by filing issues on GitHub. I’m terrified of opening the page in IE8. Any help on that front would be greatly appreciated.

            +6
          • Adrian May 28, 10:18 am

            Hi Chris Esplin, please take a look to our license page – http://designmodo.com/license/

            -21
          • Jason Aug 26, 9:49 am

            @Adrian

            If we learned anything from the Apple lawsuit, you can’t trademark a square. Yea, it’s blatantly obvious that he’s using your kit, but he’s not selling or offering your work for download. He’s posting the code that HE wrote to use your free designs.
            There would be no difference had he downloaded a free webfont and shared the CSS he used to embed.

            Besides, the dude did in one and a half months what you’ve been promising to do for over 5, and you want to play the licensing card? Bad form lads.

            Maybe instead of complaining you should just hire him.

            +2
          • Chris Esplin Aug 26, 9:21 pm

            Thanks for the support.

            I suspect that they’re not going to do any CSS/HTML for this UI kit. My code is enough for general prototyping, and anything fancier would end up being project-specific.

            I had a little email exchange with Adrian about my GitHub repo, and he wasn’t excited about it. He didn’t think that I was working within their license, which I disagree with… but the license doesn’t address any sort of open-source use directly… so it’s up to interpretation as far as I’m concerned.

            My goal was to make Square UI a lot more valuable for those who purchase it, not to promote piracy. The Photoshop assets are useless for true prototyping until they’ve been coded up.

            On the bright side, my latest prototype used only 20 lines of CSS in addition to bootstrap.css from my GitHub repo ( http://deltaepsilon.github.io/bootstrap-square-ui/ ). It looks great, and I haven’t spent any time fussing with margins, typography, etc.

            +1
  49. Damian Apr 10, 10:32 am

    I’d buy this right now if it was available in Fireworks PNG format. Are there any plans to do this?

    Reply
    +1
  50. Toni Soriano Apr 18, 2:19 pm

    I’m thinking code this layout in Html and CSS + Jquery.

    It’s hard work, so someone would be interested in doing it with me?

    Reply
    +4
  51. Leonardo Martins Apr 21, 6:18 pm

    Hi. I’m wondering if it’s straightforward to integrate Square UI with Flat UI from a programmer’s perspective. I have no experience with dealing with Adobe CS or the like. How can I do it easily?

    Thanks.

    Reply
    +2
    • Adrian Apr 21, 8:57 pm

      Hi, we will do HTML version soon. Flat UI HTML coming in 2 weeks, Square UI HTML in 1-2 months.

      Reply
      -34
      • Leonardo Martins Apr 21, 11:50 pm

        That’s good news. Especially if it comes Bootstrap-flavored. Maybe as a Bootstrap plugin? ;) Thanks.

        Reply
        +1
  52. t May 17, 5:19 pm

    what’s the relationship between Square UI and Flat UI?

    Reply
    +4
  53. Andrew May 22, 11:40 pm

    Can we get an update on the HTML/CSS for this? I read it would be 1-2 months about a month ago so figured a more specific update might be available.

    Reply
    +1
    • Adrian May 23, 12:18 am

      Is not available now, we will announce about release of HTML version.

      Reply
      -19
  54. lindon.junior Jun 1, 1:02 am

    Hello Adrian,

    I think you need to highlight this information, that the package don’t comes with HTML/CSS. I bought the product but I am very disappointed when I opened the package and I don’t saw the HTML/CSS files.

    Reply
    -2
  55. akurland Jun 4, 9:03 pm

    Adrian,
    Purchased the Square UI and after downloading the files, i realized it really doesn’t have all the elements/components that the FLAT UI pro package has. Was wondering if there is a plan to add more, at least so it has the same ones as the other package. If so, when can we expect them?

    Reply
    0
    • Adrian Jun 4, 9:26 pm

      Square UI has much more elements than Flat UI (absolutely two different products). Yes, we periodically update our packs with more elements, I can’t give now details about expecting updates of Square UI.

      Reply
      -19
  56. William S. Jun 11, 4:29 pm

    Can you provide us with a better “estimate” of the delivery date of the HTML/CSS version of this UI Kit? Thanks.

    Reply
    +4
    • Adrian Jun 11, 10:24 pm

      Sorry please, but we are very busy now (new updates and new products coming). I hope, we will do it this fall.

      Reply
      -39
  57. Rocket Jul 3, 11:17 pm

    I think that about 6 months ago you said the HTML/CSS version will come after 2 months!!! But IT NEVER CAME. I’m very sad. You see, I like your products BUT you suck!!1

    Reply
    +9
  58. Jason Jul 27, 1:06 pm

    Love this! Thanks for putting this up for the sale! Its fantastic

    Reply
    -1
  59. Jay Jul 27, 1:08 pm

    Keep up the fantastic work

    Reply
    0
  60. hoby Jul 30, 10:03 am

    I like the design.
    Purpose of the black bars, but never so strong that I feel are less.
    But is usually very good.

    Reply
    0
  61. UnknownInk Jul 30, 3:59 pm

    Hidden due to low comment rating. Click here to see.

    Reply
    -6
  62. Kiran Patel Jul 31, 12:59 am

    When are you planning to release HTML/CSS version of Square UI?

    Reply
    +11
  63. sarvesh Sep 7, 12:49 am

    When is the HTML/CSS version out?

    Reply
    +2
  64. Sebastien Sep 9, 5:44 am

    I am looking to use a HTML/CSS/JQUERY version of this UI. When will it be available and if I purchase the personal license now will I get the coded version free on top as part of the package or will I be paying the difference ?

    Reply
    +4
  65. Jorge Correa Sep 10, 4:22 pm

    Great job!

    I hope you finish the HTML/CSS version as soon as posible for start my personal admin panel.

    Thanks in advance,

    Reply
    +4
  66. Nick Nov 1, 6:15 pm

    Can you provide us with a better “estimate” of the delivery date of the HTML/CSS version of this UI Kit? Thanks.

    Reply
    +2
    • Adrian Nov 1, 10:59 pm

      Hi Nick, sorry, but not soon, because we’re works for new product, called Startup Framework.

      Reply
      -6
  67. Joeri Nov 28, 4:39 pm

    I am building native desktop applications. I’d like to use these component design styles for it. So the only thing I have to do, is buy the License (PSD?) ?

    (May answer in mail too)

    Reply
    +1
  68. mmblais Mar 12, 10:09 pm

    Any updates on HTML Framework Progress?

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters