Not a single modern site is bypassed. However, there is a way that will help to significantly save time during 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?

1. All the tedious work of making out small elements is already done for you.
2. Shape Animation, buttons and other elements have already been implemented and configured in accordance with modern web design trends.
3. 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.

Despite the fact that UI has a pre-designed design, it can be used in almost any project. All elements are adjusted to modern web design trends and it will most likely turn out that at least one set from this collection will be exactly in the same style as your project.

So. For your attention 20 free sets of 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 Framework Bootstrap 3. 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. 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. It has a huge number of components in its arsenal. It's a whole combine. I think this is one of the best implementations of the Material Design language in 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.

Interface design is a highly demanded job these days. After all, the loyalty of your audience now largely depends on the interface, whether it be a mobile program, a web application or a website. In principle, it is quite difficult to come up with something super original, but from time to time new trends enter the market, for example, and developers have to make adjustments to their projects.

Unlike past stylish colors, this time most of the materials have a flat (Flat) design. Although, as they say, they are not alone. To go to the download page of PSD sets, click on the image.

The maximum number of different interface elements is presented here: menus, columns, voting, bookmarks, social networks, profile, buttons, there is even a time line.

The classic UI set for the site interface is a menu, pagination, functional search blocks, a calendar, dates, a login block, and even a calculator.

Like all three previous sets, this one also contains flat elements. There are, in principle, not so many of them: buttons, switches, sliders. More suitable for the settings of some mobile application.

This UI set has a very beautiful and stylish color scheme. The interface is easy, one might even say airy. There is a player, a weather block, a blog for login, search and various buttons.

After the previous one, a very contrasting and dark UI set. To be honest, I'm not a fan of such a bright range of colors, but perhaps it will come in handy for someone. In addition to the menu and profile, there is an interface for video and audio players, columns and buttons.

Visually, some of the interface elements are very similar to the previous design of Twitter. However, there are other blocks that look quite stylish. The interface is suitable for a modern mobile application or social service.

Another interesting PSD UI kits for designers. There is a profile block, weather, player, login form, as well as a menu and several graphs. Everything looks very harmonious and stylish.

Today I will share my experience in developing graphic documentation for guidelines. This turned out to be my second assignment for Viline. And as you don't remember from the first part, I did a redesign of the video course page. In this article, I will describe the process of developing the style of all elements and various states. I will come up with and formulate some rules to make the interface balanced and accessible, taking into account the audience…

By the way, if you are using Figma, I recommend paying attention to our ready-made design systems. They help freelancers complete more jobs per month, programmers create beautiful applications on their own, and team leads “run through” sprints faster using ready-made design systems for teamwork.

And if you have a serious project, then our team is ready to deploy a design system within the organization based on our developments and adjust it to specific tasks using Figma. Web / desktop, and any mobile. We are also familiar with React / React Native. Write to T: @kamushken

In the first chapter, I forgot to mention that you had to act on the basis of the approved color scheme. The task was not to come up with and propose new colors. To select a color, I sometimes use Adobe Color CC (authorization is required (!)) or ColorScheme.ru. I insert the main color code, and then I select shades for it in different modes: analog, monochrome, triad, etc. Very strong and harmonious contrasts can be selected, for example, in the triad mode. This is me to the fact that I had a better way to get the range from, but there were no such wishes.

I also had questions about the Open Sans font, which was used in the current version of the site. It seems to be less and less common in the everyday world. Now relevant: Helvetica, Lato, Source Sans Pro, Roboto, etc. But this question, it turns out, was at the stage of rethinking by marketers.

I’ll make a reservation right away: you won’t see here colorful and trendy pictures with designs that pop up in the top on behance or dribbble. I have a little doubt that women will be able to stay on a site designed in such a style for a long time. This is the main audience, and I will take this factor into account. But nevertheless, I will try to improve the overall picture, as far as the framework set by the client and my experience will allow me.

Guidelines

Guidelines are a set of rules and / or recommendations for shaping the appearance of a product. They are formed by the designer and clearly described for developers. On the one hand, this is a sentence for the first, because. in the future, new sections of the product can be visualized without a designer, relying on a graphic document. On the other hand, nowadays the addition of the work of an interface designer to such documentation is already a must, now the bar is quite high. So guidelines are recommendations on: colors, fonts, elements, states, iconography, sizes and indents.

Let me remind you that the main audience of the web product in my case is young or expectant mothers. I need to stick to: client approved colors; the font that he considers optimal for his audience; element corner radius. The latter is necessary so that the elements in the eyes of the fair sex do not look too “sharp” or “angular”.

1/15: Font Circe

Important news from the marketing team at the start: we are moving away from Open Sans and taking Circe as the main font.

Font description

Circe is a geometric grotesque with a human face and numerous nice additions. The typeface consists of 6 weights of different saturation, from thin to extra bold. The font owes its name both to the geometric forms and the process of creation, turned into mass entertainment, and to its peculiar, somewhat dangerous character. While the basic forms of Circe are rather calm geometric grotesques with some humanistic features, alternative forms and swash marks can completely change the nature of the font. On the one hand, the designer can enjoy a variety of forms never before seen in Cyrillic, but, on the other hand, the only limit to all this diversity is only the taste and common sense of the user, so that to some extent the font becomes dangerous for him, like a witch Circe for the Odyssey sailors. Circe's super-expanded character composition, which includes both Latin and Cyrillic characters for most European languages, as well as a huge number of alternative variants and variants with flourishes, is organized into stylistic sets that allow you to quickly, conveniently and flexibly change the character of the set. The font is good both in fairly small text typeset and in large sizes, for example, in magazine headings, posters, etc. Designer - Alexandra Korolkova. The font was released by ParaType in 2011.

To put it in your own words: the font is unconventional for the web, is closer to typographic style, has a “literary sound” in it. These are purely my associations. If we compare Open Sans and Circe, then the latter wins a little in terms of density.


Okay, the new font is approved. Suggestions for rounding corners from marketers: use a 6px radius. Agreed, I'll take it into account! (By the way, quite a rare wish in my practice). You can start working on all the elements.

2/15: Colors

The palette in the center is the incoming scheme from the client. Color scheme on the left: I slightly lightened the green (it will be useful for us for on-hovers) and placed it next to the white. So you can roughly imagine how a typical card will look in the design. The hues on the right are an example of rendering green next to contrasting black. An urgent need for such use was not foreseen; it was rather done for a change. The general background of both the site and this ui kit remains #EFEFEF (light gray), this will avoid strong contrast on mobile devices.

3/15: Typography

These are guidelines for using text dimension. I drew a paragraph of text, embedded a quote into it. Made several types of headers. And added regular and numbered lists. An example of a scroll bar is also here, it was added later. In fact, these text rules do not have to be rigid. If you need to put a paragraph of text in a small 14px font - yes please. The main thing is to observe the proportionality of the text. For example, a paragraph of text in small print would look strange with a large heading “Table of Contents”.

4/15: Links

Nothing new or extraordinary. In general, the color of links is still controversial. My position is this: if the design uses blue or cyan shades of color for the link, then you can do without underlining. If I use my own color, then personally I always use an underlined underline font. This is something like an unofficial standard and the user quickly realizes that this text is clickable. Later, by the way, marketers changed the color of links to orange. I didn't mind, as long as the links remain underlined.

5/15: Buttons

In this section, you need to take into account all possible states of the buttons and work them out. I separate button types into primary “primary” and secondary “secondary” (or whatever they are called ghost button). Logically, the main button leads to the priority action, and the secondary button leads to the action that we want less from the user. Again design manipulation. Here is an example of such usage:

Now the theories of Google Material Design are actively used in design, so these days many buttons began to look like buttons again. Some physics from the real world began to be applied to interface design. The button normally has a small shadow; when hovering the mouse, the shadow becomes larger and more blurry - the button “raises” higher; when clicked, this shadow disappears, simulating the “pressing” of the button. Here is such a pseudo-three-dimensionality, which connects the design a little more with the real world. As far as I remember, this came from smart TV app guidelines, where users sit within a certain range of distance from the TV, and there it is vital to use prominent shadows with a large blur factor. This greatly facilitates the perception of what is happening.

6/15: Entering text

If we refer again to GMD, we can see that the tendency to use such inputs is:

Increasingly common in web-products. If you prefer Android, understand or work in the field of IT, then with such inputs you are like a fish in water. But for the female audience, which mostly prefers the iPhone, such an ascetic style for text input elements is more of a pain. I tried to find a middle ground and proposed a design when the input still remains an input, but also has some GMD roots:

Any input form below has a 1px underline-shadow with no blur. When you hover over the mouse, it turns green; when clicked, it thickens and turns green, demonstrating the in action state. The pencil icon on the right is an experimental attempt to add "too much clarity". In some cases, this icon can reinforce the meaning: the usual input is a pencil; search input - magnifying glass; password input - lock icon, for example; etc. An example will be towards the end of this article.

7/15: Dropdowns

Their response principles are carried out in the same way as the inputs. Hovering the mouse changes the color of the icon and the underline. When the drop-down list is expanded, a more voluminous shadow appears, still “raising” the element higher in the plane. If you approach the matter with due attention, then you should think about the expanded state. The icon is flipped, the active line is bold, and when onhover, we tint the background with a light shade of the main green color.

8/15: Sliders

With them, everything is extremely transparent. I'm not inventing anything new here, the standard component, by analogy, is designed in accordance with the guides: fonts, colors and dimensions. The slider can be moved either by dragging the mouse or by clicking on a numerical value, for example, when it is proposed to indicate the age of the child “from” and “to”.

9/15: Tabs / tabs

“- Yes, everything is clear, let's go on!”

10/15: Selection elements

Here I grouped all the remaining elements: state selection (additional filtering), radio buttons, checkboxes and radio-buttons. For the last two, this is just a reminder to developers that we enhance the visibility of the selection with an intense text style. Well, with the rest, it seems to me everything is obvious.

11/15: Table

I added a kit and an example of a table too. Everything is standard, I use only a general similar style. Of course, the table is more useful if the indentation specifications are given. More about them, by the way, at the end of the chapter.

12/15: Iconography

Recommendations and examples of the use of icons. I think GMD's intense and prominent icons have stymied the evolution of iconography. Once there were pixelated ones, then convex ones, somewhere between them, ios outlined (outline) entered the trend, a colorful flat style flashed nearby for a short time (remember when the endless pseudo-shadow stretched at an angle from the object?). And then Google came along and said how to do it. And if you don't go deep into the lyrics, then I only use GMD icons lately for their versatility and performance. You can take a lot of metaphors from independent icon designers (free, give all sizes, png/svg/zip, hint: it's convenient to right-click and download the desired size). I think that intensive icons are more understandable and noticeable (and there should be a reference to traffic rules signs).

13/15: Cards

This is already a transition from individual worked out elements to their combinations. I have compiled several card options for use on the site, because. it was an up-to-date way of presenting some information, and the personal preference of the client.

But I always remind you that it is undesirable to overdo it in design. Their meaning is best understood in conjunction with the specifications:

There are no strict rules in determining the composition of cards. If you follow the dimensions of the indents indicated by me, then almost any one will look uniform with the developed guidelines.

14/15: Login

As a bonus, I worked out the login / registration popups, made a layout with an example of use. This is more needed to visualize how in the future, without my participation, the full-time web designer of the project could assemble any section for the product. All you have to do is take the finished elements from the source and arrange them evenly according to the specifications.

15/15: Specifications

They are in a separate group in the source. The group can be made visible and the specs will be drawn. Without them, this user interface kit would be incomplete. Compliance with the proportions of dimensions and indents leads to a balanced interface. If I do not give instructions in this regard, then there is a risk that it will be done differently. And then I can not guarantee a quality implementation.

If you prefer an 8px grid, keep in mind that all padding is a multiple of 8; if you are using a 10px grid, as in my case, then you will not find 13 or 27px spacing between elements in this design, all padding will be a multiple of 10.

There are also rules for the number of colors and their shades: I did not use too many shades of gray, for example - there were no more than three of them in this set. I'm sure with such own interface rules easier for both designers and developers. Although there are exceptions, if the system gives feedback in different states, then both red and blue, etc. may be required. to enhance the semantic difference (for example, for pop-up notifications).

Chapter Conclusion

• Guideline graphic documentation is a visual language for developers to continue developing the product and not involve the designer once again.
• A set of guidelines can be developed taking into account the goals of the future product. Fonts, colors and general style can take into account the specifics of future users of the resource / application.
• To optimize interaction, guidelines should contain recommendations for element dimensions and indents.
• It is desirable, but not necessary, that the set also includes examples of ready-made solutions. This can be a shopping cart, product page, friend feed, cards, landing page, etc.
• The modern approach is to return to the client not a sketch / psd file, but to give the html / css code. I switched fully to Axure some time ago and it does the job quite well.

As an addition, I propose to see how other colleagues in the shop solve similar problems. It's good when there is someone to take examples from:

1. Jan Losert very cool, his

In the process of designing the interface of applications or websites, it is useful to take into account the experience of other specialists and the best options for solving typical problems. This allows you to avoid unnecessary mistakes and get good feedback from your users. In the about section, we published some notes on this topic: for example, there was a review of 20 resources with , as well as various articles about the hamburger menu, the history of the development of buttons on sites, etc.

Today we will consider a similar service UI Patterns, which is a kind of library of typical design patterns and can be useful for UI design.

The author of the resource is the Danish web developer Anders Toxboe, who launched it back in 2007. The main idea of ​​the project is to collect in one place all the solutions to classical problems and tasks of building interfaces. This is implemented through a selection of examples + a detailed description of the different methods with explanations of how best and why one or another approach should be used.

The UI Patterns project contains several features/sections:

• Design patterns - directly a library of interface patterns.
• Screenshots - archive of all UI screenshots (almost 16 thousand).
• Blog (unfortunately, there are very few publications and they rarely come out).
• UI Patterns Weekly - a selection of links to useful articles on the topic (regularly updated).
• Newsletter with free lessons.
• Ability to add your own screenshots of interfaces.
• Paid training chips - developers conduct an online course on creating an effective design in terms of psychology and various tools to influence user actions. In addition to this, the site sells a deck of cards with different patterns of behavior, which can be useful in designing.

We are more interested in the first two points, so we will consider them.

UI design patterns

As a rule, similar implementation options are used to solve the same problems. If you look at the selection, you will see that almost all the traditional "functions" in the design (search, buttons, checkboxes) have the same principle of operation. Similarly, in more complex solutions, a standardized approach is used. The UI Patterns service contains the most relevant design patterns.

They are divided into several categories:

• tabs;
• menu;
• content;
• forms (by the way, we advise you to read about improvement);
• tables;
• Pictures;
• data formatting;
• social;
• the shops;
• search, etc.

Let's choose, say, the Breadcrumbs menu, and on the corresponding page you will see a detailed discussion of the problem:

This information will help novice designers and planners to understand why the current element was invented at all and what task it allows to solve. There is also a description of the options for implementing this functionality, their rationale, implementation tips + screenshots. By the way, we took some pictures from here for an article with. Additionally, there are comments on the page where you can discuss the note and ask questions.

Persuasive Design Patterns

Also in this section you will find the so-called motivating (persuasive) interface patterns. This includes elements that influence the actions and perceptions of users, allow them to be involved in more active work on the site, push them to make certain decisions, etc.

The simplest example is adding “game mechanics” to the site / application, when users can receive some kind of achievements (badges) in the course of work or open new levels with more advanced features. All these are quite useful things for effective and interactive interaction with your audience.

Interface Screenshot Library

Unlike the previous section, there is no additional description of the problem in question in the archive of pictures, these are just screenshots. They are divided into categories and topics, plus they have some additional tools. Let's choose, for example, galleries:

In the filters, you can set the color, domain, or even use the search form. When you go to the screenshot page, you will see it in its original size.

Total. In general, the UI Patterns service will be an excellent assistant to all designers: both beginners and professional specialists. The selection of interface design patterns is really good — in addition to 16,000 illustrations, there is a detailed analysis of various UX / UI tasks with tips, implementation options, etc.

If you know similar projects, drop the links in the comments.