├── img ├── Portrait_icon_dark.png ├── Landscape_icon_dark.png ├── Landscape_icon_white.png └── Portrait_icon_white.png ├── fonts ├── helveticaneuecyr-bold.ttf ├── helveticaneuecyr-light.ttf ├── helveticaneuecyr-medium.ttf └── helveticaneuecyr-roman.ttf ├── js ├── Controller.js ├── Devices.js └── lib │ ├── jquery-1.11.1.min.js │ └── angular-1.2.19.min.js ├── README.md ├── css ├── fonts.css └── main.css ├── index.html └── LICENSE /img/Portrait_icon_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/img/Portrait_icon_dark.png -------------------------------------------------------------------------------- /img/Landscape_icon_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/img/Landscape_icon_dark.png -------------------------------------------------------------------------------- /img/Landscape_icon_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/img/Landscape_icon_white.png -------------------------------------------------------------------------------- /img/Portrait_icon_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/img/Portrait_icon_white.png -------------------------------------------------------------------------------- /fonts/helveticaneuecyr-bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/fonts/helveticaneuecyr-bold.ttf -------------------------------------------------------------------------------- /fonts/helveticaneuecyr-light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/fonts/helveticaneuecyr-light.ttf -------------------------------------------------------------------------------- /fonts/helveticaneuecyr-medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/fonts/helveticaneuecyr-medium.ttf -------------------------------------------------------------------------------- /fonts/helveticaneuecyr-roman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ramotion/iOS-design-tips/HEAD/fonts/helveticaneuecyr-roman.ttf -------------------------------------------------------------------------------- /js/Controller.js: -------------------------------------------------------------------------------- 1 | function Controller($scope) { 2 | $scope.devices = devices 3 | $scope.orientation = "port"; 4 | $scope.statbar = false; 5 | $scope.video = true; 6 | } 7 | 8 | 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | iOS-design-tips 2 | =============== 3 | Simple iOS design guidelines that will assist you in selecting the dimensions for your AppStore assets: 4 | http://ramotion.github.io/iOS-design-tips/ 5 | 6 | ##[About Us](http://dev.ramotion.com?utm_source=gthb&utm_medium=special&utm_campaign=iOS-design-tips) 7 | 8 | [Ramotion](http://dev.ramotion.com?utm_source=gthb&utm_medium=special&utm_campaign=iOS-design-tips) is an iPhone app design and development company. We are ready for new interesting iOS App Development projects. 9 | 10 | Follow us on [Twitter](http://twitter.com/ramotion). 11 | -------------------------------------------------------------------------------- /css/fonts.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Helvetica Neue Regular'; /*a name to be used later*/ 3 | src: url('../fonts/helveticaneuecyr-roman.ttf'); /*URL to font*/ 4 | } 5 | @font-face { 6 | font-family: 'Helvetica Neue Bold'; /*a name to be used later*/ 7 | src: url('../fonts/helveticaneuecyr-bold.ttf'); /*URL to font*/ 8 | } 9 | @font-face { 10 | font-family: 'Helvetica Neue Light'; /*a name to be used later*/ 11 | src: url('../fonts/helveticaneuecyr-light.ttf'); /*URL to font*/ 12 | } 13 | @font-face { 14 | font-family: 'Helvetica Neue Medium'; /*a name to be used later*/ 15 | src: url('../fonts/helveticaneuecyr-medium.ttf'); /*URL to font*/ 16 | } 17 | -------------------------------------------------------------------------------- /js/Devices.js: -------------------------------------------------------------------------------- 1 | //Devices map with ordering 2 | var devices = { 3 | "1":{ 4 | "display_name":"iPhone 4", 5 | "port_bar":"640x960", 6 | "port":"640x920", 7 | "land_bar":"960x640", 8 | "land":"960x600", 9 | "port_vid":"none", 10 | "land_vid":"none" 11 | }, 12 | "2":{ 13 | "display_name":"iPhone 5", 14 | "port_bar":"640x1136", 15 | "port":"640x1096", 16 | "land_bar":"1136x640", 17 | "land":"1136x600", 18 | "port_vid":"640x1136", 19 | "land_vid":"1136x640" 20 | }, 21 | "3":{ 22 | "display_name":"iPhone 6", 23 | "port_bar":"none", 24 | "port":"750x1334", 25 | "land_bar":"none", 26 | "land":"1334x750", 27 | "port_vid":"750x1334", 28 | "land_vid":"1334x750" 29 | }, 30 | "4":{ 31 | "display_name":"iPhone 6 Plus", 32 | "port_bar":"none", 33 | "port":"1242x2208", 34 | "land_bar":"none", 35 | "land":"2208x1242", 36 | "port_vid":"1080x1920", 37 | "land_vid":"1920x1080" 38 | }, 39 | "5":{ 40 | "display_name":"iPad", 41 | "port_bar":"768x1024", 42 | "port":"768x1004", 43 | "land_bar":"1024x768", 44 | "land":"1024x748", 45 | "port_vid":"900x1200", 46 | "land_vid":"1200x900" 47 | }, 48 | "6":{ 49 | "display_name":"iPad(hi-res)", 50 | "port_bar":"1536x2048", 51 | "port":"1536x2008", 52 | "land_bar":"2048x1536", 53 | "land":"2048x1496", 54 | "port_vid":"900x1200", 55 | "land_vid":"1200x900" 56 | }} 57 | 58 | 59 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100%; 5 | font-family: 'Helvetica Neue Regular'; 6 | font-size: 12pt; 7 | color: #423f56; 8 | background: #f9f7fb; 9 | } 10 | 11 | body { 12 | opacity: 0; 13 | } 14 | 15 | form { 16 | padding: 0px; 17 | margin: 0px; 18 | } 19 | 20 | input.checkbox { 21 | width: 13px; 22 | height: 13px; 23 | padding: 0; 24 | margin: 0 6px 1px 0px; 25 | vertical-align: bottom; 26 | position: relative; 27 | top: -1px; 28 | *overflow: hidden; 29 | } 30 | 31 | label { 32 | display: inline-block; 33 | padding-left: 15px; 34 | text-indent: -15px; 35 | } 36 | 37 | ul { 38 | text-align: left; 39 | font-family: 'Helvetica Neue Light'; 40 | font-size: 12pt; 41 | line-height: 30pt; 42 | } 43 | 44 | .copyright { 45 | text-align: left; 46 | font-family: 'Helvetica Neue Light'; 47 | font-size: 12pt; 48 | line-height: 30pt; 49 | } 50 | 51 | h2 { 52 | font-family: 'Helvetica Neue Light'; 53 | font-size: 22pt; 54 | margin-top: 44px; 55 | } 56 | 57 | div.spacer-10 { 58 | height: 10px; 59 | } 60 | 61 | div.spacer-30 { 62 | height: 30px; 63 | } 64 | 65 | div.spacer-40 { 66 | height: 40px; 67 | } 68 | 69 | div.spacer-60 { 70 | height: 60px; 71 | } 72 | 73 | #container { 74 | text-align: center; 75 | margin: 0 auto; 76 | max-width: 748px; 77 | min-width: 540px; 78 | 79 | } 80 | 81 | #selector { 82 | margin: 20px auto; 83 | width: 200px; 84 | } 85 | 86 | #output_table { 87 | margin: 0 auto; 88 | text-align: left; 89 | } 90 | 91 | #output_table td { 92 | padding: 15px 45px 15px 0px; 93 | border-bottom: 1px solid #d4d2da; 94 | } 95 | 96 | #output_table tr td:last-child { 97 | padding-right: 0; 98 | } 99 | 100 | #output_table thead { 101 | font-family: 'Helvetica Neue Bold'; 102 | font-size: 14pt; 103 | } 104 | 105 | #output_table tbody, 106 | #output_table tbody tr td.with-video:last-child { 107 | color: #bcb9c2; 108 | } 109 | 110 | #output_table tbody tr td:last-child, 111 | #output_table tbody tr.selected td:last-child, 112 | #output_table thead tr td:last-child { 113 | color: #e5e3ea; 114 | } 115 | 116 | #output_table tbody tr.selected td, 117 | #output_table tbody tr.selected td.with-video, 118 | #output_table thead tr td.with-video:last-child { 119 | color: #423f56; 120 | } 121 | 122 | #output_table tbody tr:hover td { 123 | cursor: pointer; 124 | border-color: #423f56; 125 | } 126 | 127 | nav { 128 | display: inline-block; 129 | margin: 50px auto 30px auto; 130 | 131 | border: 1px solid #423f56; 132 | 133 | font-family: 'Helvetica Neue Medium'; 134 | font-size: 14pt; 135 | border-radius: 8px; 136 | } 137 | 138 | nav a { 139 | float: left; 140 | display: inline-block; 141 | padding: 8px 32px; 142 | color: #423f56 !important; 143 | margin: 0; 144 | min-width: 120px; 145 | text-decoration: none !important; 146 | line-height: 1; 147 | background-color: transparent; 148 | 149 | -webkit-transition: background-color 0.25s; 150 | -moz-transition: background-color 0.25s; 151 | transition: background-color 0.25s; 152 | } 153 | 154 | nav a:first-child { 155 | border-bottom-left-radius: 6px; 156 | border-top-left-radius: 6px; 157 | } 158 | 159 | nav a:last-child { 160 | border-bottom-right-radius: 6px; 161 | border-top-right-radius: 6px; 162 | } 163 | 164 | nav.port .port, 165 | nav.land .land { 166 | color: white !important; 167 | background-color: #423f56; 168 | } 169 | 170 | nav a.port { 171 | padding: 8px 14px 8px 36px; 172 | background-position: 38px 6px; 173 | background-repeat: no-repeat; 174 | background-image: url("../img/Portrait_icon_dark.png"); 175 | } 176 | 177 | nav.port a.port { 178 | 179 | background-image: url("../img/Portrait_icon_white.png"); 180 | } 181 | 182 | nav a.land { 183 | padding: 8px 8px 8px 42px; 184 | background-position: 22px 6px; 185 | background-repeat: no-repeat; 186 | background-image: url("../img/Landscape_icon_dark.png"); 187 | } 188 | 189 | nav.land a.land { 190 | background-image: url("../img/Landscape_icon_white.png"); 191 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 || Device | 21 |Image | 22 |Video | 23 |
|
29 | {{device.display_name}}
30 | |
31 |
32 |
33 | {{device.port_bar}}
34 | {{device.port}}
35 | {{device.land_bar}}
36 | {{device.land}}
37 | |
38 |
39 |
40 | {{device.land_vid}}
41 | {{device.port_vid}}
42 | |
43 |
44 |
49 | 50 | 51 |
52 | 53 | 54 || t |