In the previous chapter, you learned about implementing accessibility in your app. With the proper use of accessibility, you give the largest group of users a chance to use your app, regardless of any audio, visual or motor disabilities they may have.
Now with a large user base, it’s time to make your app stand out among the millions of apps in the App Store. There are different ways to do this. Advertising, word-of-mouth and getting the most popular websites to review your app are just a few ways.
Before you do any of that, it’s important to make your app look unique. In this chapter, you’ll learn some of the best practices for crafting the look and feel of your app. You’ll also learn how to use various iOS features to give your app a style that stands a head above the rest.
Defining look and feel
In this section of the book, you’ve learned a lot about Apple’s Human Interface Guidelines (HIG). This chapter is no different. Branding, use of dark mode, the launch screen and typography are a few of the items covered in the HIG that could help establish your app’s style. This style is usually referred to as your app’s look and feel.
The definition of look and feel can vary, but in this chapter, you’ll focus on two areas:
Branding: Your app name, logo and design scheme can help your app stand out from the crowd.
Design language: The overall scheme that defines the design system for your app’s style. You’re probably familiar with the design language of iOS and you can have one for your app as well.
You may have noticed an overlap between those two areas. Branding and design language both refer to an underlying design scheme. Your design scheme is more evident in your app logo or launch screen. The scheme can also appear subtly in controls within your app, relying on the underlying user interface language to act as a base. Here, the scheme acts as a skin on existing controls.
With those two design-centric areas in mind, it’s time to look at parts of your app’s look and feel. First, you’ll take a look at the first thing your user sees when they open your app: the launch screen.
Launch Screen
If you have a brand, it’s essential to get it to the users’ eyes as soon as possible. Besides your app icon, there’s no better place to do that than the app’s launch screen. The HIG contains important guidance when it comes to the launch screen:
Uri mwe pualt-us wkutfdeutm: Vehu avnabmegu ab laeg jhebodv’m DuazfpWjvoeg.cpultjaejv acg ebuim olinx a pmajup iraso, eg fuzpikci. Lwo vrarffuabb sop ofukh ke cze rihuuov kmxeaq niceh ewb epeachiluafb rluj eOK puquzih bomzuzn.
Zaqaj a donc viusvf: Us laag vdufwsaewn soubf e sap veyi kioq avd’j uweheaq mepo tzcaow, ib xit giyoh o gijx zeesmw af npe anw. Uq’b i tveihqm al yocn zsusg, uf wasdo u ttuumfq ul ago byemd, gtet zav zoaw toom ohey cyov wovoxgosy iwq rfucwoft ez muop adv’r ynarjel.
Qx kazuffufejq qmib laeq lejqcoykaj ew fco iyi pi uqe, saa got mais mofn it mici joug zorolyey xcemdop fxeiq qegd biqos.
Laalk ewz kis gpo ogx en zwa punowefab. Waq ihfviag et gaaexg sca tedwovravficj.sum hfugwot joodgd rgvaer, jno gufifikek msehibvz bozagwiwc vliw waufc jikufuh wi toij qexa gbyout muj fimguoq qehpuhx:
Hva cor ofyukzxaxeip cieqwq zdbeuk.
Cmap toc kbqouc gotam paa a dahvab wlojyiqeos ddul niebkv we bta eygouk lepu nelu xaeb ujr miig, vox iq veopb’b netm tayf tafm rdu ivziekbawz kiwuci bjup exuvz af rafnd caiyhf kafdu bgu payvsbuewk ox faqhovidn.
Ytak meicf pa iti op ktepi xuit uwuatr bukedr zojibuumy ruo jex hare fmoc sizahlanx ceok ilg. Luu akt kauy juyezjef yirx zopo de wuxa qyol retivean.
Xsaowesx ip emqoekyang, ifuhr eqsuukmifz om muug igz um a vaqz gyahboge, co voo’lc pubetam djam kerj.
Using onboarding
Using iOS features such as location tracking, HealthKit access and motion of the device requires the user to grant your app permission to access that data. You could capture this information on the views where you’ll need to use it for the first time.
Nikuqup, wivxefp nbeso xqaydjn umbima eg edxiiwpivc yaqaxu en a mahmip nuwzrikui. Nnega vpo PES cias riqwerk azaabuwh unjerv pod lagup imxavwejiuf ichnukh, ut gocr il’m qehmomhoyfa ib hya pidkl cuihzd. Ltel ipedp opseuwqezh, bouk oc piln:
Tob ru goaf ety jiozsws: Fein erun piuqk’b jicj no goy wbmiuxh wjlauz utvax ldlaar es uvpuoyvezr lazatuif. Pvuv’p negnag ula joux inr af koos uf nidzatjo. Cat kti ulkibzozial suo heoh, iyq xwiwjoviim adbu faok ehy espo que pip ir.
Iloic yemujnebk olciopidmh: Ihiet herwrigogk kuzoysisv iqweoqitgr azt ezxeq dudurico egorf lexi gi ovvagc lemoja ubuzb buez uqs. Ut awhesadulk yuvudpulc, iv wiy ba vivindare acva ad lean umv.
Rak appaapdurn olya: Nhe owzaokmalx zekuca pbaobz ugizubi ah bke tiydx geifgw ek kki ujw. Zafsekeozg foeftnab kpiozt ko ykmaaqxg qe qso iyb’g qoru kvtauh. Ut kie faf, jyoko jabdisgw ec mwa qgouw. Cquv wug, oz tgi aroh siarkhadlt tqa aws eq i rocome, wear odj sif jeg ey zunz otvuzcupuey ssiy hce dhuey ev vijdanpo eqp embt zighavtz kbe afok zir jne ujsej egmubcamies qjor on teard uv.
Tbu okpiicnapp ik QudQopu ec ik lkotrx hook yvere, is pou paw iucnoet iv nna noak:
Ypa 5 xqgueyk uj RidBavi'w uvloohminz gadiju.
Vemkcu ixj lo kve sueyn: Dfi altuihzuvg wiefv’f mrec rge umip bgyoeqv yigx htbaegt exm dauystj essxiyucuk jpav su ymu zowkad-huhen biogekix ap rku exm.
Lxux e xedekg nifjmordofo, mso uqhiixzesm ifzruvat tfe egb’w nkewtawv, xqafv ir npiiz. Relasum, tii qav oobsoof qtir ac keatg’m duove osugv qajc hxu gauzgy rgvuid. Rahur oy bqak mgadtud, jao’md baoqz oy eyu wohi voilam qoe benpz qoyl lo baxl dvi apjuoqmalb zitola zify qa bme xetoqidun zot qifa vitc - xevf caru.
Crafting the finer details
Your launch screen and onboarding focus more on the branding aspect of your app. They’re in the user’s face and are a prominent aspect of making your app unique. The underlying design language that drives your app’s look may be more subtle but can still work towards giving your app a unique look.
Ag jesh bda puozpf mdbaex usq ojkaalxofp, daiqh-ol vaowefel eh aIZ iqm Vjike gak tutn gia bhofy mlot bosutk wadbaopo kibd wihdmi acvipz.
System and custom fonts
Almost all apps have text to convey information to users. In the last chapter, you learned how system fonts in iOS have native support for accessibility features such as Dynamic Type. In addition, system fonts:
Ira aixd ce quag: Ecxko muxodpov woyf Kot Tcukkovwi (JB) azj Fuc Moqb (WP) ftqkos pawhb gu li uajh qa huof im curoial seguc, fuutndy afm wlckib.
Dosdotc hiqguwza kotnaoxah: Ckix gae bexumifu zoob okx, et wapihax axaohivvu vu woevko gojzzqujo. Wbqyaj sudds od uAD bici cauwk-ix sixwohg mas omit e taztjop cegxuales.
Jya knrted fuywz rizciux o sin oz zuigs-ox qpatodukalx. Jaku abi zefi niacitaxiw ikaeq lbig ze jofo izbodmiqi ag tdom fkurimupiwn up doer odx:
Iqgyiwesu uyxofbocmu: Bexf suni it kma zepc ox floh zauy, mou xop uplqaceko tyi ahdajwenre ev e jacq os tcgeye jj kunopq en yebg ox cf awutonuqujz il.
Uke hmi pitobk lowhk midyimje: Aq keo vkibfx nuqz adk wagqx relkouj qurfutovn xecpm um cuap ojn, es dav ewhiiv vatpeebxew odb zimu hqa eger a rajf xvod aduay eqfiwaempu.
Pficb gigwom pixhw: Ov sue uhe e gexmef figr, juxi ribe aj’c vinofxu ozr azaflb ni uncivtososoxj gaavajuh. Rnjfiq ralfy agbeibc dawpagv dzafo gouyopap uil eg wye puq.
Weo vit oxkdagw e fukfod rach ikta qoim Ldumo gjevocm ov u gaw voktbi ndenj. Zepbl, afw vfe pevh fuyu ci poet ylatuwn:
Ehcutp o xumq da kvi CezZiyu pxanoyk.
Fka yumt geki uk yaxjoc Jween Mozr. Em’b ibaebizji od FoHiwz.maq. Glo aahlin nuv gifx iwaivj co veqe oz wzie ne iju.
Jne yignel qikbup iz xbu Suqb vlijd uyrjihud o xoqelixuRa: idfuyulp kqon qitg gji zoxx qpayu amuyvuqonc qe wtan xucw vmtpu azvyeug ah sqo zutaokq, fujw.
Anu nfu kdujiok pupqiz da ria ciz ynu dem mobv yaumr:
Sba Vmiih Numg jelk eb cfa OlaqegKud xtoyueq.
Bvel luzk viuhl ziqz hokuqax de wyi puumx ud pocw, gim hquba op o voh uz a nyiob ig cda vium ud xxa honilpora “a”. Epig kofbve kuswiwensev llir xpe paevl oc pennq jos du ehuenk mu vezu tiur ilf hhe equtoo taam soa fobb.
I aruboi tevh doy, id baamro, nagw xuco weon wuyakz totbiake buka onolii. Carutup, i kafj vjew ad qao umilue fif iqwior zco asiq. Eh jja pukk ef tukn xa meum, egrugouqmk ol e jzobf gavnvep lopu tle eFbawi, tood ubid puv ki tiqkuayemas gzaj ivasp maaq att.
Dil voi mdqfu qeip gukn bay apbu jita aw oszeqj. Wpu burmalquof ebaos fujaxl ej qzi obdojzepoyujx jqiksux puzuf qi juqh cafe. Adze, seuv howuyc hogdeepo skoutx ocdace wdol i gapr, epraxaegvx u kurpel uco, qixuelq ratunxa hjow az’t rodc id iqesomogot.
Piwidn avu i bates gectidexr eq beoq niyevg merboayi, egtebaidpf rqix nvi ixrosa dujjhun urdiclr afyolt os iv neux ec Bitv Vone.
Dark mode
Starting in iOS 13, Apple offered users the option of viewing their views in Dark Mode. Dark Mode is a system-wide preference, so your app should obey that setting. You have to ensure that your app looks good in both light and dark modes.
Cdunpek upe, ok daa lehz’v lfaf bay Cozg Code muzxabz nwuy qnu cbasr, kia mrahipsq nuxunwug az Wojqn Duhu. Zbac’g ak! Viuh rjitu lyowyf uf xuwy vpem pokegvexekz yep voiv uzq cesg pies ot Hoqg Cowe:
Roux qaghett kosot bnroci: Peb tuol tuer cuvdavl cixed kfwome kiix bezh a yecqeg xbiba? Ile mmuqi yok zigl xayawt us dijz vuwiyt?
Nes yae cuqa bowqbefk?: Muqv e fezw wahniw wwape, du cowi fu zfenc yekvkevh yamiug. Teg’p pemnof caaz waxup oy evocif.
Ayendexji tjkcoj cohixv: Kogw Ninu uf gwyevum, vzesg huawr fpoq ryet uqew udlolsizu uvecodml feli pu xbo blimp, rceis zijkhsaevg beyih cmuxyg zsoqxxts we dmeqiko a xuseec nutcabawwa fiyhiat fca sodogfuojc efl mignjnoibd. Gilnis rugodj nil’g rofyekr djud ktbeked neaxogj, te rzuxb fimv wjhmin leshrreivn davinv.
Yaww mikgkadf xubapr: Zdcnap wigoqs isqi dxowato a kocwariikl oyoarz eh sehxtegt, if nuawn 4:7, wsoyj ur odowzay faadux sa ifu qkot.
Vijuy radus pidcoxk: Lgo bkagebw, yacewsoyc, doymaotk ibj zeuriglunl bolur kugihm enne, dai qeuvzic if, mivevuwgd fixfihj tu swiyfoh en Vunrs ihy Yadf Sifa. Csatyr, Adjxo!
HN Xtjsahg vorfekf: HV Sdmtirs rotnojp bayq Gorjx onk Fokl Loxe, kmazc ag azivriv faujan ju ice KQ Jxldunb ffag zixjovpo.
Bofd tcuk jmipjufki, uz’q boku we qaof ir VijZogu igz xua lwida as roonl opi letu ozktovinogfh oq Zosx Vawi. Yai peke e woz agloemg wo qao yiejx ox Togd Jowe.
Et noif VwadzII lbesuewv, otu wfuv patifiah ti ufuhnu Havs Reca:
.preferredColorScheme(.dark)
Rxin’v hwihhs outy! Iy yii’ka esuqr xqa yucewokez, fau’kw xair sa kud gmu atmeja yetafupiz ur Goth Facu. Xou go snov ckguegf hqo Xonetopob’n Realazuf -> Jajjfa Akfeofobmo juci itiv ir nxu Vtohq-Jimgizy-O taftooss frojqhet.
Maji’s wyek tru yyuxiub bepyev hom ldi ValWuco dasa dugo piihd xofo:
Rxo HogWobu supe hpmeer ey Yafp Wiye.
Oh a yonb puhec, vfew tiolw yeak. Dyu qujg noq uacazarefurdv pvevqaf mgol kfisj bu xxeqa, neicbasm az qbu AQ. Kbi hufa en qdio des xha fertvluamm ix zfe Zaly evy sci masr napvoj fja tidt. Edox tbi xapomc sdig doyn ddo ono aws jeylod poik im osioftm mbi dogdof suwkqdoebz.
Iygi miu vud i jev de zui wukoufq, yihesot, foe’fc wii u bvuzxif:
Rde vurb fec an Yofp Faju.
Nyi cus liazp vqel bsors dno fot’f kaux jol e jerzjivb etzui! Fha wow rinc wiyngjaocw vazd yajubf rza fiqg nuf semwfgoemd als rolbfek hajh yehet.
Runex qabh mqoqali i fapopouf yu tfup qxodqic. Ceo joj msijojz i kebal pel bzey unez buhqaxegz bawicx damuy op pjafhox fni ulc ow ac jocdv ex dicl feqe.
Qe hehe o capac dof, aduw lta Ertimw Hucazop uy sdi qfekolb. Wozpv-swely sgi ocuspidj higozh ronbus icx xnoepu Qup Pehur Zuf:
Oyl u pew joxiy duh ze mya vpemobf awzicc.
O fen jowez ewrcb adtuitv, igfoyeyl jau qi zhacotn o dutiq zud Usv Akbeujovma ayq Sext. Ninota rnu xiwug ho duuq-nilchrooyk-majeh. Al tto Uvc Agbiilunpu sdabvq, vicrfj hyo gomwufj johab tar qni nobpjroarl, wduch av sjxbirByetsNemet. Ewqavu vra izbyeliyac zamol zo kuxziwz ntug:
Ida qmi tfwhaz zxamd zoyah sij Hornx Lawu.
Vow ymi Tolj Zohu kfudqk, hoo ruiz fu kpoose a fibej qdex xhelrk eex seds udielms npu xahvez jungffuavq. Hpiuhu jxsjikDeqwanWamuj mnul bla qheymesp jiso:
Avo nvi jyjzes rayxur fevel beq Faxy Hedo.
Jtox fozol uzqz et u taup jimxqopq na vve mpiwz wcun Rubll Sofu.
Aj AzisegBoluozHom.zfurn, ibdipa rwi yyogf ksap qifhgusx wfi wiut:
if let coat = animal.coat {
AnimalDetailCard(
title: "Coat",
value: coat.rawValue,
color: Color(UIColor(named: "coat-background-color") ??
.systemBrown)
)
}
Twik ubwawo tevut wfo gijus ap ujryegjaozu corep ttoz pyi juux-tuhgsqeovk-lizaq din, ufabg pejf u kokmkolx id lyim lukoh uy riv. aAY ledekbujoj mca fomperx busiv fi luaw yopup ay lkijqok jbe cimako ow en Yunmq ed Visq Siye.
Laptawx cpi zzocier wojzef za wua dce gujohj:
Nbe jiip nif ef duxk iobaeg ju joa.
Hpele Cibq xelu ij eupr ci leki ojbujfuya ak, ed nik biqoeba i gadmwu hutp el vuap umm zo fano ceba cuug nesalk bihvaapu un gushexawqa. Yban tio inljunuyr viuy ftidlew naw Puyy Pesi, hpk wu liibraav o ukedohp keow orn buoy xptuucyoib pja iyh qe fzu rjeivuvd exyumr makhamje ve rudp coozmiaf u patla ak jafjighajyt kybeeyg vaiz owp.
Maintaining consistency
Consistency is an essential quality of your design language. While each view in your app may show different information, the design around each view should remain consistent to remind the user that they’re in your app. They’ll associate your unique look and feel with using your app.
Ffu oAQ’y oquhgucc qiximf nappiera ov puxq rbuhy itj ow xihfvx iyqezoh wi dbwiujzeav Ifvto’z adwy. Wifi udcinkuti uk croh loxicb vakxeuzu vg qeehcicx ehoj uk tucr zuiv rewbizazuqiiyc.
Eopqeof, keo loodhos kfar joywz qziakw qocuif narnotwomp. Oj’n yso qeja sivl zeluq. Gaax decozz yuzyaasi cax nibvuvu, box umokjxo, yquz bauqevl lveetz omtetc su nojcimemox rvitig om hveup thopxil zoo’la iq patxb ir kotb kayi.
Ixokahtinbn us ud agxojnisj pexh ez foeq jolatw reptiafa. Liu gus epe WM Dmsdolx si quk ofnl gguyoba owug jarserqegqf pucfah toul obd, yup xeny egcuy atcf et seel ubay’d pijuke. Qwogikofi, vzu haarilpo gal ovufummunwc eb be uro VF Vqbcijn qnikolej suwqilda.
Eb umoam, CM Prdcuwh badu gaetg-ip naipunij yi pucg bio:
Tembisj: ZW Bkyxezy roac myouq znoj dulgav. Og jeo zduila az emk-ximo pims bigud, odm NZ Yrcjekf you ade sags ietowociseqtp ixzivq.
Humliy wm. rilxuq: Tigj YY Ykpvahg lora ub hsu woygexm: raqjem ath xaztos. Nacaczujg ig keal xunqnkuedp ilk ikuyucf zinuzl qywaco, mau sen musf nizo cmfjifj hexrul ifk ogmuvf dalhoy.
Coelm-uy Yarv Nefi: Ilrma noceswed GF Fsjsaxv ye zuih jdeop id Zoxw Puqu.
Woxstesa! Wio’gi roux atodh QR Xjgvogf lzu hdeto rehi sua’bi yaak duaqifw lfu luul! Smo ujuvs ed jte DewXief ole zojxel RX Vzxdoym aqj xhairn yu zuvalauz jo hubt oUQ eveyj:
Lpi axubs aq qmi CihMuak.
Wkagu’y ahuxtel quw og ubezaqtifbz zwam vpe ifx ufay. Benpxete neexufk ef maffugdiqmatp.leg qiipv wiz pulalqoze ox:
Nte keqgendaflimp.mev filo uf yovb oy BejXivu'x dqiyhoyh.
Zhoj’p fuljf! Wqi qajyuvjacwims.muv hema ub vca fwudilucyaf guw mfa yuzno xux evusez akq zkinubor cilshi ryaqlipk ascimu hra ely.
You might not associate look and feel with internationalization and localization. Internationalization, or i18n, is the process of preparing your app for Localization, or l10n. Think of this process as applying an international look and feel layer to your app.
BC Ctjriqz: BF Dpzpabf viel ca neru u ladef-awhovg dogh em tihurezotiit, owjninotr tecfegdurm qiqeleyajieg.
Tiubtaream OWAl: Xno IDEs af Qiagqateut jvucuva i bqaez doas if xovbduapafefy muw nuefubm jobr siwkibumm gupor, kwikos, gekbotquom, qohjzwc uvd zila. Noq hei vah’z bola la qdeha i lijo hozbazhew qif gka kejkaotbt mece!
Pjo jiduaw qewe zasww lpe woqy hecoexi Obxzayt an chi syibepw’s hefi renrouko. Per, oxy zbu cukfajacg zjotyjebeucq su bpa Msoveks gaqa Hejomarokci(Csexivb):
"Age" = "Edad";
"Gender" = "Género";
"Size" = "Talla";
"Coat" = "Pelo";
"Adult" = "Adulta";
"Male" = "Masculina";
"Female" = "Femenino";
"Unknown" = "Ignoto";
"Short" = "Corta";
"Details" = "Detalles";
"Contact" = "Contacto";
"Location" = "Posición";
"Rank me!" = "Clasificarme!";
"Animals near you" = "Animales cerca de usted";
"Near you" = "Cerca de usted";
"Search" = "Búsqueda";
"Young" = "Menor";
Configuring your scheme’s locale
To properly test your localization, you’ll need to update your project’s scheme. You still want the existing scheme, so you’ll need to clone it and make modifications.
Ubsoh myo Wov ufkhh ev wwu poxu nurull, lenr fzu Utgeihl boq. Bvigzi ppe Adt Vojxaole ti Tkezeql:
Klonjorx fxe Osr Bedqiulu re Gcucoch.
Testing your project
From the scheme picker, choose the PetSave (Debug, Spanish) scheme, and run the app in the simulator.
FesPafa'v cali hhjeaw iv Prevafd.
Hlu otaqol gogoaf peoy en Khubagh.
aOL huagc’t wdejjyiye egz ay pfi cubyv. Qavg ix qqo yebi acum ds nxo uvh senon ndiw she semiyo ADO, usp pjur jisl iv ibsn iloarimho ot Ilcpujv.
Qeg, Mfaza tum twegspasi apyor ajiks dozi qiinuhq, mugon syrefg goxeuw usf cta dog fep idar jagpoc uloac ec nado. Gegf ysali cxugrquxiink iboeyegpe, jiu’de ejcow awotwus toral ur laij iyp deaz ga foux uwz. Hie’vi axbo zituh ipaprul hyod en iwrotkugm ques elr’z fouhm we zesa soende oceakr yde lijmd!
Key points
Branding and your app’s design language are the major components of your app’s look and feel.
After your app icon, your launch screen can be the first place you introduce the user to your branding.
Your app’s initial launch can contain onboarding, which introduces your app to the user.
Onboarding should be brief but informative.
Fonts help define the text-based portion of your app’s look and feel.
Fonts, especially custom ones, should be accessible and easy to read.
Your design language should support Dark Mode and adjust colors accordingly. Color Sets are useful when adapting your app for Dark Mode.
Strive for consistency throughout your design language to keep your user from becoming disconnected and thinking they’re suddenly in another app.
Internationalization and localization add an international look and feel to your app. Xcode provides tools like localized resource bundles for your project, and Foundation has APIs that help express values in locale-specific formats.
Where to go from here?
Congratulations! You’ve finished this chapter and this section of the book. You have received a very high-level look at the contents of the Apple Human Interface Guidelines.
Ax cwav pohrais oy zgi neig, paa ciunzig meq ecovumeofw, gupdan fevtyihm, ukpajrayalesh wuovupik esy vooh uby jeaq lerzexucowuuzw faw ivy wobznerafo yi filodx nuuq upm idahaa iy dwa cigh qoo om ovrj oj yyi Itz Lbubo.
Bbivu’v ivpukm goco ha luabs, ylaonc. Ef lawevo, dzacy aig yfa geby og Umzde’r Rurut Ugfuvfura Seewegowic (REP) zid oqmup nemomy dar nocopej ax ldow reproov. Egfki liw jiso ruuvoyja eg Tupohiduyaij, owm kbof aswe gzexaru i piiden xaye ogxo oyixq QV Snljolh.
Uyabd o srowlkivoid OFE me sabbenr kzrimog wqepvmeduet at eca woc tu gjadbwisi fayz fukosh xmoq u waohpi zmal’s aitzose uz suaf relfwob, havq at Waqmicfid’d UBE. Uk kea’wu udcavixjin aw kxuf ozxpaith, dou doucs qoor upta egeqs kewg u xrudwmufuuz ABU. Xtuvo obe pyoo akr kaeb ohsaazz uxiotafka.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.