I recently launched my portfolio blog site and decided to tell about the little things in the design of website. Some things I peeked on other blogs, like Ilya Birman's Aegea, and adopted to my website.
Every example in this articles is translated to English because my website is in Russian
Thing with headers
The header is showing the hierarchy. If I am on the main page, the header is my name "David Kistauri", if I am on the blog page, it's main header + "Blog": "David Kistauri. Blog", if I am on the tags page, it's main header + "Blog" + "Tags": "David Kistauri. Blog. Tags".
This rule isn't for template pages like articles, product pages or pages for each tag, because of "David Kistauri. Blog. How to use VS Code if you are writing" is a mockery of the reader, especially those who come in from the phone — header is too long.
Thing with links
Links in the blog — the first two can be clicked, the third — no, because we are already in the blog, and two more — additional: the blog has tags and you can subscribe to it
There are links above the header on every page. They are divided into two types: primary and secondary. There are three primary links: the main page, projects page and blog page — these are sections of the site.
Primary links
If I am not on the page — link is blue if I am on the page — link isn't clickable and has a black (white in dark mode) background if I am on the page section — ex. /blog/all/, the link is clickable with black (white in dark mode) background and blue text. This complaint setting is for understanding hierarchy by looking at links.
Secondary links
There are no constant secondary links. Sometimes there are no secondary links. It depends on the page. These links are additional. The blog has two secondary links: to list of tags and to RSS. These links have a blue text.
If you'll hover a primary link — this link change a background color, if you'll hover a secondary link — this link change a text color.
Place of secondary links
Besides the header, there are secondary links in the list of tags and notes. These links are located differently — in tags list, they inlined, like bricks, in notes list each link starts with a new line.
I have a note about "brick-link" design in my Telegram channel. Tags are located this way because there is a connection between them — one note may have a lot of tags; people often visit tags list to see a list of themes, not for find one tag.
Links to notes are located separately because every note is a separate content unit and "brick-link" design makes search harder. Also, notes names are long, so long bricks isn't cool.
Thing with dividers
All sections are connected (or divided) with divider. There is a big margin above the divider and a small margin under the divider. I've read about this reception in Igor Shtang's note.
Thing with a dark mode
You need a dark mode. Especially if you are building the blog — a product with long articles. Stop to torment owl-readers with bright colors. The task isn't just to change white background to black background. You need to pick up good colors so that in the dark version all the elements can be seen and shadows worked.
Bright colors should not occupy a large area and should be properly substituted for the elements, background and text color. In the list of posts, I removed the colored background from the blocks and set its title - not much bright, darker. I will tell you more about the dark theme in the next note.
Visit my website — https://davidkistauri.ru
This article in Russian — https://davidkistauri.ru/blog/all/ya-u-mamy-designer/
Top comments (0)