Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Kill Photoshop - Gestaltung im Browser mit Contao

Kill Photoshop - Gestaltung im Browser mit Contao

Photoshop galt lange Zeit als das Werkzeug Nr. 1, wenn es darum ging Websites zu visualisieren, um diese mit Kunden oder dem Team besprechen zu können. Doch ein Design aus Photoshop war immer ein Kompromiss, den es, besonders jetzt in den Zeiten von Smartphones und Tablets, zu hinterfragen gilt. Warum nicht auf Photoshop verzichten und direkt im Browser oder womöglich sogar in Contao direkt gestalten?

Dennis Erdmann

May 15, 2014
Tweet

More Decks by Dennis Erdmann

Other Decks in Programming

Transcript

  1. KILL PHOTOSHOP Gestaltung im Browser mit Contao

  2. DENNIS ERDMANN ‣ Kiel, Schleswig-Holstein" ‣ Geschäftsführer bei SOLADES" ‣

    Steuermann bei Erdmann & Freunde" ‣ Contao-Nutzer seit 2008
  3. RÜCKBLICK Warum ist Photoshop so populär?

  4. „Wir erstellen zunächst ein Layout in Photoshop, weil sich dort

    Elemente schnell und einfach per Drag and Drop positionieren lassen. Das wäre in der direkten Programmierung viel zu aufwendig.“ Zitat: Ich
  5. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind

  6. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“
  7. ottogroup.com Photoshop fördert das Rahmendenken

  8. ottogroup.com Photoshop fördert das Rahmendenken

  9. hotel-consul-kiel.de Photoshop fördert das Rahmendenken

  10. Photoshop fördert das Rahmendenken hotel-consul-kiel.de

  11. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“" ‣Abweichungen in der Darstellung + Schwächen in der Bedienung
  12. fact.com Abweichungen in der Darstellung:Photoshop

  13. fact.com Abweichungen in der Darstellung: Chrome

  14. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“" ‣Abweichungen in der Darstellung + Schwächen in der Bedienung" ‣keine Interaktion/Animation möglich
  15. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“" ‣Abweichungen in der Darstellung + Schwächen in der Bedienung" ‣keine Interaktion/Animation möglich" ‣Schrift- und Farbänderungen mit viel Aufwand verbunden
  16. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“" ‣Abweichungen in der Darstellung + Schwächen in der Bedienung" ‣keine Interaktion/Animation möglich" ‣Schrift- und Farbänderungen mit viel Aufwand verbunden" ‣Hoher Aufwand wenn mehrere Ansichten gezeigt werden sollen
  17. NACHTEILE VON PHOTOSHOP ‣doppelte Arbeit, da PS-Layouts ein Wegwerfprodukt sind"

    ‣Photoshop fördert das „Rahmendenken“" ‣Abweichungen in der Darstellung + Schwächen in der Bedienung" ‣keine Interaktion/Animation möglich" ‣Schrift- und Farbänderungen mit viel Aufwand verbunden" ‣Hoher Aufwand wenn mehrere Ansichten gezeigt werden sollen" ‣Und was ist eigentlich mit Responsive Webdesign?
  18. GEGENWART Welche Entwicklungen haben die Gestaltung im Browser möglich gemacht?

  19. Wir danken der Entwicklung von ‣HTML 5 und CSS 3"

    ‣Media Queries, Smartphones und Tablets" ‣die Entwicklung von CSS/JS-Frameworks wie Bootstrap, Foundation, Inuit etc." ‣Live-Reload und CSS-Injections
  20. GESTALTUNG IM BROWSER Scribbles ➠ Wireframes ➠ Design

  21. SCRIBBLES ‣Hand-Skizzen" ‣Notizbuch A6, Bierdeckel, Kaffeefilter, Tablet" ‣Anordnung von Kästen,

    inkl. Beschriftung" ‣für mich & Kollegen WIREFRAMES DESIGN
  22. Scribbles: Handzeichnung auf Papier

  23. Scribbles: Handzeichnung auf dem iPad

  24. SCRIBBLES ‣Hand-Skizzen" ‣Notizblock, Bierdeckel, Kaffeefilter, Tablet" ‣Anordnung von Kästen, inkl.

    Beschriftung" ‣für mich & Kollegen WIREFRAMES DESIGN ‣Sprung in Contao" ‣Seitenstruktur & -layout anlegen" ‣Textblöcke ➠ Elemente" ‣Module ➠ HTML-Module" ‣für Kollegen & Kunden"
  25. Wireframe in Contao

  26. Contao-Grid-Klassen + ein wenige eigene CSS-Anweisungen <div class="logo grid3 box">!

    ! <a href="">Logo</a>! </div>
  27. WARUM?

  28. INFORMATIONS-
 OVERKILL!

  29. SCRIBBLES ‣Hand-Skizzen" ‣Notizblock, Bierdeckel, Kaffeefilter, Tablet" ‣Anordnung von Kästen, inkl.

    Beschriftung" ‣für mich & Kollegen WIREFRAMES DESIGN ‣Sprung in Contao" ‣Seitenstruktur & -layout anlegen" ‣Textblöcke ‣Module ‣für Kollegen & Kunden" ‣Moodboard/Moodbook, Style Tiles o.ä.
  30. Beispielseite aus einem Moodbook

  31. Beispielseite aus einem Moodbook

  32. PHOTOSHOP?

  33. styletil.es Beispiel für Style Tiles

  34. PHOTOSHOP kann man nehmen für" ‣ Farb- & Schriftkombinationen" ‣

    Texturen" ‣ Bildeffekte" ‣ Formen
  35. SCRIBBLES ‣Hand-Skizzen" ‣Notizblock, Bierdeckel, Kaffeefilter, Tablet" ‣Anordnung von Kästen, inkl.

    Beschriftung" ‣für mich & Kollegen WIREFRAMES DESIGN ‣Sprung in Contao" ‣Seitenstruktur & -layout anlegen" ‣Textblöcke ‣Module ‣für Kollegen & Kunden" ‣Moodboard/Moodbook, Style Tiles o.ä." ‣Sprung zurück in Contao" ‣schrittweises ersetzen + stylen der Inhaltsblöcke
  36. Schrittweiser Austausch der Inhaltsblöcke Demo

  37. MEIN DESIGN PLAN 1. Styling des Fließtextes" ‣ Schriftarten" ‣

    Überschriften, Texte + Inline-Elemente" " 2. Farben festlegen" ‣ Stimmung" ‣ Kontraste" " 3. Standardelemente stylen" ‣ Navigationen" ‣ Buttons" ‣ Formulare" ‣ Bilder, Icons etc." " 4. Abstände definieren" ‣ Text <—> Bild" ‣ generelles Finetuning
  38. „UND WAS IST MIT RESPONSIVE WEBDESIGN?“

  39. GIBT ES NOCH ANDERE VORGEHENSWEISEN?

  40. ATOMIC DESIGN von Brad Frost bradfrostweb.com/blog/post/atomic-web-design/

  41. bradfrostweb.com/blog/post/atomic-web-design/

  42. Brad Frost's Pattern Lab demo.patternlab.io

  43. Starbucks Style Guide Demo

  44. South Tees Hospital Style Guide Demo

  45. Erdmann & Freunde Style Guide

  46. GESTALTUNG IM BROWSER Die Vor- und Nachteile im Überblick

  47. VORTEILE NACHTEILE ‣besseres Konzept, da Verknüpfung von Design und Semantik"

    ‣Ideen lassen sich schnell auf Tauglichkeit testen" ‣Visualisierung von Animationen und Interaktionen" ‣besserer Workflow für Responsive Websites" ‣Zeitersparnis, weil Anpassungen/ Änderungswünsche in Photoshop entfallen" ‣Styleguide = Dokumentation für die Zukunft und neue Mitarbeiter ‣neuer Workflow für Webdesigner, Webentwickler und Agenturen" ‣neuer Workflow für Kunden (Nachteile bei Auftragsvergabe?)" ‣Höhere Anforderungen an Designer (HTML, CSS, JS)" ‣Man weiß (zu Anfang) nie so genau, wann der Gestaltungs- prozess beendet ist
  48. DANKE Bild: fanart.tv