Alle Artikel in: Webdesign

Die Wiederauferstehung von MySpace?

Auf Vimeo kursiert ein Video, welches ein neues MySpace Design detailliert zeigt. Grafisch sehr ansprechend mit vielen Anlehnungen an zeitgemässe Design- und Interaktionselemente aus Pinterest, Windows8, iTunes und Co.. Ist das die Wiederauferstehung? The new Myspace from Myspace on Vimeo. Es finden sich einige schöne Details wie die Volltextsuche in grossen Lettern oder animierte Infografiken / -icons. Mir gefällt der grossen Stellenwert von Musik in diesem Portal und die Anbindung an Twitter und Facebook. Warum nicht auch Spotify? Der ganze Film sieht noch ziemlich konzeptionell aus. Aber sowohl hier als auch bei vielen anderen Anwendungen kann ich mich einfach nicht mit horizontaler Navigation anfreunden. Ganz sicher nicht mit der Bedienung via Maus. Am Ende hat das Ding doch einiges Potenzial. Mindestens für alle Facebook-Müden und Early Adopters, die sich in Heerscharen registrieren werden (oder noch einen verwaisten Account seit vielen Jahren haben).

image.png

Wo klicken die User auf pixelfreund? Clickheat – Gratis Heatmap / Clickmap Klickanalyse Tool

Wo klicken die Benutzer auf der Website? Es gibt genügend Analytics Tool wie Google Analytics, Piwik oder WordPress Statistik Plugins. Alle gemeinsam haben sie, dass man nicht visuell dargestellt hat, was die Benutzer machen. Clickheat geht einen anderen Ansatz mit einer Heatmap / Clickmap. Screenshot: Heatmap von pixelfreund.ch Zeitraum Dezember 2009 Leider habe ich durch den Einsatz von Clickheat nur die Theorien der hinlänglich bekannten Usability Bücher und -tests bestätigt erhalten: Alles im sichtbaren Bereich bis max. 1 1/2 scrollbare Seiten wird gut gesehen Es werden hauptsächlich die ersten 3 Artikel geklickt wobei der erste 50%, der zweite 30% und der dritte 10% schätzungsweise im Vergleich Bilder werden öfters geklickt als barer Text Grosse Titel in Gruppen von weniger als 5 Elementen werden gut erkannt und geklickt Die Sidebar ist ausschliesslich im sichtbaren Bereich gut frequentiert; weiter unten werden in der Sidebar einzelne Themen selektiv (aber auch wiederholt) gut geklickt Aber alleine der Fakt, dass das Benutzerverhalten erstmals visuell dargestellt ist, gibt mir schon einen wesentlich anderen Eindruck, wie die Leser das Blog benutzen und …

blindtextgenerator-2009-01-05-065210.png

Mit Blindtextgenerator Dummytext erstellen – Lorem Ipsum

Kurz und bündig. Ich bin zufällig auf eine Alternative zu www.lipsum.com gestossen. www.blindtextgenerator.com gestossen. Screenshot www.blindtextgenerator.com Nebst dem üblichen „Lorem Ipsum“ kann man sich auch Cicero und Kafka sowie eine Abwandlung von „The quick, brown fox jumps over a lazy dog“ als Textblock kopieren.

2008-12-06-223741.vectormagic.png

Vektor Bilder erstellen – Von einem Portrait oder Passfoto. Einfach vektorisiert.

Vektorisierte Bilder sind cool. Und es gibt hunderte von Photoshop Tutorials. Und alle sind zu kompliziert oder benötigen 100 Ebenen. Dabei will ich einfach nur ein einfaches Vektor Bild meines Passfotos erstellen. Das geht einfach. Wenn man weiss wie. Es gibt einfache Tutorials, die zwar professionell und aber zu zeitaufwändig sind. Ich habe mich lange durch Photoshop Foren gefragt und danach Links zu Illustrator Tutorials erhalten. Aber schlussendlich wollte ich einfach nur ein vektorisiertes Bild meines Passfotos oder Portraits kriegen, um ein Thumbnail oder Profilfoto für Facebook, XING oder ein Forum zu erstellen. Ist eben leicht unpersönlicher als der Scan eines Passfotos oder der billige Ausschnitt eines Ferienfotos, wie es die Masse macht. Jetzt habe ich DIE Lösung gefunden. Quick and Dirty. Für Web und nicht für Print. PNG oder JPG statt EPS.

colorlovers.screenshot.png

Farbpaletten für Farbliebhaber

Viele Webentwickler, Techies, Amateurblogger und auch Marketingfachleute geben es nur hinter hervor gehaltener Hand zu. Sie haben keine Ahnung von und kein Auge für Design und Farben. colourlovers hilft zumindest bei Auswahl von passenden Farben. Screenshot colourlovers.com Welche Farbe passt zu welcher? Wem sich diese Frage schon bei Hemd und Krawatte stellt, der wird spätestens bei der Gestaltung einer Bewerbung, einer Visitenkarte oder eben der eigenen Website kläglich scheitern. Oder sich am Ende fragen, warum das Resultat einfach mittelmässig aussieht.

image.png

Online Appz – Favicon erstellen

Das Favicon, das kleine Bildlein in der URL Liste der Browser bzw. in der Favoritenliste ist ein Muss. Das kleine Icon hat eine grosse visuelle Wirkung. Es zeigt sich in der URL Leiste, auf den offenen Browsertabs, in den Favoriten und allenfalls sogar auf dem Desktop oder im Startmenu. Es dient der Orientierung bei vielen gleichzeitig geöffneten Browserfenstern und ist ein kleiner Beitrag an das vollständige Branding einer Onlinepräsenz. Dieser Artikel gibt keinen detaillierten Workshop zur Erstellung eines Favicons. Davon gibt es genug hier oder hier. Und eine schöne Übersicht gelungener kreativer Umsetzungen ist die mpp Favicon Gallery. Mein Problem war: Auf die schnelle mal ein .ico machen.

image-thumb.png

Herren Globus mit Podcasts

Herren Globus veröffentlicht monatlich einen Podcast genannt „Stylepod“ zu neuesten Trends und Antworten zu Mode- und Stilfragen der Männergarderobe. Filigran und schön aber sehr zweckmässig gemächt. Mit Direktlink für iTunes oder RSS und sogar mit direktem Download, wie es nur wenige Websitebetreiber umsetzen. Auch gut gemacht die Funktion „Freunden weiterempfehlen“. Allerdings kann man nur den Podcast weiterempfehlen, nicht aber die tollen Dienstleistungen (wie z.B. Personal Shopping, Terminvereinbarung, Imageberatung). Screenshot: Stylepod Website von Herrenglobus Ungünstig ist der Newsletter hier. Ist das nun der Newsletter für den Podcast (was ja keinen Sinn macht) oder der für das Unternehmen oder die Produkte. Ich klick mal.

Usability Kritik: Migros Filialsuche

Mein Usecase war: „Ich suche eine SportXX Filiale in meiner Nähe“. Filialsuche Ich klicke auf „Fachmärkte“ und danach gebe ich in der Filialsuche mein Wohnort ein. Und nun beginnt das Verwirrspiel Screenshot migros.ch Startseite: Die Filialsuche ruft ein Popup Fenster auf Erstens erscheint die Filialsuche in einem PopUp Fenster. Für den Durchschnitts-User ist hier Ende. Entweder der Browser oder der Google Toolbar Popup Blocker haben sich eingeschaltet. Ich bezweifle, dass viele Benutzer nun weiterkommen. Ich muss (auf dem maponair.com server) nochmals wählen, dass ich eine SportXX Filiale suche.

image.png

Webdesign – Sünden #1

Der Designspion spricht mir aus dem Herzen. Marketing Fachleute und Print Grafiker werden es einfach nie können. Webdesign hat einfach einwenig andere Gesetze als Hochglanzprospekte und Plakate. Sieht schick aus. Ist aber nicht lesbar. Ich krieg Kopfweh. Augenkrebs und epileptische Anfälle. Hiermit sei die Serie der Design Sünden gestartet. Screenshot: www.thedesignannual.com Augen zu und durch.