Nehmen Sie Kontakt auf.

Sie benötigen weitere Informationen zu einer bestimmten Leistung?
Sie haben eine konkrete Projektanfrage oder möchten einen Gesprächstermin vereinbaren?

Dann sind Sie hier genau richtig. Schreiben Sie uns ein paar Zeilen und wir melden uns schnellstmöglich bei Ihnen.

Ja, ich habe die Datenschutzerklärung zur Kenntnis genommen und bin damit einverstanden, dass die von mir angegebenen Daten elektronisch erhoben und gespeichert werden. Meine Daten werden dabei nur streng zweckgebunden zur Bearbeitung und Beantwortung meiner Anfrage benutzt.

Mit dem Absenden des Kontaktformulars erkläre ich mich mit der Verarbeitung einverstanden.

Screendesign

Das Design einer Website gibt den Inhalten eine gut lesbare und schnell erfassbare Form und stellt sie optimal zugeschnitten auf die Zielgruppen dar. Eine überzeugende Gestaltung spricht den Benutzer durch stimmige Bild- und Farbwelten emotional an und fügt sich in das Erscheinungsbild eines Unternehmens (Corporate Design) unter Berücksichtigung der medialen Möglichkeiten des Internets nahtlos ein. Der Weg bis zum fertigen Design eines Webprojektes lässt sich in folgend Stationen gliedern:

01. Konzeptionelle Vorarbeit

Um ein stimmiges, inhaltlich korrektes und gut strukturiertes Online-Projekt mittels des Screendesigns eine adäquate Optik zu verleihen, beginnt die kreative Arbeit bereits mit dem Briefing-Gespräch. In den Projektphasen zur Analyse und Konzeption eines Webprojektes werden die Grundsteine für das spätere Design gelegt, damit die Gestaltungselemente wie Farben, Bilder und Texte sowie deren Positionierung und Gewichtung innerhalb des Screendesigns immer nachvollziehbar sind. Vor der grafischen Umsetzung werden Sitemaps, die sie Seitenstruktur wiedergeben, und ggf. Flowcharts, die die Funktionalen Abläufe darstellen, entworfen und mit dem Kunden abgestimmt.

Zwei Beispiele für Wireframes, die das grobe Layout einer Webseite wiedergeben.

02. Wireframes - Das Groblayout

Nach oder während der Pflichtenhefterstellung werden sogenannte Wireframes (Drahtgittermodelle der benötigten Screens) erstellt. Mit Hilfe dieser ersten Groblayouts können die Funktionsweise und der Aufbau der Screens durchdacht und diskutiert werden. Wie werden die Inhalte, Navigationen und sonstige Funktionsbereiche auf dem Screen angeordnet? Welchen Raum nehmen sie ein? Kann die konzipierte Seitenaufteilung über alle Rubriken und Navigationsebenen hinweg beibehalten werden?

03. Screendesigns - Das Feinlayout 

Auf Basis der Wireframes werden die Screendesigns erstellt. Diese geben das Aussehen der fertigen Website anhand exemplarischer Screens wieder. Dazu gehören z.B. die Startseite, Rubriköffnerseiten und Inhaltsseiten, die die verschiedenen Seitentypen abdecken. Die Screendesigns vermitteln den späteren Look der Website oder der Webanwendung.

04. Mockup - Klickbarer Dummy

Neben dem Look kann das dazugehörige Feel über klickbare Dummies simuliert werden, ohne das Projekt bereits technisch umzusetzen und mit Funktionalität durch ein CMS zu versehen. Für sogenannte Mockups (oder auch Prototypen) werden verschiedenen Screensdesigns miteinander verknüpft und als einfaches HTML exportiert. Das heisst, die hinterlegten Screens können über die verlinkten Menüs und Buttons durchgeklickt werden. Diese Mockups können nicht nur für Präsentationen und die weitere Abstimmung zur technischen Umsetzung sondern auch für erste Usability-Tests herangezogen werden.

05. Styleguide

Ein Online Styleguide definiert alle optischen wiederkehrenden Elemente eines Webprojektes oder auch der gesamten Online-Kommunikation eines Unternehmens. Im Styleguide werden mögliche Layouts, Raster, Navigationen, Buttons, Schriften, Farben, Abstände und sonstige grafische Elemente definiert. Diese Anleitung unterstützt sowohl die Designer und Webentwickler als auch die späteren Redakteuren bei ihrer Arbeit und gewährleistet einen konsistenten Umgang mit Inhalten und grafischen Elementen.

Icon zum Themengebiet

Energie-Software

Webanwendungen für die Energiebranche

  • Energieverbrauchsausweis-Rechner
  • Erdgasfahrzeug-Rechner
  • Erdgasfahrzeug-Modellpalette
  • Gewerbekunden-Energieberater
  • Interaktive Webvideos
Figur zeigt auf die Inhaltsseiten Software, TYPO3 und Social Media