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?

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