Thomas Weitzel
Designer | Author | Lecture | Photographer | Loves espresso, airplanes, Contao CMS
Contao Austria Day 2014
26. Juli 2014 | Wien
Stay inspired
- oder was geht ab?
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
Webinspiration
http://www.webdesign-inspiration.com
Webinspiration
http://www.awwwards.com/
Webinspiration
Webinspiration
Flipboard (iPad, iPhone, Android)
Webinspiration
Zite (iPad, iPhone)
Organisation
Organisation
Online-Quellen organisieren mit Tools wie
- Dragdis
- 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
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.
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
>> 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.
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
- Datei von Github laden und das Archiv entpacken.
-
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
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
-
Die Datei von Github herunterladen und entpacken
-
Die benötigten Dateien „tooltipster.css“ und
„jquery.tooltipster.min.js“ in 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.
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
-
Laden Sie die Dateien von Github herunter
und entpacken Sie das Archiv.
- 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.
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
Prokrastination oder die Angst der Menschen vor ihren Ideen:
http://www.designmadeingermany.de/2013/56693/
http://www.designmadeingermany.de/2013/56693/
http://www.entrepreneur.com/article/230962 [ergänzt 03.08.14]
Framework-Vergleich:
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
Contao Austria Day 2014 - Stay inspired
By Thomas Weitzel
Contao Austria Day 2014 - Stay inspired
Presentation for Contao Austria Day 2014, 26. 07.2014, Wien
