Webtools für

Website Design

Es folgt nun sein sehr schöner Teil. Du kannst nun deine Wohnung einrichten. Es ist wichtig, dass du und deine Besucher sich wohl fühlen. Du hast es nun in der Hand etwas schönes zu gestalten. Freu dich darauf und leg los.. 
Icon-Design.png
Icon-DesignRules.png

Design Regeln

 
Erscheinungsbild magazine
  • Bei Firmen fällt dies unter den Namen "Corporate Design".

  • Deine Website sollte auf jeder Website die gleiche Struktur (siehe auch  Website Aufbau ) und eine konstante Farbgebung aufweisen. Wähle ein paar Farben dropletdropletdroplet aus, die deine Website ausmachen.

  • Das Logo ist wichtig und sollte konsequent auf allen Medien und Marketing Aktivitäten verwendet werden. Es ist deine Identität. Bei Firmen heisst dies "Corporate Identity".

  • Die Website muss heutzutage mobile Endgeräte freundlich sein. Versuche die Website so zu gestalten, dass sie auf allen Medien, wie Computer, Tablet und Handy gut aussieht. Dies nennt sich "Responsive Design", die Website passt sich dem jeweiligen Endgerät an.

Lesbarkeit zoom-in
  • Minimum Schriftgrösse 14 Pixel verwenden, damit der Text auf allen Geräten gut lesbar ist.

 

  • Genügend Absätze verwenden, erleichtern das Lesen auf dem Bildschirm.

  • Wichtige Wörter im Text hervorheben, unnnötige Wörter streichen.

Es gibt einen sehr guten Artikel news hierzu "The Most Important Rule in  UX Design that Everyone Breaks" . Er ist in Englisch, aber einfach geschrieben und mit Bildern untermalt, somit einfach verständlich.

 Beispiel kuba-reisebericht.ch  

  • Lesbarkeit: Minimum Schriftgrösse 14px

  • Logo habe ich keines verwendet, da ich nicht vorhabe die Website zu vermarkten.

  • Struktur der Seiten mit den verschiedenen Orten ist immer gleich, dies hilft dem Besucher sich zu orientieren. Die Einstiegsseite (Homepage) ist mit vielen Fotos ausgestattet. Da es sich um einen Reisebericht handelt spricht dies die Besucher an.

Schreibe dir die wichtigen Punkte für dein Design auf pencil

Schreibe es in dein Online Notizbuch...
profile   Evernote      
 
dropbox   Dropbox Paper      
 
google   Google Keep 

 

 Tipp  Nimm ein fertige Vorlage (Theme) um schnell zu einer schönen und funktionellen Website zu gelangen. Ich liebe das Divi Theme von elegantthemes.com.

Icon-LogoErstellen.png

Logo Erstellen

 
Cooles Logo spray
  • Ein paar einfache und effektive Tools welche dir helfen können ein Logo zu erstellen

 Beispiel kuba-reisebericht.ch  Ich habe hierzu kein Logo erstellt, da dieser Reisebericht einmalig ist und ich keine Marke aufbauen möchte. Die Kuba Fotos bei der Homepage sprechen für sich und ein Logo ist nicht notwendig aus meiner Sicht.

 

 Tipp  Benutze die oben erwähnten Tools, investiere ein wenig Zeit um damit Ideen zu erhalten. Die Kreation eines Logo braucht ein wenig Zeit zum überdenken.

Icon-Logomkr.jpg

Logomkr

plus-circleGutes Tool um einfach ein Logo zu erstellen

plus-circleCoole Icon "Multi Color" zur Auswahl

plus-circleEinfach zu bedienen

plus-circleKostenlos anwendbar (logomakr muss vermerkt werden)

Icon-Affinity-Designer.png

Affinity Designer

plus-circleAffinity Designer, wie Adobe Photoshop, einfach viel preiswerter

plus-circleTool sehr schön umgesetzt

minus-circleKostenpflichtig, aber sehr gutes Preis-/Leistungsverhältnis

minus-circleKein WebTool, muss installiert werden

Icon-Canva.png

Canva

plus-circleWeb-basierend, kein Download nötig

plus-circleKostenlos anwendbar, in Web-App Käufe

plus-circleViele Vorlagen zur Auswahl für viele Themen

Icon-gifmaker.png

GIF Maker

plus-circleSchnell und einfach ein animiertes Bild erstellen (GIF Format)

plus-circleKostenlos

Icon-flaticon-generic.png

Flaticon

plus-circleSehr grosse Auswahl an Icons 

plus-circleEinfach zu bedienen

plus-circleKostenlos anwendbar (Flaticon muss vermerkt werden)

Icon-BildQuellen.png

Bild Quellen

 
Schöne ansprechende Fotos image
  • Fotos sind sehr wichtig und ich zeige dir ein paar gute Bildquellen dazu.

Icon-pixabay.png

Pixabay

plus-circleGrosse Auswahl an Bildern

plus-circleEinfach zu bedienen

plus-circleKostenlos anwendbar

Icon-pexels.png

Pexels

plus-circleGrosse Auswahl an Bildern

plus-circleEinfach zu bedienen

plus-circleKostenlos anwendbar

Icon-fotolia.png

Fotolia

plus-circleSehr grosse Auswahl an professionellen Bildern

plus-circleEinfach zu bedienen

minus-circleKostenpflichtig, dafür profesionellere Bilder

Es gibt noch etliche andere Anbieter, wie Adobe Stock, Shutterstock, iStock, usw..

Aber Achtung. Schaue bitte immer zuerst, ob und wie du die Fotos benutzen darfst. Ein guter Artikel hierzu bei eRecht24.

 Beispiel kuba-reisebericht.ch  Für den Reisebericht habe ich alle meine eigenen Fotos verwendet, welche ich mit meinem Smartphone geknipst habe und benötigte keine anderen Bildquellen.

 Beispiel momo-bar.ch  Für unsere Restaurant Website habe ich am Anfang für die Einstiegs-Seite ein professionelles Foto mit Momo's verwendet. Über die Zeit habe ich dann genug eigene Fotos und Videos erstellt und das ursprüngliche Foto abgelöst.

Icon-Bildbearbeitung.png

Bild Bearbeitung

 
Bilder verschönern, auf deine Bedürfnisse anpassen image tool

Es gibt unzählige Gründe um Bilder anzupassen auf der Website.

  • Bilder in der Grösse skalieren und auch schauen, dass sie möglichst wenig Ladezeiten benötigen (Komprimierung)

  • Bilder optisch verschönern und nachbearbeiten

  • Bilder farblich ändern und Teile davon ausschneiden

Es gibt sehr viele Bildbearbeitungsprogramme hierzu und ich kann dir hier einfach ein paar Tipps von meiner ​Seite auflisten.

Icon-Affinity.png

Affinity Photo

plus-circleAffinity Photo, wie Adobe Photoshop, einfach viel preiswerter

plus-circleTool sehr schön umgesetzt

minus-circleKostenpflichtig, aber sehr gutes Preis-/Leistungsverhältnis

Icon-pixlr.png

PIXLR

plus-circleWeb-basierend, kein Download nötig

plus-circleKostenlos anwendbar

minus-circleBenötigt Flash im Web-Browser

minus-circleWerbung bei kostenloser Version

Icon-Gimp.png

GIMP

plus-circleGrosse Community welche das Program ständig verbessern

plus-circleKostenlos Opensource

minus-circleTool Design nicht sehr schön

 Beispiel kuba-reisebericht.ch  Ich beware meine Fotos in der iPhoto Bibliothek von Apple auf. Im iPhoto Programm kann ich die Fotos gleich bezgl. Aussehen optimieren auf einen Klick. Ich habe dann Affinity noch verwendet um die optimale Grösse des Bildes einzustellen, damit die Ladezeiten optimiert sind.

 

 Tipp  Verwende das Tool mit welchem du dich schon auskennst. Jedes Tool bietet so viele Funktionen und es braucht viel Einarbeitungszeit. Ich habe vorher Photoshop benutzt, welches ziemlich aufwendig ist um sich einzuarbeiten. Ich habe dann aus Kostengründen zu Affinity Photo gewechselt. Die Bedienung ist ziemlich ähnlich, aber intuitiver.