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
Design Icons & Fonts

Google Fonts 2018: Diese Schriften sind im Trend

Wie fast alles im Grafik- und Webdesign sind auch Schriften immer wieder Trends ausgesetzt. Die Auswahl an Schriften wächst stetig – auch bei Google Fonts – und Neues ist daher immer wieder schnell gefunden. Folgende Schriften und Schriftkombinationen solltest du 2018 bei einem deiner nächsten Projekte einmal ausprobieren.

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
Design UI/UX

Von wegen beschissen: Gutes UX-Design am Beispiel der Toilette

Der Gang zur Toilette ist zielorientiert, aufgabenfokussiert und bisweilen zeitkritisch. Nun liegt der moderne Lokus mittlerweile schon in Version 987 vor, was eine gewisse Produktreife verspricht. Damit sollte das Klo an sich ein Musterbeispiel guter UX sein.

Kategorien
Design UI/UX

UX-Design: Bananen als Best Practice

Was ist UX-Design? Vage Erklärungen gibt es viele, aber keine so plakative wie die Bananen-Analogie. Die versteht nicht nur der Südfrüchte-Händler…

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
Design Inspiration

Dein Bild von Kreativität ist falsch

Ich höre es von allen Seiten. Kaum einer hält sich für kreativ. Du sagst, du kannst das einfach nicht. Ich glaube dir nicht. Ich denke, dein Bild von Kreativität ist schlichtweg falsch.

Kategorien
Design E-Business Freelance Workflow

Achtsamkeit und Design, ein Dream-Team

Wenn du dabei bist, mehr Achtsamkeit in dein Leben zu integrieren, dann solltest du das auch auf der beruflichen Ebene tun. Im Design hilft dir das auf vielerlei Weise.

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
Design UI/UX

Design per Storytelling: Wer schreibt, der bleibt

Im Idealfall kommt erst die Story, dann das Design. Du kannst es auch anders herum machen, aber dann ist es halt Kacke.

Kategorien
Design E-Business Essentials Freebies, Tools und Templates Freelance HTML/CSS

Pro und Contra: Design mit fertigen Templates

“Echte” Designer schlagen schon die Hände über dem Kopf zusammen, wenn einer bloß das Wort “Template” oder “Theme” in den Mund nimmt. Schauen wir uns das Ganze mal objektiver an.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Fotografie Inspiration Tutorials

Lightroom: 20 deutschsprachige Video-Tutorials für dein perfektes Foto

Adobe Lightroom wird immer beliebter als digitale Dunkelkammer zum Entwickeln von Bildern. Auch wenn sich das Programm ganz logisch gliedert, gibt es doch zahlreiche Details und Feinheiten zu entdecken. Werkzeuge und Funktionen in Kombinationen, die eben nicht so offensichtlich sind. Wir haben die schönsten, deutschsprachigen Video-Tutorials mit Tipps und Tricks gesammelt.