Was sind die Schritte bei der Gestaltung einer Website?

Entdeckung und Geltungsbereich

Setzen Sie sich mit dem Kunden zusammen, um Ziele, Zweck und Bedürfnisse zu bestimmen. Sie sollten ein Angebot für den beabsichtigten Standort erstellt und auch die Bearbeitungszeit besprochen haben. Stellen Sie sicher, dass Sie alles Notwendige eingetragen haben, das Sie nicht bereitstellen können. Sie müssen herausfinden, wie die Website strukturiert sein wird. Responsiv, nur Tablet und Telefon, nur Desktop, nur Desktop und Tablet. Sie müssen herausfinden, ob das Design ein mehrphasiges Designziel ist, z. B. wenn der Kunde eine Desktop-Version veröffentlichen und später eine vollständige mobile App haben möchte.

Inhaltszuordnung

Hoffentlich haben Sie alle gewünschten Inhalte für die Website erhalten. Sie sollten die Website und ihre Funktionalität abbilden. Entscheiden Sie, wie die Skalierbarkeit für zukünftige Änderungen ist, entscheiden Sie, wie der Code strukturiert sein kann, wenn es sich um ein CMS oder eine App handelt.

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 Mockup-Tool arbeiten. Es gibt eine große Menge an Fragen zu diesem Thema, wenn Sie oben rechts eine Suche durchführen

Beispiel:

Stilfliese

Das Entwerfen in Photoshop für Webdesign verfehlt den Zweck des heutigen Zeitalters. Ich kenne nicht viele Leute, die immer noch Photoshop verwenden, denn die Zeit, die Sie brauchen, um einen ausgefallenen Button zu erstellen, hätten Sie genauso viel Zeit aufwenden und im Browser codieren können. Wenn ich eine Anwendung auf besonderen Wunsch verwenden muss, stelle ich sie in Illustrator oder InDesign bereit. Ich würde raten, zu migrieren, um eine Stilkachel zu entwerfen, wie zum Beispiel:

Mit dem Zweck der Kachel geben Sie einem Kunden kein Design und stellen sich in die Ecke von "das sieht nicht aus wie das Design, das Sie mir gegeben haben". Wenn Sie eine Website planen, gibt es auch keinen Grund, die Zeit damit zu verbringen, sie in Photoshop für die Reaktionsfähigkeit zu gestalten, da Sie viel Zeit damit verbringen werden, für bestimmte Geräte usw. usw. zu entwerfen. Wenn Sie die gesamte Website entwerfen MÜSSEN, würde ich das tun Betrachten Sie Illustrator, wie bereits erwähnt, wegen seines SVG und der Fähigkeit, Elemente für Ihre Website im Vergleich zu Photoshop zu exportieren. Bis zu einem gewissen Grad könnten Sie sogar InDesign zum Formatieren des Inhalts verwenden, aber ich würde Photoshop nur zur Bildbearbeitung verwenden, und wenn ich das tun werde, würde ich wahrscheinlich mit ImageMagick rollen. Ich gehe mit der Stilkachel eine Ebene weiter als andere und codiere sie in eine einzelne Seite, sodass ich eine vorläufige Aufgabe meines Meisters ausgeknockt habe.cssDatei.

Drahtmodell

Ich ziehe es vor, das Designen im Browser bereitzustellen, wenn Sie es noch nicht bemerkt haben. Heutzutage kann ich Illustrator für eine Skizze der Site oder ein Mockup der Site verwenden, aber normalerweise stelle ich eine Standardvorlagendatei .cssmit nicht mehr als 6 Farben in Graustufen bereit und ich codiere alles für die Struktur der Site, da die meisten Leute dies nicht können ein Verständnis für Design bekommen und etwas zum Spielen wollen. Ich mache das manchmal in PHP, da es einfacher ist, es für ein CMS bereitzustellen. Ich werde dann eine einfache Subdomain mit den vom Kunden BEREITGESTELLTEN Schriftarten in Schwarzweiß entwickeln, damit die gesamte Funktionalität der Website vorhanden ist und sie durchlaufen können. Da ich nicht die Zeit damit verbracht habe, alle Inhalte oder Farben hinzuzufügen (weil ich Dummy-Text-Referenz verwende: „Alternative zu Lorem Ipsum (Dummy-Text) für Websites") Ich kann alle Änderungen, die vorhanden sind, leicht ändern, wenn ihnen ein bestimmtes Element basierend auf einem Gerät nicht gefällt.

Kolorieren und Inhalt

Sobald der Kunde die Struktur der Website und die Funktionalität genehmigt hat, schreibe ich den Rest des CSS und füge die angeforderten Animationen oder JavaScript-Besonderheiten hinzu. Da ich die Style Tile freigegeben habe und wenn ich sie richtig entwickelt habe kann ich das CSS einfach rüber kopieren und einstellen.

Debuggen, Debuggen, Debuggen

Der letzte Schritt vor der Abmeldung des Clients ist das Debuggen und Sicherstellen, dass mein Code solide und fehlerfrei ist. Wenn alles korrekt ist, sollte ich eine reibungslose Veröffentlichung haben. Dieser Schritt umfasst auch Serving-Tests und Belastungstests, sofern Sie diese bepreist und angeboten haben. Ich persönlich bin der festen Überzeugung, dass sich jeder Designer darüber im Klaren sein sollte, wofür er entwickelt, genauso wie Sie es hoffentlich tun würden, wenn es um ein Druckdesign geht. Wenn sich der Kunde keinen echten Hosting-Anbieter leisten kann, könnte dies die Leistung der Website einschränken, und er wird nur sagen, dass es Ihre Schuld ist und Sie etwas falsch gemacht haben.

Ausbildung

Normalerweise biete ich in meiner Briefing-/Angebotsschulung auf CMS-Websites. Einige Benutzer haben keine Ahnung, was sie tun, also werde ich für einen Nachmittag mit einer Stunde Überpolsterung für Nachfragen bieten, um sicherzustellen, dass sie alles durchgehen oder sicherstellen, dass sie mein Design optimal nutzen.

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

• Was ist der Unterschied zwischen Wireframes und Mockups?
• Wie präsentiere ich einem Kunden Webdesign-Modelle?
• Was sind einige gute „Mocking-Up“-Praktiken im Webdesign?

Ich bin auch ein Webdesigner, der gerade erst in diesem Bereich angefangen hat. Inzwischen habe ich aber ein paar Projekte gemacht. Bei mir sieht mein Workflow so aus:

1. Erstes Design- und Entwicklungstreffen
   Hier sammle ich alle relevanten Informationen, einschließlich des voraussichtlichen Fertigstellungsdatums, erstelle eine Liste der von meinem Kunden benötigten Artikel usw.
   
2. Photoshop-Mockups
   Zu diesem Zeitpunkt finde ich ein oder zwei oder drei Designs, die zu meinem Kunden passen, und erstelle Mockups in Photoshop mit ihrem Branding, ihren Farben, Stilen usw. Ich schicke sie rüber und bespreche, was an jedem geändert/beibehalten werden sollte , dann lassen Sie 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 sehen Sie sich tonnenweise Themen an. Von dort aus können Sie Screenshots machen und Ihre Mockups erstellen, dann können Sie auch eine Live-Demo bereitstellen (natürlich ohne die Anpassungen des Clients). Wenn Ihrem Kunden eines dieser Mockups gefällt, kaufen Sie das Design und können es nach Bedarf ändern. Dies ist, was ich neige dazu zu tun. Ich verwende niemals ein Thema (oder irgendetwas anderes in dieser Angelegenheit), ohne eine angemessene Anerkennung/Zahlung/etc. an den ursprünglichen Schöpfer. :)
   
3. Entwicklung
   Dann fange ich schließlich an, die Seite tatsächlich in einer Entwicklungsumgebung zu entwickeln (NICHT die Live-Website des Kunden, sondern eine Subdomain, wenn möglich - IE dev.clienturl.com). Ich sende Updates an meinen Kunden, jedes Mal, wenn ich das Gefühl habe, dass eine Seite geschlossen wird zu vervollständigen, auf diese Weise können wir Probleme sofort beheben.
4. IMMER NACHVERFOLGEN
   Auch wenn die Website Ihres Kunden online gegangen ist und er zufrieden zu sein scheint und keine weiteren Änderungen verlangt hat, sollten Sie ihn unbedingt nachverfolgen. Stellen Sie einfach sicher, dass alles so funktioniert, wie es seinen Erwartungen entspricht. Ich empfehle auch, eine kleine Umfrage für jeden Kunden zu schreiben, die abgeschlossen werden muss, sobald die Website etwa eine Woche lang online gegangen ist. Sie können Kommentare von hier als Testimonials auf Ihrer Website verwenden.

Wenn Sie bei irgendetwas Hilfe benötigen, kontaktieren Sie mich über meine Website. Ich habe Tonnen von Ressourcen, die ich mit Ihnen teilen kann, für Dinge wie Verträge, Umfragen nach der Produktion, erste Fragebögen usw. http://anchorsawaydesigns.com/

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

1. Erfassung von Anforderungen
2. Wireframing
3. Entwerfen Sie Modelle
4. Gestaltung abgeschlossen
5. Entwicklung
6. Gastgeber

Viel Glück.

Hallo Alter, es ist schön, dass du ein neues Projekt beginnst.

Schritte für Ihren Bedarf:

1. Zuerst entscheiden Sie, welche Technologie Sie für Ihr Projekt verwenden möchten, ich meine das Scrollen einer einzelnen Seite, mehrere Seiten usw.

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

3. Beginnen Sie jetzt mit der Gestaltung Ihres Layouts in dem Tool, das Sie mögen, wie ich es mit Photoshop mache, aber Sie können Ihre Vorlieben verwenden.

4. Danach ist es gut, dass Sie dem Kunden Ihr Layout für alle Änderungen zeigen, dh. Farbe, Schriftarten usw., damit Sie sich bei HTML keine Kopfschmerzen machen können.

5. Jetzt, nach Bestätigung der Kunden. Es ist an der Zeit, mit HTML und CSS zu programmieren.

6. Danach ist es an der Zeit, es an den Entwickler für die weitere Sprachbasiscodierung zu übergeben, dh. PHP, .Net usw.

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

Um Ihren Entwicklungsprozess in der Webbranche zu rationalisieren , ist das Design abgeschlossen, und bevor das endgültige Design zur weiteren Entwicklung oder zum Testen präsentiert wird, sind einige andere Zwischenschritte erforderlich:

Schritt 1: Inspiration holen:

Wenn Sie ständig beobachten, was andere Designer oder Websites für ihre Wireframes tun, werden Sie sich langsam ein Bild davon machen, wie ein Wireframe 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 gelangen Sie zu einer beliebigen Website. Klicken Sie auf das Lesezeichen. Sie werden sehen, wie sich die Website in ein Drahtmodell verwandelt.

Schritt 2: Gestalten Sie Ihren Prozess:

Verschiedene Designer gehen auf unterschiedliche Weise mit Wireframing und seiner Übersetzung in Visuals oder Code um.

Hier wählt nicht nur der Designer den Weg, dem er folgen möchte, manchmal ziehen es die Kunden vor, direkt Mockups zu erstellen, und einige bevorzugen es systematischer,

Skizze => Wireframe => Mockup => Code

Schritt 3: Skizzieren:

Wenn Sie jetzt inspiriert sind, einige grobe Ideen und eine Planung des Ansatzes haben, ist es immer gut, mit dem Skizzieren zu beginnen, egal wie gut Sie Ihre Maus / Ihren Stift oder was auch immer Sie verwenden, steuern können, sie können Papier und Bleistift nicht schlagen 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 genau sind, können Sie dies sogar als endgültiges Drahtmodell verwenden.

Schritt 4: Wireframing:

Das Erstellen eines Drahtmodells ist einer der ersten Schritte, die Sie vor dem Entwerfen unternehmen sollten.

Ein Wireframe hilft Ihnen , die Elemente und Inhalte innerhalb einer Website zu organisieren und zu vereinfachen, und ist ein wesentliches Werkzeug im Entwicklungsprozess.

Ein Wireframe ist im Grunde eine visuelle Darstellung des Inhaltslayouts in einem Design .

Wie das Fundament eines Gebäudes muss es von Grund auf stabil sein, bevor Sie sich für einen teuren Anstrich entscheiden.

Wählen Sie Ihre Werkzeuge

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

Einstellen eines Rasters

Gitter sind sehr notwendig, 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 durch die Verwendung von Rastern verwaltet.

Layout mit Boxen bestimmen

Definieren Sie die Informationshierarchie mit Typografie

Was Sie beim Wireframing vermeiden sollten:

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

Das Erstellen eines Wireframes gibt dem Kunden, Entwickler und Designer die Möglichkeit, einen kritischen Blick auf die Struktur der Website zu werfen, und ermöglicht es ihnen, frühzeitig Änderungen vorzunehmen.

Wireframing bringt die folgenden wesentlichen Vorteile: