Meine Top Webdesign Tools

Design + Branding, Webdesign Wordpress

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

Design tools für Webdesign

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.

Adobe Farbrad

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

Depositphotos

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

TinyPng

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

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

localwp

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.

BluePrint LocalWP

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

Portfolio Nadja Neumann
Am I Responsive

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

GTmetrix perfomance Tool

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:

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

Kontakt-erstgespräch-SaRa-webdesign-branding-900px-header

Herzlich willkommen!

Hallo, ich bin Sabine! Seit 2014 begleite ich Frauen dabei, ihr Business zum Erfolg zu führen. Strategische Beratung ist der Anfang. Das Ergebnis sind individuelle WordPress-Websites mit Perfektion. Hier gebe ich einfache Tipps und Einblicke für Unternehmerinnen, die ihre digitale Präsenz verbessern wollen

Kostenlosen Website-Planner zum Download

Starte dein Webprojekt mit einen soliden Plan. Meinem kostenlosen Website-Planner hilft dir dein neues Webprojekt  optimal vorzubereiten.

1 Kommentar

  1. Torben

    Vielen Dank für deine Erwähnung von RAIDBOXES Sara!
    VG Torben & Team

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

12 feminine Google Schrift- & Farbekombinationen

12 feminine Google Schrift- & Farbekombinationen

Es ist schwer eine feminine Google Schrift und Farben für die Webseite zu finden, denn es stehen Tausende von Möglichkeiten zur Auswahl und noch mehr Kombination von Google Schriften und Schriftarten und Farben sind Dein Markenzeichen, sie spiegeln Deine Persönlichkeit auf Deiner Webseite wieder.

SEO – 7 Punkte, die Du in der Konzeptphase beachten solltest!

SEO – 7 Punkte, die Du in der Konzeptphase beachten solltest!

Macht es dann nicht Sinn, die Suchmaschinenoptimierung schon beim Erstellen Deines Konzeptes zu berücksichtigen?

Die Antwort hierauf ist ein klares JA! Und es gibt viele Vorteile auch für Deine Konzeptionsphase, wenn Du Dir ganz am Anfang über die Suchmaschinenoptimierung Gedanken machst und entsprechend handelst.