inwendo.de Version 3.0

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 aufzuschlüsseln.

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 "Wals­heim" von Grilli Type in unter­schied­li­chen Schriftschnitten.

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 werden.

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 weiterscrollen.

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 Leistungen.