Inspiration

(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.

vertical scrolling

Vertikalscrolling ist eine alte Technik.

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

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

Fake
(under construction)

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…

Leave a Reply