Mit \u201eCall-To-Action\u201c oder kurz CTA wird eine konkrete Handlungsaufforderung innerhalb einer Website bezeichnet<\/span>. Wichtig ist beim Einsatz eines \u201eCall-To-Action\u201c, dass dieser nicht innerhalb der Informationen <\/span>untergeht, sondern klar zu erkennen ist. Wortwahl und Formulierung sollten kurz, pr\u00e4gnant und impulsausl\u00f6send gew\u00e4hlt <\/span>werden.<\/p>\n Wird die Gestaltung eines \u201eCall-To-Action\u201c passend und seri\u00f6s umgesetzt, so werden Webseitenbesucher auf eine feinsinnige Art und Weise zu einer Handlung bewegt. CTA dienen h\u00e4ufig der Generierung von Leads.<\/span><\/p>\n Als \u201eLead\u201c 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\u00fchrt.<\/span><\/p>\n Kann als Gegenentwurf zum \u201eSkeuomorphismus\u201c <\/span>verstanden werden<\/span>, der den Zweck verfolgt, Elemente in ihrer Gestaltung vertrauter wirken <\/span>zu lassen, indem <\/span>Materialien wie z. B. Holz, Gewebe <\/span>und <\/span>Leder nachgebildet werden. <\/span><\/p>\n Das Flat Design verzichtet weitestgehend auf <\/span>diese fotografischen,<\/span> rein dekorativen Gestaltungselemente und kommt in seiner Auspr\u00e4gung mit Farben, Fl\u00e4chen und Formen aus, <\/span>ohne diverse Materialien \u201e<\/span>realistisch\u201c<\/span> nachzubilden. Lediglich Schatten sind ein beliebtes Mittel, um Tiefe zu simulieren.<\/span><\/p>\n Mit der Verf\u00fcgbarkeit von immer gr\u00f6\u00dferen Bandbreiten, ist der Einsatz von gr\u00f6\u00dferen Bildern heute im Webdesign g\u00e4ngige Praxis<\/span>. Als Heroimages (auch Keyvisuals) <\/span>werden gro\u00dfformatige Fotos und Grafiken bezeichnet, die h\u00e4ufig am Anfang einer Webseite anzutreffen sind.<\/p>\n Heroimages m\u00fcssen dabei nicht zwangsl\u00e4ufig nur einzelne Bilder sein. Vielmehr k\u00f6nnen hiermit auch Slideshows gemeint sein. H\u00e4ufig bestehen Heroimages aus einer Kombination von gro\u00dfformatigen Bildern und gestalterisch gesetztem Text<\/p>\n 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.<\/p>\n Gerade Bilddatenbanken und Social Media Kan\u00e4le mit Ihren Newsfeeds machen h\u00e4ufig von dieser Technik gebrauch.<\/p>\n Bei der Landing Page steht die Vorstellung eines einzelnen Angebotes (z.B. Dienstleistungs- oder Produktpr\u00e4sentation, Veranstaltung) f\u00fcr den Kunden im Vordergrund. Die Kernformationen sollen beim Aufruf der Seite ohne Ablenkung aufgenommen werden k\u00f6nnen. Durch die Integration eines response Elements (siehe Call-To-Action) wird die einfache Interaktion mit dem Besucher sichergestellt.<\/p>\n Landing Pages sollen den Besucher zum Handeln motivieren<\/span>.<\/span> Die Landingpage muss dabei der Erwartungshaltung aufgrund der Suchbegriffe oder des Werbekontextes entsprechen.<\/p>\n Charakteristisch f\u00fcr 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.<\/p>\n Durch den Einsatz eines Parallax-Effektes entsteht beim Besucher der Eindruck von r\u00e4umlicher Tiefe. Um den Parallax-Effekt zu erzielen werden wie auf einer Theaterb\u00fchne unterschiedliche Ebenen in unterschiedlichen Geschwindigkeiten vor dem Auge des Betrachters verschoben.<\/p>\n Urspr\u00fcnglich kommt dieser optische Trick aus der Entwicklung von Videospielen. Seit 2008 hat dieser in Form von Bewegungsparallaxen Einzug in die Gestaltung von Webseiten erhalten.<\/p>\n Mit Hilfe des Storytelllings werden komplexe Zusammenh\u00e4nge f\u00fcr den Nutzer so aufbereitet, dass dieser wie in einer Geschichtenerz\u00e4hlung einem \u201eroten Faden\u201c folgen kann. Durch interaktive Elemente und Animationen werde<\/span>n dem Nutzer hier Inhalte auf unterhaltsame<\/span> Weise pr\u00e4sentiert.<\/span><\/p>\n H\u00e4ufig werden Storytelling Webpages mit Hilfe der ParallaxTechnik erstellt.<\/p>\n Der Begriff Single-Page kommt urspr\u00fcnglich aus dem Bereich der Webanwendungen. Durch die M\u00f6glichkeiten von HTML5 und neuen Technologien in Webbrowsern ist es m\u00f6glich, einzelne Webseiten oder Webapplikationen auf Mobile Devices<\/span> lokal vorzuhalten. Der Nutzer muss nach Aufruf der Applikation nicht zwingend Online sein, um diese weiter zu sehen<\/span>. Klassische Beispiele sind hier Webseiten wie z.B. Facebook.<\/p>\n Aber auch andere Webseiten haben das Prinzip der Darstellung Ihrer Inhalte auf einer einzigen Webseite aufgegriffen. Besonders kleinere Firmen die sich fr\u00fcher mit einer \u201eWebvisitenkarte\u201c pr\u00e4sentiert hatten, setzen heute auf diese animationsreiche und augenf\u00e4llige Darstellungsm\u00f6glichkeit.<\/p>\n Hinter dieser Abk\u00fcrzungen 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\u00f6glichen. In Zeiten immer komplexer werdenden Anforderungen an den Nutzer in der Bedienung von Webseiten und Onlineshops ist eine einfache, leicht zu verstehende Nutzerf\u00fchrung im eigenen Auftritt oder der App besonders wichtig. Dazu geh\u00f6rt z.B. ein leicht nachvollziehbares Navigationskonzept und eine durchg\u00e4ngig konsistent F\u00fchrung des Nutzers durch das gesamte Angebot.<\/p>\n Diese englischsprachige Abk\u00fcrzung 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\u00f6nnen.<\/p>\nFlat Design<\/h2>\n
Hero Image<\/h2>\n
Infinite Scrolling<\/h2>\n
Landing Page<\/h2>\n
Parallax<\/h2>\n
Storytelling<\/h2>\n
Single Page<\/h2>\n
UI<\/h2>\n
UX<\/h2>\n
Webfont<\/h2>\n