Jede Webdesignerin hat zahlreiche Tools, die ihr die Arbeit erleichtern. Ich stelle dir meine Lieblings-Webdesign Tools vor, sie sind intiutiv und einfach zu bedienen, mit den meisten arbeite ich schon seit Jahren. Schau einfach mal rein, lass dich inspirieren – vielleicht ist auch etwas für dich dabei.
Design Tools
Am Anfang eines jeden Projekts steht neben den Inhalten auch das Design der Website, ein Part den ich sehr liebe. Hier kann ich meine kreative Ader ausleben.
Farben, Farben, Farben …
Farben erzeugen Stimmungen, sie können harmonisch sein oder auch gewollt provozieren. Mit Farben legen wir die Wirkung deiner Website fest, soll sie seriös, verspielt, naturverbunden oder modern erscheinen. Welche Farben sprechen deine Kundinnen an und vermitteln deine Botschaft am besten.
Die Farbpalette einer Website besteht in der Regel aus vier bis sechs Farben. Für jemanden ohne ein Designstudium ist es mitunter schwierig sich die Farbwirkung vorzustellen oder passenden Farben mit entsprechender Wirkung zusammenzustellen.
Adobe Farbrad als Webdesign Tool für Farbpaletten
Zum Glück gibt es hierzu eine Reihe Tools, die einem dabei helfen. Mein Lieblingstool ist das Farbrad von Adobe, welches Online zur Verfügung steht. Du kannst damit Farben zusammenstellen (komplementär,ähnlich, zusammengestzt usw.), Farben anhand von zuvor hochgeladen Bildern extrahieren und kombinieren oder Farbverläufe extrahieren. Diese kannst du im Anschluss in deiner Bibliothek speichern.
Das Farbrad kann aber noch viel mehr: Es inspiriert dich mit den neusten Trends und über die Funktion “Entdecken” kannst du dir nach Stichworten Farbpaletten und Bilder anzeigen lassen.
Cool ist auch, dass sich die Hexadezimal-Codes deiner Farben direkt kopieren lassen. Um das Adobe Farbrad benutzen zu können, muss du dich einmalig bei Adobe registieren, die Benutzung ist dann kostenfrei.
Weitere ähnliche Tools findest du zum Beispiel auch unter:
Firefox Entwicklertools
Immer dann wenn eine Kundin mir einige Referenzseiten als Beispieldesigns angibt, kommen bei mir die Firefox Entwicklertools zum Einsatz. Die Farbpipette hilft dir dabei, die Hex-Codes der verwendeten Farben zu bestimmen und die Funktion “Inspektor” zeigt dir die verwendeten Schriften an. Du findest die Entwicklertools in Firefox unter Extras/Web-Entwickler.
Auch Google Chrome hat unter weitere Tools/Entwicklertools ähnliche Funktionen.
Bilder und Bildbearbeitung
Bilderquellen und Bildbearbeitungstools gibt es jede Menge, hier sind meine Favoriten.
Bildquellen
Normalerweise stellen meine Kundinnen mir die Bilder für ihre Website zur Verfügung, hin und wieder darf ich sie aussuchen. Dann greife ich gerne auf kostenpflichtige Stockfotos zurück, da hier die Nutzerrechte leichter zu durchschauen ist.
Hier sind meine Favoriten
welche hinlänglich bekannt sind. Vergangenes Jahr habe ich zusätzlich depositphotos entdeckt, dort gab es 100 Downloads for free und ich bin sehr zufrieden damit. Die Preisgestaltung ist bei allen Plattformen ähnlich, es lohnt sich verschiedene zu durchforsten, da das Angebot unterschiedlich ist.
Bildbearbeitung
Meine Kundinnen senden mir ihre Fotos in einer Breite von mindestens 1920 px und 150 dpi. Deshalb ist ein einfaches und funktionales Bildbearbeitungsprogramm für jede Webdesignerin Pflicht. Viele schwören auf GIMP als kostenlose Photoshop Alternative. GIMP hat viele tolle Funktionen und GIMP ist für mich einfach viel zu umfangreich und kompliziert.
In der Regel schneide ich Fotos zu, verändere die Größe und gelegentlich stelle ich Inhalte frei. Anschließend speichere ich die Fotos oder Grafiken noch im gewünschten Format ab. Meine erste Wahl für den Mac ist daher Pixelmator Pro, es kostet nur 39,99 € und kann alles, was ich brauche.
Webdesign Tools für die Bildkomprimierung
Bilder für eine Website sollen bekanntlich eine gut Qualität bei kleiner Dateigröße haben. Deshalb macht es Sinn, deine verwendeten Bilder zu komprimieren. Ich komprimiere die Bilder immer vor dem Hochladen. Hierzu gibt zum einen ein Online Tool mit dem Namen TinyPNG, welches sauber und gut komprimiert. Du kannst mehrere Bilder hochladen und dann als .zip-Datei herunterladen. Deine komprimierten Bilder befinden sich dann alle in einem Ordner. Alternativ lassen sie sich auch in die Dropbox sichern.
Lokal benutze ich ebenso häufig des Tool ImageOptim, das es als App für den Mac gibt. Die Ergebnisse sind so gut wie bei TinyPng, allerdings entfällt das Hochladen und erneute Speichern.
Look & Feel mit Canva
Canva ist ein super Tool, nicht nur für Webdesignerinnen. Hier lassen sich einfache Logos erstellen, Social Media Post, Präsentationen und vieles mehr. Selbst in der kostenfreien Variante ist ein Webdesign Tool, auf das ich nicht verzichten möchte.
Ich nutze es um das Look & Feel für meine Kundinnen greifbar zu machen, meist in Form eines Moodboards. Es gibt zahlreiche Vorlagen, die du mit Drag & Drop einfach zu deinen eigenen machen kannst und anschließend lassen sich diese als PDF oder Bild herunterladen.
Schriften und (Child-)Themes
Immer häufiger möchten meine Kundinnen eine zusätzlich Schrift für ihre Website kaufen oder benötigen ein Child-Theme für Divi/Genesis. Hierzu nutze ich gerne Creative Market, eine schier unerschöpfliche Quelle für Fonts, Templates und Child-Themes. Die Preise richten sich nach der Verwendung, in der Regel solltest du Commercial wählen.
Entwickungsumgebung
Immer dann, wenn du für das Relaunch einer bestehenden Seite beauftragt wirst, wirst du auf eine eine Entwicklungsumgebung zurückgreifen müssen, damit die “alte Seite” noch benutzt werden kann. Hier habe ich lange Zeit eine lokale Entwicklungsumgebung benutzt. WordPress läuft dann auf deinem lokalen Rechner, was natürlich auch super ist, um Tools zu testen.
Lange Zeit habe ich mit den gängigen und bekannten Lösungen wie Xamp oder Mamp gearbeitet, welche für eine Website kostenfrei ist. Allerdings kann es hier Probleme mit Programmen wie Teamviewer oder Skype geben, da sie die gleichen Ports belegen oder mit der Firewall, die den Server blockiert.
Die Lösung: LocalWP
LocalWP aus dem Hause flywheel ist eine kostenlose Alternative zu Mamp oder Xamp. Du meldest dich auf der Seite einmal an und kannst das Tool herunterladen. Nach der Installation, welche bei mir weder beim Mac noch unter Windows Probleme bereitet hat, kannst Du Deine erste WordPress Seite einrichten.
Hierzu wirst Du durch ein Menü geführt in dem du deine Zugangsdaten festlegst und schon wird WordPress installiert. Du musst weder eine Datenbank anlegen noch sonst irgendetwas einrichten, perfekt also für Menschen wie ich, die sich nicht lange mit der Technik herumschlagen möchten. Ich habe noch nicht getestet, wieviele Seiten du gleichzeitig erstellen kannst, mehr als zehn hatte ich noch nicht am Start.
Das Coole an dem Webdesign Tool ist die BluePrint Funktion. Hierzu installierst du alle notwendigen Plugins und dein Lieblingstheme, gibst deine Lizenzschlüssel ein und machst alle notwendigen Grundeinstellungen. Diese WordPress-Installation kannst du nun in LocalWp über die rechte Maustaste als BluePrint abspeichern.
Sobald du eine neue WordPress Installation machst, kannst du bei Schritt 1 “Advanced Options” diesen BluePrint zuweisen und voilá sind das Theme und alle notwendigen Plugins installiert. Das spart jede Menge Zeit.
Raidboxes Dev-Boxen – Webdesign Tools für Live Entwicklung
Sei einer Weile habe ich einen neuen Hoster: Raidboxes. Er hat nicht nur ein serverseitiges Caching und BackUp, als Entwicklerin kannst du auch die Möglichkeit nutzen, Kundenseiten auf den sogenannten Dev-Boxen zu entwickeln. Dir stehen drei Boxen jeweils 90 Tage zur Verfügung und wenn die Kundin bei Raidboxes bleibt, bekommst du eine Provision.
Das Gute daran ist, dass deine Kundin den Fortschritt ihrer Seite live verfolgen kann und Änderungen zeitnah umgesetzt werden können. Das ist bei der lokalen Entwicklungsumgebung leider nicht möglich, deshalb nutze ich diese auch nur, um neue Plugins oder Themes zu testen.
Tools zum Testen der mobilen Darstellung
Mobiltauglichkeit ist für alle modernen Webseiten Pflicht. Physische Geräte sind hier immer erste Wahl, aber wer hat schon drei unterschiedliche Smartphones zur Hand. Hier sind die zusätzlichen Funktionen der Browser sehr hilfreich:
- Bei Firefox unter Extras/Webentwickler/Bildschirmgrößen testen
- Im Google Chrome unter weitere Tools/Entwicklertools und dann in der Menüleiste ganz links das Bildschirmsymbol auswählen (alternativ STRG + Shift+M)
- im Safari über Entwickler/im responsive Modus wechseln
Die Seite Am I Responsive ist ein ein tolles Online Tool und zeigt dir deine Seite auf den verschiedenen Bildschirmen an. Du gibst hierzu nur die URL der Seite ein und schon wird diese dargestellt.
Performance Tools
Wenn die Seite fertig ist solltest du diese auf jeden Fall noch auf ihre Performance testen.
Hilfreiche kostenlose Online-Tools sind hier:
- GTmetrix zeigt nicht nur ein Wasserfall-Diagramm an, sondern auch den PageSpeed- und YSlowScore und gibt Optimierungs-Tipps. Cool ist es, dass du hier auch Websites miteinander vergleichen kannst.
- Pagespeed Insight von Google zeigt dir wo du die Ladezeit deiner Website verbessern kannst. Das können lange Antwortzeiten deines Servers, unkomprimierte CSS-Dateien oder JavaScript-Dateien, Bilder usw. sein. Dieses Tool misst nicht die Ladzeit selbst, sondern zeigt das Verbesserungspotential deiner Seite auf. Es unterscheidet zudem zwischen mobil und Desktop. Das Tool hat auch einen Nachteil: Du musst jede Seite Deiner Website einzelnen testen.
Aber auch hier gibt es eine gute Alternative, der Pagespeed-Test von Experte.de. Hier kannst du deine komplette Seite mit allen Unterseiten oder eine Liste ausgewählter URL’s deiner Website testen. Getestet wird dann ebenfalls mit Pagespeed Insight. Du bekommst eine Liste mit den Scores und kannst für die zu verbessernden Seiten direkt Pagespeed Insight aufrufen und dir das Verbesserungspotential anzeigen lassen. - Pingdom zeigt nicht nur die Ladezeit für verschiedene Orte auf der Welt an, sondern auch den PageSpeed-Score mit Verbesserungs-Tipps, eine genaue Aufschlüsselung der geladenen Dateien (inkl. Header-Informationen) und ein Wasserfall-Diagramm.
Alternativ kannst Du auch das Google Chrome Dev-Tool Lighthouse benutzen
Noch mehr Webdesign Tools…
Natürlich gibt es noch sehr viel mehr Webdesign Tools, ich möchte hier noch einige Wenige aufführen, welche ich ebenfalls regelmäßig benutze:
- Migration von Dev-Box oder lokaler Entwicklungsumgebung:
- All in One Migrate Plugin
- WordPress Themes, die bei mir häufig zum Einsatz kommen:
- WordPress Plugins, die ich auf fast jeder Seite benutze:
- nützliche Generatoren im Web:
Puh, das ist doch mehr geworden, als ich dachte. Natürlich ist das nur ein kleiner Auszug meiner Webdesign Tools. Ich habe all die aufgeführt, die ich sehr häufig benutze. Ich hoffe, du kannst davon etwas mitnehmen.
Alles Liebe
Sabine
powered by Borlabs Cookie
Vielen Dank für deine Erwähnung von RAIDBOXES Sara!
VG Torben & Team