22/05/2013 - admin

The road to flat: making icon aesthetics more expressive

Screenshot20130425151742

Hello everyone! Today we want to go over a big and notorious change in visual styles for graphical user interfaces (GUI) and web design going on right now amid several background circumstances. In a decade, computers have become more portable, and the classic PC (including its three main species: Windows, Mac and Linux based systems) ceased to be the most popular device: mobile phones and tablets came to be preferred, since today they bring enough processing power, portability and memory capacity to fully support rich applications and Internet browsing.

In that line of thought, it could be said that design has undergone that same transition from desktops and laptops’ interfaces to mobile phones’, imposing new trends for all devices. However, It would be interesting to check what design processes were also involved upon the creation of the first computers around 30 years ago, what traits remain today and how they have evolved to opening the door for current trends.

Apple, a company that has gained recognition around the globe due to its dedicated design, will always be considered as one of the most important actors to take part in the foundation of the modern computing industry, along –evidently- with Microsoft, an eternal competitor. That being said, If a consideration of the visual evolution in computing elements should be done, it would be important to take a look at the origins of any of these two players. Participating of the micro computers revolution that took place in the 1970s, different young entrepreneurs took off with various projects that would eventually turn out to fill the world with the PCs we know today. Two of those well-know entrepreneurs were Steve Jobs and Bill gates, who planned innovative and revolutionary products. Both of them have presented key products for the history of informatics, although their companies have approached design differently.

What are the new styles grounded in?

When Apple started developing the UI to be used in the Macintosh, an actual artist was called into the software team to work on a grid of pixels and create the visual elements of the first Mac OS. The role of Suzan Kare –graduated from New York University- would be to make computers friendly and agreeable. Since then, the icons and other elements she designed have become universal through decades, and evolved into more contemporary images that respond to the new trends.

Screenshot20130419122654 This was the original control panel bitmap, designed by Kare, that was shipped with the Macintosh in 1984.   Screenshot20130419122335        Screenshot20130419122457 This icon would show up any time you turned on a Macintosh, and displayed a sad face in the event of an error.

What came after

With time, computers and UIs would improve and offer new elements. In 1990, the world saw a major release from Apple’s rival: Windows 3.0 was Microsoft’s third release of their iconic operating system and –according to Microsoft’s top executives- had suffered several improvements in different areas, and visuals were not left behind. Within this Windows version users were able to customize a desktop and change colors, and there were various icons for a wide variety of tasks, still designed on a grid of pixels. In the following years, that would radically change. It did change, but not only at the icons or User interface level: new styles later influenced packaging, advertisements and a huge set of elements related to branding, where –undoubtedly- logos had a key role to play.   Screenshot20130419113449 Microsoft logo’s changes clearly showcase the transition between various design trends, until the new Windows 8, based on the Metro design style.

The transition

Before Windows 8, there was a completely different panorama. Since 2001, with Windows XP and Mac OS X, the elements of the user interface gained the ability to resemble real life things and materials. Users of Mac OS X could enjoy since 2001 the Aqua GUI style which, in words of Steve Jobs, was designed in such a way that "when you saw it you wanted to lick it". Translucence, sensation of depth, shininess, shades, reflections and rich textures were since then a visual reference point. For the Windows operating system, one example of the graphic explosion was the plethora of themes for Windows XP. Patching the uxtheme.dll of the original theme lets users experiment with endless variations of colors and textures. The operating system soon opened the road for wood, fabrics, magma and more textures to reach the interface and a cartoon like style was the stamp that XP placed on icons for several years. This variety modified the way icons were designed. Although they were small, with a maximum size of 48x48 pixels, Windows XP icons already had support for 16 million colors, alpha channel and a cartoonish solid aspect whose viewing angle and perspective were defined as means of standardization among programmers and designers.   Screenshot20130425151501 Windows XP was part of the then emerging trend for enriched, more detailed icons, despite its limitations Later, Windows Vista and Mac OS X 10.5 Leopard allowed users to set big and extremely detailed icons on their machines. Although these enormous versions of icons were barely usable, they were memorable masterpieces of art nonetheless, with tons of realistic details. More than icons they were illustrations, clickable illustrations. Materials, anisotropic shading and lightning, the use of perspective and a solid appearance were the most common characteristics of these icons. Icons in Windows Vista got new features. Vista icons offered a new feature: a big image (256 x 256) could be added to the .ICO file. The icons in Vista needed to be compressed using the PNG lossless compression. The guidelines offered by Microsoft for Vista icons were much more detailed and contained instructions on how to set up the vanishing points, where to place the source of light and how opaque the shadows should be. One of the most remarkable characteristics of this general style was the preference of crystal replacing the old plastic look. Screenshot20130425151836 OS X set the mark for realistic, high resolution icons since the Public Beta, back in 2000 - Source: Iconshock Icons for Mac grew up to the huge size of 512 x 512 pixels and the ultra detailed illustrations were the symbol of powerful processors, high memory and excellent graphic cards on-board. Users of Windows had to wait until 2007 to have the Aqua transformed into the Aero Glass on Windows Vista. One of the most remembered characteristics of Windows Vista and Windows 7 is the transparent borders of the file explorer windows and the feeling of crystal icons. Windows adopted bigger icons for desktop and even web design was inclined to reproduce these aesthetics. Screenshot20130425151249 Windows Vista (pictured) and 7 followed the realistic approach at the end of the last decade Screenshot20130425150624 The iconshock set above shows the visual richness and detailing that defined Windows 7, where its user interface –along with Vista- favored the use of a hyper realistic style. The ideal of an "authentic, energetic, reflective, and open" theme (the acronym of Windows Aero comes from these concepts) of the operating system became possible because processors were more powerful, computers could use more RAM and hard disks augmented their capacities. The new hardware offered new graphic possibilities that had to be used to enhance the user experience and even Mac OS X transitioned in 2005 to use Intel processors in order to fully take advantage of the computing power of the latter. While operating systems tried to create an icy environment, the styles on the web were still living a paranoid time with a profusion of background textures, the animated gif was replaced by the almighty flash movie and sites used to show themselves as the paradigm of modernity being completely built only on Flash, with long, full animated intros, very creative loading bars for such intros and dozens of quick small moving parts all around the user interface. Icons for the web were not a special category yet; they were still an adaptation from the web aesthetics, completely skeuomorphic; IBM named the methodology RealThings in 1998, an era made out of glass, translucent plastic, brushed metals and water. Screenshot20130425151357 IBM RealPhone was part of the company’s vision of skeuomorphic applications in the late 90s - Source: Wikipedia

Generally speaking, there weren't many opportunities to make proper usage of icons on the web because of various reasons. Websites were mostly static; there were no complex web apps or functions that needed specific icons. For a page, it was enough to emphasize some links by placing a small drawing next to the text as seen on the Yahoo site from 1998. Web pages just needed to have a fixed layout where any images could stay in place without experiencing major variations because they were always seen on standard computer screens and the spirit was to make emphasis on textures and to raise the depicted element from the background simulating depth with shines and shadows.

What smart phones brought along

Icons started to be used on mobile devices around the year 2000, when the first true Nokia and Palm smartphones reached the market. The graphic style of these icons were at first copies of the existing styles of Aero and Mac OS, especially the cartoonish full colored 3D shapes were ported without major variations to these devices. Take a look of how the calendar and the calculator were made for the Symbian OS. Yet, there was some sort of reinvention when Apple started working on IPhone icons upon its launching in 2007.

Websites then had to be fully accessible from the small screens of the mobile devices. Most of the information, videos and images, were to be seen on those little displays which could not download great amounts of web assets and had to scale the original graphics at the cost of system resources. By 2010, there were resources already explaining how to adapt a website to be displayed on a mobile screen. That same year, the term responsive web was coined as a solution to the challenges that this new computer era of fast web and small devices placed. This responsive web has been emerging thanks to the new methodologies and techniques that HTML5 and CSS3 brought and caused great impact on graphic development both for web and also applications development, obviously with the aesthetic support of the Modern UI Style of Windows 8 (formerly known as Metro style). This style wiped out transparencies and shadows and cleared the visual elements from loud textures, imposing a new, catching fashion of plain colors and sharp contrasts.

Screenshot20130425151623 Minimalistic icons are the new trend set by the rise of Windows 8 - Source: Icon Shock

Windows 8 contributed greatly to make the new flat style a trending school of design. It turns out to be an operating not only for desktop or laptop normal computers; it was released for tablets and phones also, it was much closer to be ubiquitous than other software, so the graphic style for its applications was to be maintained in a wide range of devices. It turns out also  that the same clean, less realistic, non intrusive or distractive UI was similar to what new responsive websites were looking like. From now on every part of a web page could be designed from HTML or CSS3 code so less or no extra images had to be downloaded.

Screenshot20130419115309     Screenshot20130419112029

The icons in previous versions of Windows like XP and vista illustrate the new graphic possibilities and substantial detailing both Operative systems had. In contrast, the flat style in windows 8 bets for clean design through a bold use of color and typography.

It has been said that the new principle of the responsive web is to place the content over the form and to focus on usability; also, to emphasize on the typography is the stamp of the current design trends. A completely clean web page, containing only the relevant information and navigational elements could not but to use its strength making texts more relevant. And here's where icons again undergo a new transformation.

The new icons give their information without overwhelming the user. No excesses on color, and using only those that work well with each other, avoiding 3D shapes or lightning effects. Just as the Modern UI style from Microsoft or the new paradigm HTML5 and CSS3 offers, icons for the responsive world keep only the minimum characteristics allowing them to be read quickly. As they are required to be simple and effective, now icons can use vectors rather than pixels, and they will be fully supported not only on computers but also on any device. Having vectors gives the possibility for these icons to be scaled and changed interactively as other web elements. Furthermore, as new technologies using HTML, CSS, PHP -among other standards- belong to the realm of open and free software, new developers and projects continuously arise with a clear tendency: icon design was born with specific characteristics of simplicity and flat style may represent its comeback.

Apple, however, happens to be more resilient and has not embraced this school of thought that seems brought back to life by metro style design. Even the company logo has stayed the same for some time now, after leaving in the past that colorful, flat logo of the early years. Icons in the IPhone –for example- maintain realistic details, shadows and the use of perspective for most available apps.

hero_front Screenshot20130419114023

  Contrarily, new entrepreneurs endeavor to keep things going and give life to new concepts, developing apps, UIs and icons of their own. And communities for sharing and networking are spreading, too. Screenshot20130419175859    Screenshot20130419180321

It is not a surprise then that icons in this area also make part of open projects where anyone who can contribute will be able to do so. Fontello is an example of a collaborative project which aims to give quick resources for web development. Naturally, it is always advisable to get professionally designed stuff, icons made not by instinct but following up-to-date visual trends. It is hard to tell what is yet to come. Will Apple implement flat styles in its devices, as other manufacturers have already done? Would you rather keep Icons the way they look like right now? Keep the conversation going.

ThemeShock

Leave a Reply