#005 – Photoshop Mobile, Teil 1

Wir öffnen unsere Photoshop-Datei. Der eher albern aussehende „gestreckte“ iPhone-Screenshot, der uns einfach eine Leinwand im mobilen Kontext gibt.

Wir fangen ganz einfach an: mit Jeffs Namen. Wir müssen sofort eine Schriftart auswählen. So etwas kann sehr schwierig sein. Wir haben eine alte Schriftart zu berücksichtigen (die Schriftart, die auf der letzten Website verwendet wurde) und Jeffs Marke und Persönlichkeit. Schriftarten können so viel Persönlichkeit mit sich bringen. Wir betrachten einige Schriftarten mit viel zu viel Persönlichkeit (sie würden mit Jeffs Stil kollidieren). Wir betrachten die alte Schriftart. Dann entscheiden wir uns für Proxima Nova, da sie viele Eigenschaften mit der alten Schriftart teilt, ohne zu viel Persönlichkeit zu verleihen. Sie ist einfach sauber und schlicht. Die Linien, aus denen die Buchstaben bestehen, ähneln sehr den Linien in Jeffs Arbeit. Ebenso wichtig ist, dass wir wissen, dass wir Proxima Nova auch im Web verwenden können.

Direkt unter Jeffs Namen fügen wir einige Fotos von Jeffs Arbeit ein. Das ist wahrscheinlich das Wichtigste, was wir auf dieser Seite tun. Es muss schmerzhaft offensichtlich sein, was Jeff schafft. Ein Bild wird im Mittelpunkt stehen. Dann werden wir zwei weitere Fotos platzieren, aber am Rand, sodass sie nur hineinspähen. Wir werden hier schließlich einen Slider erstellen, und diese hineinspähenden Bilder machen sehr deutlich, dass man das mittlere Bild verschieben kann, um die Bilder am Rand freizulegen. Keine Erklärungen notwendig. Mobile first! Die Designentscheidungen, die wir hier treffen, werden das Verhalten des Sliders später beeinflussen.