From the desk of Edmundo Santos

Product Designer & UI Developer

The Notchless Pixel

After my OnePlus 3 smashed into the ground – for the third time, I decided it was time for an upgrade. I was waiting for the release of the Pixel 3 but was a bit disappointed by that notch, not to mention the price.

Spock: It's only logical

After doing some research on different models I picked a Xiaomi Mi Mix 2S. The built quality of this phone is outstanding, it supports wireless charging, has 6GB of RAM, Snapdragon 845, and most importantly: it has no notch.

There is a problem though: it comes with that horrible MIUI. What I don't get it, is why would they ruin such a good piece of hardware? The whole Android-trying-to-be-iOS thing really doesn't work IMHO… so inspired by Linus’ video on how to turn the Pocophone into a Pixel I deviced to do the same with the Mi Mix 2S.

For this guide you will need:

  1. A Xiaomi Mi Mix 2s
  2. The Pixel Experience ROM
  3. The Google Camera app

Got everything you need? Cool! Let the hacking commence!!

1. Unlocking the Bootloader

  1. Enable Developer Tools on your device by going to Settings › About Phone, and tapping on MIUI Version for about 7-10 times. You should see a message saying “You are now a developer”.
  2. Enable the OEM unlocking option on your device by going to Settings › Additional Settings › Developer Tools.
  3. Download the Mi Unlock tool and sign in to your Mi Account.
  4. Shut down your phone and hold volume down and power button to enter Fastboot Mode.
  5. Connect your phone to your PC using a USB cable and click “Unlock”.

Your phone is now unlocked! You will see a “Unlocked” message when turning on the phone. By the way, if you just got the phone you might need to wait 72 hours after the account was created in order to unlock it.

2. Installing the custom ROM

Now that you have your bootloader unlocked, you're free to do whatever you want with your device. Head over to XDA and follow the steps to install the Pixel Experience ROM.

The device should performs exactly the same – if not better, and the clean Android UI fits the hardware like a glove.

3. Installing Google’s Camera App

It's no secret that the best thing about the Pixel is the camera, and what plays a big part in making the camera perform so well is the software. Some developers have taken Pixel's Camera app and ported to a wide range of devices.

After some testing, I found out that the apps ones ported by BSG perform great with the Pixel Experience ROM, specifically the MGC_6.1.021_MI8_Vc apk.

The image quality is way better than the one you get with the original camera app. It comes out-of-the-box with Portrait Mode, Google Lens, and Night Sight. See the Spock photo above? Shot with Mi Mix 2S on Portrair mode 🤳

Hope you enjoy this guide! Truth be told, the main reason I'm posting this here is for Future Ed’s benefit, in case he needs to do it again.

Coding Design 🦄

Coding Design

More often than not, design is seen as merely aesthetics. Many organisations separate design from the development process, with designers handing static screens and prototypes to engineers — and in worst-case scenarios designers and engineers don’t even sit together. In the world of interactive design, functionality should play a significant role in the design process.

Code shouldn't hurt your creativity. It should enhance it.

Knowing how to code allows you to make smarter decisions as a designer, it will help you to bring additional value to your work and projects. You don’t necessarily need to write production-ready code, but you should at least know about it as you will gain an understanding of the challenges an engineer faces.

Now… should engineers design? Isn’t the opposite true? I’d say maybe not designing screens per se, but they should definitely be part of feedback calls with customers. Listening to those calls help us better understand how the user feels about the product, what are their pain points, and what are the bits they love, so everyone benefits.

I’d say 25% of the real design work happens after a designer hands off their designs. That’s when engineers start pressure testing your designs, and they’ll find new constraints and edge cases you never expected.

So my advice to you, fellow designer, is to learn how to code. Think of coding as another tool in your design tool belt. Start small with HTML and CSS, throw something together in the browser to quickly test an idea or model an aspect of how the interface should behave. Then take up a notch with JavaScript and you will be surprised at what you can achieve. Even if your code doesn’t get shipped, think of it as a communication tool, hand it to engineers to demonstrate how the interface should function — it will always be better than still images.

We spend hours designing for a medium that’s interactive and responsive, but we start by producing mockups that are static and inflexible. If great design is not only aesthetics but also how it works, then it’s time to make development part of the creative process.

So that’s my take on the “should designers code” debate. In the end, it's not about your job title, but about your responsabilities. Remember, code is just another tool, and if it help you delivery better results, why not use it?

If you have any thoughts you want to share, feel free to drop me a tweet.

Special thanks to Kevin, Paul, and Eoin, who have really helped me improve my coding skills in the last year – and consequently my design output.

Reading Tip‌‌‌‌ #1

“It’s tempting to judge what you read:

I agree with these statements, and I disagree with those.

However, a great thinker who has spent decades on an unusual line of thought cannot induce their context into your head in a few pages. It’s almost certainly the case that you don’t fully understand their statements.

Instead, you can say:

I have now learned that there exists a worldview in which all of these statements are consistent.

And if it feels worthwhile, you can make a genuine effort to understand that entire worldview. You don't have to adopt it. Just make it available to yourself, so you can make connections to it when it's needed.”

Occasionally I'll find myself browsing Bret Victor's website. I'm usually looking for inspiration and I am always curious to see what he is working on.

This reading tip is from a 2013 links page, you'll find additional reading tips and a fair amount of book recommendations and links about powerful seeing, and powerful representations for scientific thinking. Enjoy it!

Waiting for inspiration

There is a popular notion that artists work from inspiration—that there is some strike or bolt or bubbling up of creative mojo from who knows where… but I hope [my work] makes clear that waiting for inspiration to strike is a terrible, terrible plan. In fact, perhaps the single best piece of advice I can offer to anyone trying to do creative work is to ignore inspiration.

I'm currently reading Deep Work by Cal Newport and found this great piece of advice. There's an article by David Brooks in which he summarizes this more blunty, saying that you should think like an artist but work like an accountant.

If you feel like distractions are hurting your productivity, go buy this book, I can't recommend it enough.

Why animate?

When done well, animations can add valuable interaction and feedback. They enhance the emotional experience, bringing delight and adding personality to your interface. In fact, to animate means bring to life.

Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface.

— Aarron Walter, Designing For Emotion

No animation is unnatural

You click on a “New” button and a form just… appears from nowhere? You click a “X” to close a modal and… it just vanishes into thin air? That is unnatural and it’s what we should be avoiding as designers. Nothing in the real world does anything as jarringly as just swapping states. If that happened it would feel like a glitch in the matrix.

Take for instance the carousel interface below: without any animations, could you tell that it is indeed a carousel interface? Are we offering the user any clues other than changing the background color and emoji when we swap the panels?

If you toggle the animation (go on, I wait), you'll see how much nicer it is to understand the relationship between the elements and the flow between different states – you instantly get a sense of depth of the interface, it feels faster, it is now enjoybable… you feel that it is truly alive. 😊

What makes a good animation

So we know we should animate, but what makes for a good animation? What should we focus on?

First of all, you should animate exclusively using opacity and transform properties, anything else will trigger a browser layout or paint, which are expensive operations. That's the only way to keep your animations running at a smooth 60fps rate.

The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. The higher up you start on the timeline waterfall the more work the browser has to do to get pixels on to the screen.

Secondly, animation is all about timing:

  • Try to keep your animations fast: usually around the 300ms mark
  • Animate things independently: stagger individual elements instead of animating big blocks
  • Always use custom easings: the default ones are crap

That's about it. Remember that having fun is the best way to get the best results. Go the extra mile, play, experiment, and be happy with what you do. Try, iterate, and polish!

The Scariest Moment

Happy days: today I'm releasing a new version of my website! 🎉

I decided to throw away the previous one (✦ 2014 - ♱ 2018) and build this one from scratch using Gatsby.js, a static site generator for React.js.

Because I was already learning about the new CSS Grid system, I decided to use it for designing this baby. I started with some rough sketches on Sketch (ah ha!) and then moved on to design in the browser. FirefoxDeveloperEdition has some excellent tools for working with CSS Grid layout, I highly recommend it.

Here's a list of things I plan to do next with this website, in no particular order:

  • Build a library page with books I'm reading, books I've read, and books I'm gonna read
  • Write articles about stuff I'm working on, what I'm learning, or whatever I feel like writing really
  • It would be cool to have a photography page where I can share some of my pics too, definitely going to copy some ideas from @stammy's website
  • Build an about page (meh)

The website is not fully responsive yet and there are probably lots of bugs, but oh well. Please report if you find any bugs. 🐛

On each and every one of the blogs I've started in the past I posted this quote, so here it is again:

“The scariest moment is always just before you start. After that, things can only get better.”

— Stephen King

That's it for today, let me know what you think.