QO uiadrian.gumroad.com 01. DESIGN LIKE A PRO how to master spacing in Ul 44x44 px S) @uiuxadrian Adrian K 9341 alse oo 96 px € 8px What’s your email? 80 px nt mail ad S u’d like t Email address 56 px 16 px Have an account? Log in here.@uiuxadrian 02. Adrian K ol. The intro We'll break down the spacing on a live example below, taken from my latest eBook. Most of the things that you’ll see are direct excerpts from the Design Manual. Personally, | find it best to learn design while replicating and practicing others. Let’s go! |) 9:41 all> _ What's your email? {Enter the email address you'"d like to ust si Email address Have an account? Log in here. By registering, you accept our Terms & Conditions and Privacy Policy. Your data will be securely encrypted with TLS.@uiuxadrian 03. Adrian K 02. The status bar We'll have to leave at least 44px for the status bar. Count down 44 points from the top border and don’t put anything in this area apart from the status bar itself. That’s the danger zone! 44 px 9:41 all > € What’s your email?@uiuxadrian 04. Adrian K 03. The navigation bar This part usually takes around 56px depending on the content you use. In my example | used 44px to create the tap target for my back button and added 8px space between that and the text below. 44x44 px 9:41 als os 96 px & 8px What’s your email? Enter the email address you'd like to use to sign in to. SmartBank. Email address swipe next = —>@uiuxadrian 05. Adrian K 04. The text container For my text | used a 28px font size and left 8 px space between the title and the description. Entire text container takes around 80 px and is placed 96px from the top border. 9:41 als os e - 8 px What’s your email? 80 px - 8 px swipe next = —>@uiuxadrian 06. Adrian K 05. The input field | left 24px space between the text container and the input field to have enough breathing room. The input field alone has dimensions of 343x56px which leaves around 16px margins on both sides. & Whai’s your email? Enter the email address you'd like to use to sign in to SmartBank. 24 px Email address 56 px 16 px Have an account? Log in here. 343 px swipe next = —>@uiuxadrian 07. Adrian K 06. Acceptance text & button | left 24px between the acceptance text and the button to make it clear that the text is related to the button. | also added 16px of space between the button and the keyboard. Have an account? Log in here. 80px By registering, you accept our Terms & Conditions and Policy. Your data will be securely encrypted with TLS. 24 px 56 px 16 px "los" ios lons 343 px swipe next = —>@uiuxadrian 08. Adrian K 07. iOS Keyboard To create my keyboard | used a pre-made component from the iOS UI Kit. Only thing you have to remember is to resize it to fit your frame ane leave around 34px of space for the home indicator. QIwierritiysurTlisorp alsidijfig}h]j yk] & zxevbram @ 123 space return Q | —— 34 px 375 px swipe next = —>@uiuxadrian 09. Adrian K 08. How to practice The best way to learn spacing is by replicating how other apps are designed, taking note of all the values, and analyzing everything by yourself. Now, get to work and learn a new skill! oat as oat as & What's your email? What's your email? tos" ios tons. “ost jos fons Hals|diflolhii[k]t \ @ zxcvbnm@ @ zxcvbnm@ T 1 | m ace rar | rr snes tun 1 \ ' 1 \ \ awertyuiodg aiwjelritiyiulifolp ' asdfghjik | \ © g 1.2.2a - Email 1-2 - Practice 1 1.2.2a - Email 1-2 swipe next = —>