icon-arrow-lefticon-arrow

Informationsarchitektur, Content & Navigationsstruktur

Wir kümmern uns im ersten Schritt um die Entwicklung der Informationsarchitektur, um die Inhalte der Website und um die Navigationsstruktur. Alle diese Aspekte sind entscheidend für den späteren Erfolg des Projekts, denn weder ein ansprechendes Layout, noch moderne Technik können langfristig über schlechte Texte oder unlogische Strukturen hinwegtäuschen. Und für eine geräteübergreifende Informationsaufnahme spielt auch die richtige Reihenfolge von Inhalten eine entscheidende Rolle.

Sollten Sie Unterstützung bei der Formulierung von Texten benötigen, stehen wir auch hier mit Rat und Tat zur Seite.

 


Website-Aufbau und Templates

Auf Grundlage der Inhalte planen wir die verschiedenen Arten von Unterseiten (Templates) und unabhängige inhaltliche Module. Dabei haben wir von Beginn an die Darstellung auf Smartphones, Tablets und Computern im Blick um eine bestmögliche Funktion und Struktur über alle Geräteklassen hinweg sicherstellen zu können. Aus dieser konzeptionellen Grundlage heraus lässt sich die Programmierung ableiten.


Website-Konzeption mit interaktiven Prototypen

Nachdem Navigationsstruktur, Inhalte, Seitentypen und Module definiert wurden, beginnen wir mit der technischem Umsetzung eines sog. interaktiven Prototypen. Dieser Prototyp ist bereits eine voll funktionsfähige Website, die im Browser läuft und über mobile Endgeräte aufgerufen werden kann. Lediglich das Design ist noch nicht berücksichtigt, daher ist der Prototyp i.d.R. in Graustufen gestaltet.

Mit Hilfe des Prototypen kann das Produkt gemeinsam benutzt und getestet werden. Auch das Content Management System (CMS) ist bereits im Prototypen integriert, damit Sie sich mit dem System vertraut machen können. Wir lernen somit Ihre individuellen Anforderungen an das CMS kennen und können Ihnen darüber hinaus Hilfestellung geben, wenn wir merken dass Sie Fehler bei der Benutzung machen.

Der Prototyp durchläuft Korrekturschleifen, bis der Seitenaufbau und die Funktionalität dem gewünschten Ergebnis entsprechen. Dann endet die »Prototyping«-Phase und wir beginnen mit dem grafischen Layout.


Lastenheft & Pflichtenheft

Bei komplexen und umfangreichen Pro­jek­ten wird häufig vom Kunden ein sog. Lastenheft erstellt, in dem Funktionen und Anforderungen zusammengefasst sind. Wir sichten das Lastenheft und erstellen darauf aufbauen das sog. Pflichtenheft in dem wir unsere Vorschläge für die Umsetzung notieren.

Das Pflichtenheft beinhaltet Informationen zur Sitemap, zur inhaltlichen Struktur, zur Benutzerführung, zu Layout, Design, Animationen und Interaktionen sowie zu den notwendigen technischen Rahmenbedingungen und zu geplanten Funktionen, zu Sonderprogrammierungen, zu Schnittstellen und externen Abhängigkeiten.


Workshops zur Website-Konzeption

Im Zusammenhang mit der Website-Konzeption bieten wir unseren Kunden einen Workshop oder Kick-Off-Termin an. In diesem Termin diskutieren wir gemeinsam das Projekt und stellen sicher, dass keine Missverständnisse vorliegen. Wir unterstützen Sie bei der Definition der Projektziele und planen die Inhalte, die Struktur und die Funktionalität. Die Ästhetik der Website wird ebenso besprochen wie die zum Einsatz kommenden Technologien.


FAQ und Infos zur  Website-Konzeption

Was ist die Informationsarchitektur (IA)?

Die Informationsarchitektur (Information Architecture,  IA) einer Website wird in zwei Bereiche unterteilt. Einerseits beschreibt die IA die Seiteninhalte und die Funktionen der Website, andererseits die grundlegende Organisation bzw. die Struktur, die die Website später aufweisen soll. Die strukturelle Organisation nennt man auch Sitemap. Nicht verwechselt werden sollte die Informationsarchitektur mit der Navigation einer Website.

 

Was ist ein Clickdummy?

Als Clickdummy bezeichnet man in der Webentwicklung einen interaktiven PrototypDer Clickdummy zeigt die relevanten Unterseiten oder Funktionen um beim Testen der Website ein besseres Gefühl für die Benutzerführung zu bekommen.

Was ist eine Sitemap?

Die Sitemap kann auch als Inhaltsverzeichnis einer Website verstanden werden. In ihr findet man alle Unterseiten und Dokumente der Website. Im Normalfall sind die Unterseiten hierarchisch strukturiert, wobei diese Struktur in den letzten Jahren zunehmend verändert wird.

Die Sitemap wird vom Kunden zur Verfügung gestellt oder von der Agentur erarbeitet. Für die Planung eines Web-Projekts spielt die Sitemap eine entscheidende Rolle.

Eine Sitemap darf weder mit einer XML-Sitemap oder mit einem Navigationsmenü verwechselt werden!

Exemplarische Darstellung einer Sitemap
Die Abbildung zeigt eine schematische Darstellung einer Sitemap.

 

Was ist ein Wireframe?

Ein Wireframe (Drahtgitter) ist ein Hilfsmittel für die Konzeption von Websites. Beim sog. »wireframing« werden in sehr technischer, reduzierter Darstellungsweise die Elemente und Inhalte einer Website geplant. Das Visual Design tritt beim Wireframe völlig in den Hintergrund. Ziel des Wireframes ist es, die inhaltliche Struktur und den Aufbau einer Website, oder verschiedener Unterseiten, zu planen. Stark ausgestaltete Elemente oder Farben lenken in dieser Phase nur ab.

Mit Adobe Proto ersteller Wireframe
Mit Adobe Proto ersteller Wireframe – Bildquelle: Adobe

Wireframe vs. Mockup vs. Clickdummy …

Ein Wireframe ist meist statisch und nicht responsiv. Wenn die einzelnen Screens eines Wireframes miteinander verknüpft werden, entsteht ein Clickdummy.

Wireframes sind eng verwandt mit Mockups. Beide Begriffe werden oft synonym verwendet, was jedoch nicht korrekt ist. Der Wireframe ist deutlich reduzierter als das Mockup und zählt daher zu den Low Fidelity-Prototypen. Im Webdesign-Workflow wird für gewöhnlich ein Mockup später als ein Wireframe erstellt.  Darüber hinaus sind sowohl Mockup als auch Wireframe klassische konzeptionelle Hilfsmittel. Clickdummies hingegen brechen die Grenze zwischen Konzeption und User Experience auf.

Was ist Rapid Prototyping?

»Rapid Prototyping« bezeichnet einen konzeptionellen Ansatz bzw. einen Workflow im Webdesign. Da sich moderne Webanwendungen und responsive Websites nicht effizient mit statischen Grafiken planen lassen, wird anstelle dessen ein interaktiver Prototyp bzw. ein Clickdummy erstellt. Dieser Prototyp zeigt sowohl die Funktionalität, als auch die Flexibilität der Website, ist aber meist noch nicht visuell ausgearbeitet. Entwickelt wird der Prototyp entweder direkt in HTML und CSS – z.B. unter Zuhilfenahme eines CSS Frameworks, mit Hilfe spezieller Prototyping-Tools (z.B. Adobe XD, Invision) oder mit einer Kombination von statischen Design-Tools (z.B.. Sketch, Photoshop) und Plugins (z.B. Craft, Invision).


Kunden-Feedback

Das Kulturbanause Team hat bei der Umsetzung unseres Webauftritts allzeit professionelle und qualitativ hochwertige Arbeit geleistet. Die Zusammenarbeit war reibungslos, gut durchdacht und sehr freundlich. Die Geschwindigkeit bei der Umsetzung war enorm, wodurch unser Projekt schnell voran schreiten konnte. Es wurden neueste Web-Technologien eingesetzt und ein sehr stimmiges Design entwickelt. Bei Änderungsvorschlägen, Korrekturen oder Fragen wurde schnell und flexibel reagiert. Die Beratung war dabei immer auf hohem Niveau. Wir sind sehr zufrieden mit Kulturbanause und arbeiten schon am nächsten gemeinsamen Projekt.

November 2015, Johannes Joppien, Consultant, Cubia AG

Für unser bislang größtes und umfangreichstes Webprojekt suchten wir einen professionellen Entwickler, der unsere Vorstellungen und Wünsche in einem modernen Design und den neusten Webtechnologien für alle Geräteklassen umsetzt. Unsere Vorstellungen und Wünsche wurden dabei nicht nur erfüllt, sondern übertroffen. Unser ursprünglicher Entwurf wurde weiter verbessert und es kamen zahlreiche neue pragmatische Ansätze und Lösungen hinzu. Wir bedanken uns vielmals für die sehr gute, professionelle und zuvorkommende Zusammenarbeit. Der gemeinsame Erfahrungsaustausch, der gesamte Entwicklungsprozess und die Hilfestellungen bei Fragen und Problemen waren sehr bereichernd und hochwertig. Das Projekt hat Spaß gemacht und die fertige Website www.mitarbeiterbefragungen.com lässt sich sehen.

Mai 2016, Johannes Joppien, Consultant, Cubia AG

Vielen Dank nochmals für die jederzeit schnelle und professionelle Abwicklung und die angenehme und unkomplizierte Zusammenarbeit!

Dezember 2014, Timo Flätgen, Pressesprecher CDU Saar

Das Team von Kulturbanause hat eine hervorragende Projektumsetzung geleistet. Die Arbeiten sind schnell und äußerst effizient vorangeschritten. Die Kommunikation war klar und das Team immer erreichbar. Ihr technisches Verständnis war enorm und die Beratung und der Support auf einem sehr hohen Niveau. Vielen Dank.

November 2016, Greggor Diessner, Inhaber Goldblau

Die Zusammenarbeit mit kulturbanause verlief durchweg unkompliziert und mit der Qualität der WordPress-Templates sind sowohl wir, als auch unser Kunde sehr zufrieden. Die angenehme Kommunikation, die Einhaltung von Deadlines und die kurzen Reaktionszeiten haben dazu beigetragen, dass das Projekt wie geplant umgesetzt werden konnte.

Dezember 2014, Axel Heinrichs, Bereichsleiter Projektmanagement, nexum AG

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir sind nicht auf eine Branche festgelegt und haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: