Six Lessons From 15 days of Replicating UIs
Thoughts from a UX/UI designer who believed he would finish a UI challenge in a few hours crammed into a lazy Sunday afternoon. News flash: he didn’t.
Hello there. You might not be aware, but in late May 2020 I graduated from Ironhack São Paulo’s UX/UI bootcamp. Neat stuff, check ’em out!
In the context of the tech industry, I like to introduce myself as a UX/UI Designer with a sweet tooth for fine-tuning interface layouts. This is due to my personal background: I’ve always toyed around with visual design on many different media, among which the ones at Adobe Creative Cloud.
In my case, this means that I didn’t have too much trouble learning the ropes of prototyping software, which is a part of design creation that I enjoy a lot. I’m the type of person that struggles with pixelitis — a term I very much just coined (© 2020 — Bruno Araújo) for being obsessed with pixel-perfection.
It’s my belief that I’ll always have a lot to learn when it comes to different prototyping tools, but I do consider myself pretty proficient if I say so myself at my preferred prototyping software (more on this down the line).
So when I decided I would challenge myself and replicate 15 screens from total scratch, little did I know that I was in for an arduous ride, which taught me a lot about my own biases as a UI designer.
Let’s take a peep at them below.
The challenge:
Replicating 15 screens from their PNGs, on your preferred prototyping software.
No inspect tool, no layer-peeking, no reference other than what my two eyes were able to apprehend. Originally, this is a daily UI challenge, meaning that across 15 days I was supposed to put aside 30 to 40 minutes to replicate each screen. I chose to work with Figma, as I am very much familiar with it.
Of course I thought I could pull it off no-sweat in a lazy Sunday afternoon.
But let me tell you, was I wrong.
Not only it took me a lot more time than I had anticipated, but I found myself spending countless hours in things- such as the nerve-wrecking mission of browsing through Google Fonts and toggling all types of filters in order to find the closest font to the one displayed in the PNG.
I compiled these tiny insights — that dismantled so easily all the assumptions I had brought into the challenge — in the 6 lessons below:
Lesson #1: This thing takes time.
A lot of time. Even the easiest of peasiest of screens on this challenge invariably took me longer than expected. Doing UI takes time— just the idea of moving things around, tweaking colour/size/opacity/padding/margin, making sure colours don’t clash, making sure there’s enough room for breathing between UI elements, etc. All of these are things that I personally enjoy, therefore I don’t even see time flying by as I delve in the nitty-gritty of UI.
It is very easy to underestimate the time it will take to recreate a screen — and that’s considering that every little design decision in front of you has already been made in this particular UI challenge; now imagine having to create everything from scratch.
Lesson #2: Typography is an endless endeavour.
I consider myself mid-level in terms of my knowledge of typography. I inspect pages on a daily basis to learn more about their typographic choices, and it’s not unusual for me the experience of landing on a page and already knowing the font they’re using. However, this simple UI exercise had me rummaging Google Fonts for hours, trying to pin down just the appropriate type of serif for this or that screen. Not having the handy inspect tool to assist me, and being quite detail-oriented as I tend to be, typography-hunting amounted to the majority of the time spent doing this challenge.
And that’s not to mention type tracking and kerning.
Lesson #3: The pain of drop-shadows.
There is a bazillion ways of doing drop-shadows. Literally a bazillion — the number of possible combinations regarding offset, blur and spread is rather substantial. Not to mention that the way shadows will be rendered depends heavily on the software/browser involved. This means that there’s an infinity of ways of reaching a particular effect, and with no reference other than visual perception, most of the job consists of a tedious and painstaking trial and error. Pixel by blurry pixel.
Also, don’t get me started on neumorphism.
Lesson #4: Unrelated — a palette’s range can be an issue.
While the reference PNGs in this challenge were rather forgiving in terms of palette breadth, I did come across some nifty gradients and tricky coloured shadows. This lesson is taken from the standpoint of a limited palette, but foreseeing problems related to design systems and more audacious colour schemes. Having what we’d call in Brazil “a fruit salad of a mess” of colours can be highly functional for different contexts, but god forbid all those 27 different colours are not well documented. What a nightmare it is to have 15 different colours for roughly 5 different UI elements in a page. Not to mention states, which only add to the complexity of a webpage’s colour range. Sifting through a list of hexadecimal codes in order to find the exact one for an element’s property can be incredibly time-consuming and not at all fun.
In this regard, design documentation & handoff (generally understood as having a design system) is an extremely important step for digital products.
Lesson #5: Avoid pure black on pure white.
This challenge began with layouts so friendly and simplified that they would use pure black and pure white, probably in an attempt not to divert attention from shapes and forms. As the exercises progressed, colour and layout became more interesting and complex. As I finished my last exercise and rolled all the way up to see all my beautiful designs, having spent considerable hours squinting at zoomed-in pixels and running back and forth trying to spot subtle differences between my creation and the reference PNGs, my eyes felt kind of offended at the combination of pure white with pure black?
Maybe my eyes were biased from having just finished an intense UI challenge. But please oh please, I beg of you: do not use pure black against pure white on your layouts. It’s bland, it’s unnecessarily aggressive, and most alarmingly, it’s the EQUIVALENT OF TYPING IN ALL CAPS AND EXPECTING PEOPLE NOT TO THINK YOU ARE YELLING AT THEM.
Lesson #6: There is no amount of theory that will teach you what practice will.
Nothing new under the sun, and as the old adage goes: practice makes perfect. And what practice has to teach you in the scope of this UI challenge has to do with:
a) Discovering new ideas and ways of conveying information visually;
There’s no way around it, really. When it comes down to mental models and what we remember from our favourite apps, there’s a limited amount of screens we can draw on the spot from memory. Collecting references is a must for this profession, and doing UI replicas is a great way to kick-start that pool of references to draw ideas from;
b) putting your brain to find a way to reach a result without knowing what the original screen did;
This is almost like piecing a puzzle together — or rather, multiple puzzles: particularly when whatever you’re trying to replicate has many ways of being done, the act of planning out your actions from the distance, before laying down squares on the canvas, is a powerful skill in itself. This is what allows us to come close to our mind’s eye — you know, the feeling of trying to add a flavour to a particular element, or knowing just how to tweak a page’s element in order to get a more neat, spacious overall look. It all starts in the mind’s canvas. The quicker we manipulate forms in our minds, the quicker it is to do the same on the actual software.
c) comparing your replica with the original screen, spotting a few gross mistakes, and fine-tuning the design;
We’ve all heard this phrase before: “so-and-so has an eagle’s eye”. Well, maybe we can’t change the biological structure of our pupils in order to get enhanced vision as eagles do, but we sure can put our eyes to test by comparing two very similar screens, with only minor, subtle differences between the two. Actually, that’s exactly what this daily UI challenge is about: while doing the challenge, I didn’t for a second expect my design to become a perfect replica of the PNGs I was referencing; getting close enough as to confuse the bypasser’s gaze is already good enough for me.
d) realising and building a solid understanding of which details matter to be brutally mimicked, and which do not.
There’s nothing more frustrating when you’re a beginner at UI design than to hear someone more experienced saying “you’re worrying too much about this thing that doesn’t matter at all”, because you don’t have your own gauging of what matters or not. I get it, I’ve been there. It is pretty off-putting.
Good news is: practice will make you cross the chasm and reach the other way and be able to confidently parse out which details should be paid attention to and which really shouldn’t. It’s as simple as that. And carrying through a challenge like this one will definitely give you a palpable confidence in this regard.
Wrapping up
If you’re still reading this article, congratulations! 🎊 You’ve just earned yourself this next piece of insight, from my experience unto you: why all of this matters?
Why did I chose to write about this? Well.
I’ve been out and about doing my freelance work here and there, and as I talk to many different potential and actual clients, I realise that they have a lot of assumptions (and misconceptions) around UI design which could do with some rewiring. Some of them toss the word “UI” around as though it was a lightweight trinket, a frivolous last-minute detail to be hastily added in order to beautify the façade of a product’s “real” value. Yikes, right?
Don’t get me wrong: I’m not saying that these people do this on purpose. I believe the biggest takeaway from this post is that in acknowledging my own biases and misjudgement of the process involved in carrying through this challenge, being a UI designer myself, I am able to see how some thought patterns are naturally established by human beings, including myself, but particularly by people who are not intimate (if familiar at all) to the process of design creation. I’m an not exempt from making mistaken assumptions when it comes to UI design, and if I want to change those, I must be the first one to acknowledge them.
Then I can raise flags and tell clients that they urgently need to listen.
Mind to spare some nice claps? 👏 Much appreciated. Find me on LinkedIn.
