Design-Tutorial: 5 Schritte für ein erfolgreiches Website-Design

Dieser Artikel führt Sie durch 5 wesentliche Schritte zum Entwerfen einer Website, und der Website-Designprozess wird Ihnen helfen, ein produktiverer und erfolgreicherer Website-Designer zu werden.


Einer der wichtigsten Faktoren der heutigen Designbranche, insbesondere des freiberuflichen Designs, ist ein erfolgreicher Geschäftsablauf und die Möglichkeit, mit weniger Zeit mehr zu erreichen. Und um zeitsparend zu sein, müssen Sie sich die Zeit nehmen, Ihr Projekt zu planen, indem Sie es auf grundlegende Schritte herunterbrechen, um ein erfolgreiches Ergebnis zu erzielen. Auf diese Weise verbessern Sie die Produktivität.

„Produktivität ist nie ein Zufall. Es ist immer das Ergebnis eines Engagements für Exzellenz, intelligenter Planung und konzentrierter Bemühungen.“ ~ Paul J. Meyer

Jeder Designer hat seinen eigenen bevorzugten Designprozess. In diesem Artikel werde ich meinen vorgeschlagenen zeiteffizienten Design-Workflow erläutern, der für mich jedes Mal funktioniert. Dieser Artikel richtet sich eher an Neulinge in der Webdesign-Branche als an erfahrene Designer. Der Punkt des Artikels ist es, eine allgemeine 5-Schritte-Anleitung für ein erfolgreiches Website-Design bereitzustellen.

plan.jpg

Schritt 1: Kundenbedürfnisse

Bevor Sie mit Ihrem Plan beginnen, benötigen Sie so viele Informationen wie möglich von Ihrem Kunden. Je mehr Sie wissen, desto mehr Hin- und Her-E-Mails sparen Sie.

Hören Sie sich ihre Ideen an

Normalerweise sagen Ihnen die Kunden nicht, was sie wollen, es liegt an Ihnen, sie zu fragen. Sie wollen die Gewissheit, dass ihr Auftrag so erfüllt wird, wie sie es sich vorgestellt haben, aber es fällt ihnen schwer, zu erklären, wie sie ihre zukünftige Website sehen. Der beste Weg, dieses Problem zu überwinden, ist Kommunikation. Es ist wichtig, Ihre Website-Design-Kunden kennenzulernen, indem Sie Fragen stellen, die Sie über ihr Geschäft informieren. Sie möchten herausfinden, welche Stimmung sie anstreben, was sie mögen und was nicht.

cb.handshake-1024x628.jpg

Kundenquiz

Mein bevorzugter Ansatz, um mehr über meinen Kunden herauszufinden, ist das Ausfüllen eines Formulars. Listen Sie die wichtigsten Fragen auf, die Ihnen beim Start Ihres Projekts helfen werden. Was ist der Zweck dieser Website? Wer ist die Zielgruppe? Wer sind Ihre Konkurrenten? Welche Maßnahmen sollen die Besucher ergreifen? usw.. Das Formular sollte 10 Fragen nicht überschreiten, denn seien wir realistisch, nicht alle Kunden haben die Zeit oder die Geduld, 20 oder 30 Felder auszufüllen. Stellen Sie sicher, dass Sie dem Kunden Ihr Formular senden, bevor Sie mit der Ausarbeitung des Angebots beginnen, und nicht danach. Wenn Sie ein Beispiel sehen möchten, können Sie dies überprüfen bilden. Aus Gründen der Zugänglichkeit und Benutzerfreundlichkeit empfehle ich Ihnen, Ihr Formular auf einzurichten Google DriveFWurm. Nachdem der Kunde Ihr Formular ausgefüllt hat, können Sie Ihren Vorschlag senden und Ihre formelle Vereinbarung über Budget, Projektumfang, Zeitplan und Eigentümerschaft abschließen. Nach der Vertragsunterzeichnung geht es an die Arbeit.

Schritt 2: Recherche, Ideen & Skizze

Dieser Schritt ist immer der schwierigste. Als ich in der Branche anfing, stieg ich in Photoshop ein und begann mit dem Designen. Ich kann nicht genug betonen, wie falsch das ist. Beginnen Sie am besten mit einem Blatt Papier.

Beginnen Sie mit dem Skizzieren

Wenn Sie ein Designer sind und kein persönliches Notizbuch haben, fahren Sie besser zur nächsten Bibliothek. Das Aufschreiben Ihrer Notizen mit Stift und Papier ist der effizienteste Weg, wenn es um Brainstorming-Aktivitäten geht. Nehmen Sie sich etwas Zeit und beginnen Sie, jede Idee zu skizzieren, die Ihnen in den Sinn kommt. Sie müssen nicht zeichnen können. Sie können mit einem Kreis beginnen, dann werden Ihre Ideen natürlich fließen. Sie können auf dem Weg zur Arbeit in Ihrem Taxi sitzen und eine kreative Idee kann auftauchen. Schreib es auf.

Einfache-produktivitätstipps1.jpg

Stellen Sie Ihre Inspiration zusammen

Erstellen Sie einen Lesezeichenordner mit dem Namen des Projekts. Beginnen Sie mit der Recherche und speichern Sie dann jede Webseite, die Sie für relevant halten. Stellen Sie sicher, dass Sie keine exakten Elemente oder Ideen kopieren, da dies als Plagiat angesehen wird. Finden Sie Ihre am besten aussehenden Websites und Layouts basierend auf den Anforderungen des Kunden und suchen Sie nach anderen Websites im selben Geschäft. Schreibe auf, was dir an ihnen gefällt und was nicht. Layouts, Farben, Formen, Animationen.. Alles, was Ihnen Ideen und Inspiration für Ihren nächsten Schritt gibt.

Kennen Sie Ihre Konkurrenten

Sehen Sie sich die Websites Ihrer Mitbewerber genau an. Überprüfen Sie alle lokalen und internationalen Wettbewerber und lernen Sie von deren Inhalten. Was haben sie alle gemeinsam? Das sollten Sie in Ihre Website einbauen. Was fehlt ihnen? Das können Sie auf Ihrer Website verbessern.

Schritt 3: Drahtmodelle

Wireframes sind die Blaupause Ihrer Website. Es gibt Ihrer Website eine visuelle Struktur. Einige Designer neigen dazu, Designelemente in ihre Wireframes aufzunehmen. Dies sollte vollständig vermieden werden, da dies den Zweck der Drahtgitter ablenken würde, der darin besteht, anzugeben, wohin die Dinge gehen, und nicht, wie die Dinge aussehen. Wireframes sollten in Graustufen sein, um sich nur auf das Layout zu konzentrieren. Der erste Ansatz für ein Wireframe ist, ja, Stift und Papier. Listen Sie alle Ihre Elemente auf, die auf einer Webseite enthalten sein sollen. Als nächstes ordnen Sie sie auf der Seite an. Sie können dies auch auf Papier oder mit einem beliebigen Wireframe-Tool wie z proto.io, wireframe.cc oder sogar Photoshop. Es ist ein einfaches Layout, um mit der Arbeit zu beginnen. Hier ist ein schönes Beispiel für ein Wireframe:

Sie können das gesamte Projekt überprüfen hier. Grundsätzlich sollten Wireframes diese Hauptelemente definieren:

Elementplatzierung

Sie können Ihre Website nicht starten, ohne zu wissen, wohin die Dinge gehen. Hier entscheiden Sie das. Sie können sich sogar mit Ihrem Kunden treffen, um die beste Platzierung für Ihre Inhalte zu besprechen.

Informationshierarchie

Eine Sitemap mit einer Liste von Links kann für einen Kunden und sogar für den Designer überwältigend sein. Durch das Layout der Sitemap können Sie sehen, wie die Seiten zusammenpassen, sodass Sie Anpassungen vornehmen können, bevor Sie zu weit vorankommen.

Interaktivität

Beim Erstellen Ihrer Wireframes müssen Sie Ihre Fragen stellen: Wie werden diese Elemente miteinander interagieren? Wird der Besucher die Maßnahmen ergreifen, die ich von ihm erwarte? Wie bewegt sich der Besucher auf der Website? Hier spielt die Benutzererfahrung ihre Rolle. Sie haben also Ihr Layout erstellt. Als Nächstes erstellen Sie Ihre Schnittstelle.

Schritt 4: Fliesen gestalten

Style Tiles (auch bekannt als Style Guides) sind ein Designprodukt, das aus Schriftarten, Farben und Oberflächenelementen besteht, die die Essenz einer visuellen Marke für das Web vermitteln. Style Tiles basieren auf Gesprächen über visuelle Vorlieben mit dem Kunden. Die üblichen Elemente bestehen aus Logo, Typografie, Farben und Tonfall. Hier sind zwei kurze Beispiele für Stilkacheln.

Mehr hier. Deshalb sollten Sie Stilkacheln verwenden:

Vom Konzept bis zur Optik

Durch das Zusammenstellen Ihrer Stilkacheln werden die Stimmung, das Gefühl und der Ton Ihrer Website basierend auf dem, was Sie aus den Bedürfnissen Ihrer Kunden gelernt haben, übersetzt. Es wird Ihnen helfen, Entscheidungen darüber zu treffen, wie Sie die Elemente des Designs so verwenden, dass der Kunde es versteht.

Konsistenz bewahren

Mit einer Stilkachel können Sie ein Erscheinungsbild beibehalten, indem Sie eine Reihe von Regeln erstellen, denen das Design folgt. Der Prozess wird flexibel, leicht zu warten und konsistent.

Zeiteffizient

Durch das Entwerfen Ihrer Stilkacheln wird Ihrem Kunden die Oberfläche der Website angezeigt. Anstatt Ihre vollständig gestaltete Website in einem bestimmten Stil zusammenzustellen, können Sie jetzt Ihre Stilkacheln schnell und effizient mit den Anforderungen des Kunden aktualisieren. Nun, da Sie Ihre Haut entworfen haben. Als nächstes wenden Sie es an.

Schritt 5: Prototyp

Das Entwerfen einer Website ist dem Bauen eines Hauses sehr ähnlich; die grundrisse sind die drahtgitter und die visuelle innengestaltung sind ihre stilfliesen. Das Wunderbare an diesem Designprozess ist, wie einfach dieser Schritt geworden ist. Wenn Sie Ihre Drahtmodell- und Stilkacheln zusammenstellen, müssen Sie sie jetzt nur noch miteinander kombinieren. Hier sehen Sie, wie Ihre Website aussehen wird. Prototyping bedeutet, ein Modell der Website zu erstellen, bevor Sie die eigentliche Website erstellen. Einige Designer entwerfen ihre Prototypen gerne in Photoshop, während andere Photoshop lieber überspringen und zu einem Web-Framework wie z in Vision und UXpin.

Das Prototyping basiert auf 3 Schritten:

Prototyp

Implementieren Sie die Stilkacheln in das Layout, während Sie die Benutzererfahrung anpassen und die Benutzerfreundlichkeit des Designs sicherstellen.

Prüfen

Dieser Schritt ist wichtig, da er bewertet, ob die Website die Bedürfnisse und Erwartungen des Kunden erfüllt. Sie können Ihren Prototyp sogar mit Ihren Benutzern teilen, um Ihre Interaktivität und Benutzererfahrung zu testen.

Feinabstimmung

Hier verfeinern Sie alle Änderungen und Elemente, die verbessert werden müssen. Dieser Vorgang kann einige Zeit in Anspruch nehmen, je nachdem, wie viele Zyklen Sie und der Benutzer / Kunde benötigen, um ein endgültig ausgefeiltes Design zu erhalten.

Beenden

Jetzt sollten Sie also in der Lage sein, eine Vorstellung vom besten Prozess für ein erfolgreiches Website-Design zu bekommen. Indem Sie diesem Workflow folgen, können Sie Ihre Website jetzt im Voraus planen, Überraschungen vermeiden, die Ihren Workflow blockieren können, und vor allem zeitaufwändige Projekte vermeiden. Der nächste Schritt wird der Entwicklungsteil sein. Wenn Sie über die Fähigkeiten verfügen, Ihre Website zu entwickeln, sollte Ihnen der Prozess vertraut sein. Wenn nicht, dann sollte ein Webentwickler eingestellt werden. In meinen nächsten Artikeln werde ich Schritt-für-Schritt-Tutorials für jeden Abschnitt erklären, der in diesem Tutorial erwähnt wird. Bleib dran!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *