Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin)
•
0 j'aime•1,073 vues
Von Miriam Horn & Lukas Kerecz (FORMLOS Berlin) bei der webinale 2015 in Berlin Die schöne neue Welt der Möglichkeiten: Scrollytelling, Onepager, CSS3-Spalten-Layouts, kostenlose CMS-Templates, responsive Contentstrategie, Flat-Design, Windows-Kacheln usw. Diese Liste lässt sich endlos fortführen. Was aber hilft dem Nutzer, an sein Ziel zu kommen? Wo bleibt die Marke und das Unternehmensprofil bei all diesen Möglichkeiten? Ein Ausflug in die Zwischenwelt.
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (19)
Similaire à Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin)
Similaire à Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin) (20)
Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin)
- 1. Mit Liebe und Sorgfalt vorbereitet von Branding im Web Über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten LUKAS KERECZ & MIRIAM HORN WEBINALE 2015
- 2. Mit Liebe und Sorgfalt vorbereitet von Wer wir sind. Branding & Corporate Design FORMLOS Berlin
- 3. Mit Liebe und Sorgfalt vorbereitet von Design ist mehr als Gestaltung. GestaltungPlanung & Konzeption Form follows function.
- 4. Mit Liebe und Sorgfalt vorbereitet von „Ich will eine Webseite.“
- 5. Mit Liebe und Sorgfalt vorbereitet von CSS3 HTML5AJAX jQuery Scrollytelling Onepager Webfonts Typekit WOFF User Experience Usability WordPress CMS PHP MySQL Android iOS SEO PSD GUI Interface Design SVG Cloud Computing HDRGoogle glass mobile friendly responsive Inbound Marketing Smart Watches Social Media Content Strategy Widgets Heatmaps Ruby on Rails Node.js Angular.js Retina HDPI CSS Sprites Content Slider Breadcrumb Navigation agile 1001 technische Möglichkeiten
- 6. Mit Liebe und Sorgfalt vorbereitet von ERWARTUNGEN AN DIE WEBSEITE Wer geht auf die Webseite? ZIELGRUPPE Wer präsentiert die Webseite? MARKE / UNTERNEHMEN
- 7. Mit Liebe und Sorgfalt vorbereitet von Was bedeutet eine Marke für das Unternehmen?
- 8. Mit Liebe und Sorgfalt vorbereitet von BRAND EXPERIENCE
- 9. Mit Liebe und Sorgfalt vorbereitet von ERWARTUNGEN AN DIE WEBSEITE Wer geht auf die Webseite? ZIELGRUPPE Wer präsentiert die Webseite? MARKE / UNTERNEHMEN
- 10. Mit Liebe und Sorgfalt vorbereitet von Nutzungsszenarien
- 11. Mit Liebe und Sorgfalt vorbereitet von Was will der Benutzer?
- 12. Mit Liebe und Sorgfalt vorbereitet von Was will der Benutzer nicht?
- 13. Mit Liebe und Sorgfalt vorbereitet von USER EXPERIENCE
- 14. Mit Liebe und Sorgfalt vorbereitet von USER BRAND EXPERIENCE
- 15. Mit Liebe und Sorgfalt vorbereitet von Technik sollte keine Deko sein.
- 16. Mit Liebe und Sorgfalt vorbereitet von Tech follows function. Form follows function.
- 17. Mit Liebe und Sorgfalt vorbereitet von EXPERIENCE Tech follows function. Form follows function. USER EXPERIENCE BRAND EXPERIENCE ERWARTUNGEN AN DIE WEBSEITE MARKE / UNTERNEHMEN ZIELGRUPPE Zusammenfassung
- 18. Mit Liebe und Sorgfalt vorbereitet von Vielen Dank für‘s Zuhören! Lukas Kerecz & Miriam Horn hallo@formlos.berlin @formlosberlin
Notes de l'éditeur
- Miriam: Herzlich willkommen
- Wir sind ein Grafik-Design Büro Branding und Corporate Design. on und offline. Aber heute geht’s um ONLINE. Kunden vom Immobilienunternehmen bis zum Folienhersteller Wir betreuen unseren Kunden am Liebsten von Anfang an – und suchen das passende Medium für ihn.
- LUKAS: „Rahmenbedingung“ Viele verstehen Design als „Anpinseln“ von fertigen Ideen, mehr als das. Die tatsächliche Übersetzung ist nicht „Gestaltung“, sondern „Entwurf“. Begriff „Entwurf“ kennen die Entwickler aus der Programmierung Am Anfang steht Planung und Konzeption. Wir „gestalten“ den ganzen Weg mit und denken mit. Form follows function, amerikanischer Bildhauer Horatio Greenough. Z.B. Stuhl Als Designer hat man eine andere Sichtweise auf Dinge als ein Unternehmer (Farben, Formen, Ansprache, Emotionen etc).
- MIRIAM: unterschiedlichsten Ansätze 1: interaktive Gaming (Disney Film Promo) 2: Shop (Seifenhändler) 3: ganz geheime tolle neue Geschäftsidee darstellen 4. SEO & von Kunden gefunden werden: Nischen-Blog, Arzt 5. Weiß nicht was ich will – ich brauch eine Webpräsenz (haben ja jetzt alle) Kombinationen aus verschiedenen Kundenwünschen. Manche wollen auch einfach alles.
- LUKAS: Und manchmal kommen Kunden zu uns und haben letztens erst von so was ganz Neuem gehört. Das wollen Sie jetzt auch. Onepager & Scrollytelling (Bsp: Flat vs. Realism, 2013) Macht Spaß neue Technologien auszuprobieren. Neues bietet auch mal Vereinfachungen (Webfonts, Typekit, SVG, etc.) Immer schauen was Sinn macht. ZIEL DER WEBSEITE NICHT AUS DEN AUGEN VERLIEREN!
- LUKAS: Unternehmensziele im Web: Selbstpräsentation Produktpräsentation Shop / Verkaufen, Bsp. Seifenshop Login / geschützter Bereich Interaktion / Dialog fördern Etc. Zuerst schauen wir uns „Marke“ an ----- Besprechungsnotizen (09.06.15 09:44) ----- Warum soll es diese Webseite geben?
- MIRIAM: Was bedeutet eine Marke/Branding/Corporate Design für ein Unternehmen/Produkt? Zielgruppe > Ersterlebnis darüber hinaus Wiedererkennung von ggfs. Visitenkarte oder Flyer, Fernsehwerbung usw. am besten durchgängige positive Wahrnehmung (idealerweise Love-Brand) Nutzer- oder Kundenbindung Wiedererkennung Im Web > schnell wieder weg (Tab/Browser schließen), in der Realität muss er sich ggfs. aktiv entfernen (Laden verlassen, Produkt aus der Hand legen, Umtausch / Reklamation usw.) Verhältnis zu Konkurrenz / Wettbewerb, am besten starke Differenzierung (Schutz)
- LUKAS: Mehr als nur die „Gestaltung“: Gestaltungselemente Tonalität in Bildern und Darstellungen Architektur Geschäft/Laden Materialität Kleidung (Corporate Clothing) Ansprache (Du / Sie) = Corporate Language (Weitere Bereiche: Inszenierung, Film, Beleuchtung, Sound) Wörter: Milka –> Zart Fehler: Zb. aus dem Erlebnis rausgeworfen zu werden (toller Shop – aber unsexy/kompliziert Bezahlabwicklung), bringt uns zur Zielgruppe/Benutzer
- MIRIAM: Zielgruppe (z.B: öko- & bio-bewusst, Luxus, Highclass, B2B) Alter, Kulturell, Geschlecht? In welcher Situation befindet sich der Kunde, wenn er auf Webseite geht (Arbeit, unterwegs, zuhause..., nächste Folie: Mediennutzung) Nutzungsszenarien: Was gibt es für Medien und wie benutze ich sie
- LUKAS: Jeder von uns nutzt Geräte anders – Jeder! Generationen – Alter – Umgebung – Job Shoppen: Handy, Tablet, Desktop Bsp: Miriams Mutter Nur weil ich etwas so nutze, heißt das nicht, dass andere es genauso nutzen! Nutzungsverhalten schwierig zu validieren! [Facebook (Vernetzung vs. News von geliketen Pages).]
- MIRIAM: Je nach Ziel des Kunden ist die Anforderung unterschiedlich: Kunde hat einen Wunsch/Idee oder Ziel, warum er auf der Webseite ist (Eventuell kommt er von einer anderen oder sucht was bestimmtes...Blogartikel, etc.) Wir müssen ihm eine Orientierung bieten und einen Weg aufzeigen wie er ans Ziel kommt Am Ende Belohnung und Zufriedenheit Wichtig: Wie führe ich den Nutzer so das da ankommt wo ich ihn haben will!?
- LUKAS: Kaputte oder nicht vollends durchdachte und unterbrechende Elemente (Kategoriesierung unklar) Klick auf Kategorie erzeugt Reload der Seite, danach Viewport völlig anders Es reicht schon, wenn der Tooltip beim Mouse-Over komisch flackert oder das Dropdown-Menü sich aus Versehen wieder einklappt Wo finde ich den Warenkorb (rechte Spalte, 4te Box von oben)? Keine Störenden Elemente (Newsletter-Anmeldung Overlays poppt ständig auf)
- MIRIAM: User Experience (am besten merkt der Nutzer gar nicht, dass eine gute User Experience vorliegt, weil alles vorher perfekt durchdacht wurde) BSP: AMAZON, keine Emotionen aber gute Nutzerführung. Anderes Extrem: besonders niedlich, emotional, (Vogelgezwitscher als Hintergrundsound etc.)
- MIRIAM: Analogie bzw. Zusammenhang zwischen User und Brand/Corporate Design Seifenshop: Brand & User wollen eine (positive) Erfahrung User Experience ist nüchterne Funktion Brand Experience führt zu Erlebnis, das Wiederkennung und Weiterempfehlung erzeugt Beides zusammen soll zur positiven Erfahrung führen
- LUKAS: Bevor über die Technik entschieden wird, muss man sich über den Sinn/Konzept Gedanken machen. z.B. Unnötige Animationen der Seife (Drehung, Parallax etc.), die keinen Zweck erfüllen DENN: Erklärung siehe nächste Folie
- MIRIAM: Abgeleitet aus: Im Design-Bereich gibt es den wichtigen Begriff: FORM follows function Und den sollte man auch bei der Technik anwenden. Bedeutet aber nicht, dass die Technik nur rein hörig sein sollte – nein, aber bei der Entscheidung welche technik (genauso wie bei welches Design) muss hinterfragt werden was man damit bezwecken will (kann ja auch sowas sein wie: Lachen oder verwirren). Vielmehr muss ein Dialog zwischen Technik und Design / Konzept stattfinden, von Anfang an!
- Roten Faden anhand von Beispiel durchgehen Erwartungen an Webseite aus zwei Blickwinkeln Zwei Wege Wechselwirkung VIELEN DANK FÜRS ZUHÖREN
- Fragen?