Hier ein kleines aber feines Script welches wir für unser Projekt Stokedcamps.com programmiert haben und eine Google konforme Sitemap mit Links und Bilder ausspuckt. Ihr könnt selbstverständlich das Script frei verwenden, wie es auch erweitern.

Die 5 Schritte zum Glück:

1. Script in Texteditor kopieren und als sitemap.php abspeichern.
2. Entweder Informationen hardcodiert integrieren oder aus einer Datenbankabfrage / Array abfüllen
3. File im Root Verzeichnis (httpdocs) abspeichern. Das File muss beschreibbar sein.
4. Das File via Browser aufrufen, dadurch wird die Datei sitemap.xml generiert.
5. Das Ergebnis sollte wie folgt aussehen: http://webdesignlovers.ch/lab/sitemap/sitemap.xml

<?php

// Create XML
$dom = new DomDocument("1.0", "UTF-8");

// Create urlset
$urlset = $dom->createElement('urlset');

// Set urlset attribute
$urlset->setAttribute('xmlns', 'http://www.sitemaps.org/schemas/sitemap/0.9');
$urlset->setAttribute('xmlns:image', 'http://www.google.com/schemas/sitemap-image/1.1');

 

// set url element
$url = $dom->createElement('url');

// Add URL
$url->appendChild( $dom->createElement('loc', 'http://example.com/sample.html') );

// Add Images
$image = $dom->createElement('image:image');
$image->appendChild( $dom->createElement('image:loc', 'http://example.com/image.jpg') );
$image1 = $dom->createElement('image:image');
$image1->appendChild( $dom->createElement('image:loc', 'http://example.com/image.jpg') );

$url->appendChild( $image );
$url->appendChild( $image1 );

$urlset->appendChild( $url );
$dom->appendChild( $urlset );

$xmlData = $dom->save("sitemap.xml");

?>

Sitemap erweitern

Wenn ihr die Sitemap mit zusätzlichen Informationen ausstatten möchtet, wie beispielsweise Video, Mobile oder News-Informationen, dann schaut ihr am besten mal in die Sitemap-Guidelines von Google. Eine Richtlinie ist beispielsweise, dass nicht mehr als 50’000 Links pro Sitemap enthalten sein dürfen. Sitemaps können dann aber auf verschiedene Sitemaps gesplittet werden.

Bei Fragen – just aks!

Inspiration von Websites, von weiss auf schwarz bis farbig und alles dazwischen – von minimalistisch zu maximalistisch, von HTML 4 zu Google Chrome Experiment – dabei ist bestimmt für jeden was. Lasst euch inspirieren!

Lorenzo Verzini

Wildlife

NZ Opera

Beatbox Academy

Caava Design

adidas Snowboarding

Jack Hughes

Like There Is NØ TØmØrrØw

RVLT / revolution

Universeries

Revolver

Blast

David McGillivray

 Kroeher

Brice Martinez

ASCII Street View

Sennep

Vers Le Bas

Nick Jones

We work on sunday

Fear the Grizzly

Teacake Design

Spin wurde 1992 von Tony Brook und Patricia Finegan gegründet. Die Londoner Agentur arbeitet im digitalen wie auch im analogen Bereich und legt grossen Wert auf Typografie und klar definierte, reduzierte Designs.

Hinter Spin stecken Patricia Finegan, welche einen Abschluss in Design Management der University of Arts in Dublin in der Tasche hat und kurz darauf nach London gezogen ist. Kennengelernt hat sie dort: Tony Brook, welcher unter anderem an dem Somerset College of Arts and Technology in Taunton studierte und mittlerweile national wie international selbst Vorlesungen hält. Er wurde zudem 2006 in die Alliance Graphique Internationale aufgenommen, welche als eine der angesehensten und einflussreichsten Organisationen der Grafik-Industrie gilt.

Weiter Informationen zu Spin findet ihr hier: spin.co.uk

 Herb Lubalin

Delfina Foundation

Kwadraat Bladen

Matthew Hilton

Design Museum Shop

Projekt

 Seymours

Terence Conran Exhibition

Proa Mexico Exhibition

Print Magazine

Retina Displays und das Zoomen von Inhalten auf iPhone und iPad zwingen uns je länger denn mehr dazu, hochauflösendes Bildmaterial zu verwenden, um die Bilder noch scharf auf allen Bildschirmen erscheinen zu lassen. Immer öfter fallen uns Websites auf, die Icon Fonts verwenden, um Layout-Elemente wie Buttons, Icons, Logos schriftbasiert darzustellen.

Die Vorteile sind offensichtlich, sie basieren auf Vektoren und können ohne Probleme mit CSS und JavaScript vergrössert, verkleinert, animiert oder umgefärbt werden. Wir haben euch nachfolgend eine Sammlung von interessanten Icon Fonts zusammengestellt, die allesamt kostenlos heruntergeladen werden können. Einige davon sind bereits als Fontface Packet erhältlich, andere Schriften könnt ihr einfach mit dem FontSquirrel FontFace Generator umwandeln und auf euren Websites einbinden. Wenn Ihr weitere Quellen kennt – her damit in den Kommentaren.

Pictonic

Download

 Foundation

Download

Modern Pictograms

Download

Fontfabric

Download

 Iconic

Download

Notice

Download

Symbolix

Download

Monsterz

Download

Cool Stuff

Download

 Heydings Icons

Download

Entypo

Download

Typicons

Download

The Noun Project

Download

 Glyph Icons

Download

Auf der Suche nach Inspirationen im Netz, ist uns aufgefallen, dass uns besonders viele Skandinavische Agenturen und Designer ansprechen. Die reduzierten Formen und Farben, der schöne Einsatz von Typografie und Bild führt uns in die Designwelt von Norwegen, Schweden und Dänemark.

Joakim Norman

Public Class

Reklamebyrået NeoLab

Autokuume

Christian Elgvin Studios

Carabi + Co

Formfett

Anders Højland Mikkelsen

Mustache

Jack Morris

Inzeit

Asko Salminen

Playtype

Crille Lampa

Kantt

Unfold

Bärnt & Ärnst

Rickard Sund

Gustaf Törling

Ken Pils

Mathias Sterner

Wenn man sich die minimalistischen und cleanen Webdesigns anschaut, muss man unweigerlich an die Pioniere des sogenannten Swiss Graphic Designs denken. Damit meinen wir Schweizer Typographen und Grafiker wie Max Bill, Jan Tschichold oder Adrian Frutiger um nur einige zu nennen.

Deshalb haben wir uns gedacht – anstatt Webdesigns zu zeigen, welche sowieso inspiriert durch diese Jungs sind, lassen wir für einmal die Vorreiter dieser Kunstform aufs Parkett. Bei der Recherche haben wir sehr spannende Inspirationen entdeckt die man 1:1 in heutigen Designs verwenden könnte.

Max Bill

Jan Tschichold

Adrian Frutiger

Melk Imboden

Josef Müller-Brockmann

Max Huber

Hans-Rudolf Lutz

Ajax-Anwendungen sind enorm beliebt, dank der Kombination von PHP und JavaScript lassen sich Inhalte dynamisch und ohne Seitenrefresh laden. Dies hat enorm viele Vorteile, wie beispielsweise bessere Usability da invdividuell auf Events und Klicks eingegangen werden kann.

Zudem können die entsprechenden Inhalte mit Effekten ein- und ausgefadet, getoggled oder geslidet werden. Lange war eines der Probleme die lesbaren URL’s, jedoch gehört es mittlerweile zum Standard der meisten Ajax-Webseiten, dass die URL’s via Marker trotzdem lesbar werden.

Beispiel: http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/#!about

Einer der grössten Problem blieb jedoch sehr lange bestehen. Nämlich die Tatsache, dass jegliche Inhalte welche über JavaScript geladen werden, nicht von Google indexiert werden können. Das Problem liegt an den Crawlern, diese laden jeweils eine HTML-Website, speichern deren Sourcecode und analysieren deren Inhalt. Jedoch sind sie nicht fähig JavaScript zu laden und dessen Inhalt auszulesen.

Nun hat uns Google endlich die Möglichkeit gegeben, dank einem Workaround, die Inhalte von Ajax-Anwendungen trotzdem indexieren zu lassen. Dies wird viele freuen. Wir zeigen euch wie ihr es machen könnt:

Wie funktioniert der Crawler von Google?

Grundsätzlich ziemlich simpel. Der Google-Crawler landet auf eurer Website. Dieser erkennt aufgrund eines speziellen Metatags, dass er sich auf einer Ajax Website befindet. Der Robot crawlt nun alle Links und formatiert diese Links temporär zu einem sogenannten escaped_fragment. Klingt kompliziert, ist es aber nicht.

Beispiel:

Der Crawler erhält folgenden Link:

http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/#!about

und macht daraus:

http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/?_escaped_fragment_=about

Auf dieser Seite erstellt er nun einen Snapshot des Inhalts und verlinkt ihn mit dem Ajax-Link.

Wie kann man das nun in seiner eigenen Website implementieren?

Also einerseits möchten wir euch einen einfach Regel-Guide anbieten und anderseits haben wir eine Demo Website erstellt. Die HTML-Files könnt ihr am Ende des Artikels zudem herunterladen.

Regel 1

Ihr müssten vor dem Marker jeweils ein Ausrufezeichen setzen, damit Google dessen Link als sogenanntes URL-Fragment erkennen kann.

Beispiel: http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/#!about

Regel 2

Ihr müssten folgenden Metatag im Header der Website setzen:

<meta name="fragment" content="!" />

Regel 3

Ob der Inhalt von Google korrekt interpretiert werden kann, überprüft man am besten mit dem Webmaster Tool von Google. Man kann dort die entsprechende URL angeben und erhält innerhalb weniger Sekunden die Information, wie Google den Inhalt “gefetcht” hat. Bei unserem Beispiel sieht das beispielsweise so aus:

Der Inhalt wird also trotz der Angabe des folgendes Ajax-Links:

http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/#!about

korrekt gecrawlt .Denn der Robot erkennt den Ajax Link und ruft folgende URL auf:

http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google/?_escaped_fragment_=about

Code

Mit jQuery kann auf einfache Weise der Inhalt per Anker, aber auch via dem URL-Fragment verarbeitet werden. Der Inhalt muss dadurch nur einmal erfasst werden.

var escapedHash;

function findHash() {

if(window.location.hash) {
escapedHash = window.location.hash.replace("#!", "");
$.get("php/content.php?_escaped_fragment_=" + escapedHash, function(data) {
$("#content").html(data);
});
}
}

$(document).ready(function() {
findHash();
});

$(window).bind('hashchange', function() {
findHash();
});

Das geladen PHP-File wählt ruft dann den entsprechenden Inhalt auf:

<?php

$hash_frag = $_GET['_escaped_fragment_'];

$content = array(
"home" => "Inhalt Home",
"about" => "Inhalt About",
"contact" => "Inhalt Contact"
);

if(isset($hash_frag)) {
echo $content[$hash_frag];
}

?>

Wie das ganze in Action aussieht, könnt ihr euch hier anschauen:

http://webdesignlovers.ch/lab/please_index_my_ajax_mr_google

Alle verwendet Files (HTML, CSS, JavaScript, PHP) könnt ihr gezippt hier herunterladen und frei verwenden. Bitte beachtet, dass dieser Code nicht für den Produktiv-Einsatz geeignet ist und unbedingt dafür optimiert werden sollte. Falls ihr Fehler im Code entdeckt oder Fragen auftauchen, meldet euch bitte in den Kommentaren.

Wordpress Themes gibt es wie Sand am Meer, doch bei unserer Recherche ist uns aufgefallen, dass die meisten Blog lediglich noch auf Premium-Themes verlinken und dem wollen wir nun Abhilfe schaffen.

Wir möchten euch kostenlose, alternative Themes vorstellen die den kostenpflichtigen Themes in nichts nachstehen, im Gegenteil, wir sind auf erstaunlich viele Responsive Designs gestossen. Unseren Fokus haben wir besonders auf minimalistische, simple und cleane Themes gerichtet. Wenn ihr weitere kostenlose Themes kennt, sagt es uns im Kommentar!

Imbalance

Das Imbalance WordPress Theme bietet ein schönes Gewand für Portfolio Seiten. Die Vorschaubilder werden gross und übersichtlich dargestellt und die Subseiten werden mit einem schicken Toggle-Effekt eingeblendet. Das Theme könnt ihr kostenlos hier herunterladen.

Demo | Download

 Origin (Responsive)

Origin bietet ein kostenloses WordPress Theme mit viel Weissraum und einem übersichtlichen zweispaltigen Layout. Grossartig daran ist zudem, dass ganze als Responisve Theme gebaut wurde. Ihr könnt euch das hier gerne anschauen.

Demo | Download

 Grid Portfolio

Das Grid Portfolio WordPress Theme bietet ein 3 spaltiges Layout zur Darstellung seiner Portfolio-Bilder. In der Detailansicht werden die Bilder gross und mit viel Weissraum angezeigt. Ihr könnt dieses gerne hier testen.

Demo | Download

Unique & Responsive

Das kostenlose Unique & Responsive Theme wurde für Portfolios und kreative Blogger entwickelt. Das Responsive Design passt sich je nach Bildschirmgrösse an, also egal ob Tablet oder iPhone, deine Website wird überall passend dargestellt. Hier anschauen.

Demo | Download

Feijoa

Das kostenlose Feijoa WordPress Theme basiert auf einem 4-Spaltigen Layout und wirkt mit seiner Anordnung und Farbe sehr angenehm und beruhigend. Schaut es euch hier an.

Demo | Download

 Euclides

Euclides ist das perfekte WordPress Theme für alle die online Tutorials schreiben. Integriert ist ein Syntax-Highlighter und die Download- und Demo Links werden generiert. Natürlich kann das kostenlose Theme aber auch als normaler Blog verwendet werden. Schaut euch hier eine Demo an.

Demo | Download

GRiD (Responsive)

Das GRiD WordPress Theme ist modern und minimalistisch. Perfekt für alle Illustratoren, Fotografen und Grafik-Designer die den Fokus lieber auf ihren Arbeiten als auf dem Theme haben wollen. Zudem ist das Theme im Responsive Design umgesetzt. Somit passt sich das Design der aktuellen Bildschirmgrösse an. Hier checken.

Demo | Download

Laelia

Das kostenlose Lealia Template bietet ein sehr einfaches und reduziertes Design mit warmen Farben und einem grossen Headerbild. Der Inhalt ist zweispaltig aufgebaut. Schaut es euch hier an.

Demo | Download

Studio Dessign

Das Studio Dessign WordPress Theme bietet ein links ausgerichtetes Layout, minimalistisch mit viel Weissraum und Fokus auf Portfolio Bilder. Schaut es euch hier an.

Demo | Download

Hatch (Responsive)

Das kostenlose WordPress Theme Hatch bietet ein simples und cleanes Responsive Design also Fotografie- und Portfolio Theme. Das Layout passt sich der entsprechenden Bildschirmgrösse optimal an. Hier ansehen.

Demo | Download

Mono

Das Mono WordPress Theme bietet enorm viele Möglichkeiten. Ein integrierte Slideshow sowie 2 bis 4-Spaltige Layouts, Shortcodes, Dropdowns und vieles mehr. Hier Demo anschauen.

Demo | Download

Simple Grid (Responsive)

Das kostenlose Simple Grid WordPress Theme bietet ein auf einem Grid basiertes Theme, optimal für Portfolio Seiten. Das Design ist Responsive und passt sein Layout automatisch der entsprechenden Display Grösse an. Anschauen.

Demo | Download

Gridly. (Responsive)

Das Gridly WordPress Theme bietet ein Grid-basiertes Theme welche die Artikel ähnlich wie bei Pinterest darstellt. Die Anzahl Spalten verändern sich je nach Bildschirmgrösse, egal ob Tablet oder iPad, die Website sieht immer passend aus. Hier anschauen.

Demo | Download

Balloons (Responsive)

Das kostenlosen Balloons Theme bietet ein sehr einfach, aber verspieltes Layout mit einem schicken Effekt der Ballone im Hintergrund. Das Webdesign ist Responsive aufgebaut und passt sich der Bildschirmgrösse an. Hier anschauen.

Demo | Download

 Widely

Das Widely Template ist perfekt für einfach Portfolios. Die grosse integrierte Slideshow lässt die Bilder sehr gut zur Geltung kommen. Bitte beachtet, dass für den kostenlosen Download eine Registrierung nötig ist. Hier ansehen.

Demo | Download

Mit dem rasanten Anstieg der Mobilgeräte wird das browsen im Web auch mobil. Das stellt uns Webdesigner vor neue Schwierigkeiten: soll nun eine optimierte Website erstellt werden, investiert man in eine iPhone oder Android App oder  ist das Responsive Web die Lösung aller Probleme?

Eine eindeutige Antwort diesbezüglich gibt es wohl nicht und es lohnt sich von Projekt zu Projekt zu entscheiden. Je nach Produkt, Dienstleistung, Zielgruppe und Budget. Aber der Vorteil eines Responsive Designs liegen auf der Hand. Nur 1 Seite welche alle Bildschirmauflösungen und Geräte abdeckt, zwar insgesammt aufwendiger zu erstellen ist, dafür erspart man sich die Probleme wenn weitere Bildschirmgrössen und Endgeräte auf den Markt kommen. Dazu sieht es einfach enorm gut aus wenn sich die Seite flüssig seinen Verhältnissen anpasst.

Wir haben euch nachfolgend eine Liste von Websites zusammengestellt, die uns besonders gefallen sowie einige Frameworks die wir für den Einstieg in das Responsive Webdesign empfehlen können. Was sind eure Erfahrungen? Erzählt es uns in den Kommentaren.

 Responsive Webdesign

Design Made in Germany

Forefathers Group

Owltastic

The Boston Globe

Ethan Marcote

Teixido

Momentum

dConstruct

Bryan Connor

Simon Collison

Spigot Design

Pelican Fly

Responsive Webdesign Frameworks

 1140 CSS Grid

Das 1140 CSS Grid wurde entwickelt um perfekt auf einem 1280px Screen angezeigt wird, bei kleineren Bildschirmen wird das ganze Fluid, bis zu einem gewissen Zeitpunkt an dem Media Queries genutzt werden um die Mobile Version darzustellen. Das Grid besteht aus 12 Spalten, wobei hier entweder zwei, drei, vier oder sechs verwendet werden können. Das ganze funktioniert mit allen gängigen Browsern, mit Ausnahme des IE6 welcher “max-width” nicht unterstützt.

Skeleton

Skeleton ist eine kleine Kollektion von CSS und JS Files welche auf einem 960 Raster basieren und runterskalieren zu kleineren Browserfenster, Tablets und Mobilgeräten (Landscape und Portrait).

320 and up

320 and Up verhindert, dass Mobilgeräte den ganzen Chunk der Desktop-Version laden, es liefert ein einfach Stylesheet zum Start welches nur ein Reset, Farbe und Typografie beinhaltet. Media Queries laden dann die entsprechenden Layoutstile schrittweise und nur wenn sie gebraucht werden.

inuit.css

inuit.css ist ein leicht und permanent weiterentwickeltes CSS-Framework welches dir einen pragmatische und funktionsreichen Start für alle deine Projekte liefert. Es ist vollgepackt mit nützlichen Snippets und bietet zusätzliche Plugins.

Less Framework

Das Less Framework bietet 4 adaptive Layouts und 3 3 Sets Typografie Voreinstellungen, alle auf der Basis eines Single-Grids, mit 64px Spalten und 24px  Abständen. Die Idee dahinter ist, zuerst das Standard-Layout (992px) zu programmieren und dann CSS3 Media Queries zu benutzen um verschiedenen Layouts damit zu generieren: 768, 480 und 320.

Foundation

Das Foundation Framework ist ein Grid-Framework mit 12 Spalten welches dutzende von Stile und Elemente beinhalten um möglichst einfach und schnell einen klickbaren Prototypen zu erstellen welcher später dann in Produktions-Code adaptiert werden kann.

Webdesign, dass uns die letzten Monate inspiriert, unterhalten und neugierig gemacht hat. Du findest von kleinen minimalistischen Portfolio Websites zu technologisch hochwertigen Umsetzungen alles.

Welches sind Websites die euch zurzeit gefallen? Sagt uns im Kommentar.

blacknegative

Everything You Need to Know About Design

Operation Butterfly

Onside

K2

Riley Cran

Gareth W. Rice

Offscreen

Adidas Design Studios

Fivethousend Fingers

OrangeSprocket

Made by Vadim

KRYSTALRAE

Suit Up or Die Magazine

Marco Rosella

Hard Graft

My own bike

thePENTHOUSEPROJECT

Mustache

Generative Kunst fasziniert uns, da nicht unbedingt das Kunstwerk oder Endprodukt im Zentrum steht, sondern der Entstehungsprozess und die ihm zugrunde liegenden Ideen. Durch Algorithmen, Muster und Codezeilen entstehen Bilder und Formen, die perfekte Verschmelzung von Technik und Kunst.

complexification

veryinteractivepeople

Erik Natzke

Patrick Gunderson

Dmitry Maximov entführt uns mit seinen wundervollen Werken in eine surrealistische Welt. Dank seiner gekonnten Kombination von Fotografie und Illustration sowie dem perfekten Gebrauch von Lichteinflüssen und Farbgebungen entstehen Bilder und Geschichten die uns faszinieren.

Ein Blick auf das breit gefächertes Portfolio des russischen Künstlers lohnt sich in jedem Fall.

Normalerweise fokussieren wir uns auf Themen rund ums Web, jedoch müssen wir uns eingestehen, dass nichts über ein liebevoll gestaltetes Magazin geht. Ist das gedruckte Papier noch gefüllt mit Inspiration, Künstlerportraits, Illustrationen und Urban Art, dann wollen wir euch das Ding einfach vorstellen. Selten überrascht uns ein Magazin aus dem deutschsprachigen Raum immer wieder so aufs Neue wie das Amateur Magazin. Zudem wird es ganz in der Nähe der Webdesignlovers-Hauptzentrale produziert und Freunde aus der “Hood” haben wir noch immer unterstützt.

Der Gründer und Macher des Amateur Magazins “Lain” hat sich Zeit genommen und uns einiges Wissenswertes rund um das Amateur Magazine beantwortet.

Wie lange gibt es euch schon?

Die erste Ausgabe erschien im Oktober 2008. Die Idee eines Magazins kam etwa ein Jahr vorher. Irgendwie hat mir in der Schweiz ein tolles Magazin gefehlt. Ich war/bin ein begeisterter Leser von Lodown (Deutschland), Clark (Frankreich) und Juxtapoz (USA), welche mich auch dazu inspiriert hatten.

Wer steckt hinter dem Amateur Magazine?

Viele Leute denken, dass hinter Amateur Magazine ein grosses Redaktionsteam steckt. Dem ist nicht wirklich so. Das meiste am Magazin mache ich selbst – Layout, Interviews, Versand, Distribution, etc. – einfach weil das am günstigsten ist.

Um die ganzen Inhalte auf dem Web (Facebook, Website, Twitter, etc.) kümmern sich Ti und Meq und ihre Jungs.

Für einzelne Aufgaben hole ich mir die entsprechenden Leute (sprich Freunde) zu Hilfe, so dass pro Ausgabe jeweils um die 50 Personen beteiligt sind. Ohne deren Hilfe gäbe es das Magazin nicht. Vielen Dank an dieser Stelle.

Wie entdeckt ihr die Künstler?

Freunde von Freunden, Freunde, an Ausstellungen, auf dem Web, Magazine und manchmal entdecken die Künstler auch uns. Da gibt es eigentlich kein grundsätzliches Vorgehen.

Wie kommt man zu einem Amateur Magazine?

Wer uns unterstützen möchte und gute Printmagazine mag, kann ein Abo lösen:
http://www.amateur-magazine.com/wp2/subscription/ (20CHF für 3 Ausgaben.

Nachfolgend einige Bilder der letzten Ausgabe.

Wer sich einen Vorgeschmack holen will, kann die letzte Ausgabe als Online-Version hier anschauen. Mehr Informationen findet ihr zudem auf der Website und auf der Facebook-Fanpage.

Adam begann sein kreatives Handwerk als kleiner Junge in Camp Sherman, Oregan, wo ein Mangel an Fernsehen- und eine Fülle von Bücher ihn dazu inspirierten, stundenlang Zeichnungen von Landschaften und Szenen aus seiner Phantasie zu zeichnen. Er wuchs mit einer Liebe zur Natur auf – kolossale Bäume, ruhige Flüsse und die schneebedeckten Berge, die er bereits im Alter von vier Jahren mit Ski und Brett erkundete. Als junger Mann zog Adam nach Bozeman, Montana um Fine Arts an der Montana State University zu studieren. Zwischen den Grafik-Design Klassen zog es ihn immer wieder in die Berge um das steile felsige Gelände in der nähe des Bridger Bowl zu entdecken.

Im Jahr 2000 absolvierte Adam sein Studium und zog danach weiter westlich nach Portland, Oregan wo er ein Job als Grafiker bei Adidas ergattern konnte. Neben dem Corporate Design Stress begann er mit der Malerei. Aufgrund seiner Erfahrung mit Siebdruck und mit vektorbasierten Zeichnungen entwickelte er einen einzigartigen Mehrschichten-Stil. “Die Grafiken selbst zu malen gab mir ein besseres Verständnis um Tiefe und den Raum durch verschiedene Layer zu erlangen”.

Ein paar hunderte T-Shirt Grafiken und fast fünf Jahre später, ging Adam zurück in die Bend Region und begann als freier Illustrator zu arbeiten. Seinen Durchbruch konnte er feiern, als er von Portland’s Agentur Nemo Design den Auftrag für eine Kampagne für Nike 6.0. erhielt. Mittlerweile produziert er jährlich Snowboard Designs für GNU Snowboards, animiert Spots für Fuel TV, arbeitet für das Wired Magazine, die USFS, Ronix Wakeboards, ESPN, Timberland Boot Co., Tonka, Quiksilver, Adidas und viele weitere. Seine Inspirationen findet er immer noch bei Wanderungen im Wald und in den Bergen.

Mehr seiner Arbeiten findet ihr auf Adam’s Website.

Nike 6.0

GNU Snowboards

 Fuel TV

ESPN

Adidas

Paintings

Auf der Suche nach einem Snack Inspiration sind wir auf vieles interessantes, kreatives, innovatives und anspruchsvolles gestossen. Einfach Web-Snacks die wir gerne mit euch teilen wollen. Viel Spass und bon appétit!

 Public Class

Jessica Caldwell

Deux Huit Huit

Burton

redirect

La Wine

La Moulade

Hermetik

Christopher Clark

Games we played

360 Grad Langstrasse

Kenneth Cachia

Hanging up the moon

Paul Smith Jeans

Vlog

Kantt

The art of reuse

Lola New York

Shaw and Shaw

Kommi Graphics

Reverse Büro

Loyel’s Toy

Herokidstudio

Wir haben uns verliebt in Cinemagraphs. Die Bilder welche mehr als ein herkömmliches Photo sind, aber weniger als ein Video bringen dem fast vergessenen GIF-Format das Revival. Besonders den Einsatz auf Websites finden wir sehr spannend, da es einerseits das Bild mit Leben erwecket, aber als sehr kleine Dateigrösse deherkommt.

Ein Video wie ihr euch selber ein Cinemagraph erstellen könnt findet ihr hier und weitere Cinemagraphs auf cinemagraphs.ch.

Weitere Cinemagraphs findet ihr unter http://cinemagraphs.ch

Mehr und mehr Leute, Städte und Länder schliessen sich der Occupy-Bewegung an. Überall auf der Welt sind die Menschen nicht mehr einverstanden mit dem bestehenden System, sprich mit den vorherrschenden Machtverhältnissen, aber auch mit der Art und Weise wie Entscheidungen getroffen werden und nach welchen Prioritäten dies vonstattengeht. „Wir sind die 99%“, heißt es seit einiger Zeit überall. Die 99% der Menschen, denen das bestehende Gesellschaftssystem nicht zu Gute kommt.

Die Stimmen werden mit Protesten auf der Strasse erhoben. In New York, Chicago, San Francisco aber auch in immer mehr europäischen Städten wie London, Berlin und Zürich regt sich widerstand. Viele Kreative und Programmierer, die sich dieser Bewegung angeschlossen haben entwerfen eine Flut von visueller und digitaler Unterstützung. Einerseits um auf die Missstände aufmerksam zu machen, anderseits um die Bewegung zu koordinieren und auf einen gemeinsamen Nenner zu bringen.

Wir möchten euch nachfolgend vorstellen wie an den Occupy Hackathons ein komplettes Corporate Design umgesetzt wurde, welche Apps entwickelt wurden und was kreative Künstler umgesetzt haben um diese Bewegung zu unterstützen.

Hackathon San Franciso

Der Hackathon in San Francisco hat der Bewegung ein Corporate Design verpasst. Es wurde eine minimalistische, gut strukturierte Website erstellt auf der man die kreierten Logos, Piktogramme, wie auch ein Occupy Design Toolkit für eigene Designs herunterladen kann. Man findet zudem FAQ’s, Pressematerial und Fotos sowie ein eingebundener Twitter Stream.

Wage Change

Top 1 Percent

Move your money

New York City Hackathon

Mark Belinsky, der Präsident der Non-Profit Organisation Digital Democracy hat seine Plattform OccupyVotes weiterentwickelt, welche ursprünglich für die Proteste in Ägypten erfunden wurde. Das Tool gibt jeweils 2 Meinungen zur Auswahl. Jeder ist frei, eigene Fragen und Ideen der Plattform hinzuzufügen. Aktuell bestehen bereits 23488 Votes zu 64 Ideen. Die Plattform soll einen, oder mehrere gemeinsame Nenner der dezentralen Bewegung finden.

Weitere Beispiele sind Shouty, eine Android App welche als Mikrofon oder für gemeinsame Meetings benutzt werden kann. Man kann Musik sharen oder einen Live MP3 Stream broadcasten. Oder Occupyist welche eine sortierbare, durchsuchbare und ortsbezogene Liste der aktuellen Events und Tweets bietet. Interessant ist auch Ridehack welche die Möglichkeit bietet, Fahrgemeinschaften zu bilden und sich zu organisieren. Eine komplette Liste der Tools und Websites des Hackathons in New York findet ihr hier.

Occupy George

Occupy George ist eine Serie von 5 Stempfel mit einer Infografik über die ungerechte Verteilung des Reichtums und dies direkt auf dem bekanntesten Symbol der Wirtschaft, dem Dollarschein.

Occupied Mono

Der Grafikdesigner Luke Robertson hat zusammen mit Aaron Gillet erkannt, dass die visuelle Sprache der Bewegung zu wenig einprägend ist. Also haben sie kurzerhand eine eigene Schrift entwickelt, die Occupied Mono. Sie haben Zeitungsartikel überdruckt womit eine komplett neue Botschaft entsteht.

 Adbusters Occupy Wall Street Poster

Occupy Together

Propaganda Posters

OccupyWallst.org

Occupy Melbourne

Money talks too much…

Direct democracy not deceit

Occupy Wallstreet

Viele Websites benutzen Bewertungen, um die Wichtigkeit oder die Beliebtheit eines Artikels oder Produkts zu messen. Beliebte jQuery Plugins wie das 5 Star-Rating sind schnell und einfach integriert. Die Schwierigkeit liegt eher an der Ausgabe der Daten und dabei wollen wir helfen!

Bei unserem neusten Projekt Stokedcamps geht es darum, dass sich einerseits Surfcamps mit einem Profil präsentieren können und anderseits dass Besucher diese bewerten können. Wir haben ebenfalls das verbreitete 5 Star-Rating eingesetzt. Folgendes Problem ergibt sich:

Problem

Surfcamp 1 erhält 23 Bewertungen:
20 x 5
3 x 4
ergibt eine durchschnittliche Bewertung von 4.8

Surfcamp 2 erhält 1 Bewertung:
1 x 5
ergibt eine durchschnittle Bewertung von 5

Was läuft hier falsch?

Sortiert man nun die Surfcamps nach ihrer durchschnittlichen Bewertung wird das zweite Surfcamp besser gelistet als das erste. Rein mathematisch macht dies Sinn, allerdings ist das zweite Surfcamp aufgrund der vielen Besucher und der überdurchschnittlichen Bewertung natürlich als besser einzustufen.

Demo mit falscher Sortierung

Wir haben das ganze mal veranschaulicht mit einem Bewertungssystem für Superheroes, schaut es euch an, setzt Bewertungen und erkennt wie es sich verhält:

Wie kann das Problem gelöst werden?

Um das Problem zu lösen muss also eine Gewichtung geschaffen werden, möglichst eine organische welche sich an der Höhe der Gesamtbewertungen und der durchschnittlichen Bewertung orientiert. Wir haben gesucht und sind auf den Bayes’schen Durchschnitt gestossen. Der nach dem englischen Mathematiker Thomas Bayes benannte bayessche Wahrscheinlichkeitsbegriff interpretiert Wahrscheinlichkeit als Grad persönlicher Überzeugung. Genau das suchen wir!

Auf der Seite von The Broth haben wir folgende Formel dazu entdeckt:

bayesian = ( (avg_num_votes * avg_rating) + (this_num_votes * this_rating) ) / (avg_num_votes + this_num_votes)

Legende:

• avg_num_votes: Die durchschnittle Anzahl an Bewertungen von allen Objekten die mehr als 0 Bewertungen haben
• avg_rating: Die durchschnittliche Bewertung jedes Objekts (wieder alle mit mehr als 0 Bewertungen)
• this_num_votes: Anzahl der Bewertungen für dieses Objekt
• this_rating: Die Bewertung dieses Objekts

Wir haben also das ganze bei der Superhero-Bewertung eingebaut und Boom! Genau so wie es sein soll, die Bewertung wird aufgrund der Menge an Bewertungen und der durchschnittlichen Bewertung gemessen, wenn es viele Stimmen gibt können wir also darauf vertrauen, dass das die öffentliche Meinung vieler ist.

Demo mit Bayes’schen Bewertung

Vielen Entwicklern wird die oben erwähnte Formel reichen um das in ihre Projekte zu integrieren, wer noch eine Code-Beispiel benötigt helfen wir natürlich gerne.

PHP-Beispiel

<?php

// Config

$total_votes           = 0; // Number of total votes
$total_rating          = 0; // Number of total ratings
$number_of_superheroes = 0; // Number of Superheroes

// Create Superhero Array

$superheroes = array (
'dark_knight'   => array ('id' => '1', 'name' => 'dark_knight', 'num_votes'   => 5, 'avg_rating' => 4.8),
'green_lantern' => array ('id' => '2', 'name' => 'green_lantern', 'num_votes' => 1, 'avg_rating' => 5  ),
'robin'         => array ('id' => '3', 'name' => 'robin', 'num_votes'         => 1, 'avg_rating' => 5  ),
'superman'      => array ('id' => '4', 'name' => 'superman', 'num_votes'      => 1, 'avg_rating' => 5  ),
'flash'         => array ('id' => '5', 'name' => 'flash', 'num_votes'         => 1, 'avg_rating' => 5  ),

);

// Loop array and count data

foreach ($superheroes as $k => $v) {
$total_votes           += $v['num_votes'];
$total_rating          += $v['avg_rating'];
$number_of_superheroes += 1;
}

// Do the math

$avg_num_votes = $total_votes/$number_of_superheroes; // Average number of votes
$avg_rating    = $total_rating/$total_votes; // Average rating for all superheroes

// Bayes it and write output

foreach ($superheroes as $k => $v) {
$karma = ( ($avg_num_votes * $avg_rating) + ($v['num_votes'] * $v['avg_rating']) ) / ($avg_num_votes + $v['num_votes']);
echo $v['name'] . ': ' . round(($karma*2*10)) . '<br/>';
}

?>

Wie verwendet ihr dieses Beispiel?

Kopiert euch dieses PHP-Script in ein Textfile, speichert es beispielsweise unter superheroes.php und kopiert es auf den Server eures Vertrauens. Ruft das PHP im Browser auf und ihr seht die Ausgabe der Berechnung. Nun könnt ihr Werte im Array anpassen und schauen wie sich dies auf das Karma auswirkt. Das Script ist bestimmt eine gute Grundlage um die Bayes’schen Bewertung zu verstehen und anzuwenden. Als Live-Beispiel könnt ihr euch auch die Bewertungen auf Stokedcamps.com anschauen.

Habt ihr diese Bewertung auf eurer Seite integriert oder habt ihr Fragen? Meldet euch in den Kommentaren.

Harper Smith schafft es auf ganze besondere Art und Weise Momente fotografisch festzuhalten. Wenn man die Bilder betrachtet fühlt man sich inmitten der Geschichte. Besonders seine Tagebuch Fotos welche er mit seiner 35mm und Polaroid schiesst schenken uns einen Blick in die Sichtweise und Erlebnisse seines Leben. Ein Klick auf die Website von Harper lohnt sich, hier findet sich sein breites Portfolio von Fashion-Shootings, Kampagnen oder das eben erwähntes Photo-Diary wieder.

Website
Blog

Hungrig nach Inspiration haben wir uns auf die Suche nach frischem Design und kreativen Ideen gemacht. Gefunden haben wir einzigartige Seiten welche oftmals ihre Wirkung beim Entdecken der Seite entfalten. Besonders die tollen JavaScript Umsetzungen flashen uns!

Enjoy!

BokicaBo

Emile-Victor Portenart

Studio Sweet Studio

Junges Blut

Mark Dearman

Twoto

Nizo

Deda

Absolute

Two Fish Illustration

F360

árbol

ala

Muziekpark

Ray’s Lab

Jon Montenegro

Nora Rose Travis

Sellected

Yuna

Always with Honor

The Kennedys

Go Live!

Creature Tales

Matthew Mcclatchie