Rethinking website design. Trying to make it better

21.12.2023

18.12.2024

1 minute

183

By “rethinking” I meant a complete redesign of the site. I don't know how trivial this task is for frontend developers, but for me, it's like making a whole new website. I've revisited approximately 50 CSS files, 200 images, and 10 JS files (ok, not so big, but still).

List of changes

So what exactly was changed for a website ?

Now images are loading dynamically, only when they are visible.
The layout and structure of the site has changed.
Two other fonts have been added, for emphasis and for headings.
A strict color palette for the site was selected and built in.
Solves the problem with text size.
All images are now in webp or svg format
For the production server, all JS and CSS files are minified
Changed display of the list of posts and their previews

And a much more... For example, change the button click animation or fix the translation.

Overall website changes

Side menu

This is the side menu before, back then it was on the right side and was not interactive.

And that's how it looks now. Now it's interactive and on the left side

Footer

Footer before

The footer became a little more sane, footer after

List of articles

The list of articles/posts will continue to improve. At least I'm going to replace infinite scrolling to pagination. Because, in my opinion, it is more understandable for a person (at least you see how long do you have left until the end) And for SEO and internal linking, it is preferable.

Before

After

Conclusion

As I already understood, if you have your own website, this means that you have to constantly watch and improve it. And that's why your website's structure is vital.Upgrading a website can be easy or can become a nightmare.

So, because of this, think ten times before embedding a new feature on your website.

A new project, codename: SearchResultParser | Tim the Webmaster

Next article

New improved design of website

Previous article