In Teil 2 habe ich die Details der Bewertung eines Plans, der Auswahl von Webprofis und der Bestimmung Ihrer Website-Struktur behandelt. Die Frage, warum die Planung für das Web genauso wichtig ist wie die Planung für alles andere, was mit Ihrem Unternehmen zu tun hat, wurde in Teil 1 behandelt, also gehen Sie zurück und lesen Sie diesen Teil zuerst, falls Sie ihn verpasst haben. Im heutigen letzten Teil dieses Leitfadens beginne ich mit einigen der gebräuchlichsten Ansätze in jedem anfänglichen Design.

Ursprüngliches Design: Drei gängige Ansätze

Es gibt natürlich auch andere, einschließlich Hybriden, die Elemente von jedem kombinieren, und jedes Designteam und jedes Projekt ist anders, aber es gibt grundlegende Ansätze zur Erstellung eines Webdesigns.

1. Klassischer Photoshop-Mockup-Ansatz

Das anfängliche Design, das üblicherweise in Adobe Photoshop (dem Industriestandard) oder einer anderen Designsoftware wie Sketch erstellt wird, besteht aus einem visuell genauen Bild ("Mockup") der Homepage und mindestens einer internen Seite.

Hier sollten die visuellen Branding-Elemente Ihres Unternehmens angewendet werden. Wenn Sie zusätzlich zu Ihrem Logo gut definierte Grafiken haben, bestimmen diese das Design der Website. Wenn es Ihrer Marke jedoch an Details mangelt, wird der Designer sein Bestes tun, um eine Arbeit zu erstellen, die das Unternehmen genau widerspiegelt, wobei er mit Ihren vorhandenen Grafiken als Ausgangspunkt arbeitet.

Im Folgenden finden Sie eine kurze Liste der wichtigsten Punkte für erfolgreiche Mockups. Wir gehen davon aus, dass der Designer in Photoshop arbeitet, diese Richtlinien gelten jedoch auch für andere Designprogramme.

• Beginnen Sie mit einem vorgefertigten Raster mit vorgezeichneten, pixelgenauen Hilfslinien. Einige Designer erstellen ihre eigenen, während andere sich an ein voreingestelltes Rastersystem halten. In jedem Fall ist es wichtig, eine saubere Vorlage zu haben, um zu beginnen. Machen Sie Ihre Leinwand breiter als die Breite, die Sie entwerfen möchten, damit Sie Notizen auf einer Seite hinzufügen und ein Gefühl dafür bekommen, wie sich die Website anfühlt, wenn sie in einem breiten Browserfenster schwebt.
• Fügen Sie die Farbpalette und grundlegende Branding-Elemente (dh Schriftarten) an den Rändern der Leinwand hinzu, damit Sie sie beim Betrachten auf dem Bildschirm oder im Druck als Referenz haben.
• Zeichnen Sie alles pixelgenau und zeichnen Sie klare Hilfslinien und/oder Schnitte um Designelemente. Dies wird kritisch, wenn der Frontend-Entwickler später den HTML-Code aus dem Mockup erstellt. Ihr Design ist jedoch nur dann pixelgenau, wenn es auf einem Gerät mit großem Bildschirm angezeigt wird.
• Organisieren Sie alle Designelemente mit einer logischen Ordner-/Unterordnerstruktur und kennzeichnen Sie jedes Element eindeutig.
• Wenn der Designer seine Dateien an einen HTML-Entwickler weitergibt, ist dies besonders wichtig. Benennen Sie Ihre Ordner und Ebenen nach ihrem Inhalt, damit später keine Verwirrung entsteht. Beispiel: „Sidebar — events header“ ist klar, „Layer14 Copy Copy Copy“ nicht.

• Machen Sie klare Notizen, die Schriftarten, Ausrichtung, sich wiederholende Hintergrundelemente, Farbverläufe und alles, was mit CSS-Techniken implementiert werden muss, vorschreiben. In Photoshop eignet sich dafür die Haftnotizfunktion. Fragen Sie bei Unklarheiten die Person, die Ihr Design in eine Arbeitsseite umwandelt.
• Wenn Sie einen gemeinsamen Stil für Kopfzeilen, Navigation oder andere Designelemente verwenden, die auf der gesamten Website erscheinen, sollten Sie separate Photoshop-Dokumente dafür erstellen. Manchen Designern fällt es leichter, es „aufzuteilen“, besonders bei großen Projekten.
• Verwenden Sie realistische Inhalte. Designer verwenden oft Griechisch ("lorem ipsum"), um den Raum zu füllen, was für Fließtexte in Ordnung ist. Versuchen Sie jedoch, für Schlagzeilen, Titel, Ereignisse usw. realistische Texte zu verwenden. Betrachten Sie die beiden folgenden Überschriften. Layoutüberlegungen sind jeweils unterschiedlich:
  • „Widgets, Inc. gewinnt Green Manufacturing Award“
  • "Mitarbeiter von Widgets, Inc. gewinnen ein wegweisendes Gerichtsverfahren, in dem das Recht des Mitarbeiters bestätigt wird, eine Erstattung der Studiengebühren zu beantragen, wenn die Ausbildung für die Arbeitsrolle relevant ist"

Das Problem bei dieser Methode

Wenn Sie pixelgenaue Mockups entwerfen, können Sie sicher sein, dass das Erscheinungsbild der Website dem Desktop-Web sehr nahe kommt – aber das war es auch schon. Sobald Sie zu einem anderen Gerät wechseln, ändert es sich. Sie sollten dem Unternehmen also zumindest mitteilen, wie sich das Design ändern wird, wenn es auf kleineren Bildschirmen (Tablet, Smartphone) angezeigt wird, indem Sie eine Website mit ähnlichem Layout zeigen, oder zusätzliche Mockups mit gängigen Bildschirmgrößen entwerfen. Wie Sie sich vorstellen können, ist dies eine Menge zusätzlicher Designarbeit, und wenn Sie ein Element auf dem Desktop-orientierten Mockup ändern, müssen Sie es auch auf den anderen ändern. Hier ist die Smartphone-Ansicht.

2. Design im Browser

Mit dem Aufkommen des responsiven Webdesigns entfernen sich einige Designer vom Photoshop-Mockup-Ansatz und verwenden stattdessen responsive Frameworks wie Bootstrap oder Foundation oder Tools wie Front oder Typecast. Diese Tools ermöglichen ein sehr schnelles, iteratives Design, mit dem Sie sehen können, wie die Website auf verschiedenen Geräten aussehen wird.

Sie können weiterhin Photoshop oder andere Grafikdesign-Tools verwenden, um stilisierte Elemente zu erstellen, die Sie in das Design einfügen, aber der Großteil des Designs wird außerhalb dieser Tools ausgeführt. Es gibt keine gute Möglichkeit, dem Unternehmen „genau zu zeigen, wie es aussehen wird“, daher ist das In-Browser-Design für Designer, die daran gewöhnt sind, pixelgenaue Mockups für das Desktop-Web zu erstellen, möglicherweise nicht der beste Ansatz. Für viele stellt diese Methode auch eine große Umstellung ihres Prozesses dar und kann eine Weile dauern, bis sie den Dreh raus hat. Die meisten sehen dies als eine notwendige Weiterentwicklung an, da ein Photoshop-Mockup nur einen der vielen „Frames“ darstellen kann, in denen der Inhalt Ihrer Website angezeigt wird, und die Welt des Webs sich von Anfang an schnell in Richtung Design für mehrere Plattformen bewegt.

Wenn es an der Zeit ist, HTML, CSS und Javascript zu schreiben, aus denen die Website besteht, können Sie entweder bei dem Framework bleiben, das Sie ursprünglich verwendet haben, um Ihre Design-Iterationen zu erstellen, den Code anpassen oder Ihren eigenen von Grund auf neu schreiben, indem Sie Ihre Framework-Designs als verwenden ein Ratgeber.

3. Elementcollage (auch bekannt als Stilkachel, Stilcollage)

Bei diesem Ansatz stellt der Designer eine Reihe von Elementen zusammen, aus denen eine Website besteht, darunter Kopfzeile, Navigation, Symbole, Beispielfotos, Illustrationen, Formulare, interaktive Elemente und alles andere, was für notwendig erachtet wird, um ein gutes Gefühl für das Erscheinungsbild der Website zu bekommen . Darüber hinaus können diese Elemente je nach Designtool so angeordnet werden, dass sie zeigen, wie sich ihr Aussehen im Einklang mit der Bildschirmgröße ändert. Dies wird normalerweise mit einer Art grafischem Mockup von mindestens der Startseite und einigen internen Seiten kombiniert. (Für Unternehmen kann es schwierig sein, sich nur anhand einer Elementcollage vorzustellen, wie Seiten auf einer Website aussehen werden.)

Hinweis: Diese Beispielbilder sind nicht maßstabsgetreu – unsere Photoshop-Version der Elementcollage ist eine lange Seite, 1500 x 4500 Pixel, daher können wir sie hier nicht in einem Stück einfügen.

Für Designer (und Unternehmen), die seit langem an die Photoshop-Mockup-Methode gewöhnt sind, ist dies ebenfalls eine neue Grenze und erfordert einen Perspektivwechsel. Mit einem Stilprototypen versuchen Sie nicht, eine Seite genau zu gestalten, sondern vielmehr die wichtigsten Teile der Website zu zeigen und Feedback zum allgemeinen Erscheinungsbild zu erhalten. Da sich das Erscheinungsbild einer responsiven Website radikal ändern muss, wenn sich die Bildschirmgröße ändert, geht es bei dieser Methode viel mehr um die Teile einer Website und darum, ein Gefühl für die Richtung zu bekommen, in die sich das Design bewegt. Sie zeigen nicht die Website als Ganzes, geschweige denn eine pixelgenaue Darstellung dessen, wie jede einzelne Seite genau aussehen wird.

Dies kann viel Zeit sparen, aber auch hier gilt: Wenn das Unternehmen nicht bequem (oder vertrauensvoll) genug ist, um den Designer später strukturelle Entscheidungen treffen zu lassen, kann sich diese Methode schwer verkaufen. Allerdings kann es wirklich eine flexible Umgebung schaffen, in der schnell Webdesigns für unzählige Plattformen erstellt werden können.

Während die Prinzipien des Grafikdesigns zeitlos sind, werden sich die Ansätze für das Website-Design im Laufe der Zeit ändern und weiterentwickeln. Ich empfehle Ihnen dringend, sich Design Deliverables für eine Post-Comp-Ära anzusehen, um den Wert dieses Ansatzes zu entdecken.

Bei der Verwendung dieser Element-Collage-Methode muss das Unternehmen akzeptieren, dass es keinen genauen, präzisen, endgültigen Entwurf einer bestimmten Seite gibt, sondern nur Layout-Richtlinien, die vereinbart werden müssen. Es liegt in der Natur responsiver Websites, dass ihre Inhalte an die Fähigkeiten jedes Geräts angepasst werden, sodass das Unternehmen nicht damit rechnen muss, vor der Entwicklungsphase in Stein gemeißelte Layouts zu genehmigen. Mit einem genehmigten Stilprototyp möchte ein Designer möglicherweise zu Drahtmodellen oder funktionierenden Prototypen zurückkehren, um alle Layouts auszuarbeiten, die Ihr Projekt erfordert. Wenn es dann darum geht, die Website zu erstellen, fügen Sie die Elemente Ihrer Collage in die visuelle Struktur jedes einzigartigen Layouts ein.

In der Design-Community gibt es viele Diskussionen und Debatten über die besten Tools, Methoden und Prozesse zum Erstellen von Webdesigns. Designer neigen dazu, sehr stark darauf zu achten, welches die „beste“ Methode ist, und obwohl das verständlich ist, ist es wichtig, den am besten geeigneten Prozess für das Projekt und das Unternehmen zu verwenden. Es ist klug für Designer, sich mit einer Reihe von Methoden und Systemen vertraut zu machen und ihren Horizont zu erweitern, wenn es ein Projekt zulässt.

Anmerkung des Verfassers
Ich habe sehr gezögert, einige der folgenden Inhalte aufzunehmen, da sie ernsthafte Spannungen in der Beziehung zwischen Unternehmen und Designern hervorheben. Auch wenn dies gegenüber Geschäftsinhabern übermäßig kritisch erscheinen mag, glaube ich, dass es für Unternehmen von großem Wert ist, da bei einem Website-Projekt so viel Zeit und Geld auf dem Spiel steht.
Im Interesse der Diplomatie und der Erhaltung von Kundenbeziehungen werden Designer diese Frustrationen gegenüber Geschäftsinhabern wahrscheinlich nicht äußern, aber die folgenden Probleme können Projekte zum Scheitern bringen und tun dies auch.

Entwurfsfreigabe und Revisionen

Unabhängig davon, welche Designmethode für das Projekt gewählt wurde, werden die Ergebnisse nach Abschluss des Designs mit dem Unternehmen zur Genehmigung geteilt, und es gibt oft einen (hoffentlich kurzen) Überarbeitungsprozess. Der Überarbeitungsprozess beinhaltet, dass der Designer und die wichtigsten Beteiligten einige Male hin und her gehen und verschiedene Änderungen am Design ausprobieren, bis das Design genehmigt ist.

Design by Committee: Tu es nicht.

Ein häufiges (und völlig vermeidbares) Problem in dieser Phase ist die Berücksichtigung zu vieler Meinungen, einfach zu viele Köche in der digitalen Küche.

Um einen reibungslosen Ablauf zu gewährleisten, muss das Unternehmen eine Person als Ansprechpartner für das Designteam benennen. Diese Person ist sowohl für die Kommunikation mit dem Designer als auch für das Treffen endgültiger Entscheidungen über die Designrichtung verantwortlich.

Sicherlich ist es wichtig, Feedback zum Design einzuholen, und die Projektbeteiligten können wertvolle Kritik einbringen, um den Designprozess so zu lenken, dass das Endergebnis ihr Geschäft genau widerspiegelt.

Darüber hinaus ist in einigen Fällen eine Überprüfung durch juristisches und/oder technisches Personal erforderlich. Wenn jedoch das gesamte Unternehmen Input gibt und allen Rückmeldungen gleiches Gewicht beigemessen wird, führt dies schnell dazu, dass niemand zufrieden ist . Der beste Weg, um ein schlammiges, unkonzentriertes Design zu gewährleisten, besteht darin, allen Input zu geben und dann herumzulaufen und alle vorgeschlagenen Änderungen vorzunehmen.

Im Allgemeinen ist es in kleinen Unternehmen oder Organisationen ein Rezept für einen Stillstand, wenn mehr als fünf Personen Design-Feedback geben. Je weniger desto besser, fünf ist das Maximum. Diese fünf (oder weniger) Personen werden Feedback von ihren Untergebenen oder Abteilungskollegen einholen, aber dieses Feedback sollte von jedem Stakeholder zusammengestellt und als einheitliche, einzige Meinung präsentiert werden. Mit anderen Worten, laden Sie nicht fünfzehn Personen zu einem Design-Review-Meeting ein. Sortieren Sie das ganze Hin und Her aus, bevor Sie mit Eingaben zum Designer gehen. Es ist auch sehr wichtig, zwischen objektiven Designbedenken („Passt dieses Farbschema wirklich zu unserer Bäckerei?“) und persönlichen Designpräferenzen („Ich liebe die Farbe Blau – lass uns viel mehr Blau verwenden“) unterscheiden .

Design ist kein willkürliches Streben. Es gibt gutes und schlechtes Design. Es gibt Regeln, die eingehalten werden müssen, Best Practices, die eingehalten werden müssen, und solange die Planung richtig durchgeführt wurde, sind Designentscheidungen fast nie wirklich eine Frage des Geschmacks. Das heißt, es gibt einen guten Grund, warum der Designer genau dieses Blau an genau dieser Stelle oder diese Schriftart in dieser Größe verwendet hat. All diese kleinen Auswahlmöglichkeiten teilen dem Benutzer Dinge mit. Sie mögen sich unbedeutend anfühlen, aber in Wirklichkeit sind all diese Entscheidungen, die der Designer trifft, wichtig. Sie können die Art und Weise, wie die Website funktioniert und wie sie empfangen wird, drastisch beeinflussen. Leider verstehen viele Unternehmen nicht, dass es nicht allen anderen gefällt, nur weil sie es mögen, und dass der Designer dafür eingestellt wird, das Beste zu tun, um die Seele des Unternehmens zu vermitteln. Die Meinung sollte nicht einfließen, es sei denn, es ist absolut notwendig.

Wenn Egos regieren

Jeder erfahrene Designer hat es mit Entscheidungsträgern zu tun gehabt, die die schreckliche Kombination aus starkem Ego und schlechter Design-Sensibilität haben. Im schlimmsten Fall werden Designer gebeten, ein vom CEO in Microsoft PowerPoint entwickeltes Logo oder Farben und Schriftarten zu verwenden, die für das Image des Unternehmens völlig ungeeignet sind. Dies gehört leider zum Territorium eines Designers. Manchmal ist es möglich, dies zu entschärfen, indem man das anstößige Bildmaterial in einem Raster neben professionell gestaltetem Material von Wettbewerbern oder ähnlichen Unternehmen der Branche platziert – Pinterest ist dafür ein gutes Werkzeug.

Wenn eine Wettbewerbsbewertung Teil Ihrer Bedarfsanalyse war, möchten Sie möglicherweise auf deren Marken verweisen. Die Hoffnung ist, dass das Unternehmen sieht, wie schrecklich seine Version neben der Konkurrenz aussieht, und sein Engagement für die schlechte Idee überdenkt. Letztendlich können und werden Entscheidungsträger jedoch Projekte ruinieren, indem sie entgegen allen verfügbaren Beweisen darauf bestehen, dass ihr Designsinn Vorrang vor etablierten Designprinzipien haben sollte.

Hilfe! Sie werden nicht weichen!

Leser einer früheren Version dieses Buches fragten nach Möglichkeiten, mit dem Ego-Problem umzugehen. Ich wünschte, ich hätte eine clevere oder nützliche Antwort für Sie. Es genügt zu sagen, dass dies ein Problem mit Menschen ist, nicht mit Technologie. Machen Sie Ihr Bestes für den Wert guten Designs, kämpfen Sie Ihren besten Kampf und seien Sie dann bereit, es ruhen zu lassen.

Design-Spannung: Designer vs. das Unternehmen

Designer haben oft mit Spannungen zwischen ihren fundierten Designkonzepten und der uninformierten Designkritik der Wirtschaft zu kämpfen. Dies lässt sich am besten durch das Rätsel der „schlechten Idee“ veranschaulichen. Das Unternehmen fordert ein Designmerkmal an, das entweder hässlich, nicht praktikabel oder einfach nur eine schlechte Idee ist. (Das kommt so häufig vor, dass es viele Websites gibt, die von ahnungslosen Unternehmen und den Kopfschmerzen berichten, die aus dieser Dynamik resultieren ¹ .) Der Designer wird irgendwo auf dem Kontinuum zwischen „Das ist schrecklich, wir werden es nicht tun“ und „Nun, wenn das ist dir lieber...". Diese Reaktion hängt von einer Vielzahl sich ständig verändernder Faktoren ab, darunter:

¹ https://clientsfromhell.net, https://theoatmeal.com/comics/design_hell



• Wenn Designer darauf hoffen, bezahlt zu werden.
• Wie emotional beteiligt der Designer an dem Projekt ist.
• Wie viel Zeit der Designer in die Designphase investiert hat und wie viel Verzögerung durch die Umsetzung der schlechten Idee entsteht.
• Wie hoch die Einsätze sind – wie viel Schaden die schlechte Idee der Website als Ganzes zufügen wird.
• Persönlichkeit, Bereitschaft von Unternehmen, konstruktive Beratung zu ihren Ideen einzuholen.

Jedes Projekt ist anders. Wenn Designer mit Unternehmen zu tun haben, die ständig schlecht beratene Funktionen anfordern, können sie das Projekt irgendwann ganz abschreiben. Ab einem bestimmten Punkt ist es einfach zu anstrengend, ständig zu erklären, warum zentrierte, fette Absätze in Rot, GROSSBUCHSTABENSCHREIBEN, verrückte Flash-Animationen oder schlechte Fotoqualität eine Website wirkungslos machen ² . Die Einstellung des Designers ändert sich schnell von „lasst uns etwas wirklich Großartiges machen, auf das wir stolz sind“ zu „lasst es uns einfach erledigen, damit wir uns das nie wieder ansehen müssen“.

² Andere Stimmungskiller sind Autoplay-Videos und Schriftarten, die am häufigsten in Kinderbüchern verwendet werden.



Wenn Sie das Obige in Betracht ziehen, sollten Sie auch erkennen, dass diese Medaille eine andere Seite hat. Menschenprobleme können auch am Designer-Ende des Spektrums auftauchen. Die Fähigkeiten einiger Designer sind möglicherweise nicht auf dem neuesten Stand, sie weigern sich möglicherweise, auf berechtigte Kritik an ihrer Arbeit zu hören, oder schätzen den fundierten Input des Unternehmens nicht. Eine gute Möglichkeit, dies zu vermeiden, besteht darin, gute Referenzen von früheren Kunden der Designer einzuholen.

Betrachten Sie den Inhalt

Denken Sie an eine Erweiterung. Beispielsweise können Sie einen Nachrichtenbereich haben. Zu Beginn haben Sie sechs Nachrichten. Das ist gut. Sie erstellen eine Hauptnachrichtenseite mit Zusammenfassungen und verknüpfen die Zusammenfassungen mit einer Detailseite. Aber was passiert, wenn Sie zehn, zwanzig oder fünfzig Nachrichten haben? Jetzt gibt es andere Überlegungen. Möchten Sie alte Nachrichten archivieren? Paginierung erstellen? Nur die letzten zehn Artikel anzeigen? Dies sollte im Designprozess berücksichtigt werden. Planen Sie den Inhalt so weit wie möglich im Designprozess ein und denken Sie voraus, wo immer Sie können – planen Sie für den Inhalt, den Sie haben werden, nicht den Inhalt, den Sie jetzt haben.

Web-Styleguide

Ein Styleguide ist der Ort, an dem die richtige Planung glänzt. Ein Styleguide besteht aus allen Design-, Layout-, interaktiven (dh JavaScript) und Schriftelementen, die auf der gesamten Website an einem Ort verwendet werden. Dies geschieht normalerweise in HTML. Wenn Sie also ein Designer sind, der nicht programmiert, müssen Sie ein Mockup für Ihren Styleguide erstellen und es zusammen mit dem Rest Ihrer Designs an Ihren Frontend-Entwickler liefern. Wenn Sie die zuvor behandelte Element-Collage-Methode verwendet haben, müssen Sie sich möglicherweise nicht in einem separaten Web-Styleguide wiederholen. Wenn Sie die klassische Photoshop-Mockup-Methode verwenden, benötigen Sie eine. Zu den Elementen eines Styleguides gehören unter anderem:

• Navigationsstile
• <h1> bis <h5>, auch bekannt als Header-Tags
• Absätze
• Listen
• Block Zitate
• Kursiv, Fettdruck, Unterstreichungen
• Links, einschließlich aktiver, schwebender und besuchter Zustände, d. h. das Erscheinen von Links, auch wenn mit der Maus darüber gefahren wird
• Symbole
• Verwendung von Bildern und Bildstil
• Verwendung von Hintergrundbildern oder „Wasserzeichen“
• Formen.

Dieser Artikel von Canva untersucht 10 Web-Styleguides für bekannte Unternehmen. Sie können auch ein Online-Tool wie Frontify verwenden.

Verwenden einer Musterbibliothek

Für Websites mit größerem Umfang können Sie das Webstilkonzept auf die robustere Musterbibliothek erweitern, die erklärt, wie verschiedene Elemente angezeigt und wie sie gehandhabt werden. Beispielcode für diese Elemente ist normalerweise Teil der Bibliothek. Es ist nicht nur ein Bild davon, sondern das Ding selbst. Wie sieht beispielsweise ein Formular aus, was passiert visuell, wenn es Fehler enthält, wie ist der Prozess für die Einreichung von Kommentaren usw.

Zugelassene Mockups, Elementcollagen und Wireframes werden zusammen mit dem Styleguide als Bausteine ​​für die nächsten Entwicklungsschritte verwendet.

HTML/CSS-Erstellung

Unter Verwendung der Designs und des Styleguides erstellt ein HTML/CSS-Experte (der Front-End-Codierer) HTML-Vorlagen, die das genehmigte Design genau wiedergeben. In einigen Fällen erscheinen Vorlagen identisch mit Mockups, aber wenn Photoshop für Mockups verwendet wurde, sind feine Unterschiede zu erwarten.

Ihr Front-End-Programmierer benötigt möglicherweise auch zusätzliche Richtlinien und Elemente in Bezug auf Designs, wie Farbpaletten, bestimmte Bilder, Symbole und – falls nicht bereits ausdrücklich erwähnt – Designregeln wie Ränder und Polsterung. Stellen Sie sicher, dass Sie alle zu liefernden Leistungen kennen, bevor Sie mit dem Senden von Dateien beginnen. Wenn Designs und Styleguide mit viel Liebe zum Detail erstellt wurden, sollte es in dieser Phase nur wenige Fragen oder Vermutungen geben; Die Arbeit sollte summen.

Interaktive Elementerstellung

Interaktive Elemente können so einfach wie ein Dropdown-Menü oder so ausgefeilt wie ein Tortendiagramm-Ersteller sein. Diese Elemente werden normalerweise mit JavaScript entwickelt, oft unter Verwendung einer Skriptbibliothek wie jQuery. Auf der allgemeinsten Ebene besteht dies darin, eine Reihe von Anweisungen zusammenzustellen (und zu schreiben), die mit den Seiten Ihrer Website interagieren. Möglicherweise muss auch eine Interaktivität zwischen Site und Server berücksichtigt werden. Möglicherweise verbinden Sie APIs ³ , erstellen so etwas wie ein Buchungs- oder Kalendersystem usw. oder verwenden Widgets von Drittanbieterdiensten.

³ Im Wesentlichen eine Brücke zwischen einem oder mehreren Systemen. Beispielsweise bietet Facebook eine API an, mit der Sie Beiträge von Ihrer Pinnwand auf eine nicht verwandte Website ziehen können.

 ### CMS-Integration

Endlich wurde Ihr brillantes Design in Code umgewandelt und kann in ein Content Management System (CMS) integriert werden. Es ist auf dem besten Weg, eine Website zu werden!

Die Person oder das Team, die oder das damit beauftragt ist, den Code mit dem CMS zu „vernähen“, stellt Ihnen ein Login für das Bedienfeld des CMS zur Verfügung, mit dem Sie den Inhalt eingeben können, einschließlich Text, Fotos, Videos und Dokumente. Die meisten Autoren ziehen es vor, aus Microsoft Word auszuschneiden und einzufügen.

Abhängig von den Besonderheiten des ausgewählten CMS können Sie dies möglicherweise problemlos tun und einfache Formatierungen wie Fett, Kursiv und Listen beibehalten. Das CMS kann diese Formatierung jedoch beim Ausschneiden und Einfügen entfernen, sodass Sie sie wieder hinzufügen müssen. Obwohl dies manchmal mühsam ist, stellt dies sicher, dass Ihre Inhalte sauber und ordentlich bleiben, wodurch sie von Suchmaschinen leichter indexiert, einfacher gedruckt, zitiert und in andere Formate konvertiert werden können.

Obwohl dieser Prozess in Wirklichkeit ziemlich kompliziert ist, habe ich die Details weggelassen, da der genaue Prozess für jedes CMS einzigartig ist und dies gut von der Expertise des Web-/CMS-Entwicklers abhängt.

Schulung und Dokumentation

Während moderne CMS sehr benutzerfreundlich sein können, ist es wichtig, die Schulung für die Personen zu koordinieren, die für die Eingabe von Inhalten verantwortlich sind. Wenn möglich, ist eine Schulung vor Ort am besten, eine Webkonferenz eine zweite Wahl. Das Training funktioniert am besten in sehr kleinen Gruppen – 5 Personen oder weniger. Darüber hinaus ist es viel effektiver, wenn die Leute die Schritte befolgen, die erforderlich sind, um eine Aufgabe selbst zu erledigen (anstatt sie nur dem Trainer zuzusehen und zu versuchen, sich daran zu erinnern, wie es geht, wenn sie alleine sind).

Die Schulung sollte durch Dokumentation unterstützt werden, die viele Formen annehmen kann:

• Schritt-für-Schritt-Video ("Screencast")
• PDFs mit Screenshots
• Gedruckte Richtlinien
• Kontexthilfe (im CMS integriert).

Manchmal kombiniert die Dokumentation einige oder alle der oben genannten Punkte. Was auch immer Sie wählen, denken Sie an das Qualifikationsniveau der Personen, die Inhalte eingeben. Viele Menschen, die in Büros arbeiten, sind kompetent im Umgang mit Microsoft Word und E-Mail, können jedoch durch grundlegende, aber notwendige „Design“-Aufgaben wie das Anpassen der Größe und das Zuschneiden von Bildern herausgefordert werden. Denken Sie auch daran, dass das Unternehmen wahrscheinlich nicht mit denselben professionellen Designwerkzeugen arbeitet wie der Designer, also berücksichtigen Sie auch die technologischen Bedenken des Unternehmens.

Es ist eine gute Idee, das Schreiben der Dokumentation so kurz wie möglich zum Ende des Projekts aufzuschieben. Denken Sie daran, dass Sie möglicherweise die Dokumentation entsprechend aktualisieren müssen, wenn Sie etwas im CMS mitten im Projekt ändern. Dies kann sehr zeitaufwändig (und auch verwirrend) sein. Versuchen Sie also, die Teile Ihres Projekts so zu koordinieren, dass die Dokumentation geschrieben wird, sobald der Inhaltseingabeprozess abgeschlossen ist.

Alles zusammenfügen…

An diesem Punkt, nachdem Sie die vorherigen Schritte befolgt haben, sollten Sie nun auf einer ziemlich soliden Website sitzen. Unabhängig von der Größe Ihres Projekts ist jetzt ein guter Zeitpunkt, um:

Überprüfen Sie Ihre Inhalte noch einmal und vergleichen Sie sie mit den Punkten, die oben unter Schreiben für das Web aufgeführt sind.

Bitten Sie einen Dritten, alle Ihre Inhalte Korrektur zu lesen. Dies ist nicht die Aufgabe des Designers oder des ursprünglichen Autors. Es ist am besten, jemanden mit einer frischen Perspektive hinzuzuziehen. Lesen Sie Ihre eigene Arbeit nicht Korrektur.

BETA-TEST

Wenn Sie das Gefühl haben, dass Ihre Website für die Öffentlichkeit fast bereit ist, ist es Zeit für Betatests – ein Prozess, bei dem alle Aspekte der Website durchgegangen werden, um sicherzustellen, dass alles wie beabsichtigt angezeigt wird und funktioniert. Betrachten Sie mindestens diese Checkliste:

• Sieht die Website in allen Ziel-Webbrowsern wie beabsichtigt aus? Zu den Webbrowsern gehören der übliche Internet Explorer, Firefox, Safari und Chrome sowie die, die mit gängigen Mobilgeräten geliefert werden. Wenn Sie die Website bisher in einem Desktop-Browser angesehen haben, werden Sie möglicherweise unerwartete Störungen feststellen, wenn Sie zu einem Tablet oder Smartphone wechseln. Dies ist der richtige Zeitpunkt, um Ihre Website auf einer Vielzahl von Geräten gründlich zu überprüfen, bevor sie als bereit für die öffentliche Nutzung angesehen werden kann. Denken Sie daran, dass das Publikum Ihrer Website eine Vielzahl von Geräten verwendet, um Ihre Website anzuzeigen, und sie muss auf allen akzeptabel gut funktionieren. Sie müssen Ihre Website nicht auf jedem möglichen Telefon oder Tablet physisch testen, aber Sie sollten sie auf einer Handvoll gängiger Geräte ausprobieren. Gehen Sie nicht los und kaufen Sie ein fünf Jahre altes Blackberry zu Testzwecken.
  „Emulation“-Websites und -Dienste wie Spoon.net generieren eine Vorschau Ihrer Website auf nahezu jedem Browser oder Gerät, das der Menschheit bekannt ist, und geben Ihnen eine gute Vorstellung davon, wie sie in den meisten Szenarien aussehen wird.
• Interaktive Funktionen funktionieren reibungslos.
• Kontakt- oder andere Formulare funktionieren vorhersehbar und erzeugen die richtige Antwort für den Benutzer und Empfänger der übermittelten Informationen.
• Fehlermeldungen sind hilfreich und benutzerfreundlich.
• Interne und externe Links funktionieren.
• Bilder haben die richtige Größe.
• Alle Platzhalterinhalte wurden durch die endgültige Kopie/Bilder usw. ersetzt.
• Interne und externe Links, einschließlich E-Mail-Links, funktionieren ordnungsgemäß.
• Integrationen mit Software von Drittanbietern, wie z. B. E-Mail-Dienstanbietern, funktionieren.

An diesem Punkt ist es sehr ratsam, jemanden hinzuzuziehen, der bisher nicht in den Prozess involviert war, und ihn zu bitten, jede Seite und jedes Feature auf der Website methodisch durchzugehen und alle gefundenen Fehler oder Störungen zu notieren. Verwenden Sie niemanden, der seit Monaten auf die Website starrt. Zu den Problemen, auf die Sie achten sollten, gehören Tippfehler, fehlerhafte Links, Bildgröße, Fehler auf bestimmten Mobilgeräten oder fehlende oder unvollständige Inhalte. (Stellen Sie sicher, dass Sie Ihrem Tester mitteilen, dass das Design der Website zu diesem Zeitpunkt in Stein gemeißelt ist, damit er keine Zeit damit verschwendet, sich mit nicht-inhaltlichen Überlegungen zu befassen.)

Koordination vor dem Start

Wenn Sie sich der Einführungszeit nähern, müssen Sie sich mit den anderen Marketingbemühungen Ihres Unternehmens abstimmen. Wenn Sie in sozialen Medien aktiv sind, schreiben und korrigieren Sie die Ankündigung Ihrer neuen/umgestalteten Website und legen Sie einen Zeitplan für die Veröffentlichung der Ankündigung fest. Bereiten Sie sich darauf vor, Ihre ausgehende Voicemail-Nachricht zu aktualisieren und Printwerbung zu koordinieren – alles, was zur Unterstützung des Starts der Website erforderlich ist.

Umleitung des Datenverkehrs von der „alten“ Website

Wenn Ihre neue Website eine frühere Version ersetzt, wird sie wahrscheinlich eine andere URL-Struktur haben, und Sie müssen die alte Struktur der neuen zuordnen. Dafür gibt es zwei Gründe. Erstens haben Suchmaschinen die URLs Ihrer alten Website indiziert. Diese Indizierung ist für Personen, die nach dem Angebot Ihres Unternehmens suchen, von großem Wert. Wenn Sie eine neue Website mit anderen URLs starten, werden die alten beschädigt und die Benutzer erhalten die Meldung „Seite nicht gefunden“ (404-Fehler). Sie möchten Ihren hart erarbeiteten Platz in den Suchmaschinen behalten. Zweitens haben Website-Besucher möglicherweise Seiten auf Ihrer alten Website mit Lesezeichen versehen und möchten zu ihnen zurückkehren. Wenn sich die URLs dieser Seiten ändern, müssen Sie sicherstellen, dass Besucher weiterhin Inhalte erhalten, die für ihre Bedürfnisse relevant sind, anstatt eine Seite, die nicht mehr existiert.

Ihre alte Website kann beispielsweise Folgendes aufweisen:

• https://oursite.com/company/history.html
• https://oursite.com/staff/california.html

während die neue Website Folgendes hat:

• https://oursite.com/company-history
• https://oursite.com/staff/california

Die Unterschiede sind subtil, aber Computer sind sehr buchstäbliche Dinge – für den Browser könnte der Unterschied zwischen „history.html“ und „company-history.html“ genauso gut die Entfernung zwischen Mars und Erde sein. Sie müssen die Struktur der alten Website durchgehen und sich jede Seite mit entsprechenden Informationen auf der neuen Website und deren URLs notieren. Wenn Ihre alte Website viele Seiten hat, können Sie ein Tool wie Powermapper verwenden, um den Prozess zu automatisieren. Manchmal passen alte und neue URLs ziemlich gut zusammen, wie oben. In anderen Fällen gibt es für eine alte URL möglicherweise keine Entsprechung auf der neuen Website. Dies geschieht häufig, wenn Sie einen Unternehmensbereich geschlossen, ein Projekt eingestellt oder eine Abteilung neu organisiert haben. Unabhängig vom Grund benötigen Sie dennoch genaue URLs, mit denen Sie im nächsten Schritt arbeiten können. Es gibt drei Möglichkeiten, mit alten URLs umzugehen:

• Wenn sie ein Äquivalent wie in den obigen Beispielen haben, können Sie die alte URL auf die neue verweisen. Um kurz zum Technischen abzuschweifen, geschieht dies mit einer 301-Weiterleitung, die Suchmaschinen und Webbrowsern der Benutzer mitteilt, dass sich eine URL dauerhaft geändert hat. Das sieht so aus: Redirect 301 /company/history.html https://oursite.com/company-history
• Wenn es für die Links kein Äquivalent gibt, können Sie Website-Besucher zu einer Seite weiterleiten, auf der steht: „Leider können wir nicht finden, wonach Sie suchen. Wir haben unsere Website neu gestaltet und neu organisiert, und einige Inhalte wurden geändert oder verschoben.“ und stellen Sie eine Sitemap und eine Suchoption bereit.
• Sie können auch alle nicht vorhandenen URLs direkt auf die Startseite verweisen.

Je größer Ihre alte Website ist, desto mehr Arbeit ist erforderlich, um alte URLs neu zu verweisen. Wenn Sie Analysen auf Ihrer alten Website ausführen, können Sie nur die Top 10 oder 20 alten URLs auf neue verweisen und einen Sammelpunkt für den Rest festlegen, indem Sie sie entweder auf den Link „Sorry, we can finden Sie nicht, wonach Sie suchen…“ oder auf der Homepage. Das Erstellen von Catch-All-Weiterleitungen oder solchen, die einem bestimmten URL-Muster entsprechen, ist ein technisches Unterfangen, das wir hier nicht behandeln werden, aber Sie können leicht Informationen zu .htaccess-Dateien (für Linux-Server) oder web.config-Dateien (für NT-Server) finden ) bei Stack Exchange oder anderen Ressourcen.

Starten Sie niemals an einem Freitag

Es ist nie eine gute Idee, eine Website an einem Freitag oder kurz vor Feiertagen zu starten, insbesondere wenn viele Menschen darauf angewiesen sind. Wenn etwas schief geht, haben Sie möglicherweise nicht die Ressourcen, um es zu beheben, wenn die meisten Büromitarbeiter, Lieferanten und andere Dritte, die möglicherweise helfen können, über das Wochenende nach Hause gegangen sind. Montags eignen sich am besten für den Start einer neuen Website, da Sie so die ganze Woche Zeit haben, um unerwartete Probleme zu beheben, die auftreten können, und viel Unterstützung erhalten, die Ihnen dabei hilft.

Starten!

Sobald Sie die Website gründlich im Betatest getestet haben, ist es an der Zeit, sie zu starten. Spezifische Schritte variieren je nach Projekt, aber im Allgemeinen bedeutet dies entweder das Verschieben der Site (Dateien, Datenbank, Konfiguration) von einer Entwicklungsumgebung in eine öffentliche Umgebung, wodurch sie für die Welt sichtbar wird, oder einfach das Aktualisieren der Servereinstellungen, damit Besucher von yourcompany.com sie sehen können die neue Seite.

Post-Launch

Web-Statistiken

Die Überprüfung Ihrer Website-Besucherstatistik kann Ihnen wichtige Einblicke in die Nutzung Ihrer Website geben. Sie benötigen mindestens ein oder zwei Monate an Daten, um Entscheidungen treffen zu können. Verlieren Sie sich nicht zu sehr an den reinen Zahlen – sie sind alle bis zu einem gewissen Grad ungefähr. Trends sollten Ihr Hauptaugenmerk sein. Hier sind einige wichtige Punkte, die es zu beachten gilt:

• Woher kommen die Besucher? Suchmaschinen, direkter Traffic (d. h. jemand hat gerade die Ihrer Website eingegeben.
• URL im Browser), Anzeigen, Links von anderen Websites usw.
• Wo wohnen Besucher? Sind sie hauptsächlich lokal, regional, national, international?
Welche Seiten sind am beliebtesten?
• Wie lange bleiben die Besucher auf der Seite?
• Wie hoch ist die Absprungrate, d. h. wie viele Benutzer besuchen nur eine Seite der Website, bevor sie sie vollständig verlassen?

Google Analytics gehört zu den am häufigsten verwendeten Webstatistik-Software und Sie werden in den hochrangigen Daten, die es präsentiert, leicht Antworten auf diese Fragen finden. Andere Webstatistik-Software wie KISSMetrics oder Clicky sollten diese Antworten ebenfalls bereitwillig liefern.

Technische Dokumentation

Sie benötigen außerdem detaillierte Hinweise dazu, wie verschiedene Teile der Website auf dem CMS implementiert sind. Dies unterscheidet sich von der Dokumentation, die dem Unternehmen zur Verfügung gestellt wird. Much of your technical documentation will simply consist of the annotated elements discussed earlier in this document, including wireframes, style guide and Photoshop documents. Think about what information would be needed if you brought new people in to maintain the site, people who were not at all familiar with it. What do they require to pick up the project? They'll need:

• Credentials for the CMS, web server, and other services connected to the site.
• Written or video instructions on how to perform tasks in the CMS: adding news items, blog posts, swapping out photos — everything that someone can do to the site.
• Recommended technical maintenance — how often do the CMS and other services require updating?
• Notes on backups — what is being backed up, how often, and where is it backed up to?

Note: writing documentation of all kinds is one of a web professional's least favorite tasks, but it's very important. Don't slack on it. Think how terrible it would be to inherit a project without any technical documentation. Then use that dread as your inspiration! You don't want to leave anybody in a lurch down the line and doing this right will save time and frustration later on.

Sicherung

This is often overlooked by businesses and designers alike. Schedule regular backups of the site's files and database. Daily is ideal. Your hosting company may provide an automated way to do this, but if they don't, there are plenty of effective services and tools available to facilitate this process. That way, if your files or database get hacked, erased, corrupted or otherwise damaged, you can restore them with copies from the previous day.

Depending on the size of your site, frequency of updates and some technical matters that vary with each site, you may want to schedule more frequent backups. Ideally, your site will be backed up off-site, that is, in a different place than where it is hosted. Services like Amazon S3 or Rackspace Cloud are ideal for this purpose. The idea is that if your website gets irrevocably damaged, a recent copy is stored in a different physical location, allowing restoration of the site to the last undamaged version.

Maintenance plan

Your maintenance plan, which should have been budgeted for before you started, should clarify roles and responsibilities for every aspect of the site. For example, if two articles per week are to be posted, who is responsible for this, and who is that person's backup? If your site requires photos or graphics to be created regularly, make sure this work is assigned and understood by all involved. Determine who will check links, re-size images, write blog posts, etc. Write a simple maintenance plan and share it with everyone involved in the site's care and feeding. Remember, a good website isn't a one-time event, but rather an extensible communication tool that requires regular updates to remain valuable, relevant and compelling to site visitors.

Solicit visitor feedback

After it's been online for a while, a great way to improve the impact of your site is to solicit visitor feedback. There are a variety of ways to do this, from simple online surveys to on-site focus groups. Site visitors often have trouble articulating what they like and don't like about their experience. With this in mind, it's important to craft very clear and specific questions when soliciting feedback. And remember, if you're going to take a significant amount of visitors' time, offer something in return — a product discount, prize, or simply a handwritten note thanking them.

FLOSSE

OK, one more time for posterity: A good website isn't a one-time event, but rather an extensible communications tool. Once you've built a great website, keep the momentum going. Devote resources to regular maintenance, and check in with your site visitors regularly to identify areas for improvement.

Recommended Reading

• "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability" by Steve Krug
  Helps readers understand the principles of intuitive navigation and information design.
• "Content Strategy for Mobile" by Karen McGrane
  Making the case for a mobile strategy, publishing flexibly to multiple channels, and adapting your workflow to a world of emerging devices, platforms, screen sizes, and resolutions.
• "Design Is A Job" by Mike Monteiro
  From contracts to selling design, from working with clients to working with each other, learn why navigating the business of design is just as important as the craft of it.
• "Grow your SEO" by Candy Phelps
  A beginner's guide to SEO.

DEFINITIONS

Term	Definitions
Adobe Flash	A proprietary system for creating rich, interactive website features such as charts, graphs, animations and streaming video. The Flash player, that is, the browser add-on that allows users to via Flash content, is free. Flash authoring software is sold by Adobe.
Beta testing	The process of reviewing a website to ensure everything works as intended prior to launch.
Content Management System (CMS)	Software that provides website authoring, collaboration and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage the site's content with relative ease. Offers users the ability to manage documents and output for multiple author editing and participation. Popular CMS include WordPress, ExpressionEngine, Drupal, Joomla, Perch, Statamic, Craft, and hundreds more.
Grid system	A grid takes the available screen area and divides it up in to equal parts, for example, 10 columns of 96 pixels = 960 pixels. This makes layout and design easier. Many grid systems are available — use a search engine to see what's current.
HTML	Short for 'Hypertext Markup Language.' HTML is a tag-based language which defines the elements of content on a web page. For example, surrounding content in <p>...</p> tags creates a paragraph, while <strong>...</strong> creates bold text (adapted from Wikipedia).
Javascript (JS)	A programming language that runs inside a user's web browser, enhancing websites with a wide range of features such as mouseovers, slide shows, moving and fading elements, and more. Commonly implemented through a library like jQuery.
CSS	Short for 'Cascading Style Sheets.'' CSS is a set of instructions which define the layout and appearance of HTML elements. For example, CSS may specify that all paragraphs be 12 point Verdana, dark gray.
Layout	Deals with the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.
Lorem Ipsum ("Greeking")	Placeholder text used by web and graphic designers to fill space in mockups and incomplete web pages until real content is provided. May be as old as the sixteenth century.
Meta tags	Information about a web page (for example, title, description, author) that helps search engines and other resources understand the contents of that page.
Responsive Web Design (RWD)	A set of web design techniques that insure a site adjusts its presentation appropriately for different devices. Term originally coined by Ethan Marcotte.
Search Engine Optimization (SEO)	The process of affecting the visibility of a website in a search engine's results.
URL	Stands for Uniform Resource Locator, that is, a unique address on the web that contains specific content. For example, tastyfruit.com/citrus/oranges
Wireframe	A visual representation of the layout elements of a web page, intended to show page structure, element placement and sizing.