Uit de laatste video weten we dat we vijf belangrijke punten hebben waarmee we rekening moeten houden wanneer we beginnen met het ontwerpen van deze site. We zullen die in gedachten houden terwijl we verder gaan.
We beginnen natuurlijk met 'mobiel eerst' en we gaan het ontwerp in Photoshop uitzoeken. We blijven daar niet hangen, maar de creatieve tools in Photoshop zijn geweldig voor creatief denken aan het begin van een ontwerpproject.
We openen de iOS-simulator die gratis wordt geleverd bij XCode op Mac. Het is voor het testen van het web en native apps op een desktop- / laptopcomputer. We willen het gewoon snel, dus we kunnen er een screenshot van maken om ons een contextueel canvas in Photoshop te geven.
Voor de goede orde, we starten niet eerst met "iPhone", het is gewoon een klein scherm dat voor ons handig is om te ontwerpen. We zullen niets ontwerpen dat overdreven specifiek is voor de grootte of mogelijkheden van de iPhone.
Om onszelf een groter canvas te geven om van te werken (het is niet nodig om de site te beperken tot boven de "vouw"), snijden we de onderkant van de telefoon af en slepen deze naar beneden. Vervolgens nemen we een dun plakje van de randen van de iPhone en slepen ze naar beneden, dus in wezen hebben we deze supergrote (maar complete) iPhone.
We laten een gids achter waar het originele scherm eindigde om ons eraan te herinneren hoe groot het was. Ja, iedereen scrollt. Vooral op mobiel. Maar het is nog steeds leuk om te weten hoe dat eerste scherm eruitziet.
Bestanden
- # 004 - Telefoon Canvas.psd.zip
- # 004 - Raw Photos.zip