Tag Archives: Raster

Usability Webdesign

10 Prinzipien guten (Web)Designs

Können bewährte Designprinzipien für alles und für immer gelten? Woran erkennt man gutes Design? Dadurch, dass die designten Produkte erfolgreich sind? Dann wären Aldi-Einkaufstüten gutes Design. Wir wollen sicher mehr. Dieter Rams 10 Prinzipien guten Designs sind es wert, auf diese Frage­stellung hin untersucht zu werden. Wir alle profitieren noch heute von der Fort­führung und Anwendung dieser Ideen, wenn wir zu Apple Produkten (der Chef­designer Sir Jonathan Ive beruft sich darauf) greifen.
10 Prinzipien im Webdesign →

Website der Woche

Seitenraster mit Sinn

Da ich schon ein paarmal die gestalterisch ein­falls­lose Verwendung von Raster auf Websites kritisierte, aber auch Grid-Frame­works vor­ge­stellt habe, wird es Zeit, gelungene Beispiele zu zeigen. Bei mir ist BeCreative auf dem Zettel. Bill stellt sich und seine Site kurz selbst vor: »BeCreative is the personal website of Bill Kalogiros, a strategic Creative Director who specializes in brand creation and corporate website design.« Rasterfun aus Kanada →

Webdesign

Styling einer Site mit dem Unsichtbaren

Der Unterschied zwischen einem Webdesign-Profi und einem User liegt nicht in deren Erfahrung mit Websites. Der Profi macht die Erfahrung, indem er Websites baut, der User, indem er diese anschaut. Beide sehen demnach dasselbe mit divergentem Blick. Wie verschieden die Auf­fassung ist, wird deutlich, wenn User zu Kunden eines Web­de­signers werden und Ihre Vor­stel­lungen äussern. Der bekannteste Wunsch klingt etwa so: »Kann mein Firmenlogo nicht größer gemacht werden?«, oder: »Beim Banner oben passen doch noch ein Facebook-Likebutton, ein Twitter-Follower-Link und ein Kundenlogin hinein?«. Ich will hier kein Kundenbashing betreiben, sondern aufzeigen, wie unähnlich die Blickweise ist und sein muss, wenn man wirklich gute professionelle Sites designen will. Es kommt nicht nur darauf an, was auf eine Site rauf soll. Es braucht einen Blick für das Unsichtbare der Gestaltung. Das Unsichtbare hilft →

Webdesign

Grid und Raster in Photoshop

Raster helfen, beliebige Elemente einer zu gestaltenden Fläche auf/an Linie auszurichten. Damit entsteht ein optischer Zusammenhang, der eine Ein­heit des Gestalteten erreicht. Raster sind im Printbereich Pflicht, im Web­design nur beschränkt umzusetzen. Möchte man die Typografie und weitere Seitenelemente einheitlich am Raster bin­den, dann wird die Erstellung des CSS schwierig. Es gibt ein paar Helferlein, die korrekte Raster­aus­­richtung wenigstens beim Design einer Site in Photoshop erleichtern. Davon möchte ich zwei Freeware-Produkte vorstellen: Modular Grid Pattern und GuideGuide. gut gerastert in PS →

Webdesign

Ab durch die Mitte

In der »Mitte liegt die Kraft« und »Aus der Mitte heraus« sind Sprüche, die demonstrieren, wie wichtig nicht nur Politikern (»die bürgerliche Mitte«) das Finden und Halten dieses besonderen Ortes ist. Auch Webdesigner versuchen sich mit klassisch mittig geordneten Layouts, die gestalt­theoretisch der Symmetrie zugeordnet sind. Wir schauen uns einige dieser Entwürfe an. Ich komme darauf, da ich gerade mit der Asymmetrie be­schäf­tige (Artikel folgt) und symmetrische Entwürfe während meiner Recherche selbst­herr­lich in den Vordergrund drangen. Psychologisch gesehen behauptet Mittig­keit: hier bin ich, ich stehe für mich selbst und habe die Kraft, für mich alleine zu bestehen.

mehr aus der Mitte →

Website der Woche

Klaas ist klasse

Klaas HomeDie Site von Skyler van der Molen der Fa. Klaas ist bei mir gleich hängen geblieben. Schwarz⸗Weiss reduziert, viel Weissraum, grafische und typo­grafische Extras usw. Kurzum, die Site kann nicht auf den ersten Blick erschlossen werden, bietet aber Raffinessen, die es lohnt aufzuschlüsseln und zu erklären. Skyler gibt seine Wohnsitz-Koordi­naten 28.351085, -80.726205 an (ok, das ist in Cocoa, Central Florida, USA—Google Streetview erlaubt einen Blick auf sein schmuckes Büro) und man fragt sich, wie man auf der »sunny side« so eine streng gestaltete Website entwickeln kann?

How to do great work →

Usability Webdesign

Above the Fold!?

»Über dem Falz«, fachlich-webtechnisch natürlich auf englisch: above the fold, meint bei einer Zeitung die Titelseite (ok, ok: »front page«), im Web­design den sichtbaren Teil einer Seite innerhalb eines Browser­fensters. Eine gut gestaltete Titelseite hat höchste Bedeutung für den Verkauf. Im Webdesign dient(e) besondere Beachtung dieser Zone insbesondere der Such­ma­schinen­­optimierung (die ersten 5 Major­ein­träge werden hoch gewertet). Im Web ist man zudem nur einen Klick weit vom Verlassen einer Site betroffen. Doch die Weblandschaft hat sich so weit gewandelt, dass man diese Setzung des »Above the Fold« mal unter die Lupe nehmen sollte.

read more »

Projektmanagement

Wireframes online leicht gemacht

Die Erstellung von Wireframes soll jetzt ganz simpel werden. Einfach Wirify aufrufen, ein Bookmarklet für den Browser abgreifen, installieren und eine gewünschte Website laden. Mit Klick aufs Bookmarklet wird diese sofort in Wireframes umge­wandelt und dargestellt.

read more »

Coding Usability Webdesign

Design im Raster

Jeder Gestalter steht am Anfang vor der weissen Fläche, die er zu füllen hat. Ist der Schrecken (Horror Vacui) ab­ge­klungen, dann entsteht recht schnell eine neue Site. In der Anordnung der Ele­men­te haben sich schon im Print­design (ja, ich meine die Holz­medien) Raster bewährt. Im Web­design können Raster als Ge­stal­tungs­hilfe schon, aber in Ausführung eher im bescheidenen Rahmen verwendet werden.

No fear, Grid is helping →

Buch Design

Designraster

Heute stelle ich ein Buch vor, was zur Grundausstattung von Print- und auch Webdesignern gehören sollte. Es heißt einfach »Design­raster« und wurde von Gavin Ambrose und Paul Harris geschrieben. Dieses Buch vom Stiebner Verlag liest sich für Interessierte des Fachs wie ein Roman. Man kann es aufgrund der guten Gliederung auch nebenbei auf dem Weg zur Arbeit lesen, es als Couchbuch bereit haben, oder zu sonstigen Gelegenheiten schmöckern. Sie werden immer etwas Neues über Gestaltung finden.

read more »

QR Code Business Card