Inhalt

• Schritte
• , etc.)

Wenn Sie eine Website entwerfen und erstellen möchten, ist dies viel einfacher, wenn Sie sie zuerst planen. In der Planungsphase können Entwickler und Kunde zusammenarbeiten, bis sie ein Format und Layout gefunden haben, das ihren Anforderungen entspricht. Der Planungsprozess beeinflusst die Wahl des Website-Stils und ist zweifellos der wichtigste Teil des Webdesigns (hauptsächlich für Unternehmen).

Schritte

Teil 1 von 4: Erstellen der Struktur

1. 

   Bestimmen Sie die Funktionalität der Website. Wenn Sie eine Website für sich selbst erstellen, kennen Sie wahrscheinlich bereits die Antwort darauf. Wenn Sie eine Website für eine andere Person, ein anderes Unternehmen oder eine andere Organisation erstellen, müssen Sie herausfinden, was der Kunde von der Website und ihrer Funktionalität erwartet. Was auch immer Sie hier entscheiden, wirkt sich auf das Endprodukt aus.
   • Benötige ich eine Ladenfront? Benötige ich Benutzerkommentare? Werden sie in der Lage sein, Konten zu erstellen? Ist die Site artikelorientiert? Die Bilder? All diese und andere Fragen helfen bei der Gestaltung und Struktur der Website.
   • Dies kann insbesondere für große Unternehmen mit mehreren am Projekt beteiligten Personen ein anstrengender Prozess sein.

2. 

   
   
   Erstellen Sie ein Sitemap-Diagramm. Es sieht aus wie ein Flussdiagramm und zeigt, wie Benutzer von Seite zu Seite navigieren. Sie brauchen an dieser Stelle nicht einmal Seiten, nur einen allgemeinen Fluss von Konzepten. Sie können das Diagramm mit einem Computerprogramm erstellen oder von Hand auf Papier zeichnen. Verwenden Sie dieses Sitemap-Diagramm, um Ihre Ansichten zur Hierarchie und Konnektivität der Websiteseiten anzuzeigen.

3. 

   
   
   Versuche Karten zu benutzen. Eine beliebte Methode für Gruppen ist die Verwendung eines Kartenstapels, um den idealen Ansatz jeder Person zu ermitteln. Nehmen Sie einen Stapel Karten (die für die Buchhaltung) und schreiben Sie den Grundinhalt einer einzelnen Seite auf jede Karte. Bitten Sie Ihr Team, die Karten so zu organisieren, wie sie am nützlichsten sind. Diese Strategie eignet sich hervorragend für Situationen, in denen Sie beim Erstellen einer Website mit anderen zusammenarbeiten.

4. 

   
   
   Verwenden Sie Papier und ein Schwarzes Brett oder ein Whiteboard. Dies ist die ursprüngliche kostengünstige Planungsmethode, mit der Sie Inhalte löschen oder verschieben und alles schnell neu organisieren können. Zeichnen Sie das Design auf Teile und Papier und verbinden Sie es mit einer Linie oder zeichnen Sie den Umriss auf der weißen Tafel. Ideal für Brainstorming-Sitzungen.

5. 

   Verwenden Sie ein Inhaltsinventar. Diese Option richtet sich eher an Neugestaltungen als an neue Standorte. Platzieren Sie jeden Inhalt oder jede Seite in einer Tabelle. Nehmen Sie den Zweck des anderen zur Kenntnis und verwenden Sie diese Liste, um zu bestimmen, was geht und was bleibt. Dies hilft, den Überschuss zu reduzieren und den Redesign-Prozess zu vereinfachen.

Teil 2 von 4: Erstellen eines HTML-Drahtmodells

1. 

   Erstellen Sie ein Drahtmodell, um die Hierarchie zu festigen. Ein HTML-Drahtmodell ist ein Grundgerüst Ihrer zukünftigen Site und verwendet nur die grundlegendsten Tags und Blöcke, um Inhalte darzustellen. Er beantwortet die Frage "Was geht auf jedem Bildschirm und wo?" Formatierung und Stil werden in einem Drahtmodell vollständig ignoriert.
   • Mit dem Drahtmodell können Sie die Struktur und den Fluss des Inhalts anzeigen, bevor Sie eine Stilauswahl treffen.
   • HTML-Drahtmodelle sind nicht statisch wie PDFs oder Bilder und ermöglichen es Ihnen, Inhaltsblöcke schnell zu verschieben, um eine neue Struktur zu erstellen.
   • Ein Drahtmodell ist interaktiv, was sowohl für den Entwickler als auch für den Kunden von Vorteil ist. Da das Drahtmodell in einfachem HTML geschrieben ist, können Sie es dennoch durchsuchen und sich ein Bild davon machen, wie die Bewegung zwischen den Seiten funktioniert. Dies kann nicht durch ein konzeptionelles PDF ausgedrückt werden.

2. 

   Probieren Sie die Gray Box-Methode aus. Gruppieren Sie den Inhalt Ihrer Seite in grauen Feldern, wobei der wichtigste Inhalt oben steht. Die Blöcke sind in einer einzigen Spalte angeordnet, wobei der wichtigste Teil des Inhalts auf der Seite oben angezeigt wird. Wenn es sich bei der Seite beispielsweise um die Seite "Info" des Unternehmens handelt, können die Details nach oben verschoben werden, gefolgt von einer Liste des Teams, Kontaktinformationen usw.
   • Dies beinhaltet nicht die Kopf- und Fußzeile. Die grauen Kästchen sind lediglich eine visuelle Darstellung des Inhalts, der auf der Seite zu finden ist.

3. 

   Versuchen Sie es mit einem Drahtgitter-Erstellungsprogramm. Es gibt verschiedene Programme, die Sie beim Wireframing unterstützen können. Der Umfang der Programmierkenntnisse variiert von Programm zu Programm. Einige der beliebtesten sind:
   • Pattern Lab. Diese Website ist auf "Atomic Design" spezialisiert. Jeder Inhalt wird als "Molekül" betrachtet, das eine große Seite erstellt.
   • Jumpcharts. Dies ist eine Website-Planungswebsite und auch ein Wireframing-Dienst. Es erfordert ein kostenpflichtiges Abonnement, ermöglicht es Ihnen jedoch, schnell Drahtmodelle zu erstellen, ohne sich über den Code Gedanken machen zu müssen.
   • Wirefy. Dies ist ein weiteres "Atomic Design" -System. Die Tools sind für Entwickler kostenlos.

4. 

   Erfahren Sie, wie Sie einfaches HTML-Markup verwenden. Ein gutes Drahtmodell kann später problemlos in eine echte Website konvertiert werden. Sorgen Sie sich nicht um den Stil während des Wireframing-Prozesses. Verwenden Sie stattdessen ein Tag, das mit sehr geringem Aufwand leicht zu verstehen und auszutauschen ist.
   • Weniger ist mehr mit dem Drahtmodell. Das Ziel ist einfach, die Struktur aufzubauen. Das Aussehen kann später mit CSS und erweiterten Markierungen angepasst werden.

5. 

   Erstellen Sie für jede Seite Ihrer Website ein Drahtmodell. Es kann verlockend sein, einfach ein Drahtmodell zu erstellen und zu sagen: "Cool, ich kann es auf alle anderen Seiten anwenden und das war's." In der Tat wird dies eine generische und langweilige Website erzeugen. Nehmen Sie sich für jede Wireframe-Seite eine Auszeit und Sie werden bald feststellen, dass jede Seite ihre organisatorischen Anforderungen hat.

Teil 3 von 4: Inhalte erstellen

1. 

   Halten Sie einige Inhalte bereit, bevor Sie mit dem Erstellen Ihrer Website beginnen. Es ist viel einfacher zu sehen, wie die Website aussieht, wenn Sie echten Inhalt haben, anstatt nur Lesezeichen. Sie benötigen nicht viel Inhalt, aber in Modellen sieht es viel besser aus, wenn Sie einige Originaltextbilder haben.
   • Sie brauchen nicht unbedingt den Hauptteil eines Artikels, aber Sie sollten zumindest die Überschriften haben.

2. 

   Denken Sie daran, dass guter Inhalt mehr als Text ist. Das Internet ist viel mehr als einfache Texte auf Websites. Um sich in Ihrer Nische abzuheben, benötigen Sie verschiedene Arten von Inhalten, um Aufmerksamkeit zu erregen und Besucher anzulocken. Einige mögliche Inhalte, die Sie beachten sollten:
   • Bilder.
   • Audio.
   • Video.
   • Streams (Twitter).
   • Integration mit Facebook.
   • RSS.
   • Inhalts-Feeds.

3. 

   Zahlen Sie einen professionellen Fotografen. Wenn Sie Fotos in Ihre Website aufnehmen, sind Ihre ersten Eindrücke mit professionellen Fotos viel besser. Ein einzelnes gutes Foto ist viel besser als zwanzig schlechte Fotos.
   • Suchen Sie nach Absolventen der jüngsten Fotografie für günstigere Lösungen im Vergleich zu erfahreneren Fachleuten.

4. 

   Schreiben Sie hochwertige Artikel. Der auf Ihrer Seite geschriebene Inhalt bestimmt den größten Teil Ihres Webverkehrs. Obwohl Sie sich in diesem Entwurfsprozess nicht allzu viele Gedanken über das Erstellen von Inhalten machen müssen, schadet es nicht, darüber nachzudenken, da Sie regelmäßig Inhalte benötigen, sobald die Website online ist.
   • Neben dem Inhalt von Artikeln gibt es auch schriftliche Elemente, die Sie beim Erstellen der Website benötigen. Dies sind Kontaktinformationen, Firmennamen oder alles andere, was an verschiedenen Stellen auf der Website verwendet wird.

Teil 4 von 4: Das Konzept in eine Website verwandeln

1. 

   Stilisieren Sie die globalen Elemente. Dies sind die Dinge, die auf jeder Seite Ihrer Website angezeigt werden, z. B. Kopf-, Fuß- und Navigationsmenü. Erstellen Sie einen sehr einfachen Stil, damit Sie sehen können, wie alle Seiten aussehen. Dies ist sehr nützlich, wenn Sie den Layoutprozess aufrufen.
   • Sorgen Sie sich nicht zu sehr um die Details, sondern versuchen Sie, dem endgültigen Erscheinungsbild des Headers so nahe wie möglich zu kommen.

2. 

   Erstellen Sie ein Grundlayout. Bewegen Sie Ihre Drahtgitterobjekte, indem Sie sie aus einer Spalte herausnehmen und an der richtigen Stelle platzieren. Sie können beispielsweise den Navigationsblock auf die linke Seite der Seite und eine Liste der Überschriften nach rechts verschieben.
   • Experimentieren Sie mit dem Layout mit einigen weiteren Seiten, bevor Sie fortfahren. Lassen Sie andere es testen, um festzustellen, ob sie die Navigation organisch finden.

3. 

   Erstellen Sie ein Modell. Erstellen Sie mit einem Programm wie Photoshop ein Modell einiger Seiten Ihrer Website. Verwenden Sie das von Ihnen als Leitfaden definierte Layout. Sie können in einem Bildbearbeitungsprogramm viel schneller arbeiten und alles so lassen, wie Sie es möchten. Auf diese Weise können Sie Bilder als Referenz verwenden, wenn es um das Codieren geht.
   • Fügen Sie echte Inhalte in das Modell ein, damit alles in Harmonie ist.

4. 

   Ersetzen Sie die Blöcke durch Inhalt. Fügen Sie zunächst Ihre Inhalte und Elemente zur Seite hinzu. Mach dir noch keine Sorgen um den Stil: Platziere einfach alles an der richtigen Stelle. Auf diese Weise wissen Sie, ob Ihre Stiländerungen funktionieren.

5. 

   Erstellen Sie einen Styleguide. Dies ist der wesentliche Teil der Aufrechterhaltung einer zusammenhängenden Website, insbesondere für große Websites. Wenn die Website für ein Unternehmen bestimmt ist, das bereits eine visuelle Identität besitzt, muss sie in das Website-Design einbezogen werden. Dinge, die im Styleguide berücksichtigt werden sollten, sind:
   • Navigation.
   • Überschriften (

     ,

     , etc.)

   • Absätze.
   • Kursiv.
   • Fett gedruckt.
   • Links (aktiv, inaktiv, Mouseover).
   • Verwendung von Bildern.
   • Symbole.
   • Tasten.
   • Listen.

6. 

   Wenden Sie diesen Stil an. Sobald Sie sich für einen Stil und ein Design für Ihre Website entschieden haben, können Sie mit der Implementierung beginnen. CSS ist eine der einfachsten Möglichkeiten, Stil auf einer Seite zu implementieren.