Style guide as the bible of every graphic designer
The style guide (or style manual) could really be described as the bible of every designer. You will find in it complete information about the visuals, functions and rules that make up a website.
A properly created style guide will save you a lot of trouble even if you have to hand over the website to a new person.
What does a style guide contain as standard:
- Logo – must be vector,
- Font – all font cuts and source,
- Titles – sizes h1 to h6 including line spacing,
- Main text – size including line spacing (minimum size 16px for main content),
- Links – status colors: default, hover, active,
- Colors – define a list of used colors,
- Buttons (all states)
- Table – default table appearance,
- List – numbered/unnumbered list including multiple levels,
- General form – including error messages etc,
- Icons – all customized icons in one place.
Without grid not a shot
Every web design should start with preparing the right grid. This is because the grid makes it easier to code graphics and also helps in aligning objects. Today, the most common way to work with a grid is by Bootstrap tools.
But you should also pay special attention to the spacing between columns. For a flawless appearance, you must always keep the same spacing! For this purpose, for example, the Spacing utility, which uses preset spacing, is great for you. Within the tool, it is not a problem to design your own solution, but you must remember to follow it.
Set the web in visual order
A properly designed web design has a natural effect on people. Any inconsistency or change leads to subconscious disruption, confusion and subsequent stopping/leaving.
Take into consideration that nobody wants to think for long these days and set a coherent style to follow within your website. If your site has round buttons, copy this idea into other elements that will support your design.
Packaging elements is not a shame
Everyone naturally wants to be original and imaginative when designing a website. Even so, you should never forget that you want to make it as difficult as possible for future site visitors to do their job. And that means you shouldn’t be afraid to repeat certain elements.
Within the wireframe design, therefore, define components that are consistent across the entire site. Repetitive phenomena are very appealing from a UX perspective and will increase the likelihood of the site owner making a potential customer feel comfortable and make a purchase.
In addition, component packaging saves time in development. The fewer unique elements you have on your site, the more coding work you save.
Catch attention with contrast
Some graphic designers will wonder how to grab a customer’s attention within a minimalist design. Contrast settings are great for this purpose.
With contrast, you can convey the most important information to people and guide them perfectly to where they need to go.
Where is contrast useful?
- When highlighting links
- In within regular text (to help better readability)
- In important headings
Think minimalist
While this may not be the best news for designers, the truth is that today’s customers want to spend as little time on the web as possible. In practice, that means pleasing them not with elaborate graphics that hide dozens of tiny details, but simply by managing to convey the most important things in 8 seconds.
For this reason, you need to design your website to contain as few distracting elements as possible. You should always point to useful information that is intended to lead to conversion.
Careful of fonts
Choosing the right typeface can add personality to a website, but it can also make it pretty uncomfortable for potential customers to access information. For this reason, you should be very careful with your font.
It is absolutely fine to choose only two different fonts across the entire site. Always keep in mind that the font should be easy to read, even when displaying a smaller size. A consistent style will help to make the site look nice and cohesive.
Think Responsive
The last point here is more for the sake of order, as this is something that everyone counts on.
Statistics clearly speak to the fact that the vast majority of visitors to a website come from mobile devices, so you should put a hell of a lot of emphasis on the mobile version.
Nowadays, the so-called Mobile first approach has become quite prevalent, which prioritizes designing the user interface of a website for mobile devices and neglects the traditional web design process.
TIP: In case you have to do without a mobile version, make sure that the whole website is really simple and contains only the most important information.