Event Space Rotterdam

• Je kunt een duidelijke en gebruiksvriendelijke layout opzetten voor een app-scherm in Adobe Illustrator.

• Je kunt typografie bewust toepassen door hiërarchie aan te brengen in koppen, labels en invoervelden.

• Je kunt kleuren en stijlelementen uit een styleguide correct gebruiken binnen een interface-ontwerp.

• Je kunt visuele elementen zoals iconen en knoppen vormgeven en consistent toepassen binnen één ontwerp.

• Je gebruikt de vormgeving die je in de voorgaande lessen hebt gemaakt.

•  Daarnaast heb je natuurlijk Adobe Illustrator nodig.

De theorie wordt door je docent klassikaal uitgelegd. 

Je gaat deze opdracht individueel uitvoeren. 

Zo maak je een inlogpagina met Adobe Illustrator

Stap 1: Layout en Interface Design 

Begin met een schets van je layout. Houd het simpel en gebruiksvriendelijk. Zorg dat de inlogvelden goed zichtbaar zijn, met duidelijke labels en genoeg ruimte tussen de onderdelen, zodat het niet chaotisch overkomt. Maak de navigatie logisch: eerst gebruikersnaam/e-mailadres, dan wachtwoord, en geef opties voor wachtwoord vergeten of een nieuw account aanmaken.
Formaat van je scherm is 402px bij 874px (iPhone 16 Pro), 72 ppi, RGB

Stap 2: Typografie en Visuele Hiërarchie 

Kies een lettertype dat zowel leesbaar als stijlvol is. Gebruik hiërarchie om de aandacht van gebruikers te sturen; laat inlogvelden en knoppen opvallen, maar houd de stijl consistent met die van het merk. Gebruik bijvoorbeeld verschillende diktes of stijlen voor koppen, labels en invoervelden.

Stap 3: Kleurenschema 

Kies kleuren die passen bij je merk en het ontwerp er netjes uit laten zien. In dit geval gebruik je de aangeleverde styleguide voor de kleuren. Zorg voor contrast tussen tekst en achtergrond om de leesbaarheid te verbeteren. Subtiele kleurverlopen of schaduwen kunnen het ontwerp meer diepte en flair geven. Let erop dat kleuren ook goed leesbaar zijn voor mensen met een visuele beperking.

Stap 4: Visuele Elementen 

Voeg visuele elementen toe, zoals iconen of kleine illustraties, om het inlogproces te verduidelijken. Denk aan iconen voor ‘inloggen’, ‘wachtwoord vergeten’, of ‘account aanmaken’. Zo maak je het gebruik makkelijker en overzichtelijker. Zorg dat deze stijl bij de rest van de site past voor een samenhangend geheel.

Stap 5: Afronden 

Als je tevreden bent met het design, maak dan een een kopie van dit artboard in illustrator en gebruik deze als basis voor het volgende scherm van de app.

Omschrijf handige tips en bronnen die studenten kunnen helpen bij het uitvoeren van de opdracht.