Bisher haben wir Ihnen diese Woche gezeigt So richten Sie eine Website ein. Jetzt schauen wir uns an, wie Sie das perfekte Design für Ihre kleine Ecke des Internets zusammenstellen. Am Ende dieses Artikels wissen Sie, wie Sie Folgendes tun:
- Erstellen Sie eine Webseite von Grund auf
- Webseiten-Design
- So testen Sie einen Website-Frame
- So erstellen Sie einen Website-Prototyp
- So bringen Sie Ihre Marke auf Ihre Website
Bevor Sie beginnen – berücksichtigen Sie Ihre Zeit und Ziele
In diesem Abschnitt beschäftigen wir uns eingehend mit der Gestaltung einer Website, von den ersten Layout-Skizzen bis zur endgültigen Produktion. Es ist wirklich wichtig zu erkennen, dass die Erstellung großer, hochwertiger Websites ein zeitaufwändiger, iterativer Prozess ist.
Dieser Prozess beginnt jetzt, wird aber weitergehen … für immer. Das Web ist ein sich ständig verändernder Bereich und es wird erwartet, dass er sich weiter verändert. Sie werden immer an Ihrer Website arbeiten, während Sie ihre Leistung im Laufe der Zeit verbessern oder Ihre Website-Ziele ändern, um auf Veränderungen auf dem Markt zu reagieren.
Um etwas schnell zum Laufen zu bringen, müssen Sie sehr strategisch vorgehen, was Sie zuerst tun. Sie müssen nicht sofort mit ALLEM loslegen. Schauen Sie sich Ihre Ziele noch einmal an und skizzieren Sie, wie die kleinstmögliche Website aussehen würde, um diese Ziele zu erreichen – eine Minimum lebensfähiges Produkt.
Konzentrieren Sie sich nun ganz darauf, dies zu erreichen. Wenn Sie zu früh zu viel in Angriff nehmen, werden Sie wochenlang damit beschäftigt sein. Überlegen Sie sich gut, welche Arbeit Sie übernehmen.
Vielleicht können Sie diese Woche nur eine einseitige Website mit Ihrem Prototyp-Logo und dem Text „Demnächst verfügbar“ erstellen. Das ist auf jeden Fall besser als nichts und gibt Ihnen die Grundlage für spätere Erweiterungen.
Das Erstellen Ihrer Website mag wie eine gewaltige Aufgabe erscheinen, aber während Sie Ihre Website planen, werden Sie feststellen, welche Seiten für den Start unbedingt erforderlich sind und welche Seiten später hinzugefügt werden können. Es ist besser, eine kleinere, qualitativ hochwertige Website zu erstellen, als eine umfangreiche Website mit vielen Seiten, die schlechten oder fehlenden Inhalt enthalten. Sie verlieren nichts, wenn Sie diese zusätzlichen Seiten von vornherein streichen. Websites entwickeln sich voraussichtlich im Laufe der Zeit weiter und ändern sich, und Sie können Ihre Website nach dem Start problemlos erweitern.
Planen einer Website-Seite
Wenn Sie mit der Erstellung Ihrer Website beginnen, müssen Sie zunächst überlegen, mit welchen Seiten Sie Ihre Website starten möchten und wie Sie diese miteinander verknüpfen, damit Benutzer die von Ihnen erstellten Inhalte leicht finden können.
Es ist unglaublich wichtig, die Navigation richtig zu gestalten. Wenn Besucher nicht schnell finden, wonach sie suchen, verlassen sie die Seite genauso schnell, wie sie gekommen sind!
Dies wird normalerweise dadurch gelöst, dass eine Navigationsleiste oben auf der Seite fixiert bleibt, wenn der Benutzer nach unten scrollt. Bei 95 % der Websites besteht die Navigation aus einer Leiste oben, die auf mobilen Websites zu einem Symbol zusammenfällt. Daher ist es wichtig, die richtigen Seiten der obersten Ebene für diese Navigationsleiste auszuwählen. Sie möchten nicht unbedingt, dass jede einzelne Seite oben verlinkt ist, da dies die Leiste sehr schnell überladen erscheinen lässt und die Navigation behindert.
Wenn Ihre Website viele Seiten benötigt, müssen Sie diese, auch gleich nach dem Start, in Kategorien gruppieren und in Dropdown-Menüs in Ihrer Navigationsleiste verschachteln. Sie haben dies schon oft auf Mode-Websites gesehen, auf denen eine große Produktpalette in mehrere Kategorien unterteilt ist. Normalerweise werden dafür große, geräumige Dropdown-Panels verwendet. Die besten Beispiele schaffen es, eine große Auswahl an Optionen übersichtlich anzuzeigen, ohne dass es zu einem wirren Haufen von Menüs in Menüs wird. Wenn Sie ein Modegeschäft oder ein anderes Geschäft mit einer vielfältigen Produktpalette planen, lohnt es sich, hier viel Zeit in die richtige Navigation zu investieren. Wenn die Leute Ihre Produkte nicht finden können, können sie sie auch nicht kaufen.
Beziehen Sie sich auf Ihre Marktforschung, um zu verstehen, was Ihre Besucher mit dem Besuch Ihrer Website erreichen möchten, und bringen Sie sie so schnell wie möglich und mit möglichst wenig Verwirrung dorthin.
Ihre Marktforschung sollte auch in die allgemeine Gestaltung Ihrer Website einfließen.
Webseiten-Design
Eines der Dinge, über die Sie nachdenken müssen, wenn Sie eine Webseite von Grund auf neu entwerfen, ist das Design.
Letzte Woche haben wir ein Moodboard erstellt, um das Erscheinungsbild Ihrer Marke zu definieren und Inspiration zu sammeln. Sie sollten dies auch für Ihre Website nutzen. Sie könnten sogar ein ganzes Moodboard erstellen, das der Website-Inspiration gewidmet ist. Auch hier gibt es zahlreiche Ressourcen, die unglaubliche Website-Designs präsentieren.
Nachfolgend finden Sie einige Ressourcen, die Ihnen bei diesem Vorgang helfen können:
- Artikel der Abduzeedo-Website
- Beispiele für Dribbble-Websites
- Beispiele für Behance-Websites
- Beispiele für Pinterest-Websites
Website-Wireframing
Wireframing ist ein gängiger und äußerst nützlicher Designschritt, unabhängig davon, ob Sie eine einseitige Landingsite oder einen umfangreichen E-Commerce-Shop erstellen.
Sie können schnell mit Layouts herumspielen, ohne hochwertige Designs erstellen zu müssen. Wireframing kann mit Stift und Papier durchgeführt werden. Dabei wird jede Webseite mit Linien und Kästchen entworfen, um anzuzeigen, wo Inhalte platziert werden können. So können Sie schnell Layouts erstellen und sich den Ablauf der Seite vorstellen, ohne viel Zeit dafür aufzuwenden. Nutzen Sie dies, um über die Platzierung Ihrer Handlungsaufforderungen (CTAs), Bilder, Textblöcke und Navigation nachzudenken.
Website-Prototyp
Dies ist ein zusätzlicher Schritt, den Sie beim Erstellen Ihrer Website ausführen können. Dies ist viel einfacher, als es klingt, da es keinerlei Codierung erfordert, da es viele Apps gibt, die diesen Prozess schnell und einfach machen.
Die Idee besteht darin, Ihre Wireframes zu digitalisieren (Sie können weiterhin Platzhalter für Text und Bild verwenden) und sie mithilfe der Prototyping-Software miteinander zu verknüpfen, damit Sie ein noch klareres Gefühl für den Ablauf und die Navigation der Site bekommen.
Sie können in Bildbearbeitungssoftware wie Photoshop statische Graustufenbilder Ihrer Drahtgitterlayouts erstellen und diese dann auf diese Prototyping-Sites hochladen. Auf den Sites können Sie dann mehrere Prototypen miteinander verknüpfen, um ein Modell Ihrer Website zu erstellen, das Sie in der Vorschau anzeigen und testen können.
Viele dieser Apps ermöglichen Ihnen die Erstellung von Designs direkt in der Software:
Sie können mit der Verwendung Ihrer Prototypen beginnen, um herauszufinden, wo Sie Ihre Botschaften am effektivsten platzieren. Wenn Sie Platzhalterinhalte durch echte Inhalte ersetzen, stellen Sie sicher, dass diese zur Umsetzung Ihrer Strategie beitragen. Wenn jemand auf Ihre Zielseite gelangt, weiß er dann innerhalb weniger Sekunden genau, was Ihr Unternehmen tut? Führt die Website sie schnell zu den Aktionen, die Sie von den Benutzern erwarten?
Dabei geht es natürlich sowohl um die Nachrichten selbst als auch darum, wo sie auf der Seite platziert und präsentiert werden.
Branding-Website-Design
Sobald Sie Ihre idealen Layouts festgelegt haben, wird das Design ganz natürlich zu Ihrer Marke passen. Sie müssen die Arbeit, die Sie letzte Woche erledigt haben, auf Ihre Website anwenden, da Konsistenz der Schlüssel zum Aufbau Ihrer Marke ist. Ihre Website muss gut aussehen und zu Ihren übrigen Marketingaktivitäten und Ihrer Kommunikation passen.
Die von Ihnen gewählten Markenbilder sind entscheidend für die Erstellung einer ansprechenden und ansprechend aussehenden Website. Hochwertige Bilder sind unerlässlich, um sicherzustellen, dass Ihre Website in vielen verschiedenen Größen scharf aussieht. Ein verschwommenes Bild hinterlässt einen schlechten ersten Eindruck.
Das Logo, das Sie in der Branding-Woche entworfen haben, sollte Ihre erste Anlaufstelle sein. Stellen Sie sicher, dass es oben auf jeder Seite Ihrer Website sichtbar ist. Viele Websites betten es in das obere Navigationsmenü ein, das wahrscheinlich auf jeder Seite vorhanden ist. Sie können das Logo auch zur Navigation verwenden. Durch Klicken können Sie zur Homepage der Website zurückkehren.
Standorte der Markenfarben
Durch die Anwendung Ihrer Markenfarbpalette auf Ihrer Website wird sichergestellt, dass Ihre Marke klar zum Ausdruck kommt. Dies allein kann ausreichen, um Ihre Website sofort erkennbar zu machen. Ihre primäre Markenfarbe sollte auf Ihrer gesamten Website einheitlich verwendet werden.
Dies sind die üblichen Stellen, an denen Sie Ihre primäre Markenfarbe einbringen können:
- Navigationsüberschriften
- Hintergrundfarben für das Top-Banner (seien Sie vorsichtig, wenn Sie eine dominierende Farbe haben)
- Seitentitel und Untertitel
- Text-Hyperlinks
- Schaltflächenfarben – (obwohl Sie möglicherweise eine Kontrastfarbe wählen möchten, damit Ihre CTAs hervorstechen)
- Farbsymbole
- Overlays über Ihren Stockfotos
Sie können Ihre Sekundärfarben auf ähnliche Weise verwenden, um Interesse, Abwechslung und Kontrast zu erzeugen. Bleiben Sie bei Ihrer Anwendungsmethode einfach konsistent. Denken Sie daran, dass Sie mit Ihrer Prototyping-Software so viel experimentieren können, wie Sie möchten. Das Testen von Variationen und Iterieren Ihrer Designs ist der Schlüssel, um schnell zu einem endgültigen Design zu gelangen, mit dem Sie zufrieden sind.
Die richtigen Bilder auswählen
Bei der Auswahl guter Grafiken für Ihre Website sollten Sie die Markenwerte verwenden, deren Erstellung wir in Woche 8 beschrieben haben. Hier sind einige weitere Tipps für die Anwendung auf Ihrer Website:
- Stellen Sie sicher, dass die ausgewählten Bilder den Text ergänzen, den Sie dazu schreiben. Sie sollten die klare Botschaft unterstützen, die Sie vermitteln möchten.
- Seien Sie vorsichtig, wenn Sie Text über Bilder legen. Das kann die Lesbarkeit beeinträchtigen. Das Auftragen einer Akzentfarbe darüber kann helfen, indem es das Rauschen im Hintergrund reduziert.
- Große Bilder können die Ladezeiten beeinträchtigen. In diesem Fall können Sie sie immer als JPEGs speichern, um die Dateigröße zu reduzieren.
- Vermeiden Sie Material, das zu generisch oder unecht aussieht. Das ist wirklich offensichtlich und schadet der Vertrauenswürdigkeit und Authentizität Ihrer Website (mehr dazu später).
- Übertreiben Sie es nicht mit Bildern. Bilder sind sehr wirkungsvoll und können bei übermäßigem Einsatz ablenkend wirken. Denken Sie an die Ziele Ihrer Website und stellen Sie sicher, dass jedes Bild eine Funktion hat und diese nicht behindert.
Fokus auf Website
Ein weiteres wichtiges Element des Webdesigns ist, wie Sie Ihre Inhalte so schreiben und präsentieren, dass sich die Leute tatsächlich die Zeit nehmen, sie zu lesen. Auf Ihrer Homepage Essays über Produkte zu schreiben, funktioniert einfach nicht und ist nicht ansprechend genug.
Einige dieser Probleme lassen sich durch die Verwendung einer klaren Webschriftart mit gutem Kontrast, guter Größe und gutem Abstand lösen. Wenn Sie in eine Website-Plattform integrierte Designs verwenden, gibt es viele Designs, die von Natur aus eine hohe Lesbarkeit aufweisen. Dies ist jedoch nur die halbe Miete. Lesemüdigkeit, insbesondere auf Bildschirmen, ist sehr real und Sie müssen darauf achten, dass Sie Ihren Text so schreiben und positionieren, dass er tatsächlich gelesen wird.
Befolgen Sie diese Richtlinien:
- Stellen Sie sicher, dass Ihr Text klar ist und vermeiden Sie Mehrdeutigkeiten.
- Halten Sie den Satzbau einfach. Vermeiden Sie komplexe Wörter und Wortkombinationen.
- Kommen Sie schnell auf den Punkt.
- Teilen Sie große Textmengen in separate, kleinere Blöcke mit eigenem Titel auf.
- Versuchen Sie nicht, zu viel auf einmal zu vermitteln. Entscheiden Sie, was jeder Textblock vermitteln soll, und bleiben Sie dabei.
- Verwenden Sie Bilder neben Text, um die Leute zum Lesen zu animieren.
- Nutzen Sie Leerraum! Sorgen Sie für großzügigen Platz (Füllung) um Ihren Inhalt, damit dieser nicht überfüllt wirkt.
So stellen Sie sicher, dass Sie eine für Mobilgeräte optimierte Website erstellen
Es ist unglaublich wichtig, dass Ihre Website auf Mobiltelefonen und Tablets reibungslos funktioniert, da so viele Menschen Inhalte heutzutage über diese Geräte konsumieren. Google wird Websites bei seinen Suchen tatsächlich bestrafen, wenn Sie dies nicht erfüllen!
Glücklicherweise ist das heutzutage ziemlich einfach. Die meisten Standardthemen, die mit einer Website-Plattform geliefert werden, sollten „responsive“ Designs verwenden. Das bedeutet, dass sich der Inhalt bei abnehmender Bildschirmbreite automatisch an die neue Größe anpasst – perfekt!
Dennoch lohnt es sich zu prüfen, ob die von Ihnen verwendeten Bilder und Videos auch bei Verkleinerung noch sichtbar und der Text noch lesbar ist. Wenn Sie nicht mehrere verschiedene Arten von Tablets und Mobiltelefonen besitzen, fragen Sie sich vielleicht, wie Sie dies überprüfen können. Am schnellsten geht es, wenn Sie den linken oder rechten Rand Ihres Browsers greifen (achten Sie darauf, dass er nicht im Vollbildmodus ist) und ihn nach links oder rechts ziehen, um das Fenster zu vergrößern oder zu verkleinern. Sie werden sehen, wie sich der Inhalt Ihrer Website anpasst, während Sie dies tun, und so können Sie Ihre Layouts in verschiedenen Größen analysieren. Es gibt auch eine präzisere Methode, bei der ein in den Chrome-Browser integriertes Tool verwendet wird:
- Klicken Sie mit der rechten Maustaste auf Ihre Webseite
- Klicken Sie auf „Untersuchen“ (dadurch wird ein Fenster geöffnet).
- Unten links in diesem neuen Panel befindet sich ein Symbol eines Bildschirms und eines Telefons (Gerätesymbolleiste umschalten).
- Klicken Sie auf dieses Symbol
Jetzt haben Sie oben mehrere graue Balken, mit denen Sie simulieren können, wie Ihr Browser bei bestimmten Auflösungen aussieht. Es gibt sogar ein Dropdown-Menü zur Auswahl beliebter Telefone/Tablets und der von ihnen verwendeten Auflösungen. Toll!
Egal, ob Sie Ihre Unternehmenswebsite selbst erstellen oder eine Agentur damit beauftragen, mit der Gestaltung einer Website sind hohe Kosten verbunden. Sie müssen nicht nur für Ihren Domänennamen, Hosting-Kosten und die von Ihnen gewählte Webplattform bezahlen, sondern es fallen auch laufende Gebühren für die Website-Wartung an.
Wenn Sie eine Designagentur damit beauftragen, wird dies für Ihr Startup ein großer Kostenfaktor. Sie sollten überlegen, ob Ihr Budget diese Kosten deckt oder ob es günstiger ist, es selbst zu tun. Wie wir in den letzten Artikeln gezeigt haben, ist das Einrichten einer Website viel einfacher als Sie denken. Obwohl mit beiden Ansätzen zur Gestaltung Ihrer Website Kosten verbunden sind, müssen Sie entscheiden, welcher für Sie praktikabler ist.
Zusammenfassung
Überlegen Sie sich beim Entwerfen einer Website, wie Ihre Marke dargestellt werden soll. Ihre Website wird wahrscheinlich einen der ersten Eindrücke vermitteln, die Kunden von Ihrer Marke bekommen. Daher ist es entscheidend, dass Sie die richtige Botschaft vermitteln. Sie müssen auch sicherstellen, dass Ihre Website benutzerfreundlich ist und auf einer Vielzahl von Geräten verwendet werden kann. Eine Website, die auf Mobilgeräten nicht gut aussieht, kann dazu führen, dass ein Benutzer die Website verlässt.
Beziehen Sie sich noch einmal auf Ihre Strategie und überlegen Sie, wie Sie Ihre Benutzer mit Ihrem Design dazu anregen können, sich auf der Website in der von Ihnen gewünschten Weise zu bewegen, um Ihr gewünschtes Ziel zu erreichen.
Nachdem Sie Ihre Website entworfen und gestartet haben, möchten Sie überprüfen, ob sie tatsächlich ihren Zweck erfüllt.
