Kategorie: Tipps

Neueste Beiträge

Eine Website sollte nicht nur inhaltlich immer auf dem neuesten Stand sein. Heute ist auch die sogenannte Usability, also die Nutzbarkeit, immer wichtiger. Die User greifen mit unterschiedlichen Geräten auf eine Website zu und wollen stets die bestmögliche Darstellung der Inhalte haben.

Das richtige Webdesign spielt optisch und technisch eine große Rolle. Mit welchen Tools du das Design untersuchen und optimieren können, erfährst du in diesem Text.

Die einfachste Möglichkeit, um die eigene Website zu prüfen, ist der sogenannte Entwicklermodus im Webbrowser. Diese Funktion unterstützen inzwischen alle gängigen Browser. Sie anzuwenden ist genauso einfach wie effektiv. Durch das Aktivieren dieser Funktion kann ein Bildschirm einer beliebigen Größe imitiert werden. So lässt sich überprüfen, wie die Website beispielsweise auf einem Smartphone oder auf einem Tablet dargestellt wird.

So erstellst du die Elemente des Webdesigns

Sketch

Soll ein neues Webdesign erstellt werden, geht dies mit Software-Anwendungen, die speziell für diesen Einsatz konzipiert sind. Eine davon heißt Sketch.

Mit Sketch ist es einfach möglich, die nötigen Elemente zu gestalten. Das können Button, Banner oder Grafiken sein, die im Hintergrund liegen. Sketch ist einfach anzuwenden und kann intuitiv innerhalb kurzer Zeit erlernt werden. Die gleichen Arbeitsergebnisse können zwar mit Bildbearbeitungs- oder Vektorprogrammen erzielt werden. Diese sind aber aufwendiger zu lernen. Das ergibt nur wenig Sinn, wenn die Fähigkeiten lediglich einmal für die eigene Website genutzt werden sollen.

Eine Schnittstelle zwischen den genannten Arbeitsbereichen bietet die Anwendung Adobe XD. Es ist die Quintessenz aus den Adobe Programmen Photoshop, Illustrator und Dreamweaver und kann genutzt werden, um ein Webdesign zu erstellen. Für Anwender der Adobe Programme ist es nicht schwer, sich in Adobe XD zurechtzufinden.

Mit Figma gemeinsam an einem Projekt arbeiten

Willst du nicht nur alleine an einem Webdesign arbeiten, dann ist Figma eine gute Anwendung. Sie kann über den Browser geöffnet werden und bietet mehreren Nutzern die Möglichkeit, gleichzeitig an einem Projekt zu arbeiten. Figma über den Browser zu steuern, ist nur eine Möglichkeit. Für die gängigen Betriebssysteme gibt es auch Installationsdateien.

Als letztes Tool möchten wir Ihnen Avocode vorstellen. Hier liegt die Besonderheit darin, dass es Entwürfe im Dateiformat von Photoshop oder Sketch importieren kann. Sind diese als Vorlage vorhanden, muss die kreative Leistung nicht noch einmal von vorne geleistet werden. Es geht dann nur noch um die Umsetzung.

Das muss ein Webdesign Tool können

Ein gutes Webdesign Tool zeichnet sich durch die folgenden Eigenschaften aus. Es kann sowohl direkt an der grafischen Oberfläche als auch in den Codes gearbeitet werden. So können Fehler schnell gefunden werden und gleichzeitig sind die Programme für kreative Köpfe und technikaffine Programmierer nutzbar. Weiterhin sollte der Entwickler ein großes Support-Angebot bereitstellen. Das bedeutet, dass er sowohl bei technischen Problemen weiterhilft, als auch bei der Implementierung behilflich ist. Außerdem helfen Webinare oder Tutorials, in denen die Anwendung des Tools geprobt werden kann. Bietet der Entwickler dies nicht an, gibt es meist große Communitys, die entsprechenden Content publizieren.

Nun haben wir Ihnen gezeigt, welche Tools im Bereich des Webdesigns sinnvoll sind und ihnen weitere Tipps zur Auswahl der richtigen Software an die Hand gegeben. Meistens bieten die Entwickler kostenfreie Testversionen an. Mit ihnen kannst du dich mit den Anwendungen vertraut machen und schauen, welche für Ihre Zwecke am besten geeignet ist.

Für eine eigene Webseite sprechen mehrere Gründe. Im geschäftlichen Bereich ist es oft ein „must-have“, unter einem eigenen Namen erreichbar zu sein. Auch für private Nutzer oder Vereine mit gehobenen Ansprüchen sind eigene Webseiten die Antwort auf entsprechende Anforderungen. Hierzu gehören die komplette Kontrolle über die präsentierten Inhalte, die Privatsphäre sowie Nutzung einer individuellen Email-Adresse.

Der Weg hin zu einer Webseite ist nicht schwer, aber lang

Vereinfacht lässt sich die Planung in drei Bereiche unterteilen, die wiederum in kleinere Einzelschritte aufteilbar sind:

Phase 1: Festlegung des Umfangs der Webpräsenz

  1. Definition, wer die Seite betrachten soll (Zielpublikum)
  2. Welche Inhalte werden bereitgestellt?
  3. Wieviele Inhalte werden bereitgestellt?
  4. Welche Änderungsrate haben die Inhalte?
  5. Wer soll die Inhalte bearbeiten und pflegen?

Phase 2: Technische Umsetzung und Hosting

  1. Auswahl des Hostingtyps
  2. Auswahl der Websoftware (CMS, Forum, Videostream etc.)
  3. Auswahl des Hosters
  4. Planung Backup/Recovery
  5. Planung Domainname

Phase 3: Implementierung

  1. Fertigstellung Grundsystem
  2. Einpflege von Inhalten
  3. Inbetriebnahme Nebentechnik wie Email oder Dateiablage
  4. Rollout incl. Funktionstests

Phase 1

In der Phase 1 sind alle Vorüberlegungen zu den Inhalten zu leisten, die dem zukünftigen Betrachter präsentiert werden sollen. Die Inhalte selbst (Texte/Bilder/Videos) und deren Präsentation (Seriös, Freizeit, Lifestyle etc.) werden definiert.

Daraufhin folgt eine Abschätzung der zu bewältigenden Datenmengen. Dieses hat direkte Auswirkungen auf die Auswahl des Hostingsystems in Phase 2. Wichtig ist ebenfalls, wer Inhalte in die Webseite einbringt: Lädt nur der Besitzer ab und an ein Foto hoch oder bloggt seine Tageserlebnisse, oder läuft hier ein öffentliches Forum mit Kommentarfunktion?

Phase 2

In Phase 2 wird festgelegt, welcher Hostingtyp für die Anforderungen erforderlich und geeignet ist. Die Auswahl reicht hier von recht simplen sog. „Webbaukästen“, die schnell zusammengeklickt sind, über ausgewachsene gehostete CMS (Content Management Systeme) wie WordPress, Typo3, Drupal) bis hin zu frei nutzbaren Webspaces. Wichtig ist hier die Abschätzung, ob für das System SQL-Datenbanken benötigt werden, damit der passende Tarif beim Hostinganbieter ausgewählt werden kann. Abhängig von der zu erwartenden Anzahl der Seitenabrufe sollte der Traffic möglichst inclusive sein, um teure Überraschungen zu vermeiden.

Phase 3

In Phase 3 wird geplant, in welcher Folge und Meilensteinen die Implementierung vonstatten geht. Hier muss ein Grundsystem konfiguriert werden, es werden Templates erstellt, um ein einheitliches Look&Feel zu haben, Inhalte sind einzuspielen.
Emailfunktionalität sowie Backup und Recovery sollten in dieser Phase vor Going-Live getestet sein. Das Thema Datensicherung sollte ebenfalls geklärt sein, ob der Hoster diese erledigt oder der Betreiber selbst tätig werden muss.

Fazit:

Der Weg ins Web ist heute einfacher als je, aber trotz oder gerade wegen der Auswahl an Wegen dahin mit einigen Stolperstellen behaftet. Eine gute Planung hilft hier, den Überblick zu behalten und unliebsame Überraschungen zu vermeiden. Gerne übersehen, aber sinnvoll: rechtzeitige Tests nach jedem Abschnitt helfen, Fehler rechtzeitig zu erkennen. Diese können dann beseitigt werden, bevor sie sich auswachsen.

Wer an das kreative Arbeiten mit Bildern und Grafiken denkt, stößt sofort auf den mächtigen Marktführer, die Creative Cloud von Adobe. Für Profis finden sich dort außer Photoshop eine ganze Auswahl weiterer Programme. Für Grafiker sind InDesign und Illustrator hochwertige Arbeitswerkzeuge. Diese Programme haben als Abomodelle nicht nur Ihren Preis, sie erfordern einen aufwendigen Lernprozess. Für Einsteiger gibt es günstige Alternativen. Manche sind bereits auf dem Computer installiert.

Die Alternativen

1. Lightroom, Photoshop Elements

Aus der Adobe-Familie stammen für einfachere Anwendungen bei Bildern Lightroom und Photoshop Elements. Lightroom eignet sich vor allem, um die eigenen Bilder zu katalogisieren.

2. Affinity und DxO PhotoLab

Mit Affinity hat Adobe seit ein paar Jahren einen ehrgeizigen Mitbewerber bekommen. Interessant ist die kontinuierliche Fortentwicklung dieses Programms: Zusätzlich findet man ein Angebot für Designer und ein Programm für Publisher in der Betaversion vor. Affinity ist nicht kostenfrei. Gleiches gilt für das renommierte Programm DxO PhotoLab.

3. GIMP

Für die Bearbeitung von Photos gibt es mit GIMP eine leistungsstarke kostenfreie Open Source Alternative. Der Aufbau von GIMP ähnelt dem von Photoshop. Während Photoshop jedoch in der neuesten Version die Zugänglichkeit durch Trainingsmodule verbessert hat, ist GIMP für geduldige Tüftler geeignet. Wer bereit ist, sich einarbeiten, wird zu ansehnlichen Ergebnissen gelangen. Ein wichtiges Thema in der Bild- und Grafikbearbeitung ist das Freistellen von Motiven. Das kann GIMP sehr gut.

4. Picasa

Für Neulinge war Picasa, ein einfaches, kostenloses Programm von Google, eine gute Sache, die leider nicht mehr unterstützt wird. Man kann sie trotzdem weiterhin verwenden. Tolle Effekte bietet die NIK-Collection von Google mit ihren künstlerischen Filtern. Diese ist allerdings ein Plug-in für Adobe Produkte.

5. Irfanview

Für das Betrachten, Ordnen und einfache Bearbeitungen hat man mit dem beliebten Programm IrfanView eine weitere Option, ebenso, wie mit dem vor allem für mobile Anwendungen konzipierten Photoshop Express.

Ausprobieren, testen…

Solche kreativen Bildbearbeitungsprogramme gibt es in Hülle und Fülle. Spätestens hier ist Vorsicht geboten. Man kann viel Zeit mit dem Ausprobieren verschiedener Produkte verschwenden, um festzustellen, dass sie weder die Qualität liefern, noch das zu leisten imstande sind, wonach man gesucht hat.

Oft stößt man auf unausgereifte Bearbeitungssoftware, die häufig abstürzt (womit Stunden der Bildbearbeitung verloren sind). Am schlimmsten ist es, wenn solche Programme aus einer unseriösen Quelle stammen. Eine gute Orientierung in Bezug auf Freeware und vertrauenswürdige Quellen geben die großen Computerfachmagazine.

Betriebgseigene Windows- und Mac-Tools nutzen

MacOS

Neben Freeware sollte man die Möglichkeiten der eigenen Betriebssysteme auf dem Computer nicht unterschätzen. Nach wie vor ist der Mac-Besitzer im Vorteil. Neben „Photos“ von Apple, womit sich Farben steuern lassen, ist das „Vorschau„-Tool ein hervorragendes Werkzeug. Damit lassen sich sogar Motive freistellen.

Windows

Mit der Foto-App in Windows 10 wurden die kreativen Möglichkeiten der Fotobearbeitung enorm verbessert, jedoch liegt bei den Bordprogrammen von Windows der Fokus stärker auf den Amateuren.

Zusammenfassung:

  • Creative Cloud von Adobe und Affinity bieten professionelle Bild- und Grafikbearbeitung.
  • Affinity und DxO Photolab sind günstigere Kaufmodelle.
  • GIMP und andere Freeware sind Alternativen, haben aber Grenzen in der Qualität und Handhabung.
  • Bei Freeware auf seriöse Herkunft achten.
  • Zielsetzungen bei Kaufentscheidung im Auge haben: Geht es um das Katalogisieren, das technische Verbessern oder tief greifende kreative Gestaltung?

Seit Kurzem hast du deine eigene Website, bist dir aber nicht sicher, wie du sie am besten aufbauen kannst? Du willst wissen, wie du das Design deiner Website ansprechend und interessant wirken lässt und somit gut bei den Besuchern ankommt? Dann bist du hier genau richtig, denn hier kommen einige Tipps und Tricks, die dir weiterhelfen können.

Webdesign ist eine Verbindung aus Technik und Kunst

Beim Erstellen einer Website muss zu allererst Folgendes beachtet werden: das Design deiner Website muss eine Verbindung zweier Komponenten sein, nämlich Technik und Kunst. Deine Seite wird nicht funktionieren, wenn sie zwar ein wunderschönes buntes Design hat, aber die Menüs und Unterpunkte komplett durcheinander sind. Andersherum spricht deine perfekt codierte Webseite kein Publikum an, wenn sie nur in schwarz und weiß gehalten ist.

1. Einfach und gut bedienbar

Der Aufbau deiner Website sollte übersichtlich und organisiert sein, des Weiteren ist eine leichte Bedienbarkeit sehr wichtig. Alles nach dem Motto: weniger ist mehr! Auf guten Website verhelfen gerade minimalistische Gestaltungselemente zu einem außergewöhnlichen Design.

2. Die Optik

Es gibt einige Dinge, die beim optischem Design eingehalten werden sollen. Zum Beispiel muss die Schrift nicht zwangsläufig schwarz auf weiß sein, jedoch sollte sie sich vom Hintergrund abheben; Kombinationen, die sich beim Betrachten mischen wie grün und blau, sollte man vermeiden. Auch hilft es, Farben passend zum Thema der Website zu wählen. Oder hast du schonmal eine pinke Seite für Beerdigungen gesehen?

3. Schriftarten deiner Website

Auf Websiten sollten möglichst nur Standart Fonts verwendet werden. Alle noch so schönen Schriftarten, die du im Internet finden kannst, müssten sich die Benutzer deiner Website erst herunterladen, um sie korrekt anzuzeigen. Auch kann es helfen, mehrere Schriftarten in den HTML Code einzufügen.

4. Ebenfalls einfach: das Layout

Das Layout deiner Seite sollte klar strukturiert sein. Sonst könnte es mögliche Besucher verwirren und ihnen die Handhabung und Bedienung unnötig erschweren. Dabei hilft, ein paar Kenntnisse zum Thema HTML oder CSS Codierungen zu erwerben, welche es dir einfacher machen, ein ansprechendes Layout zu entwerfen.

5. Einige Tipps zum Markup

Wo wir schon bei HTML Codes sind: als Mark-up wird das aus dem Code bestehende Grundgerüst deiner Website bezeichnet. Wichtig ist die Struktur des Mark-ups, z. B. sollten Überschriften und Absätze auch als solche gekennzeichnet werden. Die Validität (Einhaltung von Standards) ist ebenfalls ein Punkt, der nicht missachtet werden sollte. Dein Code sollte möglichst in dem Standart-Doctype „XHTML 1.0 Strict“ geprüft sind, welches sicherstellt, dass deine Website in allen Browsern von Firefox bis Safari möglichst gleich dargestellt wird.

6. Eine Website, die mit allen Endgeräten kompatibel ist

Egal ob wir mit dem Smartphone, Tablet oder Laptop im Internet sind, deine Website muss auf jedem Gerät gut angezeigt werden. Deswegen ist es sinnvoll, die Codes der Website und Bildschirmauflösungen der Fotos zu verändern, damit man Probleme auf mobilen Geräten vermeiden kann. Wenn du keinen Spezialist beauftragen willst, können Content-Managementsysteme dir Hilfe durch verschiedene Vorlagen anbieten.

Also wir halten fest:

  1. Einfaches Design und Layout
  2. Passende und ansprechende Optik
  3. Strukturiertes Mark-up
  4. Kompatibel für alle Geräte

Wenn du diese Punkte beachtest, steht der perfekten Website nichts mehr im Wege.

Viele Webseiten-Betreiber messen dem Design allenfalls eine untergeordnete Bedeutung bei. Sie glauben, gutes Design erfülle nur dekorative Zwecke und sei für den Erfolg ihres Internetauftrittes nicht unbedingt notwendig. Priorität wird der sogenannten Usability gegeben, ob also der Besucher der Seite seine unterstellte Absicht, sich zu informieren, zu vergnügen oder Einkäufe zu tätigen optimal umsetzen kann. Gestalterische Aspekte treten in den Hintergrund. Dabei ist gutes Design für die Entscheidung eines Nutzers, auf einer Seite zu bleiben, extrem wichtig.

Nutzerzahlen werden oft fehlinterpretiert

Ein Blick in die Statistiken von Webseiten verführt deren Betreiber oft dazu, Verweildauer und Seitenaktivitäten mit dem Inhalt und der Usability des Webangebots zu erklären. Dabei sind sich Psychologen einig, dass die Fülle des heutigen Angebots eine objektive Abwägung des praktischen Nutzens einer Seite auf den ersten Blick gar nicht zulässt. Da der Besucher für seinen ersten Eindruck nur eine begrenzte Zeit aufwenden kann, wird die Entscheidung über das weitere Verweilen auf der Seite innerhalb kürzester Zeit getroffen, oft nur in Millisekunden. Wesentlicher Faktor ist dabei der erste optische Eindruck, also das Design beziehungsweise seine zentralen Elemente wie Farbgebung und Grobstruktur. Nur wenn dieser erste Eindruck stimmt, wird sich der durchschnittliche Nutzer überhaupt weiter mit dem konkreten Internetangebot beschäftigen. Verweildauer und Seitenaktivitäten hängen also ganz entscheidend von der Qualität des Designs einer Seite ab.

Kundenbindung durch Design

Designfaktoren sind aber auch für das weitere Nutzerverhalten von Bedeutung. Ist der erste Eindruck vorbei und der Seitenbesucher geblieben, spielt das Design nach wie vor für seine Verweildauer eine Rolle. Sein Nutzererlebnis wird maßgeblich von der Ästhetik der Webseite bestimmt. Vieles spricht dafür, dass eine inhaltlich schlechte Performance oder eine mäßige Bedienbarkeit von Webseiten unter bestimmten Voraussetzungen mit hochwertigem Design kompensiert werden kann. Auch subjektive Urteile über den Inhalt, die nichts mit der Usability zu tun haben, wie Glaubwürdigkeit oder Seriosität lassen sich durch gutes Design beeinflussen. Dies geschieht meist ganz unbewusst. Inhalt und Benutzerfreundlichkeit werden in Umfragen von Kunden regelmäßig für wichtiger gehalten. Diese Aspekte sind natürlich auch entscheidend für den Erfolg eines Webangebots, aber eben nicht allein. Stimmt nicht zuletzt aufgrund des guten Designs der Gesamteindruck von einer Webseite, steigt auch die Bereitschaft der Nutzer, die Seite erneut aufzurufen oder sogar weiterzuempfehlen. Sicherlich bleibt das Design in erster Linie entscheidend für den ersten Eindruck – für den es bekanntlich keine zweite Chance gibt. Je mehr sich ein Nutzer für den konkreten Inhalt eines Webangebots interessiert, desto geringer wird die Bedeutung des Designs. Irrelevant wird es jedoch nie.

Gutes Design lohnt sich

Für ein gutes Design gibt es keine feste Regeln. Design ist in erster Linie Ästhetik und deren Empfinden unterliegt dem Zeitgeschmack, dem kulturellen Hintergrund und der Verwendung für eine bestimmte Zielgruppe oder Branche. Einige übergreifende Erkenntnisse gibt es zwar – wie messbare Erwartungen der Nutzer für bestimmte Elemente der Seite an bestimmten Stellen, die Platzierung der Navigation oder eines Logos und so weiter. Der Rest ist aber Kreativität, die Mediengestalter und visuell ausgebildete Experten besitzen. Eine Investition, gutes Design einer Seite durch Fachleute entwerfen zu lassen, wird sich lohnen.