UI/UX Design Trends für 2020

Posted By chris / Allgemein, Design / No Comments

#1 Asymmetrie & Split Screens

Das Block Layout ist ein Klassiker. Alles ist einem vordefinierten Rahmen und die einzelnen Teile sind leicht verdaulich. Blöcke bedeuten Symmetrie und helfen dem Betrachter das Konzept leichter zu verstehen. Asymmetrische Websites sind schon seit Längerem vorhanden, haben aber bisher keinen Durchbruch erlebt. Heutzutage aber sind wir es gewohnt mit verschiedenen Devices umzugehen um an die benötigten Informationen zu kommen. Mit Asymmetrie und Split Screens haben Designer ein Werkzeug um die benötigte Information ansprechend an den Benutzer zu bringen. Gute Beispiele dafür sind zum Beispiel https://baas.amsterdam/ oder https://2019.annualdigest.com/

#2 Vermischte Präsentation

Visuals wirken stärker als Worte. Das Kombinieren von Videos ohne Bedienelemente mit dem eigentlichen Layout ist eine gute Möglichkeit die Overall Experience zu verbessern. Content ist King und die Art wie dies rübergebracht wird spielt eine grosse Rolle im Impact den es bewirkt. Siehe zum Beispiel https://allpressculture.com/ oder https://project-obsolete.com/en/

#3 Leerraum

Wenn viele Elemente um Aufmerksamkeit buhlen bekommt keines genug davon. Wenn das Rampenlicht auf ein Element fällt, dann bekommt es die volle Aufmerksamkeit. Abhängig von der Message die ein UI rüberbringen will ist es wichtig genug Raum dafür zu geben, um auch die Message wirken zu lassen. Ein Beispiel hierzu wäre https://www.hellomonday.com/

#4 Typographische Überlappung

Eine Erweiterung der fetten Typographie ist das Überlappen von Headlines mit dem eigentlichen Layout, siehe hierzu https://orkestra.ca/, https://spatzek.studio/ oder https://largo.studio/

#5 Vollbild Visuals

Die Mitte des Bildschirms ist der Ort wo wir zuerst hinschauen, aber es gibt gute Gründe dafür den ganzen Bildschirm für die entsprechende Message zu nutzen. Um eine immersive Erfahrung zu kreieren ist es sinnvoll zu zeigen, dass der Screen nur ein Teil des sichtbaren Inhalts ist. Dies verleitet Benutzer dazu die Seite weiter zu erforschen und gleichzeitig die Absprungsrate zu verringern. Gute Beispiele finden sich bei http://www.town.shimane-misato.lg.jp/misatoto/ oder https://www.fishingthefeed.com/

#6 Datenvisualisierung

Zeigen ist besser als erzählen, doch wenn man beides kombinieren kann ist es das ultimative Erlebnis für den Nutzer. Heutzutage kann man von Webtechnologien wie WebGL und 3D Gebrauch machen. Datenvisualisierung ist nicht nur die Darstellung in Charts und Graphen, sondern die Möglichkeit aus einer Vielzahl von graphischen Elementen auszuwählen. Ein Beispiel hierzu ist https://acoustics.autoneum.com/

#7 Ununterbrochene UX

Jeder Klick in einem Bestellprozess birgt die Gefahr, dass der potentielle Käufer abspringt und sich irgendwo anders nach dem gleichen Produkt umsieht, einfach weil der Prozess zu kompliziert, aufwändig und mit unnötigen Informationsangaben verbaut ist. Und es geht nicht nur um den Kauf per se. Es geht auch darum Vertrauen aufzubauen, dem User zu beweisen, dass alle eingegebenen Daten sicher sind, und dass er möglichst bald wieder zurückkommt. Ein Beispiel hierzu wäre https://dribbble.com/shots/6945782-Bike-Shop-Interaction

Read More

WordPress Design Trends 2018

Posted By chris / Allgemein, Design, Wordpress / No Comments

WordPress wird von vielen Webseitenbetreibern eingesetzt, weil es einfach in der Bedienung, eine grosse Palette an Designvorlagen, sog. Themes bietet und unendlich erweiterbar ist mit sog. Plugins. Das Interface und die Features von WordPress werden ständig verbessert und erweitert. Mögliche Trends für 2018 sind die Folgenden:

  • Drag&Drop-Funktionen
  • Video Headers
  • Virtual Reality Plugins
  • Parallax Scrolling
  • E-Commerce Themes
  • Minimal Design
  • Landing Page Styles
  • Whitespace

Zwei Posts, die diese Trends aufgreifen und detaillierter beschreiben können unter http://www.technobeep.com/best-wordpress-design-trends-for-2018/ und https://freelancewebsitedeveloper.wordpress.com/2017/12/26/top-5-wordpress-trends-to-watch-out-for-in-2018/ gefunden werden.

Read More

Design Trends für 2016

Posted By chris / Allgemein, Design / No Comments

2016-design-trends

Designtrends kommen und gehen und was heute Hot Shit ist, ist morgen kalter Kaffee. Der unaufhaltbare Siegeszug von Mobile und dem gestiegenen Bedürfnis deren Nutzer wird es immer anspruchsvoller aber auch businesskritischer den richtigen Mix zwischen Design, Funktionalität und Umsetzungsaufwand zu finden. Nachfolgend eine kleine Auflistung der unserer Meinung nach wichtigsten Trends die uns in nächster Zeit beschäftigen werden.

Scrollen vor Klicken

Der heutige User sieht alles, kauft aber nur selektiv. Das Konzept der Scrollbar ist obsolet geworden da User ihren Daumen gebrauchen können um auf und ab zu scrollen. Scrollen ist ausserdem eine Fortsetzung, Klicken hingegen eine Entscheidung, die zuerst abgewogen und überdacht werden muss.

Der Fold existiert nicht mehr

The Fold

Mit dem Konzept des endlosen Scrollen gibt es auch keinen Schnitt mehr für einen initial sichtbaren Bereich. Da der Grossteil der User sowieso in irgendeiner Weise rauf und runter scrollt, ist es nicht mehr match-entscheidend, dass Werbung ganz oben platziert wird, und es gibt Webdesignern die Möglichkeit grossflächige Bilder einzusetzen und Texte und Links erst sichtbar erscheinen zu lassen wenn der User runterscrollt.

Animierte Bilder und Inhalte sind zurück

Animated Content

Mit zunehmender Bandbreite und schneller Surfgeschwindigkeiten hat die Anzahl der animierten Gifs rapide zugenommen. Ein Flat Design kann mit kleinen animierten Elementen aufgepeppt werden oder sogar zusätzliche Informationen liefern. Hier eine Liste mit verschiedenen Beispielen wie Animationen sinnvoll eingesetzt werden können.

CSS Shapes

CSS Shapes

CSS Shapes ermöglichen es einem Designer seine Inhalte in verschiedenen Formen wie Rechtecke oder Kreise darzustellen, oder was noch interessanter ist, Texte um unregelmässige Elemente fliessen zu lassen. Ein ausführlicher Artikel auf A List Apart zeigt die Möglichkeiten und bietet viele Beispiele für den Einsatz. Einziger Nachteil: Das Feature wird per Stand November 2015 nur von Chrome, Safari auf iOS und Opera unterstützt.

Read More

Redesign für Golf Consulting Group

Posted By chris / Allgemein / No Comments

Design42 durfte den Webauftritt der Golf Consulting Group AG neu konzipieren und gestalten. Neu kommt der Auftritt in einem zeitgemässen responsivem Design daher und ist auf das Wesentliche reduziert

Auf Basis von WordPress kann der Kunde alle Inhalte wie News, Seiten und Produkte selber bearbeiten.

Weiteres zur Golf Consulting Group AG: Die Golf Consulting Group AG engagiert sich ausschliesslich im Golfplatzbau und in Golfplatz-Umbau, Sanierungsarbeiten und Sicherheitsfragen auf Golfplätzen. Sie verfügt auf diesem Gebiet über eine weltweite Kompetenz.

Sie bringen Landeigentümer und Golfplatzinvestoren zusammen und erstellen unter Berücksichtigung der topographischen Gegebenheiten das Budget. Mit ihrer Erfahrung und Expertise kümmern sie sich um das individuelle Projekt bis hin zur schlüsselfertigen Übergabe.

Read More

Elemente für eine professionelle Webseite

Posted By chris / Allgemein / No Comments

Textinhalte, Videos und aussagekräftige Bilder sind elementare Bestandteile einer guten Webseite, aber es gibt noch mehr. Zum Beispiel durchsuchen 79% der Besucher die Webseite nach wichtigen Wörtern anstatt den Text Wort für Wort zu lesen. Darum ist es wichtig, dass der Inhalt möglichst einfach zu durchscannen ist indem er mit verschiedenen Untertiteln und hervorgehobenen Passagen gegliedert wird.

Weitere gute Tipps für eine professionelle Webseite gibt es in der nachfolgenden Infografik, gefunden unter www.quicksprout.com

Professionelle Webseite

Read More

7 Techniken um Vertrauen in ihre Webseite aufzubauen

Posted By chris / Allgemein, E-Commerce / No Comments

Das Internet kann ein gefährlicher Ort sein. Sei es Kreditkartenbetrug oder das Ausspionieren persönlicher Daten, heute ist man nicht gefeit vor Cyberkriminalität und das Bild des gläsernen Users ist schon lange Realität.

Wie können Sie in diesem Umfeld das Vertrauen von Leuten gewinnen und sie dazu bringen, Ihre Produkte zu mögen oder sie sogar zu kaufen? Nachfolgend ein paar Tips im visuellen Bereich mit dem das Vertrauen aufgebaut und die Konversionsrate erhöht werden kann.

1. Badges

SwisscomSetzen Sie sogenannte Badges für spezielle Dienstleistungen oder Aktionen ein. Wenn Sie z.B. eine Geld-zurück-Garantie anbieten kann das Badge – wie im Fall von Swisscom – mit stilisierten Münzen dargestellt werden.

Idealerweise wird ein solcher Badge direkt in der Nähe des “Kaufen” Buttons oder zumindest auf der gleichen Seite platziert, so dass User direkt von der Qualität Ihres Produktes oder der Dienstleistung überzeugt werden.

Eine gute Grundfarbe für solch einen Badge wäre Gold, da dies mit Wert und Beständigkeit assoziiert wird. Rot ist weniger geeignet, da dies Gefahr oder ein Verbot signalisiert. Unabhängig von der gewählten Farbe aber sollte sichergestellt werden, dass der Badge in einem guten Kontrast zur Farbe der restlichen Seite steht.

2. Kundenlogos

UnicEine Referenzliste mit realisierten Projekten trägt viel zur Glaubwürdigkeit in die eigene Marke bei. Das Anzeigen von Logos von zufriedenen Kunden demonstriert, dass Erfahrung vorhanden ist.

Wenn Firmen sehen, dass Sie ein Projekt für einen Kunden umgesetzt haben, der Erfolg hat, wollen diese auch mit Ihnen zusammenarbeiten und ebenso Erfolg haben.

3. Bezahl Logos

MediamarktGerade in der heutigen Zeit wo immer wieder Fälle von Kreditkartenbetrug und anderen böswilligen Manipulationen im Internet die Rede ist, kann das Misstrauen von Webseitenbesuchern durch das Platzieren eines Logos des Merchants oder eines Zertifikationsinstitutes wie e-Trust gemildert werden.

4. Aussagekräftige “Über uns”-Seite

DigitecDie “Über uns”-Seite sollte Ihrem Unterehmen einen persönlichen Touch verleihen. Auf diese Weise werden potentielle Käufer Ihrer Dienstleistung eher vertrauen als irgendeiner generischen Seite, die nicht aussagt.

Achten Sie aber auch darauf, dass sie nicht irgendwelche Stock Fotos nehmen, sondern die effektiven Bilder Ihrer Mitarbeiter.

5. Sozialer Beweis

Coca ColaDie einfache Platzierung des Facebook Like Buttons, bei dem die Zahl der Anzahl User dargestellt ist, kann bereits sehr viel Vertrauen aufbauen.

Eine Site mit mehreren hundert Likes ist sehr wahrscheinlich schon lange online und hat eine entsprechend grosse Fanbase aufbauen können. Der Inhalt der Seite ist wohl relevant und sie wird wohl auch morgen noch relevant sein.

User auf Twitter folgen eher einer Unternehmung die 10’000 Followers hat anstatt einer die 10’000 anderen folgt aber selber nur 50 Followers hat.

6. Testimonials

TestimonialDas Anzeigen von Testimonials ist der grösste Faktor zur Etablierung von Vertrauen. Zitate von zufriedenen Kunden fügen einen weiteren persönlichen Touch zu Ihrer Webseite hinzu.

Wenn Sie zeigen und beweisen können, dass Sie anderen Firmen bei ihren Problemlösungen helfen konnten, wollen dies andere Unternehmen auch haben.

7. Nützliche Informationen

Namics BlogSchreiben Sie nebst den Standard Verkaufssätzen nützliche Artikel wie How-Tos und alltägliche Tips im Zusammenhang mit Ihrer Dienstleistung oder Ihren Produkten.

Dadurch können Sie sich als Kompetenzträger positionieren dem Webseitenbesucher vertrauen und immer wieder zurückkommen. Ausserdem signalisieren Sie so auch, dass Sie nicht einfach nur schnell etwas verkaufen wollen, sondern sich auch wirklich um die Probleme Ihrer Kunden kümmern (wollen).

Read More

6 einfache Regeln für mobiles Webseiten Design

Posted By chris / Allgemein, Design / No Comments

Der mobile Trend ist unaufhaltsam und bald werden geschätzte 2 Milliarden Menschen ein Smartphone regelmässig benutzen. Die Unternehmen, die sich als Erste an dieses schnell wachsende Segment anpassen werden die meisten Vorteile haben und dementsprechend auch Erfolg.

Ihr Unternehmen muss leicht gefunden und erreichbar sein, nicht nur auf Desktop PCs, sondern auch über Smartphones oder Tablets. Nachfolgend sechs Regeln damit Ihre Webseite optimal auf mobile eingerichtet ist:

Zielgruppe kennen

Der grosse Vorteil von Online ist, dass alles gemessen werden kann und daraus abgeleitet entsprechende Verbesserungen für Ihr Business gemacht werden können. Durch die Analyse der Daten kann herausgefunden werden, mit welchen Geräten die Webseite besucht wird. Das Optimieren des Designs für jenes Gerät, das vom Grossteil der Besucher verwendet wird, ist sinnvoll, nichtsdestotrotz sollten aber die anderen Geräte und Betriebssysteme nicht vernachlässigt werden.

Inhalt ist massgebend

Da Webbrowser auf mobilen Geräten nicht den gleichen Funktionsumfang bieten wie Browser auf Desktop Rechnern, ist es wichtig zu definieren, welche Aspekte der Webseite am wichtigsten sind und dann sicherstellen, dass diese auch leicht zugänglich sind.

Weil oft nach Kontaktdaten wie E-Mail oder Telefonnummer gesucht wird, ist es wichtig, dass diese auf der Webseite prominent dargestellt und einfach angeklickt werden können.

Benutzer von Touchscreens nicht vergessen

Damit ist gemeint, dass Buttons und Links so gross designt werden, dass diese auf einem Touchscreen mit den Fingern einfach angetippt werden können. Auch sollte genügend Platz zwischen den einzelnen Elementen gelassen werden damit nicht aus Versehen ein benachbartes Element aktiviert wird.

Das Design einfach halten

Für mobile Webseiten Besucher ist es nicht wichtig, dass sie mit ausgeklügelten Designs verblüfft werden. Für sie ist es nur wichtig, dass sie schnell zu den gewünschten Informationen kommen ohne viel Grafiken und sonst welche Dateien herunterladen zu müssen.

Einspaltige Layouts

Anders als auf Desktop Rechnern ist die einzig wirklich gangbare Designlösung auf Mobile ein einspaltiges Layout. So können User die Informationen einfach und schnell finden.

Auch wenn heutige Smartphones relativ grosse Screens besitzen ist es dennoch mühsam durch lange und mehrfache Spalten scrollen zu müssen.

Integration von Social Media

Mobile User sind eher bereit Inhalte zu teilen, weil auf ihrem Smartphone alle Social Media Apps leicht verfügbar sind. Daher ist es wichtig immer Links zu Ihren Seiten auf Facebook, Twitter, LinkedIn, YouTube, Pinterest oder wo auch immer zu haben, damit diese mit einem einfachen Tippen erreicht und geteilt werden können.

Read More

Redesign für La Casa del Habano Zürich

Posted By chris / Allgemein / No Comments

Die Casa del Habano ist ein Franchise-Unternehmen von Habanos S.A. in Kuba. Momentan existieren 135 dieser Geschäfte in rund 50 Ländern rund um den Globus.

Für die Franchise in Zürich – www.la-casa-del-habano.ch – hat Design42 ein komplettes Redesign mit responsivem Design plus Onlinekatalog konzipiert, umgesetzt und online gestellt.

Auf Basis von WordPress kann der Kunde alle Inhalte wie News, Seiten und Produkte selber bearbeiten.

Weiteres zu Casa del Habano (über Intertabak AG): Die Casas garantieren dem Aficionado nicht nur die Authentizität der Produkte, gelagert unter perfekten Bedingungen, sondern bieten ausserdem ein vollständiges Sortiment an Habanos-Marken und -Formaten. Die Casas beziehen (außer in Cuba, wo Habanos S.A. die Casas natürlich direkt beliefert) ihre Produkte über die jeweiligen Exklusivimporteure der Länder.

Die Casas bieten nicht nur den perfekten Raum für den Verkauf von Habanos, sie führen außerdem bestimmte Habanos-Spezialitäten und -Raritäten, die sonst nicht im Fachhandel erhältlich sind. Neue Produkte sind dort immer zuerst erhältlich. Fachkundiges Personal in den Casas begleitet den Geniesser auf dem Weg durch die Welt der Habanos, angefangen über die richtige Wahl bis hin zu Informationen über die Entstehung dieser “Juwele”.

In der Schweiz existieren heute zwei Casas del Habano: in Zürich und Basel.

Read More

where are we ? click for google map