(24.10.2013) Nachfolgend Websites die mir sehr gut gefallen. Aber natürlich nicht alles bei allen. Dazu eine Einleitung mit einigen Punkten die mich im Moment interessieren.
Ich finde es wichtig zu zeigen was einem gefällt. Mal schauen was die anderen so machen. Wichtig: Eigene Schlüsse ziehen. Inspiration ist nicht gleich Lösung.
Schön
- Grosse Bilder
- Grosse Schrift (Was aber nicht immer auch gut leserlich heissen muss.)
- Die ganze Bildschirmbreite wird ausgenutzt
- Vertikalscrollen
Lange Seiten, Vertikalscrolling
Wenn man viel Inhalt auf einer Seite anzeigen will, braucht man eine Lösung für Bilder/Videos. Ladezeit, pre-load, alternative Images passend zum Ausgabegerät. Es gibt bereits einige gute, einfache Scripts. Paul Irish hat sich natürlich auch schon Gedanken darüber gemacht und postet Links zu einigen Lösungsansätzen: Building fast infinite list views. Man muss aber nicht gleich mit so vielen, er spricht von „Rows“ – ich finde „Sections“ besser, rechnen.
CSS Transitions
Möchte man mit CSS Transitions animierte Banner/Slider bauen oder sonst etwas, was sich bewegt, braucht man ein Werkzeug. Es gibt schon „Profiprodukte“ von Adobe (z.B. Fireworks, wahrscheinlich sogar noch Flash). Ich habe kurz den Google Webdesigner getestet. 10 Min. Sieht nicht schlecht aus. Habe aber in 10 Min. keine Animation hingebracht. Für Interessierte der Link: Google Webdesigner Beta. Flash war nie mein Ding. Höchstens GIF-Animationen.
Ich habe trotzdem ein bisschen gespielt. Mit sequence.js
- Vertical Slider
- Etwas in Richtung Parallax
- Jubilogo (sollte einen Stempeleffekt geben, wenns fertig ist)
Ist (mir!) zu aufwändig. Will sagen: Viel Code für wenig Wirkung. Obwohl sequence.js relativ einfach einzubauen ist: sequencejs. Auch der Royalslider hat Optionen für Bewegung: Royalslider Dokumentation
Ich habe es einfach nicht gerne wenn sich auf dem Bildschirm etwas bewegt. Sicher ist es für die Werbung interessant, in wenigen Sekunden eine Geschichte zu erzählen. Aber um etwas Gutes zu kreieren braucht es eine gute Idee und ein gutes Drehbuch. Und Inhalt. Die Technik, wo nötig, ist dann eigentlich kein Problem.
Inhalt
„Content-centered Design“ tönt gut. Meine Definition: Der Benutzer reagiert immer gleich. Wurde/Wird ihm beigebracht. Darum liegt der Fokus auf dem Content. Weil dieser ändert. Und überhaupt generiert werden muss.
Allgemein CSS
Ich benutze immer noch kein SASS und LESS! Habe einfach keine Zeit und Lust das zu installieren. Und überhaupt. Obwohl man von überall nur Gutes hört und es schon fast Standard ist. Aber nur fast. CSS scheint mir ziemlich unter Druck. Alle möchten daran werkeln. Vendor Prefixes! Schlimm. Statt einer Zeile Code, vier Zeilen Code. Weil man sich nicht auf einen Standard einigen kann. Konkurrenz zwischen zuvielen Frameworks. Jeder möchte CSS noch etwas überstülpen. Nachfolgende Codeschnipsel regen die Fantasie an. Und sehen gut aus. Was wird den hier injected? Jeden Monat kommt ein neues Framework auf den Markt.
<div class='price-tag
<%= rotateRight ? "rotate-right" : "" %>
<%= rotateLeft ? "rotate-left" : ""%>
'>
</div>
<img class='pug' data-original="<%= pug.src %>"
style="width: <%= pug.width * scale %>px;
height: <%= pug.height * scale %>px;">
Typografie
Ob Windows, Apple oder Android. Sieht alles etwa gleich (und gut) aus. Trotzdem erwähnenswert finde ich den GoogleFont „Source Sans Pro“. Von Adobe. Eine ganze Familie von mager bis extrafett. Ist mir noch gar nie aufgefallen und sieht sehr gut aus. Beispiel
Beschäftige mich gerne mit den Grundlagen, oder anders gesagt mit dem „Was man gerne vergisst“. Dieses Beispiel ist hoffentlich erst der Anfang einer Serie. Der Teufel steckt im Detail. Textausrichtung
Apropos. Sieht man überall. Überzeugt mich aber nicht: Mode, Dekorative Typografie?
Mobile
Ein Thema für einen separaten Artikel. Nur eine Bemerkung vorab: Bei der Mobileversion einer Website nicht probieren das native Interface eines Handys oder die Möglichkeiten einer nativen App zu kopieren. Das geht nämlich nicht. Sinnvolle Informationsarchitektur, gut funktionierendes Scrollen und Swipen, angepasste Typografie und schnelle Ladezeiten sind schon mal eine gute Basis.
Prototyp modische Fake App
Nonsens
Mein Lieblingswort im Moment! Ein Beispiel wie man es nicht machen sollte. Ausser man verdient etwas mit dem Klick. Das ist aber hier nicht der Fall.
Read more / Read less
Und nun zu den schönen Sites…
