Bring to front
Posts
🐇 r1 takes us beyond smartphones

🐇 r1 takes us beyond smartphones

Rabbit r1 was introduced, Skeuomorphic buttons are in again, and other cool stuff related to design and tech

Luka Krcmar
January 11, 2024

I’m back after a more extended break, during which I got married and was on a honeymoon.

✦ Beyond smartphones ✦

Rabbit Inc. launched their AI hardware called r1, and it was genius.

This isn’t the first such device introduced; in fact, in the past few months, we’ve had AI Pin and Tab AI necklace, although the hype was not the same.

But what will their user interface look like?

Businesses face a paradox regarding app and software UI/UX.

RabbitOS illustration from their website

On the one hand, people are picky and want lots of features.

On the other hand, customers often don’t know what they want 🤷‍♂️

Steve Jobs said his approach was to figure out what customers want before they do.

Luckily, you don’t need to be Apple or have a massive war chest and army of UI/UX experts to adopt this philosophy.

Start with a simple UI/UX framework that traces back to human nature.

Think about what makes you want to keep using an app after the first time — simplicity.

It’s the concept that less is more.

The paragon of app UI/UX is no UI at all—an elegant experience that feels like magic, and things operate invisibly in the background.

And r1 gets pretty close with just a tiny screen and a button; you say what you want, and it gets done.

From basic tasks such as booking a flight or reservation to complex ones like editing images on Photoshop or streaming music and movies.

There is no need for a complex local setup, such as installing an app, a Chrome plugin, or typing code into a command line.

And the price is only $199 ⁉️⁉️⁉️

Slide from their keynote

I'm eager to see that this thing actually works and will probably order one as soon as it becomes available in my country.

It truly feels like we're entering a new era beyond smartphones.

✦ Learn more ✦

Skeuomorphic buttons are in again 🎉, and here’s how to create visually appealing, tactile buttons using Figma:

1. Start with Basic Elements: Add text, wrap it in a frame, and apply a linear gradient fill and stroke to create the first layer of lighting and depth.

2. Add Shadows: Incorporate three types of shadows to enhance the depth and create a realistic lighting effect. Adjusting the hardness and blur of the shadows is crucial.

3. Create the 'Light Notch': Add another frame, rectangle, or group. Apply a fill and stroke, reducing the opacity on the stroke to achieve a 'bevel' effect. This completes the default state of the button.

4. Work on the Pushed State: Duplicate the button, remove two-thirds of the original shadows, and add new ones with a glowing accent color.

5. Adjust the Stroke: Modify the original stroke by adding a new linear gradient with a slight stop using the same glowing accent color. This adds a 'shine' to the bottom edge.

6. Activate the 'Light Notch': Add a mostly white fill color with a tint of the accent to the 'light notch', and use the same accent color on the stroke.

7. Add Drop Shadows: Implement drop shadows to simulate light bouncing from the light notch onto the button. The Y value of the first drop shadow may need adjustment depending on the space between the button and notch.

✦ Clickworthy Hyperlinks ✦

Items.Design - A collection of Midjourney-generated 3D assets.

Screen Studio - Currently the best screen recorder around, if you ask me.

Amie - Newer calendar app that I prefer lately (over Cron).

Porsche Design System - Porsche's new design language, take a look.

Eagle - Started using this two months ago. It’s a better way to collect, search, and organize your design files logically and all in one place.

Introducing Figma in your pocket. Now you can start designing anytime, anywhere.
— Adnan Jaweed (@CrispyUX)
4:45 AM • Jan 11, 2024

Such a clever and logical implementation of capturing user feedback @tryamie
Every user-centric app should implement this.
— Luka (@LukaKrcmar)
3:12 PM • Jan 8, 2024