{Carrer web log} ←
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.
0 Responses to “Demystification of the iOS7 Icon Grid Design”
<< Home
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 <<<
- AI Prompt Directory
- Hand Drawn Icons
- Font Design Inspiration
- Font Pairings
- Free SVG Cut File
- Upcoming NFT projects
- Discord Tutorials
- Free Sublimation Designs
- Tech Feed
- MySQL Lite Administrator
- Quark Mini PHP CMS
- Formy - CSS Form Framework
- Emastic - CSS Framework
- Malo - CSS Library
- The Golden Grid
- 1 line CSS Grid Framework
- Two Lines CSS Framework
- Child Selector System - CSS Framework
- Better Web Readability Project
- Azbuka - CSS Typographical Base Rendering Library
- ClipR - bookmarklet for better reading
- CSS3 Action Framework
- CSS Mini Reset
- HTML5 Mini Template
- CSS Mobile Reset
- picoCSS - JavaScript Framework
- HTML Lorem Ipsum Crash Test
- Object Auto Documentation - JavaScript
- o - JS Library for Object Manipulation
- Foxy - CSS Framework
- Tumblr Free Theme - Better Readability Project
- Box - CSS Framework
- SMART CSS GRID
- nanoJS - Minimal JS DOM Library
- Flexy CSS Framework
- Katana is CSS Layout System made with Flexbox
- Micro CSS Reset
- 60 Grid System
- Simple CSS Button
- ramd.js JavaScript library for making web applications.
- Minimal Notes web app build with Vue.js
- Scribble Font for Prototyping & Wireframing
- Flex One - 1 CSS Class System
- Floaty - CSS Float Based Layout System
- Infinity CSS Grid
- CLI Convert websites into readable PDFs
- keywords-extract - CLI tool, extract keywords from any web page.
- screenshoteer - Make website screenshots and mobile emulations from the command line.
- Basic.css - Classless CSS Starter File
§§Previous Posts <<<
- Hand Drawn Icons 1.2 Update
- Clear Flash Ads with one line of jQuery
- Writability - Write in your browser
- Custom Logo Land - Logos for Startups
- One Line CSS Mobile Framework
- URL to QR Bookmarklet
- Semicolon Drama ; {
- Hand Drawn Icons 1.1 Update
- Box - CSS Framework
- Wireframing Icons
Other Profiles <<<
Content is licensed under a Creative Commons Public Domain License