Webdesign und WordPress Trends 2018

Quelle: Pixabay

WordPress feiert 2018 seinen 15. Geburtstag und die Entwickler sind mächtig stolz darauf in 2018 das  größte WordPress Software Update seit 2014 herauszubringen. WordPress 5.0. wird in 2018 das Licht der Welt erblicken und dabei einige massive Neuerungen im Gepäck haben. Unter anderem wird der neue Editor ‚Gutenberg‘ dabei sein und die neuen Design Trends, die in 2018 auf uns zukommen sehr gut unterstützen. Wir haben im Blog Dynamic Drive einige dieser Trends gefunden, nachgeprüft und für euch hier übersetzt und kommentiert.

Der neue ‚Gutenberg‘ WordPress Editor

Quelle: Pixabay

Der neue ‚Gutenberg‘ Editor in WordPress 5.0 wird einige wichtige und interessante Neuerungen für den WordPress Anwender bringen. Die neuen Features werden Admins und Editoren auf vielen Wegen besser unterstützen und die Seitenaufbereitung entscheidend verbessern.

Natürlich zählt hierzu das neue visuelle Interface, dass jeglichen Inhalt in Blöcken behandelt, die beliebig hin- und hergezogen und formatiert werden können. Dies geschieht ohne jegliche Nutzung von HTML Befehlen, ziemlich intuitiv und das gilt dann auch für Listen, Bildergalerien, Paragraphen, Überschriften, usw. Jeder Block hat damit sein eigenes Set von Optionen für das Layout Finetuning. Wir sind sehr gespannt, damit zu arbeiten.

Wenn das für euch wie echtes visuelles Editieren klingt, dann liegt ihr damit komplett richtig. Das WordPress Entwickler Team hat damit endlich auf die vielen Beschwerden bei der Nutzung des eingebauten Editors reagiert. Die Vielzahl von nützlichen Editor Plugins steht für dieses Dilemma aus der Vergangenheit. Die vielen ‚hacks‘, ’shortcodes‘ und plugins‘ sollten dann hoffentlich bald Vergangenheit sein.

Wer jetzt schon mal probieren mag, wie sich Gutenberg dann in WordPress 5.0 anfühlen wird, sollte schon mal einen Blick auf das Gutenberg Plugin werfen. Hier werden bereits die neuen Tools und Anwendungen getestet, damit 2018 dann alles gut läuft.

Die WordPress ‚Page-Builder‘ sind im Kommen

Quelle: httpss://www.flickr.com/photos/eltallerdelbit/25550834094

Sogenannte ‚Page Builder‘, also variable Optionen zum Aufbau eines Themes haben wir schon in den letzten Jahren häufig gefunden und mit dem neuen WordPress 5.0. in 2018 erwarten wir noch mehr davon, die es den Anwendern erlauben ihre Seiten noch variabler in Hinsicht auf Design und Content zu gestalten. Der ‚Gutenberg‘ Editor unterstützt diese Aufbereitung des Content mit und in variablem Layout. Zusammen ermöglichen die neuen WordPress Funktionen 2018 mit den dazu passenden Themes eine starke Interaktion zwischen Design und Content und stärken damit auch die Kreativität vieler Anwender.

 

Die Rest API verbindet WordPress mit neuen Inhalten

Quelle: httpss://commons.wikimedia.org

Die Rest API wurde bereits in WordPress 4.4 vorgestellt und wird in 2018 eine immer größere Rolle spielen, um deine WordPress CMS Seite mit allen Partnern, Services und Cloud Anwendungen draußen noch besser zu vernetzen. Wir erwarten auch hier Upgrades in WordPress 5.0 so dass WordPress mehr und mehr zum Mittelpunkt eines Open CMS Systems wird. Natürlich eröffnet dies auch neue Türen für Hacker und Cyberkriminelle, die versuchen werden auf diesen Wegen Zugriff auf sensible Daten und wertvolle Kundeninformationen zu bekommen, was zu verhindern wäre.

Es heißt also alle API relevanten Verbindungen, Tools und Plugins mit Sorgfalt auszuwählen und diese neuen Kanäle per Firewall und Sicherheitssoftware stets im Blick zu behalten. Aber wenn diese Regeln beachtet und befolgt werden, dann eröffnet sich für WordPress ab 2018 eine echte Transformation mit neuen Content Sharing Möglichkeit deutlich über die einzelne Webseite ins Web hinaus.

Virtual Reality wird zur neuen Realität

 

Quelle: Pixabay

Was zunächst wie ein Widerspruch klingt, scheint uns nun in 2018 schon zum Greifen nah. Inzwischen gibt es für den Hausgebrauch so viele neue VR Plattformen, wie z.B. Oculus Rift oder Google Cardboard, dass wir fest davon überzeugt sind, auch hier schon erste VR Anwendungen 2018 im Netz sehen zu werden. Die Vielzahl von Spielen, Devices und vor allem die virtuellen Touren durch reale Inhalte wird auch vor unseren Websites nicht haltmachen und erfordert nur geeignete Plugins und Plattformen. Der Anwenderwunsch nach diesen virtuellen Erlebnissen wird stetig wachsen. Wir glauben, das die Zeit reif ist, so das VR auch das Web erobert und natürlich, das WordPress ein Teil davon sein wird.

DuoTone Design trends

Quelle: https://www.adisonpartners.com/

Erste Hinweise und begeisterte Kommentare erzeugen sogenannte Zweifarben oder Duotone Designs. Die WordPress Themes dazu sind bereits vorhanden und ermöglichen den Anwendern das Gefühl dafür, wie man mit nur zwei Farben wunderschöne Webseiten komponiert. Eigentlich stammt dieser Trend aus der Bildbearbeitung, bei der ein Zweifarbenbild erzeugt wird, aber auf Webseiten bezogen, kann dieser Effekt zu besonderer Aufmerksamkeit beim Betrachter führen und bietet vor allem die Chance einen besonderen Schwerpunkt und Aufmerksamkeit auf die Schrifttypen und -größen zu legen. Ein wirklich interessanter Trend.

Cinematographs und Bewegtbilder als Hingucker

Quelle: httpss://en.wikipedia.org/wiki/Cinemagraph

Diese Art der Bildbearbeitung ist nicht neu und schon seid den ersten GIF Animationen realisierbar. Trotzdem scheinen sich die sogenannten Bewegtbilder als Animationen im Hintergrund oder als  Hingucker im Content erst jetzt so richtig zum Trend zu entwickeln. Auch wenn wir überzeugt sind, dass der Trend der Videos auf Webseiten gerade erst beginnt, so bietet diese Verschmelzung von Video und Standbild einen wirklichen Hingucker-Effekt, der Besucher fasziniert und festhält. Vor allem die Möglichkeit, solche Bilder auf einfache Weise mit dem Smartphone zu erstellen, wird uns eine wahre Fülle von ‚bewegten Bildern‘ mit immer neuen Effekten bescheren.

Mikro-Interaktionen bringen bessere Usability

Quelle: Anton Lapko on Dribbble

Das Web, seine Sprachen und vor allem die kleinen interaktiven Tools entwickeln sich rasend schnell weiter und so ist es kein Wunder, das vor allem die begabten Designer von Websites immer mehr kleine Interaktionen, die mitnichten Spielereien sind, in ihre Websites einbauen. So haben inzwischen viele Blogs die Möglichkeit on Board, als User die Farben und Kontraste interaktiv zu beeinflussen und sogenannte Mikro-Interaktionen, die wir aus den Microsoft Office Anwendungen der neusten Generation kennen, helfen uns schon mal einen Blick auf mögliche Veränderungen vor dem finalen Klick zu überprüfen. Noch finden sich diese cleveren und sanften Interaktionen kaum in WordPress, aber wer weiß was das WordPress 5.0 in 2018 noch für Überraschungen für uns aus dem Hut zaubert.

Die Webdesign Reise 2018 mit WordPress geht weiter

Wer so wie wir auch in 2018 weiter auf eine sich lebhaft entwickelnde CMS Umgebung wie WordPress setzt, wird kaum die neuesten Trends in Design, Usability und Interaktion des Web verschlafen. Wir freuen uns auf alle Herausforderungen in 2018 und wünschen allen Kunden und Freunden ein grandioses und erfolgreiches Neues Jahr!

 

Webdesign Trends 2016 – Überleben im Netz durch mehr Aufmerksamkeit

Wie immer im Netz gibt uns die allmächtige Suchmaschine Google des neu benannten Konzerns ‚Alphabet‘ den Takt vor, wie wir uns im Netz verhalten sollen und welchen Trends wir folgen und was wir besser vermeiden sollten. Dabei ist die wichtigste Schnittstelle zwischen digitaler Technik und humanen Bedürfnissen das Webdesign, das beim Nutzer innerhalb weniger Sekunden über Gefallen oder Nichtgefallen, Kauf oder Ablehnung entscheidet.

Dabei spielen gerade für viele Mittelständler die Kosten guten Webdesigns eine nicht unerhebliche Rolle. Vom ‚guten Freund‘, der es mal eben für 150 Euro macht, bis zur hochpreisigen Agentur, deren Angebot auch schon mal im 5 – 6-stelligen Bereich liegen kann, gibt es diverse Möglichkeiten. Aber entscheidend ist heute, dass eine gute Internetseite die bestmögliche Kombination aus individuellem Design und guter Usability, also einfacher Bedienbarkeit, bieten muss.

Hier ein paar Fakten zur aktuellen Internet Nutzung:

  • In 2015 benutzen bereits 80% der Internet Nutzer ein Smartphone.
  • Am weitesten verbreitet sind Laptops, Smartphones und Tablets.
  • 85% aller Nutzer checken erst die Webseite einer Firma bevor sie dort anrufen.
  • 46% aller Nutzer lehnen Käufe oder Geschäfte mit einer Firma ab, deren Webseite schlecht designt ist.
  • … und fast 100% aller Nutzer können nicht länger als drei Sekunden warten, bis die gesuchten Inhalte erscheinen (gelernt von Google)!

Die aktuellen Trends des Webdesign 2016 sind hier unten in einer Infografik von blog.logodesignguru.com zusammengefasst. Wenn Sie Fragen dazu haben, sprechen Sie uns gerne an oder senden uns eine E-Mail.

Web

Google belohnt ‚Mobile Friendly‘ Websites in seinem Ranking

Wir haben schon in 2013 über die Trends und Möglichkeiten des Responsive Webdesign berichtet und dieses entsprechend auch konsequent umgesetzt. Seit April 2015 ist nun aus dem Trend ein Muss geworden, denn Google belohnt mobil-freundliche Webseiten mit einem erhöhten Ranking-Faktor und zeigt dies in seinen Suchergebnissen seit Neuestem auch an. Die Nutzung des Internets mit Smartphone und Tablet liegt weltweit inzwischen bei über 80% im Vergleich zu den heimischen PCs und damit war dieser Schritt nur logisch und konsequent. Nicht-responsive Websites werden damit seit April 2015 für Google unwichtiger und wer schon mal eine Seite, die noch nicht optimiert wurde, auf seinem Smartphone aufgerufen hat, wird das mehr oder weniger sinnlose Herumzoomen und Hinundherschieben kennen. Den Test der eigenen Seite bietet Google hier an und wer da schlecht abschneidet, der hat definitiv Handlungsbedarf. Wir arbeiten schon seit Jahren mit WordPress CMS, dass ausreichend Möglichkeiten zur Mobile Friendly Optimierung bietet und damit den Nutzer eines Smartphones oder Tablets nicht von der eigenen Webseite vertreibt, sondern ihm die Möglichkeit gibt, alle Funktionen einfach und angepasst auf dem Touch Display zu erreichen. Dazu gehören automatisch zoomende Bilder und Videos ebenso wie Menüs, die speziell für den Touchscreen Einsatz vorberereit sind. Auch wird die Schriftgrösse dem Display angepasst und entsprechend vergrössert, so dass alle Inhalte der Webseite auch optimal zu lesen sind. Ist ihre Website bereits mobile-friendly? Wenn nicht, sprechen Sie uns gerne an!

© from developers.google.com/webmasters/mobile-sites/
© from developers.google.com/webmasters/mobile-sites/

Visuelle Design Trends 2014

Als langjährige Kunden und Contributor von iStockphoto, achten wir bei unserer Arbeit immer auf die aktuellen Trends bei Foto und Design, die unseren  Kunden signalisieren, dass wir nicht nur technisch ganz vorn dabei sind, sondern auch ein Auge und Händchen für die Sehgewohnheiten unserer Kunden im World Wide Web haben. So wird 2014, nach Ansicht der Experten, von ‚echten Frauen‘, ‚echten Vätern‘, ‚Bärten‘, ‚bewußt inszenierten Fotoartefakten‘, ‚der Beziehung zwischen Mensch und Maschine‘, ‚den mobilen Immer-Dabei-Kameras unserer Smartphones‘, der ‚ethnischen Vielfalt und Diversity‘, ‚König Fußball 2014 in Brasilien‘ und noch einigen anderen spannenden Trends dominiert. Schauen Sie sich einfach mal hier unten um und lassen Sie sich inspirieren. Wir sind es bereits!

Flat Design löst Skeuomorphismus ab

Man findet es heute bei Facebook, Google+, Twitter, Microsoft Windows 8 und jetzt auch Apple iOS 7. Alle setzen inzwischen auf „Flat Design“. Dieser Web-Design und Interface Trend löst den derzeit bekannten Skeuomorphismus im Grafik-Design ab, bei dem alle Elemente möglichst echt und 3-D aussehen sollten. Vorher waren alle Buttons und Elemente auf Webseiten irgendwie Pseudo-3-D, mit Spiegelungen, Schatten und Verläufen und nun wird alles konsequent 2-D und auf eine Farbe pro Element (Kacheldesign) reduziert.

Es ist ein Trend im Design, der sich wieder auf die wirklich wichtigen Dinge einer Webseite konzentriert und Nutzern die Benutzung von Webseiten und Apps erleichtern soll. Auch wenn vieles im „Flat Design“ auf den ersten Blick sehr einfach und fast schon primitiv aussieht, wird es bei genauer Betrachtung zur Wohltat für den Benutzer. Die Farbverläufe, runden Ecken und Schatten von Elementen war im Prinzip nichts als unnützer Ballast, den jetzt die Trendsetter des „Flat Designs“ mutig über Bord geworfen haben. Das die Designer es auch kompliziert können, weiß sowieso jeder. Aber um Nutzern wieder ein Gefühl von Einfachheit und Übersicht in einer komplizierten Welt zu geben, ist das Flat Design, gepaart mit einer einfachen Benutzerführung, das Gebot der Stunde.

Hier unten einige Beispiele der Global Player, deren Entscheidungsweg zu einer Design-Änderung mit Sicherheit mehre Etappen von teuren Nutzerbefragungen und Usability-Tests durchlaufen hat und damit diese Entscheidung mit harten Daten belegen kann. Wenn Ihnen also heute jemand viel Bling-Bling, 3-D und Abenteuerwelten für ihre Webseite verspricht, lassen Sie lieber die Finger davon. Der Trend modernen (und guten) Designs hat diese Phase bereits hinter sich gelassen und steuert auf neue Ufer zu. Fragen Sie uns nach der besten Kombi aus Flat und Responsive Design. Wir wissen, wie es sein soll ….

Flat Design Beispiele 2013 - Copyright TM Microsoft, Apple und Google
Flat Design Beispiele 2013 – Copyright TM Microsoft, Apple und Google

Logo Trends 2013

Zu einem Business oder einer Homepage gehört auch immer ein Firmen-Logo. Oft sind diese Logos schon seit vielen Jahren Aushängeschild für die Firma oder das Unternehmen, haben sich aber nicht mit dem Business oder der Internetpräsenz des Unternehmens mitentwickelt. Für Web-Designer sind diese alten Logos oft nur schwer in eine moderne Webumgebung zu integrieren. Haben Sie mal darauf geachtet, wie große Firmen wie z.B. Microsoft, Apple, Amazon oder Ebay ihre Logos verändern? In den letzten Jahren sind diese Veränderungen immer wieder verschiedenen Trends gefolgt und haben dazu beigetragen, die Marken noch markanter und erfolgreicher zu machen.

Logo Trends 2013
Logo Trends Beispiele 2013 – Copyright TM Microsoft bzw. Ebay

Gerade Firmen, die mit der zunehmenden Verbreitung des Internets groß geworden sind, geben sich 2012 und 2013 seriöser und ‚erwachsener‘. So wird die Typography geradliniger und geometrischer und ohne Serifen. Gleichzeitig hat sich die Schriftgröße und -art oft von kursiv und bold zu normal und gerade geändert. Bunte Farben sind aber nach wie vor ‚en vogue‘. Überhaupt scheinen graphische Logos eher zugunsten eines ‚Anti-Brandings‘ in den Hintergrund zu treten. Die Symbolik sollte demnach eher in der Schriftstärke und in den Farben des Namens zu finden sein. Haben Sie schon mal über die Anpassung Ihres Logos nachgedacht? Wir helfen Ihnen gern mit ein paar Vorschlägen.

Responsive Webdesign

Responsive Webdesign bezeichnet eine Praxis im Webdesign, bei der der grafische Aufbau, insbesondere die Strukturierung der einzelnen Elemente wie z. B. Navigationen und Texte, von Webseiten dynamisch und unter Berücksichtigung der Anforderungen des betrachtenden Gerätes erfolgt. Technische Basis sind neuste Webstandards wie HTML5 und CSS3. Da die Auflösung des Displays auf Laptop, PC, Tablet-Computer, Smartphone oder Fernseher erheblich variieren können, ist das Erscheinungsbild und die Bedienung einer Webseite abhängig vom Endgerät. Webseiten, die unter den Gesichtspunkten von responsivem Design bereitgestellt werden, berücksichtigen die jeweiligen Anforderungen des Gerätes und optimieren die Darstellung und Navigationselemente automatisch für das jeweilige Endgerät. Kriterium für das angepasste Erscheinungsbild ist in der Regel die Anzahl der Pixel die der Browser in der Breite zur Verfügung hat. [Quelle: Wikipedia]

Wir haben hier zwei Beispiele für Sie abgebildet.

Wenn Sie Interesse an einer Homepage wie dieser haben, rufen Sie uns gerne an.

Wenn Sie diese Testseiten live ausprobieren wollen, teilen wir Ihnen dann den Zugang zu unserem Test-Server mit.

1. Beispiel Homepage für italienisches Restaurant

Darstellung einer Restaurant Seite mit WordPress im Browser, iPad und iPhone

Ristorante Pizzeria im Browserfenster
Ristorante Pizzeria im Browserfenster
Ristorante Pizzeria auf dem iPad
Ristorante Pizzeria auf dem iPad
Ristorante Pizzeria im iPhone Safari Browser
Ristorante Pizzeria im iPhone Safari Browser

2. Beispiel Homepage einer Grundschule

Darstellung der Grundschulseite mit WordPress im Browser, iPad und iPhone

 

Responsive Grundschule im Browser
Responsive Grundschule im Browser
Responsive Grundschule im iPad
Responsive Grundschule im iPad
Responsive Grundschule im iPhone
Responsive Grundschule im iPhone