Man sagt „Mode wiederholt sich” und 2018 wird ein Jahr, in dem sich die Grafikdesign-Trends der Vergangenheit erneuern werden und sich (wortwörtlich) von der Flat-Design-Landschaft der vergangenen Jahre entfernen. Minimalismus und Vereinfachung werden bleiben, aber du wirst zusehen können, wie einige alte Lieblinge mit modernen, aktualisierten Looks ins Rampenlicht zurückkehren.

Wenn dir nach Modernem ist und du deinen Designs ein bisschen modernes Flair verpassen willst, schaue dir diese 10 Grafikdesign-Trends an, die deine Kunden 2018 zum Staunen bringen werden.

10 Grafikdesign-Trends, die man 2018 im Auge behalten sollte

  1. Responsive Logos
  2. Farbverläufe
  3. Mehr Tiefe (mit Semi-Flat Design)
  4. Flotte Duotines
  5. Paletten und Muster inspiriert von den 80er und 90er-Jahren
  6. Bewegung: Animationen & GIFs
  7. Fette Typografie
  8. Individuelle Grafiken und Illustrationen
  9. Authentische Fotografie
  10. Hochdetailliertes Vintage

1. Responsive Logos

Es ist 10 Jahre her, dass responsives Design damit begann, das Internet zu revolutionieren und seitdem ist es zu einem Branchenstandard geworden. Der rapide Anstieg mobilen Internetsurfens (und ein endloses Sortiment an Geräten und Bildschirmgrößen) hat für traditionelle Webseiten entscheidende Probleme bei der Bedienbarkeit hervorgebracht. Designer und Entwickler begannen mit verschiedenen Möglichkeiten zu experimentieren, damit sich Designs an die Geräte der Nutzer anpassen. Dies bildete die Grundlage für das, was heute als „responsives Design“ bekannt ist.

Die Idee, Logos anzupassen, um den Forderungen der Nutzer gerecht zu werden, blieb weitestgehend undenkbar… bis jetzt. Unternehmen haben in den letzten Jahren ihre Logos erneuert und vereinfacht und responsives Logodesign ist der logische nächste Schritt, den Anforderungen von heute gerecht zu werden.

Responsive logo concepts by Joe Harrison
Select examples from “Responsive Logos”. Via Joe Harrison

Designer Joe Harrison schuf ein experimentelles Projekt namens „Responsive Logos“, um die Erstellung skalierbarer Logos für einige der größten Marken der Welt zu erkunden.

Skype logo
Via Skype
Google logo
Via Google

2. Farbverläufe (wir nennen sie auch Farbübergänge)

NYC Pride webpage screenshot
Gradient image overlay with color transition animations for added flare. Via NYC Pride

Vor nicht allzu langer Zeit waren Farbverläufe vorherrschend. Man fand sie auf jedem Website-Button, jeder Seitenüberschrift und PowerPoint-Präsentation. Dein Firmen-PDF war nicht cool, solange kein Farbverlauf das Cover beehrte. Dann, irgendwann gegen Ende 2007 waren sie aus dem Rennen, als die Ära des Flat Designs begann.

Stripe webpage screenshot
Stripe uses vibrant gradient backgrounds to compliment semi-flat illustrations. Via Stripe

Flaches Design entwickelt sich weiter und Farbverläufe erleben ein Comeback als Erweiterung für Flat Design. Diese Erweiterung ist Teil eines modernisierten Designs, das oftmals als „Flat 2.0“ oder „Semi-Flat-Design“ bezeichnet wird. Ihre Wiedererscheinung in iOS und die Adaption von Branchenführern wie Stripe und Instagram haben ihre Beliebtheit wieder einmal gefestigt und du wirst sie in Form von lebendigen UI, Branding, Hintergründen, Illustrationen und Overlays zu sehen bekommen.

Elje Group webpage screenshot
Elje Group’s vivid color transitions and typography are on point for 2018. Via Elje Group
Asana webpage screenshot
Asana combines gradients, illustrations and shadows for a modern, flat 2.0 look. Via Asana

Wir sehen auch eine erhöhte Verwendung des Begriffs „Farbübergang“, wenn es um Farbverläufe geht. Während diese Begriffe synonym scheinen, bezieht sich „Farbübergang“ öfter auf die moderne Anwendung, welche lebhaft, weich und „flacher“ ist – und zur Ästhetik des Flat Designs passt.

Workspace logo design
Workspace logo design for helloT7 by shaka88
Pushups fitness app
Pushups fitness app for SmoothMobile, LLC by Nashrulmalik
Aquatta logo concept
Aquatta logo concept by artsigma

3. Mehr Tiefe (mit Semi-Flat Design)

Galaxii game app design
Card design for the Galaxii game app by boorykin

Wir haben sie in letzter Zeit häufig gesehen und man kann mit Sicherheit sagen, dass Schatten 2018 offiziell zurück sind. Ebenso wie Farbverläufe, wurden Schatten auf Eis gelegt, als wir Realismus und Skeuomorphismus aus unserem Design verbannt haben, zugunsten von extremem Minimalismus und zweidimensionalem Design.

Rückblickend war Tiefe ein wertvolles Tool um Nutzern dabei zu helfen, visuelle Hierarchie, Eingabefelder und Calls-To-Action zu erkennen. Designer experimentierten mit „langen Schatten“ als akzeptables Mittel, um ihren Flat Designs mehr Dimension zu verleihen, als Google Material Design wieder echte Schatten in ihrem UI einführte. Die Idee verbreitete sich schnell außerhalb von Material Design und Designer begannen wieder, ihre eigenen Schatten einzuführen. Diese Schatten waren groß, weich, manchmal bunt und fügten subtile Tiefe und Dimension hinzu, im Gegensatz zu den zuvor verwendeten rauen, zu oft benutzten Vorgängern.

Inbox by Gmail website screenshot
An example of material design. Via Inbox by Gmail
Android website screenshot
Large, soft shadows help determine hierarchy and interactivity in this awesome Material Design site. Via Android

Den Puristen mag es nicht gefallen, aber Tiefe hat gezeigt, dass sie zum sich weiterentwickelnden Ethos von Flat Design passen kann, indem es die Usability und Einfachheit verbessert – beides Grundprinzipien von Flat Design. Künftig wirst du sehen, dass Schatten in der „Semi-Flat“-Bewegung nicht mehr wegzudenken sind. Wir sehen bereits, wie sie dazu verwendet werden, Symbole und Illustrationen aufzuwerten, ebenso wie Websites, App-Interfaces und sogar Print-Designs.

Codecourse homepage design
Subtle shadows help the UI components pop in this unique design. Codecourse homepage design by His-P Design Studio
Base UI website screenshot
Subtle shadows help the UI components pop in this unique design. Via Base UI for Sketch

4. Flotte Duotones

AfriSam 2018 Corporate Stationary
Calendar panel from AfriSam 2018 Corporate Stationary. Via Katt Phatt, Andrew Footit, Promise Luxe™, charlette hepworth, Ali Cordeiro, Copywriter, Nic Kostouros, Sherilea Gaspar

Duotones werden traditionell erzeugt, indem man ein Halbtonbild auf ein weiteres mit gegensätzlicher Farbe druckt und so ein zweifarbiges Bild erstellt. Diese fundamentale Drucktechnik lebt in digitalen Medien wieder auf. Bildbearbeitungssoftware hat es einfacher als jemals zuvor gemacht, Duotones zu erstellen, ebenso wie verwandte Variationen wie Monotones, Tritones, Quadtones und „falsche Duotones“ (getönte Bilder).

Spotify Showstopper Podcast image
Spotify uses duotone images for branding and cover art. Via Spotify

Spotify wurde dafür gelobt, dass sie zum Mainstream-Design zurückgekehrt sind, indem sie Duotone-Bilder in ihrer App und ihren Microsites verwendeten. Designer nutzen diese Technik zu ihrem Vorteil, da innerhalb einer begrenzten Farbpalette erzeugte Bilder äußerst gut zum Semi-Flat-Design passen.

Mit kräftigen Farben und wunderbaren Anwendungsmöglichkeiten gelten Duotones als einer der heißesten Trends für 2018.

Duotone poster design
Duotone poster design for Gauthier & Nolet Architects. Via Jvstin Bechard
Keto + Co product packaging
Product packaging design by ::scott::
Cultulre.pl website screenshot
Duotones are used throughout the incredible website design for “Multimedia Guides to Polish Culture”. Via Culture.pl
NewDealDesign website screenshot
NewDealDesign uses vivid duotone imagery everywhere. Via NewDealDesign

5. Paletten und Farben inspiriert von den 80er und 90er-Jahren

Bliss Thai’s 80’s inspired brand identity
Bliss Thai’s 80’s inspired brand identity. Via Daria Kwon
Write Sketch &’s high quality decorative paper
Write Sketch &’s line of stationery and decorative papers have an awesome 80’s-90’s vibe. Via Write Sketch &
Redux Saints logo
Redux Saints Branding featuring an electric logo design by austinminded

Von schicken Pastellfarben (Stichwort Millennial Pink) bis hin zu elektrischen Farbtönen, Farbschemen aus den 80er und 90er Jahren haben wieder an Beliebtheit gewonnen. Mit der Bewegung weg von ultraflachen Designs kannst du davon ausgehen, dass sich die abstrakten und geometrischen Muster, inspiriert von dieser Ära, wieder im Mainstream etablieren.

Da Kinder der 80er und 90er bedeutender und einflussreicher werden, sowohl als Markenführer als auch als Hauptzielgruppe, kann dieser Trend deinen Designs visuelle Begeisterung ebenso wie einen Hauch Nostalgie verleihen.

Fun Employed website screenshot
Fun Employed’s funky illustration is an amalgamation of retro and flat. Via Fun Employed
Nordic.design website screenshot
Nordic.design is down-right cute with it’s geometric patterns and neon colors. Via nordic.design
MOO’s business card sample pack
Bold colors and patterns jazz up MOO’s business card sample pack. Via MOO

6. Bewegung: Animationen & GIFs

Vielleicht hast du in letzter Zeit bereits einiges von „Microinteractions“ gehört, aber was genau sind sie und warum solltest du sie nutzen? Vereinfacht gesagt sind Microinteractions winzige Animationen die dazu verwendet werden, mit Nutzern zu kommunizieren und ihnen dabei zu helfen, eine Aufgabe durchzuführen. Sie sind eine bewährte UX-Methode und möglicherweise einer der größten UX-Trends bisher.

Final app gif
App interactions for Final. Via Ramotion
Contact sync gif
Contact sync microinteractions. Via Ramotion

Microinteractions sind überall und auch wenn sie dir vielleicht nicht bewusst sind, interagierst du jedesmal mit ihnen, wenn du eine Benachrichtigung auf 99designs bekommst und bei Tinder nach links wischst. Sie sind besonders nützlich dabei dem Nutzer das Gefühl zu geben, ein Interface zu bedienen, indem man ihm Feedback für seine Handlungen gibt. Auf die Details zu achten, kann dein Design wirklich auf die nächste Stufe heben.

500px logo gif
The new movement of 500px. Via William Kesling for Focus Lab
Animations for the new Google brand system
Animations for the new Google brand system. Via Adam Grabowski
Uber logo gif
Official animated wordmark for Uber. Via Nicolas Girard

Was größere Animationen betrifft, sind GIFs und SVGs wertvolle Tools, um Ideen, Konzepte und Prozesse zu kommunizieren, während man gleichzeitig den Content interessanter für User gestaltet. GIFs haben seit den Tagen, an denen sie nur animierte Clip Arts waren, weit gebracht und passen mittlerweile hervorragend zum modernen Internet. Mache Anzeigen, E-Mail-Newsletter, Illustrationen, Icons und Logos interessanter, indem du dir diesen Trend zunutze machst. Animierte GIF-Logos sind wahrlich ein Trend für sich geworden und man kann leicht sehen weshalb – sie sind schick, clever und extrem ansprechend.

These aren’t your average GIFs. Via The Artery
Icons Responsive animated header GIF demonstrates the concept behind their product. Via Icons Responsive
Bloom website screenshot
Bloom is brimming with illustrations and animations. Via Bloom

Apropos ansprechende Animationen. Es scheint, als hätten das GIF und das Video ein Baby bekommen und sein Name ist Cinemagramm. Cinemagramme sind  im Grunde genommen Standbilder, die eine sich wiederholende Videoschleife in nur einem Bereich des Bildes enthalten. Der Kontrast der Bewegung, der extreme Stille überlagert, kann eindrucksvoll und surreal sein. Die kurze, sich wiederholende Schleife erzeugt die Illusion einer fortlaufenden Animation und einer sich bewegenden Fotografie. Cinemagramme können entweder aus einem kleinen Videoclip erstellt werden oder aus einer Sammlung von Fotografien und entweder als Video oder als animiertes GIF veröffentlicht werden. Du kannst davon ausgehen, im Jahr 2018 Cinemagramme auf Webseiten, in Apps und Werbeanzeigen in den sozialen Medien zu sehen.

7. Fette Typografie (und Serifen kehren auf den Bildschirm zurück!)

Slack website screenshot
Slack seamlessly integrates serif fonts into a flat design. Via Slack
Digital Volcano website screenshot
Serif fonts help set the tone for this epic project. Via General Electric

In Sachen Typografie gilt 2018 „je größer und fetter, desto besser“. Designer werden sich für künstlerische Effekte, besonders große Schriftgrößen und riesige Überschriften entscheiden. Von Helvetic inspirierte Sans-Serif-Schriften haben die digitale Welt bisher dominiert und während sie weiterhin in Mode bleiben werden (insbesondere ihre besonders fetten Familienmitglieder), können wir im kommenden Jahr mehr Vielfältigkeit bei den Schriftarten erwarten.

Bolden website screenshot
Bolden’s extra-large typography and hover animation is awesome. Via Bolden

Diese Vielfältigkeit wird dekorativere und handgemachte Schriftarten enthalten, genauso wie Serifenschriften. Serifenschriften haben ein rasantes Comeback hingelegt, besonders in Kombination mit Sans-Serif-Schriften. Mit dem Verlangen nach Synchronisation durch alle Medien hinweg, haben Designer sich fast vollständig von Serifen-Schriften verabschiedet, um Unstimmigkeit zu vermeiden, während Marken damit begannen, im Internet immer aktiver zu werden. Mit der steigenden Akzeptanz von Serifen-Schriften (vermutlich Dank besserer Bildschirme und den beeindruckenden Optionen von Googles Web Fonts), können wir erwarten, dass sich dies allmählich weiter ausbreitet und Serifen-Schriften ihren alten Stand wiedererlangen.

Alta packaging design
Alta packaging design concept by Fe Melo
Album artwork
Album artwork for Low High featuring creative typography by nevergohungry
book cover
Wir Im Wandel book cover by nevergohungry

Auch Trends, die man hauptsächlich im Print sieht, finden ihren Weg auf den Bildschirm. Zu ihnen werden experimentelle und künstlerische Typografie, kreativere Layouts und Platzierungen sowie Bilder und auffallendere Variationen von Ausrichtung und Unterschneidung gehören.

Polaroid website screenshot
So modern, yet so retro. Via Polaroid Originals
monsieur caillou website screenshot
Pierre Nguyen shows us bigger can be better. Via Pierre Nguyen
Nurture Digital website screenshot
Bold serifs and whimsical animations are a great pairing. Via Nurture Digital

8. Individuelle Grafiken und Illustrationen

custom typography logo
Stunning logo with custom typography. A collaboration by Dusan Klepic DK™ and ludibes
illustrated mobile site design concept
This illustrated mobile site design concept by boorykin is seriously amazing. (Full view here.)
Book Cover Design
The Year of You book cover design for hannahs3 by LilaM

Egal ob skurril, pragmatisch oder einfach künstlerisch, die Nachfrage nach individuellen Grafiken und Illustrationen wird auch im neuen Jahr weiterhin steigen. Individuell angepasste Bilder haben in Printmedien schon immer eine bedeutende Rolle gespielt. Bei digitalen Medien allerdings haben individuelle Grafiken und Illustrationen im letzten Jahrzehnt die zweite Geige hinter Stockfotos gespielt (obwohl sie in den 2000er Jahren die Stars auf Flash-Webseiten waren).

Rocket custom illustrations
Custom illustrations for rocket by SpoonLancer
Trade show display
Trade show display design for cloco by Mila Jones Cann

Der Zugang zu Stockfotos führte dazu, dass Zeichnung, Malerei, Kalligrafie, künstlerische Typografie, Fotografie und Illustration im modernen Internet selten genutzt wurden. Dazu gehören moderne Interpretationen klassischer Grafikdesign-Techniken, wie Duotones und Doppelbelichtungen, welche nun beide zum Trend werden. Die Bewegung Richtung Flat Design lies ebenfalls wenig Raum für solche Verschönerungen und während wir uns für Icons und Illustrationen entschieden, die zu den Flat Design Trends passten, hinterließen wir alles ein wenig gleich aussehend.

Mailchimp website screenshot
MailChimp’s fun 80’s inspired graphic art. Via MailChimp
Whimsical tentacle illustrations
These illustrations are downright whimsical. Via Denise Chandler
The game inspired interactive resume of Robby Leonardi screenshot
The game inspired interactive resume of Robby Leonardi.

Individuelle Illustrationen helfen dabei, eine visuelle Sprache zu erzeugen, welche die Persönlichkeit einer Marke aufwerten kann. 2018 darfst du wirklich kreativ werden, da wir mehr Illustrationen in einer größeren Bandbreite von Stilen sehen werden, während Designer und ihre Kunden damit beginnen, das Potenzial dieser unzureichend genutzten Vorzüge auszuschöpfen.

Matisse inspired illustration
These Matisse inspired illustrations with subtle animations are simply striking. Via Inside the Head
Part flat, part 80’s
Part flat, part 80’s, all custom. Via New Enterprise Associates
Delicate watercolor illustration
Delicate watercolor illustrations are timeless. Via House at Khlebny

9. Authentische Fotografie

Yeti Cycles website screenshot
Yeti’s photography is action-packed. Via Yeti

Authentische Fotografie sieht und fühlt sich echt an. Ob du dich nun dafür entscheidest, mit eigenen Fotos zu arbeiten oder Stockfotos wählst, schaue nach Bildern, die Emotionen vermitteln, Action enthalten oder Geschichten erzählen. Ungefilterte und ungestellte Fotografie war in den 90er-Jahren ein großer Teil der Werbung und obwohl wir keine Ahnung haben, weshalb Models die nächsten 15 Jahre damit verbracht haben, Hände zu schütteln und ihre Bildschirme anzulächeln, ist es erfrischend zu sehen, dass natürliche (und interessantere) Kompositionen ihren Weg zurück in den Mainstream finden.

Big Cartel website screenshot
Big Cartel’s real life scenes relate to their artistic audience. Via Big Cartel
Dog walking on a leash
Seriously, how cute is this guy? Via Dog Jogs

Die Nachfrage nach Fotografie aus dem wirklichen Leben stieg 2017 signifikant an und wird 2018 sogar noch mehr steigen, da Marken die Verbindung zu ihren Nutzern suchen und Designer die Welt von schlechter Stockfotografie befreien wollen. Glücklicherweise gibt es viele großartige Fotografen, die diese Nachfrage mit hochwertiger und kostenloser Stockfotografie bedienen.

Epic action shots and scenery
This design is jam-packed with epic action shots and scenery. Via Epiccurrence
Elegant seagulls website screenshot
Elegant Seagulls combines custom photography with bold typography for a modern, creative look. Via Elegant Seagulls

10. Hochdetailliertes Vintage

soap bar packaging
Boutique soap bar packaging concept by Martis Lupus
health food packaging
Eye-Catching health food packaging concept by Hive – Agency

Vintage ist absolut nichts Neues (offensichtlich), aber der Trend wird auch 2018 stark bleiben. Auch wenn es dem Mainstream-Wunsch nach Minimalismus widersprechen mag – schöne, gut gestaltete Logos und Illustrationen sind zeitlos. Marken, die nach einem herausragenden Look suchen, merken oft, dass klassische Design-Ästhetik etwas Vornehmes hat.

Whiskey box design
Whiskey box design concept by Esteban T
Salami label design
Salami label design for Bona by Wooden Horse
Perfect Steep eJuice logo design
Logo design for Perfect Steep eJuice by Mojo66

Während dieser Trend vielleicht nicht für jeden geeignet ist, nutzen Marken der Lebensmittelindustrie – besonders solche, die Wein und Spirituosen verkaufen – diesen Stil seit Jahren mit großartigen Ergebnissen. Handgefertigte, ökologische und natürliche Produktmarken lieben diesen Look und geben ihren Produkten dieses handgefertigte, gesunde Gefühl von einfacheren Zeiten.

Fiore’s floral Italian restaurant branding
Fiore floral Italian restaurant branding. Via No Name Branding
Vintage label design concept
Vintage label design concepts by .g.
Find the perfect gin app design
Find the perfect gin using this delightfully designed app. Via Ginventory

Bist du bereit für das Design von 2018?

Es ist eine faszinierende Zeit im Grafikdesign. Grafiken werden wiederbelebt, während wir langsam einen Widerstand gegen Flat Design sehen. Die Designszene wird um einiges interessanter, während wir uns weiterhin auf die Originalität und Individualität der Marken und ihren Zielgruppen konzentrieren. Mit so vielen alten und neuen Stilen auf dem Tisch wird es eine Zeit, in der Risiken eingegangen und Muster durchbrochen werden. Mache 2018 zu dem Jahr, in dem du deine Kreativität entfesselst!

Du suchst Grafikdesign im Trend?
Unsere Designer-Community gestaltet dir so ziemlich alles!