UI & UX: FLAT DESIGN

“The proper study of mankind is the science of design” – Herbert Simon

This is the second installment of UI & UX series! I’m super excited about this series, and if you missed the first one UI &UX: What Are You check it out before reading this, unless you don’t care, in which case I hope you still find this interesting 🙂

UI has gone through so many trend shifts over the past three decades, and for good reason. Throughout 99.999% of human history graphic design was meant to be looked at. Communications design was for the most part motionless up until the first television and LED technologies displays were made. But at that time, there was no interaction between the user and the content. All of this changed when the first consumer computers his the market. And then came the phones, the blackberries, the laptops, the tablets, the superphones, the smart watches and wristbands, and more recently the VR and AR. We’ve learned so much over the years by the exponential jump in human computer interaction.

I guess we can all agree that the tech world went into the field of UI a bit blind. Granted, the tech wasn’t yet capable of compiling 20mp photos as background images or running smooth transitions, but even so, the first UI’s were a mess. But it got better. Thanks Apple.

OSX1 and 2 were groundbreaking for being the first full UI language that maintained a high standard of simplicity and beauty. Apple’s take on 3D icons was different than the status quo. The icons were incredibly detailed and reflected off of the surface that they sat on. The background could withstand a high resolution image and the color scheme didn’t deviate outside of the realms of light blues, cool greys, and black. Linux is to credit for much of this, but Apple really polished things up. But today, it looks old. And here’s why.

Simply put, screens were not 3D dimensional, they were, and still are 2D. UI is different than most forms of media because with UI you are directly interacting with it. Its a bit of a nasty combination when someone tries to mesh curved 3D icons with a 2D display. The display is a layer, and we are more used to seeing things layered on top of each other as opposed to marbles hovering over the top of flat surfaces. We like flat on flat, because it makes sense, lol and I know that is baseless, but I’m confident about this hypothesis.

Graphic designers and communications designers have known this for decades upon decades. Flat simplistic typography and directional logos have been the standard for almost all public transportation systems. And we’ve never really given this much thought, but they’ve been far ahead of the curve when it comes to modern UI. But we should have indicated that, because in a sense transportation is a primal form of user interfacing. We want to go somewhere, so we interface with the signs and monitors to get to where we need to go. The difference is that we are literally operating as both the user and the mouse when we are navigating.

I would have never said traffic signs are fantastic design pieces, but for some reason I really believe it now. It was ahead of its time because it had to be. Designers didn’t have the liberty so to speak to toy around with different design languages because public signs can be the difference between life or death in many instances. So I think its that sense of urgency to “get it right” the first time that bread so a pure and primal UI with public Transportation. And so now I want to give credit to Microsoft for stepping outside of the 3D boundary and rethinking what UI really should be. And wouldn’t you know it, they found inspiration from exactly what we were just talking about a few sentences ago, and they named their new design language “Metro UI”. And this design language is still core to who Microsoft is today in the new world of platform design.

And it didn’t go unnoticed. Microsoft was never known for changing the UI landscape, but this was the first time that it blatantly and forcefully did so. During this time, almost all UI’s from websites to smartphones and tablets were sticking with a 3-dimensional design language. And I think the general tech cultural slept on Metro design for quite a bit because of Window Phone’s abysmal market share. Slowly but surely, the giants started integrating their own versions of Metro design into their design language, starting with Google “Material Design”.

Material Design is a great example of innovative design. As I’ve mentioned in so many previous posts, good design is not entirely original. It always piggybacks off of something else that is clearly working. But its still unique in its new inception. Google did a much better job at incorporating a beautiful array of color pallets into its design language. Microsoft’s Metro design was mostly black and white with a few sparks of dark colors which if personalized wrong could end up being pretty ugly. But Google chose a much lighter and minimal color palette with sharp edges and clean variations in shading. It gives off a much more inviting appeal, and reminds me of some of the picture books I read as a kid. Something else that is particularly intriguing to me is the amount of layering with Material Design. 3D was abandoned, but Google managed to keep a multi-dimensional feel in a 2D package. You’ll notice that there are slight shadows protruding out of the sides of flat elements in the UI. Its slight enough so that it still feels flat, but its shadowy enough that it seems very content rich. This was a super smart approach to flat design and makes it one of the most minimal design languages for large platforms to date.

Apple eventually found itself in the mix also with iOS7-8. This honestly surprised me because Apple is ironically very conservative. When something works, there is a 90% chance that it won’t change for a long time. Especially when it comes to UI. And for good reason. Apple’s fan-base is very large and it consists of many non-tech savvy people. So the slightest change in their UI and UX could confuse the masses for months. But iOS7 was a welcome change for the most part. Apple too found a way of going flat while maintaining a sense of dimension. They kept their rounded edges and they kept a lot of blurred effects from previous iOS generations. I personally love Apple’s descision to up the stakes with their transparency and blur effects throughout the UI. This gives flat design such an immersive feel and sorta makes the flat icons seem more “living” if that makes sense. In contrast, Google’s material design can seem like glorified Lego macro shots. But Apple’s use of super neon colors, blended color palletes, and ultra-blurred transparency gives it a bit more depth than your typical flat designs.

forest-patrol

At this point you may be asking why I’m only focusing on the big name brands. Well the reason is that these companies are platform companies, meaning that the majority of tech firms and startups are building apps and services FOR these large platforms. Whether its the web, Android, iOS, OSX, or Windows. And so essentially these companies set the tone for what the future of design looks like, not because they are so admirable or such design geniouses, but in order to make an app for these platforms you end up following the design language instructions that the SDK supplies you. So when Apple goes flat, Apple apps go flat, and when Google goes flat Google apps go flat, and when Windows goes flat, Windows apps go flat. And when all of these are going flat, web designers go flat. Its really a beautiful thing. Here are a few examples of this 🙂 Enjoy!

 

 

Advertisements

Express yourself....

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s