Mit Liebe und Sorgfalt vorbereitet von
Branding im Web 
Über den Spagat zwischen Corporate Design,
Usability und technisch...
Mit Liebe und Sorgfalt vorbereitet von
Wer wir sind.
Branding & Corporate Design
FORMLOS Berlin
Mit Liebe und Sorgfalt vorbereitet von
Design ist mehr als Gestaltung.
GestaltungPlanung & Konzeption
Form follows functio...
Mit Liebe und Sorgfalt vorbereitet von
„Ich will eine Webseite.“
Mit Liebe und Sorgfalt vorbereitet von
CSS3
HTML5AJAX
jQuery
Scrollytelling
Onepager
Webfonts
Typekit
WOFF
User Experience...
Mit Liebe und Sorgfalt vorbereitet von
ERWARTUNGEN AN DIE WEBSEITE
Wer geht auf die Webseite?
ZIELGRUPPE
Wer präsentiert d...
Mit Liebe und Sorgfalt vorbereitet von
Was bedeutet eine Marke für das Unternehmen?
Mit Liebe und Sorgfalt vorbereitet von
BRAND EXPERIENCE
Mit Liebe und Sorgfalt vorbereitet von
ERWARTUNGEN AN DIE WEBSEITE
Wer geht auf die Webseite?
ZIELGRUPPE
Wer präsentiert d...
Mit Liebe und Sorgfalt vorbereitet von
Nutzungsszenarien
Mit Liebe und Sorgfalt vorbereitet von
Was will der Benutzer?
Mit Liebe und Sorgfalt vorbereitet von
Was will der Benutzer nicht?
Mit Liebe und Sorgfalt vorbereitet von
USER EXPERIENCE
Mit Liebe und Sorgfalt vorbereitet von
USER
BRAND
EXPERIENCE
Mit Liebe und Sorgfalt vorbereitet von
Technik sollte keine Deko sein.
Mit Liebe und Sorgfalt vorbereitet von
Tech follows function.
Form follows function.
Mit Liebe und Sorgfalt vorbereitet von
EXPERIENCE
Tech follows function.
Form follows function.
USER 

EXPERIENCE
BRAND
EX...
Mit Liebe und Sorgfalt vorbereitet von
Vielen Dank für‘s Zuhören!
Lukas Kerecz & Miriam Horn
hallo@formlos.berlin
@formlos...
Nächste SlideShare
Wird geladen in …5
×

Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin)

585 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
585
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
143
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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?
  • Branding im Web – über den Spagat zwischen Corporate Design, Usability und technischen Möglichkeiten (webinale 2015 Berlin)

    1. 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. 2. Mit Liebe und Sorgfalt vorbereitet von Wer wir sind. Branding & Corporate Design FORMLOS Berlin
    3. 3. Mit Liebe und Sorgfalt vorbereitet von Design ist mehr als Gestaltung. GestaltungPlanung & Konzeption Form follows function.
    4. 4. Mit Liebe und Sorgfalt vorbereitet von „Ich will eine Webseite.“
    5. 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. 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. 7. Mit Liebe und Sorgfalt vorbereitet von Was bedeutet eine Marke für das Unternehmen?
    8. 8. Mit Liebe und Sorgfalt vorbereitet von BRAND EXPERIENCE
    9. 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. 10. Mit Liebe und Sorgfalt vorbereitet von Nutzungsszenarien
    11. 11. Mit Liebe und Sorgfalt vorbereitet von Was will der Benutzer?
    12. 12. Mit Liebe und Sorgfalt vorbereitet von Was will der Benutzer nicht?
    13. 13. Mit Liebe und Sorgfalt vorbereitet von USER EXPERIENCE
    14. 14. Mit Liebe und Sorgfalt vorbereitet von USER BRAND EXPERIENCE
    15. 15. Mit Liebe und Sorgfalt vorbereitet von Technik sollte keine Deko sein.
    16. 16. Mit Liebe und Sorgfalt vorbereitet von Tech follows function. Form follows function.
    17. 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. 18. Mit Liebe und Sorgfalt vorbereitet von Vielen Dank für‘s Zuhören! Lukas Kerecz & Miriam Horn hallo@formlos.berlin @formlosberlin

    ×