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

Videos richtig einsetzen

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

Die Beliebtheit von Videos auf Webseiten zur Beschreibung von Produkten und Dienstleistungen wird immer grösser. Auf e-Commerce Seiten können sie durch den richtigen Einsatz helfen, den Umsatz zu steigern. Nachfolgend die 3 wichtigsten Einsatzgebiete:

1. Erklärung

Ein Produktbeschrieb oder eine Anleitung für ein neuartiges Gerät, wie z.B. die Thermostaten von Nest, kann durch Videos viel einfacher und verständlicher rüber gebracht werden als eine trockene schriftliche Anleitung.

2. Stimmung

Nebst Demonstrationen können Videos helfen, dem Besucher die Charakteristiken eines Produktes zu zeigen und ihn dazu bringen sich mit dem Produkt virtuell vertraut zu machen. Auf den Produktseiten von Apple finden sich viele sogenannte Ambiance Videos, die das Design und die Kreativität des Unternehmens unterstreichen sollen.

3. Orientierung

Ein Video kann auch nur dazu dienen, aus statischen Produktbildern bewegte Animationen zu machen, bzw. mit einfachen Mitteln zu zeigen, wofür das entsprechende Produkt eingesetzt werden kann, wie im Fall zum Beispiel von Nude Audio.

Beispiele:

scr_harvest

Harvest ist ein webbasiertes Zeiterfassungs- und Abrechnungstool. Auf der Startseite kann der Besucher ein Video anschauen, dass ohne Worte auskommt, aber den ganzen Workflow eines Onlineprojektes abdeckt und zeigen soll, wie das Tool den einzelnen Projektmitarbeitern helfen kann.

scr_pencilDie intuitive Bedienung und die vielfältigen Möglichkeiten von Pencil, einem Stilus für das iPad, werden in einem kurzen Video – ebenfalls ohne Worte – unkompliziert, aber eindrücklich präsentiert.

scr_nestDer Nest Thermostat ist ein Sensor-gesteuertes System für zu hause. Das Video zeigt die Hauptfunktionalitäten, insbesondere das Self Learning des Produktes in einem einfachen aber nicht billig wirkenden Film.

scr_nest2Ein Anleitungsvideo findet sich im Produktedetail selber. Eine Sprecherin begleitet das Video und zeigt auf verständliche Art und Weise die Installation des Gerätes.

scr_nudeAuf Nude Audio werden Videos im Hintergrund des Produktbeschriebs eingesetzt, wodurch Besucher ohne weiteres Klicken bereits einen ersten Eindruck des Produktes erhalten.

scr_ipad

Videos sind von der Apple Website nicht mehr wegzudenken. Neben Videos ihrer Keynotes und Fernsehwerbung gibt es für alle wichtigen Produkte ein oder mehrere Videos in verschiedenen Bereichen.

 

 

 

 

 

 

Read More

Return on Investment von Social Media

Posted By chris / E-Commerce, Social Media / No Comments

 Wie kann man die Rentabilität (ROI – Return on Investment) von Social Media messen? Ist Social Media Marketing überhaupt effektiv und gewinnbringend? Die folgende Infografik liefert ein paar interessante Zahlen, unter anderem:
  • 74% aller Marketingleiter denken, dass sie dieses Jahr Social Media an hartem ROI binden werden
  • 76% der Unternehmen verwenden soziale Netzwerke für Businesszwecke
  • nur 11% der Unternehmen integrieren soziale Medien in ihre Marketingpläne

Read More

7 Webdesign Trends

Posted By chris / Design / 1 Comment

Nicht nur die Technologie befindet sich im ständigen Wandel, auch das Verhalten der User und damit einhergehend auch das Design von Webseiten. Responsives Webdesign ist innerhalb kürzester Zeit zu einem Must-Have geworden für jeden Anbieter, der etwas auf sich hält. Aber es geht noch weiter: Webseiten werden zunehmend interaktiver mit coolen Navigationen und Rich Media Inhalten. Nachfolgend sieben Techniken, die aktuell im Trend sind und noch viel Designpotential nach oben haben.

 

1. SVG

SVG wurde 2014 zu einem Buzzword. Kein Wunder, denn mit diesem vektorbasierten Grafikformat können gestochen scharfe Animationen und Effekte erzielt werden. Hier drei Beispiele wie SVG effektiv eingesetzt werden kann:

justdesign

celebratedesign

mapquest

2. Lang lebe RWD

Mit der zunehmenden Zahl von mobilen Endgeräten, dem Konsum von Fernsehen unterwegs und neuer Gadgets wie Smart Watches und Wearables ist es für einen seriösen Anbieter unerlässlich alle gängigen Formate mittels responsivem Webdesign abzudecken.

toptache

barragecapital

muzli

3. Dynamische Hintergrundbilder

Grossflächige Hintergundbilder werden schon seit geraumer Zeit eingesetzt, aber mit den heutigen Möglichkeiten stehen den Webdesignern neue Türen offen. Wie zum Beispiel 3D, oder einfach nur hochauflösende Filme als Hintergrundelement.

hardudetideg

bmw

beoplay

4. Mehr Interaktivität denn je

Kleine Interaktionen auf der Webseite regen zum Auskundschaften und Verweilen auf der Webseite an. Indem man ein eindrückliches und emotionales Erlebnis für den User schafft bringt man sie dazu auf der Seite zu bleiben und sich auch emotional mit der eigenen Marke zu verbinden.

natgeoeat

santastories

booking

5. Grösser, fetter, besser

Die Typographie der Seite ist ein wichtiger Aspekt für die Usability und die allgemeine Ästhetik. Mit ihr wird auch die Markenbotschaft übermittelt und richtig eingesetzt erhöhen die eingesetzten Schriften die Lesbarkeit und ganz allgemein die User Experience.

mohito

sendamessage

brianhoffdesign

6. Ghost Buttons

Minimal gestylte Buttons, meistens nur erkennbar an einem schlichten Rand, aber mit einem subtilen Hover-Effekt, passen gut zu grossflächigen Hintergundbildern und -videos.

hikecon

worldinmylens

thedistance

7. Scrollen anstatt klicken

Mit der grossen Anzahl von Smartphones und Tablets haben sich die User an Seiten gewöhnt, auf denen man scrollen muss. Lieber will man eine Vorschau aller Inhalte auf der ersten Seite erhalten, anstatt sich durch unzählige Menü- und Untermenüpunkte klicken zu müssen nur um auf der falschen Seite zu landen. Deshalb sollten Homepages heute länger sein um eine dynamische Interaktion mit dem User erreichen zu können.

superherocheesecake

studiokraftwerk

5dingen

 

Die sieben aufgelisteten Trends sind jetzt sicherlich nicht revolutionär, zeigen aber in welche Richtung Webdesign zur Zeit geht und was Webdesigner tun können um ihre eigenen Seiten entsprechend zu pimpen.

Read More

5 mobile Innovationen und was diese fürs Business bedeuten

Posted By chris / Mobile, Technology / No Comments

Nach Besuchen von mehreren Messen zum Thema Mobile Innovationen haben wir die fünf wichtigsten Trends aufgelistet, die am meisten Impact haben werden.

Hier die Liste:

1. Vernetzte Autos

An der CES 2015 gab es für Automobil-bezogene Technologien 20% mehr Fläche als noch 2014. Gemäss einer Studie von Accenture1 ist für 39% der heutigen Konsumenten eine moderne In-Car Technologie das Hauptkaufsargument. Neben Google und Apple die bereits automobilspezifische Software für Touchdisplays mit Android Auto, bzw. Apple CarPlay, die das eigene Smartphone auf das Display des Fahrzeugs bringen, haben, bietet “AtYourService” Dienste wie standort-bezogene Deals, Vergünstigungen und sogar Hotelbuchungen an, ohne dass der Fahrer seine Hände vom Lenkrad nehmen muss.

2. Wearables

Apple hat es bereits vorgemacht, viele andere werden folgen oder haben bereits ausgereifte Smart Watches. Gemäss einer Studie2 wird der Markt für Wearables einen Wert von $ 13 Mrd. bis 2018 haben.

3. Mobile Payment

Neue Gadgets wie Hypr-3 (Bluetooth-fähiges Tool zur Bezahlung über das Smartphone), Wocket (Smartwallet zum Speichern von Informationen aller Kreditkarten und anderer Karten auf einer einzigen Karte), LoopPay oder Apple Pay versuchen die ganzen Thematiken von Benutzerfreundlichkeit und Sicherheit rund um das Bezahlen mit Smartphones zu vereinfachen.

4. Pay-TV Dienste

Bei den neuen Pay-TV Modellen geht es nicht mehr nur um die Hardware, sondern auch um den Inhalt und die Bandbreite von Endgeräten, auf denen die Dienste zur Verfügung stehen. Immer mehr Verbraucher konsumieren Fernsehen nicht mehr zu Hause und live sondern unterwegs und zeitversetzt, und das auf allen möglichen Devices.

5. Smarte Gadgets für das eigene Zuhause

Seien es Überwachungskameras mit Gesichtserkennung oder ganze Funktionssteuerungen über das Smartphone bis hin zu unendlich erweiterbaren Zusatzfunktionen für Nest, eines war auch an der CES offensichtlich: das vernetzte Haus ist keine Zukunftsvision mehr, sondern eine immer stärker werdende Realität. Gesteuert werden diese Funktionen allesamt über das Smartphone in der Hosentasche.


1. http://www.bloomberg.com/news/articles/2015-01-05/drivers-will-pay-up-to-1-499-for-high-tech-features-study-says
2. http://www.statista.com/statistics/259372/wearable-device-market-value/

Read More

Die eigene Website auf Ladegeschwindigkeit tunen

Posted By chris / Technology / No Comments

google_pagespeedWebseiten werden immer grösser (im Bezug auf herunterzuladenden Files), und dank Breitbandverbindungen und neuen Geräten können immer komplexere Inhalte schnell dargestellt werden. Doch nicht alle haben und nicht überall gibt es Zugang zu schnellem Internet, Smartphones haben nur eine beschränkte Anzeigefläche und ein Grossteil der mobilen User besitzen nicht die neuste Technologie.

Nachfolgend sollen einige wichtige Techniken aufgelistet werden, dank deren Entwickler selber Einfluss auf die Ladegeschwindigkeit von Seiten nehmen können.

Reduzieren und Parallelisieren der HTTP-Anfragen

Jede separate Anfrage an den Server verursacht einen zusätzlichen Overhead und vergrössert die Komplexität mit der der Browser die Seite darstellen soll. Für Bilder gibt es verschiedene Techniken wie CSS-Sprites oder SVG.

Die meisten Browser können 4 – 8 gleichzeitige Anfragen an den gleichen Server, bzw. die gleiche Domäne absetzen. Um diese Einschränkung zu umgehen, können Files über verschiedene Server verteilt werden, am besten gleich über sog. CDN-Anbieter, die Standardfiles für z.B. jQuery oder anderen Frameworks bereitstellen.

Unterscheidung zwischen Entwicklungs- und Produktionscode

Auf Live ausgelieferter Code und Assets sollten maximal komprimiert sein. Clever aufgesetzte Deploymentszenarien nehmen die Arbeit der Komprimierung und des Zusammenziehens von verschiedenen Files automatisiert ab.

Aber auch ein serverbasiertes Tool wie Googles Pagespeed Modul kann sehr hilfreiche Dienste bieten, ohne dass programmiertechnischer Aufwand betrieben werden muss. Es müssen lediglich einige konfigurative Einstellungen gemacht werden.

Effizienter Code von Anfang an

Ineffizienter CSS- und JavaScript-Code sind die Hauptursachen für lange Ladezeiten. Im Web gibt es zahlreiche gute Artikel zum Schreiben von effizientem CSS-Code und der Wichtigkeit von der korrekten Platzierung von JavaScript im HTML-Code.

Aspekt SEO

Google bestraft Seiten mit langsamen Ladezeiten. Dies ist eigentlich das wichtigste Argument um sauber programmierte Seiten auszuliefern. Google stellt hierzu die wichtigsten Aspekte auf einer eigenen Hilfeseite zusammen.

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

Essentielle Designtrends im Web

Posted By chris / Design / No Comments

Wir haben drei aktuelln Designtrends aufgespürt und unten aufgelistet. Es sind keine Voraussagen wie das Internet aussehen wird, mehr eine Analyse der Tendenz in welche Richtung sich Webdesign entwickelt.

Semi Flat Design

Flat Design hat seinen Höhepunkt überschritten und das Problem ist, dass alle Layouts, die auf Flat Design basieren sehr generisch aussehen. Die Flat Design Phase hat eine gewisse Bereinigung und Rückkehr zum Minimalismus gebracht, doch nun finden wir immer mehr Flat Designs mit einem Schuss Realität drin. Ein Beispiel:

Google Material DesignGoogle Semi Flat Design

Das Grunddesign von Google’s Material Design ist flach, aber interaktive Elemente wie Buttons haben einen leichten Schatten um deren Funktionalität anzudeuten.

TheDash.com

TheDash

Das Grunddesign von TheDash.com ist skeuomorphistisch, aber es wird von mehreren flachen Elementen durchbrochen. Die Hauptelemente erinnern an Apple’s traditionelles Design mit Rundungen und Schatten, aber die effektiven Inhaltselemente zur Präsentation der Daten sind in einem simplen Design gehalten.

weitere Links:

Bilder als Hintergrund

Das Verwenden von ganzflächigen Bildern als Hintergrund der Webseite ist sehr verbreitet und wir könnten ein ganzes Buch über verschiedenste Beispiele schreiben. Das Wichtigste ist aber, dass diese Technik einen Zweck erfüllen sollte. Einfach ein Bild als Hintergrund zu nehmen weil es cool ist bringt nicht viel.

ModernThemes.net

ModernThemes

ModernThemes verwendet das Hintergrundbild auf der Startseite zugleich auch als Inhaltsbild. Somit wird hier im Beispiel direkt auch gezeigt, dass ihre Themes responsiv sind und auch auf einem iPad gut aussehen.

Credencys.com

Credencys

Credencys verwendet eine ähnliche Methode wie ModernThemes, wenn auch die Hand mit dem Handy in das Bild reingepastet worden ist. Nichtsdestotrotz vermitteln sowohl das Bild im Vordergrund wie auch im Hintergrund einen Zweck. Das Hintergrundbild in diesem Beispiel deutet an in welchem Kontext die App verwendet werden soll/kann und das Vordergrundbild zeigt die eigentliche App.

Hipster

Der Hipster Stil ist ein Mix der zwei vorhin erwähnten Trends. Hier werden halbflache Designelemente auf Seiten platziert, deren Hintergrund aus einem ganzflächigen Bild besteht. Meist werden auch noch weitere dekorative Elemente wie Ornamente und verschnörkelte Trenner verwendet.

Coffee Beans Delivered

Coffee beans delivered

Das Design von CoffeBeansDelivered fühlt sich durch den Einsatz des gestylten Logos einerseits modern an, andererseits vermittelt das Hintergrundbild mit den Kaffeebohnen traditionelle Werte und strahlt damit etwas grundsätzlich Positives aus. Durch diese Kombination entsteht ein Hipster Stil mit der sie sich von der Konkurrenz auf eine frische Art und Wiese abheben.

V76.com

V76.comIn anderen Fällen ist das Verwenden eines trendigen Styles einfach der Versuch einer Marke relevant zu bleiben. Gerade in den Bereichen Fashion und Körperpflege wird dies von verschiedenen Brands konsequent verfolgt um auch zu zeigen, dass sie sich den Trends der heutigen Welt bewusst sind. V76 zeigt mit ihrem Auftritt, dass sie Produkte haben die trendig sind und sich auch kommenden Trends anpassen wollen und werden.

 

Quintessenz

Design Trends kommen und gehen. Aussagekräftiges und absichtsvolles Design aber wird nie veralten. Die eigentlichen Ziele bleiben die Gleichen, wenn auch die Tools, die wir benutzen, sich ständig ändern.

Read More

where are we ? click for google map