Exploring Graphic User Interface Styles – from Minimal to Futuristic
A user interface (UI) can come in many styles ranging graphically from very simple, all the way to extremely complex. In this article we are going to explore a range of styles demonstrating that there isn’t just one recipe for creating a good looking, and ultimately successful user interface. Of course, not every style is represented in this article; we will be exploring several high-quality examples, representing a wide range of graphical styles from simple to complex. Enjoy!
Section 1: Minimal
A minimal style UI relies heavily on type, symbols, and white space to create a clear and simple user experience. Broad solid colors or absence of color altogether are often found in these interfaces. Since graphics are used sparingly, the layout of the elements is extremely important. When done right, this makes for a clear and direct interface.
HelvetiNote™
HelvetiNote™ by cypher13 uses a great mix of font weights and sizes, as well as thoughtfully placed icons and interface elements to form a fantastically minimal UI. This UI proves that you don’t need highly detailed graphics to stand out from the rest of the crowd.
HTC 1 Concept
When designer Andrew Kim decided to concept a new piece of hardware, he envisioned a complete solution marrying the hardware and user interface. In doing so, he created a simple and minimal experience. If you haven’t seen his post about it yet, it’s a must-see.
Things
The guys at Cultured Code created a very simple and graceful UI for Things, a to-do list manager. Available for both Mac and iOS, their design features a muted color scheme, crisp icons, and a very Mac feeling UI.
Section 2: Detailed Graphical
Detailed graphical interfaces rely heavily on graphics to create the user experience. Specifically, you’ll find things like textures, vivid color, gradients, highlights, reflections, and shadows. Though they have a bit more going on than a minimal interface, these UIs are still easy to digest and are generally easy to use.
Bills
Bills uses bright color with an Apple-like bottom menu and wood accents to create a user experience for handling bills that is both unique and inherently familar to iPhone users. With its sharp graphics and user-friendly look, Bills has all the makings of success.
Beats
Using a non-standard color palette is just on of the many things that makes Beats stand out. Bjango’s mix of textures and gradients, crisp pixel-level detail, and unique styling makes this interface a winner.
Dream Touch
Each screen in the Dream Touch UI has its own color palette with a single dominant color. Add glossy effects to that, as well as dramatic lighting and a great presentation, well… you make this list.
Else Mobile
The Else Mobile interface has a unique menu system and interaction method… its subtle glows, background graphics and color give it a progressive and futuristic look.
Note: This interface has aspects of all of the sections: minimal, graphical, and futuristic. It really doesn’t fit in any one category, so I put it in as close to the middle as I could.
Section 3: Highly Detailed/Experimental
These UIs will make you think. With these interfaces, limits are pushed and usability is not always the number one priority. They often have odd shapes, unique layouts, high contrast and feature a very high level of detail. There is almost a subculture for this kind of design and it is not regularly found in the mainstream.
CYMIC – ttplayer skin
The unique lighting and highlights alone make the CYMIC player a great piece. Couple with that a non-standard, high contrast color scheme, and this piece really jumps off the screen.
Quarian
Ok, I had to sneak one of mine on the list, people tend to like this one, hope you do too. It’s shiny.
Insignia
Lance Thackeray’s Insignia takes a Midi Keyboard and a Media Player and mates them into a wonderful fantasy user interface. Each piece of this UI is finely detailed and his muted color scheme with bright accents add that extra touch of class.
Section 4: Futuristic / Fantasy
Found most often in movies and video games, these interfaces usually have a lot going on at once. Things always seem to be moving, flashing, beeping, pulsing, and blinking. Typically there is not a lot of detail in the graphics themselves, but an entire frame is always something to behold.
AdvancedUI: Status Screen
Zane Bien’s AdvancedUI is a piece that you must see in it’s entirety. At 1454×884 in total size, it’s massive yet each tiny piece fits perfectly with the next; the subtle glows and use of color are also fantastic.
Mark Coleran: Fantasy User Interfaces
Mark Coleran is a godfather in this style and is cited as the inspiration for the previous piece, AdvancedUI. Mark’s work has been featured in many blockbuster films, and most of it is on his website too. Make sure you click through and see the videos and screenshots of his portfolio if you’re not familiar with his work.
Ironman PDA UI
Perception created a lot of screen graphics for the IronMan 2 film, one of the standouts being the PDA sequence. Be sure to check out the “Stark PDA Final Shots” video on their website. What was very interesting is they had to design the UI to respond to mock gestures that Robert Downey Jr. made on a blank device beforehand and then composited it all together for the final shot.
3D Boat Information Screen
Stereolize created a series of user interface concepts for informational screens on Yachts. What could have been a boring series of gauges was transformed into a visual playground, displaying information in an extremely interesting and engaging manner.
Note From the Author
I had a lot of fun finding all these epic user interfaces and writing about them; I hope you also enjoyed reading my article. Check me out on my website or follow me on Twitter to keep up with my latest findings, articles and projects.
0 comments:
Post a Comment