Share
Dit bericht is het eerste in een 10-delige iPhone Design-serie op Mobiletuts +. Elke week duiken we in verschillende aspecten van het ontwerpen van mooie en bruikbare mobiele interfaces voor iOS. Om een herinnering te krijgen telkens wanneer een nieuwe post in deze serie arriveert, moet u zich abonneren via e-mail of onze RSS-feed!
Ben je een webdesigner, enthousiast over het idee om iPhone-apps te ontwerpen, maar weet je niet hoe je moet beginnen? Of misschien heb je een aantal apps ontworpen, maar probeer je je vaardigheden een boost te geven met enige fundamentele kennis van waarom we bepaalde ontwerpbeslissingen voor mobiel maken? Deze serie is voor zowel beginnende als middelgrote ontwerpers die een grote plons willen maken in de mobiele ontwerpruimte!
De onderwerpen waar u in deze serie naar uitkijkt zijn zowel hands-on technieken en voorbeelden als mobiele gerelateerde ontwerptheorie. Het volgende is een line-up van wat we in de loop van deze serie zullen behandelen:
Kan ik niet gewoon beginnen met het ontwerpen van apps? Het ontwerpen voor mobiel is immers alleen maar ontwerpen voor een kleiner scherm?
Niet echt. Ontwerpen voor mobiel is anders dan het ontwerpen van websites of desktoptoepassingen, en de verschillen nemen snel toe naarmate meer mobiele apparaten met extra functionaliteit en unieke hardware-overwegingen op de markt komen. Laten we eens kijken naar de verschillen tussen ontwerpen voor internet versus mobiel om meer inzicht te krijgen in de manier waarop gebruikers omgaan met elk platform.
Voor de doeleinden van dit artikel verwijst de term "web" naar laptop / desktop-gebaseerde websites en webapplicaties. Wanneer we ontwerpen voor webgebaseerde applicaties, wordt meestal de hardware waarop ons ontwerp wordt bekeken, als vanzelfsprekend beschouwd. We gaan onze monitors of laptops niet oppakken en kantelen of aanraken. In feite zijn de tactiele interacties meestal beperkt tot:
Mobiel is een heel ander beest. We werken niet alleen met nieuwe en diverse hardware, maar mobiel ontwerp heeft ook de potentie om ons op heel verschillende manieren emotioneel te beïnvloeden. Mobile is een persoonlijk en mensgericht platform. Denk tenslotte aan wat wij veel van deze apparaten noemen: handsets. Ze passen in onze hand, in onze zak of naast onze portemonnee. We gebruiken ze om te bellen en om te socialiseren, en ze staan bijna altijd aan onze zijde. Deze factoren beïnvloeden allemaal onze emotionele perceptie van het apparaat.
In termen van hardwaremogelijkheden zijn er heel veel interactiepunten die allemaal rechtstreeks van invloed zijn op ontwerpoverwegingen. Waaronder:
Als ontwerpers hebben we allemaal sterke en zwakke punten, gebieden van expertise en gebieden van desinteresse. Voordat je in de basis van iPhone Design springt, is het een goed idee om te kijken naar de kenmerken van getalenteerde mobiele ontwerpers.
Het goede nieuws is dat je dit kunt leren. De vraag is, hoe geïnteresseerd ben je daarbij? Ontwerpen voor mobiele apparaten vereist een toewijding voor gebruikerservaring die verder gaat dan alles wat de meeste mensen hebben gezien bij het ontwerpen voor het web. Zelden creëren we mobiele interfaces die bedoeld zijn om te worden nagedacht en alleen te worden genoten voor de esthetische waarde. Een grote meerderheid van mobiele interfaces is taakgericht en gebruikersgericht.
De waarheid is dat mensen met de meeste op hulpprogramma's gebaseerde mobiele apps niet lang naar je ontwerp kijken. Als ze dat wel zijn, heb je iets verkeerd gedaan en als ze niet kunnen achterhalen hoe ze kunnen omzeilen wat je snel genoeg hebt gedaan, vertrekken ze. Ze verwijderen. Ze schrijven dan een vervelende recensie.
Ontwerpers die de gemakkelijkste overgang naar mobiel hebben, zijn degenen die een hoge standaard van bruikbaarheid en creativiteit omarmen. Het idee dat ontwerpen voor de gebruikerservaring op de een of andere manier het creatieve potentieel op de een of andere manier laat leeglopen, is precies het tegenovergestelde van de werkelijkheid.
Ontwerpen voor mobiel is tegenwoordig een van de meest opwindende en creatieve speeltuinen voor ontwerpers. Het is letterlijk een open speelveld, rijp voor innovatie. Om uit te leggen hoe het is om een mobiele ontwerper te zijn, is het het beste om terug te kijken naar de geschiedenis van het productontwerp.
Voordat u een mobiel apparaat kon kopen dat meerdere taken uitvoerde, hadden we één product dat aan één taak voldeed. Een telefoon met aanraaktoetsen, een wekker, een zaklamp - elk van deze afzonderlijke objecten vereiste een toegewijd productontwikkelteam, een ontwerper en een marketeer.
Tegenwoordig kunnen al deze taken natuurlijk op één apparaat worden uitgevoerd. Behoorlijk goed! Wat cool is, is dezelfde planning, aandacht voor detail en esthetisch ontwerp dat ging naar de telefoon, klok en zaklamp van weleer nog steeds in het maken van elk van deze apps vandaag!
Zie het als niet alleen "daar is een app voor", en in plaats daarvan "daar is een product voor." U ontwerpt niet alleen apps. Je ontwerpt producten.
Het meest opwindende aan ontwerpen voor mobiele apparaten is dat je meestal werkt vanuit een echt leeg canvas. Natuurlijk zijn er fundamentele en universele ontwerpregels die moeten worden overwogen, maar de waarheid is dat veel ontwerpregels en -verwachtingen die betrekking hebben op mobiel nog steeds worden gedefinieerd.
De uitdaging voor ontwerpers is om ontwerpen te creëren die trouw zijn aan de gebruiker, aan het merk en aan de taak die voorhanden is. Soms betekent dit dat u standaardbesturingselementen gebruikt en een interface levert die puur utilitair is. Op andere momenten betekent dit het negeren van alle normen en het creëren van een ontwerp dat volledig uniek is. Hoe dan ook, de gebruiker moet intuïtief begrijpen hoe de app binnen een oogwenk moet worden gebruikt.
Dit is de eerste vraag die ontwerpers nieuw voor mobiel lijken te stellen. Goed nieuws, pixel-pushers: het is Photoshop! Dat gezegd hebbende, met de proliferatie van apparaten, schermafmetingen en resoluties, vormen vectorvormen (of vector-slimme objecten) ook een groot deel van het ontwerpen voor mobiele apparaten.
Mijn persoonlijke voorkeur gaat uit naar het maken van vectorvormen in Illustrator en deze objecten kopiëren en plakken in Photoshop als vormlaag. Voor vectorobjecten die niet overdreven complex zijn, geef ik de voorkeur aan deze methode boven het gebruik van slimme objecten, dus ik wissel niet voortdurend heen en weer van Photoshop naar Illustrator.
We zullen ingaan op alle details van de verschillende schermformaten, resoluties, afbeeldingsbestandstypes en afmetingen van tikgebieden in een andere post in deze reeks: "Hoe ontwerpsjablonen van de iPhone en iPad te gebruiken."
iPhone-apps zijn ontwikkeld op verschillende manieren. In een later bericht duiken we in "Hoe te ontwerpen voor verschillende soorten iPhone-apps", maar over het algemeen worden iPhone-apps geschreven in de programmeertaal Objective-C met behulp van een Apple-programma genaamd Xcode. Apple biedt alle ontwikkelsoftware die u nodig hebt om een app gratis te maken wanneer u zich registreert als een Apple-ontwikkelaar. Om de software te kunnen installeren, hebt u echter een Apple-computer nodig met de nieuwste versie van het OS X-besturingssysteem. Een verdere overweging is dat om applicaties te bouwen en testen op een fysieke iPhone of iPod touch-apparaat, u zich moet aanmelden voor het Apple Developer-programma en een jaarlijkse $ 99 USD-vergoeding moet betalen.
De apps die u ziet die lijken te zijn "sjabloon" gebruiken meestal de standaard gebruikersinterface-elementen van Cocoa-Touch en volgen de standaard gebruikersinterfacerichtlijnen van Apple. Deze richtlijnen definiëren grafische standaarden en gebruikspatronen voor de standaard UI-elementen en maken het voor elke ontwikkelaar gemakkelijk om een app te bouwen en ontwerpen. Meestal ziet u een zwarte tab-balk langs de onderkant en een titelbalk met navigatie aan de bovenkant. Met de tabbladen kunt u naar verschillende informatiecategorieën gaan, terwijl de navigatiebalk u helpt bij het navigeren in die categorieën.
De apps die u ziet die geen standaard UI-elementen bevatten, zijn op maat ontworpen. Bijna alle casual en serious games zijn op maat ontworpen en sommige leuke tools en hulpprogramma-apps bevatten ook speciaal ontworpen grafische afbeeldingen.
Het besluit om aangepaste of standaardafbeeldingen te gebruiken, is vaak gebaseerd op het totale beschikbare budget voor het project. Alleen al het budget voor het ontwerpen van de aangepaste afbeeldingen is niet genoeg; er moet ook een budget zijn voor een ontwikkelaar om de aangepaste afbeeldingen te implementeren. Aangepaste integratie van app-ontwerpen kan soms heel moeilijk zijn voor de ontwikkelaar of het ontwikkelteam, en die tijd kan kloppen!
Gezien de verhoogde tijd en het geld dat nodig is om een gebruikersinterface op maat te bouwen, is het belangrijk om te overwegen hoeveel aangepaste grafische afbeeldingen de gebruikerservaring daadwerkelijk verbeteren, bovenop wat beschikbaar is met de door Apple geleverde UI-elementen. Een goed voorbeeld van een app die maar een klein ding doet en echt niet veel aangepast ontwerp nodig heeft, is UDID Sender. Deze app pakt de UDID van je apparaten (een beetje zoals de licentielabel van je iPhone) en stuurt deze naar een ontwikkelaar, zodat je pre-releaseversies van apps kunt installeren voor bètatests. Dit soort app heeft echt geen aangepaste afbeeldingen nodig.
Super goed! Met de volgende post in deze serie kun je je voeten nat maken door te spelen met een aantal pre-fab ontwerpsjablonen. Ik zal je wat basisvaardigheden geven over hoe je je eerste app kunt ontwerpen, inclusief standaarden, best practices en basisontwerpregels en -theorie voor mobiel.
Stuur me een e-mail en ik stuur je een kortingsbon van 20% voor een jaar aan downloads op Tapptics!
Accentsconagua