Die zu befolgenden Schritte beim Entwerfen einer neuen Website

Veröffentlicht: 2021-04-19

Bei großartigem Webdesign geht es darum, großartige Ästhetik mit großartiger Funktionalität zu kombinieren. Um eine brillant gestaltete Website zu erreichen, benötigen Sie von Anfang an eine Reihe von Fähigkeiten, ein wenig kreatives Flair und etwas Organisation!

Dieser Leitfaden soll Ihnen helfen, eine brillante Website zu erstellen. Eine, die gut aussieht und noch besser funktioniert. Wir werden einige der wichtigsten Schritte durchgehen, die Sie unternehmen müssen, um die bestmögliche Website zu erhalten. Lass uns anfangen!

Zweck und Forschung

Bevor Sie zum kreativen Teil des Webdesign-Prozesses übergehen, sollten Sie zunächst einige Dinge festlegen. Der Schlüssel liegt darin, Ihre Zielgruppe zu verstehen. Das ist lebenswichtig. Schließlich macht es wenig Sinn, Zeit und Geld in eine Website zu stecken, die nicht den Bedürfnissen Ihrer Zielgruppe entspricht.

Dieser erste Schritt kann ziemlich schwierig sein. Es ist leicht anzunehmen, dass Sie wissen, was Ihr Publikum will. Wenn Sie sich jedoch zu Beginn die Zeit nehmen, dies wirklich zu recherchieren, können Sie später im Projekt viel Hin und Her sparen und die Erfolgschancen Ihrer Website erhöhen. Und vergessen Sie nicht, wenn Sie eine Website für einen Kunden entwerfen, stellen Sie sicher, dass Sie ihn in diesen Prozess einbeziehen!

Einige wichtige Punkte, die Sie berücksichtigen sollten, insbesondere wenn die Website für einen Kunden bestimmt ist, lauten wie folgt:

Ist die Website ein eigenständiges Element oder Teil einer umfassenderen Marketingstrategie?
Gibt es bereits eine starke Marke – wenn ja, ist es wichtig, dass die Website dies widerspiegelt. Dies kann manchmal schwierig sein, da die Versuchung groß sein kann, sich auf moderne Designtrends zu konzentrieren, die nicht unbedingt bequem zu dem bereits von einer Marke etablierten Stil passen. Obwohl es wichtig ist, dass eine neue Website nicht von Anfang an veraltet aussieht, darf sie auch nicht zu weit von den grundlegenden Designprinzipien abweichen, die bereits von einer Marke etabliert wurden (es sei denn, die Marke ist bereit, ihr Image vollständig zu überarbeiten).
Es ist auch sehr wichtig, sich Ihre Konkurrenten oder die Ihrer Kunden anzusehen. Identifizieren Sie ihre Stärken und Schwächen, um sicherzustellen, dass Ihre neue Website alles enthält, was für einen Erfolg erforderlich ist. Ein Blick auf die Konkurrenz kann ebenfalls hilfreich sein, da dies sicherstellen kann, dass Sie keine potenziell wichtige Funktion oder Funktion verpassen.

Nachdem Sie Ihre Recherchen abgeschlossen haben, sollten Sie sich sicher sein, dass jede neue Website, die Sie entwerfen, die Anforderungen Ihres Kunden (oder natürlich Ihrer selbst!) erfüllen wird. Recherche kann sich manchmal mühsam anfühlen, besonders wenn Sie das Gefühl haben, vor kreativen Säften zu sprudeln und der Wunsch, etwas Greifbares auf den Bildschirm zu bringen, überwältigend sein kann. Überspringen Sie diesen Schritt nicht, so verlockend es auch sein mag. Es kann Ihnen in Zukunft viel Zeit sparen.

Zeitleiste

Es wird dringend empfohlen, einen Zeitplan für die zur Fertigstellung der Website erforderlichen Arbeiten zu erstellen, obwohl dies nicht obligatorisch ist. Meilensteine innerhalb einer Zeitachse können Ihnen helfen, die Prozesse zu klären, die erforderlich sind, um von einer leeren Seite zu einer fertigen Website zu gelangen, und können Ihnen helfen, von Anfang an ein genaues Angebot für das Projekt zu erstellen. Bei größeren Websites ermöglicht Ihnen eine Zeitleiste mit Meilensteinen, die Arbeit unter Ihren Teammitgliedern effizienter aufzuteilen, sodass jeder sehen kann, wie seine Arbeit (und Fristen!) in das Gesamtbild passen.

Es kann hilfreich sein, ein Tool wie Asana zu verwenden, um diesen Prozess zu unterstützen. Die sorgfältige Aufschlüsselung jedes Elements der Website in Aufgaben stellt sicher, dass nichts durch die Ritzen rutscht, und ermöglicht es Ihnen, dem Kunden mit größerer Zuversicht ein Fertigstellungsdatum für die Website zu nennen. Wenn die neue Website eine vorhandene Website ersetzen soll, vergessen Sie nicht, rechtzeitig vorzusehen, um den Übergang zum „Go-Live“ zu verwalten, bei dem Sie möglicherweise Umleitungen von alten Seiten auf neue usw. einfügen müssen.

Denken Sie schließlich immer daran, zu wenig zu versprechen und zu viel zu liefern. Websites, wie die meisten Projekte, dauern ausnahmslos länger, als Sie ursprünglich schätzen würden. Eine gute Faustregel lautet also, der anfänglichen Schätzung weitere 20 % Zeit hinzuzufügen, um sicherzustellen, dass Sie nicht in die uralte Falle tappen, sich selbst zum Laufen zu bringen von Anfang an wenig Zeit haben (und daher wahrscheinlich eine Frist verpassen).

Seitenverzeichnis

Der nächste Schritt im Designprozess ist die Erstellung einer Sitemap. Auch wenn Ihre Website klein ist, ist es schön, eine zu haben. Sitemaps helfen Ihnen nicht nur, das Layout einer neuen Website vollständig zu visualisieren (und stellen somit sicher, dass Sie nichts Wichtiges verpassen oder eine verwirrende Navigationsstruktur haben), sondern sie helfen Google letztendlich auch, Ihre Website zu crawlen, wenn sie live geht, was dazu beitragen kann, Ihre Website zu verbessern SEO.

Einige Designer skizzieren gerne eine Sitemap mit ihrem bevorzugten Illustrationstool, aber Sie können ein spezielles Sitemap-Tool wie WriteMaps verwenden, um Ihr Leben einfacher zu machen.

Wireframes, Mockups & Prototypen

Wikipedia definiert ein Website-Drahtmodell als „einen visuellen Leitfaden, der das Grundgerüst einer Website darstellt“. Das Erstellen eines Website-Drahtmodells ist normalerweise der erste Schritt beim Entwerfen einer Website, da es Ihnen hilft, wichtige Klarheit über das Layout der Website zu gewinnen. Wireframes sind auch ein großartiges Werkzeug, wenn Sie eine neue Website mit dem Kunden und Ihrem Team besprechen, da sie eine viel greifbarere Visualisierung des vorgeschlagenen Designs bieten, aber vor allem viel schneller erstellt werden können als ein echtes Mockup einer Seite. Dies ermöglicht es den Beteiligten, ein Design zu kritisieren, bevor eine Menge Stunden in die Website versunken sind.

Ein Mockup bringt ein Wireframe auf die nächste Ebene. Einige Designer entscheiden sich möglicherweise dafür, ein „nacktes“ Mockup einer Website zu erstellen, das eine etwas ausgearbeitetere Version des Drahtmodells ist (möglicherweise bei Graustufen), während andere sich dafür entscheiden, vollständige Mockups zu erstellen, die Bilder, Farben und sogar einige Funktionen enthalten. Wie weit Sie Ihr Mockup treiben möchten, hängt davon ab, wie überzeugt Sie von dem Design sind, das Sie vorschlagen. Wenn Sie der Meinung sind, dass der Kunde möglicherweise noch einen wesentlichen Teil des Website-Designs ändern möchte, ist es eindeutig sinnvoll, das Mockup so einfach wie nötig zu halten, um das vorgeschlagene Design/die vorgeschlagene Funktion zu vermitteln.

Sobald Sie und Ihr Kunde Vertrauen in das Design haben, können Sie ein vollständiges Mockup erstellen, das das Design entweder einer Seite oder der gesamten Website vollständig zeigt.

Es gibt zahlreiche Online-Tools, die den Mockup-Prozess erheblich beschleunigen können. Dazu gehören Mockflow und Moqups, die Sie beide von einem Wireframe bis hin zu einem vollständigen Website-Mockup führen können.

Auch wenn ein Mockup es Ihnen nicht erlaubt, die Funktion einer Website vollständig zu vermitteln, stellt es sicher, dass Sie, Ihr Team und der Kunde bei der Gestaltung der Website zu 100% auf derselben Seite sind. Und wie jeder von uns, der beruflich Websites programmiert, wissen wird, ist es viel einfacher, das Design einer Website in einem Mockup zu ändern, als es in der endgültigen Website selbst ist!

Der letzte Schritt, den Sie vielleicht unternehmen möchten, ist die Erstellung einer Prototyp-Website. Traditionell wäre dies zeitaufwändig gewesen (und so ziemlich dasselbe wie das Erstellen der endgültigen Site selbst). Dank Tools wie Framer ist es jetzt jedoch einfacher denn je, Ihre Mockups auf die nächste Stufe zu heben, indem Sie funktionale Elemente in das Mockup-Design einfügen, die es dem Kunden ermöglichen, ein wirkliches „Gefühl“ dafür zu bekommen, wie die Website funktionieren wird.

Als letzte Anmerkung zu diesem Abschnitt sei daran erinnert, dass zu viel Auswahl schlecht sein kann. Letztendlich sind Sie, egal was der Kunde sagt, der Designexperte und werden in Zusammenarbeit mit Ihrem Team wahrscheinlich am besten verstehen, was bei einem Website-Design das optimale Ergebnis liefert. Aus diesem Grund ist es manchmal besser, die Farben und das Layout zu präsentieren, die Ihrer Meinung nach am besten funktionieren, und die Dinge nicht zu verwirren, indem Sie auch eine Reihe von Optionen anbieten, aus denen der Kunde auswählen kann. Dadurch wird vermieden, dass der Kunde aus Elementen „auswählt“, die zusammen möglicherweise nicht kompatibel sind. Weniger kann definitiv manchmal mehr sein!

Großartige Inhalte schreiben

Egal wie gut ein Website-Design ist, es ist letztendlich bedeutungslos, wenn die Kopie auf der Website nicht die gewünschte Botschaft vermittelt. Aus diesem Grund hat es sich bewährt, von Anfang an einen Texter in das Projekt einzubeziehen. Sie können dabei helfen, den Inhalt zu erstellen, der den Leser wirklich fesselt, und Sie können dann mit ihnen zusammenarbeiten, um sicherzustellen, dass dieser optimal auf der Website platziert wird.

Der Werbetexter kann sich beispielsweise einen großartigen Slogan einfallen lassen, der das Produkt/die Dienstleistung in einem einzigen Satz vermittelt. Dies sind eindeutig wichtige Informationen, aber wenn Sie den Texter erst in der Endphase des Projekts einbeziehen, stellen Sie möglicherweise fest, dass Sie nicht an einer geeigneten Stelle entworfen haben, um diesen Text anzuzeigen. Das wäre natürlich ein großer Fehler.

Copywriting ist ein oft übersehenes Element einer Website. Wir alle werden in den visuellen Reiz hineingezogen, aber eine Kopie kann am Ende eine „Last-Minute“-Ergänzung sein, die niemandem einen Gefallen tut.

Ein weiterer Grund, den Texter von Anfang an mit einzubeziehen (wenn Sie Zweifel hatten), besteht darin, sicherzustellen, dass die Website aus SEO-Sicht optimiert ist. Kopieren kann die SEO einer Website verbessern oder zerstören. Wenn Sie also denken, dass es nicht wichtig ist, dann denken Sie noch einmal darüber nach! Durch die richtige Verwendung von Schlüsselwörtern und Schlüsselphrasen ist es wahrscheinlicher, dass Ihre Suchmaschinen Ihnen eine höhere Priorität in den SERPs einräumen. Es gibt einige großartige Tools zur Verbesserung Ihrer SEO, wie z. B. Google Keyword Planner, Screaming Frog's SEO Spider, Google Trends und mehr.

Und wenn Sie sich nicht den Luxus leisten können, einen Werbetexter zu beschäftigen, und daran denken, es „alleine zu machen“, dann sollten Sie sich vielleicht ein paar Schreibressourcen und -tools ansehen, die Ihnen das Leben erleichtern könnten. Das erste Tool, das einen Blick wert ist, ist Grammarly, ein einfach zu bedienender Schreibassistent. Grammarly kann Ihnen helfen, Tippfehler zu vermeiden und auch die Formatierung Ihres Textes (aus linguistischer Sicht) zu verbessern, um sicherzustellen, dass Ihre Kopie so gut wie möglich lesbar ist.

Die zweite, die wir vorschlagen, ist weniger ein Tool als vielmehr eine Marketingressource namens Storybrand. Storybrand führt Workshops durch, die Ihnen helfen, Ihre Botschaft zu verdeutlichen. Auf diese Weise ist es möglich, den Erfolg Ihrer Website in die Höhe zu treiben, indem Sie die Botschaft, die sie über Ihr Unternehmen vermittelt, in klaren, unzweideutigen Worten verstärken. Wenn ihre Workshops zu teuer sind, lesen Sie das Buch über ihr Marketing-Framework.

Visuals

Das erste, was einem Website-Besucher wahrscheinlich in den Sinn kommt, sind die visuellen Elemente auf der Website! Es versteht sich von selbst, dass diese daher ziemlich wichtig sind.

Zweifellos haben Sie als Designer konkrete Vorstellungen darüber, welche Art von Bildmaterial Sie verwenden möchten. Diese können von animierten Zeichnungen bis hin zu Produktfotos oder Fotos, die die Marke und ihr Produkt repräsentieren, reichen. Was auch immer Sie verwenden, stellen Sie sicher, dass diese Grafiken von hoher Qualität sind, sonst werden alle Ihre anderen Bemühungen umsonst sein.

Visuals sind ein Schlüsselbereich, in dem Sie hoffen können, sich wirklich von der Konkurrenz abzuheben. Lassen Sie sich diese Gelegenheit nicht entgehen! Bevor Sie ein Angebot abgeben und ein Projekt annehmen, besprechen Sie unbedingt die visuellen Elemente, die Sie verwenden möchten, mit dem Kunden. Finden Sie heraus, ob sie über eine interne Bildbibliothek verfügen, die Sie verwenden können, oder ob sie vielleicht ein Fotoshooting planen, um die erforderlichen Bilder zu erhalten. Wenn dies nicht der Fall ist und Sie keine Bilder in geeigneter Qualität zur Hand haben, können Sie vernünftige „allgemeine“ Bilder in Fotobibliotheken wie Shutterstock finden?

Achten Sie schließlich während der Entwicklungsphase darauf, dass Sie auf die Größe dieser Bilder achten und sicherstellen, dass sie optimiert sind, damit sie die Website nicht verlangsamen. Es lohnt sich, ein Tool wie TinyPNG zu verwenden, oder alternativ bietet Ihr Host möglicherweise einen gleichwertigen Dienst an, z. B. das Image Smacking-Tool, das wir bei Pressidium verwenden.

Mit dem vollständigen Layout, Text und geeigneten Bildern haben Sie einen aufregenden Meilenstein erreicht … Entwicklung! Werfen wir einen Blick darauf, was das bedeutet und auf welche Fallstricke Sie achten müssen.

Entwicklung

Wenn Sie sich nicht selbst um den Build kümmern, ist es an der Zeit, das Site-Design an Ihre Entwickler zu senden, damit sie ihr Ding machen können. Je klarer Ihr Design und auch die Beschreibung der von Ihnen gewünschten zusätzlichen Funktionen, desto einfacher wird es für die Entwickler, die von Ihnen visualisierte Website zu liefern. Hier kann eine Prototyp-Site, die mit einem Tool wie Framer erstellt wurde, wirklich zur Geltung kommen.

Während des Builds stellen viele Entwickler Entwicklungslinks bereit, die an den Kunden weitergegeben werden können, damit sie eine Vorschau des Builds sehen können. Auf den ersten Blick scheint dies eine gute Idee zu sein, da es immer schön ist, zeigen zu können, dass die Arbeit im Gange ist (insbesondere, wenn der Kunde Druck ausübt, die Website fertigzustellen!). Viele Entwickler neigen dazu, einige Entwicklungslinks zu erstellen, um dem Kunden zu zeigen, dass die Arbeit im Gange ist.

Wenn Sie sich dazu versucht fühlen, halten Sie vielleicht inne und überlegen Sie, ob dies wirklich eine so gute Idee ist. Die meisten Kunden werden den Arbeitsablauf, dem ein Entwickler folgen wird, nicht verstehen und werden wahrscheinlich mit einer beliebigen Anzahl von Fragen und vielleicht sogar Änderungswünschen auf Sie zurückkommen. Sich in dieser Phase mit diesen auseinanderzusetzen, ist kontraproduktiv und kann eine echte Zeitverschwendung sein. Warten Sie also am besten, bis die endgültige Site fertig ist, bevor Sie sich mit ihnen für einen vollständigen Durchlauf zusammensetzen.

Qualitätsprüfung

Nachdem die endgültige Website einsatzbereit ist, ist es jetzt an der Zeit, einige Überprüfungen durchzuführen, bevor Sie erwägen, live zu gehen. Diese können ziemlich umfangreich sein und es lohnt sich, eine wiederverwendbare Checkliste zu erstellen, die abgehakt werden kann, um sicherzustellen, dass nichts übersehen wird. Einige der Dinge, die Sie vielleicht überprüfen möchten (in keiner bestimmten Reihenfolge), sind wie folgt:

HTML- und CSS-Validierung: Validieren Sie Ihren HTML- und CSS-Code mit Tools wie dem W3C-HTML-Validator und dem CSS-Validator. Das W3C bietet auch einen Internationalization Checker, mit dem Sie überprüfen können, ob Ihre Website problemlos in andere Sprachen übersetzt werden kann.
Links: In diesem Schritt ist es wichtig zu überprüfen, ob alle internen und externen Links ordnungsgemäß funktionieren.
Grammatik und Rechtschreibung: Hoffentlich wurde der Text aus den von Ihrem Texter bereitgestellten Dokumenten kopiert und eingefügt, dies sollte in Ordnung sein. Nichtsdestotrotz kann es zu Ausrutschern kommen, so dass sich ein erneutes Lesen lohnt.
Formulare: Überprüfen Sie diese Arbeiten wie erwartet und alle Einreichungen kommen an. Sie sind gut beraten, diese Formulare erneut zu testen, sobald die Website live geht, und den Kunden dann anzuweisen, zukünftige Tests zu planen, möglicherweise auf monatlicher Basis.
Ladezeiten: Eine schnelle Website ist ein Muss. Tools wie WebPageTest, GTMetrix, PageSpeed Insights oder Pingdom können verwendet werden, um zu überprüfen, ob die Ladezeiten schön und schnell sind. Wenn Ihre Website auf einem Entwicklungsserver gehostet wird, der nicht als Live-Server verwendet werden soll, sollten Sie die Website erneut testen, wenn sie live geht.
Mobile Responsiveness: Stellen Sie sicher, dass Ihre Website auf allen Arten von Geräten korrekt angezeigt wird. Sie können dazu ein Tool wie BrowserStack verwenden.
Funktionalität: Wenn Sie auf Ihrer Website erweiterte Funktionen haben, die über Dinge wie ein Kontaktformular hinausgehen, sollten Sie diese Funktionen sorgfältig testen. Wenn Sie beispielsweise eine WooCommerce-Website starten, muss Ihr Testprozess wahrscheinlich intensiver sein als für eine Website im Broschürenstil. Testen Sie am Beispiel von WooCommerce Zahlungs-Gateways, Warenkorbfunktionen, wie Dinge wie Promo-Codes funktionieren und so weiter. Testen Sie, testen Sie und testen Sie erneut!
Visuelle Überprüfung: Sehen Sie sich die Konsistenz Ihrer Farbpalette und Abstände, Ränder, Füllungen usw. an. Dasselbe gilt für die Positionierung, Auflösung und Optimierung von Typografie und Bildern.
Browserverhalten: Als nächstes auf der Liste wird das Verhalten der Website über mehrere Browser und Geräte hinweg überprüft.
SEO: Überprüfen Sie Ihr SEO noch einmal! Dazu gehören alle Elemente Ihrer semantischen Struktur wie Überschriften, Absätze, Listen und andere Arten von Tags, die Sie möglicherweise verwenden, sowie die Metatitel und -beschreibungen sowie Open Graph-Einstellungen für soziale Medien.

Wenn Sie zufrieden sind, dass Ihre Website wie erwartet funktioniert und so gut aussieht, wie Sie es sich erhofft hatten, denken Sie jetzt vielleicht, dass Sie startklar sind. Wir würden vorschlagen, dass Sie jetzt ungefähr 5 Personen, die nicht an dem Projekt beteiligt waren, dazu bringen, Ihre Website ebenfalls zu testen. Im Idealfall sind diese Benutzer auch weniger „technisch orientiert“ als Sie. Sie werden erstaunt sein, was ein frisches Augenpaar erkennen kann. Dadurch können Probleme mit „echten“ Kunden nach dem Start vermieden werden, und Sie haben die Möglichkeit, den Fluss der Website weiter zu verbessern.

Start

Das ist es! Starten Sie Ihre Website idealerweise zu einer Tageszeit, wenn das Verkehrsaufkommen wahrscheinlich gering ist. Die Verwendung eines DNS-Anbieters wie Cloudflare kann helfen, DNS-Caching-Probleme zu vermeiden. Es ist auch am besten, zu starten, wenn Ihr Entwickler anwesend ist, damit er eingreifen und helfen kann, wenn etwas schief geht.

Jetzt, wo Sie live sind, nehmen Sie sich etwas Zeit, um die Website erneut zu überprüfen, und machen Sie sich keine Sorgen, wenn Sie Fehler finden! Es ist fast unmöglich zu vermeiden, dass etwas durch das Raster fällt, aber hoffentlich hilft die Verwendung einer gründlichen Checkliste dabei, sicherzustellen, dass die meisten wichtigen Elemente wie erwartet funktionieren.

Fazit

Das Entwerfen einer guten Website ist eine gewaltige Aufgabe, bei der man sich leicht von der anstehenden Aufgabe ein wenig eingeschüchtert fühlt. Den Job in überschaubare Teile zu zerlegen und die Dinge wirklich zu planen, bevor Sie sich zu sehr ins Zeug legen, kann wirklich dazu beitragen, den Prozess sowohl erfolgreicher als auch angenehmer zu machen.

Viel Glück!