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.
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.This was the original control panel bitmap, designed by Kare, that was shipped with the Macintosh in 1984. This icon would show up any time you turned on a Macintosh, and displayed a sad face in the event of an error.
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.
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.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.
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.
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.
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.