Icons are Omnipresent.
Visualizing a universe without icons is impossible. You will get to know that icons are one among the earliest elements utilized in the first UIs. Designers are clearly aware of how much time and effort is required to make the icons simple, expressive and useful.
Icons are self-explanatory without the presence of text or additional information. It is the most unique feature of icons.
In this course, you will get to learn what are icons, their story and importance in modern world’s screen design. You will also get exposure to short tutorials on using Adobe Illustrator and Sketch for creating icons.
Icons are a simple images utilized to convey something, making them easy to remember and recognize.
Digital icons emerged when the earliest GUI operating systems such as Macintosh debuted. These icons were related with files or programs, which were able to be launched by double-clicking the icon. The first icons were pictures of objects like software programs and office objects.
According to Wikipedia,
In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system or mobile device. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents.
Icons have evolved over the years despite being known for their symbolic intent. They are used more or less in challenging tasks. This is why icons can take shape as small artistic paintings also.
Icons do not require any text or language to be recognized by users.
Icons become popular due to their intuitiveness and simplicity of use.
The symbolisms of icons are recognized easily across the globe. The standards set by them are still followed to the present day.
Now, let’s see the evolution of icons in the last three decades.
In 1981, the first digital icons were launched for users in Xerox Alto, which was the first computer with a GUI operating system.
The Apple Lisa appeared the scene with Macintosh in 1983. Macintosh used icons that were designed by Susan Kare. The icons seen at this time were easily recognizable and simple. Users of this time were forced to handle a click-based operating system for the first time.
Amiga Workbench released colored icons in 1985.
Macintosh and Windows became the widely utilized operating systems, which were mainly developed with icons. Apple sued Microsoft for copyright infringement of Macintosh GUI in 1988. After the introduction of Windows 3.0, Windows soared in popularity in 1993.
The icons and other elements of the Windows’ GUI system went on to become the widely-known operating system. Designers across the globe designed and created icons for Windows.
In 1985, Steve Jobs left Apple. After a slump, when Steve Jobs returned to Apple in the beginning of 2000s, the company started to grow exponentially. From then on, Apple’s design changed every year from icons to everything.
Not only with Apple, but all the mediums associated with user interface started to evolve during this time.
Concluding the Backstory
There is more to learn about the history of icons.
It is recommended to visit this reference site for gathering more information on the backstory of icons.
If you design UI elements, it answers the user requirements by developing something that is easy to use, easy to comprehend and easy to access.
You will learn the best practices for designing icons as visual elements in the upcoming cards.
Stay away from needless complexity, and keep icons simple.
Icons should recognize simple ideas from the environment where they will be utilized. Examples:
A shopping cart signifies e-commerce.
A bar chart portrays finance.
A work bag symbolizes business.
Pay attention to the basic elements while using the icons.
Firstly, focus on the color palette. Restrict yourself from using not more than three or four colors. This practice helps to keep the design clean.
Feel free to repeat/reuse elements across the icons. Repeating the elements allows users to recognize icons and relate them to an action.
White Space and Communication
Use blank or white space around icons. This practice ensures clarity and focus. A crowded space prevents elements to express their originality or breathe.
Icons should communicate. They have to convey visual details to the user as simple as possible.
Significance of Effective Icons in UX/UI Design
Icons will always be deployed in web design; however, their usage is optimized in mobile design due to the touch input. For a compact area like mobile,
icons must be intuitive
icons must be comprehensible
icons must be functional.
Icons are devoid of language barriers and provide a universal meaning. Different users across the globe must be able to understand icons.
Icons affect user behavior. Icons add value to an element as similar to any marketing tool.
In the above illustration, the arrow on the right provides more value to the download button. It emphasizes the meaning of the text.
Making Icons Finger-Friendly
Always make the icons finger-friendly. Icons must be big enough so that users can easily interact with them.
As per iOS Human Interface Guidelines by Apple, the recommended minimum tappable area is 44 points by 44 points.
Here is an example of a website that features navigation on the left comprising few linear icons.
The icons are clear and big.
The icons move gracefully on hover.
The site also has explicative icons in the page sections.
Every mobile app must clearly describe its purpose through the help of icons. The icons must be clear and clean.
Android Smartwatch
Icons in a smartwatch, tend to consume as much space as possible, due to the compact screen space. The user interface, texts, and icons are optimized to be visible in a small area.
Here’s an example of a car dashboard that shows how icons are vital for drivers. These days, even touchable dashboards are present in cars.
