Autor: empy

Gut zu wissen: Webdesigntrends 2010

Minimalistisches Design - Fortschritt oder Rückschritt?

Minimalistisches Design – Fortschritt oder Rückschritt? (Quelle: http://www.markenpersonal.de)

Nicht mehr lange, dann ist es getan. Das Jahr geht zu Ende. Überall beginnt es zu weihnachten. Die Zeit wird besinnlicher. Und uns stehen zahlreiche Jahresrückblicke ins Haus, bevor wir letzten Endes das neue Jahr willkommen heißen. Während der Eine noch über das vergangene Jahr mit all seinen Höhen und Tiefen sinniert, fiebert der Andere schon 2010 entgegen.

Auch im Web hat sich in den letzten Jahren durchaus viel getan. Web 2.0. Social Communities. eCommerce. Das spiegelte sich natürlich auch im Erscheinungsbild des www wieder. Altbekanntes wurde verbessert, neue Technologien ersetzten alte und ermöglichten ganz neue Vorgehensweisen der Web-Präsentation. Traditionen wurden über den Haufen geworfen, neue Trends entstanden.

Und auch für das neue Jahr 2010 gibt es Tendenzen und Richtungen, in die die Gestaltung geht. Zwar ändert sich nicht alles am 1. Januar, doch die Entwicklung vom Beginn des Jahres bis jetzt zeigt doch recht klar, in welche Richtung der Weg gehen könnte. Das reicht von der optischen Gestaltung, der Platzierung von Headern und übergroßen Footern bis hin zum erneut auflebenden Retro-Look der im Gegensatz zum einschlägigen Minimalismus steht.

Die Trends unterscheiden sich nicht von Grund auf von dem was 2009 aktuell war. Und was auch immer der Anwender, Designer oder Programmierer von den Trends halten mag, ob sie gefallen oder nicht, hängt sicherlich auch von persönlichen Faktoren ab. Dennoch wollen wir uns die Trends zumindest ansehen, um gewappnet zu sein, mitreden zu können und uns evtl. weiterzuentwickeln…

(mehr …)

Kategorien: Web-Design

Gut zu wissen: 5 Tips zur SEO

Beschäftigt man sich mit Webdesign, bemerkt man schnell, das das Geschäft weit über die Designarbeit hinausragt. Was verlangt wird ist mehr als das pure Look & Feel einer Website zu erstellen. Oft ist es wichtig, sich auch direkt um den Code fürs Front End zu kümmern.

Und das bedeutet, dass die Verantwortung der Suchmaschinenoptimierung (SEO) in die Hände des Webdesigners fällt. Dieses Thema geht jedoch am eigentlich Design Thema vorbei und fällt nicht zwingend unter die Kernkompetenzen eines Webdesigners.

Darum kommen hier ein paar nützliche Starter-Tips, die dem einen oder anderen unter euch helfen mögen. Viel Spaß! Kein Anspruch auf Vollständigkeit…

(mehr …)

Kategorien: Web-Design

Eine Site, viele Gesichter

Die Entwicklung von Websites bringt oft verschiedenste Probleme mit sich. Eines dieser Probleme: Die final umgesetzte und durchprogrammierte Site schaut im Browser irgendwie anders aus, als in der Entwicklungsumgebung.

Ansatz zur Problemlösung kann die Optimierung auf spezielle Browser sein. Doch derer gibt es viele. Wie schaut die Site in anderen Browsern aus, für die die Site nicht optimiert wurde? Welche Browser gibt es überhaupt und muss ich alle auf meinem Testsystem installiert haben?

BrowserShots. Check browser compatibility

BrowserShots. Check browser compatibility

browsershots.org schafft hier Abhilfe. Einfach Link zur Site (z.B. hochgeladen auf einen Testserver) eingeben, gewünschte Browser auswählen und staunen, wie entstellt die eigene Seite auf exotischen Browsern daherkommt – ganz ohne lästige Installation unbenötiger Browser. Versierte Anwender wählen noch Details wie Bildschirmgroße, Farbtiefe, Java-, JavaScript und Flash-Aktivierung aus.

Abschließend stehen die png-Screenshots als zip gepackt zum Download und Vergleichen bereit. So macht Optimierung Spaß!

Kategorien: Sonstiges Web-Design

Freistellen mit Photoshop – Tutorial 1: Haarige Angelegenheiten

Das Ausgangsbild - haarig schön! (Quelle: http://kwerfeldein.de)

Das Ausgangsbild – haarig schön! (Quelle: http://kwerfeldein.de)

Pünklich zum Start in das Wochenene will ich mit diesem Tutorial zeigen, wie man auf relativ schnelle und bequeme Art und Weise Haare mit Hilfe des Filters „Extrahieren“ freistellen kann.

Bevor wir durchstarten jedoch eine Anmerkung: Freistellen, egal welche Objekte man bearbeitet, ist und bleibt eine Arbeit, bei der man sehr viel Geduld braucht, will man es gut machen. Kein Objekt gleicht dem Anderen. Und je nach Hinter- / Untergrund des freizustellenden Objektes gibt es mehr oder weniger gute Vorgehensweisen. Dies gilt auch und vor allem für das Freistellen von Haaren.

Möglicherweise gibt es auch verschiedene Bezahl-Plugins und Filter. Heute allerdings stellen wir mit Photoshop-Bordmitteln frei. Auf geht’s!

Vorraussetzungen:

  • Adobe Photoshop
  • Filter „Extrahieren“ (in den neuen Versionen nicht per Standartinstallation mitgeliefert. Erhältlich auf CD oder hier für Windows und Mac)
  • Bild mit Haaren, Fell, Gras, etc.

(mehr …)

Kategorien: Tutorials

Visuelle Rhetorik – How-To 1: Schrift und Gestaltungsraster

Dieses How-To zeigt den sinnvollen Einsatz eines Gestaltungsrasters in Verbindung mit Typografie. Dabei steht das dazu verwendete Programm (z.B. Adobe InDesign, Adobe Photoshop) weniger im Vordergrund als der Leitfaden zur Gestaltung einer schnell wirksamen textlichen Informationsdarstellung.

Beim Website-Erstellungsprozesses stößt man früher oder später auf die Frage, welcher Inhalt kommuniziert werden soll. Ist dieser Inhalt bei Websites meist unterschiedlich, so gilt für dessen Gestaltung umso mehr das Gesetz des Screen-Designs. Wichtiges Merkmal hierbei: Der Inhalt muss einfach und präszise zu erfassen sein – die Kommunikation muss schnell funktionieren. Teil 4 der Reihe „Visuelle Rhetorik“ beschreibt, inwiefern Textgestaltung und Inhalt zusammenpassen müssen.

(mehr …)

Kategorien: Tutorials Web-Design

Visuelle Rhetorik – Tutorial 1: Extraktion einer Farbpalette

Stimmungsbild für eine Website mit Thema Kaffee

Stimmungsbild für eine Website mit Thema Kaffee

Das Tutorial zeigt Vorgehensweisen zur Extraktion und Reduzierung eines Farbschemas mit Adobe Photoshop CS3, wie man es für die Erstellung einer Website benötigt.

Im Laufe eines Website-Erstellungsprozesses stellt sich üblicherweise die Frage nach der farblichen Gestaltung der Web-Präsenz. Das Farbklima soll letztlich auch zur Botschaft, zur Aussage und zur Stimmung der Präsenz passen und diese unterstreichen. Im Teil 4 der Reihe „Visuelle Rhetorik“ wird beschrieben, inwiefern Stimmungsbilder zur Klima- und Farbschemafindung beitragen können.

(mehr …)

Kategorien: Tutorials Web-Design

Visuelle Rhetorik – Teil 4

Form und Farbe des Inhalts als Botschafter der Website.

Nach längerer Zeit persönlicher Abwesenheit folgt nun Teil 4 der Reihe. Ich habe mich entschieden, die Publikation über die Binnengliederung einer Website wegzulassen. Somit wird dies der vorerst letzte Teil der Reihe werden. Sollte der Wunsch nach Informationen über die Binnengliederung bestehen, kann ich einen entsprechenden Artikel natürlich nachliefern.

Die Website befindet sich nun in einem Stadium, in welchem die Eckpfeiler bereits gesetzt sind. Die Grenzen der Site sind gezogen. Was folgt, müssen Inhalte sein. Dabei soll nicht erklärt werden, wie man zu Inhalten kommt (denn diese sollten – wie wir wissen – längst feststehen). Vielmehr geht es um die Frage, wie Inhalte auf gestalterischer Ebene aufbereitet werden können. Wie kann Inhalt aussehen? Inhalt und Form müssen zusammenpassen und rhetorisch überzeugen.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 3

Die Navigation als Buchrücken der Website.

Nach längerer Pause ist es wieder soweit. Wie bereits in Teil 2 angekündigt, handelt dieser Teil der Reihe von Fragen und Gedanken zum Thema Navigation. Doch was ist bisher geschehen?

  • aus der Idee einer Website wurde ein zielgruppenfokussiertes Konzept
  • das Konzept besteht aus mindestens einer Kernbotschaft und berücksichtigt die Interessen der Zielgruppe(n)
  • die Interessen der Zielgruppen werden gemäß Pathos, Ethos und Logos bedient

Dem Verantwortlichen einer Webpräsenz ist klar geworden, was er mit der Site kommunizieren will, wen er damit erreichen will und wie er dies am Besten anstellt. Ihm ist klar, welche Inhalte er benötigt und wie die Site gestaltet sein soll. Doch es fehlt die Verbindung zwischen beiden Elementen. Wie müssen die Informationen erreichbar sein, damit der User sie auch findet? Wie lässt sich eine gute Erreichbarkeit der Informationen mit der Gestaltung vereinbaren, oder gar verknüpfen?

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 2

Das Layout als Sprache der Website.

Im Teil 1 der Reihe haben wir erfahren, dass eine Website als Kommunikationsmittel direkt auf die Interessenten der Site ausgerichtet sein sollte. Nur so kann sie die Aufmerksamkeit der Leser im Dschungel des World Wide Web auf sich ziehen. Und erst dann kann der Leser zum Empfänger der Botschaft werden. Der Empfänger, sprich Webanwender, „hört“ was die Website „zu sagen hat“.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik – Teil 1

Die Website als Kommunikationsmittel.

Um eine funktionierende Website optimal zu gestalten, ist ein Grundverständnis des Kommunikationsmodells nötig. Im einfachsten Fall findet Kommunikation demnach immer zwischen einen Sender und einem Empfänger statt. Der Sender, beispielsweise eine Website, übermittelt Botschaften an den Empfänger. Der Empfänger nimmt die Botschaften auf, verwertet sie und anwortet im besten Fall.

(mehr …)

Kategorien: Web-Design

Visuelle Rhetorik

„Inhalte werden schnell vergessen. Doch der emotionelle Eindruck guten Designs bleibt stabil.“
Wolfgang Beinert, 2000, beinert.net

Eine gute Website ensteht nicht über Nacht. Viele Websites schauen traumhaft aus, sind aber inhaltlich völlig verschlafen. Zudem sind die Präsenzen oft nutzbar und gehen am Grundanliegen eines Users vorbei.

Deshalb liefern die regelmäßig folgenden Artikel allgemeine Tipps und Tricks, zum Einen was die Gestaltung visueller Medien betrifft, aber auch How-To’s für die praktische Umsetzung der Gestaltung.

Teil 1: Die Website als Kommunikationsmittel.

Teil 2: Das Layout als Sprache der Website.

Teil 3: Die Navigation als Buchrücken der Website.

Teil 4: Form und Farbe des Inhalts als Botschafter der Website.

Tutorial 1: Extraktion einer Farbpalette.

How-To 1: Schrift und Gestaltungsraster

Design is a good idea.

Kategorien: Web-Design