Do's und Don'ts für großartiges Webdesign

Wenn Sie diesen Leitfaden beherzigen, erweist er sich als äußerst wertvolle Webdesign-Ressource, insbesondere wenn Sie dies planen Website-Entwicklungssoftware in der Zukunft. Vom Unerfahrenen bis zum Erfahrenen hat dieser Leitfaden für jeden etwas zu bieten.

Der Prozess großartigen Webdesigns Um sicherzugehen, dass wir uns alle einig sind, beginnen wir mit der grundlegenden Definition von „Webdesign“. Laut Wikipedia ist Webdesign:

„ein Prozess der Konzeptualisierung, Planung, Modellierung und Ausführung der Bereitstellung elektronischer Medien über das Internet in Form einer Auszeichnungssprache, die für die Interpretation durch einen Webbrowser und die Anzeige als grafische Benutzeroberfläche geeignet ist“ .

Der Prozess des Webdesigns kann mit dem Prozess des Verfassens einer Forschungsarbeit verglichen werden. In der Konzeptions-/Planungsphase werden Flussdiagramme (die Gliederung) erstellt, die die Navigationsstruktur Ihrer Website veranschaulichen. In der Modellierungsphase werden statische Wireframes erstellt (der Rohentwurf), die das Grundlayout für jeden Abschnitt Ihrer Website veranschaulichen. Nachdem die Wireframes erstellt wurden, werden Grafiken, Farben und Text verwendet, um das Design Ihrer Webseiten basierend auf dem Layout der Wireframes zu erstellen. In der Ausführungsphase wird Ihr Design in ein von Webbrowsern unterstütztes Format konvertiert, Text und Inhalte hinzugefügt und schließlich wird Ihre Website live im Internet veröffentlicht, damit die Welt sie sehen kann (endgültiger Entwurf).

Alle drei Phasen des Designprozesses sind gleichermaßen wichtig. Viele Webdesigner überspringen einen Schritt, um Zeit zu sparen oder weil sie dies nicht für notwendig halten. Allerdings sind alle drei Schritte notwendig, wenn Ihr Ziel darin besteht, ein erfolgreiches Design und eine seriöse Website zu erstellen. Selbst wenn die drei Stufen angewendet werden, können Webdesigner viele Fehler machen, die zu minderwertigen und nicht benutzerfreundlichen Websites führen. Es ist an der Zeit, den Schrank mit den schlechten Webdesign-Praktiken auszuräumen und ihn mit den guten aufzufüllen.

Stufe 1: Konzeptualisierung und Planung
Diese Stufe wird häufiger übersprungen als die anderen beiden Stufen. Den meisten Autoren macht es keinen Spaß, Gliederungen für Forschungsarbeiten zu erstellen, und die meisten Webdesigner erstellen auch nicht gern Flussdiagramme. Seien Sie nicht faul. Wenn Sie sich die Mühe machen und Ihre Website planen, werden Sie feststellen, dass der Webdesign-Prozess reibungslos verläuft und dabei weniger Fehler gemacht werden.

Es gibt ein paar Dinge, die Sie benötigen, um Ihre Website effektiv zu konzipieren und zu planen:

• ein Gehirn
• ein Stift und Papier
• (optional) Flussdiagramm-Software
• eine allgemeine Vorstellung der verschiedenen Bereiche Ihrer Website

Schnappen Sie sich zunächst Stift und Papier oder starten Sie Ihre bevorzugte Flussdiagramm-Software. Wir verwenden OmniGraffle Professiona für Mac OS X, das 150 US-Dollar pro Lizenz kostet, sich aber durchaus lohnt, wenn Sie regelmäßig Websites erstellen. Wenn Sie einen PC verwenden, ist SmartDraw eine großartige KOSTENLOSE Flussdiagramm-Software, die Sie verwenden können. Ein Stift und Papier reichen jedoch völlig aus.

Es gibt viele Methoden zum Erstellen von Flussdiagrammen. Aus Zeitgründen und wegen der Länge dieses Artikels zeigen wir Ihnen die einfachste Vorgehensweise. Wenn Sie mehr über Flussdiagramme erfahren möchten, suchen Sie auf Google oder Yahoo nach Flussdiagrammen.

Sehen Sie sich das Flussdiagramm an, das wir bei der Konzeption von Chromatic Sites erstellt haben. (1) Oben im Flussdiagramm listen wir den Namen unserer Website auf. (2) Als nächstes beziehen wir jeden Hauptbereich unserer Website ein: Startseite, Über uns und Dienste. Diese Abschnitte sind die Hauptnavigation Ihrer Website. Wie die einzelnen Abschnitte heißen, hängt vollständig vom Inhalt Ihrer Website ab. Versuchen Sie, so wenige Abschnitte wie möglich zu verwenden, damit Ihre Besucher beim Navigieren durch Ihre Website nicht überfordert werden.

(3) Als nächstes fügen Sie alle sekundären Seiten (Unterabschnitte) hinzu, die auf jeder der primären Seiten aufgelistet werden. Für Privatanwender haben wir professionelles Webdesign, Webentwicklung und Suchmaschinenoptimierung einbezogen. Die sekundäre Navigation muss aussagekräftiger sein als die primäre Navigation. Je tiefer die Navigationshierarchie Ihrer Websites reicht, desto aussagekräftiger sollte jedes Label sein.

Die Dos

• Weniger ist mehr; Halten Sie die Anzahl der Primärteile auf ein Minimum. Wir verwenden auf unserer Website 6 Abschnitte, was mehr als genug ist
• Egal, ob Sie Stift und Papier oder eine Flussdiagramm-Software verwenden, sorgen Sie dafür, dass die Dinge so sauber und organisiert wie möglich sind. Obwohl Sie (und alle, die mit Ihnen arbeiten) die einzigen sind, die das Flussdiagramm verwenden, muss es dennoch Sinn ergeben. In Ihren primären Abschnitten sollten umfassendere Begriffe verwendet werden, während sekundäre und tertiäre Begriffe aussagekräftiger sein sollten

Die Donts
Das Erstellen eines Flussdiagramms ist ziemlich einfach. Es gibt jedoch ein paar Fehler, die leicht passieren können:

• Verwenden Sie in Ihrer primären Navigation keine sehr beschreibenden Begriffe, es sei denn, Ihre gesamte Website konzentriert sich auf ein eng gefasstes Thema. Versuchen Sie nicht, mehrere Themen auf derselben Seite zusammenzufassen. Erstellen Sie einen allgemeinen Abschnitt für diese Themen und erstellen Sie aus diesem Abschnitt Unterabschnitte. Dadurch erhöht sich die Wahrscheinlichkeit, dass die untergeordneten (beschreibenden) Webseiten bessere Platzierungen in den Suchmaschinen (Google, Yahoo, MSN, Ask) erhalten. Sobald Sie ein prägnantes und beschreibendes Flussdiagramm erstellt haben, können Sie mit der zweiten Stufe fortfahren des Webdesign-Prozesses:

Stufe 2: Modellierung
In der Modellierungsphase werden statische „Wireframe“-Modelle erstellt. Jedes Modell veranschaulicht ein Grundgerüst des Layouts für jede der Webseiten, die in Ihre Website eingebunden werden. Diese Phase ist wichtig, da sie uns eine Vorstellung davon gibt, wo verschiedene Elemente in unserem Design platziert werden. Einige dieser Elemente sind:

• Logo
• Navigationsmenü
• Inhalt
• Bilder, Videos

Um diese Mockups zu erstellen, können Sie Stift und Papier oder Ihre bevorzugte Mockup-Software verwenden. In der Vergangenheit haben wir Photoshop verwendet, aber in letzter Zeit verwenden wir OmniGraffle Professional. OmniGraffle ist nicht so ressourcenintensiv wie Photoshop und ermöglicht es uns, unsere Wireframe-Mockups viel schneller zusammenzustellen.

Stellen Sie außerdem sicher, dass Sie die von Ihnen erstellten Flussdiagramme in der Nähe haben, da Sie von Zeit zu Zeit darauf verweisen müssen, um sicherzustellen, dass Sie alle Seiten, die auf Ihrer Website erscheinen, nachbilden.

Hier ist unser Beispiel, wie ein Wireframe-Mockup aussehen sollte. Wie Sie sehen, sind keine Farben oder Grafiken enthalten. Genau so sollte ein Wireframe-Mockup sein – ein Grundriss Ihres Designs. Der Zweck besteht darin, eine allgemeine Vorstellung davon zu bekommen, wo die einzelnen Elemente der Webseite platziert werden.

Normalerweise beginnen wir oben links und arbeiten uns nach unten vor. Es gibt keine bestimmte Art und Weise, wie ein Wireframe aussehen sollte. Benutze deine Vorstellungskraft. Achten Sie jedoch darauf, bei der Erstellung Ihrer Wireframes nicht zu vergessen, die wichtigsten Elemente einer Website einzubeziehen (Logo, Navigationsmenü, Platzierung von Inhalten, Platzierung von Bildern/Videos).

Wenn einige Ihrer Seiten dasselbe Layout verwenden, ist es nicht notwendig, alle diese Seiten nachzubilden (obwohl Sie dies sicherlich können). Stellen Sie einfach sicher, dass Sie jedes einzigartige Layout Ihrer Website nachbilden. Du wirst es dir später danken.

Die Do's

• Mockup aller einzigartigen Seiten
• Wichtige Elemente einbeziehen (Logo, Navigation, Platzierung von Inhalten, Platzierung von Bildern/Videos) – Beginnen Sie von oben und arbeiten Sie sich nach unten – Verweisen Sie auf Ihr in Stufe 1 erstelltes Flussdiagramm, damit Sie nicht vergessen, Seiten zu modellieren – Speichern, speichern, Speichern – Speichern Sie Ihre Modelle wie bei allem auf dem Computer etwa alle 10 Minuten
• Konzentrieren Sie sich auf saubere, benutzerfreundliche Layouts. Beschriften Sie Ihre Elemente, damit Sie nicht vergessen, worum es sich handelt, wenn Sie in Phase 3, der Ausführung, darauf verweisen. Nutzen Sie andere Websites als Inspiration. Es ist nichts Falsches daran, Elemente von anderen Websites zu übernehmen und sie zu Ihren eigenen zu machen (siehe „Donts“).

Die Dont's

• Fügen Sie keine Grafiken oder Farben hinzu (das ist für den nächsten Schritt) – machen Sie Ihre Modelle nicht zu „überladen“; Konzentrieren Sie sich auf saubere, gut organisierte und benutzerfreundliche Layouts – überspringen Sie diesen Schritt nicht. es ist genauso wichtig wie das erste und das letzte – wenn Sie Elemente von anderen Websites übernehmen, stellen Sie sicher, dass Sie nicht plagiieren; Es ist ein Unterschied, ob Sie sich von einer anderen Website inspirieren lassen, bestimmte Elemente Ihres Designs zu erstellen, oder ob Sie deren Layout und Farben eklatant übernehmen

Stufe 3: Ausführung
In der dritten und letzten Phase, der Ausführung, werden die Planungen aus Phase 1 und 2 kombiniert, um bei der Erstellung einer interaktiven Live-Website zu helfen.
Die dritte Phase ist bei weitem die zeitintensivste, da Sie 1) die Grafiken erstellen, 2) den Inhalt erstellen und schließlich 3) die Webdesigns von Bildern in Code umwandeln, den Webbrowser verwenden, um Ihre Website der Welt zu präsentieren.

Wenn Sie die dritte Stufe erreichen, sollten Sie eine klare Vorstellung davon haben:

• wie Ihre Besucher von einem Ort zum anderen gelangen (Stufe 1, Flussdiagramm) – wie Ihre Webseiten gestaltet werden (Stufe 2, Wireframe-Modelle)

Wenn Sie keine klare Vorstellung von diesen beiden Dingen haben, kehren Sie zur ersten und zweiten Stufe zurück und entwickeln Sie sie weiter. Sie werden feststellen, dass die dritte Stufe am einfachsten ist, wenn Sie einen klaren, prägnanten Schlachtplan für die Gestaltung Ihrer Website erstellt haben.

Vergessen Sie Stift und Papier
In Stufe 3 müssen Sie Photoshop oder ein anderes Bildbearbeitungsprogramm verwenden, da Sie Farben und Grafiken verwenden, um das Layout Ihrer Website zu erstellen.

Normalerweise beginnen wir zuerst mit der Erstellung der „Startseite“ (Index). Verwenden Sie Ihre Wireframes, die Sie in Stufe 2 erstellt haben, als Vorlage für jede der von Ihnen erstellten Seiten. Verwenden Sie jedoch statt durchgezogener Kästchen stattdessen Grafiken, Farben und Text. Jede Seite muss genau so aussehen, wie Sie sie im Internet haben möchten, da dies die letzte Phase des Designprozesses ist.

Achten Sie darauf, den Hintergrund für Ihre Navigation einzubeziehen (aber fügen Sie den Text nicht tatsächlich zu Ihrem Bild hinzu). Bei der Konvertierung mit CSS (Cascading Style Sheets) sollte Ihre Navigation in Form von Text und nicht in Form von Bildern erfolgen. Bilder können von Suchmaschinen nicht gecrawlt werden (die in Ihrer Navigation verwendeten Schlüsselwörter werden auf den Ergebnisseiten der Suchmaschinen nicht indiziert, was bedeutet, dass weniger Menschen Ihre Website finden können).

Wenn Sie mit Ihren Designs zufrieden sind und das Gefühl haben, dass sie für die Veröffentlichung im Internet bereit sind, ist es an der Zeit, die Designs aufzuteilen, damit Sie ein CSS-basiertes Layout erstellen können. Weitere Informationen zum Konvertieren Ihrer Layouts in CSS oder zum Markieren Ihrer Website in CSS finden Sie unter w3schools.com. Nachdem wir uns im Internet umgesehen hatten, konnten wir kein brauchbares Image-to-CSS-Tutorial finden – erwarten Sie also in den kommenden Wochen eines von uns. Die Konvertierung Ihrer Designs in CSS ist äußerst wichtig, da Tabellenlayouts der Vergangenheit angehören.

Hier ist ein Beispiel einer fast fertigen Website mit dem Layout, das wir in Phase 2 entworfen haben. Dieses wurde direkt aus unserem Webbrowser übernommen und wie Sie sehen können, gibt es jetzt ein Logo, Farben, ein hübsches Navigationssystem, eine Fußzeile, und vor allem ein sauberes, organisiertes Layout.
Dank der Planung in den Stufen 1 und 2 ist unser Layout übersichtlich und einfach zu bedienen.

Die Dos

• Verweisen Sie auf Ihre Vorlagen, die in Stufe 2 erstellt wurden; Es ist zwar in Ordnung, von Ihrem ursprünglichen Layout abzuweichen, dies sollte jedoch nicht erforderlich sein
• Recherchieren Sie, bevor Sie Ihr eigentliches Design erstellen. Holen Sie sich Ideen von anderen Websites und machen Sie sie zu Ihren eigenen (ohne zu plagiieren)
• Fügen Sie Farben und Grafiken hinzu, um das endgültige Erscheinungsbild Ihrer Webseiten zu erstellen. Verwenden Sie CSS (Cascading Style Sheets), um Ihre Designs von Bildern in für Webbrowser verständliche Markups umzuwandeln. Verweisen Sie auf Ihr Flussdiagramm aus Stufe 1, wenn Sie Ihre Seiten mit Hyperlinks codieren. Es ist besser, ein Dropdown-Menü zu verwenden, das alle (oder die meisten) Links Ihrer Website auf jeder Seite enthält. Dies ermöglicht eine einfachere Navigation und erleichtert auch das Crawlen Ihrer Seiten, wenn die Suchmaschinen-Spider vorbeischauen. Ein großartiger Ort, um CSS-Dropdown-Menüs zu erhalten, ist DynamicDrive.com – finalisieren Sie Ihr Design, während Sie in Photoshop oder einer anderen Bildbearbeitungssoftware arbeiten, die Sie verwenden; Es kann mühsam sein, Änderungen an Ihrem Design vorzunehmen, sobald es in Markup (Code) umgewandelt wurde.

Die Donts

• Fügen Sie den Text bei der Konvertierung in CSS nicht in Ihre Navigationsmenüs ein. Verwenden Sie anstelle von Bildtext normalen Text, der für Suchmaschinen-Spider lesbar ist
• Verwenden Sie beim Konvertieren keine Tabellen. selbst wenn Sie ein Buch über CSS kaufen müssen, wird es sich lohnen; Tische sind tot
• Überspringen Sie nicht die ersten beiden Phasen, nur um Zeit zu sparen. Ihre Website wird besser, wenn Sie am Anfang des Webdesign-Prozesses beginnen (statt am Ende).
• Vergessen Sie nicht, Ihre Bilder zu komprimieren, wenn sie für CSS auseinandergeschnitten werden. Es gibt nichts Schlimmeres als eine langsam ladende Website aufgrund großer Bilddateien. Photoshop verfügt über die Option „Für Web optimiert speichern“ (CS3 – „Für Web und Geräte speichern“).

Der Prozess macht den Meister
Indem Sie einem Webdesign-Prozess wie dem in diesem Artikel dargestellten folgen, erhöhen Sie die Chancen, eine Website zu erstellen, die gut organisiert, leicht zu navigieren und sehr benutzerfreundlich ist. Seien wir ehrlich: Wenn sich Besucher beim Surfen auf Ihrer Website verirren oder verwirrt werden, klicken sie möglicherweise auf die Schaltfläche „Zurück“ und suchen nach einer benutzerfreundlicheren Website. Menschen denken nicht gerne nach, wenn es darum geht, sich auf Websites zurechtzufinden. Lass sie nicht nachdenken. Sie denken nach, indem Sie Ihre Website von Phase 1 bis Phase 3 planen, und Sie werden feststellen, dass mehr Menschen Freude daran haben werden, Ihre Website zu besuchen.