Aus dem letzten Video wissen wir, dass wir fünf wichtige Punkte berücksichtigen müssen, wenn wir mit dem Design dieser Website beginnen. Wir werden diese im Kopf behalten, wenn wir vorwärts gehen.
Wir beginnen natürlich mit „Mobile First“ und werden das Design in Photoshop herausfinden. Wir werden dort nicht verweilen, aber die kreativen Werkzeuge in Photoshop eignen sich hervorragend für kreatives Denken zu Beginn eines Designprojekts.
Wir öffnen den iOS-Simulator, der mit XCode auf dem Mac kostenlos geliefert wird. Es dient zum Testen des Webs und nativer Apps auf einem Desktop- / Laptop-Computer. Wir wollen es nur schnell, damit wir einen Screenshot davon machen können, um eine kontextbezogene Leinwand in Photoshop zu erhalten.
Für die Aufzeichnung starten wir nicht zuerst "iPhone", es ist nur ein kleiner Bildschirm, den wir bequem gestalten können. Wir werden nichts entwerfen, das zu spezifisch für die Größe oder die Fähigkeiten des iPhones ist.
Um uns eine größere Leinwand zum Arbeiten zu geben (die Site muss nicht über der „Falte“ beschränkt werden), schneiden wir die Unterseite des Telefons ab und ziehen sie nach unten. Dann nehmen wir eine dünne Scheibe von den Kanten des iPhones und ziehen sie nach unten, sodass wir im Wesentlichen dieses super große (aber vollständige) iPhone haben.
Wir lassen eine Anleitung an der Stelle, an der der ursprüngliche Bildschirm endete, um uns daran zu erinnern, wie groß er war. Ja, jeder scrollt. Besonders auf dem Handy. Aber es ist immer noch schön zu wissen, wie dieser erste Bildschirm aussieht.
Dateien
- # 004 - Telefon Canvas.psd.zip
- # 004 - Raw Photos.zip