Eology Design ReFresh
CorporateDesign und Branding ReFresh für eology – die SEO-Agentur aus Volkach.
Für die Firma nanoplus, gegründet im Jahr 2009, ist Hersteller für Halbleiterbauelemente und einer der führenden Hersteller von Lasern für Gassensoranwendungen.
Die besondere Herausforderung war, alle Bereiche und Produkte auf eine moderne und der Branche angepasste Art den Betrachter:innen zu präsentieren und damit dem technischen Vorsprung und der Innovationskraft des Unternehmens auch visuell einen starken und nachhaltigen Ausdruck zu verleihen.
Mit unserer bewährten Methode des Web-KickOffs startet bei jo’s büro jedes Webprojekt (siehe Use-Case Webdesign).
Es geht in verschiedenen Methoden vor allem darum, das Unternehmen, seine Produkte, Insights, PainPoints etc. und natürlich das Projektteam kennen zu lernen.
Unsere Workshops sind ein wichtiger Grundstein zu einer erfolgreichen Lösung der Probleme und Herausforderungen. Im Fall von nanoplus ging es im Fokus darum das tiefe Produktspektrum zu verstehen, die Unterschiede der HighTech-Produkte zu erkennen und zu erarbeiten, wie diese auf der neuen Webseite noch besser mit Ihren Highlights und USPs dargestellt werden können.
Im WireFraming wurden die durch den Strukturworkshop definierten Seiten und Inhalte in Module und Seitentemplates überführt.
In diesem Stadium war es uns schon sehr wichtig die technische Entwicklung und Umsetzung mit einzubeziehen. Das WireFraming bietet auch die Möglichkeit Logikfehler oder gar noch fehlende Inhalte schnell zu identifizieren und ist somit ein wichtiger Bestandteil der konzeptionellen Vorarbeit auch für die Kundenseiten.
Das Webdesign schließt sich der Freigabe der WireFrames an und ist der erste Schritt zur visuellen Ausarbeitung der neuen Webseite.
Wir haben für nanoplus zwei Designrichtungen zu diesem Zeitpunkt erarbeitet und der Favorit wurde in weiteren Korrekturschleifen zur Designfreigabe geführt.
Unser System zur Gestaltung (auch und vor allem) von Web- und Screen-Applikationen basiert auf Atomic Design von Brad Frost.
Hierbei geht es grundlegend um die konsistente Designsprache. Diese erreichen wir durch die modulare Gestaltungslehre; wir beginnen mit den kleinsten Teilen (Schriftabschnitte, Bottons etc.) und bauen damit immer komplexere Moleküle.
Die Startseite muss sofort auf den Punkt birngen worum es geht, was mich erwartet und im Idealfall auch auf Anhieb gefallen.
Durch die stimmungsvolle Inszenierung und vollflächige Darstellung der Top-Produkte möchten wir genau das erreichen. Eine plakative Headline klärt sofort auf was ich sehe und weitere, sehr reduzierte gehaltene Informationen, bringen weitere Erläuterungen.
Die Startseite schafft mit Ihrem Produkt-Viewer einen direkten Komplett-Überblick über das Produktangebot.
Das Design lebt von Details. Schriftbild und Linienführung sind fein aufeinander abgestimmt.
Feine Hover-Animationen (sehr reduziert) und der gezielte Einsatz von Farbe (hellblau als „Lichtquelle) in Linien und Interaktionselementen führen die Betrachter:innen durch den Content der Seite.
Das Design überzeigt über Freiräume und einen klaren Aufbau der Gestaltungselemente.
Wir möchten die Nutzer:innen gezielt durch den Inhalt führen und jedes Element soll Freude am Entdecken und verstehen hervorrufen.
Die Bildwelt unterstützt den Content durch fachspezifische Bilder und im Kopfbereich der Seiten durch ausgewählte Produkt- oder Themenbilder.
Jeder Seitentyp wurde individuell gestaltet und nach den Inhalt ausgerichtet.
Alle Grafiken wurden wenn nötig zur optimalen Darstellung angepasst um den gewünschten Gesamteindruck zu erreichen.
Bild: History & Innovations
Die Anforderung der Zielgruppenanalyse sagte uns, dass die Webseite vor allem auf Desktopgeräten ausgespielt wird.
Dennoch war einer der damaligen PainPoints der alten Seite die mobile Ansicht. Somit hatten von Beginn an im Projektteam das Ziel, dass die Gesamte Webseite und alle geplanten Features auch mobil nicht nur funktionieren, sondern auch einen gewissen Joy-Of-Use mitbringen sollen.
So ist jede Seite optimal zu erfassen, egal auf welchem Endgerät Sie ausgespielt wird.
Wir glauben, dass der erste Kontakt sehr wichtig ist. Und einer Webseite die heute mobile nicht funktioniert schenken Nutzer:innen kein Vertrauen.
Die Produkte unterscheidenen sich (zumindest innerhalb der Kategorien) lediglich im Nanometerbereich.
Für diese Seiten haben wir eine praktsiche zweite Navigationsebenene (linke Seite) entwickelt, welche auch mobil funktionieren musste.
So entfällt das lästige Springen über das Hauptmenü innerhalb einer Produktkategorie und als Nutzer:in komme ich wesentlich schneller an mein Ziel.
Schon zu Beginn wurde uns klar, dass ein Highlight der neuen Webseite die Produkte sind – inhaltlich.
Das neue Webdesign gewinnt stark an Attraktivität durch unsere parallele Arbeit an einem individuellen und stimmigen Fotografiekonzept.
Mit unserem Fotografen Stefan Bausewein ist es uns gelungen einen ganz besonderen Stil und Aufbau für die Hero-Shots zu entwickeln.
Dabei entstehen die Produktbilder nicht durch Retuschen oder Rednerings sondern wir setzen die echten Produkte perfekt in Szene.
Das hebt die Bildsprache des Unternehmens neben der eigentlichen Webseite auf eine neue Stufe und setzte den Fokus auf das Wichtigste im Nano-Bereich: Details.
Wir bedanken uns für die sehr angenehme und produktive Zusammenarbeit mit dem gesamten Team von nanoplus und jetzt:
CorporateDesign und Branding ReFresh für eology – die SEO-Agentur aus Volkach.
Logogestaltung für den Laden „timmies“ in Würzburg.
Logogestaltung für „mylk + honey“. Der serifenlose Markenzusatz „verbindende kommunykation.“ soll die Unternehmensintention nochmals verdeutlichen.
Wichtige Informationen für unsere Shop-Kunden
VERSANDARTEN
ZAHLUNGSARTEN
jo’s büro für Gestaltung GmbH
Juliuspromenade 3
97070 Würzburg
DSGVO MAP
* Mit dem Laden der Karte akzeptieren Sie unsere Datenschutzerklärung (siehe unten) und die Datenschutzerklärung von Google. Mehr erfahren
Als Freelancer oder mit einer Initiativbewerbung – wir freuen uns Dich kennen zu lernen.
Sag uns warum wir das sollten unter: bewerbung@jos-buero.de
Siehe dazu auch unsere Datenschutzbelehrung für Bewerber*innen.
