Optimale aanpassing van jouw ontwerp voor de iPhone X

De iPhone X heeft het app-ontwerp ingrijpend veranderd. Met zijn unieke formaat en de nieuwe gebruikersinterface-elementen moeten ontwerpers meer flexibiliteit en creativiteit tonen om indrukwekkende apps te maken. In deze handleiding wordt stap voor stap uitgelegd hoe je Sketch kunt gebruiken om je ontwerp aan te passen aan de vereisten van de iPhone X.

Belangrijkste inzichten

• De schermhoogte bij de iPhone X is 812 pixels, wat ruimte creëert voor nieuwe UI-elementen.
• De navigatie en tabbalk zijn hoger en vereisen aanpassingen in de lay-out.
• Het is belangrijk om rekening te houden met de Safe Area om ervoor te zorgen dat geen inhoud in het afgeronde gedeelte van het scherm valt.
• De Home Indicator is een nieuw interface-element dat bij het ontwerp moet worden overwogen.

Stapsgewijze handleiding

Begin met het maken van een nieuw iPhone X ontwerp in Sketch. Druk op A om een nieuw element toe te voegen en klik dan op het iPhone X-ontwerp.

De breedte blijft bij 375 pixels, terwijl de hoogte is ingesteld op 812 pixels. Dit geeft je meer ruimte voor het ontwerpen van je gebruikersinterface. Houd er rekening mee dat de afgeronde hoeken van het scherm belangrijk zijn voor de lay-out.

Kopieer de Home Controller en pas het ontwerp aan. Het is raadzaam om niet de standaardbibliotheken te gebruiken, maar de specifieke iPhone X Library voor een nauwkeurigere aanpassing. Ga naar de instellingen in Sketch en activeer de iOS 11-bibliotheek als deze nog niet aanwezig is.

Voeg een standaardnavigatiebalk toe om de interface consistent te maken. Zorg ervoor dat de hoogte van de navigatiebalk 88 pixels is in vergelijking met de 44 pixels van de iPhone 8.

Zoek naar de statusbalk in de iOS 11-bibliotheek en voeg deze ook toe. Deze moet aan de bovenrand van het scherm worden geplaatst.

Voor de tabbalk geldt hetzelfde: Kies een versie met drie tabs uit de iOS 11-bibliotheek en zorg ervoor dat deze 83 pixels hoog is, zodat deze goed in de lay-out past.

Let erop dat bij het ontwerp geen elementen in het afgeronde gedeelte steken. In de programmering wordt dit de Safe Area Layout Guide genoemd - dat is de ruimte die je nodig hebt voor een veilige weergave.

Voeg de Home Indicator toe als essentieel onderdeel van je ontwerp. Deze moet in het midden van de onderrand worden geplaatst.

Nadat je de basiselementen hebt toegevoegd, kun je het gehele gedeelte kopiëren en op de gewenste plaats plakken. Vergeet niet om de afstanden na het kopiëren aan te passen.

Herhaal dit proces voor de Chat Controller. Maak een kopie van het ontwerp en geef het een bijbehorende naam.

Vervang de iconen voor de tabs en pas de weergave aan. Het is belangrijk om de juiste symboliek en teksten zorgvuldig te kiezen.

Let op de afstanden, vooral tussen de chatbellen en de tabbalk. Houd een afstand van 16 pixels aan om te zorgen dat de elementen goed met elkaar in harmonie zijn.

Deze stappen tonen hoe snel je je ontwerp kunt aanpassen aan het nieuwe formaat. Bij onduidelijkheden is het echter geen probleem om het ontwerp eenvoudig verder te verfijnen.

In de volgende les leer je hoe je met extra effecten in het profielgebied werkt, inclusief het gebruik van blur-effecten.

Samenvatting – Effectief iPhone X ontwerp in Sketch

Het aanpassen van je ontwerpen aan de iPhone X biedt nieuwe mogelijkheden. Met de juiste kennis van de nieuwe schermformaten en UI-elementen kun je indrukwekkende gebruikersinterfaces maken.