Dall'ultimo video, sappiamo di avere cinque punti principali da considerare quando si inizia a progettare questo sito. Li terremo in cima alla nostra mente mentre andiamo avanti.
Ovviamente stiamo iniziando il "mobile first" e inizieremo a capire il design in Photoshop. Non ci soffermeremo qui, ma gli strumenti creativi in Photoshop sono ottimi per il pensiero creativo all'inizio di un progetto di design.
Apriamo il simulatore iOS fornito gratuitamente con XCode su Mac. Serve per testare il Web e le app native su un computer desktop / laptop. Vogliamo solo che sia veloce in modo da poterne fare uno screenshot per darci una tela contestuale in Photoshop.
Per la cronaca, non stiamo iniziando prima "iPhone", è solo un piccolo schermo che ci è comodo da progettare. Non progetteremo nulla che sia eccessivamente specifico per le dimensioni o le capacità dell'iPhone.
Per darci una tela più alta su cui lavorare (non c'è bisogno di limitare il sito a above the "fold"), tagliamo la parte inferiore del telefono e la trasciniamo più in basso. Quindi prendiamo una fetta sottile dei bordi dell'iPhone e la trasciniamo verso il basso, quindi essenzialmente abbiamo questo iPhone super alto (ma completo).
Lasciamo una guida nel punto in cui si è conclusa la schermata originale per ricordarci quanto fosse grande. Sì, tutti scorrono. Soprattutto sui dispositivi mobili. Ma è comunque bello sapere come appare quella prima schermata.
File
- # 004 - Telefono Canvas.psd.zip
- # 004 - Raw Photos.zip