Was ist Homepage Design
Gutes Homepage Design erreicht die Ziele des Auftraggebers. Darum geht es in diesem Artikel. Design erstreckt sich von der technischen Basis bis hin zur sichtbaren Oberfläche. Es ist deshalb wichtig, mit Strategie und Verstand das Thema umzusetzen.
▶︎ Ich brauche eine Firmenhomepage: > hier klicken
▶︎ Ich interessiere mich für den Design Prozess: weiter lesen
Wie gehen wir vor?
Gutes Webdesign entsteht in sieben Phasen. Jede Phase beschäftigt sich mit anderen Aspekten. Alle Schritte berücksichtigen die gesammelten Erkenntnisse. Auf diese Weise entsteht intelligentes Webdesign.
#01 Ziele definieren
Das Wichtigste zuerst. Ein guter Webdesigner definiert zuerst Ziele. Das ist wichtig, weil Webseiten durchaus unterschiedliche Absichten verfolgen.
Umsatz steigern: Onlineshops möchten natürlich Produkte verkaufen. Dienstleister möchten Kunden gewinnen. Doch Faktoren wie Reichweite, Bekanntheit, Image rücken immer stärker in den Fokus.
Reichweite: über einen Onlineshop können Sie nicht nur in Deutschland Produkte verkaufen sondern weltweit! Damit Ihre Produkte auch in Asien und USA gefunden werden, muss die Reichweite erhöht werden. Dies kann lokal erfolgen (zusätzliche Städte, Bundesländer, Länder) oder anhand der Zielgruppe. Mit der Reichweite gewinnen Sie automatisch auch Neukunden.
Einnahmen: Fast immer werden auch Zusatzziele vereinbart. So kann eine moderne Firmenhomepage auch Einnahmen generieren. Durch den Verkauf von Produkten Dritter können Sie die gewonnene Reichweite in bare Münze verwandeln.
Abläufe vereinfachen: die Welt wird immer komplexer. Kunden erwarten Hilfe und Support rund um die Uhr. Modernes Homepage Design deckt deshalb auch innovative Kontaktmöglichkeiten wie Chatbots ab. Ein Beispiel hierfür finden Sie auf Osmium kaufen.
Ganz egal, wofür Sie sich entscheiden: die Ziele sollten mindestens für ein Jahr klar definiert sein. Spätere Anpassungen am Homepage Design sind natürlich jederzeit möglich.
#02 Referenzen für Homepage Design
Aus der Kommunikation ist das “Apfel-Orange” Prinzip bekannt. Wir haben es hier mit einer Orange und Zitrone dargestellt. Beide Personen sprechen von Obst. Es sind sogar beides Zitrusfrüchte aber im Geschmack grundverschieden.
Beim Webdesign spielen sehr viele Aspekte eine Rolle. Optik, Technik, Zielgruppe, CI des Kunden aber auch Trends und strategische Ausrichtung. Um nur einige zu nennen. Entsprechend vielfältig sind daher auch die Umsetzungsmöglichkeiten.
Bei der Auswahl der Referenzen geht es also keineswegs darum, fremdes Design zu kopieren. Es geht vielmehr um ein gemeinsames Verständnis. Referenzen liefern aber häufig auch Inspiration. Die Kombination verschiedener Ideen und Ansätze fördert im kreativen Prozess vollkommen neue Ergebnisse zu Tage.
#03 Bestandsaufnahme
Never change a running system. Was sich bewährt hat, sollte beibehalten werden. Im Schritt der Bestandsaufnahme betrachten wir deshalb die aktuelle Corporate Identity. Das können die Farben des Firmenlogos, der Schriftzug auf dem LKW aber auch Schriftarten sein. Visitenkarten, SocialMedia Auftritt und Firmenwagen sind damit geschmückt. Wir versuchen deshalb, den Webauftritt nahtlos zu integrieren.
Nahtlos bedeutet, das bestehende Design wird fortgeführt. Wenn Sie sich eine Firmenhomepage erstellen lassen, dann muss diese zu Ihrem Unternehmen passen. Und nicht umgekehrt. Häufig entwickeln wir deshalb eine Logovariante und übernehmen das bestehende Farbkonzept.
Für Restaurants und Handwerker kann zudem über Wappen, Rauten und Muster der lokale Bezug hergestellt werden.
#04 Technische Basis schaffen
Wir liefern WordPress Hosting. Das ist Webdesign auf WordPress Basis. Die Plattform bietet entscheidende Vorteile gegenüber anderen Systemen. WordPress ist deshalb bei über 60% aller Webseiten weltweit im Einsatz.
Technisch bilden hocheffiziente Server mit SSD Platten die Basis. Alle unsere Server laufen in Deutschland und werden umweltfreundlich mit Ökostrom betrieben. Es sind die schnellsten, verfügbaren Server.
Neben WordPress installieren wir das IT Büro Theme sowie eine Reihe von Premium Plugins. Die Komposition aus Premium Server + Premium Theme + Premium Plugins ermöglicht – Sie ahnen es – Premium Ergebnisse! Wir verfügen über Technik & KnowHow
#05 Homepage Design & Optik
Die richtigen Tools plus viel Erfahrung führen zum Ziel. Der Weg dorthin: anstrengend und lehrreich. Gleichzeitig muss man sich eingestehen: perfektes Design gibt es nicht. Design entwickelt sich weiter, Trends kommen und gehen. Die Erfahrung bleibt. Deshalb sehen Webseiten “alt” aus obwohl diese vor gerade fünf Jahren top aktuell waren.
Was sich verändert hat, ist unsere Denkweise und unser Anspruch. Als Apple 2013 das “Flat Design” einführte (link), war der Aufschrei groß. Zu flach, zu einfach seien die Icons. Bis 2013 orientierte sich digitales Design stets am Original. Ein Button musste aussehen wie eine Taste. Mit Reflexionen, Schatten und Glanz. Ein Drehregler so täuschend echt wie möglich hervorstehen. Seit 2013 hat deshalb auch das Homepage design eine neue Ära beschritten. Es folgten deshalb klare Strukturen und sorgfältige Linienführung statt schlechter Imitation der Realität.
Das menschliche Gehirn arbeitet in Mustern.
Wir alle kennen das. Wenn nach 5 Jahren die Mutter den Kuchen aus der Kindheit wieder backt, erkennt unser Gehirn sofort das Geschmacksmuster wieder. Gerüche, Formen und Farben prägen wir uns ein um diese bei Bedarf wiederzukennen.
Abweichungen von diesen Mustern erkennt unser Gehirn sofort. Alles, was nicht in das gewohnte Muster passt, wird als “störend” empfunden.
Das bedeutet auch: ein Betrachter Ihrer Website wird nur selten vor Staunen applaudieren. Er wird hingegen sofort merken, wenn etwas nicht stimmt. Selbst dann, wenn der Person nicht klar ist, WAS da nicht passt.
Webdesign & Geometrie
Architekten und Fotografen kennen den “Goldene Schnitt”. Es geht um Geometrie und jede Menge Formeln.
Praktisch ist, dass sich mit Hilfe dieser Formeln die perfekte Anordnung von Objekten berechnen lässt. Rundungen aber auch die Anordnung von Markanten Bildpunkten können mit Hilfe der Geometrie in ein harmonisches Gesamtwerk fließen. Wobei Haronie eigentlich der irreführend ist. Berechnende Mathematik trifft es besser.
- In einem rechtwinkligen Dreieck wird die Strecke B-C bei A-C angezeichnet.
- Der Schnittpunkt D ist die Länge der Strecke A-D.
- Nun wird der Radius A-D auf A-B gezeichnet.
Es entsteht A-S, der Goldene Schnitt.
Für den Goldenen Schnitt gibt es natürlich auch eine Formel:
Der Goldene Schnitt wird oft genutzt, um Perspektiven zu schaffen. Die Logik kommt auch dann zu Einsatz, wenn Text neben Grafiken platziert werden soll. Die Anordnung wirkt dann stimmig. Bereits Leonardo Da Vinci erkannte das und nutze die Formeln für seine Werke.
Responsive Webdesign
Leider ist es im Homepage Design so, dass Bildschirme äußerst unterschiedlich ausfallen. Während Handy Displays schmal und lang ausfallen, sind Desktop Bildschirme extrem breit.
Die Kunst besteht also darin, die Anordnung so zu gestalten, dass das Ergebnis sowohl auf breitem Desktop als auch schmalem Handy Display funktioniert.
Hinzu kommt der Umstand, dass der Nutzer von Mobilgeräten mit dem Finger tippt. Buttons müssen deshalb größer ausfallen als Links auf Desktop Seiten. Auf den mobilen Displays steht also weniger Platz für größere Elemente zur Verfügung.
Lösung:
- Inhalte nicht statisch sondern relativ zueinander anordnen
- Texte und Grafiken abhängig vom Endgerät ausliefern
- Mobile Inhalte stärker auf das Wesentliche beschränken
Homepage Design – Farben
Bei der Anordnung von Elementen gibt es also Formeln. Hoffen wir also, dass wenigstens die farbliche Komponente Platz für Kreativität lässt.
- Helligkeit
- Grauwert
- Position im Farbkreis
- Transparenz
Auf diese Weise entstehen geschmeidige Farbübergänge. Grafik und Text verschmelzen zu einer Einheit.
Für die Erstellung von Responsive Webdesign ist der fließende Übergang der einzelnen Website Segmente von großer Bedeutung. Geometrie und perfekt aufeinander abgestimmte Farben ermöglichen beeindruckende Layouts.
Was simple erscheint, ist in sich komplex und erfordert daher umfangreiches KnowHow. Die abgebildete Grafik zeigt scheinbar nur geschwungene Linien die ineinander fließen. Tatsächlich wird mit Farbverläufen der Eindruck von Tiefe erzeugt. Helle und dunkle Passagen scheinen die Linien zu biegen. Hier wurde mit Helligkeit und Grauwerten gearbeitet. Die einzelnen Farbsegmente nutzen den gegenseitigen Kontrast um besonders leuchtend zur Geltung zu kommen.
Farben & Geometrie
Fügen wir nun Geometrie und Farbenlehre zusammen, entstehen wahre Meisterwerke.
Die Grafik links positioniert den Muster Text sehr prominent. Warme Farbtöne ziehen die Aufmerksamkeit des Betrachters an. Statt mit besonders starken Kontrasten zu spielen, wird hier eine gekonnte Harmonie erzeugt, weil die Farben ineinander fließen. Sie bilden ein stimmiges Gesamtwerk und wiederholen sich in scheinbar zufälliger Abfolge. Das Ergebnis ist ein einfaches, jedoch sehr ansprechendes und modernes Layout.
Die letzten beiden Grafiken sind Beispiele für den hohen Stellenwert von Geometrie und Farbenlehre.
Fazit zum Homepage Design Prozess
Für Geometrie und Farben gibt es Formeln. Feste Regeln helfen, Schatten und Skalierungen korrekt einzusetzen. Soweit die Theorie. In der Praxis lässt sich jedoch festhalten, dass es leider keine “Anleitung” für erfolgreiches Design gibt. Optimales Homepage Design ist deshalb immer individuell und Zielgruppen abhängig. 99% der Seitenbesucher kennen weder die Formel “Goldener Schnitt” nicht. Dennoch fällt den Besuchern sofort auf, wenn “etwas nicht passt”.
Es ist deshalb absolut wichtig, die Spielregeln zu kennen und zu beherrschen.
#06 Test & Roll out
Kommen wir zurück zum eigentlichen Thema. Die Technik ist installiert und das Design steht. Jetzt ist Zeit für ausführliche Tests, denn Homepage Design muss auch funktional sein.
- Sind alle Links funktionsfähig?
- Darstellung auf verschiedenen physischen Geräten testen.
- Ladezeit der Website reduzieren.
- Testnutzer um Feedback bitten.
Testen = 30% des Aufwands
Eine Website ist wie ein Schiff. Dieses Schiff besteht aus 100.000 Schrauben und Einzelteilen. Alles kann perfekt sein doch ein einziges Loch macht die gesamte Investition unbrauchbar. Wir müssen deshalb sehr gründlich testen bevor wir unser Schiff zu Wasser lassen.
Diese letzte Phase im Webdesign Prozess wird oft als lästig empfunden. So kurz vor dem Ziel, so viel Aufwand? Wozu? Die Antwort ist einfach: weil es notwendig ist. Stellen Sie sich vor, Sie möchten ein Produkt bestellen aber der “zum Warenkorb” Button funktioniert nicht. Sie klicken dort einmal, vielleicht ein zweites mal und verlassen dann genervt die Seite. Ein kleiner Fehler kann den gesamten Erfolg zerstören. Der Aufwand für Marketing Funntel war umsonst. Die vielen Stunden Design Stunden vergebens. Testen Sie deshalb bitte gründlich.
Wünsche & Fragen?
Sie finden uns online an folgenden Standorten:
Danke
