Zu den Referenzen unserer Webdesigner >>>

Um diese Hürden für Jungunternehmer zu senken, wurde die Initiative „Gründerchance“ ins Leben gerufen. Gemeinsamen mit der Hochschule Anhalt haben wir dafür die Infoplattform www.gründerchance.de erstellt. Hier können sich alle, die ein Start-Up gründen wollen, ausführlich informieren, inspirieren und beraten lassen.

Das von uns zum Selbstkostenpreis gesponserte Internetportal bietet Beispiele von Gründungsideen als Inspiration für mögliche Interessenten an und unterstützt aktiv bei der Neugründung. Das Gründerchance-Team bietet allen Jungunternehmern einen speziellen Beratungsansatz an, der Kompetenzen und persönliche Interessen in innovative und tragfähige Ideen für Existenzgründungen zu übersetzen hilft.

Die Resonanz auf das Projekt ist nach dem Start der Webseite Mitte Januar 2011 mehr als positiv. Bereits nach wenigen Wochen war das mehrköpfige Gründerchance Team kaum noch in der Lage alle Anfragen sofort abzuarbeiten.

Wir wünschen allen Start-Ups viel Erfolg – lasst es krachen!

Über zwanzig Jahre am Markt, 250 Mitarbeiter, 30.000 m2 Produktionsfläche, Mitglied der Flag Alliance® – Sachsen Fahnen GmbH & Co. KG ist eine der weltweit größten und modernsten Druckereien für textile Materialien.

Die Aufgabe

Die bestehende Website www.sachsenfahnen.de sollte zu einem starken Internetportal ausgebaut werden – im Fokus: innovative Systemlösungen in der Großbild-Kommunikation und Verkaufsförderung.

Die Lösung

Den Startschuss für das Projekt bildeten zahlreiche Workshops zu den Themen Druck-Shop-Integration, Web-to-Print-Lösungen, Suchmaschinenoptimierung und Social-Media.

Das neue Webdesign ermöglicht einen schnellen Einstieg, der den Nutzer mit sehr wenigen Klicks zum gewünschten Produkt führt. Dynamische und ansprechende Bild- und Farbwelten bilden nun den Rahmen für das neue Webdesign. Beim Besuch der Website werden die Nutzer sprichwörtlich an die Hand genommen und über die Seite geführt. Um eine größtmögliche Akzeptanz unter den Nutzern zu erreichen, wurde das Design in einem mehrstufigen Prozess erarbeitet und getestet.

Der gesamte Internetauftritt wurde mit dem Content-Management-System Typo3 umgesetzt. Im Verlauf der Realisierung wurden zahlreiche Extensions und Funktionalitäten an die Wünsche und Bedürfnisse von Sachsenfahnen angepasst. So wurde die gewachsene Struktur der “alten” Website beispielsweise mit Hilfe automatisierter Weiterleitungstabellen an die neue Struktur angepasst um auf erzielten SEO-Erfolgen aufzubauen. Da das Unternehmen international aufgestellt ist, wurde auch die Rechteverwaltung des Typo3 CMS an diese spezifischen Anforderungen angepasst.

Ein geschützter Bereich bietet angemeldeten Kunden und Händlern die Möglichkeit individuelle Konditionen einzusehen und weitere kundenspezifische Informationen abzufragen.

Um den Redakteuren des Unternehmens ein möglichst einfaches Handling des CMS zu gewährleisten, wurde die Anleitung in Form eines individuellen animierten Tutorials verfasst und vertont. Somit können neue Redakteure sich schnell und unkompliziert selbst schulen.

Der im Projektverlauf konzipierte umfangreiche Web-to-Print-Shop soll im Anschluss die zukunftsweisende konzernübergreifende Web-to-Print-Lösung für Bestellungen, Berechnungsprozesse, Serviceteams und Onlineabwicklung von komplexen Druckaufträgen bilden.

Die Seite im Netz: http://www.sachsenfahnen.de

In diesem Rahmen präsentieren sich die Unternehmen Perdata, HL Komm und LAS zusammen mit den Stadtwerken auf einer Kampagnenwebsite. Diese Website dient als gemeinschaftliches Präsentationsmedium für Messen und andere öffentliche Events. Die effektvoll in Szene gesetzte Kombination aus Flash und funktionalen Elementen zur individuellen Kundenbindung ermöglicht es, Besucher aus direkten Mailings, persönlich mit vorqualifizierten Kundendaten anzusprechen und abzuholen. Das auflösungssensitive Flash-Design ermöglicht die interaktive Darstellung der interessanten Animationen und Messestand-Visualisierungen in verschiedenen Auflösungen und in verschiedenen Browsern.

Auftraggeber der Internetagentur Kreado Leipzig:

Stadtwerke Leipzig GmbH & Co. KG

Projekttitel (Internetagentur Kreado Leipzig):

DML

Website: http://www.direkt-mehr-leistung.de

Branche:

Versorger / Stadtwerke

Ausschlaggebende Punkte waren dabei die Expertise im Bereich Wohnungswesen und die konzeptionelle und designerische Stärke der Internetagentur.

Der aktuelle Internetauftritt soll dabei komplett von einer neuen Website abgelöst werden. Im Vordergrund stehen einfach zugänglicheInformationen für alle Mieter und Interessenten.

In Zusammenarbeit mit der Marketingabteilung der HWG wird Kreado den neuen Internetauftritt entsprechend den Kommunikationszielen der HWG konzipieren und designen. Die technische Umsetzung übernimmt it-Consult – Spezialist für IT-Lösungen im öffentlichen Dienst.

1. solides Layout

Ein gutes und stabiles Fundament ist für Alles im Leben wichtig. Wenn das Fundament nicht korrekt ist, wird alles, was Sie obendrauf setzen nicht funktionieren. So auch im Webdesign. Im Webdesign ist das Fundament das Layout. Es geht dabei um Inhalte und alle Navigationselemente.

Verwenden Sie Gitternetze

Üblicherweise werden Drahtgitter von Designern benutzt, um das Layout zu erstellen. Das ist im Grunde das „Skelett“, was die Elemente anzeigt. Diese „Wireframes“ bestehen gewöhnlich aus grauen Kästen und Blöcken, die als Platzhalter dienen. Der Trick dabei ist es, die Sachen sehr einfach zu halten und nicht in Design oder Farbe zu stark zu verändern.

Verwenden Sie großzügig freie Flächen

Ein weiterer wichtiger Punkt im Layout, ist das, was zwischen (oder auch nicht) den Elementen ist. Dabei meine ich leere Flächen oder auch „negativen Raum“. Viele Designer machen den Fehler, die Seite mit Elementen voll zustopfen. Haben Sie keine Angst, Ihre Seite atmen zu lassen. Durch das hinzufügen mehrere freier Flächen wirkt eine Website außerdem moderner und zeitgemäßer. Wenn auch um die Inhalte freie Ränder gelassen werden, erhält die Website eine luftige und offene Atmosphäre, die auch das Überfliegen der Texte erleichtert und somit auch die Konzentration des User stärkt.

2. Effektive Typographie

Genau wie das Layout, so spielt auch die Typographie eine wichtige Rolle beim Webdesign. Es ist dabei wichtg, dass die Texte einfach zu lesen sind und man als User der Struktur innerhalb des Contents folgen kann.

Machen Sie es gut lesbar

Durch den Einsatz hoher Kontraste zwischen Text und Hintergrund, wird ein Text gut lesbar. Sie sollten auch den Zeilenabstand zwischen den Absätzen beachten. Stellen Sie immer sicher, dass der Text einfach zu lesen ist. Eigentlich bedarf es dazu immer einiger Experimente. Aber eine gute Faustregel ist, dass man die Zeilenhöhe auf 1,5em setzt, was bedeutet, dass sie 1,5 Mal größer als die Schriftgröße ist.

3. Das richtige Farbschema

Die richtige Farbwahl ist äußerst wichtig. Denn hierbei wird die Stimmung der Website mehr ausgedrückt, als anderswo. Lassen Sie sich also bei der Farbwahl nicht von Ihrem persönlichem Geschmack leiten, sondern bestimmen Sie eine farbe, mit der Sie Ihre User erreichen wollen und können.
Haben Sie Mut und probieren Sie neue Sachen aus.

4. Geeignete Designelemente

Hierbei können Sie eine Menge Spass beim und mit dem Design haben. Lassen Sie Ihrer Kreativität im Bezug auf Texturen, Symbolen und Muster freien Lauf.  Beachten Sie allerdings, dass die Design-Elemente auch eine wichige Rolle bei der Festlegung der Stimmung des Designs spielen. Passen Sie also auf, dass die gesamten Elemente, und auch die drei o. g. Kompenenten, mit den Zielen der Website im Einklang stehen.

Andere Entwicklungen findet man auch in der Entwickler-Ebene, wie zum Beispiel blinkende Tags, Gästebuch-Skripte oder anderweitig sonderbare Software. Grafik-Trends verbreiten sich aufgrund von Social Media und dem viralen Effekt innerhalb der empfänglichen Zielgruppe nun auch meist noch schneller.

Aktuell nutzen Websitebetreiber die verschiedensten Arten von Social Media Symbolen auf Webseiten und Blogs. Aber was ist, wenn auch die “social-Media-Verrücktheit” eines Tages wieder enden würde und auch diese Symbole auf dieser Liste landen würden? Ist Social Media im Moment auch eine gute Sache, so werden die jeweiligen Icons nach der Social-Media-Zeit auch als überflüssig und veraltet wirken. Nur die Zeit wird zeigen, wie die zukünftigen Trends im Webdesign aussehen werden.

Ein paar der klassisch schlechtesten “Perlen” und deren Entwicklungstendenzen haben wir hier einmal aufgeführt. Für den Fall das wir die eine oder andere Stilblüte vergessen haben, nutzen Sie doch bitte die Antworten Funktion und lassen Sie uns in Erinnerungen schwelgen oder gleichzeitig einigen Webmastern und Designern eine Hilfestellung geben und ihnen sagen, was sie besser nicht mehr tun sollten.

1. Der Maus-Effekt

Viele Menschen müssen sich wirklich mit ihrem Standard-Mauszeiger gelangweilt haben, denn plötzlich gab es überall blinkende Sternchen, Herzchen oder sonstiges Bling-Bling das ohne Gnade hinter dem Mauszeiger her hetzt. Als ob das nicht genug wäre, waren auch auf einmal die Mauszeiger an sich nicht mehr als solche zu erkennen, sondern verwandelten sich in in kleine komische Bildchen.

2. Benutzerdefinierte Scrollbalken

Etwa zur gleichen Zeit der Entstehung der bunten Mauszeiger, begannen die Menschen damit, was Neues zu suchen: dieses mal mussten die Scrollbalken daran glauben. Das war dann zwar nicht so nervig, wie die schrecklichen Mauszeiger, aber dennoch schlimm genug, um sie jetzt auf diese Liste zu setzen.

3. Blinkende Elemente

Es gibt fast nichts schlimmeres als das. Mit dem Blink Tag konnte man quasi alles zum Blinken kriegen und das meist noch in einer grellen Farbe. Es hätte bessere Möglichkeiten geben sollen, um Dinge hervorzueheben.

4. Besucher-Zähler

Es war früher schon cool zu zeigen, wieviel Besucher man auf der Webseite hatte. Doch eigentlich hat es mehr Schaden angerichtet, als es genutzt hat. Denn waren die Besucherzahlen zu hoch, hat einem das niemand geglaubt. Waren es allerdings zu wenige Besucher, dachte man, die Seite sei unbeliebt. Obendrein waren diese Counter auch nicht wirklich hübsch.

5. kurze sich wiederholende .wav Datein

Das Schlimmste was Webmaster tun konnten, war einen Musik- oder Soundeffekt auf der Webseite einzubauen, die automatisch anfing zu spielen, sobald man die Webseite öffnete. Das war gerade für Leute, die während des Surfens Radio oder Musik am PC hörten, sehr nervig, denn immer wenn eine neue Seite geöffnet wurde, fing es unerwartet an zu tudeln. Ebenso ärgerlich waren Banner, die blöde Sounds von sich gaben. Meistens waren es aber die wav-Sounds selbst, die für einen Hörsturz sorgten.

6. Schreckliche .gif Animationen

Die nie endende Reise von Webmastern, die sich bemühten ihre Webseite zu verbessern, führte dahin, dass Leute anfingen, beliebte Images im .gif Format in die Webseite einzubinden. Diese einfachen Animationen waren kitschig, geschmacklos, von schlechter Qualität und wurden meist in sonderbaren Bereichen der Webseite verwendet.

7. unglaublich lästige Popups

Glücklicherweise ist die Zeit des aggressiven Marketings allmählich vorbei. Doch vor nicht allzulanger Zeit gab es diese Popups wirklich ÜBERALL auf allen Arten von Webseiten. Leider kann man diese Popups auch heute noch auf diversen Seiten finden. Aber einem Webmaster, der sich gewöhnlich für seine Besucher interessiert, liegt es fern, diese “Dinger” zu verwenden.

8. animierte Jahreszeiten-Hintergründe

Eigentlich ist es schon schwer, einen hellen Text auf dunklem oder gemusterten Hintergründen zu lesen. Aber nichtsdestrotrotz kamen die glorreichen Zeiten der animierten Hintergründe. So wurden aus normalen Hintergründen plötzlich wechselnde Farben,  blinkende Zeichen und man konnte Dinge wie fallenden Schnee oder Regen sehen. Leider vergaßen viele, den Hintergrund rechtzeitig wieder zu ändern und so war es nicht unübnlich, dass mitten im Sommer ein Schneesturm über den Bildschirm fegte.

9. Cliparts

Bevor es Stock-Fotografie und Vektor-Kunst zu erschwinglichen Preisen gab, standen Cliparts an der Tagesordnung. Die Qualität eines Cliparts war für gewöhnlich sehr schlecht. Diese wurden kostenlos und in großen Paketen im Internet angeboten, was wahrscheinlich der Grund für die enorme Popularität dieser war. Überraschender Weise gibt es immer noch riesige Auswahl im Internet. Aber diese werden heutzutage eher für den privaten Gebrauch verwendet, beispielsweise für Grußkarten o. Ä. Zum Glück vermeiden die meisten mittlerweile das Verwenden von Cliparts auf Webseiten.

10. Frames

Frames ermöglichen es Ihnen, mehr als eine Webseite im gleichen Browser-Fenster angeziegt zu bekommen. Einfach gesagt, sind Frames einfach nur schlecht und veraltet und sollten vermieden werden. Sie vermasseln eine Menge auf der Webseite und verstoßen ohnehin gegen die grundsätzlichen Design-Richtlinien einer Website.

11. “Under Construction” Grafiken

Wenn Webmaster den Anblick ihrer Webseiten nicht mehr ertragen konnten und es Zeit für einen Umschwung war, begannen sie damit, die Seite mit “Under Constructions” Grafiken auzustatten. Leider war das ein großer Fehler und die Arbeit, die sie in die Gewinnung hoher Besucherzahlen gesteckt hatten, wurden auf einen Schlag zur Nichte gemacht. Also lieber die alte Seite online lassen, bevor die neue nicht komplett fertig ist.

12. Intro-Seiten

Wenn Sie wollen, dass Ihre Besucher ihren Blick innerhalb weniger Sekunden von ihrer Website abwenden, verwenden Sie einfach eine Intro-Seite! Wie diese Seite so populär werden konnte, wird wohl ein Rätsel bleiben, aber alles was man damit machen kann, ist der  Webseite Schaden zuzufügen. Auf diesen Seiten sind oft verschiedene Arten von Willkommens-Texten oder Begründungen zu sehen, warum dies gerade die beste Seite istn. Das Ziel einer Webseite sollte immer sein, den User innerhalb von wenigen Klicks dort hinzuführen, wo er seine gewünschten Informationen findet. Mit dieser Regel werden die Intro-Seiten überflüssig.

13. verlängerte Pageviews

Einige Webseiten-Betreiber haben beschlossen, den Inhalt ihrer Webseite aufzusplitten und über die ganze Seite zu verteilen, um so die Statistik im Bezug auf die Seitenzugriffe zu erhöhen. Einige große Webseiten und Nachrichtenportale machen das heute immernoch so, obwohl der Content locker auf eine Seite passen würde. Dass das Lesen der Artikel so für die User zur Geduldsprobe wird, ist dabei egal, solang man noch ein paar Euro auf Kosten der User verdienen kann.

14. Heller Text auf dunklem Hintergrund

Der wichtigste Aspekt beim Usability-Design ist, dass der Text einfach zu lesen ist. Denn die meisten Webseiten sind dafür da, um zu informieren. Ok.. zugegeben, viele Webmaster sind keine Designer, aber es ist doch wirklich nicht schwer rauszufinden, dass  dass ein einfacher schwarzer Text auf weißem Hintergrund einfacher zu lesen ist, als ein gelber Text auf schwarzem Hintergrund.

15. Lauftext – Marquee Tag

Einen Text in Regenbogenfarbe auf schwarzem Hintergrund lesen zu müssen, ist schon peinlich genug. Aber einige Webmaster entschieden sich dazu, dass es noch cooler sei, wenn sich der besagte Text nun noch von einer zur anderen Seite bewegt.

16. Schreib in mein Gästebuch

Gästebücher waren einer der ersten Versuche von Webseiten-Betreiber mit ihren Usern zu interagieren und kommunizieren. Aber meist war das nur ein Versuch, viele persönliche Informationen über die Besucher zu sammeln.

Feedback-Formulare führten dazu, dass der Benutzerkontakt besser wurde und e-Mail Newsletter endeten damit, dass man der König in der Marketingwelt wurde. Kurz gesagt: Gästebücher sind mehr als out. Mittlerweile ist es einfacher, dem User ein Feedback-Formular anzubieten. Somit bekommt man nicht nur Feedback, sondern meist auch gleich eine eMail-Adresse.

17. sprechende virtuelle Menschen

Ein weiterer Trend vieler Unternehmen war es, redende Personen oder Cartoons auf ihrer Webseite einzubinden, die eine gewissen Message kommunizieren sollten. Das Konzept war für eine gewisse Zeit cool, und einige wirklich hochwertig und professionell.

Allerdings verflog dieser Trend auch sehr schnell wieder, da der automatische Start inklusive Sound teilweise als sehr lästig empfunden wurde und letztenendes erwies sich dieser Trend als doch nich so gut, wie alle anfangs glaubten. Sinnvoller wäre es gewesen, diese virtuelle Person als Option anzubieten, beispielsweise nur auf einer speziellen Produktseite, anstatt den User gleich damit zu konfrontieren, sobald er die Seite betritt.

18. abgerundete und verformte Buttons

Es ist schon sehr wichtig, die Aufmerksamkeit auch auf die Navigation einer Seite zu ziehen und / oder dadurch den User zu gewissen Handlungen zu motivieren.
Das Spielen mit Filtern und Layer-Styles ist das Erste was viele Designer machen, wenn sie Photoshop o. Ä. in die Hände bekommen. Das merkt man auch an den Buttons. Aber zum Glück sind solche Designs so klischeehaft geworden, dass sie kaum noch verbreitet sind.

19. Irreführende und lästige Banner
Genauso ärgerlich und irreführend wie Popups, sind auch eine Vielzahl von Bannern. Dort wird oftmals behauptet, dass man bei was auch immer Gewinner ist, eine neue ungelesene E-Mail oder einen Virus hat. Das Traurige dabei ist, dass immer noch viele Unwissende darauf klicken und sich somit locken lassen, Webseiten zu besuchen, die sie garnicht interessieren. Denn Diese Banner gibt es heute immernoch.

Wie der Name bereits sagt, basieren Fibonacci-Design auf der Fibonacci-Reihe. Laut Definition sind die ersten beiden Zahlen 0 und 1 und jede weitere Zahl wird aus der Summe der vorhergehenden beiden Zahlen gebildet. Einige Quellen verzichten auf die vorhergehende 0 und beginnen stattdessen mit zwei Einsen. Demnach sind die ersten beiden Fibonacci-Zahlen vorgegeben und alle weiteren ergeben sich aus der Summe ihrer beiden Vorgänger. Je weiter eine Reihe fortschreitet, desto mehr entspricht das Verhältnis zwischen den einzelnen Zahlen dem goldenen Schnitt. Eine Fibonacci-Reihe: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...

Fibonacci-Reihen werden in der Musik manchmal dazu verwendet, um Stimmungen festzulegen – beim Design dienen Sie dazu, die Länge und Größe von Inhalten und Elementen festzulegen.  Ein Beispiel dafür ist das von Jürgen Schmidhuber umgesetzte Design ins seinem Blog methodology for Fibonacci-based designs. Wenn Sie sich dieses Design näher betrachten, wird Ihnen wahrscheinlich auffallen, dass es recht starr und schwierig zu lesen und navigieren ist. Es ist daher sinnvoll, bei der Umsetzung kreativ zu agieren statt sich blind an die mathematischen Regeln zu halten.

Die Hauptidee hinter solchen Designs ist, Fibonacci zu nutzen, um die Größen für Inhaltsbereich oder Sidebar festzulegen. Goldener Schnitt und Fibonacci geben Designern zuverlässige Richtlinien für die Größenverhältnisse von Containern und Blöcken.

Auf einer Fibonacci-Reihe basierende Designs sind realtiv einfach zu erstellen. Bestimmen Sie zuerst eine Basisbreite – z.Bsp. 90 px. Wenn Sie dann die Größe der einzelnen Container festlegen, multiplizieren Sie einfach die Basisbreite mit den Zahlen der Fibonacci-Reihe.  Als Beispiel dafür ein minimalistischer Typografie-Blog basierend auf einem Fibonacci-Design.

Wie Sie sehen, ist die Seite in drei Spalten aufgeteilt. Jede Spalte entspricht einer Fibonacci-Zahl. Für dieses Design wurde eine Basisbreite von 90px verwendet. Diese Breite wurde dann mit einer Fibonacci-Zahl multipliziert, um die Breite für die jeweilige Spalte zu bestimmen. So hat die erste Spalte eine Breite von 180 Pixeln ( 90 x 2), die zweite Spalte ist 270 Pixel (90 x 3) breit und die dritte Spalte 720 Pixel (90 x 8). Die Schriftgrößen stehen auch in Verhältnis von Fibonacci-Zahlen. Die Blog-Überschrift hat eine Größe von 55 px, die Artikelüberschriften 34 px und Content 21 px.

Der Nachteil der Fibonacci-Designs ist, dass sie nur schwer bei fest vorgegebenen Layout-Dimensionen angewendet werden können. In diesem Fall ist es einfacher, den Goldenen Schnitt  zu nutzen.

Mögliche Anwendungen

Ein Fibonacci-Design passt am besten zu Blogs oder Magazinen. Man kann das Layout auf verschiedene Arten nach den Fibonacci-Zahlen arrangieren. Ganz wichtig: Beim Anwenden der Fibonacci-Reihe auf Design ist Kreativität gefragt. Ansonsten wirkt das gesamte Design sehr streng und ist schwierig zu nutzen

Wegen ihrer grundsätzlichen Schönheit war die Mathematik seit jeher Bestandteil der Archtitektur – trotzdem wurde sie bisher kaum für das Webdesign entdeckt. Das könnte daran liegen, dass die Mathematik als eher hemmed für Kreativität gesehen wird. Andererseits kann Mathematik auch ein Werkzeug sein, um kreative Designs zu  produzieren. Der springende Punkt dabei ist nur, dass man die Mathematik nicht als Gegner, sondern als Freund betrachten sollte.

Um unsere Aussagen etwas zu illustrieren, haben wir einige Webdesigns zu den diskutierten mathematischen Modellen in diesem Artikel verarbeitet. Diese Designs stammen vom www.smashingmagazine.com, das auch die Basis für diesen Beitrag lieferte.

Goldener Schnitt und Goldenes Rechteck

Der goldene Schnitt, auch bekannt als die göttliche Teilung, ist eine irrationale mathematishe Konstante, die ungefähr dem Wert von 1,618033987 entspricht. Wenn das Verhältnis der größeren zur kleineren Strecke genauso groß ist, wie das Verhältnis größeren Strecke zur Summe beider Strecken, so spricht man vom goldenen Schnitt.

Auch der Aufbau eines goldenen Rechteckes ist sehr einfach.

Das Rechteck mit den Seiten a und b entspricht genau dann dem Goldenen Schnitt, wenn das auch für das Rechteck mit den Seiten a+b  und a der Fall ist. Ein Goldenes Rechteck lässt sich daher stets in ein kleineres (ebenfalls goldenes) Rechteck und ein Quadrat zerlegen.

Als Beispiel hier ein minimalistisches Design. Es besitzt sechs goldene Rechtecke – drei pro Zeile. Diese Rechtecke haben eine Größe von 299 x 185 Pixeln. Dieses Seitenverhältnis entspricht etwa dem goldenen Schnitt. Beachten Sie, wie der reichliche Platz um die Rechtecke eine ruhige und einfache Atmosphäre erzeugt, in der die Navigationselemente atmen und ihren Zweck erfüllen können. Zusätzlich nutzt dieses Layout nur sehr wenig Farben und alle Blöcke sind sehr ähnlich positioniert, die Navigationsmöglichkeiten sind offensichtlich.

Bei diesem Designbeispiel könnte es allerdings schwierig werden, einen weiteren Block hinzuzufügen und das Desgin trotzdem konsistent zu halten. Möglicherweise die einzige Lösung wäre, den neuen Block in der dritten Reihe hinzuzufügen und den Rest der Zeile für weniger wichtige Features zu nutzen.

via http://www.smashingmagazine.com/

Zur Detailbeschreibung des Internetprojektes:

Der Auftrag:

“Schick sollte es sein und die zahlreichen Nutzer des Internetangebotes der Stadtwerke Leipzig auf der Stelle ansprechen.” Mit dieser Aufgabestellung startete Anfang 2009 das Mammutprojekt zur Neugestaltung der Internet-Landschaft und Webseiten der Stadtwerke Leipzig. Als einer der größten Energieversorger in Deutschland musste in diesem Rahmen auf die Wünsche und Anforderungen von hunderttausenden Haushalten und Geschäftskunden eingegangen werden. In einem mehrstufgen Programm sollte der komplette Internetauftritt der Stadtwerke Leipzig überarbeitet werden.

Umsetzung der Webseite durch die Internetagentur Kreado:

Im ersten Schritt wurden Workshops mit allen Abteilungen durchgeführt um eine Restrukturierung aller Inhalte der Webseiten zu erarbeiten. Dabei wurden Informationstrichter arrangiert, welche auf Basis des Prinzips von Millers Zahl den Besucher in wenigen Schritten zum gewünschten Ziel auf der Webseite führen sollten. Mit Hilfe dieses Ansatzes muss sich der Besucher nun nicht mehr durch eine hohe Anzahl von Menübäumen durch die Webseite “hangeln”, sondern hat immer wenige überschaubare Punkte vor Augen, zwischen denen er entscheiden kann.

Im nächsten Schritt wurde dann ein frisches aufgeräumtes Design geschaffen, welches den Besucher der Webseite empfängt und sofort in die Zielgruppen “PRIVATKUNDEN”, “GESCHÄFTSKUNDEN”, “UNTERNEHMEN”, “KARRIERE”, “MARKTPARTNER” aufteilt. Ebenso finden sich die Verweise auf eigene Informationsportale oder Tochterunternehmen im Layout wieder und ermöglichen somit eine Markenstärung der gesamten Gruppe.

Beim Design der neuen Webseiten wurde absichtlich nicht mit Hochglanzeffekten und Modelmotiven gearbeitet, sondern ehrliche Bildwelten verwendet, die den Kunden wirklich ansprechen und kein falsches Bild vermitteln.

Um gerade auch im interaktiven Bereich den Nutzer der Webseite besser ins Zentrum zu rücken, wurden umfangreiche Formulare in einzelne überschaubare Schritte unterteilt. Somit verringert sich in Zukunft die Abbruchrate beim Ausfüllen, da der Kunde sprichwörtlich nicht mehr “erschlagen wird”. Ein interaktiver Produktberater auf der Webseite hilft dem Kunden dabei in wenigen Schritten zum passenden Produkt zu gelangen.

Damit die Wirksamkeit der Arbeiten bereits vor Fertigstellung gesichert werden konnte, wurden alle Layouts und Formulare anschließend an Testbesuchern erprobt. Dabei wurden leipziger Probanden aus den verschiedenen Zielgruppen herangezogen um die Benutzerfreundlichkeit und das Handling der neuen Webseiten zu testen und zu optimieren. Alle gewonnenen Resultate flossen anschließend in die Layouts mit ein.

Auftraggeber der Internetagentur Kreado:

Stadtwerke Leipzig GmbH & Co. KG

Projekttitel (Internetagentur Kreado Intern):

SWL

Website: http://www.stadtwerke-leipzig.de

Leistung der Internetagentur Kreado:

- Portalübergreifenden Inhalts- und Online-Marketingkonzept;
- Usability-konforme Aufbereitung der Navigationspfade und Empfangstrichter der Webseite;
- Quickfinderkonzept, Design und Layout,
- KeyVisual Welten;
- Usabilitystudien an Probanden aus der Zielgruppe;
- interaktive Formulare nach Usablitygesichtspunkten / 3-Schritt-Formulare;
- interaktiver Produktberater;
- Aufbereitung Grafiken und technischer Zeichnungen im CI des Unternehmens;
- weiterführende Beratung;

Standort:

Leipzig / Sachsen

Branche:
Versorger / Stadtwerke