Victor Profile picture
Apr 23, 2021 17 tweets 14 min read Read on X
How user interface evolved for the past 40 years ✨

Visual Thread 🧵
Xerox 8010 Star, released in 1981

It was the first commercial personal computer that had
such things as

- window-based graphical user interface
- icons
- folders
- mouse (two-button)
- Ethernet networking
- file servers
- print servers
- e-mail.
Apple Lisa Office System 1. Released on January 19, 1983.

It is one of the first personal computers to present a graphical user interface (GUI) in a machine aimed at individual business users.
VisiCorp Visi On. Released on December 16, 1983

VisiCorp Visi On was a short-lived but influential graphical user interface-based operating environment program for IBM-compatible personal computers running MS-DOS.
Mac OS System 1.0. Released on December 29, 1984

The Macintosh "System 1" is the first version of Apple Macintosh operating system and the beginning of the classic Mac OS series.
Amiga Workbench 1.0, released in 1985

Workbench is the graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers.

Workbench provides the user with a graphical interface to work with file systems and launch applications.
Windows 1.0, released in 1985

In this year Microsoft finally caught up with the whole graphical user interface craze and released Windows 1.0, its first GUI based operating system.
Windows 2.0, released in 1987

In this version, the actual management of the windows had significantly improved. The windows could be overlapped, resized, maximized and minimized.
OS/2, released in December 1987

OS/2 is a series of computer operating systems, initially created by Microsoft and IBM under the leadership of IBM software designer Ed Iacobucci.
Win 3.0, released on May 22, 1990

Windows 3.0 is the third major release of Microsoft Windows, launched in 1990.

Like its predecessors, it is not an operating system, but rather a graphical operating environment that runs on top of DOS.
Mac OS System 7, released on May 13, 1991.

System 7, codenamed "Big Bang", and also known as Mac OS 7, is a graphical user interface-based operating system for Macintosh computers and is part of the classic Mac OS series of operating systems.
Windows 95, 1995.

The user interface was completely re-designed since version 3.x. This was the first Windows version where a small close button was added to each window.

This was a huge step forward for Microsoft regarding the operating system itself and the unified GUI.
KDE 1.0, 1998 & Gnome 1.0, 1999.

Both KDE and Gnome are desktop environments for unix-like operating systems.
Mac OS X, 2001

In early 2000 Apple announced their new Aqua interface and in 2001 the company released it with their brand new operating system called Mac OS X.
Windows XP, 2001

As Microsoft tends to change their GUI completely with every major operating system release, Windows XP was no exception.

The GUI itself is skinnable, users could change the whole look and feel of the interface.
Mac OS X Leopard, 2007

The basic GUI is still the Aqua with its candy scroll bars and platinum grey, blue colors.

The new GUI features a more 3D look, with the 3D dock and lots more animation and interactivity.
The current state of user interfaces.

- Gnome 40. March 24, 2021
- KDE Plasma 5. 15 July 2014
- Windows 10. July 15, 2015
- macOS Big Sur, November 12, 2020

• • •

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

Keep Current with Victor

Victor 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 @vponamariov

May 1
How to design almost any UI element.

A curated list of 61 articles 👇
Buttons
---

1. Button Design – Get Site Visitors to Actually Click Your Buttons by @uxpin



2. Designing button states: Tutorial and best practices by @edwche / @LogRocket



3. The Definitive Guide to Buttons in UX: Part 1 by Lauren Waage

uxpin.com/studio/blog/bu…
blog.logrocket.com/ux-design/desi…
medium.com/@lwaage2019/th…
Text fields
---

1. Text fields from Material Design



2. Text Fields Design from Radek (this one is impressive!🤩)



3. UI Designer’s Guide to Creating Forms & Inputs from @molly_hellmuth

m2.material.io/components/tex…
thestory.is/en/journal/tex…
uiprep.com/blog/ui-design…
Read 22 tweets
May 24, 2023
Today I turned 34.

Here is an updated version of the most helpful tweet I've ever posted.

How to design almost any UI element?

A curated list of 34 articles 👇
Buttons.

1. How To Design Better Buttons by @101babich and @smashingmag

👉 smashingmagazine.com/2016/11/a-quic…

2. Desperately seeking squircles

👉 figma.com/blog/desperate…
Thanks @Southclaws and @figma

3. Designing A Better Back Button UX

👉 smashingmagazine.com/2022/08/back-b…

Thanks @vitalyf Squircled button
Text fields

4. Text fields & Forms design — UI components series

👉 uxdesign.cc/text-fields-fo…

from @uxdesigncc by Taras Bakusevych

5. Validate it. The right way.

👉 dev.to/vponamariov/va…

By me :) Input anatomy
Read 18 tweets
Nov 23, 2022
Five UI/UX tips to improve your landing pages 👇

#SketchDesignChallenge 🔥
1/5. Poor text contrast on images.

Make sure that

🔷 the text on images is easy to read
🔷 it doesn't cover any important objects behind it (e.g. faces or products)
🔷 text contrast is good everywhere, not only on images
2/5. Navigation.

Don't hide navigation under hamburger icons on desktop devices.

That will hinder users to find necessary pages.
Read 6 tweets
Oct 17, 2022
CSS Tip ☝️

I needed to make a pill component that should have had a 1px border.

But when on hover it should be doubled.

It wasn't that easy, and here is why.
If you simply make a 2px border on hover it will increase the height and width of the pill.

Since you don't know in advance what the width is, and probably the pill might be multiline, I don't think using fixed height/width is a good solution.
Instead, what I did is - I used shadows.

The first border is 1px shadow, and the second border (in the hover state) is 2px shadow.

And that's basically it.

A simple, yet nice trick.
Read 4 tweets
Oct 17, 2022
Some things designers should learn by themselves
by Michael McWatters (link at the end)

I SO MUCH liked this that I'm going to share some parts from the article 👇
🔸 32% of your time will be spent labeling buttons.

🔸 Blood will be shed over any question that begins, “Should designers…”.

🔸 All the research in the world is no match for your CEO’s opinion.
🔸 The design will fail on one platform, and that platform will be the one your boss uses.

🔸 The delta between what you designed and what gets shipped can be measured in light years.
Read 9 tweets
Sep 6, 2022
One UI/UX problem. Seven examples. One thread 🔥

Clickable area.

Do you make it right? Let's find out 👇
1/7. Sidebar menus.

Make sure that sidebar links have enough clickable space.
2/7. Vertical navigation.

A typical case is when the navigation links of a landing page don't have extra clickable space.
Read 8 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!

:(