• Krunal Odedra

[WI] iOS 10 – Icons, Menus & Typography

“The world’s most advanced mobile OS offers everything you need to design beautiful, engaging apps that radiate power and simplicity.” -apple.com

This is week 04 of my weekly inspirational blog. I would want to collaborate my learning in the course as well other courses I have been taking parallely. Inspiration is what comes to us from small things that you come across your routine. iOS was one such thing that to me is epitome of Graphic Design. Here in the blog I’m about to showcase few of the noticeable graphic design concept in terms of human-computer interaction.

App Icons
icons

Icons – as and in iOS 10


Icons are simple, engage the purpose of the application they represent. Curved from the edges gives a smooth look to icons. None of the background of the icons are transparent to make them stand out from the background (wallpaper of the home screen). They are usually kept in a Square grid system which is designed by apple, which enabled the main content in the centre of the icon as shown in picture below

icon-grid-system

Grid system of icons


System Icons

We can observe a different set of icons, too which can be called system icon, toolbar icons and quick action icons. They are usually small – representing common tasks OR types of content—for use in navigation bars, tab bars, toolbars, and Home screen quick actions. They are kept minimalist, small and easily recognisable usually Blue in color throughout the system to make them stand out as actionable buttons. Quick actions icons are more on filled and dark theme, though.

This slideshow requires JavaScript.

Typography

iOS pays a lot of attention to typography. They have come-up with a whole new typeface San Francisco which falls under sans-serif category. This typeface can be found across all apple products and OS. Thin,tall, neat and unique – is what all we can comment about typefaces present in iOS 10.

sf
Pop-Up, In-line Menu

Pop-up menus and actions buttons are designed keeping in mind the user’s thumb/finger size which allows them to be clicked easily. Pop-up menus would appear after user tap on the screen and in-line menu appears when use slide the option horizontally as shown in the below pictures. They are designed in a way that would scale according to the orientation of the screen as well they get re-arranged to ease of use, which in turn is great example of usability.

This slideshow requires JavaScript.

Pop-Up Menu

These menus also follow same rounded corner style to match the theme of new iOS. Background of the turns dull and translucent to help users focus on actionable items while pop-up menus appear.


This slideshow requires JavaScript.

In-Line Menu

Image Source : 

  1. My iPhone’s screenshots

  2. http://www.apple.com ( WWDC 2016 )

0 views0 comments

Recent Posts

See All