Online Tools für die Planung & Gestaltung von Websites

Online Tools für die Planung & Gestaltung von Websites

Eine Website ist das Aushängeschild des Unternehmens im Internet. Die Website vermittelt den ersten Eindruck und kann für die Kontaktaufnahme entscheidend sein. Dabei geht es aber nicht nur darum, eine “schöne” Website zu erstellen, vielmehr spielt die Usability und die optimale Darstellung auf den verschiedenen Endgeräten eine Rolle. Als Webdesigner*in sollte man sich vor der Gestaltung konzeptionell überlegen, wie die gewünschten Inhalte aufbereitet, strukturiert und zuletzt optimal dargestellt werden können.

Die ersten Schritte zur Planung & Gestaltung einer Website

gloomaps - website planen und strukturierenIm Erstgespräch mit dem/der Kund*in sollte man gemeinsam eine mögliche Navigationsstruktur mit der Startseite und den geplanten Unterseiten erarbeiten. Dazu eignet sich das Tool Gloomaps. In übersichtlicher Weise lässt sich so die die konzipierte Navigationsstruktur darstellen. Das Tool lässt auch farbliche Anpassungen zu, sodass man einzelne Webseitenebenen besser kennzeichnen kann. Ebenso ist die Notiz-Funktion der einzelnen Seiten nützlich. So können schon gewünschte Inhalte wie Texte oder Bilder als Notiz in die Übersicht mit einfließen. Ist die Navigationsstruktur der neuen Website soweit festgelegt, lässt sich die Übersicht bequem per Link verschicken oder als PDF downloaden. Natürlich ist da noch nichts in Stein gemeißelt und Änderungen können später noch vorgenommen werden.

Fazit: Das Tool ist für die Übersichtlichkeit und Navigation einer Website sehr nützlich und noch dazu völlig kostenlos.

 

Planung & Gestaltung des inhaltlichen Aufbaus der einzelnen Webseiten

Ist die Navigation so weit erstellt, kann es an die inhaltliche Strukturierung und Planung der einzelnen Webseiten (Unterseiten) gehen. Dazu hilft einen für den schnellen Überblick das kostenlose Online-Tool wireframe.cc. Mit dem Tool lassen sich verschiedene Elemente wie Texte, Headlines, Bilder, Listen, uvm. darstellen und auf den gewünschten Geräte (Desktop, Tablet, Smartphone) arrangieren. Die einzelnen Devices können in der Größe angepasst werden. Leider ist das Speichern erst mit der Premium-Variante (ab 16 $/Monat) möglich. Aber man kann einen Link generieren oder das Layout screenshotten (Add-on Chrome: Nimbus). Eine Bearbeitung ist dann später leider nicht mehr möglich.

Fazit: Für die schnelle inhaltliche Strukturierung der einzelnen Seiten hilft diese vereinfachte Darstellung, den Überblick zu behalten. Zudem kann man sich zu den einzelnen Elementen noch Notizen hinzufügen. Sollte sich das Tool als nützlich erweisen, empfiehlt es sich aber die 16 $ im Monat zu investieren.

 

Detaillierte Gestaltung einer Website mit Figma

Figma Website Design, Prototype, CodeNachdem die Navigation & die inhaltliche Struktur festgelegt wurde, geht es an die optische Ausgestaltung der einzelnen Elemente. Texte, Bilder, Farben und Formen müssen so abgestimmt sein, dass der/die User*in sich “wohlfühlt”, die Website einfach zu navigieren und natürlich optisch ansprechend ist. Dazu gibt es zahlreiche User Interface Design-Tools. Wer mit der Adobe Cloud arbeitet, kann sich Adobe XD anschauen, da dieses bereits kostenlos in der Cloud integriert ist. Ein weiteres kostenloses Tool ist Figma – ein Online Tool mit dem man designen, “protoypen” und programmieren kann. Hier sind der Gestaltung keine Grenzen gesetzt. Ziel ist es, dem/der Kund*in gestalterisch fertige, navigierbare Prototypen der neuen Website zu liefern. Sind diese dann abgesegnet, können die einzelnen Seiten vom/ von der Programmierer*in im CMS (z. B. WordPress) erstellt und editierbar angelegt werden.

 

Fazit: Figma ist ein umfangreichen Tool zur Gestaltung von Websites. Die einzelnen Webseiten können in Echtzeit getestet und so schon Stolpersteine in der Navigation oder Gestaltung erkannt und behoben werden. Die Arbeit kann zudem mit hilfreichen Plugins erleichtert werden. Wer also täglich mit Websites zu tun hat, sollte einen Blick in die Oberfläche des Tools werfen. Es lohnt sich auf alle Fälle.

 

Alle drei vorgestellt Tools können durchweg empfohlen werden. Natürlich sind diese nicht der ausschlaggebende Punkt für eine funktionale und optisch ansprechende Website, aber sie helfen, die eigenen Gedanken und Gestaltungsansätze optimal festzuhalten und dem/der Kund*in zu präsentieren.

 

 

The following two tabs change content below.

Julia

Hallo, ich bin Julia und unterstütze das Team der Klickkomplizen seit August 2015 im Bereich Web- und Printdesign. Mein Herz schlägt für Photoshop und InDesign und somit auch für Neuheiten und Trends in diesem Bereich.
Jetzt neu bei #FB: Du kannst deine Beiträge in einem A/B-Test gegeneinander laufen lassen, um den besten Performer… https://t.co/Q5H6pytMkC
#InstagramStories lassen sich jetzt endlich auch als #Entwurf abspeichern!🙌Wie das Ganze funktioniert könnt ihr im… https://t.co/ASm0A1xY6l
Während der letzten Monate haben wir Klickis wieder fleißig an einem #Webprojekt gearbeitet: Für das bekannte Berli… https://t.co/ChxWZqSAjS
Kennt ihr schon unseren #Newsletter? Jeden Monat die neuesten #Updates sowie #Tipps & Tricks rund um… https://t.co/jMWM1YaCoP
#Clubhouse schafft Invite-Only-Funktion ab.👀 Alle Details findet ihr hier: https://t.co/PswbllNUAt
"Bist du sicher, dass du diesen Kommentar posten willst?" - das wird man in Zukunft auf #TikTok gefragt werden, wen… https://t.co/qoVWBs4FkJ
Habt einen entspannten Start ins Wochenende!🙌 #overandout
Darauf haben wir gewartet: Die Entwurf-Funktion für #InstagramStories kommt!🙌Wer hat diese Funktion bereits in der App entdeckt?🤓
Instagram möchte zukünftig noch stärker den Fokus auf Videos setzen. Produzierst du Reels oder IGTVs? #tippshttps://t.co/XCCZcw0rmy
Die #Twitter Stories ("Fleets") werden nun nach kurzer Zeit wieder eingestellt.☠️ Perfektes Beispiel, weshalb Socia… https://t.co/L2iQbrNQ9L
Wir wünschen euch einen guten Start in die neue Woche!☕️
#HappyWeekend! Wir starten ins wohlverdiente Wochenende.☺️ https://t.co/6IX8S6yBMB
Hast du schon mal darüber nachgedacht, deine #Stories, beispielsweise auf #Instagram, an den Tagesablauf und damit… https://t.co/0j6Qy6sLAD
Unbedingt beachten: die Umgebung, in der deine #Story von deinen #Follower:innen konsumiert wird! Ist es hell oder… https://t.co/Dc8WvIZdFH
Seit kurzem ist es bei #MicrosoftAds möglich, neben den allseits beliebten Suchanzeigen auf #Bing und Co. sogenannt… https://t.co/uf8o8nbDt3
3 Minuten-TikToks - unrealistisch? Wohl kaum: Kürzlich konnten ausgewählte User:innen auf #TikTok minutenlange Vide… https://t.co/wTq0YIUUcY
#Schongewusst? Es gibt jetzt Ads für Instagram Reels! Videos bis zu 30 Sekunden können beworben werden und müssen i… https://t.co/lRa6VstRRx
Du bist auf einer Webseite oder in einem Textdokument und siehst eine #Schriftart, die dir richtig gut gefällt? Du… https://t.co/PAJxhbTIoY
Social Media Manager:innen können sich freuen: Endlich lassen sich die #Kennzahlen von #Instagram – wie auch in der… https://t.co/CAwwLwMjoy
Für deine #instagram -Story könntest du bald mehr Farb-Optionen zur Verfügung haben: Die bisher eher kleine… https://t.co/2WS0glkuPj