PAGE online

Relaunch bei Swipe

D

Bild Swipe.de

as Designstudio Swipe hat seine neue Webseite lanciert.

 

Im Januar präsentierte das auf App-Entwicklung spezialisierte Hamburger Designstudio Swipe seinen neuen Markenauftritt samt Geschäftsausstattung. Jetzt ist auch die Webseite dem neuen Design angepasst. Getreu seinem Fokus auf das mobile Web (wie zuletzt für brand eins) legte Swipe auch bei der Neuentwicklung der eigenen Webseite den Schwerpunkt auf »Mobile First« und Responsive Design. Alexander Meinhardt, Head of Design von Swipe, verfolgte bei der Relaunch-Konzeption die Idee eines Responsive Posters, das sich dynamisch an jeden Screen anpasst und immer wieder neue Kompositionen ergibt. Ausgehend vom Smartphone-Screen wurde die Bildausgabe fu?r Tablets und Desktop retina-optimiert angepasst. Dabei hat das Swipe-Team mit einem selbst entwickelten Script mehr als 2.200 Assets erzeugt, die je nach Device und Viewport ausgeliefert werden.

»Wir bei Swipe mo?gen Konzepte, die einfach aussehen, aber eine gewisse Finesse beno?tigen, damit sie funktionieren«, sagt Alexander Meinhardt. »Fu?r den Relaunch unserer Website haben wir versucht, die ganze Freiheit von Grafikdesign innerhalb der technischen Restriktionen zu realisieren, die Multiscreen-Usability vorgibt.«

Visuell ist die neue Seite reduziert und klar, jedoch mit einigen Besonderheiten gespickt: In die Swipe-Website sind Phosphor-Animationen und SVG-Grafiken integriert – die Grundfarbe der Seitenelemente wird per Zufallsgenerator aus fünf Neon-Tönen ausgewa?hlt. Programmiert wurde die Website inhouse in HTML5, CSS3 und JavaScript.

Hier ein paar Impressionen:

KR_130515_Swipe_Website_Montage_1
Bild: Swipe
1/7
KR_130515_Swipe_Website_Montage_2
Bild: Swipe
2/7
KR_130515_Swipe_Website_Montage_3
Bild: Swipe
3/7
KR_130515_Swipe_Website_Shot_3
Bild: Swipe
4/7
KR_130515_Swipe_Website_Shot_5
Bild: Swipe
5/7
KR_130515_Swipe_Website_Shot_6
Bild: Swipe
6/7
KR_130515_Swipe_Website_Shot_8
Bild: Swipe
7/7
Produkt: Download PAGE - CSS Tipps & Tricks für Designer - kostenlos
Download PAGE - CSS Tipps & Tricks für Designer - kostenlos
Typische Fallbeispiele aus der Arbeit mit Cascading Style Sheets

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren