Kategorien
Design Social Media Webdesign

Logogestaltung in Zeiten sozialer Medien: Quadratisch, praktisch, gut?

Die Gestaltung eines Logos ist seit jeher den technischen Gegebenheiten und den zur Verfügung stehenden Medien unterworfen. So war es zu Zeiten des Faxes wichtig, dass ein farbiges Logos so kontrastreich angelegt war, dass es beim Fax auch in schwarz-weiß funktionierte. Mit den sozialen Netzwerken kamen neue Anforderungen auf Gestalter zu, die sich vor allem in der Logoentwicklung der letzten Jahre widerspiegeln.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design HTML/CSS Webdesign

SVG: So verwendest du es richtig

Das SVG-Format hat sich in vielerlei Hinsicht zu einer zeitgemäßen Alternative zu Flash entwickelt. Denn es ist nicht nur vektorbasiert, sondern ermöglicht auch Animationen und Interaktionen. Aufgrund der unterschiedlichen Möglichkeiten, Animationen zu erstellen und SVGs in ein Webprojekt einzubinden, solltest du folgende Tipps beachten, damit auch alles so funktioniert, wie es soll.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Webdesign

Better Portable Graphics: Das neue Bildformat kommt nicht voran

JPEG und PNG sind die gängigen Formate für die Darstellung von Bildern im Browser. Auch wenn das Internet zunehmend schneller wird, ist es gerade bei der mobilen Nutzung nach wie vor wichtig, auf möglichst kleine Dateien zu achten. Mit dem relativ neuen BPG-Format, welches für Better Portable Graphics steht, steht seit einigen Jahren eine Alternative zu den gängigen Formaten bereit, die nicht nur kleinere Dateien, sondern auch eine bessere Bildqualität verspricht. Aber was genau zeichnet das BPG-Format aus und wie setzt man es ein und wieso stockt die Entwicklung?

Better Portable Graphics statt JPEG – ähnliche Qualität, kleinere Dateigröße und Alphatransparenz

Das Besondere am BPG-Format ist seine hohe Kompression. Es basiert auf einem Subset des High-Efficiency-Video-Codings (HEVC), welches vor allem für Videodateien verwendet wird. Dieses ist der Nachfolger des H.264-/MPEG-4-Standards. Die Komprimierung der Better Portable Graphics verspricht im Vergleich zum JPEG eine kleinere Dateigröße bei ähnlicher Bildqualität.

Better Portable Graphics: Das kann das neue Bildformat
Webanwendung zum Erstellen von BPG-Dateien

Wie das JPEG-Format unterstützt auch BPG verschiedene Farbräume. Neben RGB und CMYK wird YCbCr, bei der eine Farbe durch Hellig- und Farbigkeit definiert wird, unterstützt. Außerdem sind  verschiedene Farbtiefen – 8, 10 und 12 Bit – möglich.

Im Gegensatz zum JPEG-Format unterstützen Better Portable Graphics einen Alphakanal, wie er beispielsweise bei PNG-Bildern möglich ist. Im Vergleich zum PNG ist die Kompression beim BPG noch deutlich größer.

BPG-Encoder als Webanwendung

Um eine BPG-Datei zu erzeugen, gibt es einen eigenen Encoder, der als Webanwendung zur Verfügung steht. Neben der Auswahl des Farbraums und der Bit-Tiefe sind es vor allem zwei Größen, die entscheidend sind. Zum einen musst du dich für eine Qualität entscheiden. Diese wird mit einem Wert zwischen 0 und 51 angegeben. Je kleiner der Wert ist, desto besser ist die Qualität des Bildes.

Better Portable Graphics: Das kann das neue Bildformat
Stark komprimiertes JPEG (links) und BPG (rechts)

Der andere Wert gibt die Kompression an, die zwischen 0 und 9 liegt. Je höher der Wert, desto besser ist die Kompression. Allerdings solltest du beachten, dass eine hohe Kompression ebenso bedeutet, dass der Rechner länger braucht, um das Bild zu dekomprimieren und darzustellen.

Als Test wurde ein Bild mit 10 Prozent Qualität aus Photoshop generiert und dasselbe Bild mit höchster Kompression und Qualitätsstufe 39 ins Format Better Portable Graphics gebracht. Während das JPEG 10 Kilobyte groß ist, kommt das BPG auf 9,5 Kilobyte. Beim JPEG sind ganz deutlich die rechteckigen Artefakte zu sehen, wie sie bei starker Komprimierung auftreten. Bei BPG-Bild macht sich zwar auch die starke Kompression bemerkbar. Dennoch ist das Ergebnis qualitativ deutlich besser.

Better Portable Graphics: Das kann das neue Bildformat
BPG-Bild mit Alphatransparenz

Bezüglich der Dateigröße wird der Unterschied deutlich, wenn wir ein transparentes PNG mit einer entsprechenden BPG-Grafik vergleichen. Während das PNG 325 Kilobyte groß ist, kommt die transparente BPG-Datei bei durchschnittlicher Bildqualität auf 64 Kilobyte. Hier erreichen wir demnach eine sehr deutliche Einsparung.

Browser interpretieren BPG per JavaScript

Das große Problem bei neuen Dateiformaten sind natürlich die Browser. Denn diese müssen neue Formate interpretieren können. Dass Better Portable Graphics in allen gängigen Browsern dargestellt werden können, liegt daran, dass die Interpretation des Formates per JavaScript erfolgt.

Willst du also Better Portable Graphics verwenden, musst du eine 65 Kilobyte große JavaScript-Datei in dein HTML-Dokument einbinden. Diese übernimmt dann die Dekodierung des Formates. Die HTML-Auszeichnung erfolgt ganz normal über das „<img>“-Element. Das entsprechende JavaScript wandelt dieses dann ein „<canvas>“-Element um, welches das Bild im Browser ausgibt.

Better Portable Graphics: Quelltext für Encoder frei zugänglich

Wenn du Better Portable Graphics selber erstellen möchtest, kannst du dir den Quelltext für den Encoder kostenlos herunterladen. Er steht als Kommandozeilenanwendung für Linux und Windows zur Verfügung. Der Encoder wird unter der GPL-Lizenz angeboten.

Fazit und Links zum Beitrag

Dass sich Better Portable Graphics in der Fläche durchsetzen wird, darf durchaus vorsichtig bezweifelt werden. Der Umweg über JavaScript sorgt zwar auf Anhieb für eine flächendeckende Browserunterstützung, ist aber grundsätzlich nicht die beste Lösung, Bildformate im Browser darzustellen. So wundert es nicht, dass der Encoder seit etwa drei Jahren nicht weiterentwickelt wird. Andererseits tut sich bei JPG auch seit Jahren nichts. Verschiedentlich wird behauptet, es gäbe rund um BPG ein Lizenz-Problem, das die weitere Verbreitug behindere. Sollte dem so sein, wäre es zumindest eine plausible Erklärung. Verifizieren ließ sich das Problem allerdings nicht.

Die Mischung aus der guten Kompression des JPEG- und der Alphatransparenz des PNG-Formates machen Better Portable Graphics allerdings zu einer interessanten Alternative. Darüber hinaus ermöglicht das BPG-Format Animationen, wie es bislang nur das GIF-Format konnte. Im Web-Encoder sind solche Animationen jedoch nicht realisierbar.

(Artikelbild: Depositphotos)

Kategorien
Bilder & Vektorgrafiken bearbeiten Webdesign

Responsives SVG: Was geht, was geht nicht?

Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?

Kategorien
Design HTML/CSS UI/UX Webdesign

Farben finden: 5 Tools für gute Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

Kategorien
Icons & Fonts Webdesign

Typografisches Einmaleins für Websites

War Typografie zu den Anfängen des World Wide Webs etwas Nebensächliches, hat es in den letzten Jahren zunehmend an Bedeutung gewonnen. Vor allem dank CSS sind zahlreiche typografische Features möglich, die vor einigen Jahren noch undenkbar oder nur auf Umwegen zu realisieren waren. Doch alles, was möglich ist, muss auch gut umgesetzt werden. Dieses kleine Einmaleins zeigt dir, worauf du achten solltest und wie du deine Website typografisch in den Griff bekommst.

Webfonts statt Systemschriften

Eigentlich versteht es sich mittlerweile ja von selbst: Der Einsatz von Systemschriften ist keine Option mehr, wenn es um zeitgemäße und individuell gestaltete Websites geht. Neben den vielen kommerziellen Anbietern gibt es ebenso viele, bei denen du kostenlos Webfonts für deine Website findest. Allen voran sei da Google Fonts genannt. Aber auch Fontsquirrel hat eine große Auswahl hochwertiger Schriften.

Um keine Probleme mit dem Datenschutz zu bekommen, solltest du allerdings darauf verzichten, Schriften durch Google hosten zu lassen. Lade sie dir herunter und stelle sie über deinen eigenen Webspace bereit. Dann gibt es keinen Ärger bezüglich der DSGVO. Denn Google Fonts erfasst über die JavaScript-Einbindung personenbezogene Daten.

Google Fonts

Das mittlerweile etablierte Dateiformat WOFF2 für Webfonts schafft es zudem, Schriften deutlich besser zu komprimieren als sein Vorgänger. Über zu große Dateien musst du dir also auch keine Sorgen machen.

Schriften richtig kombinieren

In der Regel kommt auf einer Website mehr als eine Schrift zum Einsatz. Für ein abwechslungsreiches Design ist eine gewisse typografische Abwechslung auch durchaus sinnvoll. Hier solltest du natürlich zwei Schriften finden, die gut zueinander passen. Auf der sicheren Seite bist du, wenn du Schriften derselben Familie kombinierst.

So lassen sich die „Source Sans“ und die „Source Serif“ von Adobe aus nachvollziehbaren Gründen immer kombinieren. Ansonsten gilt: Je ähnlicher zwei Schriften sind, desto schwieriger wird es. Wenn du eine Serifenlose ausschließlich in Versalien (Großbuchstaben) verwendest, kannst du fast jede andere Serifenschrift damit kombinieren. Je ähnlicher sich die Schriften sind, desto mehr musst du unter anderem darauf achten, dass die x-Höhe – also der Abstand zwischen Grund- und Mittellinie – der beiden Schriften ähnlich ist.

Auch hier hilft ein Blick zu Google Fonts. Dort werden dir passende Schriftkombinationen zu einer Schriftart angeboten. In jedem Fall gilt: Mehr als zwei Schriften solltest du in der Regel nicht kombinieren. Variationen kannst du durch verschiedene Styles – zum Beispiel fett oder kursiv – erreichen.

Die richtige Größe wählen

Wichtig für die Lesbarkeit einer Schrift ist natürlich die Größe. Eine perfekte Größe lässt sich pauschal für eine Schrift nicht festlegen. Letztendlich muss eine Schriftgröße immer für das jeweilige Gerät passen. Auf Smartphones ist mitunter eine andere Schriftgröße notwendig als auf einem großen Monitor am Schreibtisch.

Per Media Queries solltest du also unterschiedliche Größen definieren, die sich je nach Auflösung des Displays beziehungsweise Größe des Browserfensters richten.

Immer wieder gibt es Diskussionen, welche Einheit für die Angabe einer Schriftgröße denn die passende ist. Meist bietet sich die Einheit „em“ an. „1em“ entspricht bei den meisten Browsern einer Größe von 16 Pixeln. Der Vorteil der „em“-Einheit besteht darin, dass sie relativ ist. Wer Überschriften zum Beispiel immer doppelt so groß dargestellt haben möchte wie Fließtext, wählt „2em“. Ändert sich die Größe des Fließtextes, werden auch Überschriften entsprechend größer dargestellt. Während „em“ immer relativ zum jeweiligen Elternelement definiert ist, gibt es mit „rem“ eine Einheit, die immer relativ zum „<body>“-Element definiert ist.

Mit der Einheit „vw“ (für „view width“) kannst du Schriften auch direkt an der Breite des Browserfensters beziehungsweise Viewports ausrichten. „1vw“ entspricht dabei ein Prozent der Breite des Viewports. Der Vorteil dieser Einheit besteht darin, dass Texte bei veränderter Breite immer mit skalieren – ähnlich wie Bilder, die sich immer an der Breite des Viewports orientieren. Vor allem für Überschriften und kurze Texte bietet sich diese Einheit prima an.

OpenType-Features nutzen

Im klassischen Desktop-Publishing werden OpenType-Features wie Ligaturen, Mediävalziffern und andere typografischen Besonderheiten und Raffinessen bereits lange eingesetzt. Aber dank CSS verwendest du die verschiedenen Möglichkeiten von OpenType-Schriften auch im Webdesign – vorausgesetzt natürlich, die jeweilige Schrift unterstützt diese Features.

Um bestimmte OpenType-Merkmale zu nutzen, musst du diese per CSS aktivieren. Die entsprechenden Eigenschaften beginnen mit „font-variant“. Um zum Beispiel Ligaturen zu verwenden, nutzt du die Eigenschaft „font-variant-ligatures“. Der Wert „common-ligatures“ aktiviert die Standard-Ligaturen einer Schrift. Dazu zählen klassische Ligaturen, bei denen Buchstabenpaare wie „fi“, „fl“ und „ff“ durch entsprechende Ligaturen ersetzt werden.

Daneben gibt es noch sogenannte bedingte Ligaturen, welche oft zur Verschnörkelung verwendet werden. Diese werden mit dem Wert „discretionary-ligatures“ aktiviert. Es gibt zahlreiche weitere Features – zum Beispiel für Zahlenformate und Kapitälchen. Nicht immer unterstützt eine Schrift jedoch alle OpenType-Merkmale.

Interpunktion und Sonderzeichen richtig einsetzen

Wer typografisch alles richtig machen will, achtet natürlich auf die korrekte Interpunktion und die Verwendung richtiger Zeichen. Das fängt bei Anführungszeichen an, die im Deutschen entweder „so“ oder »so« aussehen, aber niemals „so“.

Wenn du Zitate per „<cite>“ oder „<blockquote>“ auszeichnest, kannst du die Anführungszeichen auch per CSS definieren, indem du per „::before“ und „::after“ und der „content“-Eigenschaft die öffnenden beziehungsweise schließenden Anführungszeichen hinterlegst.

Außerdem solltest du den Unterschied zwischen Trenn- und Gedankenstrich berücksichtigen – letzterer ist deutlich länger als der Trennstrich. Dank UTF-8 müssen all diese Zeichen nicht mehr per HTML-Entitys ausgezeichnet werden.

Die hier erwähnten Beispiele zählen schon zur sogenannten Detailtypografie, mit denen ganze Bücher gefüllt sind. Aber wer die hier vorgestellten Regeln und Tipps beachtet, macht schon eine Menge richtig, wenngleich es in der Typografie ziemlich viel gibt, was man falsch machen kann.

Kategorien
Essentials Freebies, Tools und Templates Webdesign

Gewusst wie: Kostenlose E-Books für Designer und Entwickler

Wenn du ein Web-Designer oder -Entwickler bist, dann weißt du ja, dass du dich niemals genug weiterbilden kannst. E-Books bieten sich dafür an, denn hier erhältst du Lernstoff in komprimierter Form. Das ist vorteilhaft, denn unter Zeitmangel leidet wohl so ziemlich jeder Webworker. Ich habe mich daher für dich auf die Suche nach E-Books gemacht.

Kategorien
Design UI/UX Webdesign

User Experience Design: Was es ist und wie man es richtig einsetzt

Dass der Kunde immer Recht hat, wissen wir ja schon länger. Nur wird dieser Spruch oftmals als Fabel abgetan und recht selten beherzigt. Doch genau diese Einstellung kostet eine Menge Geld, Geld, welches keine Chance hat, verdient zu werden.

Egal zu welcher Branche dein Unternehmen zählt, an der Spitze einer jeden Marketing-Strategie steht stets der Kunde. Erst dann, wenn der Kunde zufrieden ist, kann es auch das Unternehmen sein. Nur dann optimiert ein Geschäft seine Umsätze. Gerade in der digitalen Welt ist die Zufriedenheit des Kunden sehr fragil; der Wettbewerb ist nur einen Klick entfernt.

Und so muss der Fokus nicht nur, aber besonders hier auf Kunden-Zufriedenheit und Service gelegt werden. Das betrifft ebenfalls nicht nur Online-Shops, sondern jedwede Art von Internet-Präsenz. Neben Produkten, Prozessen und so weiter, muss auch das User Experience Design optimal sein. Ich stelle kurz vor, was das ist und wie das geht…

Das ist User Experience Design

Das Konzept des User Experience Design konzentriert sich auf die Interaktion zwischen Website und Kunde. Dabei soll sichergestellt werden, dass diese sowohl schnell wie ansprechend funktioniert. Der Zusammenhang zwischen gutem User Experience (UX) Design und erfolgreichen Websites ist stark, was nicht wirklich verwundert. Denn nur, wenn dein Kunde eine gute Erfahrung bei der Nutzung deiner Website hat, dann wird er auch Vertrauen entwickeln, die nächsten Schritte zu gehen.

Die User Experience DIN EN ISO 9241-210

Da wir Deutschen dazu neigen, alles zu bürokratisieren, existiert seit Januar 2011 die User Experience als definierter Begriff in der DIN EN ISO 9241-210.

user-experience-design-definition
© Copyright Karsten Nolte – http://www.karsten-nolte.de

Die DIN ISO 9241-210 beschreibt die User-Experience wie folgt:

„Wahrnehmungen und Reaktionen einer Person, die aus der tatsächlichen und/oder der erwarteten Benutzung eines Produkts, eines Systems oder einer Dienstleistung resultieren.“

Anmerkung 1: „User Experience umfasst sämtliche Emotionen, Vorstellungen, Vorlieben, Wahrnehmungen, physiologischen und psychologischen Reaktionen, Verhaltensweisen und Leistungen, die sich vor, während und nach der Nutzung ergeben.“

Anmerkung 2: „User Experience ist eine Folge des Markenbilds, der Darstellung, Funktionalität, Systemleistung, des interaktiven Verhaltens und der Unterstützungsmöglichkeiten des interaktiven Systems, des psychischen und physischen Zustands des Benutzers aufgrund seiner Erfahrungen, Einstellungen, Fähigkeiten und seiner Persönlichkeit sowie des Nutzungskontextes.“

Anmerkung 3: „Die Gebrauchstauglichkeit kann, sofern sie unter dem Blickwinkel der persönlichen Ziele des Benutzers interpretiert wird, die Art der typischerweise mit der User Experience verbundenen Wahrnehmungen und emotionalen Aspekte umfassen. Kriterien der Gebrauchstauglichkeit können angewendet werden, um Aspekte der User Experience zu beurteilen.“

User Experience auf den Punkt gebracht

User Experience Design stellt dem Besucher einer Website ein einfaches, klares, intuitives und wohldurchdachtes Design zur Verfügung. Alle wichtigen Elemente sollen sich genau dort befinden, wo der Besucher sie erwartet. Kurzum: Die Benutzerfreundlichkeit soll so groß wie nur möglich sein. Optimierung kann durch Umfragen, Tests und ständiges Erforschen der Zielgruppe erreicht werden. Auch die Konkurrenz sollte regelmäßig überprüft und analysiert werden.

Service und Support

Vernachlässigen solltest du auf keinen Fall den Service, denn gerade Service und Support sind hervorragende Mittel zur Kundenbindung. In diesem Bereich könntest du dir durchaus ein Alleinstellungsmerkmal schaffen.

Ein Beispiel für gutes User Experience Design


Foundation Framework

Die Website des Foundation-Frameworks ist ein gutes Beispiel für gelungenes UX-Design. Sie kommt in einem einfach und klar gehaltenen Flat-Design daher und lenkt die Aufmerksamkeit durch gute Kontraste auf zwei Bereiche:

Den Call-to-Action-Button zum Herunterladen und die Menüleiste oben. Auf dieser Website findet man sich sofort zurecht. Zudem lädt die Website angenehm schnell, sodass der User nicht geneigt ist, schnell wieder das Weite zu suchen. Bilder werden nur zur Unterstützung des eigentlichen Inhalts verwendet und lenken nicht von diesem ab.

Gerade Bilder sollten eher sparsam und nur unterstützend eingesetzt werden, stets bedacht darauf, den Nutzer dorthin zu geleiten, wo du ihn hinhaben willst.

Entwickele deine Design-Strategie

design-strategie

Der Ausgangspunkt: die Farbe

Wenn du eine Design-Strategie für ein optimales User Experience Design entwickelst, startest du vielleicht als erstes mit der Farbauswahl. Ein minimalistisches Theme wirkt zum Beispiel sehr gut mit einem monochromatischen Layout, ohne erschlagende Kontraste.

Die zurzeit beliebteste Kombination ist trichromatisch. Es wird ein neutraler Hintergrund in Weiß oder sehr hellem Grau gewählt, dazu eine Highlight-Farbe für Registerkarten, Buttons und Elemente, die hervorstechen sollen. So könnte eine moderne Website in einer Schwarzweiß-Kombination gestaltet werden, mit einem farbigen Kopfbereich oder einem nicht ablenkenden Hero-Grafik-Bereich.

Der Blick des Users sollte sich direkt auf die wichtigen Bereiche der Website lenken lassen. Um dies zu erreichen, könntest du ausgiebige Tests mit Usern oder sogenannten Heatmaps durchführen. Für ein optimales UX-Design ist es wichtig, seine User verstehen zu lernen, um ihnen das bieten zu können, was sie gerne hätten oder erwarten.

Auf einer weißen Hintergrundseite wird bereits ein kleiner Farbklecks die Aufmerksamkeit des Besuchers auf sich ziehen. Unter diesen Vorgaben lassen sich zum Beispiel optimale Formulare gestalten. Auch Produktbilder funktionieren am Besten auf weißen Hintergründen. In Kombination mit sich farblich deutlich abhebenden Call-to-Action-Buttons wird ein ruhiger und klarer Gesamteindruck geschaffen.

Effekte und Menüs

Wenn die Farbwahl nun getroffen wurde, nimmst du dir als nächstes vielleicht die Effekte vor, die deine Website aufweisen soll. Auch hier ist weniger mehr. Sehr gut lassen sich Effekte für die Validation von Formulardaten einsetzen, weil sich so ein wirkliches Plus an Benutzerfreundlichkeit umsetzen lässt. Richtig angewendet können auch Icons die Benutzerfreundlichkeit um einiges erhöhen.

Ein Menü sollte sich stets ausreichend vom Inhalt abheben und sofort wahrgenommen werden können. Lass dir sich mit der Beschriftung der einzelnen Menüpunkte ruhig Zeit und teste verschiedene Varianten. Auch hier können Heatmaps und Test-User helfen. Wirklich wichtige Punkte des Menüs dürfen ruhig deutlich farblich abgesetzt als Call-to-Action-Button gestaltet sein. So erkennt ein Besucher sofort, was von ihm erwartet wird.

Minimalistische Designs verbreiten sich immer mehr im Web. Sie funktionieren auf einem Desktop-Rechner ebenso gut wie mobil auf einem Smartphone oder Tablet. Einige der größten Marken überhaupt sind zu einem minimalistischen Flat-Design gewechselt. Was für diese großen Marken funktioniert, kann auch für dein Unternehmen funktionieren.

Stets im Hinterkopf behalten:

Bedenke stets, dass der Computer-Monitor nur einen Teil der Gesamterfahrung abbilden kann. Du willst dem Besucher deiner Website den besten Service innerhalb der kürzesten Zeit zur Verfügung stellen. Service fängt aber mit einer optimierten Website nur an. Sobald der Besucher schnell und intuitiv von der Startseite zum ausgefüllten und abgeschickten Kassenformular findet, ist die Website optimal aufgebaut.

Nach dem Verkauf geht die User-Experience noch weiter, Service und Support bieten ein bisher kaum ausgelotetes Potenzial zur Kundenbindung. In diesem Bereich können wir mit Sicherheit noch sehr viel von den Amerikanern lernen, die als Meister der Freundlichkeit und des Services gelten.

Fazit

Ein wirklich gutes User Experience Design ist nicht mal eben umzusetzen. Eingehende Tests, Forschungen und ständiges Verbessern des Status quo sind erforderlich, um optimale Ergebnisse zu erreichen. Die harte Arbeit wird dann hoffentlich mit mehr Verkäufen belohnt werden. Denn: Je besser sich ein Kunde zu recht findet, desto eher wird er auch kaufen wollen.

Links zum Beitrag

(Artikelbild: Depositphotos)

Kategorien
Inspiration Webdesign

Emotionales Webdesign: So einfach sind die Grundlagen!

Emotionales Webdesign ist nicht etwa eine Gestaltung, bei der potenzielle Besucher in Tränen ausbrechen. Ebensowenig ist damit gemeint, dass die Gestaltung durch einen labilen Designer mit Trennungsschmerz erstellt wurde. Schauen wir also, was emotionales Webdesign wirklich ist.

Kategorien
Design Dr. Web-Ratgeber Essentials Exklusiv bei drweb.de Fortbildung Programmierung Responsive Design UI/UX Webdesign

Brandneu: Webdesign der Zukunft (E-Book)

In welche Richtung muss ich mich als Webdesigner und Webentwickler bewegen, wenn ich auch in einigen Jahren noch mein Stück vom Kuchen abhaben will? Diese Orientierung bietet dir unser neuestes E-Book mit dem sprechenden Titel Webdesign der Zukunft.

Kategorien
Dr. Web-Ratgeber Exklusiv bei drweb.de Webdesign

Webdesign konkret: So baust du Websites heute (E-Book)

Funktionierende Gestaltungselemente und Konzepte, die geräteübergreifend funktionieren. Das ist der Schwerpunkt unseres E-Books mit dem sprechenden Titel Webdesign konkret.

Kategorien
Design UI/UX Webdesign

Performance: Einfache Tipps zur Video-Optimierung auf Websites

Video auf Websites ist inzwischen ein gängiges Element, das vielfach sogar zu reinen Design-Zwecken eingesetzt wird. Und es ist ein Faktor, den du aus Performance-Gründen dringend optimieren solltest.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Responsive Design Webdesign

Responsives Webdesign: So wählst du die richtigen Fotos für unterschiedliche Formate

Für dich als Webdesigner ist das mobile Internet eine Herausforderung. Websites müssen auf unterschiedlich großen Displays mit verschiedenen Seitenverhältnissen gut aussehen. Zu deinen Aufgaben gehört dabei auch die Auswahl geeigeneter Fotos für responsives Webdesign.

Kategorien
Design Essentials Icons & Fonts Webdesign

Fonts für jedermann: Diese Schriften gehen immer

Die Suche nach geeigneten Schriften für ein Webprojekt gestaltet sich nicht immer einfach. Viele Schriften haben einen ganz individuellen Charakter und passen daher nicht immer und überall. Es gibt jedoch eine Reihe von kostenlosen Schriften, die sehr allgemein gestaltet sind und daher für nahezu jedes Webprojekt eingesetzt werden können.

Kategorien
Design Essentials Exklusiv bei drweb.de Responsive Design UI/UX Webdesign

Design mit Erfolgsgarantie: Neues E-Book bringt Theorie und Praxis moderner Gestaltung auf den Punkt

Das nächste Dr. Web eBook steht in unserem Shop für dich bereit. Bis Ende August sparst du drei Euro, ab 1. September 2018 gilt der reguläre Preis von 12,99 Euro. „Design mit Erfolgsgarantie” heißt der Titel, den du als Designer in jedem Falle lesen solltest.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates Icons & Fonts Webdesign

10 kostenlose Tools fürs Schriftdesign: So erstellst du deine eigene Schriftart

Schriftarten sind ein sehr kraftvoller, individueller Weg, um Inhalte darzustellen. Sie haben direkten Einfluss darauf, wie wir Inhalte wahrnehmen und interpretieren. Typografie ist heutzutage sehr beliebt, auch und gerade im Zusammenspiel mit responsivem Webdesign, für das ganz eigene Regeln gelten. Es gibt eine Unzahl von freien Fonts online.