Verfeinerung und Standardisierung Ihres Divi-Design- und Entwicklungsprozesses

Veröffentlicht: 2017-06-02

Willkommen zu Teil 4 von 5 unserer Serie Organisieren und Übernehmen der Kontrolle über Ihr Divi-Webdesign-Geschäft. In dieser Serie untersuchen wir verschiedene Taktiken, Tools und Strategien, die Ihnen helfen, die täglichen Kämpfe zu überwinden, mit denen wir alle als Divi-Webdesigner konfrontiert sind. Von der Optimierung Ihrer täglichen Routinen über die Erstellung von Systemen und Prozessen bis hin zur Bereitstellung des besten Webdesign-Erlebnisses für Ihre Kunden; Wir bieten umsetzbare Elemente und Schritte, die Sie sofort implementieren können, um Ihnen zu helfen, die Kontrolle über Ihr Divi Web Design-Geschäft zu übernehmen, egal ob Sie ein Solo-Freiberufler, eine kleine Agentur oder ein Remote-Team sind.

Die Schaffung eines standardisierten Prozesses für die Gestaltung und Entwicklung einer Divi-Website ist entscheidend für Ihre Produktivität und Ihr Wohlbefinden als Webdesigner. Obwohl ein Website-Design-Projekt selten genau nach Plan verläuft, können Sie, wenn Sie einen Prozess und einen Weg einhalten müssen, viel Zeit sparen und Sie auf dem richtigen Weg halten, um Ihre Fristen einzuhalten, wenn Projekte wachsen.

Verfeinerung und Standardisierung Ihres Divi-Design- und Entwicklungsprozesses

Gestern haben wir auf einen früheren Beitrag verwiesen, in dem es darum ging, eine Seite für die ersten Schritte zu erstellen, um Ihre Kunden vorzubereiten. In diesem Beitrag haben wir darüber gesprochen, wie Sie Ihren Prozess Ihren neuen Kunden präsentieren können. So präsentiere ich meinen Kunden meinen Prozess:

  1. LAYOUT UND DESIGN – Ein großer und zeitaufwändiger Teil der Gestaltung einer Website liegt in der Planungs- und Layoutphase des Prozesses. Ich erstelle zuerst die Sitemap (Seiten-/Menühierarchie) der Website zur Genehmigung, dann gestalte ich die Startseite und eine Unterseite (oder mehr auf Anfrage) zur Genehmigung.
  2. ENTWICKLUNG – Sobald das Layout und das Design der Site genehmigt sind, werde ich mit der Gestaltung der gesamten Site und der Seiten fortfahren und alle Funktionen und Plugins hinzufügen. Wir sorgen dafür, dass Ihre Website auf allen Geräten und Webbrowsern gut aussieht und gut funktioniert, bevor wir mit dem letzten Schritt fortfahren.
  3. BEARBEITUNGEN & ÜBERARBEITUNGEN – Sobald die Site zur endgültigen Überprüfung bereit ist, können Sie jede Seite überprüfen und wir können detaillierte Änderungen vornehmen, bis die Site vollständig überarbeitet ist. Wir bitten Sie, ALLE Seiten zu überprüfen, um sicherzustellen, dass alle Rechtschreibung, Grammatik, Adressen und Informationen korrekt sind, bevor Sie live gehen.

Jetzt wissen Sie als andere Webdesigner, dass das Entwerfen und Entwickeln einer Website mehr ist als ein einfacher 3-Schritte-Prozess. Meiner ist eigentlich eher ein 20-Schritte-Prozess, aber ich habe festgestellt, dass, wenn ich meine Kunden mit allem, was damit verbunden ist, überlaste, sie oft überdenken, wenn es um die Bereitstellung von Inhalten geht. So sieht mein Divi Webdesign/Entwicklungsprozess etwas detaillierter aus:

  1. Seiten- und Navigationslayout zur Genehmigung erstellen
  2. Kopf- und Fußzeile gestaltet
  3. Homepage gestaltet
  4. Unterseite(n) gestaltet
  5. Zur Genehmigung an den Kunden senden
  6. Überarbeitungen auf Kopf- und Fußzeile, Startseite und Unterseite
  7. Bauen Sie nach der Genehmigung die verbleibenden Seiten aus
  8. Erstellen Sie Vorlagen für standardisierte Abschnitte der Website und wiederkehrende Seiten wie Galerien, Projekte, Produkte usw.
  9. Implementieren Sie alle Integrationen für Maillistenanmeldungen, soziale Medien, Widgets usw.
  10. Erstellen und testen Sie alle Kontaktformulare
  11. Design für mobile und responsive Nutzung anpassen und optimieren
  12. Geben Sie die erforderlichen SEO-Einstellungen ein
  13. Überprüfen Sie die Grammatik und den Inhalt der Website erneut
  14. Cross-Browser-Check und Fehlerbehebungen
  15. Zur abschließenden Überprüfung senden
  16. Nehmen Sie alle letzten Client-Revisionen vor
  17. Erstellen Sie ein benutzerdefiniertes Dashboard und ein Schulungsvideo für den Kunden (falls erforderlich)
  18. Löschen Sie unnötige Plugins, Bilder und Tools
  19. Site sichern und lokal speichern
  20. Startplatz

Dieser Prozess wird oft noch detaillierter aufgeschlüsselt, aber dies ist eine grundlegende Struktur von allem, was mit jedem meiner Builds zu tun hat, egal ob es sich um eine 5-seitige Website im Broschürenstil oder eine 50-seitige Website mit Veranstaltungen, E-Commerce usw. handelt. Ich habe all dies als Checkliste und es war eine gute Übung für mich, sicherzustellen, dass ich nichts übersehen habe, bevor ich eine Site starte. Das Erstellen einer solchen Checkliste und das Hinzufügen einer Zeitleiste können eine sehr effiziente Möglichkeit sein, um sicherzustellen, dass Ihr Design-/Entwicklungsprozess mit Ihren Projektfristen übereinstimmt.

Ok, jetzt, da Sie eine Vorstellung davon haben, wie ich meinen internen Design-/Entwicklungsprozess organisiert habe, lassen Sie uns etwas genauer darauf eingehen, wie Sie IHRE Divi-Webdesign-Prozesse optimieren können.

1) Erstellen eines Standard-Designprozesses

Eine der am besten wiederkehrenden Fragen und Diskussionen, die ich in den Divi-Facebook-Gruppen sehe, lautet: „Wie gestalten Sie Ihre Divi-Site?“ Machst du es in Photoshop oder Illustrator nach? Erstellen Sie ein grundlegendes Wireframe, das der Kunde genehmigen kann? Tauchst du einfach in Divi ein und machst es live?

Dabei gibt es natürlich keinen richtigen oder falschen Weg. Ich habe festgestellt, dass, wie auch immer Sie Ihren Designprozess wählen, er 3 Dinge tun muss:

  1. Es muss für Sie oder Ihr Team funktionieren
  2. Es muss für Ihren Kunden funktionieren
  3. Es muss dir Zeit sparen

Wenn ich ein neues Projekt beginne, neige ich dazu, eine sehr grobe Skizze auf Papier zu erstellen und direkt in Divi einzutauchen, um die Kopfzeile, Fußzeile, Homepage und alle Unterseiten zu entwerfen, die für die erste Genehmigung benötigt werden.

Hier ist der Grund:

  • Es funktioniert für mich – Traditionell beginnt Webdesign mit einem umfangreichen Wireframe-Prozess über Papier oder ein Programm wie Adobe Illustrator, um das Design zu entwerfen und dem Kunden zur Genehmigung vorzulegen, bevor es überhaupt online geht. Diese Methode funktioniert für einige und kann ein sehr effizienter Weg sein, insbesondere wenn Sie in einem Team sind und Ihr Design einem Entwickler zum Code übergeben. Aber als Divi auftauchte, änderte sich mein Prozess komplett. Ich tauche jetzt direkt in Divi ein, nachdem ich eine grundlegende Struktur und ein visuelles Konzept im Kopf und auf dem Papier habe.
  • Es funktioniert für meine Kunden – ich habe festgestellt, dass Kunden eine echte Live-Vorschau, die sie in einem Browser sehen können, viel mehr lieben als ein flaches Modell. Manchmal können der Fluss und das Gefühl einer Site in einem einseitigen Mock-up verloren gehen, während ein Kunde die Site live in einem Browser sieht, führt dies oft zu einem viel größeren „Wow-Faktor“. Sie können Hover Overs, Scroll-Effekte und den Fluss des Site-Designs sehen, was für einen guten ersten Eindruck und oft weniger Bearbeitungen und Überarbeitungen sorgt.
  • Es spart mir Zeit – ich kann Dinge mit CSS und meinen gespeicherten Layouts und Einstellungen in Divi so schnell ändern, dass es für mich sinnlos wäre, diese Überarbeitungen in Photoshop oder Illustrator vorzunehmen und dann in meinen Stylesheet- und Divi-Einstellungen zu duplizieren. Ich spare enorm viel Zeit bei Überarbeitungen und anfänglichem Design, indem ich Dinge live mache, indem ich inspect element direkt auf meiner Divi-Entwicklungsseite verwende. Ich kann auch häufig Änderungen und Überarbeitungen an Websites vornehmen, während ich mit Kunden telefoniere. Sie können wie ein echter Webdesigner-Rockstar aussehen, wenn ein Kunde Sie auffordert, ein paar Dinge zu ändern, und Sie haben dies während eines Telefonats oder in wenigen Minuten erledigt.

Auch hier ist dieser Designprozess das, was für ME als Ein-Mann-Shop funktioniert. Bei einem Team muss der Prozess für alle Beteiligten funktionieren. Aber die meisten freiberuflichen Webdesigner sind eine Mischung aus Designer/Entwickler. Machen Sie also jeden Prozess, der für Sie funktioniert, für Ihre Kunden funktioniert und Ihnen Zeit spart!

2) Verwenden der Divi-Bibliothek und Ihrer früheren Arbeiten

Eine meiner Lieblingsfunktionen von Divi ist die Möglichkeit, Ihre Layouts und Seitendesigns zu speichern. Diese Funktion ist bahnbrechend und kann Ihnen beim Entwerfen und Entwickeln mit Divi einiges an Zeit sparen. In einer kürzlich erschienenen DiviChat-Episode spricht das Panel davon, mehrere Vorlagen von Seitendesigns zu speichern und dann nur diejenigen zu löschen, die sie nicht auf einer neuen Website verwenden. Sprechen Sie über eine Möglichkeit, Zeit zu sparen! Wenn Sie eine Reihe von Seitenlayouts und Seitenvorlagen erstellen können und Sie nur Inhalte, Farben und Bilder importieren und ändern müssen, sparen Sie sich stundenlanges Design und Entwicklung.

Hier sind 3 schnelle Tipps, die ich zum Speichern von Divi-Bibliothekselementen und früheren Arbeiten anbiete:

  1. Speichern Sie Ihr CSS – Ich habe ein „Master-Stylesheet“ mit dem Großteil des CSS-Codes, den ich für bestimmte Module, Seitenabschnitte und Klassen geschrieben habe, die ich auf anderen Sites nachahmen möchte. Auf diese Weise kann ich es öffnen und jeden Code abrufen, den ich für das aktuelle Projekt verwenden möchte. Es hat Wunder gewirkt, um Zeit zu sparen, anstatt CSS-Zeilen immer wieder neu schreiben zu müssen.
  2. Erstellen von Divi-Bibliothekselementen – Das Speichern von Layouts als Bibliothekselemente kann eine großartige Möglichkeit sein, Ihre Arbeit in Seiten oder als vollständige Site zu speichern, die dupliziert und leicht mit Bildern und Farben geändert werden kann. Wenn Sie sich nicht sicher sind, wie Sie dies tun sollen, folgen Sie diesem Tutorial.
  3. Json-Dateien exportieren – Ich habe oft Clients, die auf eine Seite einer früheren Site verweisen. Anstatt diese von Grund auf neu erstellen zu müssen, exportiere ich diese Seite oft von der alten Site, importiere sie in meine neue Site und Passen Sie die Stile und Bilder entsprechend an! Wieder eine weitere großartige Möglichkeit, mit der Divi uns Zeit im Design- und Entwicklungsprozess spart. Weitere Details dazu hier, wenn Sie nicht vertraut sind.

3) Offenlegung Ihrer Website für den Kunden

Dies ist meiner Meinung nach einer meiner wichtigsten, aber übersehenen und unterschätzten Aspekte des Webdesigns. So viel hängt vom ersten Eindruck ab und davon, was der Kunde zunächst denkt, wenn er Ihr neues Design sieht. Wenn Sie ein Mockup oder Wireframe erstellen, ist der erste Eindruck natürlich etwas überwältigend, bis der Kunde online eine Live-Version sieht, die völlig verständlich ist und je nach Komplexität Ihres Prozesses vom Design bis zur Entwicklung funktionieren kann. Wie Sie in meinem obigen Prozess gesehen haben, bereite ich die Kopf- und Fußzeile vor und gestalte die Startseite vollständig zusammen mit normalerweise einer oder mehreren Unterseiten, je nach den Anforderungen des Projekts, und sende sie dann zur Überprüfung. Wie ich dem Kunden mein ursprüngliches Design schicke, hat sich in letzter Zeit jedoch mit großer Wirkung geändert.

Früher habe ich nur den Live-Entwicklungslink gesendet, damit der Kunde die Site selbst und in aller Ruhe ansehen konnte. Das funktionierte ziemlich gut, aber ich fand, dass die seltene Chance, dass ich persönlich oder über Skype eine Vorschau hatte, diese ersten Eindrücke noch besser wurden und warum? Ich glaube, es liegt daran, dass der Kunde meine Vision hörte, als er die Website sah, und es mir ermöglichte, ihn durch meine Ideen von Design, Farbe und Ästhetik zu führen, ohne dass er sich zuerst ein eigenes Urteil bilden musste.

Jetzt erstelle ich ein kurzes (normalerweise weniger als 5 Minuten) Vorschauvideo, in dem ich sie durch die Site führe! Dies wurde bisher mit überwältigend positivem Feedback aufgenommen. Ist es ein wenig zeitaufwändig, aber ich finde es lohnt sich, einen erstaunlichen ersten Eindruck von meinen Kunden zu bekommen.

Hier ist ein Screenshot, wie ich einem Kunden auf Basecamp eine neue Site vorstelle:

Ich nehme meine Walk-Through-Videos mit Screenflow für Mac auf. Ich lade das Video dann auf meinen Vimeo-Kanal hoch und mache daraus ein privates Video. Von dort aus sende ich, wie Sie im obigen Schnappschuss sehen können, diesen Videolink zusammen mit einer kurzen Beschreibung, einer Aufzählung, was als nächstes zu erwarten ist, und der tatsächlichen URL der Entwicklerseite, die der Client in seinem Browser sehen kann, an den Client nachdem sie das Video gesehen haben.

Hier sind ein paar meiner letzten Vorschauvideos, wenn Sie sehen möchten, wie ich den Kunden die neuen Websites vorstelle:

Website-Vorschauvideo 1

Website-Vorschauvideo 2

4) Umgang mit Revisionen und Bearbeitungen

Schließlich wird ein wesentlicher Teil Ihres Design- und Entwicklungsprozesses darin bestehen, wie Sie mit Kundenrevisionen und -änderungen umgehen. Wenn Sie schon seit längerem Websites entwerfen, wissen Sie, dass dieser Prozess zeitaufwändig sein kann. Persönliche Besprechungen, längere Anrufe und zufällige E-Mails mit kleinen Änderungen hier oder dort können zu massiven Zeitfressern im Bearbeitungs- und Überarbeitungsprozess führen.

Es gibt einige Möglichkeiten, dies zu bekämpfen. Ich versuche, alle meine Kunden dazu zu bringen, alle ihre Überarbeitungen (falls erforderlich pro Seite) in Basecamp zu veröffentlichen, wo ich eine Diskussion für Überarbeitungen erstelle. Ich stimme einem Telefonanruf oder einem persönlichen Treffen bei Bedarf zu, jedoch erst, nachdem die ersten Änderungen so gesendet wurden, wie ich sie zuerst erhalten möchte. Ich mache auch SEHR deutlich, dass ich keine Überarbeitungen nacheinander über mehrere Tage per E-Mail erhalten möchte. Ich sage meinen Kunden, wenn möglich, sie über ein paar Tage zu sammeln und sie alle auf einmal zu veröffentlichen, oder wie viele meiner Kunden es gerne tun, sie alle in einer .doc oder .pdf zu organisieren.

Zurück zum vorherigen Beitrag in dieser Serie und meinem Gespräch mit den Jungs von Artillery Media: Sie haben einen sehr rationalisierten Prozess für Überarbeitungen, bei dem sie von ihren Kunden verlangen, ihre Änderungen in einem Dokument auf Google Drive zu senden, damit sie die Änderungen dann vornehmen können alles auf einmal. Dies ist auch eine große Zeitersparnis. Der Trick besteht darin, den Bearbeitungs- und Überarbeitungsprozess für Sie so zeitsparend wie möglich zu gestalten. Und nur ein Ratschlag, jeder Kunde hat seine eigene Art, Dinge zu tun, also ist es Ihre Aufgabe, ihn dahingehend zu führen, wie Sie Überarbeitungen und Bearbeitungen wünschen

Abschließend

Nun, ich hoffe, diese Ideen und mein Design-/Entwicklungsprozess haben Sie ermutigt, Ihre eigenen zu erstellen, wenn Sie noch keinen standardisierten Prozess haben! Wenn Sie einige Prozesse haben, die für Sie gut funktionieren, können Sie uns dies gerne in den Kommentaren unten mitteilen!

Als nächstes: Wie man mehrere Divi-Webdesign-Projekte effektiv verwaltet

Wenn Sie mehrere Projekte am Laufen haben, ist es schwierig, alle zu verwalten und gleichzeitig kreativ zu bleiben, Fristen einzuhalten und die Erwartungen der Kunden zu erfüllen. In unserem letzten Beitrag in dieser Serie werden wir über einige Möglichkeiten sprechen, wie Sie alle Ihre Divi-Webdesign-Projekte effektiv verwalten können, damit Sie die Einarbeitung neuer Kunden, das Design, die Entwicklung und die Einhaltung der von Ihnen festgelegten Fristen in Einklang bringen können aus zu schlagen. Und das alles, während Sie kreativ und frisch bleiben. Bis dann!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!