Composition in web design, or what Photoshop textbooks are silent about
From the author: today we’ll talk about what is a composition in web design that photographers, artists and web designers love to talk about. It may seem to a beginner…

Continue reading →

5 new trends that will make your web designs even better in 2017
From the author: 2017 has already set the movement in some very interesting directions, as a result of which new trends in web design are starting to appear. This year…

Continue reading →

How to master web design and where to study as a web designer?
From the author: Good day, dear reader! In your opinion, is it possible to develop an artistic and aesthetic taste for someone who has never held a brush in his…

Continue reading →

Buttons in web design

From the author: I love buttons. With their help, you can do many different things: move on to the next stage, accept various conditions, perform something. Buttons make the site interactive. This is why buttons are perhaps the most important components in a design system in web design.

It’s simple, the buttons mark an area so that I can click on it. In essence, it is on the buttons that we apply the basic attributes of the design language so that then it has its effect on more complex components. Below I presented 12 lessons that I learned based on working with primary (primary button), secondary (secondary button) buttons, as well as other types of buttons.

Primary buttons
No. 1. Decide on the style of the system

Buttons are the purest atomic expression of the visual style of a system. The button consists of three inextricable attributes of the so-called “big three” – color, font and iconography. Buttons also need to take into account the space: internal padding (in particular to the left and right of the inscription) and external margin (affecting other elements). Buttons can even affect attributes such as fillet (or border-radius) and elevation (or box-shadow).

Web design. Fast start

Learn the course and learn how to create a website design and prototype in Figma

Learn more
Conclusion: Accept the buttons as the main representation of the style of the system. Even better if you specify a button as a set of variables: color, size, space, etc.

No. 2. Define the style of words

Luckily, the buttons that say “Click Here” are a thing of the past. But questions remain open: How long should the button text be? Is it worth making signatures in the imperative mood (Save or Close)? Do I need to add an object type (Document) to the verb Save? Are there any signatures preferences for common actions? Do I need to connect the buttons somehow with the brand … or not?

Conclusion: Find online guides with a set of ready-made buttons. A list of relevant words and editorial standards can be found in manuals such as Voice and Tone. Buttons are a great example of introducing new standards.
No. 3. Invert button colors if background changes

Most buttons work well on a white background. Will the button be visible in the photo or on a darker background? Can you place the button on a light neutral background? Is the button clearly visible on any background? Can you change the color of the primary button?

Conclusion: Test the primary button on possible backgrounds and add alternative styles (white background, some other color or translucency?) To the code in case the background gets darker. When designing, create light and dark variations of buttons on possible backgrounds for greater clarity.
Number 4. One primary button per page, unless an action is repeated

Buttons call for action. We often use the primary buttons to draw attention to the most important action on the page. At least until we start clogging the page with a bunch of primary buttons (it’s good that they are all alike).

In some cases, the primary buttons are well suited: when choosing from parallel objects (as a set of media objects in the search results) or when choosing options from equal modules on the settings page.

Conclusion: Decide in which cases it is worth using only one primary button on the page, and in which more than one.
No. 5. Design and create all kinds of interactions with a button

Buttons are a primitive kind of interaction, and the interaction leads to changes. It would be incorrect if you just tell the developer “Here is the button design!” and show the button on the loaded page. The designer should show the appearance of the button in all possible states: by default, when you hover over the mouse, it is in focus (highlighting appears for example), when pressed, and even some kind of spinning wait animation or animated progress bar.

Conclusion: Supplement the live demo (just insert the button on the page) with a gallery of all possible states where the user does not need to interact with the buttons. Creating documentation is not a treasure hunt. It will be even better if you create a video, as in Material Design.
No. 6. Make change resistant buttons

The combination of signatures with the icons in the buttons enhances the value, which speeds up recognition. So, stand there! I thought buttons are signatures with a predictable area for clicking. When adding new elements, even the usual icon, your button should not crumble. Adding less predictable elements entails problems with space and alignment that you want to solve, especially when you can place a signature, icon, etc. in the button.

Web design trends: the main directions of 2016
From the author: Hello everyone! Today we will take a break from complex technical topics and do a short review of current year trends. In this article, I collected the…


Effective web design - what is it?
From the author: I welcome you, dear friends! Today's material is devoted to how an attractive and effective web design should look, which would cause a wow effect for site…


Beautiful web site design: top 10
From the author: I welcome current and future web designers, as well as other readers of my blog. Today I want to demonstrate an unrealistically beautiful web site design that…


10 web design trends that may appear in 2016
From the author: in this article we will consider 10 trends in web design that may appear in 2016. Design trends may not change for several years (and in some…