[vc_row][vc_column width=”1/1″][vc_row_inner][vc_column_inner width=”1/1″][vc_column_text]
iOS 8 & iOS 7 Style Icons
A Pleasure For The Eyes
The release of iOS 7 brought about some major changes to the application design guidelines offered by Apple. This design language of iOS7 lays emphasis on a minimalist and light approach towards the interface controls, including the iconography.
There is no doubt that the shift towards a lighter approach has not only simplified Apple’s mobile operating system, but it has also modernized it appreciably. These changes have also affected the way people understand the interface of both iOS 7 and iOS8 and the way they use it.
Many apps and websites have been in the process of redesigning their icons to match the design style of iOS 7 and to ensure that their icons blend in well with the new intuitive user interface. However, the fact that icons are difficult to get right cannot be denied, particularly when line iconography is concerned.
This technical guide will help to clarify some of the main aspects of iconography that needs to be considered when working with iOS 7 and iOS 8 style icons.
1. Style of the Design
When it comes to revamping the icons according to the new iOS 7 design guidelines, one thing that cannot be missed is the fact that Apple’s new design features icons that are crisp, clean and clear.
The style focuses on single-weight lines with no fills and features curved aesthetics. While it may seem quite straightforward, but one cannot deny that some line icons out there lack the character and personality that makes them ‘ownable’.
However, using certain iOS ready icon packs, you can easily customize them to your liking.
2. Grid System
iOS 7 icons are mainly designed based on grid systems for standard use (30 pixels) and for retina display (60 pixels). The correct grid is vital as these icons have to be designed according to specific dimensions. Also, according to the guidelines, they should be able to work on both regular and retina devices.
This is why it’s essential to set the grid correctly to ensure consistency in the scalability of icons.
3. Technical Guidelines
Apple has provided specific guidelines for designing custom icons for iOS 7. A beautiful icon can make a whole lot of a difference in people selecting your app over others. A lot of people base their opinions on the quality of an app, its purpose as well as the reliability based on well-designed the icon is.
Here are some guidelines that all designers should follow.
- Your icons should support the Retina display – You must ensure that you provide @2x assets for all the graphics and art work
- The photos and graphics should be displayed in their original aspect ratio – Make sure you do not scale them more than 100 percent
- Do not use images that duplicate Apple products in your design
- Stick to the new dimensions – iOS icons are now 60 x 60 pixels on standard devices, and 120 x 120 pixels on Retina displays. You should make sure that you export them in the correct way. This job can be simplified by getting Icons Mind icon packs.
- Don’t forget the rounded corners – Rounded corners are the way to go with the new iOS 7 interface. Make sure you design icons that cater for this new tapered style.
- Take care of the subtle details – You can use textures and other finer details in app icons, however, you should think about toning them down a little. Line icons, after all, are the emphasis of the new design by Apple.
4. Examples
Icons Mind icon packs can be used for a variety of purposes, including for creating templates, designing websites, applications and even logos.
5. How We Did It
This video will reveal how our icons have been sketched with utmost precision and accuracy:
6. We Support SVG–Fonts
All of the icons we offer are based on an SVG-Font style. This style makes the icons look sharp, particularly on Retina displays. For more information, check out the article SVG Font Icons is the new way of working!
7. Difference Between Line Icons and Solid Icons
Apple’s move to outlined icons as compared to solid icons has incited some differences of opinion among designers and iconographers. These new line icons are designed to communicate clearly and quickly. Some say line icons are difficult to understand, but are they?
The distinction between line and solid icons has been defined loosely. A single icon can have both hollow and solid characteristics. A software designer presented an argument that ‘hollow icons are more work for your users’, his argument was based on the idea that outlined shapes are more difficult to understand than simple solid shapes. He claimed that the fewer the visual elements in the icons, the faster the parsing and thus faster understanding. While this argument may seem valid, not everyone out there agrees with this idea.
A counter argument was presented stating that
“You’ve probably stored hundreds if not thousands of symbols in your head, so I’m not sure how a few ‘hollow icons’ are going to completely confound you.”
There is absolutely no data that can prove that line icons can tire people or be not clear to them in one way or the other. Unfortunately, stories on the internet are circulating that claim line icons to be otherwise, and these stories have even been published in some well reputed online magazines, making people think that it is more of a fact than an opinion of some people.
It just takes a little bit of thinking to realize that logos of many huge corporations are actually based on an outlined design. How long does it take for an average person to figure out what that logo is representing? Not long.
With that said, it is totally absurd to actually pass a clear verdict declaring line icons to be tiresome for users. On the contrary, a growing number of people actually prefer to go for these due to their simplicity and lighter appearance.
Here’s another article you might like: 10 Amazing Apps For Getting The Most Out Of iOS 8
Comments