Unentbehrliche kostenlose Tools für gutes Webdesign

Um Besucher für die eigenen Webseite gewinnen zu können, muss diese in erster Linie optisch ansprechend gestaltet sein. Natürlich gehört dazu eine ganze Menge Übung und Erfahrung. Zuerst aber braucht man Werkzeuge, um die eigenen Ideen effizient umsetzen zu können und aus dem Entwurf letztendlich eine visuell ansprechende Webseite zu erstellen. Im Folgenden stellen wir einige kostenfreie Tools vor, mit denen wir sehr gute Erfahrungen gemacht haben und die für uns heute unentbehrlich zur Erstellung einer guten Webseite sind.

Bevor man mit der Erstellung eines Designs für die eigene Webseite startet, sollte man eine klare Vorstellung haben, wie die Seite später aussehen soll. Abweichungen von dieser Vorstellung entstehen im Prozess der Umsetzung später von selbst. Deshalb schlagen wir vor, sich zuerst Gedanken über den Aufbau der Internetseite zu machen. Anschließend sollte man sich auch das Farbschema und die Schriftarten überlegen. Adobe Kuler ist ein empfehlenswertes Tool zur Findung des Farbschemas. Schriftarten können per Google Fonts gefunden und importiert werden. Einige gängige Schriftarten aus Google Fonts finden sich hier. Dann kanns losgehen:

Das HTML-Grundgerüst und weitere Quelldateien: Notepad++

Notepad++ ist ein sehr mächtiges Tool zur Bearbeitung von Quelldateien. Damit können wir das HTML-Grundgerüst der HTML-Seite umsetzen und weitere Dateien, wie z.B. unsere CSS-Dateien anlegen und bearbeiten. Zwar kann hierfür theoretisch auch das Windows Notepad verwendet werden. Allerdings ist Notepad++ durch die vielen zusätzlichen Funktionen und nachträglich installierbaren Erweiterungen sehr viel produktiver.

Offizielle Website: http://notepad-plus-plus.org/
Download auf chip.de: http://www.chip.de/downloads/Notepad_12996935.html

Erstellung von Logos und Bildern: Paint.net und Inkscape

Paint.net

Paint.net ist ein sehr produktives Tool zur Erstellung von Rastergrafiken wie Logos oder Hintergrundbilder für z.B. Menülinks. Da Paint.net bereits weit verbreitet ist, gibt es dazu auch einige Tutorials, die beim Einstieg in die Arbeit mit dem Tool weiterhelfen.

Offizielle Website: http://www.getpaint.net/
Download auf chip.de: http://www.chip.de/downloads/Paint.NET_13015268.html

Inkscape

Auch Inkspace dient der Erstellung von Bilddateien. Allerdings von Vektorgrafiken, also Grafiken, die nicht durch ein Pixelraster, sondern durch Beschreibungssprachen definiert sind und somit unabhängig von ihrer Skalierung immer dieselbe Qualität haben. Dies kann besonders nützlich für Logos sein. Unsere Erfahrung ist, dass man mit Inkspace viel einfacher "geschwungene" Formen erstellen kann, als mit Paint.net

Offizielle Website: http://www.inkscape.org/
Download auf chip.de: http://www.chip.de/downloads/Inkscape_15274752.html

Testen des Entwurfs: Google Chrome und XAMPP

Google Chrome

Google Chrome ist unserer Meinung nach der empfehlenswerteste Webbrowser, da er meist die neuesten CSS- und HTML-Features unterstützt, bevor dies andere Browser tun. Darüber hinaus ist er der schnellste Browser auf dem Markt.

Offizielle Website: http://www.google.de/intl/de/chrome/browser/

Download auf chip.de: http://www.chip.de/downloads/Google-Chrome_32709574.html

XAMPP

XAMPP ist eine Zusammenstellung von Tools, die es durch den Webserver Apache mit der Datenbank MySQL ermöglicht, die eigene Webseite auch mit PHP-Inhalt und damit für die meisten Zwecke in vollem Umfang zu testen.

Offizielle Website: https://www.apachefriends.org/de/index.html

Download bei chip.de: Nicht bei chip.de erhältlich

Zu guter letzt

Für die Implementierung von Aktionen und Animationen in der Website via Javascript bietet sich das Framework jQuery an. Es erleichtert die Nutzung von Javascript erheblich und hat eine sehr gut verständliche und umfangreiche Dokumentation.

Animationen können seit der Veröffentlichung von CSS 3 auch direkt im CSS-Code umgesetzt werden. Weitere Infos dazu hier (siehe auch CSS-transitions: http://www.w3schools.com/css/css3_transitions.asp)

Bildquellen:

Die Bilder stammen mit Ausnahme des XAMPP-Logos von der jeweils verlinkten chip.de-Seite. Das XAMPP-Logo stammt von der verlinkten offiziellen XAMPP-Webseite.