Design guidelines
This page explains the basic design guidelines for ypa.network website. Please check the video at the end of this page.
To design this page we use WordPress – Theme: Divi which is professional (but sometimes makes troubles). Good thing about Divi is that you can find any answer on any problem online.
1. To access the WordPress in order to edit or add content, go here: ypa.network/wp-login.php
2. Enter the user name and the password
3. Click on Page – New to create new Page. How to explained in the video.
Font and typography
ypa.network is using Source Sans Pro font, size 23px, spacing between lines is 1.8em and 1.7em and the font color is black, unless we use another color for subtitles or grey for less text (like subtitles). Grey text should be big as this color is not very visible on many screens and on the sun.
White spacing and contrast
One of the most important thing in design is white spacing. White space doesn’t have to be white, it can be any color. It represents all spaces between the elements and modules (text, photos, videos). Kerning is called the spacing between letters.
To edit spacing, we need to click on Module Settings – Design, Spacing – Then edit Margin or Padding (see 3 steps under). Most of the time in design of web pages is spent on fixing spaces. It’s that serious.
Another important thing in design is contrast. Better contrast helps us see what is important, what to read first, but also it helps with aesthetics. Bigger contrast, better. We can also use bold text to say that something is more important.
Blocks in Divi theme (this one)
For our website it’s the best if we use middle block with 2 spacings on the side to write the text.
Two equal blocks are used when we want to have two elements (one text and one photo side by side).
I also lowered this text to stay in the center of the photo.
The video is for some reason stretched which makes design very ugly and does not represent the real proportions. However, it’s more than enough to understand how editing works.