WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

1 / 53

2 / 53

jQuery

Frameworks

UI Pattern

Responsive images

Performance

lazy load

picture element

Bootstrap

Foundation

nginxRWD

Composer

mobile first

3 / 53

Überblick wärs…

4 / 53

Immer mehr Perfektion, immer mehr technische Raffinessen.

Viele Webdesigner sind von der Vielfalt der Entwicklungen im Webdesign gefordert, die richtigen Weichen für die tägliche Arbeit zu stellen.

Welche Techniken soll ich zukünftig einsetzen?Ist der Trend relevant für meine Arbeit, meine Kunden?

Auf Contao bezogen: Setze ich auf eigenes Design und Umsetzung? Oder nutze ich Themes und passe diese an? Wie komme ich mit einem Stan-dard-Setup schneller ans Ziel?

5 / 53

## Wer spricht

6 / 53

# Wer spricht

Thomas Weitzel, Diplom-Designerseit 1994 im Dschungel unterwegs

seit 2006 bei Contao2010-2013 Contao Team

Zwei Bücher zu Contao (2010 und 2013)

AG Presse & News, Best Practices mit ContaoAG Partnerbetreuung

Aktivmitglied der Contao Association (seit 2012)Beisitzer im Vorstand der Contao Association (seit 2016)Sprecher auf den Konferenzen & Camps (2006 - heute)

Contao JahrbuchContao AgenturtagContao Stammtisch Stuttgart (seit 2014)

7 / 53

# Webdesign Trends

8 / 53

# Webdesign Trends

Jede grössere Plattform gibt zum Anfang eines Jahreseine Empfehlung für die Trends im Webdesign heraus.

Spannend, dass vielen nur von einander nur copy-pasten :-)

Neben den Trendvorher-sagen sind Websites interessant, die zum Beispiel Auszeichnungen erhalten oder vergeben wie www.awwwards.com.

9 / 53

# Webdesign Trends## Cards design

Beispiel Pinterest

10 / 53

Beispiel Trello

11 / 53

Beispiel Twitter

12 / 53

# Webdesign Trends## Hamburger Menü

Immer noch umstritten diskutiert, ist das bei vielen Benutzern gelernt…

13 / 53

# Webdesign Trends## Hamburger Menü

Vegetarisches Burgermenü…

14 / 53

# Webdesign Trends## Endlosscrollen / Storytelling

Gerade in der mobilen Ansicht sind es Benutzer gewohnt, vertikal zu scrollen. Dies findet auch Verwendung bei vielen Desktop-Seiten. Beispiel sind die OnePager.

http://www.spaceneedle.com/home/

15 / 53

# Webdesign Trends## Style Tiles

„Develop a design system rather than designing fixed-width pages.”

Anstatt komplette Designs in Photoshop zu erstellen, wird auch gerne auf eine Kombination von „Development in the browser” und eines Moodboards, auch Style Tiles genannt, gesetzt.

http://styletil.es/

http://rachkozy.github.io/aroma/

16 / 53

# Webdesign Trends## Style Tiles

Auch Live StyleGuides sind ein The-ma, die entweder aus einer beste-henden Website die wichtigsten Ge-staltungselemente herausziehen.Oder Skripte mit denen sich die Vor-gaben schnell erstellen oder abän-dern lassen.

http://styleguide.sc5.io/http://stylifyme.com/

17 / 53

# Webdesign Talks

18 / 53

# Webdesign Talks

# TED Talk

https://designschool.canva.com/blo-g/50-must-see-ted-talks-creativity-design/

19 / 53

# Webdesign Talks

# An Event Aparthttp://aneventapart.com/

20 / 53

# Webdesign Talks

# Re:publicahttps://re-publica.de

21 / 53

# Webdesign Talks

# Beyond Tellerrandhttps://beyondtellerrand.com

22 / 53

# Webdesign Talks

# Typo Berlinhttp://typotalks.com/berlin/de

23 / 53

# Webdesign Talks

# Typo Berlin 2016

Sieben Thesen zur Zukunft des Designsvon Jochen Rädeker, strichpunkt

Siebenmal Ende, siebenmal Anfang1. Ende des Autorendesigns – Beginn der Co-Creation2. Ende der Ästhetik – Beginn des Denkens3. Ende der Funktion – Beginn der Haltung4. Ende des Analogen – Beginn des Sensitiven5. Ende des Unwissens – Beginn des Entdeckens6. Ende der Marke – Beginn der Transformation7. Ende vom Ende – Beginn des Unvollendeten

Quelle: http://typotalks.com/news/2016/05/13/jochen-raedeker-hello-fu-ture-goodbye-design/

24 / 53

# Webdesign Talks

# Webinalehttps://webinale.de

25 / 53

# Webdesign & Contao

26 / 53

Der Dornröschenschlaf im Webdesign ist vorbei!

Die gewohnten Methoden & Techniken reichen nicht mehr aus – es kommt stets neue hinzu.

Welche Möglichkeiten gibt es das auf Contao und unseren Workflow anzupassen?

27 / 53

## Baukasten? Contao!

## Themes - oder warum Themes oft nicht die schnelle Lösung sind

## Contao & Muse = <.conmunicator>

## Basic (faster) Setup

## Wartung & Pflege

28 / 53

# Baukasten? Contao!

29 / 53

# Contao## Baukasten? Contao!

# Baukastensysteme

JimdoSquarespaceWix…

30 / 53

# Baukastensysteme

Pro:- einfach bedienbar (meist FE-Editing)- mobile / responsive meist schon dabei- festes Schema hilft Anwendern bei der Umsetzung

Con:- kaum erweiterbar (technisch wie gestalterisch)- kein (individuelles) Backup- kaum SEO-optimiert (Code-Qualität)- Export der Daten oft nicht möglich

31 / 53

# Contao

Pro:- volle (Code-)Kontrolle- Hostingwechsel kein Thema- kann mit den Anforderungen wachsen (…es kommt drauf an)- Professioneller (Agentur vertickt kein von-der-Stange-Konzept)- meist individuelles Design & Umsetzung für den Kunden

Fazit:Beide haben ihre Berechtigung - hier kommen wir als Berater ins Spiel.

32 / 53

# Themes.Oder warum Themes oft nicht die schnelle Lösung sind.

33 / 53

# Contao## Themes - oder warum Themes oft nicht die schnelle Lösung sind

- Themes ermöglichen es uns den Kunden mit fertigen Designvorlagen in die Diskussion zu gehen.

- Themes tragen zur Verbreitung von Contao bei

- Themes installieren und einrichten sind in der Regel Admintätigkeiten…

- Themes zeigen die Anpassbarkeit von Contao oft eindrucksvoll

34 / 53

Pro:- der Kunde bekommt konkrete Vorstellungen (s)eines Designs

- der Entwicklungsaufwand (Designentwürfe, Zwischenrunden, Abstimmungen) entfallen (erstmal)

- in der Regel sind alle Core-Elemente gestaltet und direkt verwendbar

- kontinuierliche Weiterentwicklung der Themes entlastet die Eigenentwicklung

- „Lernvorlage” für eigene Lösungsansätze

35 / 53

Cons:- fremder Code / fremdes Konzept muss erst mal verstanden werden

- Wo finde ich was? Gerade wenn neue Inhaltselemente mit dem Theme mitgeliefert werden

- die Anpassungen benötigen oft auch noch (viel) Zeit

- die Struktur ist als Template erst einmal vorgegeben

- ersetzt meist nicht den Denkprozess „Was benötige ich für meine Firma?”

-> den Kunden wieder als Berater aktiv unterstützen

36 / 53

# Praxistipps

- In einer Erstgespräch ist es wichtig, den Kunden darauf hinzuweisen, das mit dem Kauf und der Installation des Themes erst die Basis geschaffen ist für den Aufbau der Website.

- Dublette des Seitenbaums erstellen (Ersatzteillager)

- Installation Contao + Theme + X Tagessätze = fertige Website

- Einmal temporär die Bilder entfernen ( * img {display:none;} ), damit der Kunde sieht wie die Wirkung ohne die Bilder ist. Denn Bildrecherche kann dauern… …und kostet dann auch.

37 / 53

# Contao & MUSEEin Beispiel wie man auf die wechselnden Marktanforderungen reagieren kann

38 / 53

# Contao## Adobe Muse & <.conmunicator>

- kurz die Story

- Markt und Anforderungen wandelt sich

- Designprozess bleibt bei der Agentur

39 / 53

# Contao## Adobe Muse & <.conmunicator>

- kurz die Story

- Markt und Anforderungen wandelt sich

- Designprozess bleibt bei der Agentur

Praxisbeispiel - wie mans nicht macht: - alle Seitentitel gleich !- 17,7 MB Daten Startseite !!!- ohne JS keine Inhalte sichtbar !

-> ohne Web-Know-how ist das zu wenig……aber hier kein Muse-Problem, sondernfehlendes Web-Know-how.

40 / 53

# Contao Basis Setup

41 / 53

# Contao## Basic (faster) Setup

- Basis-Installation mit typischen Seiten und Modulen- immer aktuell halten (LTS)- einheitliche Schemata verwenden (Bezeichnungen intern)- passendes Hosting einsetzen (SSH …)

Pro:- vorgefertigte Installation (Files & DB Dump)- schnell verfügbar- eigene Lieblings-Erweiterungen gleich an Bord- …

42 / 53

# Contao Wartung & Pflege

43 / 53

## Wartung & Pflege

*Everybody wants to build and nobody wants to do maintenance*.Kurt Vonnegut (Wikipedia)

44 / 53

## Wartung & Pflege

Mit wachsender Verbreitung von Contao steigt auch der Bedarf für Wartung und Pflege bestehender Websites.

Hier steigt der Bedarf für Evaluierung der Installationen wie auch der richtigen Strategie - also unser Know-how in Sachen Contao ist gefragt.

45 / 53

## Wartung & Pflege

Hier erwarten einen unterschiedlichste Szenarien.

Wurde live auf der Konferenz diskutiert…

46 / 53

# Lese-Input

47 / 53

## Lese-Input

Mike Monteiro„Design is a job”, A Book Apart„You’re my favorite client”, A Book Apart

48 / 53

## Lese-Input

Lea VerouCSS Secrets, O‘Reilly, Deutsche Übersetzung von Jørgen Lang

49 / 53

# Lausch-Input

50 / 53

## Lausch-Input

Karen McGrane & Ethan MarcotteResponsive Web Design Podcast

51 / 53

## Finale

52 / 53

## Finale

Danke.

53 / 53

# Quellen

54 / 53

## Quellen

Bilder:https://static.pexels.com/photos/7541/pexels-photo.jpeghttps://static.pexels.com/photos/6550/nature-sky-sunset-man.jpeg

WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

Documents

Transcript of WEBDESIGN QUO VADIS – TRENDS, CONTAO UND MEHR

CONTAO UPDATES...Contao Konferenz 2014 Wissenswertes zu Contao Updates boldt-media.de | pmueller.de 10 Ordner und Domains auf dem Webspace Ordner Nichts im Hauptordner (root) installieren

Contao Manual

Webdesign New

Webdesign - Fundamentos

Colodeo Webdesign Amersfoort

MAKE IT FLEXIBLE: RESPONSIVES CONTAO MIT VW, EM UND … › files › conference › 2017 › papers › Contao... · 2017-07-19 · Contao Partnerin CSS-begeistert Hobby-Jazz-Sängerin

004 webdesign

Responsive Webdesign Sydeny

webdesign - abril 2008

Artigo_Revista WebDesign

Web Design ottimizzato per Contao CMS

Loveydovey WebDesign

CONTAO Content Management

003 webdesign

WebDesign and development

Webdesign portfolio

Responsive webdesign-introduction

Webdesign in kerala

Contemporary webdesign

responsible webdesign