Kategorie-Archiv: Webdesign

Scrollbars und Lesedauer

Es war einmal… Damals gab es noch Scrollbars.
Unter dem Primat des Smartphone-Swipe-Designs sind sie aber leider fast völlig verschwunden. Dabei dienten sie doch, als man sie noch optisch wahrnehmen konnte, einem sehr wichtigen Zweck: Sie zeigten an, wo man sich auf der Seite befand; eine nicht unwesentliche Information, wenn der Text oder die Daten nicht in den Fensterausschnitt passten. Proportionale Scrollbars vermittelten außerdem die Information, wieviel Inhalt im Vergleich zum aktuell sichtbaren Ausschnitt verborgen war.
Es war einmal… besser.
Die Zeiten sind vorbei.

Einige Online-Zeitungen und Blogs geben nun die Lesedauer an. Ich frage mich dabei immer, woher sie wissen wollen, wie schnell ich lese. Steckt da eine LogFile-Analyse dahinter? Oder gar mein persönliches Leseverhalten auf dem Portal? Mein Verständnis –aka mein Mentales Modell– hat Lücken.

Als besonders Highlight ist mir gerade der rote Fortschrittsbalken am oberen Fensterrand des KATAPULT-Magazins aufgefallen.

Ein roter Balken informiert über den Lesefortschritt auf der Seite.

Ein roter Balken informiert über den Lesefortschritt auf der Seite. /via

Hier ein Beispiel: https://katapult-magazin.de/de/artikel/artikel/fulltext/wie-katapult-die-realitaet-verzerrt/

subtil – elegant – verständlich – sinnvoll

Von solch gelungenen Experimenten und Designs sollte es mehr geben. Vielleicht tragen meine Zeilen ja auch dazu bei, dass sich ein Interaction-Pattern etabliert.

Danke, das Lesen dieses Betrags hat weniger als 1 Minute gedauert.


// Original: Scrollbars und Lesedauer CC-BY-NC-4.0 Matthias | mprove.net | @mprove | Musings & Ponderings

Muse – ja oder nein?

Was genau ist eigentlich ein One Pager? Da ich mich sehr für das Thema Webdesign interessiere und im dritten Semester bereits einen One Pager programmieren musste, beantwortete sich diese Frage wie von selbst. Nun musste aber eine weitere wichtige Frage geklärt werden: Programmiere ich den One Pager für mein Projekt wieder selbst, oder überlasse ich den schwierigen Teil diesmal einem Programm?

Ich musste besonders früh feststellen, dass ich es in diesem Semester vor lauter Arbeit kaum schaffen würde, selbst zu programmieren. Meine Entscheidung fiel somit auf das Programm Adobe Muse, in welchem man die Elemente wie in den Grafikprogrammen Illustrator, Indesign oder Photoshop hin- und herschieben kann. Doch leichter gesagt, als getan: Das Platzieren der Elemente und das Einfügen von Bildern war kein Problem, jedoch war es unglaublich schwierig, das Layout meines One Pagers auf responsive – also an alle Geräte angepasst – einzustellen. Da mir die Zeit für lange Tutorials im Internet fehlte, musste ich an einigen Stellen schummeln. Nichts desto trotz erfüllt der One Pager nun seinen Zweck und ist zumindest auf iPad und iPhone 6, sowie allen gängigen Desktopauflösungen einigermaßen responsive.

bildschirmfoto-2017-02-04-um-22-03-42

In Zukunft möchte ich mich weiterhin mit Adobe Muse beschäftigen, auch wenn ich sehr große Probleme damit hatte. Mit ein bisschen mehr Übung und regelmäßiger Nutzung können damit sicher ein paar tolle Webprojekte entstehen und durch die Updates wird es höchst wahrscheinlich im Laufe der Zeit noch benutzerfreundlicher.

Auf meinem Weg durch die Welt der One Pager sind mir übrigens ein paar tolle Layouts aufgefallen, die ich euch natürlich nicht entgehen lassen möchte. Viel Spaß beim Anschauen und: Haltet eure Retina-Displays fest! 😉

http://www.bevisionare.com/

https://mailchimp.com/2016/

https://www.jsconfar.com/

http://brightmedia.pl/?lang=en&site=intro


Der Artikel Muse – ja oder nein? hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.

Illustriertes Storytelling

Unsere Semesterprojekte müssen Anfang Februar in Form eines One Pagers präsentiert werden. Die Websites dienen zur Promotion unserer Ideen und sollen die Projekte in möglichst wenigen Worten erklären.

Ich habe mir tatsächlich das ganze Semester lang darüber den Kopf zerbrochen, wie ich das anstellen könnte. Da ich ein Mensch bin, der viele Worte benötigt um etwas zu erklären, gestaltete sich diese Aufgabe besonders schwierig. Während ich die letzten Wochen darüber nachdachte, fiel mir beim Nutzen meines Smartphones auf, dass ich (wie viele von uns) sehr oft Emoticons, also kleine Bilder bzw. Symbole nutze, um meine Gedanken zu erklären und meine Worte zu unterstreichen.

Auswahl an Emoticons auf dem iPhone

Auswahl an Emoticons auf dem Smartphone

Und zack, da war sie: die Idee, das Projekt in Form von Illustrationen zu erklären. Ich überlegte erst, dazu ein kleines Video in Adobe After Effects zusammenzuschneiden, allerdings konnte ich mir nicht vorstellen, dies zeitlich noch auf die Reihe zu kriegen. Aber eines war klar: die Idee mit den Illus steht.

Ergänzend dazu überlegte ich mir ein kleines Szenario mit meiner Persona, um das Projekt mithilfe von Storytelling Schritt für Schritt zu beschreiben. Die Illustrationen sollen nach und nach einzeln mit einem jeweiligen kleinen Textabschnitt gezeigt werden, um so mehr Spannung in das Storytelling zu bringen. Außerdem eignet sich ein One Pager dafür besonders gut und so machte ich mich schließlich an die Arbeit …

1_dasistpascalneu-01

 2_liebtvideospiele-01

3_undveranstaltet-01

weitere Bilder folgen 😛 🙂 🙂


Der Artikel Illustriertes Storytelling hat die Lizenz CC-BY-NC-4.0 CLIC, bzw. des jeweiligen Autors.