Dierekt zum Inhalt
VisionConnect Blog / Design

11 Webdesign-Begriffe aus 2015 erklärt

24. November 2015
11 Webdesign Begriffe aus 2015 erklärt

11 aktuelle Webdesignbegriffe wie CTA, Parallax, Webfont oder Landingpage kurz erklärt.

CTA

Mit „Call-To-Action“ oder kurz CTA wird eine konkrete Handlungsaufforderung innerhalb einer Website bezeichnet. Wichtig ist beim Einsatz eines „Call-To-Action“, dass dieser nicht innerhalb der Informationen untergeht, sondern klar zu erkennen ist. Wortwahl und Formulierung sollten kurz, prägnant und impulsauslösend gewählt werden.

Wird die Gestaltung eines „Call-To-Action“ passend und seriös umgesetzt, so werden Webseitenbesucher auf eine feinsinnige Art und Weise zu einer Handlung bewegt. CTA dienen häufig der Generierung von Leads.

Als „Lead“ wird ein Interessent bezeichnet, der ein hohes Potential aufweist, sich zum Kunden zu entwickeln. Die Leadgenerierung oder Interessentengewinnung ist der Prozess, der zur Kontaktherstellung und bestenfalls auch zur Neukundengewinnung führt.

Flat Design

Kann als Gegenentwurf zum „Skeuomorphismus“ verstanden werden, der den Zweck verfolgt, Elemente in ihrer Gestaltung vertrauter wirken zu lassen, indem Materialien wie z. B. Holz, Gewebe und Leder nachgebildet werden.

Das Flat Design verzichtet weitestgehend auf diese fotografischen, rein dekorativen Gestaltungselemente und kommt in seiner Ausprägung mit Farben, Flächen und Formen aus, ohne diverse Materialien „realistisch“ nachzubilden. Lediglich Schatten sind ein beliebtes Mittel, um Tiefe zu simulieren.

Hero Image

Mit der Verfügbarkeit von immer größeren Bandbreiten, ist der Einsatz von größeren Bildern heute im Webdesign gängige Praxis. Als Heroimages (auch Keyvisuals) werden großformatige Fotos und Grafiken bezeichnet, die häufig am Anfang einer Webseite anzutreffen sind.

Heroimages müssen dabei nicht zwangsläufig nur einzelne Bilder sein. Vielmehr können hiermit auch Slideshows gemeint sein. Häufig bestehen Heroimages aus einer Kombination von großformatigen Bildern und gestalterisch gesetztem Text

Infinite Scrolling

Hierbei wird von einer Webseite nur ein kleiner Teil vorgeladen. Erst beim Herunterscrollen werden dynamisch weitere Inhalte nachgeladen. Somit kann der Eindruck einer fast unendlichen Webseite entstehen, die sich kontinuierlich erweitert.

Gerade Bilddatenbanken und Social Media Kanäle mit Ihren Newsfeeds machen häufig von dieser Technik gebrauch.

Landing Page

Bei der Landing Page steht die Vorstellung eines einzelnen Angebotes (z.B. Dienstleistungs- oder Produktpräsentation, Veranstaltung) für den Kunden im Vordergrund. Die Kernformationen sollen beim Aufruf der Seite ohne Ablenkung aufgenommen werden können. Durch die Integration eines response Elements (siehe Call-To-Action) wird die einfache Interaktion mit dem Besucher sichergestellt.

Landing Pages sollen den Besucher zum Handeln motivieren. Die Landingpage muss dabei der Erwartungshaltung aufgrund der Suchbegriffe oder des Werbekontextes entsprechen.

Charakteristisch für Landing Pages ist deren auf die Herausstellungsmerkmale der dargestellten Information oder Ware reduzierte Darstellung. Hat die Landingpage diese Informationen nicht binnen 5 Sekunden kommuniziert, wird diese schnell wieder von den Nutzern verlassen.

Parallax

Durch den Einsatz eines Parallax-Effektes entsteht beim Besucher der Eindruck von räumlicher Tiefe. Um den Parallax-Effekt zu erzielen werden wie auf einer Theaterbühne unterschiedliche Ebenen in unterschiedlichen Geschwindigkeiten vor dem Auge des Betrachters verschoben.

Ursprünglich kommt dieser optische Trick aus der Entwicklung von Videospielen. Seit 2008 hat dieser in Form von Bewegungsparallaxen Einzug in die Gestaltung von Webseiten erhalten.

Storytelling

Mit Hilfe des Storytelllings werden komplexe Zusammenhänge für den Nutzer so aufbereitet, dass dieser wie in einer Geschichtenerzählung einem „roten Faden“ folgen kann. Durch interaktive Elemente und Animationen werden dem Nutzer hier Inhalte auf unterhaltsame Weise präsentiert.

Häufig werden Storytelling Webpages mit Hilfe der ParallaxTechnik erstellt.

Single Page

Der Begriff Single-Page kommt ursprünglich aus dem Bereich der Webanwendungen. Durch die Möglichkeiten von HTML5 und neuen Technologien in Webbrowsern ist es möglich, einzelne Webseiten oder Webapplikationen auf Mobile Devices lokal vorzuhalten. Der Nutzer muss nach Aufruf der Applikation nicht zwingend Online sein, um diese weiter zu sehen. Klassische Beispiele sind hier Webseiten wie z.B. Facebook.

Aber auch andere Webseiten haben das Prinzip der Darstellung Ihrer Inhalte auf einer einzigen Webseite aufgegriffen. Besonders kleinere Firmen die sich früher mit einer „Webvisitenkarte“ präsentiert hatten, setzen heute auf diese animationsreiche und augenfällige Darstellungsmöglichkeit.

UI

Hinter dieser Abkürzungen verbirgt sich der englischsprachige Begriff des User Interface. Mit UI meint man die realen Interaktionskomponenten auf dieser Website, die eine Interaktion mit dem Service oder dem Produkt ermöglichen. In Zeiten immer komplexer werdenden Anforderungen an den Nutzer in der Bedienung von Webseiten und Onlineshops ist eine einfache, leicht zu verstehende Nutzerführung im eigenen Auftritt oder der App besonders wichtig. Dazu gehört z.B. ein leicht nachvollziehbares Navigationskonzept und eine durchgängig konsistent Führung des Nutzers durch das gesamte Angebot.

UX

Diese englischsprachige Abkürzung bedeutet User Experience. Mit UX ist die emotionale Komponente des Nutzers in Bezug auf die Nutzung einer Website allgemein gemeint. Dazu muss man nicht nur das Verhalten und die Vorlieben der Nutzer verstehen sondern auch verstehen, welche Elemente den Nutzer positiv beeinflussen können.

Webfont

In den Anfängen von HTML wurden Schriftarten und -stile ausschließlich durch die jeweiligen Einstellungen der Webbrowser bestimmt. Es gab keine Möglichkeit, die auf einer Website angezeigten Schriften zu beeinflussen. Zwischenzeitlich wurden HTML-Auszeichnungen eingeführt, mit denen Schriften definiert werden konnten. Allerdings musste die definierte Schriftart auf dem Benutzerrechner installiert sein. Ansonsten wurde ein sog. „Fallback-Font“, wie z. B. der im Browser eingestellte Standard-Font (Times, Arial, etc.) verwendet.

Mit den aktuellen Cascading-Style-Sheets-Spezifikationen (CSS) ist es seit einiger Zeit nun möglich, spezielle (Web-) Font-Dateien von Webservern, zeitgleich mit dem Aufruf einer Seite herunterzuladen und entsprechend im Browser darzustellen.

Dadurch stieg das Interesse an Webtypografie und dem Gebrauch herunterladbarer Schriftarten und mit Hilfe dieser Webfonts lassen sich mittlerweile z.B. Hausschriften von Unternehmen in die Darstellung einer Webseite integrieren.

Informationen zu unseren Leistungen

Yvonne Scherzer

Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielfältig ist und wirklich Spaß macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.
Mehr Beiträge im VisionConnect-Blog

… passend zum Thema.