Entwerfen für eine Lightbox

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Der 37 Signals Blog, Signal vs. Noise, hat einen Beitrag vor etwa einem Monat mit einer interessanten Beobachtung
„Das Design für das iPhone ist wie eine Mischung aus Print- und Webdesign.“

Ihr Punkt war, dass man beim iPhone die exakte Größe des Bildschirms kennt, den exakten Browser kennt, weiß, wie Schriftarten in diesem Browser aussehen werden, wie der Bildschirm aussieht und welche Fähigkeiten er hat. Das ist ganz anders als Webdesign, das voller Unsicherheiten ist. Tatsächlich besteht ein Großteil des Webdesigns darin, Unsicherheiten zu umgehen und auf die kleinsten gemeinsamen Nenner zu setzen.

Das Wichtigste ist die Auflösung, die genaue Größe dessen zu kennen, wofür man entwirft. Wann sonst hat man diese saftige Information? Wenn man **eine Lightbox entwirft.** Wissen Sie, einer dieser schicken kleinen CSS- und Javascript-Dinger, die Ihre gesamte Seite ausgrauen, mit Ausnahme einer kleineren Box, die oft ein Foto, eine Anmeldebildschirm oder andere wichtige Informationen anzeigt. So etwas wie ein Nicht-Pop-up-Pop-up. Viele Lightboxen, wie diese hier, verwenden eine feste Breite und Höhe.

Sie können diese Abmessungen nehmen und sie zu Ihrem vollen Vorteil nutzen. Zum Beispiel

  • Entwerfen Sie einen coolen, schäbigen Rahmen (keine Sorge um Erweiterbarkeit!)
  • Stöbern Sie auf stock.xchng und finden Sie ein cooles Hintergrundbild
  • Entwerfen Sie Bilder für die Ecken und machen Sie sich keine Sorgen über schicke Codes, um sie an die richtige Stelle zu bringen
  • Öffnen Sie ein neues Adobe Photoshop-Dokument mit diesen Abmessungen und beginnen Sie mit dem Entwurf, ohne an Einschränkungen zu denken