inwendo.de Version 3.0

Vor etwas mehr als drei Jahren hatten wir unseren letzten Webseiten-Relaunch – im April 2016. Seitdem haben wir uns entwickelt und unser Anspruch an unsere Seite hat sich verändert. Deshalb war uns wichtig, sich für eine neue Website Zeit zu nehmen. Und zwar genauso viel, um unserer heutigen Agentur gerecht zu werden.

Für das Ziel des Relaun­ches haben wir etli­che Ent­würfe ent­wi­ckelt, ana­ly­siert, ver­wor­fen, neu geschrie­ben und wie­der ver­wor­fen, bis wir wirk­lich mit allen gro­ßen und klei­nen Details zufrie­den waren. Wir woll­ten eine Seite schaf­fen, auf der sich jeder zurecht­fin­det. Unsere Pro­dukte und Dienst­leis­tun­gen soll­ten so abge­bil­det wer­den, dass keine Ver­wir­rung durch unzäh­lige Unter­sei­ten und Unter-Unterseiten ent­steht. Die Seite sollte sowohl klar und grad­li­nig sein als auch coole Fea­tures für eine bes­sere Expe­ri­ence bie­ten. Wir sind der Mei­nung, dass wir mit unse­rer neuen Seite alles erreicht haben.

Dafür möch­ten wir uns auch noch ein­mal expli­zit bei Sascha Wol­ters bedan­ken, der nicht müde wurde, in den unter­schied­lichs­ten Loca­ti­ons immer die bes­ten Fotos zu machen. Und bei Manuela Sterns, die unsere Text­ent­würfe immer in rich­tige Sätze ver­wan­delt hat.

Wir möch­ten nun noch einen klei­nen Ein­blick hin­ter die Kulis­sen unse­rer neuen Seite gewäh­ren und haben uns daher die Mühe gemacht, unsere umge­setz­ten Ideen noch ein­mal auf­zu­schlüs­seln.

Design

Der Stil der Seite lei­tet sich direkt von unse­rem Cor­po­rate Design ab. Der Hin­ter­grund ist sim­pel in Weiß gehal­ten und der Text in Schwarz, um den Fokus auf den Inhalt zu legen. Graue Flä­chen wer­den zum Her­vor­he­ben von Inhal­ten ver­wen­det und #e1004c als Kon­trast­farbe unter ande­rem für Links und das Fullscreen-Menu. Bei der Font sind wir unse­rer Haus­schrift treu geblie­ben und nut­zen die "Walsheim" von Grilli Type in unter­schied­li­chen Schrift­schnit­ten.

Lineare Content-Führung

Alle Pro­dukt­sei­ten ent­hal­ten klar struk­tu­rierte Texte. Zum einen spie­geln diese mit einem all­ge­mei­nen Absatz unsere Sicht auf das jewei­lige Pro­dukt wider und zum ande­ren wer­den mit klei­ne­ren Absät­zen detail­lierte Infor­ma­tio­nen zu Teil­be­rei­chen erklärt. Ent­we­der kann alles durch­ge­le­sen oder gezielt ein Punkt aus­ge­wählt wer­den.

Fokus auf Wesentliches

Wir haben unsere Arbeit in zwei Kate­go­rien ein­ge­teilt: Unser Haupt­an­ge­bot zeigt über­sicht­lich das Header-Menu. Das Ent­wi­ckeln von Apps, Web­sites, indi­vi­du­el­ler Soft­ware und Shop­sys­te­men sowie das Con­sul­ting bei Compliance-Fragen und Hos­ting bil­den hier die Über­schrif­ten. Die Kon­zep­tion und das Online-Marketing – als Tools, die in allen unse­ren Leis­tun­gen vor­kom­men – zei­gen sich, sobald das Full-Screen-Menu geöff­net wird.

Fullscreen-Menu

Damit wir uns auf das Wesent­li­che kon­zen­trie­ren kön­nen, haben wir uns im Header-Menu für eine Fullscreen-Variante ent­schie­den, die alle zusätz­li­chen Menü­punkte unter­bringt. So hat­ten wir aus­rei­chend Platz, um zu den ein­zel­nen Ele­men­ten noch einen klei­nen Aus­zug aus dem Intro-Text der jewei­li­gen Seite ein­zu­fü­gen. Dadurch erschließt sich den Lesern eher, ob die Seite den gewünsch­ten Inhalt ent­hält oder nicht.

Das weiße Dreieck

Kurz vor dem Ende der Ent­wick­lung stan­den wir vor einer neuen Her­aus­for­de­rung: Unsere Header-Fotos waren so zuge­schnit­ten, dass bestimmte Bild­schirm­grö­ßen beim Star­ten kei­nen Text zeig­ten. Da wir sehr viel Wert auf die Texte legen, brauch­ten wir eine Lösung. Meh­rere Mög­lich­kei­ten haben wir getes­tet und letzt­lich unse­ren Intro-Header aus­ge­wählt. Bei Gerä­ten, auf denen die Nut­zer kei­nen Text sehen, ver­de­cken wir das Bild mit dem dar­un­ter fol­gen­den Inhalt der Seite. So zeigt sich nur noch ein klei­nes Stück des Bil­des und erst beim Scrol­len schiebt sich der Inhalt her­un­ter, sodass das Bild frei­ge­legt wird. Erst wenn das Bild kom­plett zu sehen ist, lässt sich die Seite wie sonst wei­ter­s­crol­len.

Das graue Dreieck

Unser Cor­po­rate Design Ele­ment – das graue Drei­eck – das immer in der unte­ren rech­ten Ecke unse­rer Print-Produkte zu fin­den ist, woll­ten wir natür­lich auch in unser neues Web­de­sign auf­neh­men. Es erscheint hier nach einer bestimm­ten Länge der Seite und ver­an­kert sich dann fest am unte­ren Rand des Fens­ters, wäh­rend der Inhalt dar­über scrollt.

Digitaler Schaukasten

Auf unse­rer Seite möch­ten wir nicht nur erklä­ren, was wir alles anbie­ten, son­dern auch fer­tige Pro­jekte als Bei­spiele unse­rer Arbeit zei­gen. Unsere Show­ca­ses geben dafür einen viel­fäl­ti­gen Über­blick. Die Pro­jekte las­sen sich nach unse­ren ver­schie­de­nen Pro­duk­ten fil­tern und sind jeweils nach Anfor­de­run­gen und den ent­spre­chen­den Lösun­gen geglie­dert. So ermög­li­chen wir je nach Kun­den­wunsch einen indi­vi­du­el­len Ein­druck von unse­ren Leis­tun­gen.