Ein Web-Projekt gliedert sich in folgende Phasen: Planung der Inhalte, Erstellung eines Wireframes, Erstellung der einzelnen Web-Seiten und Veröffentlichung der Website.
Die Planung und Auswahl passender Inhalte ist wohl die wichtigste Phase im Webdesign. Und sie kann auch am längsten dauern. Aber die Mühe lohnt sich. Ein guter Plan für die Inhalte trägt zur Präsenz und Usability deiner Website bei und kann zudem die Entwicklungszeit verkürzen.
Orientiere dich an folgenden Fragen: Welche Zielgruppe spreche ich an? Wie halte ich Inhalte kurz und prägnant? Wie werden Besucher die Website suchen? Wie baue ich Inhalte logisch aufeinander auf?
Ein Wireframe ist ein grober Entwurf bzw. eine abstrakte visuelle Darstellung der Website, die die Zusammenarbeit im Team während der Design- und Planungsphase erleichtert. Wireframes können einfache handgezeichnete Diagramme sein, mit denen spontane Ideen festgehalten wurden, oder bereits komplexere Ausarbeitungen der Navigation und Funktionalität der Website.
Es gibt verschiedene Wireframing-Werkzeuge – von Stift und Papier mal abgesehen –, z. B. kostenlose oder kostenpflichtige Wireframing-Programme oder auch Creative Cloud-Applikationen wie Photoshop. Wähle eine Lösung, die für dich und dein Team gut funktioniert.
Nun geht es an die Umsetzung der Design-Ideen und Planungen. Um einen Entwurf für das Web aufzubereiten, ist ein Verständnis der Webdesign-Sprachen unerlässlich. In dieser Tutorial-Reihe stehen HTML und CSS im Mittelpunkt. Aber auch JavaScript wird kurz vorgestellt.
Mit HTML (Hypertext Markup Language) legst du Struktur und Inhalt der Web-Seiten für deine Site fest. CSS (Cascading Style Sheets) dienen zur Formatierung der sichtbaren Eigenschaften von Website-Inhalten und zur Anpassung des Layouts. JavaScript wird häufig verwendet, um Web-Seiten zusätzliche Funktionen und Interaktivität hinzuzufügen.
Sobald du bereit bist, deine Website der Welt zu präsentieren, benötigst du einen Domain-Namen bzw. eine Web-Adresse sowie Speicherplatz auf einem Webserver und die entsprechenden Verbindungsinformationen. Für die Verbindung zu einem Webserver wird häufig das FTP-Protokoll genutzt. Falls du eine Website für ein Unternehmen erstellst, erhältst du diese Informationen vom Web-Administrator der IT-Abteilung. Falls du eine eigene Website erstellst, bekommst du die Informationen von deinem Provider.
Über das Menü „Site“ kannst du die Verbindung zum Webserver herstellen und die Website direkt aus Dreamweaver heraus veröffentlichen.