We have chosen a nice color scheme that you can apply using our Styles & Swatches.
Square UI
Buy now
Square UI is a set of beautiful components featuring the flat design trend
More convenient way to prototyping Square UI is our latest PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.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.
-
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.
-
Fast prototyping
You will be able to quickly develop high-quality prototypes in full-color. Your clients will appreciate prototypes with beautiful components.
-
Save your time
Do not waste time on the implemen- tation of the same components. Use your time to develop new ideas and projects.
-
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.
-
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.
-
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.
Quick work with elements
Styles & Swatches
Easy to find component
Bright & Dark Background
Ideal for start-ups
All components are available in several PSD's, making it simple for you to find any of the pack’s components and add pieces to your layout with a simple drag and drop. Each component is placed in its own group, and named appropriately.
Correct names of layers and separate groups for each component will help you easily find each component.
The PSD file with Simple Elements was made featuring bright and dark backgrounds.
The simple style of components and the advanced color scheme will allow you to create startup projects within minutes using Square UI. This pack is great for beginner designers and developers as well – even those without a lot of Photoshop knowledge. If you ask other designers they will agree; this pack is very easy to use
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.
hector Feb 20, 3:41 pm
Cool presentation! Very nice UI Kit.
Drag & Drop interactive whiteboard is awesome! :D
David Feb 20, 3:59 pm
Love it! Great work, guys.
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!!
Berny Feb 20, 4:05 pm
Just purchased, thanks for very clear and clean PSD files and for awesome Flat Design!
Prakash May 22, 9:02 pm
Berny, did you get HTML pages with square UI kit
Chris Feb 20, 4:07 pm
Bookmarked! I will use for my new app.
And yeah, cool presentation!
Nazim Feb 20, 4:14 pm
Really nice work guys, every component looks awesome !!
Harish Feb 20, 6:02 pm
Wow not only is the UI kit awesome, the way you presenting it is really neat.
themecurve Feb 20, 9:22 pm
awesome stuff and amazing presentation, really its very much impressive:)
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.
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.
Mohamad Apr 7, 11:32 pm
Same here! A Bootstrap version would be awesome.
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)
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.
Adrian Feb 27, 10:39 am
Hi Daniel. Yes you can.
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?
Adrian Mar 19, 11:19 am
Hi, to be more clear check this table – http://designmodo.com/license/
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.
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.
Joao Feb 21, 12:25 am
Question: Does this include the sales type pages?
Adrian Feb 21, 12:33 am
Yes, this pack includes startup samples (sales type pages), in PSD format.
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.
JoshuaChr Feb 21, 12:45 am
Very nice layout kit. Also curious what you’re using for the whiteboard feature?
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.
bbcversus Feb 21, 1:30 am
Amazing presentation and product! Fantastic work!
Mick Feb 21, 1:58 am
Nice!
Love the Metro look of this. Flat design rocks!
Simon H. Feb 21, 3:09 am
Looks great!! Thank you guys!
This time no discount code for existing customers?
Best Regards & Continue the great work!
Simon
Adrian Feb 21, 11:48 am
This time all our customers get 10% from purchasing products in their account. They can redeem those money by purchasing new products.
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.
Ahmad Awais Feb 21, 4:17 am
Awesomeness has no limits.
Tim Feb 21, 4:30 am
“…featuring the flat design trend”
Just take that bit out and you’re good.
Davide De Maestri Feb 21, 12:05 pm
Hidden due to low comment rating. Click here to see.
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?
Adrian Feb 21, 12:30 pm
We discussed this option with our designers, and decided do not make for Fireworks. Sorry.
Umair Ulhaque Feb 21, 12:29 pm
Sleek and simple as ideal for HTML5 development
Will Feb 21, 2:26 pm
Good work. Thanks for amazing UI )
Arif Riyanto Feb 21, 3:08 pm
Awesome! But, it’s too much..
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.
chris slowik Feb 21, 4:10 pm
The best icon set for web is Font Awesome imo. Free to use and a great set of icons/features.
Adrian Feb 21, 7:35 pm
Here are icons http://designmodo.com/linecons-free/ – free
Muhammad Faisal Feb 21, 4:59 pm
Great work, best for app design.
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
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)
Adrian Feb 22, 11:17 am
Yes, you can, please purchase developers license, and you can mention us in your documentation file.
thank you!
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.”
Adrian Mar 29, 12:39 pm
Check requirements: Minimum Adobe CS Version: CS 5.5
virgilio Feb 24, 9:37 pm
Hola
If i buy the personal license may I update to the Developers?
Adrian Feb 24, 9:50 pm
Yes, in future you will can upgrade license.
virgilio Feb 24, 9:54 pm
but with the discount of the personal license?
Adrian Feb 25, 12:09 am
yes, you will pay only difference.
Harsh Feb 25, 10:42 am
What is the difference between the Personal License and the Developers License?
Adrian Feb 25, 10:52 am
personal license – you can use it in one of you personal project
developers license – you can use it in many projects, for example for clients projects
Take a look to table – http://designmodo.com/license/
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
Adrian Feb 25, 10:53 am
These icons are free here – http://designmodo.com/linecons-free/
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
Adrian Mar 29, 12:41 pm
Tale a look to license page – http://designmodo.com/license/
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
Adrian Feb 27, 10:40 am
You can use our elements in wp theme, remember that here are PSD files.
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
Adrian Feb 28, 9:24 pm
yes you can, please check license page – http://designmodo.com/license/
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.
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.
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?
Adrian Feb 28, 10:06 pm
yes you can, please check license page – http://designmodo.com/license/
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?
pepperstreet Mar 1, 10:30 pm
It is a layered PSD file!
J. Nunn Mar 26, 10:41 pm
So only PSD but no CSS or Javascript to make everything work?
zhnupy Mar 5, 11:16 pm
What is the difference between the free version and the paid version ?
Adrian Mar 5, 11:26 pm
paid version has more elements than freeversion, much more.
ozdemirveysel Mar 6, 10:21 am
Cool. Love it and bookmarked ;)
Dario Mar 7, 4:10 pm
Hi, it is posible to buy the paid version in html/css/jquery format??
Adrian Mar 7, 8:29 pm
Yes, coming in a few weeks.
Dario Mar 8, 7:24 pm
Ok, i’ll wait then, Thanks!
sarvesh Apr 11, 1:31 am
Do you have a time frame as to when it would be available in html/css/jquery
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..
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.
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. :)
Roy Jacosb Mar 16, 2:19 am
Really great, but i’ll wait for the html/css/jquery version!
Nice UI
morgan_jackson Mar 18, 10:29 am
Hi Adrian,
Awesome work on the kit! any update on the html/css/jquery version?
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.
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.
morgan_jackson Mar 19, 6:20 am
Thanks for the update Truong!
andrei Mar 20, 8:13 pm
salut :)
where i can find the cartoon you used in this preview UI ?
Adrian Mar 20, 8:27 pm
We used works of the wonderful illustrator Anna Kulakovskaja http://www.behance.net/kulakovskaja
Rodrigo Franco Mar 20, 9:17 pm
Any updates about the HTML/CSS for this kit?
Adrian Mar 20, 9:26 pm
no, we will announce.
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!
Adrian Mar 23, 11:21 pm
Thank you for suggestions and useful feedback!
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?
Frank Mar 25, 9:15 pm
Also very interested in this, but would only get it if there was an html/css version.
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?
Bootstrap 3.0
https://github.com/twitter/bootstrap/pull/6342
abitdodgy Apr 8, 4:32 pm
Did you decide to take this on?
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.
Alex Apr 14, 11:28 pm
I will gladly help with this
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.
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.
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?
Adrian Apr 10, 10:51 am
No, our UI Kits will not be released for Fireworks.
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?
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.
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.
Leonardo Martins Apr 21, 11:50 pm
That’s good news. Especially if it comes Bootstrap-flavored. Maybe as a Bootstrap plugin? ;) Thanks.
t May 17, 5:19 pm
what’s the relationship between Square UI and Flat UI?
Adrian May 17, 7:20 pm
Both are Flat design, but different design and products.
adrianorcampos May 21, 2:53 am
Hi Adrian,
Any news about the bootstrap version??
Tks!
Adrian May 21, 9:48 am
Any news, sorry, working hard on updated version of Flat UI.
adrianorcampos May 21, 4:04 pm
Nice to know!!!
By the way, is the one with bootstrap 3???
Adrian May 21, 6:01 pm
In any case, we will update Kit for Bootstrap 3.0. Clients will receive for free. Now bootstrap-based is Flat UI.
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.
Adrian May 23, 12:18 am
Is not available now, we will announce about release of HTML version.