Einleitung

Lesen Sie in diesem Beitrag, wie eine eigene Website entwickelt wird. Du bekommst alle notwendigen Informationen, um deine eigene Webseite aufzubauen, angefangen bei der Konzeption des Wireframes bis hin zur Umsetzung des Designs in Code.

Wir beginnen mit dem Wireframing, einem wichtigen Schritt, um eine klare Vorstellung der zukünftigen Webseite zu erhalten. Anschließend zeigen wir Ihnen, wie Sie Ihrem Wireframe in ein ansprechendes Design überführen können. Schließlich erklären wir, wie Sie Ihr Design in eine voll funktionsfähige Webseite umsetzen, indem Sie den entsprechenden Code schreiben.

Wireframe

Wireframe ist einfach und schnell umzusetzen. Alles, was du dafür benötigst, ist ein Zettel und ein Stift oder dein Computer und ein Zeichenprogramm.
Wireframe ist die visuelle Darstellung deiner Vorstellung im Kopf auf dem Papier. Sie ist eine Art Blaupause.

Du kannst dort dein Seitenlayout gestalten, ohne Gedanken um Farben, Button Größe, Schriftart usw. machen zu müssen. Es enthält also keine Details, es wird dort auch kein Text geschrieben. Um deutlich zu machen, dass an einer Stelle Text stehen soll, verwendest du eine Linie.

In diesem Beispiel siehst du, wie ein Wireframe aussehen kann:

Wenn du eine grobe Idee hast, wie deine Webseite aussehen soll, kannst du damit beginnen.

Wieso mit dem Wireframe beginnen?

Wir beginnen mit dem Wireframe, weil es uns dazu bringt unsere Idee im Kopf direkt in die Tat umzusetzen. Das Wireframeing unterstützt uns dabei, die Webseite besser vorstellen zu können.

Es hat zudem den Vorteil, dass wir mit dem Anordnen von Elementen etwas herumspielen können.

Nun hast du den ersten Schritt schon gemeistert. Als Nächstes schauen wir uns dann an, wie wir unsere Blaupause in Design verwandeln können.

Vom Wireframe zum ansprechenden Design

In diesem Schritt legen wir unsere Blaupause sichtbar bei Seite und versuchen daraus ein schönes Design zu entwerfen.

Wir arbeiten die Skizze von oben nach unten ab, dabei fangen wir typischerweise beim Header mit der Navigationsleiste an.

Anschließend kümmern wir uns um den Hauptteil, unseren Body. Dieser kann in weitere kleinere Elemente aufgeteilt sein. Diese Elemente schauen wir uns nacheinander an.

Diesen Prozess beenden wir mit dem Footer.

In diesem Schritt ist es jetzt wichtig, dass du dir über diese Details Gedanken machst:

Hast du dir über diese Dinge Gedanken gemacht, kannst du die Elemente deiner Skizze entsprechend designen. Schritt für Schritt verwandelst du dabei die Skizze in deinem Traumdesign.

Um solch ein Design zu entwickeln, kannst du verschiedene UI-Tools verwenden. Ich verwende Lunacy, aber Sketch oder Figma sind auch bekannte Tools dafür.

Hier ist ein kleiner Ausschnitt zum Design für unseren vorherigen Wireframes:

Vom Design zum Code & zur Webseite

Jetzt weißt du, wie du deine Idee in ein Wireframe umwandeln kannst. Du weißt, wie daraus ein Design entworfen wird. Es fehlt also nur noch ein Schritt, um deine eigene Webseite gebaut zu haben. Diesen Schritt schauen wir uns jetzt an.

Wir müssen uns nun Gedanken um folgende Dinge machen:

• Ordnerstruktur
• Werkzeuge (Programmiersprachen, Frameworks usw.)
• Materialien
• Umsetzung
• Veröffentlichung

Ordnerstruktur

Es ist wichtig, eine saubere Ordnerstruktur aufzubauen. Besonders bei größeren Projekten kann dies Goldwert sein.
Für unser Projekt reicht eine simple Ordnerstruktur aus.

Hier ein Beispiel:

In dieser Orderstruktur sehen wir, dass wir in unserem Projektordner „Website“ die Unterordner „public“ und „src“ haben. Wir können später beim Hosting unserer Webseite, die Berechtigungen unseres „Public“ Ordners anpassen, um die Inhalte sichtbar zu machen, auf alle anderen Inhalte hat derjenige, der sich die Webseite ansieht, keinen direkten Zugriff. Unsere Webseite programmieren wir also überwiegend im „public“ Ordner. Die Ordnerstruktur kann auch anders aufgebaut werden. Solltest du JavaScript Libraries wie React oder VueJS verwenden, kann eine andere Ordnerstruktur besser geeignet sein.

Diese Ordnerstruktur richtet sich für einfache Webseiten mit wenig bis kein JavaScript.

Werkzeuge

Um die Werkzeuge, Hilfsmittel und Programmiersprachen, zu bestimmen, musst du dir Gedanken darum machen, welche Möglichkeiten es gibt, um deine Funktionen umzusetzen.

Wie möchtest du deine Webseite erstellen? Du benötigst in jedem Fall HTML, dies ist für die allgemeine Darstellung von Text und der Elemente nötig, es bietet die Grundlage deiner Webseite.

Anschließend kannst du dein HTML-Dokument mit CSS designen. Es gibt aber auch CSS-Frameworks, um deine Webseite schneller zu gestalten. Solche Frameworks sind z. B. Bootstrap oder TailwindCSS oder Bulma.

Für diejenigen, die Webdesign wirklich erlernen möchten, würde ich am Anfang, das Erstellen von Webseiten ohne Frameworks empfehlen. Dadurch erlangt man besseres und tieferes Verständnis, wie eine Webseite aufgebaut und designt wird. Später kann man sich dann in die Frameworks reinarbeiten.

Diejenigen, die Erfahrung in CSS haben, können das TailwindCSS Framework benutzen. Damit lässt sich jedes Element schnell individuell anpassen und die Webseite kann ein individuelles und unverwechselbares Design bekommen. Dadurch kann sich die Webseite von anderen Webseiten abheben.

Jetzt weißt du, was du benötigst, um eine Webseite zu programmieren. Und du kannst dich über diese einzelnen Themen nochmal einzeln belesen. Oder du sparst dir Zeit und lässt deine Webseite von mir erstellen.

Schreibe mich dazu einfach an und kontaktiere mich.

Materialien

In diesem Schritt geht es darum, dass du alle Inhalte, die du benötigst, in deinen „src“ Ordner speicherst. Benutzt du Google Fonts Schriftarten, kannst du diese auch direkt einbinden.

Umsetzung

Hier geht es darum, aus den gesammelten Informationen deine Webseite zu erstellen.

Du musst also ein HTML-Dokument erstellen und dein Design Schritt für Schritt in Code schreiben. Eine Liste von Befehlen für HTML und CSS kannst du bei MDN nachlesen.

Verwendest du Frameworks, orientierst du dich am besten an deren Dokumentationen.

Jetzt kannst du deine Webseite von der Idee bis zum fertigen Produkt umsetzen. Jedoch kann noch niemand außer dir diese Webseite aufrufen.
Du musst diese erst veröffentlichen.

Veröffentlichung

Deine Webseite hast du bis jetzt nur lokal bei dir programmiert. Damit jedoch die gesamte Welt darauf zugreifen kann, musst du diese hosten.

Außerdem benötigst du eine Domain. Eine Domain ist eine Adresse, über der deine Webseite später erreichbar sein wird.

Möchtest du Arbeit und Zeitsparen? Du hast Fragen? Dann lasse dir deine Webseite von mir erstellen. Melde dich einfach bei mir und wir können gemeinsam deine Traumwebseite umsetzen.