Michal Malewicz Profile picture
Jun 11, 2023 11 tweets 4 min read Read on X
10 years ago flat design changed everything.

Apple debuted iOS 7 and let go of Steve Jobs' favorite - Skeuomorphism.

But there's one thing most people don't realise.

That change is PROFOUND on a cultural level.

A 🧵 skeuomorphism flat design
When the first iPhone came out, it redefined an entire industry.

Most people don't realise how important Skeuomorphic UI was to achieving that.

👇 Image
It used familiar metaphors like bookshelfs, realistic microphones or torn paper notebooks so new users can easily understand the UI. Image
And it 🦆ing worked!

People of all ages were using these devices with ease.

Naturally.

So why change it? Image
Jony Ive took over software design in early 2010's and with his love of minimalism pushed it towards flat design.

Most people initially hated it... Image
But the reasoning was sound:

people got used to the phones already, they don't need to be guided be real life metaphors anymore.

Realistic looking buttons gave way to simple text links.

Flat, clean, minimal. Image
And at the surface level that's it.

But flat design did something else.

Something truly 🦆ING PROFOUND!

👇 Image
Before flat design, typical UI's were a series of complex, very visual bitmaps.

Creating them required A LOT of skill.

Learning design was SUPER DIFFICULT. Image
Flat design introduced UI's primarily made of vectors.

This is where @sketch and later also Figma and others allowed people to use familiar shapes like ovals and rectangles to create a UI.

No need to "paint the pixels" anymore!

More people could now do it! Image
Parts of skeuomorphism are still here with us.

Modern design styles tend to mix flat design with other concepts like brutalism, glassmorphism, aurora gradients and even some oldschool skeuomorphism.

Which style is your favorite? Let me know! Image
Have a beautiful day, and make sure to follow me @michalmalewicz to stay in the loop of these industry shifts.

I named and explained glassmorphism and neumorphism after all ;-)

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Michal Malewicz

Michal Malewicz Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @michalmalewicz

Mar 19, 2024
Master Hierarchy in Forms with my unique method.

Breaking it down in a thread 🧵👇 ui design login form
Don't start with fonts, colors etc.

Start with groups. Image
Even a small logic change can influence how the groups behave! Image
Read 10 tweets
Feb 16, 2024
We designed over 150 landing pages and for almost all of them we used this same layout formula.
Here it is: Image
We worked on a wide range of websites.

From nickelodeon campaigns for SpongeBob and Ninja Turtles, all the way to Car Sharing app sites (if you're from poland you know this one) and big fintechs / banks.

They all have one thing in common. Image
For practically all of them we used the exact same layout settings.

Want to know what they are? Here: Image
Read 11 tweets
Aug 28, 2023
A beautiful interface doesn’t mean that it’s flashy. It’s not about using all the available effects, colors, fonts and gradients 🎨 Image
Beauty lies in simplicity, proper hierarchy and a sense of ease when using a product 📱 Image
The standard 8p grid - nothing fancy 🙅‍♂️ Image
Read 8 tweets
Jun 15, 2023
The problem with Auto-Layout.

Junior designers take the wrong route here, so let's explain why with Teslas and Ducks!

A 🦆ing thread 🧵 auto layout explained with ...
This is a Tesla.

It can drive itself (self-driving AI)

Now hear me out. Image
Would you use a self-driving car without knowing how to drive yourself?

Would you fully trust that it will get you there?

It's illegal and... Image
Read 10 tweets
Jun 14, 2023
The Deep Glass Material. 🧊

While exploring spatial design I accidentaly created a slightly different glass material.

It's glassmorphism with a touch of clay-like structure.

Here's how to make it yourself.

A 🦆ing thread 🧵
This is a graphics design exploration.

Non UI design related but FUN!

I used @sketch and it has a couple of benefits like shadow overlays and background blur saturation.

You can use other tools if you like - it will be similar anyway. Image
For the effect to look good you need a vibrant background. A gradient looks nice.

Doesn't have to be 3d - it's just an example.

Start with a simple vertical pill shape with a linear fill. Image
Read 10 tweets
Jun 13, 2023
There are 5️⃣ Spatial Design principles that Apple shared in their guidelines.

Let's explore them without the jargon.

A 🦆ing thread 🧵 Spatial Design Principles
Let's start by saying how important it is to start your spatial explorations with these.

Many example interactions/animations shared on social media go against these rules and do random stuff.

There will be time to experiment with the goggles on! Image
Principle 1: Familiar experience

Don't reinvent the wheel. It's mostly like the flat iPad apps you already know with a couple of extra depth-based interactions.

See that main window?

It looks familiar because it should! Image
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(