How I‘m making myself a better UI designer through copywork. Week 2.

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

• Figma file with all my copywork
• Adobe Illustrator file with 20 editable meshes I created, that you can use freely, no strings attached.

Yes, this week there’s a freebie.

Week 2

This week I decided to copy one of my favourite websites of all times: stripe.com. But with a couple of differences compared to last week:

• rather than copying a whole page, I focused on one particularly challenging piece of design: the “living” gradient mesh;
• instead of superposing my copywork to the original design, I challenged myself to copy it “bare eye”.

The living mesh gradient background.

About Stripe.com

I’m a huge fan of Stripe.com and I regularly check it: every new version of stripe.com is a joy to the eye, with great attention to details that sometimes are barely noticeable. In the current version, in addition to the gradient mesh, there are a few other interesting elements:

• the top navigation microinteractions;
• the interactive spinning globe;
• the sharpness of illustrations and screenshots: this is mostly due to the fact that they’re not actually screenshots, but rather the result of a very clever use of SVG and CSS.

Top navigation microinteractions.

Interactive spinning globe.

Illustration sharpness: it doesn’t get better than this.

Copying the gradient mesh in Illustrator

As I mentioned before, the mesh gradient is what I wanted to copy this week. So, as usual, I made a screenshot of the original design and started digging.

The first thing I realized was that Figma wasn’t the right tool to recreate the gradient mesh. Maybe I could have done it with multiple layers, but in the words of Achille Perin “it will very quickly become a nightmare”.

This is where Adobe Illustrator enters the scene, which has a tool called, surprise suprise, Gradient mesh.

I‘m not going into the details of how to use the gradient mesh, as there are many tutorials on the internet about it. I’ll just say it’s a lot of fun. It took me about a couple of hours to get a mesh that, although not exactly identical to the original one, I was happy with. You can check it in the screenshot here below.

The original Stripe design on the left, and my gradient mesh on the right.

Copying text and layout in Figma

I then moved to Figma and started playing around with text to try and understand what what the interaction between the big hero title and the gradient mesh.

This is where I fell short, as I wasn’t able to do it with on text layer. Instead I had to use several text layers one of top of the other, all set to Overlay. Not an elegant solution.

Buuuuuh to me!

The original screenshot from Stripe.com on the left, and the copywork on the right.

Key take aways from week 2

My key take aways after spending 5 hours dissecting Stripe’s homepage are:

1. Gradients are powerful
2. X+1+1+1

Gradients are powerful

Plain colours are all well and good, but gradients in UI are the equivalent of lighting in other visual arts, like photography, cinema and painting: they set a mood, organise space, give a sense of direction and create dramatic tension. Yes, in UI design you can use photography (and cinema… and painting!) like in the Adobe “Running on Experience” landing page.

You’ll find more great examples of gradients in websites in this “Trendy Gradients in Web Design” article by Awwwards.com.

Adobe “Running on Experience ”uses cinematic lighting to create dramatic tension

Julie Bonnemoy uses neutral gradients in the background and acid ones in the foreground to achieve a very intruiguing look and feel.

X+1+1+1

This is, I think, the greatest lesson from Stripe.com. Sure, there are many websites out there using “trendy” gradients, but how many turn them into a living background that is a memorable moment in an of itself?

The typical inspiration process falls short: we start surfing web galleries looking for inspiration, we fall in love with a particular trend (gradients, bold typography, minimalism, you name it…) and then create our own design based on that trend. It allows us to design something that may be nice and modern, but hardly memorable. So there must be more.

If we find a trend — let’s call it X — then instead of copying that trend we must ask ourselves “How can I add something to it? What’s my +1”. And then again. And then again.

In the case of Stripe it could be something like:

1. There’s an X trend, which is the use of gradients in design.
2. Instead of using a gradient, let’s use a gradient mesh (+1)
3. And rather than static, let’s make it move (+1)
4. And rather than use it as a background, it will play with the text (+1)

I’m putting here the same video I used at the beginning of the post so you have one more chance to admire this absolute masterpiece.

The living mesh gradient background.

That’s it for the first week. I’ll be publishing a new copywork every week. I hope you’ll enjoy it.

Next week I’ll try to copy something visually richer to challenge myself. Do you have any suggestion?