How to: Tips voor een professioneel app design

App Design, App Inspiratie, Bouw je app Johnny 31 mrt 2015

Hoe ontwerp je een app? En dan niet zomaar een app, maar een echte fancy designer app? Met deze pro tips voor app design maak jij zelf de meest hippe, professionele en geavanceerd uitziende app.

Een app maken met AppMachine is simpel, maar het duizelt je van alle uitgebreide designmogelijkheden? Geen nood, met deze tips kom je er vanzelf. Sommige tips zijn voor app design in het algemeen, maar ze zijn allemaal toepasbaar binnen ons gebruiksvriendelijke CMS dat jou door het ontwerpproces loodst.

Design je app binnen je huisstijl

Je mobiele app kan een cruciaal onderdeel zijn van je marketingmix. Zorg er daarom voor dat je app aansluit bij je huisstijl. Logo, huisstijlkleuren en typografie kun je vrijwel helemaal overnemen in je app.

Tip: bereid je alvast voor en verzamel  logo’s en kleurnummers van je huisstijl.

Logos and Colors

Stap 1: Kies een skin

Je begint je ontwerp met het kiezen van een skin. Kies er een die aansluit bij de bestaande huisstijl of kies de default skin om alles zelf te doen. Daarna kun je de skin zo dat hij binnen je huisstijl en wensen past en vrijwel niemand meer kan zien dat je een template hebt gebruikt. Wees daarom niet huiverig voor bestaande skins, zelfs niet als je grafisch ontwerper bent.  Je hoeft echt niet bang te zijn dat jouw app straks op andere apps lijkt. Vrijwel alles in onze templates kun je veranderen en naar je eigen smaak inrichten: afbeeldingen, kleuren, iconen, et cetera.

Apps hebben wel een zekere mate van contrast nodig, dus kies contrasterende kleuren. Zoals je kunt zien, biedt het AppMachine CMS je verschillende standaard kleurensets met twee hoofdkleuren en twee of drie steunkleuren. Deze kleurensets kun je natuurlijk ook prima zelf maken.

Select a skin

Tip: Gebruik 2 verschillende kleuren in combinatie met varianten van wit en zwart. Dat is genoeg. Je wilt geen kerstboom van je app maken.

Stap 2: Instellingen en ontwerp homescherm

Je homescherm wordt je eerste meesterwerk in app design. Maak dit scherm zorgvuldig. Denk er altijd aan dat je app gebruikers dit scherm gebruiken om door de app te navigeren. Je homescherm is direct ook een uithangbord en een prachtige kans om je merk te versterken. Kijk als voorbeeld eens naar het indrukwekkende homescherm van de Dancefair app. Homescreens

Kies het menu

Het navigatiemenu bepaalt hoe mensen je app gebruiken. De ultieme gebruiksvriendelijkheid van je menu verdient daarom alle aandacht. Je hebt meerder opties voor je hoofdmenu: een tekstmenu, iconenmenu, met afbeeldingen of met een tabbar. Welk menu is het beste? Dat is helemaal aan jou! Experimenteer met verschillende menu’s voor je beslist. De apps van Betsie Larkin en Solarstone zijn beide artiesten apps, maar hebben twee totaal verschillende menu’s met allebei een prachtig ontwerp.

Gebruik je iconen op je homescherm? Dan heb je een ruime keus aan standaardiconen. Je kunt ook je eigen iconen maken en uploaden. Zorg er wel voor dat je iconen genoeg ruimte hebben en groot genoeg zijn om op te tappen, zelfs voor mensen met grote duimen.

Tip: maak je eigen iconen en ontwerp ze bij voorkeur als vector afbeelding. Kun je dit niet? Je kunt de iconen uit onze iconensets bewerken zodat de kleur en stijl goed bij jouw app passen. 

Tip: maak de iconen in je app ongeveer van gelijke grootte. Gebruik je iconenen met lijnen? Houd dan dezelfde lijndikte aan bij alle iconen. Zorg voor een consistente stijl.

NavigationStyles

Een achtergrond maken

Maak de achtergrond voor je homescherm. Dat kun je doen door een achtergrondafbeelding te plaatsen, of je kiest voor een kleurvlak met alleen je logo. Een achtergrondafbeelding moet natuurlijk wel professioneel beeld zijn. Kun je dat beeld moeilijk vinden? AppMachine geeft je de keus uit honderden professionele en rechtenvrije stockfoto’s van Getty Images. Je mag 10 foto’s gebruiken voor maar .

De hierboven genoemde apps van Betsie Larkin eSolarstone zijn mooie voorbeelden van prominente en professionele foto’s op het homescherm. De Masala Cafe app app gebruikt juist alleen een sfeervolle achtergrond met een contrasterend logo.

Om maximale indruk te maken met je homescherm, kun je zelf een achtergrond maken. Gebruik transparantie, subtiele kleurverlopen of een vervaagde foto. Alleen jouw fantasie beperkt je in je mogelijkheden. Houd er wel rekening mee dat er verschillende schermgroottes zijn dus neem een veilige marge voor de zijkanten van je afbeelding. Als je vragen hebt over specifieke onderwerpen tijdens het ontwerpen van je app, kun je altijd terecht bij onze AppMachine Academy
die over vrijwel ieder onderwerp duidelijke instructies geeft.

Tip: maak bij een achtergrondafbeelding een transparante navigatiebar voor een lichter effect.

Backgrounds

Lettertypes

Het kiezen van lettertypes werkt alleen voor iOS apps. Android apps gebruiken standaard het lettertype Roboto. Een volledige lijst van lettertypes die iOS ondersteunt vind je op iosfonts.comDit betekent overigens niet dat je in Android apps geen typografie kunt toepassen. Door je tekst in een afbeelding te zetten, kun je toch afwijkende lettertypes gebruiken, bijvoorbeeld bij een image menu voor je navigatie. De TT Motor Festival app is daar een mooi voorbeeld van.

Stap 3: ontwerp de rest van je app

Zijn je homescherm en je menu klaar? Dan heb je de basis voor de rest van je app. Je begint nu met het design voor de rest van je app. In het designsheet laten we je zien hoe jouw pagina’s er uit koment te zien, incl de navigatiebalk, iconen, tekstkleur, achtergrond etc. Je maakt voor ieder onderdeel een keuze, wij voeren dit door op iedere pagina. Je kunt alle buttons en navigatiepijltjes zelf ontwerpen of maakt gebruikt van de pijlen en buttons die wij je aanbieden.

Als extra optie bieden we een custom design per pagina. Kies bijvoorbeeld een andere achtergrondafbeelding of varieer met kleuren. Houd je app wel een beetje rustig door niet te veel kleuren te kiezen. Bewaak je huisstijl en blijf denken aan het gebruikersgemak.

Tip: je app springt er echt uit met zelfgemaakte buttons en navigatiepijlen.

Tip: zorg voor contrast in je app. Het gaat om de inhoud en niet alleen om die prachtige achtergrond waar de tekst op staat.

Preview

Varieer met submenu’s

Je hoofdmenu staat vast, maar je zit er niet aan vast voor de rest van je app. Integendeel. Varieer vooral met verschillende menu’s voor je submenu’s. Je kunt heel goed een hoofdmenu met iconen hebben op je homescherm en een lijstmenu voor je submenu. Test maar eens met de verschillende vormen. Niet tevreden? Een ander menu probeer je net zo makkelijk. Een mooi voorbeeld is Pure Madness Chocolate. Deze app heeft een ander menu voor de productweergave dan voor het homescherm.

Tip: Experimenteer met verschillende menustijlen voor je submenu´s. Chocolate SubMenu

Stap 4: ‘Last but not least’, het splash screen

Het opstartscherm, oftewel splash screen is het scherm dat de gebruiker ziet tijdens het laden van de app. Dit scherm is dus maar kort in beeld. Zodra de app geladen is, maakt het splash screen plaats voor het homescherm. Toch loont het om een mooi ontwerp te maken voor je splash screen. Het is de eerste indruk die de gebruiker krijgt. Zorg er voor dat die gebruiker begrijpt dat de app aan het laden is. Vertel op het splash screen in ieder geval dat de app aan het laden is. Maak je splash screen uiteraard in staand formaat en houd een veilige marge aan als je afbeeldingen plaatst. Smartphones hebben verschillende schermformaten dus zet geen afbeeldingen strak tegen de zijkant van je splashscreen.

Meer lezen: ontwerp je app volgens de app design trends van 2015
Splashscreens

Bekijk en test je ontwerp

Tijdens het ontwerpen van je app, zie je in de ontwerpmodus van het CMS precies wat je doet. Je verandert iets aan je ontwerp en het resultaat bewonder je direct in de smartphone simulator aan de rechterkant van het scherm. Of je bekijkt je app in aanbouw live via de previewer op je eigen smartphone.
Tip: download de previewer app om je app in aanbouw alvast live te zien.Download PreviewerSucces met het ontwerpen van je app, met een kleine inspanning maak je een groot verschil!