Wenn Sie Webseiten entwerfen und erstellen möchten, wird dieser Prozess viel einfacher sein, wenn Sie im Voraus planen. In der Planungsphase können Designer und Bauherr gemeinsam ein Format und Layout finden, das ihren Bedürfnissen entspricht. Der Planungsprozess beeinflusst den Stil oder den Stil der Site, man könnte sagen, dass dies der wichtigste Aspekt im Webdesign ist, insbesondere wenn es für geschäftliche Zwecke gilt.
Schritt
Teil 1 von 4: Erstellen der Grundstruktur
Schritt 1. Bestimmen Sie die Funktion der Website
Wenn Sie eine persönliche Website erstellen, kennen Sie die Antwort wahrscheinlich bereits. Wenn Sie jedoch eine Site für eine andere Organisation, Firma oder Person erstellen, müssen Sie herausfinden, was sie wollen und welche Funktionen die Site haben. Alles, was Sie hier angeben, wird wirksam, wenn die Webseite fertig ist.
- Benötigt die Website Storefront? Sollen Benutzerkommentare gemacht werden? Muss der Benutzer später ein Konto erstellen? Ist der Website-Artikel orientiert? Oder bildorientiert? All diese und andere Fragen helfen Ihnen bei der Gestaltung und Gestaltung der Site.
- Dieser Planungsprozess kann in einer Zeichnung festgehalten werden, insbesondere wenn es sich um ein großes Unternehmen handelt und viele Personen an der Erstellung dieses Projekts beteiligt sind.
Schritt 2. Erstellen Sie ein Sitemap-Diagramm (Sitemap)
Ein Sitemap-Diagramm ähnelt einem Flussdiagramm und zeigt, wie Benutzer von einer Seite zur nächsten wechseln. Sie benötigen zu diesem Zeitpunkt keine Webseite, sondern nur einen allgemeinen Ablauf von Konzepten. Sie können ein Computerprogramm verwenden, um Diagramme zu erstellen oder Ihre eigenen auf Papier zu skizzieren. Verwenden Sie dieses Diagramm, um die Konzepte der hierarchischen Anordnung und der Konnektivität von Webseiten zu demonstrieren.
Schritt 3. Probieren Sie die Kartenentwurfsmethode aus
Eine beliebte Methode der Gruppen-Webentwicklung besteht darin, eine Reihe von Karten zu verwenden, um die Erwartungen aller herauszufinden. Nehmen Sie eine Reihe von Notizkarten und schreiben Sie den grundlegenden Inhalt einer Webseite auf jede einzeln auf. Ordnen Sie diese Karten gemeinsam mit Ihrem Team, um das beste Konzept zu finden. Diese Methode eignet sich für den Einsatz, wenn Sie mit anderen an der Erstellung von Webseiten zusammenarbeiten.
Schritt 4. Verwenden Sie Papier und ein Schwarzes Brett oder ein Whiteboard
Dies ist eine originelle Planungsmethode mit kleinem Budget, Sie können Inhalte schnell löschen oder verschieben und den Fluss ändern. Zeichnen Sie Ihr Webdesign auf Papier, verbinden Sie die Papiere mit Fäden oder zeichnen Sie Linien auf die Tafel. Diese Methode eignet sich sehr gut für den Einsatz in Brainstorming-Sitzungen.
Schritt 5. Erstellen Sie ein Inhaltsinventar
In der Tat ist es in der Regel geeigneter, bei der Neugestaltung von Webs als bei neuen Webdesigns zu verwenden. Fügen Sie jeden fertigen Inhalt oder jede Webseite in eine Tabelle ein. Notieren Sie sich den Zweck jedes Inhaltselements oder jeder Seite und verwenden Sie diese Liste, um zu bestimmen, was Sie entfernen und was Sie behalten möchten. Sie können die Struktur des Webs vereinfachen und später den Redesign-Prozess vereinfachen.
Teil 2 von 4: Erstellen einer einfachen HTML-Gliederung
Schritt 1. Erstellen Sie ein Wireframe, um die Webseitenhierarchie einzurichten
Die grundlegende HTML-Vorlage ist die Blaupause der Site, die Sie erstellen werden, und verwendet nur die grundlegendsten Tags und Beispielinhalte (Blöcke/Vorlagen). Dieses Framework beantwortet die Frage „Was ist im Web sichtbar und wo?“Formatierung und Stil sind bei der Erstellung dieser Gliederung nicht erforderlich.
- Sie können die Struktur und das Flussdiagramm des Inhalts mit einer grundlegenden Gliederung sehen, bevor Sie eine Stileinstellung auswählen.
- Einfache HTML-Vorlagen sind nicht statisch wie PDFs oder Bilder, Sie können schnell durch Beispielinhalte wischen, um neue Strukturen zu erstellen.
- Das Basisframework ist interaktiv, was sowohl Webentwicklern als auch Kunden zugute kommt. Da dieses Grundgerüst mit einfachem HTML-Code geschrieben ist, können Sie trotzdem darin navigieren und wissen, wie das Wechseln von Webseiten funktioniert. Dies ist mit PDF nicht möglich.
Schritt 2. Versuchen Sie die Gray-Box-Methode
Blockieren oder markieren Sie Ihren Webseiteninhalt in Gray Box, der wichtigste Inhalt befindet sich oben. Sortieren Sie den Inhalt in einer Spalte. Wenn die Seite beispielsweise „Über das Unternehmen“lautet, befinden sich oben detaillierte Informationen über das Unternehmen, gefolgt von einer Mitarbeiterliste, Kontaktinformationen usw.
Dies gilt nicht für Kopf- und Fußzeilen. Gray Box ist eine visuelle Darstellung des Inhalts, der im Web angezeigt wird
Schritt 3. Probieren Sie ein einfaches Gliederungserstellungsprogramm aus
Es gibt verschiedene Programme, die Sie beim Erstellen eines grundlegenden Web-Frameworks verwenden können. Die Menge an Web-Programmiercode (Sprache), die Sie beherrschen müssen, ist für jedes Programm unterschiedlich. Einige der Programme, die sehr beliebt sind, sind:
- Musterlabor. Diese Seite ist dem „atomaren Design“gewidmet, jeder Inhalt wird als „Molekül“betrachtet, das eine größere Webseite zusammensetzt.
- Sprungdiagramme. Diese Webseite bietet webbasierte Planungs- und Framing-Dienste. Diese Sites sind kostenpflichtig und erfordern ein Abonnement, aber Sie können schnell Web-Frameworks erstellen, ohne viel Webprogrammierungscode beherrschen zu müssen.
- Drahtlos. Wirefy ist eine weitere Seite, die „atomares Design“anbietet. Webentwickler können das Tool kostenlos erhalten.
Schritt 4. Verwenden Sie einfaches HTML-Markup
Eine gute Basisvorlage wird leicht in die ursprüngliche Site konvertiert. Denken Sie beim Erstellen dieser Vorlage nicht zu viel über das Web-Styling nach. Verwenden Sie leicht verständliches und änderbares Markup.
Ein einfaches Grundgerüst ist viel besser. Der Zweck des Erstellens eines Markups besteht darin, eine Struktur aufzubauen. Das visuelle Erscheinungsbild kann später mit CSS und erweitertem Markup angepasst werden
Schritt 5. Erstellen Sie eine grundlegende Gliederung für jede Webseite
Sie könnten versucht sein, jede Webseite mit einer grundlegenden Gliederung gleichzusetzen. Tatsächlich wird Ihre Website dadurch nur schlicht und langweilig. Erstellen Sie für jede Seite eine andere Gliederung. Sie werden verstehen, dass jede Seite ein eigenes Design benötigt.
Teil 3 von 4: Inhalte erstellen
Schritt 1. Bereiten Sie den Inhalt vor, bevor Sie eine Webseite erstellen
Es ist viel einfacher, eine Vorschau Ihrer Webansicht anzuzeigen, wenn Sie bereits über tatsächlichen Inhalt verfügen, anstatt Muster oder Platzhalter zu verwenden. Sie müssen nicht zu viel Inhalt haben, aber Ihr Modell sieht viel besser aus, wenn Sie eine Kopie des Originalbilds verwenden.
Sie müssen nicht das gesamte Artikelmaterial haben, aber es sollte zumindest eine tatsächliche Überschrift haben
Schritt 2. Denken Sie daran, dass großartiger Inhalt nicht nur Text ist
Das Internet ist viel komplexer als eine einfache Webseite mit Text. Sie benötigen eine Vielzahl unterschiedlicher Inhalte, um eine großartige Website zu erstellen, die Besucher anzieht und einlädt. Zum Beispiel:
- Bild.
- Stimme.
- Videos.
- Webübertragung oder Webstream (Twitter)
- Facebook-Integration
- RSS
- Webfeed
Schritt 3. Bitten Sie einen professionellen Fotografen um Hilfe
Wenn Sie Fotos in Ihre Website aufnehmen möchten, ist der erste Eindruck, den Sie von Ihrer Website erhalten, viel besser, wenn sie mit professioneller Fotografie gefüllt ist. Ein gutes Foto ist mehr wert als zwanzig Fotos von geringer Qualität.
Suchen Sie nach einem frischen Absolventen der Fotografie als günstigere Lösung als einen professionellen Fotografen, der schon lange im Geschäft ist
Schritt 4. Schreiben Sie hochwertige Artikel
Der geschriebene Inhalt auf der Webseite bestimmt die Menge Ihres Web-Traffics. Während Sie sich in diesem Designprozess nicht allzu viele Gedanken über die Erstellung von Inhalten machen müssen, schadet es nicht, darüber nachzudenken, da Sie auch regelmäßig Inhalte benötigen, sobald Ihre Website in Betrieb ist.
Zusätzlich zum Artikelinhalt gibt es schriftliches Material, das Sie auch beim Erstellen einer Webseite benötigen. Zum Beispiel Kontaktinformationen, Firmenname oder alles andere, das auf der Website mehrmals verwendet wird
Teil 4 von 4: Konzepte in Websites verwandeln
Schritt 1. Ordnen Sie die Grundelemente an
Diese Anordnung der Elemente gilt für jede Seite Ihrer Website, z. B. Kopfzeilen, Fußnoten und Navigationsmenüs. Richten Sie es in einem sehr einfachen Stil ein, damit Sie überprüfen können, wie alle Seiten aussehen. Dies ist besonders nützlich, wenn Sie mit dem Web-Layout-Prozess fortfahren.
Machen Sie sich keine Sorgen um Details, versuchen Sie, eine Vorschau (Vorschau) der Kopfzeile anzuzeigen
Schritt 2. Erstellen Sie ein einfaches Layout
Beginnen Sie damit, die Uhrposition von der Basisumrissspalte an die tatsächliche Position auf der Seite zu verschieben. Sie können beispielsweise das Beispielnavigationsmenü nach links auf der Seite und die Liste der Überschriften nach rechts verschieben.
Experimentieren Sie weiter mit Weblayouts für mehrere Seiten, bevor Sie mit dem nächsten Schritt fortfahren. Lassen Sie andere einen Blick darauf werfen, um zu sehen, ob sich das von Ihnen erstellte Layout lebendig anfühlt
Schritt 3. Erstellen Sie ein Modell
Verwenden Sie ein Programm wie Photoshop, um Mockups oder Beispielseiten Ihrer Website zu erstellen. Verwenden Sie das von Ihnen zusammengestellte Layout als Richtlinie. Mit einem Bildbearbeitungsprogramm können Sie Mockups schneller erstellen und die gewünschten Ergebnisse erzielen. Die Ergebnisse dieser Bilder können später als Referenz beim Schreiben von Webprogrammierungscode verwendet werden.
Fügen Sie den tatsächlichen Inhalt in das Mockup ein, damit es gut aussieht
Schritt 4. Ersetzen Sie das Beispielkonzept durch den ursprünglichen Inhalt
Inhalte und Elemente zu Webseiten hinzufügen. Lassen Sie sich vorerst nicht von den Web-Stil-Einstellungen ablenken, stapeln Sie einfach alles an der richtigen Stelle. Auf diese Weise können Sie die Änderungen am Webstil später überprüfen.
Schritt 5. Erstellen Sie einen Web-Styleguide
Es ist sehr wichtig, einen Stilmix beizubehalten, insbesondere bei großen Websites. Wenn die Site für geschäftliche Zwecke gedacht ist und bereits eine eigene Marke oder einen eigenen Stil hat, sollte dies in das Site-Design integriert werden. Bei der Erstellung eines Styleguides für Webseiten sind folgende Punkte zu beachten:
- Navigation
- Kopfnote
- Absatz
- Kursivschrift
- Fetter Charakter
- Links (aktiv, inaktiv, schweben)
- Bildnutzung
- Symbol
- Knopf
- aufführen
Schritt 6. Wenden Sie den Webstil an
Sobald Sie den richtigen Stil und das richtige Design gefunden haben, implementieren Sie es. CSS ist eine der einfachsten Möglichkeiten, Stile auf einer Webseite oder auf der gesamten Website zu implementieren. Lesen Sie die folgenden Anweisungen, um die Details der Verwendung von CSS besser zu verstehen.
