Was sind die Schritte beim Entwerfen einer Website?

Aufruf an alle Webdesigner :)

Ich fange an, eine Website für ein kleines Unternehmen in meiner Heimatstadt zu erstellen, und es wird mein erstes richtiges Projekt sein. Ich habe in der Vergangenheit Websites erstellt, die ich in meiner Freizeit erstellt habe. Ich spreche fließend HTML und CSS. Ich habe die Anforderungen des Kunden und was er auf der Website usw. haben möchte. Ich bin nicht sicher, welche Schritte ich nach der Fertigstellung der Anforderungen befolgen soll. Ich habe im Internet gesucht und konnte keine relevanten Informationen zu meinen Fragen finden, da die Informationen veraltet sind.

Meine Fragen sind:

Was ist ein Webdesigner-Workflow im Jahr 2014? (Weil sich alles so schnell ändert) Erstelle ich Drahtmodelle der Site und entwerfe sie dann in Photoshop und codiere sie dann?

Ich möchte nur wissen, wie der "Design" -Prozess funktioniert und welche Schritte ich unternehmen muss, um die Website zu erstellen.

Danke im Voraus.

Entdeckung und Umfang

Setzen Sie sich mit dem Kunden zusammen, um die Ziele, den Zweck und die Bedürfnisse zu bestimmen. Sie sollten ein Zitat der gewünschten Site erstellt und auch die Bearbeitungszeit besprochen haben. Stellen Sie sicher, dass Sie alles Notwendige eingeschrieben haben, was Sie nicht bereitstellen können. Sie müssen herausfinden, wie die Site strukturiert sein wird. Wie reaktionsfähig, nur für Tablets und Telefone, nur für Desktops, nur für Desktops und Tablets. Sie müssen herausfinden, ob das Design ein mehrphasiges Designziel ist, z. B. dass der Client später eine Desktop-Version und eine vollständige mobile App veröffentlichen möchte.

Inhaltszuordnung

Hoffentlich haben Sie alle Inhalte erhalten, die für die Website gewünscht werden. Sie sollten die Site und ihre Funktionalität zuordnen. Entscheiden Sie, wie die Skalierbarkeit für zukünftige Änderungen ist, und entscheiden Sie, wie der Code für ein CMS oder eine App strukturiert werden soll.

Beispiel:

Attrappe, Lehrmodell, Simulation

Nachdem Sie Ihren "Baum" oder Ihre "Karte" mit Zustimmung des Kunden fertiggestellt haben, würde ich an einer Handskizze oder einem Modellierungswerkzeug arbeiten. Es gibt viele Fragen zu diesem Thema, wenn Sie oben rechts suchen

Beispiel:

Stil Fliese

Das Entwerfen in Photoshop für Webdesign ist dem heutigen Zeitalter nicht mehr gewachsen. Ich kenne nicht viele Leute, die immer noch Photoshop verwenden, weil Sie so viel Zeit benötigen, um eine schicke Schaltfläche zu erstellen, die Sie auch im Browser programmiert haben könnten. Wenn ich eine Anwendung für eine spezielle Anforderung verwenden muss, stelle ich sie in Illustrator oder InDesign bereit. Ich würde empfehlen, zu migrieren, um eine Stilkachel wie die folgenden zu entwerfen:

Mit dem Ziel der Kachel übergeben Sie einem Kunden kein Design und setzen sich in die Ecke von "Das sieht nicht so aus, wie das Design, das Sie mir gegeben haben". Wenn Sie eine Website planen, gibt es auch keinen Grund, die Zeit in Photoshop für die Reaktionszeit zu verwenden, da Sie viel Zeit für das Entwerfen bestimmter Geräte usw. aufwenden müssen Betrachten Sie Illustrator, wie bereits erwähnt, für seine SVG-Datei und die Möglichkeit, Elemente für Ihre Site im Vergleich zu Photoshop zu exportieren. In gewissem Maße könnten Sie sogar InDesign zum Formatieren des Inhalts verwenden, aber ich würde Photoshop nur zur Bildbearbeitung verwenden, und wenn ich das tun würde, würde ich wahrscheinlich mit ImageMagick rollen. Ich nehme die Stilkachel weiter als andere und codiere sie in eine einzelne Seite, damit ich eine vorläufige Aufgabe meines Meisters erledigt habe.css Datei.

Wireframe

Ich bevorzuge es, das Design im Browser bereitzustellen, wenn Sie es nicht bemerkt haben. Heutzutage kann ich Illustrator für eine Skizze der Site oder ein Modell der Site verwenden, aber ich setze normalerweise eine Standardvorlagendatei .cssmit nicht mehr als 6 Farben in einer Graustufe ein und codiere alles für die Struktur der Site, da die meisten Leute dies nicht können Holen Sie sich ein Designverständnis und möchten Sie etwas zum Spielen haben. Ich mache das manchmal in PHP, da es einfacher ist, es für ein CMS bereitzustellen. Anschließend entwickle ich eine einfache Unterdomäne mit den vom Kunden bereitgestellten Schriftarten in Schwarzweiß, sodass die gesamte Funktionalität der Site vorhanden ist und sie diese durchlaufen können. Da ich nicht die ganze Zeit damit verbracht habe, alle Inhalte oder Farben hinzuzufügen (weil ich einen Dummy- Textverweis verwende : "Alternative zu Lorem Ipsum (Dummy-Text) für Websites") Ich kann vorhandene Änderungen leicht ändern, wenn ihnen ein bestimmtes Element auf der Basis eines Geräts nicht gefällt.

Kolorieren und Inhalt

Sobald der Client die Struktur der Site und die Funktionalität abgemeldet hat, schreibe ich den Rest des CSS auf und füge die angeforderten Animationen oder JavaScript-Besonderheiten hinzu. Da ich die Style-Kachel genehmigt habe und wenn ich sie richtig entwickelt habe, kann ich das CSS einfach kopieren und einstellen.

Debug, Debug, Debug

Der letzte Schritt vor der Client-Abmeldung ist das Debuggen. Stellen Sie sicher, dass mein Code fehlerfrei ist. Wenn alles in Ordnung ist, sollte ich eine reibungslose Veröffentlichung haben. Dieser Schritt umfasst auch das Serving von Tests und Lasttests, sofern dies von Ihnen angeboten und bewertet wurde. Persönlich bin ich der festen Überzeugung, dass jeder Designer wissen sollte, wofür er entwickelt, so wie Sie es hoffentlich tun würden, wenn es um ein Druckdesign geht. Wenn sich der Kunde keinen echten Hosting-Anbieter leisten kann, kann dies die Leistung der Website einschränken und alles, was er sagt, ist Ihre Schuld und Sie haben etwas falsch gemacht.

Ausbildung

Ich biete in der Regel in meinem Brief / Quote-Training auf CMS-Sites. Einige Benutzer haben keine Ahnung, was sie tun. Ich biete einen Nachmittag mit einer Stunde mehr Zeit zum Auffüllen an, um sicherzugehen, dass alles durchgesehen wird, oder um sicherzustellen, dass sie mein Design optimal nutzen.

Einige andere Themen, die hilfreich sein können, da Sie eine grundlegende Frage stellen:

• Was ist der Unterschied zwischen Wireframes und Mockups?
• Wie präsentiert man einem Kunden Webdesign-Modelle?
• Was sind einige gute "Mock-up" -Praktiken im Webdesign?

Ich bin auch ein Webdesigner, der gerade auf dem Gebiet angefangen hat. Ich habe aber jetzt ein paar Projekte gemacht. Mein Workflow sieht für mich so aus:

1. Erstes Design- und Entwicklungstreffen In
   diesem Fall sammle ich alle relevanten Informationen, einschließlich des erwarteten Fertigstellungsdatums, erstelle eine Liste der von meinem Kunden benötigten Elemente usw.
   
2. PhotoShop-Modelle
   Zur Zeit finde ich ein oder zwei oder drei Designs, die für meinen Kunden geeignet sind, und erstelle in Photoshop Modelle, indem ich deren Branding, Farben, Stile usw. verwende. Ich sende diese über und diskutiere, was an jedem geändert / beibehalten werden soll Lassen Sie dann den Kunden entscheiden, welches Design ihm am besten gefällt.
   HINWEIS: Wenn Sie WordPress verwenden, um darauf aufzubauen, können Sie zu http://themeforest.com gehenund schau dir jede Menge Themen an. Von dort aus können Sie Screenshots machen und Ihre Modelle erstellen. Anschließend können Sie eine Live-Demo bereitstellen (natürlich ohne die Anpassungen des Kunden). Wenn Ihr Kunde eines dieser Modelle mag, kaufen Sie das Thema und können es nach Bedarf ändern. Das ist es, was ich tue. Ich verwende niemals ein Thema (oder irgendetwas anderes), ohne eine angemessene Gutschrift / Zahlung / etc. an den ursprünglichen Schöpfer. :)
   
3. Entwicklung
   Dann beginne ich endlich mit der eigentlichen Entwicklung der Site in einer Entwicklungsumgebung (NICHT die Live-Website des Kunden, sondern, wenn möglich, eine Unterdomäne - IE dev.clienturl.com). Ich sende meinem Kunden jedes Mal Updates, wenn ich das Gefühl habe, dass eine Seite geschlossen wird Wenn es Probleme gibt, können wir diese sofort beheben.
4. IMMER FOLGEN
   Auch nachdem die Website Ihres Kunden online gegangen ist und er zufrieden zu sein scheint und keine weiteren Änderungen angefordert hat, sollten Sie nachverfolgen. Stellen Sie einfach sicher, dass alles wie erwartet funktioniert. Ich empfehle außerdem, für jeden Kunden eine kleine Umfrage zu verfassen, die beendet werden soll, sobald die Website für ungefähr eine Woche online ist. Sie können Kommentare von hier als Testimonials auf Ihrer Website verwenden.

Wenn Sie Hilfe benötigen, kontaktieren Sie mich über meine Website. Ich habe jede Menge Ressourcen, die ich für Aufträge, Umfragen nach der Produktion, erste Fragebögen usw. mit Ihnen teilen kann. Http://anchorsawaydesigns.com/

Versuchen Sie von Anfang an, so viele Informationen wie möglich zu erhalten, und verfahren Sie dann wie folgt. Versuchen Sie, Ihren Kunden so gut wie möglich auf dem Laufenden zu halten, da Sie nicht isoliert etwas entwickeln möchten, um später festzustellen, dass es seinen Erwartungen nicht entspricht. Wenn Sie in ein gutes Drahtgitter-Tool (ich verwende Balsamiq) investieren, ist die Hälfte der Arbeit für Sie erledigt.

1. Erfassung von Anforderungen
2. Wireframing
3. Design-Modelle
4. Design fertiggestellt
5. Entwicklung
6. Hosting

Viel Glück.

Hallo Kumpel, es ist schön, dass du ein neues Projekt startest.

Schritte für Ihren Bedarf:

1. Entscheide zuerst, welche Technologie du für dein Projekt verwenden möchtest. Ich meine Scrollen einer Seite, mehrere Seiten usw.

2. Bereiten Sie dann entsprechend eine Skizze für Ihr Layout und Ihren Workflow vor.

3. Beginnen Sie nun mit dem Entwerfen Ihres Layouts in dem Tool, das Sie mit Photoshop verwenden möchten, aber Sie können Ihr gewünschtes Layout verwenden.

4. Danach ist es gut, dass Sie dem Kunden Ihr Layout für Änderungen anzeigen, d. H. Farbe, Schriftarten usw., damit Sie es nicht zu Kopfschmerzen bei HTML machen können.

5. Jetzt nach Bestätigung der Kunden. Es ist Zeit, mit dem Programmieren mit HTML und CSS zu beginnen.

6. Danach ist es an der Zeit, es dem Entwickler zur weiteren Sprachcodierung zu übergeben, d. H. PHP, .Net usw.

Genießen............

Um Ihren Entwicklungsprozess zu rationalisieren , wird in der Webbranche das Design erstellt. Bevor das endgültige Design zur Weiterentwicklung oder zum Testen vorgelegt wird, sind einige weitere Zwischenschritte erforderlich:

Schritt 1: Inspiration bekommen:

Wenn Sie kontinuierlich beobachten, was andere Designer oder Websites für ihre Drahtmodelle tun, werden Sie langsam ein Bild davon bekommen, wie ein Drahtmodell dabei hilft, Informationen für den Bildschirm zu organisieren.

Und dafür können Sie das Wireframing-Tool "Wirify" verwenden. Fügen Sie einfach den großen Link zu Ihrem Lesezeichen hinzu und rufen Sie eine beliebige Website auf. Klicken Sie auf das Lesezeichen. Die Website wird zu einem Wireframe.

Schritt 2: Entwerfen Sie Ihren Prozess:

Verschiedene Designer nähern sich Wireframing und dessen Übersetzung in Visuals oder Code auf unterschiedliche Weise an.

Hier ist es nicht nur Designer, den Weg zu wählen, dem gefolgt werden soll, manchmal bevorzugen Kunden es, direkt Modelle zu erstellen, und einige bevorzugen systematischer.

Skizze => Drahtmodell => Modell => Code

Schritt 3: Skizzieren:

Nun, wenn Sie inspiriert sind, einige grobe Ideen und eine Planung des Ansatzes zu haben, ist es immer gut, mit dem Skizzieren zu beginnen, egal wie gut Sie Ihre Maus / Ihren Stift steuern oder was auch immer Sie verwenden, sie können Papier und Bleistift nicht übertreffen Einfachheit.

Handskizzen auf Papier sind immer ein guter Ausgangspunkt für jeden Designer. Es bietet eine schnelle und einfache Möglichkeit, sich zu konzentrieren und zu organisieren. Wenn Sie beim Skizzieren sehr präzise sind, können Sie dies sogar als endgültiges Drahtmodell verwenden.

Schritt 4: Wireframing:

Das Erstellen eines Drahtgitters ist einer der ersten Schritte, die Sie vor dem Entwerfen ausführen sollten.

Ein Wireframe hilft Ihnen bei der Organisation und Vereinfachung der Elemente und Inhalte einer Website und ist ein wesentliches Werkzeug im Entwicklungsprozess.

Ein Drahtmodell ist im Grunde eine visuelle Darstellung des Inhaltslayouts in einem Entwurf .

Wie das Fundament eines Gebäudes muss es von Grund auf fest sein, bevor Sie entscheiden, ob Sie es mit einem teuren Anstrich versehen möchten.

Wählen Sie Ihre Werkzeuge

Hier ist Mashables Liste von 10 kostenlosen Wireframing-Tools für Designer

Einrichten eines Rasters

Gitter sind sehr wichtig, um ein symmetrisches und paralleles Design zu erreichen.

Wenn Sie sich eine gut gestaltete Website ansehen, werden Sie feststellen, dass der Inhalt an einem bestimmten Punkt im Hauptteil beginnt und an einem endet. Diese werden mithilfe von Rastern verwaltet.

Layout mit Boxen festlegen

Definieren Sie die Informationshierarchie mit Typografie

Was beim Wireframing zu vermeiden ist:

• Auf der Seite passiert zu viel.
• Betonung auf Farbe und Design
• Zu viele Details

Durch das Erstellen eines Drahtmodells haben Kunde, Entwickler und Designer die Möglichkeit, die Struktur der Website kritisch zu hinterfragen, und können frühzeitig und problemlos Änderungen vornehmen.

Wireframing bietet die folgenden Hauptvorteile:

Schritt 5: Mockups / Visual:

Jetzt kann final Wireframe in final Mockups oder Visual konvertiert werden:

Einige gängige Tools für Mockuos sind Adobe Photoshop, Corel Draw und sehr neues, aber bereits populäres Sketch, etc.

Informationshierarchie

Möglicherweise müssen Sie überlegen, was hervorgehoben werden soll und welche Nebeninformationen angezeigt werden sollen. Außerdem müssen Sie das Farbschema, die Neupositionierung und die Typografie berücksichtigen.

Typografie

Wählen Sie eine optisch ansprechende und lesbare Typografie für die Website mit der richtigen Kombination von Alternativen. Schriftgröße, Schriftstärke und Farben spielen eine entscheidende Rolle für die Lesbarkeit.

Farbschemata

Ein Farbschema, das Markenidentität und psychologische Farben wie Rot für Gefahr, Grün für Erfolg usw. darstellt.

Schritt 6: Prototypen :

Ein Prototyp ist ein frühes Beispiel, Modell oder Release eines Produkts, das zum Testen eines Konzepts oder Prozesses oder zum Replizieren oder Lernen eines Objekts erstellt wurde.

Wireframes übernehmen die Struktur, Mockups die Visualisierung und Prototypen die Benutzerfreundlichkeit (in Web- / App-Produkten).

Ein Prototypprodukt wird hergestellt und dann wird dieses getestet und POC (Prof of Concept) wird durchgeführt.

Link zum Originalartikel mit Bildern und anderen Links