17
Mrz 12

Gestaltungselemente mit Konsistenz

Diese Website wäre mir entgangen, hätte ich nicht das Ghostery-Plugin für alle meine Browser installiert. Ich war es satt, meine Daten als Träger meines Surfverhaltens (kostenlos) zu verbreiten. Ghostery erklärt  in einem Install-Wizzard (sehr komfortabel), wie man böse Cookies un­schäd­lich macht am Beispiel der folgenden Site. Diese taugt wiederum als Beispiel guten Gestaltens, sodass ich sie heute besprechen werde. Es geht um die Konsistenz der Gestaltungselemente dieser Site. Gestaltungselemente clever nutzen →


03
Feb 12

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 →


31
Dez 11

Gut Lesen mit richtiger Größe

Würde man eine Website programmieren, sich selbst über­lassen und keine weiteren CSS-Angaben zum Text bringen, dann hätte man folgende Standardwerte: 16 Pixel Schrift­grad, Times als Schrift­art, Schrift­farbe schwarz und der Zeilenabstand liegt bei mageren 120 %. Das geht natürlich gar nicht. Die Times hat echte Probleme mit der Lesbarkeit (ok, eines Tages, wenn überall Retina-Displays genutzt werden, dann vielleicht nicht), kommt also nicht in Be­tracht. Schwarz auf dem hellem Hintergrund des Bild­schirms hat allgemein zu hohen Kontrast, der Zeilenabstand ist für das Web zu gering. Nur eines kann im Grunde bleiben: der Schriftgrad. Typografie mit richtiger Größe →


25
Dez 11

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 →


21
Nov 11

Von PSD zum HTML: Webdesign mit Photoshop

Um eine brauchbare Website professionell her­zu­stellen, sollten sie einigen grundlegenden Schritten folgen. Natürlich kann man unter Mengen an (freien) Templates und Vorlagen auswählen. Über­troffen wird die Einheitsware immer durch individuell angepassten Entwurf. Eine wichtige Station ist der Entwurf mit­hilfe von Photoshop (wird am häufigs­ten ver­wen­det—es geht natürlich auch mit Illu­stra­tor, Fire­works, Pixelmator, Gimp oder anderen Pro­gram­men, dazu später). Ich möchte auf die wesent­lichen und üblichen Stationen des Work­flows ein­ge­hen. Dazu benutze ich eine Site aus dem Tutorial von Visual Swirl (sehr lesenswert!). mit Photoshop designen →


24
Aug 11

Retrodesign ist modern

Civil Air Patrol poster featuring an Air Force airman and a CAP cadetRetrodesign als Stilrichtung macht Rück­wärts­gewandt­heit zum Prinzip. Retrodesign ist auch als: Retro, Retrostyle oder Vintagestil bekannt. Dieses Blog spielt auch mit dieser Idee und das mit ironischen Motiven und augen­zwinkernden Spaß am Stil. Vielerorts wird das Thema aber ernsthaft umgesetzt. Klar, das unübersichtliche Moderne dieser Zeit überfällt uns mit visuellen Trash, da kann man Orientierung verlieren. So kommt eine Gegen­bewegung in Schwung.

zurück zur Gegenwart →


02
Jun 11

Oranges Webdesign

Orange Websites sind das eine, die Farbe das andere. In dieser neuen Serie können Sie überprüfen, ob eine durchgehende Farbgebung zur entsprechenden Website passt. Ist die Farbe Boss oder die Site selbst? Orange wird als Warmtonfarbe viel Positives zugeordnet. Die Farbe wirkt psychologisch gesehen freundlich, positiv, kommunikativ, vitalisierend, gar lustig. Auf der Gegenseite entstehen Assoziationen wie billig, aufdringlich, süßlich.

Orange Sites in der Praxis →


24
Mai 11

Heads up

Ein Eyecatcher (Blickfang, Aufmacher) liefert einen überzeugenden optischen Ein­stiegs­punkt jeglicher Gestaltung, sei es in einer Print­an­zeige, einem Ladeneingang (ok, hier nennt man es »Stopper«) oder auf einer Website. Lange Zeit reichte die korrekte Platzierung eines Logos oder eines Badges (optisch mit Tendenz zu »Störer«). Allgemein konzentriert man sich auf viele Extraelemente Aus­ge­staltung von Sites (gib mir den Super­button…). Das Gegenteil stellen Sites dar, die mit einfachen Aufbau und Verwendung eines klassischen Eyecatchers—hier: Portrait— glänzen.

Portraits als Eyecatcher →


29
Apr 11

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.

Continue reading →


03
Apr 11

Webdesign, handcrafted

Heath Waller Webdesign AusschnittErneut möchte ich über Heath Waller Webdesign berich­ten, um wie versprochen den aktuellen Aufbau der Site zu zeigen. Die alte Site wirkte auch auch so, weil sie mit einem deutlichen Schuss Retro­design versehen war, die neue schlägt eine ganz andere Richtung ein. Nun überrascht extreme Farbgebung statt wohliger Brauntonalität, collage­artige Elemente und harte Kontraste werben mit kräftigen Auftritt — man glaubt es nicht, denselben Designer vor sich zu haben.

Neues von Heath Waller


QR Code Business Card