Graphic rhyme in web design

Graphic rhyme in web design

Graphic rhyme is the easiest, most reliable and effective way to make website design stylish.
Michael CEO&Founder

Printed 2011-06-20

Graphic rhyme is the easiest, most reliable and effective way to make website design stylish. 

For example, there is a website and there is logo in the form of a sign inscribed in a circle with a stroke of 2 pixels. A simple solution is to keep the logo motifs repeated in different parts of the site. We make buttons with rounded edges. We make the icons in a circle with a stroke of 2 pixels. Make underscores in the main menu with a thickness of 2 pixels. And so on. 

That is, a graphic rhyme is a similarity of different elements of a site according to some principle. In our example, the principle is this: these are rounded shapes and a 2-pixel stroke. If you repeat this principle, you get a graphic rhyme and get a style. 

There can be many examples of such a rhyme. It can manifest itself in completely different forms. These are very simple things, and most designers automatically use them in their work. But it is important to understand the very essence of this method, then it can be applied more widely. 

Color rhyme. If the logo is made in brown and blue, make a plate under the menu brown with a blue stripe. 

By saturation. If the logo is made in the form of overlapping translucent shapes - do the same with the interface elements: menus, buttons, tabs. 

According to the shape and style of the lines. For example, repeat the jagged line from the logo in the design. 

For details. For example, the logo has some beautiful, textacteristic detail - a sign, an initial letter or curl. Make icons, bullets, buttons using this part. 

By the thickness of the lines. Make the thickness of the font lines in the button equal to the thickness of the stroke line of the button, and it will be beautiful. 

By fonts. For example, the logo is made in the form of a name in capital letters with a signature in italics. We take and make the headings of the sections of the site in the same form. 

By relative position. (for example, as a degree sign in the logo and in icons) If the graphic sign in the logo is located above and to the side of the name (as a degree sign), place the icon-icons inside the site according to the same principle. For example, the headings. 

By interactive behavior. If on hover the text changes color in the menu and a colored background appears, use the same principle in the operation of buttons and tabs on the site. 

As you can see, all these examples are quite easy to implement, and regardless of prices for website design , you can use them in your work and make your projects more stylish and high-quality. 

More articles in the "Miscellaneous" section:

Graphic rhyme
Design differences for b2b from b2c spheres
Landing design in 77 minutes
  Responsive website design in 2 hours
Photoshop tutorial

Our services