News

New Blog Design

Written by Magoz
6 min read 3.2k views 9 comments

A few months ago, I published a questionnaire asking you to help me to improve the blog. You guys are amazing and I received more than 150 responses.

One of these responses was from a long term blog reader Hanu.

We exchanged a couple of emails, and it was clear to me that Hanu had a lot of great ideas make the blog design much better.

During the last 5 months, we have been secretly working together on a new design.
Today, I’m very happy to introduce you to the beta version of the new blog.

A New Domain

I launched the blog a couple of years ago and it has always been a subdomain of my magoz.is website. The old URL was magoz.blog.is-a bit complex, difficult to remember and also not looking like a product itself. It was the time to give it its own domain.

magoz.blog

I’m aware .blog domains are very new, and many people might not be familiar with them yet, as they became available just a few months ago. But I think it’s a matter of time until people get used to magoz.blog. It’s simple, very descriptive and easy to remember.

A New Design

As you pointed out on the questionnaire, the old design had a couple of problems.

It was difficult to navigate the articles loop and find more articles. The pagination on the home page made the process tedious, there wasn’t a good way to explore more content. The second flaw was the lack of images in most of the articles.

The new design had to address these problems but also maintain the simplicity, minimalism and improve the general appeal of the layout and the reading experience.

We implemented some animations on the UI. You can already see some of them, but they still need some work.

The New Home Page

The new Home Page now features some articles on the top (usually the most recent ones).

After that module, there is the loop of the articles (sorted by date) displayed in two columns with an infinite scroll enabled to load more articles. That allows you to browse all the articles from the home page without needing to click anywhere.

There is always an image associated to each article. That makes the blog more visual and personal, since I’m usually using my own images and animations to illustrate the articles.

Sketches for Reforma Horaria Animation

The New Article Page

We applied a lot of design changes on the single article page. Now the blog is using the Avenir font family which has a better readability and also fits better with the design.

Sketches for Reforma Horaria Animation

I wanted to give more priority to the comments, so now they are displayed in a cleaner design.

Sketches for Reforma Horaria Animation

After the comments, you can find more articles related to the one you are reading.

The New Explore Menu

To make content more browsable and accessible, there is a new icon on the top left of the screen that appears whenever you scroll down.

From that menu, you can access the list of topics, search, or get to any of the blog pages such as Get Involved, Resources or Best Articles.

Sketches for Reforma Horaria Animation

Best Articles and Topics: A New Way to Organize the Articles

I’ve already published more than 50 articles, so it was time to find a way to organize them and make them easier to explore.

I organized all the existing articles in 9 different topics.
For instance, now you can browse all the Creative Process related articles, or those where I talk about the Tools I use.

I’ve also created a page called Best Articles that contains a handpicked selection of my favorite articles.

Sketches for Reforma Horaria Animation

Get Involved

I want to see this blog as a place for knowledge, improvement and inspiration–not just a blog about me or my work. I want you to get involved, because I’m sure together we can create a great community.

How Can You Help?

  • Share the articles
    I’ve added icons at the end of each post, so you can easily share them via email, Twitter or Facebook.
  • Comment
    Join the conversation adding value and your thoughts in the comments below each article.
  • Guest Articles
    Write and publish your own articles on the blog. I’m sure you have a lot of knowledge that will be very helpful to others and deserves to be shared. As an editor, I will guide you through the whole process to make sure your content fits the style of the blog.
  • Send me your suggestions
    Suggest topics and articles you want to read more about.

You can find more specific information on the Get Involved Page.
Please, get involved and let’s make a better blog together!

What Do You Think?

I’m still working with Hanu to implement a few tweaks and improvements. What you see now is just the starting point, but I couldn’t wait to share them with you.

What do you think about the new design?
I would really appreciate if you could leave your feedback in the comments. Please, let me know things that are not working, suggestions, improvements, and the things you like or dislike of the new design!

Enjoyed this post? Consider sharing it using the buttons below. I appreciate your support!

Magoz

Nomadic illustrator. Thinker. Seeker.

9 comments

  1. B
    Boots&Cats

    Amazing. Thanks for sharing! Those animated clips are great. I’m a fan.

    • Thanks, Boots&Cats! We spent a lot of time working on the UI animations. And that’s just the beginning, we have a few ideas to implement in the next months.

      Thanks for your support!

  2. a
    anml

    Just stopping by to say: amazing idea!
    I have to think about it and send you ideas and questions.
    Thank you so much.

  3. Aunque debo acostumbrarme aún al nuevo aspecto del blog seguro que el cambio es positivo. Lo que me distrae un poco es el movimiento contínuo de las imágenes de “Best articles”. En las próximas visitas al blog iré descubriendo más cosas. Hasta pronto!

  4. The typographic change is definitely a good one. Although the more Futura-ish font is great, Avenir is more readable, imo. I suppose you will unify the rest of the site using the same criteria. In terms of layout and structure, I think it looks great. The search filters and categories are a great improvement.

    Perhaps a bigger contrast between the headline levels would help divide the different parts of the content. For example, the difference between the ‘A new design’ and ‘The new home page’ titles (h2 and h3, I presume?) is probably enough, but it could be more evident sometimes. Or maybe it’s just about adding additional margin between paragraphs. I would even reduce the general line-height a tiny bit, compacting the paragraphs very slightly and making more visible the separation between them. A very personal appreciation, in any case.

    All the collaborative part, with the guest posts, etc, is a great idea and I’m looking forward to seeing what comes out of it :-) Congratulations for all the nice improvements, Magoz!

    • Thank you very much for your detailed feedback Raul!

      I agree with you about the headlines sizes. How would you solve it? Increasing the h2 and h3 size or Increasing the h2 but maintaining the h3?

      Regarding the line-height, do you feel the same in articles with less images? I feel that a big line height helps the readability in this case. What do you think about it?

      Thank again, mate! I really appreciate your help!

      • Hi, Magoz. I would increase—slightly—the H2 instead of decreasing the h3. It is true that a big line height makes everything lighter and nice to the eye, but I still think it could be reduced a bit. But we’d be talking about a very, very subtle change! Nothing dramatic. Something you could feel almost in a subconscious way. I think it would help especially in long articles.

        Anyway, I insist, this is my very humble point of view. This is an opinion intended for fine tuning more than correcting anything! If you are curious about this, make a small test, compare both versions and then decide :-)

        Hugs!

More from News