Menü

News & Blog gefiltert nach: Webdesign

 

Achtung Stockfotografie! - Oder wie man Stockfotos richtig einsetzt.

geschrieben am: 25.09.2014 17:53:47 Uhr, Typ: Blog
Tags zu diesem Artikel: Fotos Stockfotos Kreativität Design Webdesign Bilder

stock

Achtung Stockfotografie! - Oder wie man Stockfotos richtig einsetzt.
Welcher Screendesigner, Redakteur oder Webdeveloper kennt es nicht? Das Layout steht, die in der Konzeption eingesetzten Platzhalterbilder sind nach wie vor als Relikte der ersten Tage (sie werden später ja noch ausgetauscht) vorhanden und der Kunde liefert kein passendes Bildmaterial. In einer Traumwelt würde sich jeder Kreative nun ein Fotoshooting wünschen und das passende Motiv kurzerhand selber shooten oder zumindest shooten lassen. Doch da wir nicht in einer Traumwelt leben, sieht die Realität leider oft anders aus. Der Kunde hat kein Bild, das die Thematik unterstreicht, und ebenfalls kein Budget für ein Shooting, sodass wir uns in eines der Stockarchive begeben müssen...


Und hier beginnt die Hölle - Es erwarten uns typische Stockfotos, denen man sofort ansieht, dass sie nicht real sind, die übertrieben wirken, die seltsame Effekte aufweisen oder die unbrauchbar freigestellt sind. Ich frage mich stets wenn ich solche Bilder sehe:

Was hat sich der Fotograf bei diesem Bild gedacht? Das kann ein Mensch mit visuellem Gespür man doch nicht ernst meinen...


Doch zum Glück gibt es zwischen diesen ganzen negativen Beispielen auch durchaus sehr gute Bilder. Meine Kollegin Sina machte mich in den letzten Tagen auf eine sehr gelungene Präsentation zu diesem Thema aufmerksam. Chris Kubbernus hat diese auf Slideshare geteilt und zeigt eindrucksvoll, dass nicht alle Bilder in Stockarchiven schlecht sind. Es kommt viel mehr darauf an, welche Stockbilder ausgewählt werden. Und somit liegt es schlussendlich an uns, den Gestaltern, den Kreativen, den Kundenberatern, die richtigen Bilder auszuwählen (und die schlechten Bilder in der Hölle zu lassen). In der Hoffnung die Welt durch etwas zu verbessern folgt nun die angesprochene gelungene Slidesharepräsentation:

 

Stefan Borchert - 25.09.2014 17:53:47 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Mobile First? Oder doch lieber nicht? Vor- und Nachteile beider Methoden!

geschrieben am: 12.08.2013 07:26:16 Uhr, Typ: Blog
Tags zu diesem Artikel: Mobile Smartphone Responsive Webdesign Webdesign Tablet Kreation Mobile First

mobilefirst

Als Art Director digital habe ich täglich mit responsive Layouts zu tun und unterhalte mich entsprechend nahezu täglich mit Entwicklern, anderen Designern und Konzeptern über Projektvorgehen und Prozesse. Eine Frage, die sich immer wieder stellt ist, ob ein Designprozess Mobile First angelegt werden sollte oder nicht. Der folgende Artikel wird sich mit genau dieser Thematik beschäftigen, da es für den Mobile-First und den Desktop-First-Ansatz entscheidende Vor- und Nachteile gibt.


Bedeutung von Mobile
Ich denke, dass man sich inzwischen nicht mehr über die Bedeutung des mobilen Internets streiten braucht. Jeder Smartphonenutzer wird sein Gerät schon genutzt haben, um im Internet Informationen nachzuschlagen. Es gibt viele Zahlen da draußen, die die Wichtigkeit der mobilen Internetnutzung belegen wollen, doch sollten wir bei alle Euphorie nicht vergessen, dass auch der klassische Desktop nach wie vor einen großen Anteil an den Zugriffen auf Webseiten und Portale hat und auch in Zukunft haben wird. Die wenigsten von uns werden in absehbarer Zukunft komplett auf einen Desktop-Zugang (wobei ich hier auch Laptops meine) im privaten UND beruflichen Leben verzichten.


Groß denken? Klein Denken?
Wenn wir nun an responsive Layouts denken, so sollte eine Website für alle Geräte optimiert sein. Das heißt ein Designer hat per se das große Problem, dass ein Layout nie fixiert es. Es befindet sich immer im Fluss und sollte in der Entwicklung für alle Größen optimiert werden – das klassische „optimiert für“, das vor ein paar Jahren unter jeder zweiten Website zu finden war, gibt es nicht mehr. Ein responsive Webdesign ist immer optimiert.
Doch wo beginnen wir Designer mit unserer Gestaltung? Wo beginnt ein Programmierer mit der Programmierung? Gehen wir vom Maximum aus und laufen Gefahr, dass wir das Maximum mobil nicht mehr reduziert bekommen, oder gehen wir vom Minimum aus und stehen vor dem großen Problem, dass unser Layout in einer größeren Auflösung emotionslos und langweilig wirkt? Beide Wege verlangen das Mitdenken und eine Vision für die weiteren Auflösungen, um den gerade beschriebenen Problemen aus dem Weg zu gehen.


Mein Weg
Ich persönlich bevorzuge es zuerst von der Desktopvariante auszugehen. Jedes kleine Detail zu planen und die Maximalausprägung zu visualisieren. Die mobile Umsetzung jedoch stets im Blick. Der Breakdown geschieht in der Regel durch ein umsortieren der Elemente, was durch ein starkes flexibles Raster möglich ist (am Besten ein vielfaches eines 4er Rasters – damit man Desktop 1 – 4, Tablet 2-2 und mobile 4-1 darstellen kann). Die Desktopvariante gibt mir als Designer den größten möglichen Spielraum, den ich für meine Kreationen benötige und gibt den Layouts einen individuellen persönlichen Touch. In der Reduktion für Mobile kann entschieden werden, ob beispielsweise eine Hintergrundtextur oder andere Schmuckelemente, die auf dem gesonderten Medium nicht funktionieren, herausfallen.


Wie geht ihr vor? Welchen Weg bevorzugt ihr?

Stefan Borchert - 12.08.2013 07:26:16 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Designtrends: Authentically digital vs. Skeuomorphism Design

geschrieben am: 26.01.2013 17:13:47 Uhr, Typ: Blog
Tags zu diesem Artikel: Authentically digital Skeuomorphism Design Design Gestaltung Webdesign Windows 8 Apple Trends

Als Designer beschäftigt man sich viel mit Trends und Gestaltungstheorien. Was ist zur Zeit aktuell - welche Designströmungen beeinflussen zur Zeit die Community und was wird eigentlich als modern wahrgenommen? Aus diesem Grund möchte ich nun zwei gegensätzlich, gleichzeitig jedoch hoch moderne Designströmungen vorstellen: "Authentically digital" und "Skeuomorphism Design"


Was ist Authentically digital ?
Das Designprinzip des "Authentically digital" besagt, dass das digitale Produkt für sich stehen kann und eine Nachahmung der Realtität nicht benötigt. Das digitale Produkt - also zum Beispiel eine App, eine Website etc. - steht zu seinem digitalen Aussehen und seiner digitalen Nutzung. Eine Nachahmung von Produkten aus der Realität wird nicht benötigt.
Das noch relativ frische Betriebssystem Windows 8 stellt das Designprinzip des Authentically digital als eine der Hauptdesignrichtlinien in den Fokus der Gestaltung. Die inzwischen weltweit bekannte "Windows 8 UI" (ehemals "Metro UI") erinnert somit an keine realen Objekte, sondern setzt sich aus digitalen Flächen zusammen.
Doch auch im Webdesign bedienen sich viele Seiten diesem Designtrend. Ein Beispiel aus dem Web ist die sehr gelungene Präsentation der Google-Datencenter. Das frische Kacheldesign verzichtet auf unnötige Schatten und sonstige Analogien zur realen Welt.


 Google Datencenter
Screenshot: Google Datencenter-Website (Stand 20.01.2013, Link)


Doch auch andere bekannte Brands haben sich für den "Authentically digital" Designansatz entschieden. So hat beispielsweise die BBC bei Ihrem Sender-Relaunch vor wenigen Wochen ebenfalls ihr Erscheinungsbild in den digitalen Medien überarbeitet. Die Website ist hierbei ebenfalls sehr stark dem Gedanken der Reduktion und der digitalen Fläche unterworfen. (Update: Auch die Seite des ZDF ist, obwohl sie sehr unterschiedlich in der Gestaltung zum BBC-Design ist, "Authentically digital".)


Und was ist nun "Skeuomorphism Design"?
Unter dem Begriff "Skeuomorphism Design" versteht man ziemlich genau das Gegenteil des "Authentically digital". Hier lehnt sich die Gestaltung sehr stark an vorhandene reale Objekte an. So wird ein E-Book-Reader als Bücherregal, eine Kalenderfunktion als Taschenkalender oder eine Darstellung der Uhrzeit als Wanduhr gestaltet. Der Nutzer erlernt die Bedienung an Hand der für ihn bekannten Objekte.
Apples Betriebssystem iOS ist sehr stark mit Elementen "Skeuomorphism Design" durchzogen. Doch auch viele Webseiten greifen auf dieses Gestaltungsprinzip zurück. So sind Warenkörbe meist als Einkaufstüten gestaltet oder schriftliche Kontaktmöglichkeiten mit einem Brief symbolisiert.


 Burgerking
Screenshot: Produktpräsentation des "Whopper" auf der Burgerking Website (Stand 26.01.2013, Link)


Burgerking nutzt zur Präsentation seiner Produkte neben einer Medienbühne ein aufgeschlagenes Kochbuch. Der Kochbuchcharakter wird durch angehängte Zettelchen, die mit Büroklammern befestigt sind verstärkt.


Schlusswort
So unterschiedlich die beiden Designtrends sind, so interessant ist es jedoch diese gegensätzlichen Gestaltungsarten zu betrachten. Es gibt Verfechter beider Trends - doch kommt es schlussendlich immer darauf an, ob und wie einer dieser Trends zu einer Marke, Person etc. passt. Einen Trend nur des Trends halber mitzugehen macht im Design ebenso wenig Sinn wie in der Mode.


Preisfrage zum Schluss: Na, welchen Designtrend greift meine Website hauptsächlich auf?

Stefan Borchert - 26.01.2013 17:13:47 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Google Web Fonts in neuem Look

geschrieben am: 17.07.2011 11:31:07 Uhr, Typ: Blog
Tags zu diesem Artikel: Google Google Web Fonts Fonts Typografie Webdesign

Das freie Web-Font-Verzeichnis von Google hat einen neuen Anstrich bekommen. Nachdem ich das neue Verzeichnis entdeckt hatte, schaute ich in den Web-Font-Blog der Suchmaschine und konnte feststellen, dass die neue Version nun seit ca. einer Woche online ist.
Die 198 Schriften, die derzeit im Verzeichnis zur Verfügung stehen, können nun in einem neuen Interface genutzt werden. Hauptfeature ist, dass der Nutzer Anzeigeparameter (z.B.: Schriftgröße) auswählen kann und anschließen die Schriften im direkten Vergleich sieht. Eine deutliche Verbesserung im Vergleich zur Vorgängerversion, die die Auswahl der gewünschten Schrift erleichtert.


Das neue Webfonts


Ich denke weitere Worte zum Web-Font-Verzeichnis sind nicht nötig, da die meisten eh wissen, worum es geht. Schaut euch das neue Verzeichnis einfach mal an.

Stefan Borchert - 17.07.2011 11:31:07 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Eine Website aus Schokolade

geschrieben am: 20.06.2011 15:05:12 Uhr, Typ: Blog
Tags zu diesem Artikel: Marketing Webdesign Kreativität

Die portugiesische Brauerei Sagres hat ein Bier mit Schokoladengeschmack auf den Markt gebracht und anlässlich dieser ungewöhnlichen Markteinführung eine Website aus Schokolade bei einem Konditor entwerfen lassen. Die Chocolatiers haben die komplette Website individuell (also jedes Einzelteil) aus Schokolade geformt. Im Anschluss wurden die Werke fotografiert und mit Webtechnologien auf dem Bildschirm erlebbar gemacht.


Website aus Schokolade


Das folgende Video zeigt die Herstellung der Schokoladenwebsite. Ich bin echt beeindruckt. Was meint ihr? Ich freue mich über Kommentare!

 

Stefan Borchert - 20.06.2011 15:05:12 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Das neue Twitter - Ein Testbericht

geschrieben am: 22.09.2010 18:18:16 Uhr, Typ: Blog
Tags zu diesem Artikel: Twitter Rebrush Design Webdesign Microblogging

Wie ihr durch meine Tweets wisst wurde mein @deutschemarken bereits auf das neue Design umgestellt. Da nun von einigen meiner Follower Interesse an einem Testbericht bekundet wurde möchte ich diesen nun präsentieren:


Das neue Interface von Twitter wirkt bereits auf den ersten Blick deutlich moderner als das alte Design. Die Farbkombination, die einem beim Start begrüßt ist nach wie vor so, wie der Nutzer sie gewählt hat und mit dem persönlichen Hintergrund versehen. Die Website ist nun in zwei Teile getrennt. Der erste Teil stellt die Timeline dar, welche nahezu identisch zum alten Design ist. Der zweite Teil, der früher nur ein farblich anpassbarer Streifen war, der die Follower, Trends usw. präsentiert hat, ist um einiges breiter geworden.
Start
Jeder Tweet ist mit einem Pfeil versehen, der eine Art Mini-Timeline (letzten 4 Tweets – 1. groß, 2-4 kleiner darunter) des ausgewählten Twitterusers in den rechten Teil der Website lädt. Auf diese Art und Weise bleibt die eigene Timeline links im Blick und rechts kann entspannt die Timeline des Anderen begutachtet werden. Twitpics, YouTube-Videos und weitere weiterführende Inhalte werden an dieser Stelle auch sofort angezeigt, sodass Twitter nicht verlassen werden muss.
Tweet
Tweet
Alle Aktionen auf Twitter werden durch flüssige Animationen begleitet, sodass es Freude macht auf der Website zu surfen und Inhalte in den verschiedenen Spalten zu öffenen. Das oben beschriebene Navigationskonzept, bei dem Inhalte in den verschiedenen Spalten geladen werden, lässt die Seite nicht nur moderner wirken, sondern bietet eine echte Alternative zu verschiedenen externen Twitterclients.


Das offizielle Video zum neuen Design:

 

Stefan Borchert - 22.09.2010 18:18:16 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Amnesty Internetional bringt Licht ins Dunkle

geschrieben am: 03.03.2010 20:16:15 Uhr, Typ: Blog
Tags zu diesem Artikel: Folter Amnesty Internetional Webdesign

Light_the_Dark

Unter dem Titel „light the dark“ oder „bring Licht ins Dunkle“ hat Amnesty International eine sehr emotionale Microsite publiziert, die auf Folter und Verletzungen der Menschenrechte in die Öffentlichkeit rücken sollen. Der Nutzer der Website bringt indem er ein Feuerzeug anzündet Licht ins Dunkle und wird Zeuge einer Foltersituation, die durch das Zünden des Lichtes aufgedeckt und beendet wird.
Die Emotionalität der Website ist überwältigend. Die Videos regen zum Nachdenken an und bringen mit dem Eindringlichen Statement, dass Amnesty International in 50% aller Staaten der Welt Folter dokumentieren konnte den gewünschten Effekt.
Es handelt sich also um ein trauriges Thema, das brillant in Szene gesetzt ist ohne dabei zu hart zu werden, jedoch ebenso wenig zu verheimlichen. Somit lohnt sich ein Besuch der Seite sowohl gestalterisch als auch menschlich, um über die eigene Situation und Situationen anderer Mitmenschen zu reflektieren.

Stefan Borchert - 03.03.2010 20:16:15 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook

Webdesign einfach mal weggelassen

geschrieben am: 22.01.2010 20:16:13 Uhr, Typ: Blog
Tags zu diesem Artikel: Passagen Köln Fail Webdesign

Die Aufgaben für die am Montag bevorstehenden Abgaben der Semesterarbeiten lichten sich. So kam ich auf die Idee evt. am Sonntag die Passagen in Köln zu besuchen, die am Sonntag ebenfalls enden. Für alle, die die Passagen nicht kennen denen sei so viel erklärt: Bei den Passagen handelt es sich um eine Veranstaltungs- und Ausstellungsreihe, der sich zahlreiche Künstler und Designer angeschlossen haben und Arbeiten präsentieren. Also durchaus ein sehr interessante Sachen, die gezeigt werden und deren Besuch sich in der Regel lohnt. Ein Blick über den eigenen Tellerrand kann schließlich niemals schaden.
So begab ich mich auf die Suche nach einem Programm und strandete auf der Website der Organisatoren. Doch was musste ich feststellen? Die Passagen verzichten auf Webdesign! FAIL! Ausgerechnet bei einer Veranstaltungs- und Ausstellungsreihe über Kunst und Design darf so was nicht passieren.
Nur um das Klarzustellen: Ich habe nichts gegen eine schlichte Gestaltung – ganz im Gegenteil ich liebe es an vielen Stellen. Das Minimalistische hat seine Reize aber eine Website die zu großen Teilen aus Tabellen besteht und mehrere Scrollbalken für die verschiedenen Inhalte benötigt darf in meinen Augen keine Kunst- und Designveranstaltung repräsentieren.

Stefan Borchert - 22.01.2010 20:16:13 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook