The Bricks – User Interface Framework

The Bricks is a Free set of User Interface components designed to facilitate the creation of design or prototype for the future website. This package will help you save your time in the process of development of components, and will become an excellent basis for creating website from design to code. Don’t waste your time drawing numerous shapes, when they are already included in this package. Just drag the component, change its style and use it. It is simple, fast and beautiful.

Each component of The Bricks pack can be configured. When opening the folder containing the component, you can see different variations of visual execution of this component, you can configure corner radius, choose the style you like or provide hover and click states for this component. The programmer will say thank you.

For example, let’s consider the ordinary Edit Box contained in The Bricks. It may seem the simplest thing in UI design, but it is not. Edit Box is a symphony which needs to be thought over, Error State, Success State, Hover State, Click State need to be drawn. And what if the customer has decided to replace all Edit Boxes in the end of the project, and make them not square, but with rounded edges? This problem is solved by The Bricks. Each Edit Box here is a component having many parameters.

The folders with Content are highlighted in blue. Here are all the texts used in the component. Therefore, if you want to change Title or Description, you can find them in the “. Content” section.

Make your own styles and variations of the components parameters and configurations. All this will help you save your time and use these components in further designs.

The Bricks is the core. In the nearest future, we will issue amazing addons to it, containing additional components. Addons are divided into categories: Forms, Elements, E-commerce, and Words.

Video Presentation

The Bricks – User Interface Framework

The Bricks - User Interface Framework

Our plans

In the nearest future, we will issue 4 addons with hundreds of new components for The Bricks. We also plan to update the core of The Bricks and add new components to it. In order for the package to live and be updated, we need your help. We will be happy, if you give your Feedback and tell what components the core of The Bricks lacks of. You can also make your own components or add settings to the existing ones and send them to us. If we like them, we will include your components in the standard assembly of The Bricks.

At the moment, The Bricks is represented by PSD files for designers, but we plan to markup and style The Bricks & Addons and create a fully-fledged framework for developers.

You will be able to get all news, if you subscribe to the newsletter of DesignModo. And now feel free to download The Bricks, explore it, configure, and make the web more beautiful!

The Bricks – UI Framework on the Behance Network

Download Free User Interface

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

The Bricks – Bundle Pack Addons

The Bricks - Bundle Pack Addons

If you would like to be kept up to date with our posts, you can follow us on Twitter, Facebook, Google+, or even by subscribing to our RSS Feed.

Newsletter

58 Comments
  1. Martin Aug 6, 4:41 pm

    You are crazy guys! Really awesome pack, and it’s freeee!!! waw :D

    Reply
    +6
  2. Leo V. Aug 6, 4:42 pm

    Interesting concept, awesome presentation for free item. Thanks for video.

    Reply
    +4
  3. Nadav Aug 6, 4:54 pm

    WOW!!! That’s freaking amazing!

    Reply
    +2
  4. Mehmet Tahta Aug 6, 7:12 pm

    This framework is AMAZING! Thank you!

    Reply
    +3
  5. Mely Aug 6, 7:23 pm

    Gracias ! muy buen aporte, genial su página!

    Reply
    +2
  6. Diego Menendez Aug 6, 7:44 pm

    Amazing, its just amazing!! :D

    Reply
    +3
  7. Valeriu Aug 6, 8:15 pm

    Awesome freebie guys!

    Reply
    +2
  8. IPDesign Aug 6, 8:16 pm

    It’s Amazing pack! Thanks!

    Reply
    -1
  9. Jinson Abraham Aug 6, 9:52 pm

    Excellent stuff.

    This is the ultimate psd framework with thousands of possible layouts and designs.
    Stuff deserves a dedicated website.

    Cheers

    Reply
    +3
  10. zoel Aug 7, 1:25 am

    Awesome!…Interesting concept, thanx!

    Reply
    -1
  11. lothre1 Aug 7, 5:16 am

    Awesome guys! Thank you from Portugal :D

    Reply
    +2
  12. Binit Aug 7, 8:37 am

    This is just awesome…Thanks a lot!!!

    Reply
    +3
  13. DonQuijote Aug 7, 5:41 pm

    Sorry if this is mentioned somewhere but under which license is that UI published?

    Reply
    0
  14. Kim Aug 14, 5:51 pm

    How about a download option for those of us not using Twitter?

    Reply
    0
    • Adrian Aug 14, 6:04 pm

      Now only twitter, in the future we will open for free download, without your little thanks :)

      Reply
      0
  15. Sher Oct 18, 7:06 pm

    Ну Вы ваще красавчики! Такое прям не каждый день увидишь бесплатно! %)

    Reply
    0
  16. Mari Nov 15, 6:24 pm

    This software only runs on MACOX? no Windows at all?

    Reply
    0
    • Adrian Nov 16, 12:14 am

      here is PSD format files, so you can open in Photoshop on pc, macos, linux etc…

      Reply
      0
  17. ric Nov 22, 10:26 pm

    Hi, why is the .psd so slow to use, im on a top spec brand new imac full cs6 suite but when i open bricks.psd and try select any small group item to drag, it takes ages, its totally unusable… please can anyone help me here?
    ive swopped type setting in preferences as prompted, but no speed increase.

    What am i doing wrong here please??

    Reply
    0
    • Adrian Nov 22, 10:39 pm

      So, i think is a software or OS problem. PSD’s work fine.

      Reply
      0
      • Blair Dec 4, 1:18 am

        Hi I have exactly the same problem as Ric. Performance is extremely sluggish on my i7 12GB PC using CS6 and only moderately better on my Mac using CS5. Have you had no other reports of performance issues?

        I’d like to buy the add ons pack, but the performance as it stands would make it unusable. Hopefully you might have some tips?

        Reply
        0
        • Adrian Dec 4, 11:48 am

          I don’t try to report this problem on the adobe support forum, because how i said, we no have any problems with our PSD files.

          Reply
          +1
        • Donald Jul 16, 3:35 pm

          They’re pretty big files, but I can have 3 of them open and one more that I’m duplicating elements to with no issues. Like you I have an i7 with plenty of ram. I forget the specific model, but it’s a mid grade i7. CPU usage peaks around 15 or 20%. If you don’t have a graphics card you can buy one and enable Photoshop to use it. Either that or just cut up one PSD into a smaller pieces if you haven’t done so already.

          Reply
          0
    • Dmitri Dec 19, 5:52 pm

      I too have the same issue. What helps is to re-save the PSD into TIFF format with layers.
      That preserve most of the layers and makes the file jiffy fast to work with.

      Reply
      0
  18. Phoenix Nov 24, 11:45 am

    This is just PSD files. Where’s the CSS that goes with it. And perhaps a demo HTML page to showcase the elements?

    Just a PSD file…there’s thousands of this stuff on Dribbble. Please please share html and css too!

    Reply
    0
    • Adrian Nov 24, 12:20 pm

      All our packs are PSD files. We did not say nothing about html/css items.

      Reply
      +5
  19. Kyle Nov 26, 12:44 am

    Just bought the Bricks Bundle, awesome deal! In your opinion, what would be the best method to install all the necessary fonts for this? Is there a set you have installed, or is it more a smattering from everywhere?

    Reply
    +1
    • Adrian Nov 26, 12:36 pm

      We not provide fonts, we do no have rights to share.

      Reply
      -3
      • John Nov 29, 1:36 pm

        Just downloaded the Bricks Bundle and I agree it is a fantastic set. Thanks.

        I understand you cannot provide the fonts, but it would be good to actually list the fonts used and where to purchase them from.

        I haven’t been through every layer, but seems to be Proxima Nova family. Can you please advise how many weights are used and which ones, so that I can purchase the necessary ones.

        Is there a set that covers all the fonts used in this template. Thanks.

        Reply
        +1
  20. Robert Nov 29, 11:38 am

    Which version of Photoshop are these for?
    Are you using anything specific to CS6?

    I’m still using CS4 Extended, and PS throws popups at me.

    “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.”

    Similar to this thread at the Adobe forums : http://forums.adobe.com/thread/980549

    Reply
    +1
  21. j-j Dec 4, 9:28 pm

    Thx a lot! Super clean graphics. But the title is misleading as “framework” implies “html+css” or “html+css+js” framework like tweeter bootstrap eg.
    Anyways, thx for the source.

    Reply
    +2
  22. Roman Dec 5, 11:38 pm

    Great graphics kit :)

    Reply
    0
  23. Transmit Studio Dec 6, 6:13 pm

    Great resource but unusable with CS 6.0. Fortunately I have CS 5.5 as well and it runs fine there. Have the developers of this resource tried to open the PSDs in CS 6.0 (specifically on a Mac)? First error I got was for an incompatible text engine setting. After changing that and relaunching, the file is so sluggish to respond it’s, well, unusable.

    Reply
    +1
    • Adrian Dec 6, 9:33 pm

      Don’t generalize, nobody of our client not report this type of problem, so please check your soft, available fonts and OS.

      Reply
      -1
      • chrixian Dec 16, 11:07 pm

        I’ve having the exact same issue as the guy above.. In CS6 for MacOSX when I initially opened the file it said I needed to change my text engine from Chinese to Middle Eastern so I did and now the just moving the mouse around causes the rainbow cursor to pop up and spin … I’ll do some more investigating and let you know if I find anything…

        Reply
        +3
      • chrixian Dec 16, 11:39 pm

        It seems to come down to clearing photoshops font cache after changing text engines and making sure there aren’t any fonts installed that don’t play well with right to left text engines by running a script Adobe provides … solutions #6 and #5 will resolve the problem http://helpx.adobe.com/photoshop/kb/troubleshoot-fonts-photoshop-cs5.html

        If you have any significant number of fonts from “free font” websites you more than likely have fonts that aren’t able to handle RTL properly.

        So an easy fix but I have no idea why it wanted me to change text engines in the first place.

        Reply
        0
    • oniiru Mar 1, 9:20 pm

      I have the same issue BTW, so it’s not unique to him…

      Reply
      +1
  24. Duncan Dec 21, 5:03 pm

    Entered my email waited 10 mins nothing

    waited a further 10 mins nothing

    waiting 40 mins nothing ??

    Is this just to collect emails now ?? :(

    Reply
    0
  25. Nastya Feb 1, 1:13 am

    Great work, thank you. But i wonder to know if i need include a link to your site if i use some elements from this UI in commercial project? Sorry but i’m not very good in reading license.
    Thanks a lot

    Reply
    0
    • Adrian Feb 1, 1:47 am

      For this you need developers license, and you don’t need to include link to us.

      Reply
      -1
  26. Scott Feb 16, 5:59 am

    Is there a CSS version of this?

    Reply
    0
  27. simon q Mar 6, 2:17 pm

    “but we plan to markup and style The Bricks & Addons and create a fully-fledged framework for developers.”

    Question: What time frame do you estimate this will be implemented?

    Thanks

    p.s. really love this UI Pack. If it was in HTML and CSS the value of it would go up massively.

    Reply
    +2
    • Adrian Mar 6, 3:01 pm

      I don’t know. We hard working now for square ui and flat ui.

      Reply
      +1
  28. Bootstraptor May 2, 12:57 pm

    Thank you! A used it, it’s great for faster start with my Bootstrap project

    Reply
    +1
  29. Voky May 25, 10:46 am

    Thanks a lot for the fantastic work. I can’t believe it’s free.
    Vladimir Kudinov, you are very talented man!

    Reply
    0
  30. Acts7 Feb 4, 10:13 pm

    So I’m curious… will we need to purchase a developers license to use the css and html once that is released?
    I’m a little confused why the entire bricks bundle is $89 for something we can only “play with” but cannot use any elements in a final project.
    Could you please comment as to how that will save anyone time?
    I understand that you worked hard on this. But why offer people a “for your own entertainment” version that they have to pay for?

    Reply
    0
    • Adrian Feb 4, 10:20 pm

      HTML version will not be released. This product will be available only in PSD format.

      You can use this product for final products too.

      Reply
      0
      • Acts7 Feb 4, 10:52 pm

        Sorry I’m very confused. I thought your license states it cannot be used for a commercial project and only for educational purposes? Is that another one of your products?
        I’m curious as to the ability to use something like this for a potential / suggested layout. Then I build out the front-end to reasonably match.
        Am I misreading what the developer license is for?
        Is the developer license instead for someone who wants to package the product in a bundle to sell to someone else?
        Apologies as I’m looking for clarifcation.
        I’d gladly contribute to the project if its going to be usable.

        Reply
        0

Leave a Reply

*
* Minimum length: 20 characters