Der praktische Leitfaden für den Web-Design-Workflow
Als Webdesigner, der Teil eines größeren Webentwicklungsteams ist, ist es üblich, dass Sie viele Aufgaben gleichzeitig bewältigen müssen.
Nachdem Sie erste Entwürfe für Ihren Kunden erstellt haben und nun auf dieses erste Feedback warten, sind Sie wahrscheinlich ziemlich begeistert, wie Ihre Arbeit vom Kunden wahrgenommen wird. Mit so vielen Dingen, die in einem strengen Zeitrahmen zu überwachen sind, ist es leicht, von der Komplexität des Projekts überwältigt zu werden. Beim Entwerfen einer Website oder App sind viele Schritte erforderlich. Diese Schritte variieren leicht von Person zu Person, aber der grundlegende Workflow bleibt derselbe.
Mit einem guten Workflow-Setup und mit ein paar Tools und Software halten Sie den Ball am Laufen und vermeiden lange Feedback-Zyklen.
Hier finden Sie einen praktischen Leitfaden für einen Design-Workflow, mit dem Sie die Produktivität Ihres Teams steigern können.
Vorbereitungsphase: Erwartungen managen
Unabhängig davon, ob Sie lediglich eine bestehende Website pflegen oder eine neue Website von Grund auf neu gestalten, müssen sowohl Sie als auch Ihr Kunde die Erwartungen des jeweils anderen erfüllen.
Während Ihre Hauptaufgabe darin besteht, die Anforderungen des Projekts im Detail zu verstehen, liegt es in der Verantwortung des Kunden zu verstehen, wie sich jede getroffene Entscheidung mit Ihrer Hilfe auf den Umfang und das Budget des Projekts auswirkt .
Informieren Sie Ihren Kunden über die erforderliche Technologie, das erforderliche Budget und den Zeitrahmen, der für die Fertigstellung des Projekts erforderlich ist. Wenn Sie Ihr Projekt auf eine organisierte Weise angehen, sparen Sie Zeit, Aufwand und Budget.
Phase 1: Definieren von Websitezielen
Dies ist wahrscheinlich die wichtigste Phase eines jeden Designprojekts, wenn Sie die Ziele definieren, die Gesamtstruktur festlegen, über den Inhalt entscheiden und Rollen und die verschiedenen Ergebnisse während des gesamten Projekts zuweisen. Durch die richtige Planung von Anfang an ersparen Sie sich später viel Kummer.
Hier arbeiten Sie mit dem Kunden zusammen, um den Zeitplan, das Budget, den Zeitplan, die technischen Anforderungen, den visuellen Stil und die Inhaltsstruktur für die Zielgruppe festzulegen.
Wenn Sie die Erwartungen erfüllen und mit Ihrem Entwurfsprojekt beginnen möchten, würde ich Ihnen empfehlen, ein schlankes und benutzerfreundliches Projektmanagement zu verwenden, um definierte Ziele, Budgets, Aufgaben und Zeitpläne zu verfolgen.
Trello
Trello ist ein bekanntes und einfach zu bedienendes Projektmanagement-Tool. Sie können verschiedene Boards für verschiedene Projekte erstellen. Mit Trello erhalten Sie einen schnellen Überblick über aktuelle Aufgaben und Ihren Rückstand.
Asana
Asana ist eine großartige Aufgabe und Task Tracker. Sie können sogar mit Kollegen und Kunden in Asana zusammenarbeiten, so dass Sie Ihr Projekt transparent und auf dem neuesten Stand halten können.
Basislager
Ein weiteres bekanntes und doch großartiges Projektmanagement-Tool ist Basislager . Ähnlich wie bei den oben genannten Tools ermöglicht es Ihnen und Ihrem Team, den Überblick über alle Projektleistungen zu behalten und den Überblick zu behalten.
Phase 2: Struktur der Website entwickeln und sich die Hände schmutzig machen
Die Seitenstruktur bildet das Rückgrat der Website. Es dient als Referenzhandbuch für das Team während der gesamten Projektdauer. Verwenden Sie Flussdiagramme, um den Fluss der Struktur anzuzeigen.
Sitemap: Das Erstellen einer Sitemap ist entscheidend für das Verständnis der Inhaltsorganisation. Es ist wichtig, die Sitemap nach jeder Änderung zu aktualisieren. Wenn Sie das nicht tun, werden die Dinge unordentlich.
Wireframe: Der Inhalt der Site muss repariert werden, bevor das Design und die Grafiken eingefügt werden.
Wireframes sind Low-Fidelity-Skizzen der Website oder der mobilen Anwendung. Wireframes werden verwendet, um Platzhalter für Inhalte zu erstellen, Prioritäten für Elemente auf der Seite festzulegen und Anforderungen zu dokumentieren. Dies wird in der nächsten Phase sehr wichtig.
Balsamiq
Balsamiq ist ein grafisches Wireframing-Tool, das Ihrem Designer hilft, viele Designs zu erstellen und dann die vorgefertigten Widgets in einem Drag-and-Drop-Editor anzuordnen, damit das Team Änderungen gleichzeitig anzeigen und vorschlagen kann.
Moqups
Moqups ist einfach zu bedienen, hat viele Drag & Drop-Funktionen und benötigt kein Browser-Plug-in für den Betrieb. Mit diesem Tool können Sie ganz einfach eine Design-Präsentation für Ihren Kunden erstellen.
Invision
Invision können Sie Arbeitsdesigns hochladen und Interaktionen mithilfe von Hotspots erstellen, genau wie bei jeder echten Anwendung. Eines seiner herausragenden Merkmale ist die Möglichkeit, anklickbare Designs per SMS an Ihr Telefon zu senden, was die Wichtigkeit unterstreicht, Ihre Designs selbst im richtigen Kontext testen zu können.
Notismus
Notismus ist eines der besten Tools, mit denen Kreativteams ihren Arbeitsprozess beschleunigen. Dies ist eine Design- und Video-Collaboration-Plattform. Es hilft kreativen Profis, ihr Projekt zu teilen und Feedback über Skizzen und Notizen zu erhalten. Notismus ermöglicht auch das Erstellen verschiedener Versionen eines Bildschirms. Indem Sie einfach zwischen verschiedenen Bildschirmen wechseln, können Sie die Entwicklung Ihres Projekts besser sehen.
Phase 3: Design und Produktion
Stellen Sie in dieser Phase sicher, dass der Designer mit dem Programmierer zusammenarbeitet, um die Implementierung kohärenter Designelemente sicherzustellen.
Nachdem der Kunde die Designentwürfe genehmigt hat, arbeiten der Designer und das Grafikteam am Aussehen und an der Atmosphäre der Website. Komprimierung, Transparenz, effiziente Verwendung von Farbe und Design verbinden sich zu einer effektiven Webgrafik.
Die Produktionsphase ist ein Punkt, an dem die eigentliche Website erstellt wird. Nachdem das Design und das Layout der Site abgeschlossen sind, geht die Site in den technischen Teil der Arbeit über. Hier werden Sie alle einzelnen grafischen Elemente aus dem Prototyp entnehmen und daraus die eigentliche, funktionale Seite erstellen.
Github
Dein Code wird sich einmal, zweimal und wahrscheinlich viel mehr ändern. Github ermöglicht es Ihnen, effizient mit verschiedenen Versionen Ihrer Website zu arbeiten. Das Tool glänzt wirklich, wenn Sie mit einem Team von Entwicklern zusammenarbeiten. Das ist Code-Collaboration von seiner besten Seite.
CodePen
Dieser ist schön. Es ist ein Online-Redakteur für all Ihre HTML-, CSS- und JS-Anforderungen. Es kombiniert sich leicht mit Github und ist natürlich kollaborativ. Die Idee besteht darin, Teile des Codes zu testen und eine geeignete Lösung zu finden, ohne den Rest des Codes zu verderben.
Phase 4: Testen, Feedback sammeln und Bugs beheben
Kein Projekt ist jemals wirklich ohne Fehler. Und obwohl Tests auch während des gesamten Entwicklungsprozesses durchgeführt werden, bleiben immer Bugs. Und wir reden nicht nur über Softwarefehler. Sogar ein Design kann fehlerhaft sein.
Also gerade jetzt ist es wichtig, wie verrückt zu testen. Eine frühzeitige Fehlerbehebung spart viel Zeit und Aufwand. Es ist entscheidend, dass alle Personen, die an der Erstellung der Website beteiligt sind, am Testen beteiligt sind. Testen sollte jedoch ein agiler Prozess sein. Sobald Sie die Website gestartet haben oder gerade dabei sind, sie zu starten, werden viele Nutzer damit beginnen, sie zu nutzen und Feedback zur Website geben.
Und obwohl Sie alle Anstrengungen unternommen haben, um die Seite zu testen, werden Sie ein paar Bugs verpasst haben oder neue erscheinen im Laufe der Zeit. Es ist wichtig, dass Sie so schnell wie möglich Informationen zu Fehlern und Problemen erhalten. Wenn Sie Ihre Benutzer dazu bringen können, diese Ihnen zu melden, sind Sie golden.
Usersnap
(Vollständige Offenlegung: Ich arbeite für Usersnap.) Wir haben gebaut Usersnap als visuelles Programm zur Fehlerverfolgung und -rückmeldung, das die Arbeit des Softwaretests erleichtert. Es ermöglicht Kunden, Website-Besuchern und Kollegen, Fehler, Änderungsanfragen oder einfach Feedback auf Ihrer Website zu melden. Auch für das manuelle Testen von Websites ist Usasnap eine sichere Sache, da es Ihren Test-Workflow durch einfach zu bedienende Tools beschleunigt.
Also, um zu wiederholen ...
Design-Projekte erfordern viele Menschen, um zusammenzuarbeiten. Ständiges Feedback ist einer der wichtigsten Aspekte bei der Bereitstellung eines Projekts, wie vom Kunden angefordert und innerhalb der angegebenen Zeitfenster. Mit all dem Durcheinander und der Tatsache, dass Websites jeden Tag komplexer werden, machen Online-Tools es einfach, die Arbeit aller Beteiligten abzuschließen und sofort Feedback von ihnen zu erhalten.
Die Integration dieser Tools in einen soliden Workflow hilft Ihnen wirklich dabei, sich in einem bereits wettbewerbsintensiven Umfeld zu behaupten.