Responsive Webdesign für Grafiker & Entscheider

responsive webdesign für grafiker und entscheider

typovision gmbh // 2015

responsive webdesign agenda.

01 Einführung Responsive Webdesign

02 Der klassische Workflow im Überblick

03 Der neue Workflow

04 Schätzmethoden im RWD-Workflow

05 Verträge im RWD-Workflow

06 RWD-Tools für alle Prozess-Schritte

responsive webdesign 01 einführung.

1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

1.4 Mobile First / Content First

1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

responsive webdesign definition.

Beim Responsive Webdesign (im Deutschen auch responsives Webdesign genannt oder kurz RWD) handelt es sich um ein gestalterisches und technisches Paradigma zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten

Endgeräts, vor allem Smartphones und Tabletcomputer, reagieren können.

http://de.wikipedia.org/wiki/Responsive_Webdesign

responsive webdesign definition.

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and

an intelligent use of CSS media queries.

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

responsive webdesign am anfang war ethan.

Prägung von Ethan Marcotte 2010 auf A List Apart

ETHAN MARCOTTE May 25, 2010http://alistapart.com/article/responsive-web-design

1. Ein flexibles Grid

2. Flexible Bilder und Videos

3. Media Queries

„Responsive Architecture“

„Neue Denkweise“

Die bisher statischen Websites sind nicht in der Lage auf die steigende Anzahl von

Displaygrössen angemessen zu reagieren. Es ist also Zeit, sich von alten Denkmustern

zu lösen, und Websites flexibel und reaktionsfähig zu gestalten.

responsive webdesign

responsive webdesign rückbesinnung auf alte werte.

• HTML Dokumente sind von Natur aus reaktionsfähig

• Gestaltungsprozesse aus der Printwelt rauben Flexibilität und machen Webseiten zu starren Seiten

• falsche Tools wie Photoshop

• bevor wir anfangen treffen wir Annahmen über die Dimension

responsive webdesign kein trend.

Responsive Webdesign ist kein Trend. Es ist ein evolutionärer Schritt.

Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S.8-10

responsive webdesign kein trend sondern notwendigkeit.

Quelle: http://opensignal.com/reports/2014/android-fragmentation/

Statt wie die Bekleidungsindustrie die sich ständig wandelnden Körpermaße in neue Konfektionsgrößen zu pressen, sollten wir uns einer smarteren Methode zuwenden.

Quelle: Christoph Zillgens, Responsive Webdesign: Reaktionsfähige Websites gestalten und umsetzen, München, 2013, S. 12

1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

responsive webdesign abgrenzungen.

• Responsive vs. Adaptive

• Mobile Apps

http://www.elezea.com/2013/11/rwd-content-modules/

responsive webdesign abgrenzungen.

• Responsive vs. Adaptive

• Mobile Apps

http://www.elezea.com/2013/11/rwd-content-modules/

Adaptive

Responsive

1.1 Definition

1.2 Geschichte

1.3 Abgrenzungen

responsive webdesign * first

mobile first = content first

responsive webdesign * first.

• Mobil expandiert rasant

• Mobil hilft zu fokussieren

• Mobil bietet erweiterte Fähigkeiten

• Gilt für Planung und Entwicklung

responsive webdesign * first.

Quelle: http://www.areamobile.de/news/

24862-android-extreme-fragmentierung-aber-das-muss-nicht-schlecht-sein

responsive webdesign * first

„The absence of support for @media queries is in fact the first @media query“

Quelle: http://de.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

BRYAN RIEGER

responsive webdesign 02 der klassische workflow im überblick

responsive webdesign workflow klassisch.

Konzept

Design

Technische Umsetzung

Deploy

Support

ttp://

Der Standish Group Report „Chaos“ 2014

• Eine kleine Firma gibt im Jahr ca. 384.646 € für IT Projekte aus

• > 30% der IT Projekte werden vor der Fertigstellung gecancelt

• < 20% werden in time & budget fertig gestellt

• 45% der Projekte haben Mehrkosten bis 50%, 30% zwischen 50 - 100%

• > 35% dauern mehr als doppelt so lange wie geplant

• > 25% wurden mit nur 25-49% der ursprünglich definierten Features und Funktionen umgesetzt

Konzept

Design

Deploy

Support

responsive webdesign workflow probleme.

Konzeption

• Konzeption soll Kosten minimieren

• Tabelle geht von normalem Prozess aus

• Lorem Ipsum != echter Content

• Kunden ändern Anforderungen, das ist normal

Entdeckung in Projektphase Aufwand in Stunden

Konzeption 0,25

Technisches Pflichtenheft 1

Implementierung 4

Test 8

Produktivnutzung 16

„Using photoshop / fireworks for responsive webdesign ist like bringing a knife to gunfight“

Andy Clarke

Quelle: https://twitter.com/lebedoka/status/312123620774264832

Ein unglaublich echtes Beispiel aus der Praxis

• 3 Designvorschläge

• 30 Seitentypen

• 3 Breakpoints (4 Darstellungen)

• 3 * 30 * 4 = 360 PSD Layouts

=> ca. 100.000 €

Erlebt im Agenturalltag der typovision bei Gesprächen mit einem potentiellen Partner.

• frühe Projektphase = hohe Schätzunschärfe

• hohe Schätzunschärfe = hohes Projektrisiko

• Unstimmigkeiten im Pflichtenheft führen zu Fehlern, die oft erst beim Test auffallen, und somit zu höheren Kosten

responsive webdesign 03 der neue workflow.

1.1 Planung

1.2 Content-Strategie

1.3 Iterativer Zylkus Design/Entwicklung

responsive webdesign neuer workflow.

Sketch WireframeVisualDesign

Prototype Test

responsive webdesign neuer workflow.

Sketch

Wireframe

Visual Design

Prototype

Iteratives Design & EntwicklungUX, Visual, Dev

Content Strategy

ContentPlanner, UX, Visual, Tech

User Research

UserPlanner, UX

RWD Prototype

Prototype handover to clientUX, Visual, Tech

1.1 Planung

responsive webdesign workflow planung.

• Stakeholder Matrix (wer entscheidet was)

• Projektziel

• Breakpoints definieren (Deviceklassen, sehr wichtig!)

• Liste von Devices und Browser die betestet werden sollen (Top 5 / 3)

• bestehende Dokumente analysieren (CI-Manual, Guidelines, Verträge, …)

• Moodboard-Briefing (Look & Feel)

• Vertrag

Rahmen-bedingungen

• Was an der bisherigen Website war schlecht? Top3 (alle Stakeholder)

• Was an der bisherigen Webseite war gut? Top3 (alle Stakeholder)

• Was ist das exakte Ziel der geplanten Website?

• Was sind die nachgelagerten Ziele der geplanten Website?

• Welche Probleme soll die Website lösen und welche Sehnsüchte soll sie erfüllen?

• Auf welche Kunden soll die Website fokussieren? (Fokusgruppen, Zielgruppen)

• Welche Werte werden vermittelt?

• Welches Produkt / Thema steht im Mittelpunkt?

Ziel-definition

ttp://

Ziel-definition

ttp://

Ziel-definition

• Gleiches Ziel • Unterschiedliche Strategie

—> Unterschiedliche Zielgruppen müssen unterschiedlich angesprochen werden

Ziel-definition

responsive webdesign workflow personas.

Realistischer Name die Persona soll nicht zur Comicfigur werden

Foto der Person ebenfalls ein realistisches

Demographische Information Alter, Geschlecht, Ausbildung, Familienstand

Beruf und Hauptaufgaben

Ziele, Wünsche, Erwartungen, Bedürfnisse z.B. „benötigt Infos zur schnellen Entscheidungsfindung“

Vorlieben, Abneigungen, Hobbies

evtl. ein Zitat, das einen wichtigen Aspekt der Persona zum Ausdruck bringt.

User Research

responsive webdesign workflow personas beispiel.

• Elmar, 43 Jahre, Männlich • „Technischer Leiter“ • Firma: Börsennotiertes Unternehmen (z.B. MTU, FIT, ...) • Slogan: „Ich will einen kompetenten Dienstleister der mir wenig Probleme bereitet“ • Ziele: „Fachwissen muss vorhanden sein. Die müssen was von Security verstehen und dürfen

keine Sicherheitslöcher reißen.“ • Bedürfnisse: „Die verwendete Technologie muss im Firmenwissen vorhanden sein.“ • Wünsche: „Ich will einen Ansprechpartner auf meinem Niveau.“ • Einstellungen: „Um 17 Uhr will ich zu Hause bei Frau und Kind sein und in der Nacht ruhig

schlafen können - mit dem Wissen: Da brennt nix an.“ • Verhalten: „Konzentriert sich auf Kompetenz-Beweise und will schnell zum Ziel kommen.“ • Erwartungen: „Keine nervige Werbung. Mal sehen, was die so drauf haben. Die Technologie

kann ich bestimmt auf der Site ausprobieren.“

User Research

responsive webdesign workflow customer journey.

Phase 1 Awareness Das Bewusstsein für das Produkt wird geweckt (lnspiration)

Phase 2 Favorability Das lnteresse für das Produkt wird verstärkt (Favorisierung)

Phase 3 Consideration Der Kunde erwägt den Kauf des Produktes (Wunsch)

Phase 4 Intent to purchase

Die Kaufabsicht wird konkret (Anstoß)

Phase 5 Conversion Das Produkt wird gekauft (Umsetzung)

User Research

Search

Affiliate

Facebook

Face-book

Facebook

Face-book

Display

Retargeting

Trigger & Awareness

Research & Compare

Conversion

Loyalty & Retention

User Research

responsive webdesign workflow customer journey.

1.1 Planung

responsive webdesign workflow content-strategie.

• Eine Website existiert ausschließlich aufgrund ihres Contents

• Daher muss dem Content die erste und ungeteilte Aufmerksamkeit zugeteilt werden

• Design hat in dieser Phase überhaupt nichts zu suchen!

• Es geht darum, den Content zielgruppengerecht aufzubereiten

• Man braucht eine umfassende Content-Strategie

• Es geht darum die richtigen Inhalte dem User auszuliefern

Content Strategy

Content Management

Geschäfts-Strategie

SEO Content-Erstellung

Informations-Architektur

User ExperienceMarketing

Content Strategie

Content Strategy

Content-Strategie • Ziele & Zielgruppen

• Content-Inventar erstellen; Content-Lücken

erkennen

• Migrations-Plan erstellen

• Kernbotschaften definieren

• Themen festschreiben (was interessiert die

Zielgruppe?)

• Metadaten-Strukur aufstellen

• Styleguide, Vorlagen erstellen

• Editorial Workflow festlegen

• Verantwortlichkeiten bestimmen (wer

erstellt, nimmt ab, pflegt den Content?)

• Veröffentlichungs-Kalender schreiben

• Vorgehen für Qualitätskontrolle, Umgang mit

Nutzerfeedback definieren

• Analyse der Zugriffe und der

Bewegungspfade auf der Site planen

Content Strategy

Content Reference Wireframe • Wireframe für jeden Breakpoint anlegen

• Jeden Contenttyp aus dem Inventory im

Wireframe referenzieren

• Jeden Seitentyp anlegen

• Lediglich Rechtecke, kein Design!

• Mobile First!

• Jeder Contenttyp aus dem Inventory muss

seinen Platz im Wireframe finden

Main nav

Logo Search & Links

Headline

Content

Footer

Slider

Content Strategy

Content erstellen • Plain Text

• Markup mit markdown oder ähnlichem

erstellen

• Unterschiedliche Contenttypen identifizieren

• Das Ergebnis dann in HTML konvertieren,

ergibt den Content Dummy

• Beim Erstellen Personas / Customer Journeys

etc. berücksichtigen

Content Strategy

Moodboard • Auf dem Moodboard werden die visuellen

Stile und Elemente entwickelt

• Es finden sich Icons, Farbwelten, Styles von

Formularfelder oder Schriftarten und Stile

• Das Moodboard wird mit HTML/CSS entwickelt

• Layouts werden keine gestaltet / entwickelt.

Nur Design!

ttp://

Content Strategy

Atomic Design • Zum Erstellen des Moodboards

die einzelnen Elemente

aus der Elementtabelle

nutzen, und so zu Molekülen

und Oragnismen

zusammenbauen…

ttp://

Content Strategy

ttp://

und Oragnismen

zusammenbauen…

Content Strategy

ttp://

und Oragnismen

zusammenbauen…

Content Strategy

1.1 Planung

Prototyping

Linear Design • Content Dummy mit Styles aus Moodboard

anreichern

• keinerlei Positionierungen, rein linear

• Im Ergebnis sieht man nun, wie der Content

Dummy mit echtem Content und Styles

ausschaut

responsive webdesign workflow iterativer zyklus.

Sketch

Wireframe

Visual Design

Prototype

Prototyping • Klickdummyerstellung mit HTML5 / CSS3 / JS

• führt iterativ zum finalen Layout

• Designer UND Kunde müssen einbezogen

werden

Prototyping

Sketch

Wireframe

Visual Design

Prototype

Device Testing • Echte Geräte nutzen, keine Simulatoren

• Open Device Labs

Prototyping

Sketch

Wireframe

Visual Design

Prototype

responsive webdesign 04 schätzmethoden.

responsive webdesign schätzen.

Schätzmethoden im RWD-Workflow • RWD ist in der Entwicklung nicht teurer wie der alte Prozess • Man schätzt FE Entwicklung * 2 • Allerdings hat RWD einen stark erhöhten Consultingaufwand, da der Kunde in der Regel mit dem Prozess

überhaupt nicht vertraut ist

responsive webdesign 05 verträge.

responsive webdesign verträge.

Zusammenfassung / Erwartungen

• Kundendaten

• Agentur / Freiberuflerdaten

• Projektziel

• Deadlines

Vereinbarungen

• Kunde muss die Arbeit überprüfen und Feedback nach einem kurzen Zeitraum geben

• Deadlines gibt es für beide Vertragsparteien, Auftraggeber und Auftragnehmer. Und beide müssen auch

daran gebunden werden.

• Kunde willigt in die Zahlungsbedingungen ein

Design • Erzeugung von „Look-and-feel Designs“ • Erzeugung von flexiblen Layouts welche sich an viele unterschiedliche Geräte und Screen-Grössen

anpassen • Der Design Prozess ist iterativ • Vorwiegender Gebrauch von HTML5 und CSS3, anstatt Mockups von jedem Template • Statische Visuals (Styletiles) werden nur benutzt um das Look-and-Feel anzudeuten

Inhalte und Bilder • Der Kunde ist verantwortlich für die Zulieferung von jeglichen Inhalten • Die Agentur ist nicht für die Auswahl, das Aufbereiten, Konvertieren oder Aufnehmen von • Falls notwendig, kann ein eigenes Angebot dafür erstellt werden

Browsertests • Browsertesting bedeutet nicht, das die Webseite in jedem Browser identisch aussehen muss • Browsertesting bedeutet, sicherzustellen das die User Experience eines Designs muss erlebbar sein auf

einem Device mit bestimmten Möglichkeiten.

Desktop Browsertests • Getestet wird mit folgenden Browsern

• Apple, Safari 6.1.0 • Apple, Chrome 10.0 • …..

• Folgende Browser werden NICHT getestet • Windows, IE, 8.1

Mobile Browsertests • Getestet wird mit folgenden Browsern

• Android 4.1 / Chrome / 6.0.5 • iOS 7.0.x / Safari • xxx / yyy / zzz

• Folgende Browser werden NICHT getestet • Blackberry OS /QNX, Symbian, ... (any Browser)

Change / Feature Requests • Wir können grundsätzlich nicht empfehlen das Projekt auf Basis eines Festpreises abzurechnen.

Der Prozess ist sehr agiler, und Anpassungen vom Kunden sind während des Prozesses gewünscht. Bei einem Festpreis muss für jede Anpassung ein extra Angebot erstellt werden. Die ca. 4-6h Aufwand für jedes Angebot (inkl. Buchhaltung etc.) müssen jeweils mit einkalkuliert werden.

• Im anderen Fall gibt es ein Konzept und ein Pflichtenheft, auf dessen Basis geschätzt und ein Festpreis abgegeben wurde

• Somit wird bei jedem Anpassungswunsch ein neues Angebot erstellt.

Copyright • Der Kunde garantiert das er die Erlaubnis für alle Assets hat, welche er einem für die Integration

zukommen lässt. • Der Kunde hat das alleinige Recht an den erzeugten Elementen, aber die Agentur hat das Recht an der

einzigartigen Kombination daraus • Die Agentur gibt dem Kunden für die Kombination eine Lizenz

Gesetzliches • Keine Programmierleistung ist fehlerfrei. Wir versuchen annähernd fehlerfrei zu arbeiten, aber wir

können nicht haftbar gemacht werden gegenüber dem Kunden oder Dritten, für Schäden, inkl. Umsatzverlusten, Einsparungen oder andere indirekte, sich ergebende oder spezielle Schäden. Auch wenn der Kunde die Agentur darauf aufmerksam gemacht hat.

• Die Agentur behält sich das Recht vor das Projekt zu referenzieren. • Die Agentur kann nicht für Open Source Bugs haftbar gemacht werden.

responsive webdesign 06 tools im rwd-workflow.

responsive webdesign tools.

RWD-Tools für alle Prozess-Schritte • Adobe Edge Reflow • ThinkinTags • Foundation 4 • Bootstrap • Responsive Patterns (http://

bradfrost.github.com/this-is-responsive/patterns.html)

• Axure (www.axure.com)

• Balsamiq (https://balsamiq.com) • Get Wirefy (http://getwirefy.com (Atomic

Design)) • Typostrap • Markdown • Pandoc • Patternlab (http://patternlab.io/)

vielen dank bleiben sie mit uns in verbindung.

kontakt typovision gmbh.

Referent

Sebastian Böttger

Geschäftsführer

typovision GmbH

Kontakt

typovision GmbHLindwurmstr. 10980337 MünchenTelefon +49 89 4520 593-0 Fax +49 89 4520 593-29 E-Mail info@typovision.de www.typovision.de

Social Media

Twitter www.twitter.com/typovision

Facebook www.facebook.com/typovisionBlog typoblog.de

XING www.xing.com/companies/typovisiongmbhSlideshare www.slideshare.net/typovision

LinkedIn www.linkedin.com/company/2038844

Google+ www.google.com/+TypovisionDe

Responsive Webdesign für Grafiker & Entscheider

Internet

Transcript of Responsive Webdesign für Grafiker & Entscheider

2016 Webdesign Trendek - Webdesign újratöltve

Webdesign idepac

Entscheider im Mittelstand - Werben & Verkaufen · Reichweitenstudie Entscheider im Mittelstand 2015 Definition: "Entscheider im Mittelstand" Die Grundgesamtheit der Entscheider im

Webdesign New

Grafiker - ein Berufsbild - AR-A+D · Grafiker und seine Arbeitsgebiete einmal grundsätzlich darzustellen. Eine bloß kontemplative Übersicht über das Geschaffene genügt nicht

Introduksjon til webdesign · 2 Er god webdesign viktig? 2 ... Storyboards 15 Teknologi 16 Filstruktur 16 Brukerstøtte 16 Nettadresse 16 Referanser 17 Hva er webdesign? Webdesign

Epub by grafiker Bo Sørensen

WEBDESIGN - P1

Webdesign Tanfolyam - Mintalecke 2. Webdesign készítés Fireworksel

WebDesign App

Entscheider lesen den Marktführer

Digitales Marketing für Entscheider

Aula05 webdesign

GRAFIKER/WEBMEDARBEJDER SØGES TIL FREMADSTORMENDE … · 2019-08-09 · GRAFIKER/WEBMEDARBEJDER SØGES TIL FREMADSTORMENDE IVÆRKSÆTTERVIRKSOMHED Camp Adventure søger en ny, dygtig

Apresentação WebDesign

E/E-Entwicklung für Entscheider - AUTOMOBIL-ELEKTRONIK · 2019-09-09 · Entscheider. 20 B 61060 · September 2019 · Einzelpreis 19,50 € · 09 / 2019 E/E-Entwicklung für Entscheider

Voorstel webdesign

Der Weg zum Entscheider

Persuasives Webdesign

Aula03 webdesign