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 →


17
Nov 11

Schwarzweiss im Webdesign

Nun wirkt schwarzweiss nicht sonderlich originell als Grundlage von Farbgebung. Und dennoch gibt es viele Designer, die diese Farbkombination für ausreichend halten, um eine interessante Site zu gestalten. Erinnerung: Farbe ist Emotion. Kann eine »farblose« Site emotionslos sein? Nur, wenn man z.B. Schwarz als emotionslos bezeichnet. Schwarz­weiss kann so verwendet werden, dass Emotionen allein durch den harten Helligkeits-Kontrast ent­stehen. Die Substraction Site (Abb. rechts) erzeugt allein durch das Motiv des großen schwarzen Hundes, dem Kreuz und den fetten schwarzen Navibalken eine starke Spannung. Schwarz als Farbe →


12
Nov 11

Designer Portfolio als Plakat

Gibt es eine originellere Methode, als seinen Lebens­lauf (neudeutsch: Curriculum Vitae) anders als die übliche, bürokratische Weise darzustellen? Ja, auf jeden Fall—und für Designer gilt das erst recht! Hier folgt eine Serie von »Designer Resumes« in Plakatform. In dieser Darstellungs­art wird auf einem Blick erkennbar, mit welchen Skills, Farb- und Grafikgefühl ein Designer punkten kann. Man findet in der Darstellung das gesamte Spektrum von typografisch, grafisch-technisch, handwerklich orientierten Lösungen versammelt. Nur über sorgfältig gestaffelter Darstellung kann gepunktet werden—ein Blick—ein Urteil. Hier im Vergleich werden selbst kleine Schwächen sofort auffällig. Sauber durch­strukturierte, plakative Werke mit klarer kreativer Aussage fallen umso positiver ins Gewicht. Urteilen Sie selbst! Lebenslauf anders →


08
Nov 11

Kerning ausprobieren

Die Schrift wird von uns fast sorglos verwendet. Man benutzt sie und kümmert sich nicht groß um Details, da das Schriftaussehen festgelegt ist. Schrift in großen Graden offenbart allerdings eine Problem­stelle: den Buchstabenabstand. Dieser wird in der Regel durch die nummerische Fest­legung (über Kerningpaare) des Schriften­her­stellers geregelt. Das reicht nicht immer, um einen harmonischen Aus­gleich zu schaffen. Besonders deutlich wird es bei Zier­schriften, die nicht immer mit voller Sorgfalt produziert werden. So ist man häufig gezwun­gen, die Buchstabenabstände manuell auszu­gleichen (=Kerning). Mit Anspruch an Quali­täts­typografie wird man auch die kleineren Schrift­grade ausgleichen. Im Webdesign sollte man die durch automatisierte Erzeugung von Übergangspixeln verschobenen Buchstaben richten. Kern me→


29
Okt 11

Kreisrund

Die erste Generation Websites kam hardgecodet in das Internet. Bald entwickelten sich die Content Management Systeme und verbreiteten sich zu­neh­mend. Firmen namen für ihr Web­schicksal den Kommunikationsprofis die Site­kontrolle aus der Hand und nutzen begeistert die neue Software. Nun entstehen Tausende von Websites mit dem­selben sche­ma­ti­schem Muster: rechteckige Strukturen, Content schachtelweise angeordnet. Die Krönung aller Neuerung ist der all­gegen­wärtige Topslider. CMS werden bleiben, aber muss deren Verwendung gleich zu erkennen sein? Der Bruch der Formgebung kann über dekorative Elemente erfolgen. Hier geht’s um den Kreis, den man immer häufiger sieht. Er ist der neutrale Nachfolger des Badges mit zackigem Rand. runde Sachen drehen →


19
Okt 11

Großer Auftritt mit großer Typo

Die Wahrheit als kommunistisches Manifest.In den guten alten Zeiten konnte sich nur die laute Nach­richt bei den Massen durchsetzen: die Machart aller Boulevard­blätter der Welt zeugt davon. Heut­zu­tage bezeichnet man sich eher nicht als Teil einer Masse. Man hat nicht das Gefühl, nur Teil von etwas zu sein (maximal Mitglied eines Teams), schließlich hat man einen persönlichen Mail- und einzigartigen Face­book­account.
Die Ächtung der Diktatoren und Schwächung von Ideologien verschiebt das Gewicht der gesell­schaft­lichen Entwicklung auf das Individuelle und so ent­wickelt sich auch die visuelle Kommunikation. Seltsamerweise zeigt sich eine Wiederkehr der großen Typografie in einem für diesen Bereich scheinbar unpassendem Medium, dem Web. Hier wurde traditionell um jeden Pixel Platz erbittert gerungen. Nun sollen riesige platzfressende Buchstaben untergebracht werden! Zum Glück sind Bildschirme allgemein größer geworden und Designer probieren erleichtert die neue XXL-Typo aus. Volle Dröhnung auf Sites →


28
Sep 11

Scrum in der Praxis

Webdesign kann zur unübersichtlichen Sache werden, insbesondere, wenn viele Menschen am Prozess beteiligt sind. Die großen (Un)bekannten wie: 1. der Kunde, 2. der Content, 3. das Ziel der Site, 4. der Internet Explorer bilden ständige Unsicherheitsfaktoren. Solide Planung und besser Übersicht sind gefragt. Toyota hat es zuerst möglich gemacht mit Kanban als einfachen Mana­ge­ment­instrument. Scrum ist in Folge in die Agenturen als Instrument agilen Software-Develop­ments entstanden. Florian aus der Sc03 hat mich auf die folgenden Filme zur Einführung aufmerksam gemacht—Danke!

Scrum Im Schnelldurchlauf V2.0

Scrum in einer Agentur →


22
Sep 11

Minimalismus im Webdesign

Minimalismus, oder Clean Design, Minimal Design ist aus Überdruss an bonbonfarbenen, glossy­poppigen Web-2.0 Designs entstanden. Man wollte den kitschi­gen Design-Trash einfach loswerden und existentia­listisch zum Grund der Gestaltung zurück­kehren. Gutes, minimalistisches Webdesign entsteht nicht nur aus dem Verzicht überflüssiger Dinge. Es ist mehr (auch wenn man weniger anstrebt) als das, denn je mehr man entfernt, desto genauer schaut das Auge hin. Es braucht viel Ausgewogenheit, Abstimmung der Farben (wenn vorhanden), sorg­fältige Balance der Typografie—insgesamt Hinterfragen jeden Details. Damit sind wir an der Basis des Design angelangt: Weniger ist mehr und: Form follows function. weniger kann mehr →


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 →


20
Aug 11

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 →


QR Code Business Card