How I’m making myself a better UI designer through copywork. Week 3.
I’ve always felt weak at UI design. I’ve never been able to generate wow effect through it. Until Mario Moris suggested me to do copywork. So for the next two months I’ll dedicate one hour a day to make myself a better UI designer through copywork. These posts documents my journey.
Files
As always, here’s the link to the Figma file with all my copywork
Week 3
This week I’ve digged into the much discussed topic of neumorphism, by copying the beautiful Simple Music Player by Filip Legierski for Riotters.
It’s been the hardest copywork I’ve done to this date, which is good, because starting with something minimalistic and then building my way up to something visually richer is the approach I‘m following.
Since I had copied desktop designs for the past two weeks, this week I wanted to explore app design. Choosing one has been complicated because, let’s face it, all apps look alike, especially non-gaming apps: there are certain characteristics in terms of layout, visual hierarchy, minimalism, color, that have established themselves as standards, so it is difficult to find something that looks different. Don’t misunderstand me, patterns are good (one more time: PATTERNS ARE GOOD), but I didn’t want to dedicate my copywork time to, let’s say, Airbnb app, because while it must have been very complex for them to get to their current UI, it’s also a UI that is now very easy to copy.
So I went and ask for help to my sworn enemy: Dribble. And that’s where I found the most interesting things — “interesting” in the context of this article is something that I look at and wonder “How did they do that?!”
Ladies and gentleman, behold the Simple Music Player by Filip Legierski.
As always, I’m skipping the debate about the applicability in production of the designs I copy, as my only criteria to pick my copyworks are that it must be visually appealing and it must be something I’m not able to do when I start.
That said, there are some very valid points against neumorphism, so if you’re interested in the topic, there are some articles linked at the end of this post that you should definitely check.
But, as always, there is no absolute right or wrong: I do believe that for simple interfaces — and provided one keeps accessibility in mind as a priority — this can be a very refreshing approach, with a strong visual identity.
Copying the UI
I particularly enjoyed copying this UI because of its hidden complexity. While apparently minimalistic, the gradients, drop shadows and inner shadows needed to achieve this particular look and feel are quite complex.
I spent 4 hours trying to replicate the default button: I thought that once I had that right, then the rest would sort of come naturally. I had to think about how light and shadows works in the physical world, and it forced me to take care of every single pixel, something I was not used to do anymore, as my job as a UX Lead is usually more on the strategic side.
Then I spent and couple more on the accent button — the red one. By inverting inner shadows and fill gradient direction, you get the illusion of a concave element, instead of a convex on like the rest of the buttons.
After that, in one hour or so I was able to replicate both screens, although I had to change the fonts and the round image. You may also notice that some details of the slider are a bit different from the original version.
Key take aways from week 3
My key take aways after spending 6 hours dissecting Legierski’s work are:
- Put some color in your greys.
- Patterns are good, but thinking outside the box is good too.
Put some color in your greys
When you look at Filip Legierski’s mockups you may think that they’re in black and white, but they’re not. Even in what look like greys, there is always a hint of color, which creates a more vibrant result.
I’ve made a completely desaturated version of the mockups so you can check the difference.
The desaturated version is not bad at all and perhaps looks more classy, but the original colors look more alive.
This is actually a technique used in traditional arts too: one of the very few things I remember from an illustration course I took years ago is that adding to grey a bit of color, or to a color a bit of its complementary one — for example, a little bit of green into red, or a little bit of orange into blue — usually makes it more sophisticated. Of course for computer screens this must be adapted to the additive system, but it works nonetheless.
On a whole different level, it’s also what Caravaggio did by always having some light into shadows.
Patterns are good, but thinking outside the box is good too.¹
I think one of the reasons why there’s being so much talking about neumorphism is simply that it’s different from what we’ve been doing for the past few years. Yes, it builds on the old and abandoned skeumorphism — but didn’t the Matrix build on Plato’s cave myth? Yes, it may not be good for complex UIs and it may need strict rules to be applied in an accessible way, but it can be applied and it is new. After all, as humans, we like innovation, don’t we?
¹ Except when you put six wheels on a car. That was a bad idea.
Related articles
As I mentioned at the beginning of the post, here’s a few handpicked articles that shed a lot of light on the good, the bad and the ugly of neumorphism:
- “Let’s talk Neumorphism and Accessibility”, where Uyen Vicky Vo eloquently explains the problems with neumorphism and accessibility. A million claps.
- “Neumorphism shows accessibility is still a UI afterthough for some” by Stephen Gossett, describing the (short) history of neumorphism, and how Michael Malewicz, the designer that helped popularize it, discusses its pitfalls.
- “Neumorphism in user interface” by Michael Malewicz himself, describing the pros and cons of this style.
- “Is there hope for neumorphism?” by Sam Vitale Kofman, who explains how to avoid its pitfalls.
That’s it for the first week. I’ll be publishing a new copywork every week. I hope you’ll enjoy it.
