Contao Austria Day 2014

26. Juli 2014 | Wien


Stay inspired

- oder was geht ab?


Video-Mitschnitt auf YouTube


Hallo. Wer spricht?

Diplom-Designer - Contaoianer seit 2006.
Liebt italienische - und wienerische :-) Heissgetränke.
Flugzeuge. Fotografie. Netzwerken = Flurfunken.

Vita

Studium Industriedesign, Abschluss als Diplom-Designer
Selbständig seit 1996

Nach ersten Aufträgen im Produktdesign seit 1999 Schwerpunkt
im Bereich Neue Medien, Webentwicklung und Design.
Workshops & Schulungen, Hochschultätigkeiten.


Contao Vita

Seit 2006 Websites mit TYPOlight [2010 Contao]

Engagement im Forum
Sprecher auf den Contao-Konferenzen (2006 -2013)
Organisation Contao-Stammtisch Stuttgart seit 2014
1. Contao Buch 2010
2. Contao Buch 2013
3. Contao Buch 2015 ?
Mitglied Contao AG Presse und AG Partnerbetreuung

Stay inspired


Der tägliche Spagat zwischen 


Infotainment und Entertainment

Stay inspired


Zwischen dem „auf-dem-laufenden-bleiben“ und 

dem Wunsch nach Prokrastination*.


Hey hey Wickie… also Wikipedia sagt:

Aufschieben, auch Prokrastination
( lat. procrastinatio „Vertagung“, 
Zusammensetzung aus
pro „für“ und cras „morgen“ )
Erledigungsblockade, Aufschiebeverhalten, … 
…ist das Verhalten, als notwendig aber auch als unangenehm empfundene Arbeiten
immer wieder zu verschieben, anstatt sie zu erledigen.


Inspiration im Contao-Kosmos


Informiert im Contao-Kosmos


  • Contao Community-Forum (de & en)

  • SocialMedia-Kanäle Facebook, Twitter, Google+

  • RSS-Feeds (CERIS, CCA, Association)

  • Fallbeispiele der Contao-Partner
    (auch englische Seite beachten)

  • Netzwerktreffen: Stammtische, Camp, Konferenz,
    Nordtag, NRW-Day und Contao Austria Day


Webinspiration

Webinspiration


  • Webkataloge

  • Award-Seiten

  • Tutorial-Websites

  • Video-Blogs zu Design / Kreativität (TED-Talks)

Webinspiration

http://www.verynicesites.com/


Webinspiration

http://www.webdesign-inspiration.com


Webinspiration
http://www.awwwards.com/

Webinspiration

http://tympanus.net/codrops

Webinspiration

Flipboard (iPad, iPhone, Android)

Webinspiration

Zite (iPad, iPhone)


Organisation


Organisation


Online-Quellen organisieren mit Tools wie

  • Pocket
  • Dragdis
  • Pinterest
  • Evernote 
  • etc.


>> visuelle Bookmarks


Organise it.

Pocket [ http://getpocket.com ]

Organise it.

Dragdis [ http://dragdis.com ]


Organise it.

Pinterest [ http://pinterest.com ]


Denken. Schreiben.


2 Werkzeuge, die einem helfen, sich ganz auf das
Denken und Schreiben zu konzentrieren.

iA Writer - offline für Mac OSX, iPad & iPhone

medium.com - online - für alle :-)

iA Writer

http://www.iawriter.com ]


medium.com

https://medium.com ] 



DESIGN

Design ?


„Je eingeschränkter die Vorgaben, desto klarer die Umsetzung.“


„(Gestaltungs-)Freiheit entfaltet sich innerhalb der Grenzen, nicht außerhalb.“

Design




Sprache strukturiert.
Sprache filtert.
Sprache formt Bilder im Kopf.

Gutes Design?



Copy Paste Design
„Die Website XXX ist toll - genau so wollen wir das.“


Engagiert

„Lassen Sie sich mal was schickes einfallen …“


Präzise

„Ich habe Ihnen das Design hier im Word-Dokument

schon mal vorbereitet“

Definition von gutem Design

  • transportiert Unternehmensleitbild
    Wiedererkennung (Marke)

  • visuelle Darstellung folgt nicht einem Trend,
    sondern bildet einen eigenständigen
    Markenauftritt (Langlebigkeit)

  • eindeutige, klare Benutzerführung

  • Lesbarkeit

  • Kompatibilität

Schritte zum Design


  • Produkt / Dienstleistung / Branche

  • Zielgruppe(n)

  • Budget

  • Komplexität (Unternehmensstruktur,
    CI-Richtlinien / Styleguide, techn. Funktionen)

  • Auswertung generierter Daten
    (Webstatistik, Kontaktformulare)

  • Briefing / Lasten- / Pflichtenheft

Entwickeln eines Designs - 

von innen nach außen


  • Was ist das Ziel der Website? (Bekanntheit steigern,
    modernes Unternehmen = moderne visuelle Erscheinung)

  • Reaktion auf geänderte Geschäftsprozesse
    (mobile / responsive)

  • Aufbau einer Informationsstruktur
    Wo ist was zu finden?
    Priorisierung!
    >> Orientierung / Zuordnung durch Farbe, Schrift…

Design sprechen


Kommunikation ist das wichtigste Element.

Gute Kommunikation
erleichtert das umso mehr.

Und mit Humor gehts immer besser :-)




Anatomie einer Website (Skelett)


  • jede Website beinhaltet die gleichen Elemente
    (Navigation, Logo, Suche, Inhalte, News, Events, …)

  • Struktur UND Design bestimmen das Aussehen
    und die Positionierung.


Wir erinnern uns: 2003 wurde CSS Zen Garden gestartet.

Inhalt und Design sind getrennt und nur durch Veränderung
von CSS entstehen völlig unterschiedliche Website-Designs.

Anatomie einer Website (Skelett)


3 Websites


Exemplarisch im Vergleich die Startseiten der drei Airlines
Austrian Airlines, Deutsche Lufthansa und Swiss.


[ http://www.austrian.com ]

[ http://www.lufthansa.com ]

http://www.swiss.com ]





Do it w(schn)ell.


Gute Basis. Guter Start.

Ein Theme alleine macht 
noch kein Design

  • Theme als solide Basis für ein Webdesign

  • in der Regel einfach Anpassungen möglich

  • ersetzt nicht das strukturelle und
    konzeptionelle Denken

Einsatz von Frameworks


Durch den Einsatz von Frameworks werden viele Basisfunktionen bereits abgedeckt, um eine Website zügig zu entwickeln.

  • Contao Framework

  • Bootstrap Framework

  • Foundation Framework

  • YAML

Frameworks


Vorteile:
  • umfangreich getestet unter verschiedenen Szenarien
    (Betriebssystemen und Browserversionen)

  • Weiterentwicklung

  • viele vordefinierte Inhaltselemente

Nachteile:
  • umfangreicheres Einarbeiten (Syntax, Methoden)

  • „abhängig“ von einem Anbieter / einer Methode

Einsatz von Themes

als Basis für einfache Websites oder für Prototyping
„Baukasten“ versus Individuallösung

Baukasten (Theme) Individuallösung
+ geringe Kosten + individuelle Funktionen
+ schnelle Lösung + individuelles Design
+ fertige Vorlagen + individuelle Erweiterungen
- vorgegebene Struktur + individuelle Betreuung
- aufwändig für individuelle Anpassungen - kundenseitiger Investitionswillen

Basis-Installation verwenden


  • vorgefertigte Basis-Installationen verwenden

  • klassischen Aufbau einer Website anlegen
    (Seiten, Artikel, Formular, Google-Map, etc.)

  • Basis-CSS anlegen
    (Basis-Elemente, Formulare, Navigationen, etc.)

  • Installationsroutinen einsetzen
    (ssh, Zip/Unzip auf dem Server)

Basis-Installation verwenden

  • Installation & Erweiterungen aktuell halten

  • Updates regelmäßig einspielen



 
  >> ermöglicht schnellen Start

>> mehr Zeit für das Design


Praxis


Animate

your content

Animate your content


Ab und an soll eine Überschrift oder ein anderes Element
die Aufmerksamkeit des Besuchers erhöhen.

Neben der Schriftfamilie, der Schriftfarbe und -größe 
kann auch eine dezent eingesetzte Animation für 
Aufmerksamkeit sorgen.


Animate your content #1

http://daneden.github.io/animate.css ]

Mit der CSS-Bibliothek „animate.css“ lassen sich
vielfältige Animationen einfach umsetzen.
Kein Flash, Javascript - nur CSS3 kommt zum Einsatz.

Animate your content #2



Animate.css bietet eine Reihe von fertigen Animationen. 
 
  • einfache Integration durch Angabe von 2 CSS-Klassen

  • nur benötigte Animations-Definitionen beibehalten


Animate your content #3


  1. Datei von Github laden und das Archiv entpacken.
  2. Die Datei „animate.min.css“ in das Verzeichnis „files“ 
    laden und in das Seitenlayout einbinden.

Animate your content #4



Es müssen immer zwei Klassen angegeben werden.

Die erste Klasse ist „animated“, gefolgt von der Klasse
des gewünschten Effekts - im Beispiel „fadeInDown“.


Animate your content #5


In den Experteneinstellungen bei CSS-Klasse 

„animated fadeInDown“ eintragen.

Animate your content #6


 [ www.vienna.contao-fuer-webdesigner.de ]


Tooltip me

Tooltip me


  • einfach integrierbar
  • leicht zu gestalten mit CSS
  • Semantik bleibt erhalten (SEO)
  • titel-Tags werden „schön“
    Designerwünsche werden wahr :-)

Tooltip me #1

http://iamceege.github.io/tooltipster ]

Dazu eignet sich ein Tooltip-Skript.
Hier gezeigt mit dem jQuery-Tooltip-Skript „tooltipster“.

Tooltip me # 2


  1. Die Datei von Github herunterladen und entpacken

  2. Die benötigten Dateien „tooltipster.css“ und
     „
    jquery.tooltipster.min.js“ i
    n das Verzeichnis 
    „files“ laden.

Tooltip me #3


Die CSS-Datei im Seitenlayout auswählen und einbinden.


Tooltip me #4


Die JavaScript-Datei sowie den Funktionsaufruf im
Seitenlayout unter „Skript-Einstellungen“ einbinden.

<script src="files/tooltipster/js/jquery.tooltipster.min.js"></script>

<script>$(document).ready(function() {
            $('a[title]').tooltipster({
             });
        });
</script>
Die Minimalversion zeigt das title-Attribute als Tooltip
bei allen Links an.

Tooltip me #5


<script src="files/tooltipster/js/jquery.tooltipster.min.js"></script>

<script>$(document).ready(function() {
            $('a[title]').tooltipster({
               animation: 'fade',
               delay: 200,
               touchDevices: false,
               trigger: 'hover',
               position: 'top',
               theme: 'tooltipster-shadow'
             });
        });
</script>
Die erweiterte Version ermöglicht weitere Funktionen
  • Animationsart
  • Zeitverzögerung
  • ob Touch-Devices den Tooltip angezeigt bekommen
  • ob bei hover oder click ausgelöst werden soll

Tooltip me #6


Das Skript kann um weitere Funktionen angepasst werden.
Eine Online-Dokumentation steht zur Verfügung.

http://iamceege.github.io/tooltipster/#getting-started



In a circle

In a circle


Prozentangaben, zum Beispiel für Angaben
der Qualifizierung von Leistungsschwerpunkten

( Photoshop: 100 %, CSS: 90 % … ) ,

kann man mit CSS eleganter darstellen.


In a circle

http://circle.firchow.net ]
Eine einfache Art der Einbindung UND Anpassung

bietet Andre Firchow.

In a circle #1


  1. Laden Sie die Dateien von Github herunter
    und entpacken Sie das Archiv.

  2. Anschließend laden Sie die Datei „circles.css“ in den
    Ordner „files“ und binden die Datei im Seitenlayout ein.

In a circle #2


Als nächstes ein kurzer Blick in die mitgelieferte „index.html“.

Folgender Abschnitt ist interessant:

<div class="c100 p25">
     <span>25%</span>
       <div class="slice">
          <div class="bar"></div>
          <div class="fill"></div>
       </div>
</div>
3 DIVs und ein darin enthaltenes span-Element
für den Aufbau der HTML-Struktur.

Die CSS-Klasse „c100“ definiert die Basisdefinitionen; die CSS-Klasse „p25“ erzeugt die Darstellung von 25%, also einem Viertelkreis.

In a circle #3


Gradzahl-Definition

Schauen wir uns die Definition für einen Kreissegment
mit 48 % an.

48 % sind laut CSS-Definition: 172.8 Grad

.c100.p48 .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}


In a circle #4


Wie kommt man auf die richtige Gradzahl?

Hier hilft - wie so oft - der klassische Dreisatz:

50 % = 180 Grad
48 %  = x Grad 

--> 48 x 180 / 50 = 172,8 Grad

In der CSS-Datei „circles.css“ sind alle Gradzahlen von 0 bis 100 Grad
vor definiert. Hier kann man alle nicht benötigten Definitionen
löschen, um die Dateigröße auf das notwendige Minimum zu reduzieren.

In a circle #5


Enthalten sind auch noch die Klasse „small“, „big“ sowie
für die Farben „dark“, „green“ und „orange“, die in der
Angabe ergänzt werden können.

<div class="c100 p25 dark">

Beispiele:


Links


http://www.smashingmagazine.com/2014/07/21/how-do-you-design-interaction/

Prokrastination oder die Angst der Menschen vor ihren Ideen:
http://www.designmadeingermany.de/2013/56693/

http://www.entrepreneur.com/article/230962 [ergänzt 03.08.14]

Framework-Vergleich:
http://designmodo.com/bootstrap-vs-foundation/

Links

Webinspiration

http://www.fromupnorth.com/web-design-inspiration-764/
http://www.pinterest.com/search/pins/?q=webdesign
http://www.cssdesignawards.com/




DANKE.


Und nun Flurfunk ;-)




Photo Credits: Markus Spiske / www.temporausch.com / CC-BY

Made with Slides.com