A Friday afternoon Redesign

With a twist as the motif.

First some context:

I've ordered a Switch Lite on Nov 26 and it still hasn't arrived. It's the 4th of December today. I've been taking a break from work with no Switch in my hands. I'm pissed. I've already called them, nobody answered. Left my phone waiting on hold for 1h+ and nothing.

So, I decided to channel my anger for the post office delivery people to sending them three lovely emails and spent the rest of my afternoon doing a simple redesign to take my mind out of things. I do these from time to time but should definitely do them more often, as value trumps any other thing, and apparently calms my nerves.
‍
That was the motif. Onto the work.

Below was what I set up to redesign. The Stremio desktop app — it lets you see pirat... legal content. Let's go with that.

From looking at their current design we can discern some navigation and layout patterns. For this particular screen, I've broken it down into four sections — Primary Navigation, Secondary Navigation, First Level Content and Second Level Content.

When doing your own designs, you should have a clear picture of your navigation patterns before moving past the first couple of screens. I say a couple because you should test it on more than one situation, otherwise you might end up realising that your pattern doesn't work for the whole app or website.

In this case, I was just focused on one screen and my ultimate goal was to practice my UI skills, with very little UX work being done. Only the very necessary.

To complement my take away from this layout patterns exercise, below are colour coded overlays of the broken down sections onto my actual redesign.

You don't need much to get things going. A good typeface like Inter UI it's great for dashboards with its 9 different font weights. Make sure to limit your typography sizes to no more than 10.

For the colours I initially had 9 shades of grey and 9 shades of purple, which gives you a great flexibility when designing products for clients. You can read more on colour palettes here but for this case it was not really necessary.

Been using Google's Material icons quite often lately. They are more than enough for quick designs and for high fidelity UX work.

I recommend you use multiples of 4 for pretty much everything from spacings, sizes, line heights, etc. This will help you with consistency and it creates a rule for all the elements that can be easily understood and followed by other designers that may be working with you.

BONUS TIP: If you wanna achieve designer nirvana you can even do it in colours like I did here.

As a closing showcase of the final work, take a better look at the design with some tasty close-ups below!

Making this in Figma made it a lot easier to just switch colours and quickly create a light mode.