Advertisement
Inspiration

Exploring Graphic User Interface Styles - from Minimal to Futuristic

by

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!

This Post is Day 9 of our Interface Design Session. Creative Sessions

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 1454x884 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.


This Post is Day 9 of our Interface Design Session. Creative Sessions
Related Posts
  • Game Development
    Art
    Designing 3D Environments: Lights, Camera, Polygons? Action!Environment 3d 400
    The jump from 2D to 3D isn't just big—it's trans-dimensional! 3D can be daunting, but let's try to ease the painful transition with a solid game plan for getting your game ideas into a 3D space. We're not covering the specifics of creating 3D objects here, but we will be discussing tips for putting these into a game scene and getting the most out of them visually and in play.Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Web Design
    Roundups
    Simple Visual Enhancements for Better Coding in Sublime TextSublime thumb
    Sublime Text offers thousands of extensions and settings to make a personalized code editor available for everyone. Right now, I’m going to show you some settings, plugins, themes, and color schemes to help make the coding experience more visually appealing. This won't just make your screen prettier, it'll make you a better coder!Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…
  • Web Design
    Design Theory
    Selecting Your Own Color SchemeDsfd scheme colour retina
    By now you should have a good idea of what color is, what each of the colors mean and have a good understanding of the different types of color scheme available to you. However, knowing all of that doesn't help if you have no idea where to get started, or how to put that information into action.Read More…