Wie plane ich eine Website?

Wie Ihr Website-Stil aussieht
Es ist viel einfacher zu sehen, wie Ihr Website-Stil aussieht, wenn Sie Ihren tatsächlichen Inhalt anstelle von Platzhaltern verwenden.

Wenn Sie eine Website entwerfen und erstellen möchten, wird es Ihnen viel leichter fallen, sie zu planen. In der Planungsphase können Entwickler und Bauherr zusammenarbeiten, bis sie ein Format und Layout gefunden haben, das ihren Bedürfnissen entspricht. Der Planungsprozess beeinflusst die Stilauswahl der Website und ist wohl der wichtigste Aspekt des Webdesigns, insbesondere für Unternehmen.

Teil 1 von 4: Erstellen der zugrunde liegenden Struktur

  1. 1
    Bestimmen Sie die Funktionalität der Site. Wenn Sie die Site für sich selbst erstellen, kennen Sie wahrscheinlich bereits die Antwort darauf. Wenn Sie die Site für eine andere Person, Firma oder Organisation erstellen, müssen Sie herausfinden, was diese von der Site und ihrer Funktionalität erwartet. Alles, was Sie hier entscheiden, wirkt sich auf die endgültige Website aus.
    • Braucht es ein Schaufenster? Benötigen Sie Benutzerkommentare? Müssen Benutzer Konten erstellen? Ist es artikelorientiert? Imageorientiert? All diese Fragen und mehr werden dazu beitragen, das Design und die Struktur der Website zu beeinflussen.
    • Dies kann insbesondere bei größeren Unternehmen mit vielen Projektbeteiligten ein langwieriger Prozess sein.
  2. 2
    Erstellen Sie ein Sitemap-Diagramm. Ein Sitemap-Diagramm ist wie ein Flussdiagramm und zeigt, wie Benutzer von einer Seite zur nächsten wechseln. Sie brauchen an dieser Stelle nicht einmal Seiten, sondern nur einen allgemeinen Fluss von Konzepten. Sie können ein Computerprogramm verwenden, um ein Diagramm zu erstellen, oder es selbst auf einem Blatt Papier skizzieren. Verwenden Sie das Sitemap-Diagramm, um zu zeigen, wie Sie sich die Webseitenhierarchie und Konnektivität vorstellen.
  3. 3
    Versuchen Sie es mit einer Kartensortierung. Eine beliebte Methode für eine Gruppe besteht darin, einen Kartenstapel zu verwenden, um den idealen Ansatz für alle herauszufinden. Nehmen Sie einen Stapel Notizkarten und schreiben Sie den grundlegenden Inhalt einer einzelnen Seite auf jede davon. Lassen Sie Ihr Team die Karten so organisieren, wie es es für am nützlichsten hält. Dies ist am besten für Situationen geeignet, in denen Sie mit anderen zusammenarbeiten, um eine Site zu erstellen.
  4. 4
    Verwenden Sie Papier und ein Schwarzes Brett oder ein Whiteboard. Dies ist die ursprüngliche Low-Budget-Planungsmethode, mit der Sie Inhalte schnell löschen oder verschieben und umleiten können. Zeichnen Sie das Design auf Papierstücke und verbinden Sie sie mit einer Schnur oder zeichnen Sie den Umriss auf ein Whiteboard. Ideal für Brainstorming-Sitzungen.
  5. 5
    Nehmen Sie ein Inhaltsinventar vor. Dies ist eher auf Redesigns als auf neue Websites ausgerichtet. Geben Sie jeden Ihrer Inhalte oder vorhandenen Seiten in eine Tabelle ein. Machen Sie sich Notizen über den Zweck jedes einzelnen und verwenden Sie diese Liste, um zu bestimmen, was geht und was bleibt. Dies wird dazu beitragen, das Fett zu reduzieren und den Redesign-Prozess zu vereinfachen.
Wenn Sie eine Website entwerfen
Wenn Sie eine Website entwerfen und erstellen möchten, wird es Ihnen viel leichter fallen, sie zu planen.

Teil 2 von 4: Erstellen eines HTML-Drahtmodells

  1. 1
    Erstellen Sie ein Drahtmodell, um die Hierarchie zu festigen. Ein HTML-Drahtmodell ist ein Skelett Ihrer zukünftigen Website, das nur die grundlegendsten Tags und Blöcke verwendet, um den Inhalt darzustellen. Es beantwortet die Frage "Was kommt auf den Bildschirm und wo?" Formatierung und Stil werden in einem Drahtmodell komplett ignoriert.
    • Mit dem Wireframe können Sie Inhaltsstruktur und -fluss sehen, bevor Sie sich auf Stilentscheidungen festlegen.
    • HTML-Wireframes sind nicht statisch wie PDFs oder Bilder und ermöglichen es Ihnen, Inhaltsblöcke schnell zu verschieben, um eine neue Struktur zu erstellen.
    • Ein Wireframe ist interaktiv, was sowohl für den Entwickler als auch für den Kunden von Vorteil ist. Da das Wireframe in einfachem HTML geschrieben ist, können Sie trotzdem darin navigieren und ein Gefühl dafür bekommen, wie das Wechseln zwischen den Seiten funktioniert. Dies kann nicht durch ein PDF-Konzept ausgedrückt werden.
  2. 2
    Versuchen Sie es mit der Gray-Box-Methode. Blockieren Sie den Inhalt Ihrer Seite in grauen Kästchen, wobei die wichtigsten Inhalte ganz oben stehen. Die Blöcke sind in einer einzigen Spalte angeordnet, wobei der wichtigste Inhalt auf der Seite oben steht. Wenn die Seite beispielsweise die Seite „Über“ des Unternehmens ist, können die Unternehmensdetails oben angezeigt werden, gefolgt von einer Mitarbeiterliste, gefolgt von 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. 3
    Versuchen Sie es mit einem Drahtrahmenprogramm. Es gibt verschiedene Programme, die Ihnen beim Wireframing-Prozess helfen können. Der Umfang der erforderlichen Programmierkenntnisse variiert von Programm zu Programm. Zu den beliebtesten Programmen gehören:
    • Musterlabor. Diese Site ist auf "atomares Design" spezialisiert, bei dem jeder Inhalt als "Molekül" betrachtet wird, aus dem die größere Seite besteht.
    • Sprungdiagramme. Dies ist ein Website-Planungs- und Wire-Framing-Service. Es erfordert ein kostenpflichtiges Abonnement, ermöglicht es Ihnen jedoch, schnell Wireframes zu erstellen, ohne sich zu viele Gedanken über die Codierung machen zu müssen.
    • Drahtlos. Wirefy ist ein weiteres "atomares Design"-System. Die Tools stehen den Entwicklern kostenlos zur Verfügung.
  4. 4
    Verwenden Sie einfaches HTML-Markup. Ein gutes Wireframe kann später leicht in die eigentliche Site umgewandelt werden. Machen Sie sich während des Wireframing-Prozesses keine Sorgen um den Stil. Verwenden Sie stattdessen Markup, das leicht zu verstehen und mit geringem Aufwand ausgetauscht werden kann.
    • Weniger ist mehr bei einem Wireframe. Das Ziel ist es, die Struktur einfach zu bauen. Visuals können später mit CSS und erweitertem Markup angepasst werden.
  5. 5
    Erstellen Sie für jede Seite Ihrer Website ein Wireframe. Es mag verlockend sein, ein einzelnes Wireframe zu erstellen und zu sagen: "Cool, das kann ich auf jede Seite anwenden und ich bin gut." In Wirklichkeit führt dies zu einer generischen und langweiligen Site. Nehmen Sie sich die Zeit, jede Seite zu verdrahten, und Sie werden schnell feststellen, dass jede Seite ihre eigenen organisatorischen Anforderungen hat.
Das bereits über ein visuelles Branding verfügt
Wenn die Site für ein Unternehmen bestimmt ist, das bereits über ein visuelles Branding verfügt, sollte dies in das Site-Design integriert werden.

Teil 3 von 4: Inhalte erstellen

  1. 1
    Halten Sie einige Inhalte bereit, bevor Sie mit der Erstellung der Website beginnen. Es ist viel einfacher zu sehen, wie Ihr Website-Stil aussieht, wenn Sie Ihren tatsächlichen Inhalt anstelle von Platzhaltern verwenden. Sie brauchen nicht zu viel Inhalt, aber es wird in Mockups viel besser aussehen, wenn Sie einige Kopien und Originalbilder haben.
    • Sie brauchen nicht unbedingt den Textkörper eines Artikels, aber Sie sollten zumindest tatsächliche Überschriften haben.
  2. 2
    Denken Sie daran, dass guter Inhalt mehr ist als Text. Das Internet ist viel mehr als einfache Text-Websites. Um sich in Ihrer Nische abzuheben, benötigen Sie eine Vielzahl verschiedener Inhaltstypen, um Besucher anzuziehen und zu halten. Einige mögliche Inhalte, die Sie beachten sollten:
    • Bilder.
    • Audio
    • Video
    • Streams (Twitter)
    • Facebook-Integration
    • RSS
    • Content-Feeds
  3. 3
    Beauftragen Sie einen professionellen Fotografen. Wenn Sie Fotos in Ihre Website einbinden, werden Ihre ersten Eindrücke mit professioneller Fotografie viel besser. Ein einzelnes gutes Foto ist mehr wert als zwanzig schlechte.
    • Suchen Sie nach Absolventen der neuesten Kunstfotografie nach günstigeren Lösungen als langjährige Profis.
  4. 4
    Schreiben Sie hochwertige Artikel. Der geschriebene Inhalt auf Ihrer Seite bestimmt die enorme Menge Ihres Web-Traffics. Während Sie sich zu diesem Zeitpunkt des Designprozesses nicht allzu viele Gedanken über die Erstellung von Inhalten machen müssen, schadet es nicht, darüber nachzudenken, da Sie regelmäßig Inhalte benötigen, sobald die Website live geht.
    • Neben Artikelinhalten gibt es geschriebene Artikel, die Sie höchstwahrscheinlich während des Website-Erstellungsprozesses werden. Dazu können Kontaktinformationen, Firmennamen oder alles andere gehören, das an mehreren Stellen auf der Website verwendet wird.
Die Sie höchstwahrscheinlich während des Website-Erstellungsprozesses werden
Neben Artikelinhalten gibt es geschriebene Artikel, die Sie höchstwahrscheinlich während des Website-Erstellungsprozesses werden.

Teil 4 von 4: Das Konzept in eine Site verwandeln

  1. 1
    Globale Elemente stylen. Dies sind die Elemente, die auf jeder Seite Ihrer Website angezeigt werden, z. B. Kopfzeile, Fußzeile und Navigationsmenü. Erstellen Sie einen sehr einfachen Stil, damit Sie sehen können, wie alle Ihre Seiten aussehen, wenn sie vorhanden sind. Dies wird sehr nützlich sein, wenn Sie in den Layoutprozess einsteigen.
    • Machen Sie sich nicht zu viele Gedanken über die Details, aber versuchen Sie, dem Aussehen der Kopfzeilen etwas nahe zu kommen.
  2. 2
    Erstellen Sie ein Grundlayout. Beginnen Sie damit, die Uhren Ihres Drahtmodells aus der einzelnen Spalte und an ihre allgemeinen Positionen auf der Seite zu verschieben. Sie können beispielsweise den Navigationsblock auf die linke Seite der Seite und eine Liste mit Überschriften nach rechts verschieben.
    • Experimentieren Sie einige Seiten lang mit den Layouts, bevor Sie fortfahren. Lassen Sie andere sie testen, um zu sehen, ob sie sich organisch anfühlen.
  3. 3
    Erstellen Sie ein Modell. Verwenden Sie ein Programm wie Photoshop, um ein Modell einiger Seiten Ihrer Website zu erstellen. Verwenden Sie das Layout, für das Sie sich entschieden haben, als Richtlinie. Sie können in einem Bildbearbeitungsprogramm viel schneller arbeiten und bekommen alles so, wie Sie es möchten. Auf diese Weise können Sie diese Bilder als Referenzen verwenden, wenn es darum geht, tatsächlich zu codieren.
    • Fügen Sie tatsächlichen Inhalt in das Mockup ein, um sicherzustellen, dass alles zusammen gut aussieht.
  4. 4
    Ersetzen Sie Ihre Blöcke durch Inhalt. Beginnen Sie mit dem Hinzufügen Ihrer Inhalte und Elemente zur Seite. Machen Sie sich noch keine Sorgen um den Stil, bringen Sie einfach alles an den richtigen Ort. Dies wird Ihnen helfen zu sagen, ob Ihre Stiländerungen funktionieren werden.
  5. 5
    Erstellen Sie einen Styleguide. Dies ist wichtig, um einen zusammenhängenden Stil aufrechtzuerhalten, insbesondere bei größeren Websites. Wenn die Site für ein Unternehmen bestimmt ist, das bereits über ein visuelles Branding verfügt, sollte dies in das Site-Design integriert werden. Aktivitäten möglicherweise in einem betrachten Style Guide:
    • Navigation
    • Überschriften (<h1>, <h2> usw.)
    • Absätze
    • Kursivschrift
    • Fettdruck
    • Links (aktiv, inaktiv, schwebend)
    • Bildverwendung
    • Symbole
    • Tasten
    • Listen
  6. 6
    Wenden Sie Ihren Stil an. Sobald Sie sich für einen Stil und ein Design für die Site entschieden haben, ist es an der Zeit, mit der Implementierung zu beginnen. CSS ist eine der einfachsten Möglichkeiten, Stil auf einer Seite oder der gesamten Website zu implementieren. Weitere Informationen zur Verwendung von CSS finden Sie in dieser Anleitung.
Diese Website verwendet Cookies zur Analyse des Datenverkehrs und zur Personalisierung von Anzeigen. Durch die weitere Benutzung dieser Website wird dem Gebrauch von Cookies zugestimmt. Weitere Informationen finden Sie in unserer Datenschutzrichtlinie.
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail