The user interface (in English. User interface, UI) is short for YI - this is the environment for user interaction with a computer. These are buttons, menus, radio buttons, checkboxes and much more. Now it is not clear, below I will explain all the abstruse words. If a person uses mobile phone, then the applications or browser is the user interface.
Basic user interface elements
Now I will explain the words that I wrote above. Everything should fall into place. I'm talking about the user interface for a reason. This information is needed so that you do not forget to draw all these elements in layouts. If the layout designer does not find any of this in the layout, he will do it the way he thinks it is right.
Texts (titles)
When a person is on the web, the first thing they encounter is texts and headlines. Therefore, it is important for us as designers to work out all the headings at once in one layout. Headings are usually called H1, H2 ... Hn, because that's what they are called in html tags. 
In this case, the first heading is H1, then H2, and so on. The first is the most significant title. On a landing page, this might be on the first screen, further down. In layouts, you need to show all the headings so that the layout designer understands where to put which tag.
Links
Here is the text, title and highlighted link. Links have 4 states: normal, on hover (can change color, underline or something else, effect), clicked and visited state (clicked and then returned to the site from which they left).
Buttons
They look like physical buttons, or at least they are conceived like the buttons on a tape recorder. Therefore, they have states: hover and click. All this needs to be worked out.
Radiobutton and checkboxes
On the left is a radio button (in Russian, a radio button, but I will call it a radio button because it is customary for designers), on the right is a checkbox. In the radio button, you can choose only 1 option, we have selected a raccoon. In the checkbox, the possibility of multiple selection, we have selected a seal and a raccoon.
Forms
Forms need to be worked out in several forms at once. Inactive form (top), active (second from top), form with an error (third from top), form successfully completed (fourth from top). Sometimes, when there is an error in the form, it is better to make a pop-up callout on the right, where you can clearly indicate the error. For example, if the visitor entered letters in the form for entering a phone number, make the inscription “only numbers can be entered in this field” on the callout. This will greatly help people fill out the form and increase its conversion.
Popup
Popups or pop-up windows of authorization (login) to the site should always be drawn. Not in this picture, but in general it is customary to make a cross on the right to exit the form.
Pagination
Pagination - page navigation that allows you to quickly switch between a large number of products, sheets or anything. Now such a form of pagination as a news feed in VK is common, when you scroll to the bottom and more news is loaded. The same can be done in the online store. In this case, you still need to provide a "show more products" button. If there are a lot of them already loaded and show some kind of preloader, then there is an element that shows the page loading.
breadcrumbs
Often found in the online store. For example, an online store is written on the left, men's things are written on the right, sports outerwear is still to the right, then jackets. It allows you to go up when you click on the desired level up. It is also called the navigation chain.
Preloader
A thing that shows that something is loading. They are very different. You can google "preloader gifs" and see the variety and use the ones you like. There is a special preload generator, where you can choose how it will look, what color, in what format to save it, and so on. I advise you to use standard things, such as circles and stripes, for special projects you can use something unusual, or you can draw it yourself in Photoshop and make a GIF animation. Do not overdo it, this is of course an important element, but you should not spend a lot of time on it.
tables
Often designers forget to draw a table. For example, if you are building an online store production equipment, then in the description and in the product card appear comparative characteristics, weights and something else. It is convenient to use tables when the lines alternate in color, this is very well perceived by the viewer. In this case, a table with check boxes is shown, this is not necessary. Don't forget tables.
Menu
The menu is the navigation throughout the site. In this case, I showed that there is a pop-up menu when you hover over the cursor. This needs to be drawn. Notice how I showed hover and interactivity. Just downloaded the png cursor and put it in place. If you have a large layout, put a lot of cursors. For example, to show how the menu works, how the button and link look like on hover. At the same time, do not forget about the usual state. Thus, in a static layout, you can easily show how user interface elements behave in an interactive state.
Remember that cursors are different: for PC and for Mac. 
Easy to google "cursor png". If you are showing the site on a Mac (using a mock-up with a MacBook), then you need to use the right cursor, if on a PC (for example, a mock-up with inernet explorer), then the left one.
Here are the basic things about elements user interface. This information is to learn all the terms that are used in the design of sites. And not to forget to draw things like pop-up menus, button interactivity and so on. Let your sites after layout look the same as you drew them. Amen 🙂
Not a single modern site is bypassed. However, there is a way that will help to significantly save time when layout and design, including the UI of the site - these are ready-made UI element libraries. Today there are so many of them that it was possible to collect only free sets in one rather large post.
What are the advantages of using ready-made UI elements of a site in a project?
- All the tedious work of making out small elements is already done for you.
- Shape Animation, buttons and other elements have already been implemented and configured in accordance with modern web design trends.
- Each set HTML UI components is, as a rule, not the first release. All JS is debugged and works stably. At the same time, the most usable solutions of one or another element from the set were experimentally identified.
Where can you use HTML UI element sets?
First of all - this prototypes, since there is no need for any special uniqueness in the design. When developing a prototype, the libraries are used with little or no cosmetic changes. The main thing is that it works and reflects the essence of the project.Although UI has a pre-designed design, it can be used in almost any project. All elements are adjusted to modern tendencies web design, and with a high probability it will turn out that at least one set from this collection will be in exactly the same style as your project.
So. For your attention 20 free kits HTML UI elements for your site. Do not forget to subscribe to the social. networks.
element
Pretty nice HTML toolkit for website. Contains almost all user interface elements, including dialog boxes , forms, custom web design grids, notifications, menus, and more. All elements and their animation are perceived easily and do not load the page. Based on Vue.js 2.0
Design Blocks
170+ HTML blocks to create a quality prototype. This is a kind of web page builder, from which you can blind anything. The set includes a complete set of all elements brought together in one style.
Material Design for Bootstrap
Free for css framework Bootstrap 3 in design Google Material Design. Unfortunately, it does not have the dynamics of the original Google Material Design on Angular, but it tries to imitate it.
Flat UI
Sufficiently high quality UI set in flat style, which is based on responsive CSS Bootstrap 3 framework. A huge plus is the availability of PSD sources.
Pure UI Kit
If you need grids, forms, buttons, tables, or menus, then this UI framework might be for you. It is very lightweight. Weight is only 3.8KB.
Flat design UI - HTML5 + CSS3
Low quality minimum set UI elements in HTML5 + CSS3. In addition, it has an original design.
Metro UI CSS
Metro interfaces are a thing of the past, but even today this style attracts a huge audience. I confess I am one of them. Even today there are tasks where METRO UI may be needed. To your attention quite large and high quality UI Framework on HTML in METRO style. Almost all elements in a peculiar design are available for free: these are tiled screens, forms, checkboxes, radio buttons, buttons, menus, paginations and a huge amount of other interesting things. In total, the framework contains 70+ UI components. And this is the work of a Ukrainian developer.
Propeller
Free CSS framework in the style of Material Design on Bootstrap. It includes about 25 components, which, oddly enough, have a fairly strong resemblance to the original dynamics of Material Design on Angular. There is also a premium version.
Material Design Lite
One of the most developed Material Design UI frameworks on HTML. In his arsenal is huge amount components. It's a whole combine. I think this is one of the best implementations Material Design language to HTML.
Semantic UI
Pleasant, light and tidy framework for creating a user interface and prototyping. Contains almost everything you need. For example, buttons, tabs, typography, switches, etc. It is actively translated into Russian. It was built from scratch and has nothing to do with Bootstrap, unlike most of its counterparts in this article.
In principle, for the pros, there is nothing easier than sketching a sketchy layout of the site by hand. The process gets a bit more complicated when it comes to designing the user interface elements (and their details). Here you can not do without imagination, experience and inspiration.
If you don’t know what to start from (or you already have an idea, but want to save time by using templates), services like UI Patterns with options for classic implementations or ready-made special sets for download can come to the rescue. The latter are delivered, as a rule, in PSD format, so it will not be difficult for anyone who knows how to work in Photoshop to remake them in their own way.
Green WebUI Kit
Green WebUI Kit interface set - includes almost all the elements you may need - Top Menu navigation, buttons (OK, Cancel, Buy Now, Download Now), sale sticker, login form, slider blank and subscription elements - RSS, E-mail and more.
All elements are made qualitatively, the design is modern. Each element has its own layer (PSD file), so working with them is very convenient. In principle, from this you can quickly sketch out the design of such a blog - a slider, there are already subscriptions. If I had to compare, then this one would suit the Chinese more.
Yellow User Interface Elements
Yellow User Interface Elements - This set contains 11 yellow user interface elements including buttons (Download, Submit, Buy Now, search), sections (Featured and date), scrollbars and progress. All layers in PSD file conveniently grouped, so you can easily make adjustments to a particular UI element. The color can just as easily be changed to the one you need (in the Green WebUI set, of course, too).
Unfortunately, Yellow UI Elements includes fewer elements than Green WebUI Kit, so I do not exclude that you will have to borrow some of the elements from other sets or draw them yourself.
Soft UI Kit
Nice light set of interface elements for your web developments. It can be used both when creating a website and for a web application. Among all the PSD sources, there are the most common elements for the web - + search, drop-down list, checkboxes and radioboxes, text tips, etc., there are even stars for voting. For someone who knows how to work in Photoshop, it will not be difficult at all to adjust this PSD to fit your needs. In general, the set is very good in terms of quantity and quality.
Transparent Glass UI
As you have already noticed from the name of the set (Transparent Glass UI) and the preview, its distinguishing feature is the transparency of elements. This, firstly, looks quite impressive and will fit well into modern design, and secondly, it will suit almost any background color. The PSD set contains all typical web interface elements - drop-down lists, switches, buttons, forms, sliders and input fields.
I think that from the presented sets of UI interface elements for Photoshop you will find something for yourself. The first and last sets are especially good. I wish you successful experiments and a beautiful interface!
P.S. If you need to find a flexible system for an online store, Magento Commerce can pleasantly surprise you with its capabilities, functionality, and project extensibility.
The times when designers of all stripes flaunted in front of each other, catchy, I would even say too pretentious design projects, using all sorts of graphic frills, are gone forever, the time has come for new design solutions that allow users to focus on the most important components of a web project than its colorful wrapper.
The use of flat interface elements, quietly but surely, has spilled over into the scene with Windows 8 and its rather minimalistic "Metro" style. Flat design, with its minimalistic approach, focuses primarily on usability on various types user devices, both on desktop PCs and smartphones with touch control. Distinctive feature flat designs are clean lines, two-dimensional objects, bright colors, well-defined links and sans-serif text. In order not to distract the attention of users from important elements, all decorative tinsel is completely absent.
If you follow the latest trends in web design and are already a fan of flat design solutions, here are 10 completely free flat design UI kits for your new projects. All sets contain a wide variety of components that are ideal for any web designer: buttons, input elements, menus, checkboxes and radio buttons, tags, menus, progress bars and sliders, as well as navigation elements and much more.
Give your design a fresh new look with these amazing UI kits.
1 Featherweight UI
An attractive set of free interface elements from Sarah Hunt, well-designed based on vector and divided into layers, carefully packaged in a file, all layers are labeled with intuitive names. Text and colors are easily editable. The design used a font that is free to use from .
With this set of UI elements, you can spend much less time working and focus on creativity. The kit is completely free to use for personal or commercial projects. You can download the kit and get started right away.
2. Modern Touch UI Kit
Basic free version of a great set of user interface elements in PSD format, with which you can create a functional site with impeccable design. The balance of typography, the overall weight and positioning of elements, adjusted indents, margins and color palette. General style with a characteristic emphasis on content. Complete HTML version of this wonderful kit is available to registered users with a subscription to PixelKit.
3.Vertical Infinity
4. Square UI Free
Another wonderful and packaged set from designmodo, is freely available, except for the formal subscription to the news, to obtain a download link. I am sure that this small obstacle will not stop anyone if you need a quality product. And the kit is really high quality and contains a variety of well-drawn web components for website design. Downloading free version and if you liked the set, you can buy the extended premium version of the set if you wish. Although the free version has plenty of useful designer goodies to create a full-fledged site.
5. Flat Design UI Components
Lightweight (407 Kb) set of user interface components made in a flat style with a predominance of bluish tones in the overall color palette. All the elements in this set are available in one well-organized PSD file and can be easily edited. As you can see, there is no riot of colors, everything is strict and aimed solely at the convenience of perceiving the content.
6. Metro Tiles UI Kit
A free, fairly rich and beautifully rendered set of UI components from PixelKit. The kit includes many user interface elements, layered and combined in a PSD file, its design is ideal for developing web projects and mobile applications. At a glance at the design of the components, the style is guessed GUI Wihdows 8, precise edges of elements, soft blue-blue tones and a perfectly readable font.
7. Flat Rounded Square UI Kit
An impressive package of web interface elements, presented for free access by craftsmen from, undoubtedly deserves your attention. The authors in their work deviated a little from the line of one hundred percent flat design, adding individual components a bit of volume, with the help of slightly rounded corners, and a slight shadow to the bottom borders of the elements. Such a design decision is justified in a transitional period of changing priorities in web design. All the elements necessary for the productive work of site builders, in complete set. It remains to download, unpack the archive and start creating, if not eternal, but at least beautiful and kind)))
8. Flat Design UI Pack
A real heavyweight (125 MB!) among similar PSD UI kits. Detailed to the smallest detail, the flat design of the set components impresses and sets you up for creative work. This UI-kit can be used for free in both private and commercial projects, if only for joy, but for the good of the cause.
10. Bootflat 1.0.1
At the end of the review, I offer for your consideration, a kind of collection of HTML, CSS, JS and components for the rapid development of website interfaces - "Bootflat", built on the well-known Twitter Bootstrap 3 platform. An intuitive tool that includes lightweight plugins and components, but with rich Bootstrap features. HTML5 and CSS3 support, great color scheme and styling based on improved Bootstrap style 3. Bootflat is fully responsive, which means there will be no problems with displaying elements on the screens of all types of user devices. All platform components are easily extended and edited. Bootflat is an open source project source code, so feel free to use all its features without limits and create your own style.
Flat design is a special trend, which is the future and it is important not to miss the moment, to jump on the rushing train in time, as each new trend has its own life cycle and not a single, even the most popular design trend can be on the crest of a wave forever. At present, for many reasons, it is worth using this interesting design style when developing new projects, not rushing into all the hard pursuit of fashion, but doing everything with feeling, sense and arrangement. It is safe to say that such trending websites will be intuitive, easy to understand and create a positive impression, and no less positive reviews from the community of Internet users.