moon indicating light mode
sun indicating light mode

How I revamped the design of W261

Omar Benseddik drawing about designers touching the screen.
Attack the screen!

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:

Original design layout of W261.
Original layout.

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.

Spacing issue with W261 original design layout.
Elements are detached from each other.

(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:

When you click on a link the color changes to purple.
Golden track. 🎷

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

W261 logo on hover.
The "W" looks like Wutang's W, somehow.

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

W261 logo did not look good before.
The hole in the 6 puts me off.

(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:

WhatFont extension is useful to design from scratch.
Just hover on text to make the tooltip appear.

PageRuler Chrome extension

This extension has a very handy feature, </> Elements. It allows you to see the spacing and positioning of elements.

PageRuler Chrome extension to do a design from scratch.
You can see the spacing of each element on the page.

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:

Using Figma to create the design layout of an existing page.
It looked like I designed the original layout.

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:

12 column grids on Figma.
It made my life easier.

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

Using 12-column grids in Figma.
Centered.πŸ’’

Logo reparation

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

Repairing the W261 logo.
I was so happy when I fixed it.

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

Removing the pink sparkles from the W261 logo.
Who sees Wu-Tang's logo?

Logo on hover

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

Hovering on the W261 logo.
HOVOOOOOOR πŸ§™β€β™‚οΈ.

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):

Creating avatar style guidelines.
There is some yellow in my eye. At first, it frustrated me, but I could live with it.

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:

Separating elements on W261 for the new design.
No doubt about which title the article preview refers to..

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

Version 1 of avatar use.

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

Version 2 of avatar use.

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

Version 3

Version 3 of avatar use.

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

Version 4

Version 4 of avatar use.

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:

Edge case with longer title on W261.
Create the longest title you want.

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:

Experimenting with double authoring and avatars on W261.
When siblings write.

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 colors on W261.
This color entices you to click on it. πŸ‘…

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:

Sticking title and article preview in W261

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):

Left alignment of avatar on W261 design.
Left version.
Right alignment of avatar on W261 design.
Right version.

Margins

The original version was too centered and "squeezed":

Original W261 design layout had big margins.
Looks like you read a manuscript.

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

New W261 design layout with smaller margins.
Pushing to the left.

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:

4 different items in the original layout of W261 on homepage.
1, 2, 3, and 4!

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:

3 different items in the original layout of W261 on homepage.
1, 2, I mean … you know how to count.

Fixing the "dot"

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

Difference between full stop and the middle dot.
Omar Benseddik. FULL STOP. Date.

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

Difference between middle dot and the full stop.
Can you see the difference?

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:

Different mobiles versions of W261 during the 1st design phase.

Two authors on mobile

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

Double authoring is hard to position on mobile.
I don't like this. Neither do you.

The solution was to overlap the avatars and cut the "last names" (sorry to the proud parents)πŸ’‡:

Finding a solution for double authoring in a blog.
Spot the typo.

Alignment on mobile

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

Double authoring issues on mobile for W261.
Avatars are aligned.

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

Alignment of text instead of avatars.

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:

Line-height on mobile.

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:

Line-height on mobile is now fixed.

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:

Purple dark mode of W261.

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

Dark blue dark mode of W261.
Love 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:

Basic version of a dark and light mode toggle button.
Basic.

"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:

Dark and light icons for the Benseddik website.
I ended up using these for my portfolio.

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

New dark and light mode icons for W261.
Blame my crap Paint skills to do this screenshot :/

(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. πŸ‘€