#004 – Eine Photoshop-Leinwand

Aus dem letzten Video wissen wir, dass wir fünf Hauptpunkte zu beachten haben, wenn wir mit der Gestaltung dieser Website beginnen. Wir behalten diese im Hinterkopf, während wir weitermachen.

Wir beginnen natürlich „mobile first“ und werden das Design in Photoshop herausarbeiten. Wir werden uns dort nicht lange aufhalten, aber die kreativen Werkzeuge in Photoshop eignen sich hervorragend für kreatives Denken zu Beginn eines Designprojekts.

Wir öffnen den iOS-Simulator, der kostenlos bei XCode auf dem Mac mitgeliefert wird. Er dient zum Testen von Web- und nativen Apps auf einem Desktop-/Laptop-Computer. Wir wollen ihn nur kurz, damit wir einen Screenshot davon machen können, um uns eine kontextbezogene Leinwand in Photoshop zu verschaffen.

Zur Erinnerung: Wir beginnen nicht mit dem „iPhone“ zuerst, es ist nur ein kleiner Bildschirm, der für uns praktisch ist, um ihn herum zu gestalten. Wir werden nichts entwerfen, das übermäßig spezifisch für die Größe oder die Fähigkeiten des iPhones ist.

Um uns eine höhere Leinwand zum Arbeiten zu geben (wir müssen die Website nicht auf den „Above the Fold“-Bereich beschränken), schneiden wir den unteren Teil des Telefons ab und ziehen ihn nach unten. Dann nehmen wir einen dünnen Streifen von den Rändern des iPhones und ziehen ihn nach unten, sodass wir im Wesentlichen dieses superhohe (aber vollständige) iPhone haben.

Wir lassen eine Hilfslinie dort, wo der ursprüngliche Bildschirm endete, um uns daran zu erinnern, wie groß er war. Ja, jeder scrollt. Besonders auf Mobilgeräten. Aber es ist trotzdem schön zu wissen, wie dieser erste Bildschirm aussieht.