{Carrer web log}


Blog about web design & development

Demystification of the iOS7 Icon Grid Design

Thursday, June 20, 2013 { 0 Comments }

There's been a lot of talk last week about the Apple iOS 7 and the icon design.

Many designers are offering there own icons solutions and redesigning the default iOS 7 icons and I have an impression that The Grid System itself is very little discussed and analyzed.

I think that iOS 7 grid system it is a masterpiece.

I also think that grid system is poorly used by Apple, the default iOS 7 icons are lacking consistency and contrast (probably the Apple will change that in the future).

The grid system can probably best understand by starting with the biggest 1024px x 1024px icon, I will use that size like default measure.

The grid system is basically based on 64 x 64, 16px x 16px square blocks.

The circles dimensions are based on Golden Proportions.

You can see on the picture how the rectangular 512px x 320px with golden golden ratio is used for the calculation of the circles.

I played with the Golden Ratio and various Grid System for years and my personal believe that the iOS 7 grid system is meaningful and very well designed.

I've used Photoshop to replicate the icon and grid design, the grid is made with Photoshop Guides (View > Show > Guides). I tried to make everything as px perfect as possible. If you have any suggestions let me know.



>>Download the Photoshop file here

Free for personal and professional use.




Hand Drawn Icons 1.2 Update

Wednesday, June 05, 2013 { 1 Comments }

Over the last year and half I had great experience with Balsamiq partnership. Many of my customers are Balsamiq users who use my hand drawn icons to complete Balamiq User Experience. One popular request was Darker hand drawn icons for more compatibility with the native balsamic icons.

I did just that, Darker Icon Set with the same icons but with more compatibility with Balsamiq native icons. Basically now you have two icon sets one with gray icons and the other with almost black icons.

*If you already purchased the icons you have free update, you need to go your download link inside your confirmation mail.



http://www.handdrawnicons.com/


RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

§Archives <<<

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License