In this article, I will share with you the steps I went through to revamp the design of this website you are on right now (W261).

I thought it would be a simple and straightforward exercise to do web design, but realized, along the way, its complexity and the importance of decision-making in this craft.

This was my first complete design experience (from design to development).

It was fun. 🎎

W261 is a platform where people commit to sharing knowledge related to tech, career, skills, business, and other areas of expertise.

(I) Analysis

First of all, I analyzed the original layout and sought feedback from designers:

They identified several issues related to margins, spacing, font size, color contrast, line height, alignment, and even questioned me on the value of some items in there, such as the author name, date, and others I created as I was modifying the design.

Here are 3 examples of problems the original layout had:

(1) Spacing distribution

Clearly, there is a spacing issue. The titles were too far from their respective article preview, and it caused confusion.

I had to re-structure in a way to keep the title, author, date and first sentences of the article together.

(2) Title colors

The first version of W261 was created by Seif (web developer), using a template.

Not so glad about the color scheme, he asked me to work on a fresh palette for the new version.

The color of the titles was purple and it seemed like it was clicked on already. Why? Because this is how browsers style anchors (links) that have been clicked on previously.

For example, in the image below, I clicked on "My Favorite Things", hence its purple color:

I had to find a color that would encourage readers to click on the title, and not be misled by its color.

(3) Small-sized logo

However, the number "6" did not look good as it seemed hollow:

(II) Transfer

I did not have the original layout on any design tool, so I had to create it from scratch, and iterate based on it.

This is how I did it:

WhatFont Chrome extension

I used this Chrome extension to get the color, font, font size, and line-height of the elements on the page:

PageRuler Chrome extension

This extension has a very handy feature. It allows you to see the spacing and positioning of elements.

Figma

With the information you collect using the two extensions above, you can easily re-create the design of a web page. Here is the result using Figma:

That's it. It was surprisingly simple.

Execution

Grids

Shortly after creating the original layout on Figma, a designer told me about responsive grids, and I started using a grid to properly place elements. You can see below that it was "off" the grid:

This is how it looked like after using the 12-columns grid:

Logo reparation

First of all, I opened the logo again on Inkscape and fixed the number 6 by filling the inner side:

I then removed the pink sparkles and kept the logo free of distractions:

Logo on hover

The pink sparkles still looked good, so they are kept only when the reader hovers on the logo.

Avatar creation

The original version of W261 did not have avatars. To give a more human aspect to the platform, and enable the community to recognize members, I added faces.

To create consistency across avatars, in comparison with other blogs, I created a specific style. Faces would appear on top of a yellow background surrounded by a circle (blue in light mode, pink in dark mode):

Why yellow, blue and pink? I don't know, it just looks good. 😘

Spacing solution

To avoid the confusion created by the incorrect spacing, I kept all the elements (titles, avatar and details, article preview) of one single article close to each other, and separate from the following article's group of elements. In this case, we clearly separate an article from another:

Placement of avatars

Now that I got a clearer idea of what elements I would use, I started to experiment with different versions.

Version 1

I liked this version but came to realize that separating the title from the article preview is confusing. Also, the alignment looked "off", given how the title and article preview are aligned, but separated by a circle in the middle.

Version 2

The avatar is linked to the title, while it should be linked to the author's name.

Version 3

The avatar is bigger, off the grid, and it would be complicated to design this for mobile.

Version 4

I liked this version, but visually the topics' alignment on the right is confusing.

I sought feedback and kept iterating for days. You already know what the final version looks like since you are reading from the website (spoiled #sorrynotsorry).

Longer titles

Not all titles are one sentence only, so I created a longer title and realized it would not break anything:

Two authors

W261 is a community platform where some authors cooperate to write joint content pieces, so I created a layout to adapt for two authors:

Color

To avoid the purple I mentioned above, and keep color consistent for both dark and light mode, I went for this bright blue:

Title and article preview

To keep the connection between title and article preview, I pushed the avatar, author name, and date, beneath the article preview. It looked better, but the minutes to read and topics were still not well positioned:

Alignment

Super, I managed to keep the author name, date, minutes to read and topics together, but could not figure out which alignment to use (left or right):

Margins

The original version was too centered and "squeezed":

To create more space, and eventually add more elements to the title, I shortened the margins:

Number of items

As I was experimenting, I ended up with layouts with 4 items: (1) title, (2) minutes to read and hashtags, (3) article preview, and (4) avatar, author name, and date:

Following the almighty advice "the less the better", I ended up with 3 items instead of 4 and managed to combine (2) minutes to read and hashtags with (4) avatar, author name, and date:

Fixing the "dot"

Invisible to my eye, I did not notice that the dot I used "." was not serving the purpose I wanted:

A colleague designer pointed me in the right direction, and showed me the difference between the "middle dot" and the "full stop":

Mobile version

I should have started with mobile design, instead of desktop design. Why? Shifting from desktop to mobile turned out to be complicated, as I dealt with new spacing, positioning, and layout problems I did not think of. Here are some layout versions:

Two authors on mobile

The desktop versions clearly did not fit, as it pushed the text one line below:

The solution was to overlap the avatars and cut the "last names" (sorry to the proud parents)💇:

Alignment on mobile

Shortly after sticking title with article preview, I either aligned the avatar:

Or I aligned the text, creating a white space if there was a single author (the most common scenario):

After much reflection, I decided for the first option and accepted to have the text misaligned in case of double authoring (sniff). 🥶

Line-height on mobile

The line-height in the original version was too large:

Following a tip from the designers that helped me, I multiplied the font size times 1.333 (or 1.5) and rounded either up or down, and eventually came up with the line-height. It looks more compact, and cleaner:

Dark mode background

In the original version (inspired by Sarah Drasner's code editor tool "Night Owl"), the background in the dark mode was purple:

It did not look that aesthetic, so the developer and I experimented with different colors and came up with this dark blue:

Custom dark/light mode icons

To differentiate W261 from other platforms who have a dark/light mode, and to be in line with the brand style, Seif suggested I create icons to replace the existing "Moon" and "Sun". This is what the original ones looked like:

"Give me 8 minutes, and I'll come up with something dope" - that's what I told Seif, and in fact, I managed to create the new icons in such a short amount of time.

However, they were absolutely not in line with the brand style, so it did not serve the purpose:

I worked on different icons, and ended up with this outcome:

(IV) Result

The website you're reading this from right now. 👽

(V) Future

Cleary, in a single month I could not cover all the aspects. These are the following topics to tackle:

• Responsive typography.
• Design system for W261.
• Profile page.
• New features roadmap.
• Accessibility.
• Newsletter button.
• Design handoff.

If you want to learn a new topic or get in-depth in a current one, ask me about our Manifesto page and start writing to share your knowledge.

W261 will keep growing. 👹

Thank you to Christophe, Niels, Tim, John, and Perry, for the support and guidance. 👏

I will annoy you even more in the months to come. 👀