eDOSSIER

13.2014
shop.page-online.de/
downloads

Online-Portfolios:
Tools, Tipps & Strategien
Selbstdarstellung im Web:
Dos & Don'ts für Agenturen und Freelancer

Instant-Portfolios – online und

mobile: Praktische Tools für Kreative
ohne Programmierkenntnisse

Das PAGE eDossier 13.2014 enthält Beiträge aus PAGE 01.2014 (Januar 2014) und PAGE 12.2012 (Dezember 2012) im Originallayout.
IMPRESSUM Redaktion PAGE, Borselstraße 28, 22765 Hamburg; info@page-online.de; Telefon: 040 85183-400, Fax: -449; www.page-online.de; Chefredakteurin/Publisher: Gabriele Günder, V.i.S.d.P. Autoren:
Nina Kirst (nik) Anzeigenleiter: Alexander Herz; alexander.herz@page-online.de; Telefon: +49 85183-480, Fax: -489 (verantwortlich für die Anzeigen und Promotion); PAGE erscheint in der Ebner Verlag GmbH &
Co. KG, Karlstraße 3, 89073 Ulm Geschäftsführer: Gerrit Klein, Martin Metzger (Stellvertreter), Florian Ebner Urheberrecht: Alle Beiträge sind ur­he­berrechtlich geschützt. Alle Rechte, auch Übersetzun­gen und
Zweitverwertungen, vorbehalten. Reproduk­tionen, gleich welcher Art, ob Fotokopie, Mikrofilm oder Er­fas­sung in Datenverarbeitungsanlagen, nur mit schrift­­li­cher Genehmigung des Verlages. Eine Vermietung,
Verleihung sowie Verkauf oder eine sonstige Form der Zugänglichmachung an Dritte ist Ihnen nicht gestattet. Aus der Veröffentlichung kann nicht geschlossen werden, dass die beschriebe­nen Lösungen frei von
gewerblichen Schutzrechten sind. Für den Fall, dass hier unzutreffende Informationen enthalten sein sollten, kommt eine Haftung nur bei grober Fahrlässigkeit des Verlages oder seiner Mitarbeiter in Betracht.
Weitere eDossiers, Einzelhefte und Aboangebote gibt’s unter shop.page-online.de
002 PAGE eDossier 13.14 (Beitrag aus PAGE 01.2014)

Permanent Pitch
Die Selbstdarstellung im Web ist ein wichtiger Schritt – an den man
aber ruhig etwas spielerisch herangehen darf. PAGE gibt Tipps und zeigt,
wie Agenturen und Freelancer diese Aufgabe gelöst haben

n Kleber-Berater, Schmetterlingsver­
leiher, Tanzkursanbieter, Weissager –
die Agentur KesselsKramer hat im In-
ternet viele Gesichter. Erlauben kann
sie sich den durchgeknallten Webauf-
tritt, der sich bei jeder Aktualisierung
verändert, weil ihr der Ruf als kreative
Superbude vorauseilt. Diesen Luxus ge­
nießen die wenigsten Agenturen und
Freelancer. Sie stehen vor der Aufga-
be, ihre Selbstdarstellung im Netz zwi-
schen den Polen Kreativität und Benut­
zerfreundlichkeit, Unterhaltung und
Information auszubalancieren. Manche
tun sich damit schwer, der Außenwelt
zu zeigen, was sie können und wofür
sie stehen. »Die größte Herausforde-
rung ist, sein Konzept möglichst kri-
tisch zu hinterfragen, obwohl einem
der nötige Abstand dazu fehlt«, sagt
Anastasios Koupantsis, Mitgründer und
Kreativgeschäftsführer des Düsseldor­
fer Designstudios Betty & Betty.
Wie bei jedem anderen Projekt geht
es auch beim eigenen Webauftritt da-
rum, die Zielgruppe optimal anzuspre­
chen – in diesem Fall sind das an ers­ter
Stelle (potenzielle) Kunden. Die Seite
muss visuell und technisch beeindru-
cken, darf aber gleichzeitig nicht zu
experimentell sein, da sie sonst Interes­
senten verschrecken könnte. »Unser
Ziel war nicht, dass unser Webauftritt
auf Designblogs gefeatured wird, son-
dern dass wir darüber Kunden gewin-
nen«, sagt Falko Ohlmer, der kürzlich
gemeinsam mit Felix Groß die Design-
agentur Arndt Benedikt in Frankfurt
gegründet hat. »Wir haben unsere Sei-
te deswegen bewusst nicht überladen
und setzen auf ein klares, übersichtli­
ches Design – angereichert mit gestal-
terischen Raffinessen wie dezen­ten
Scrollingeffekten und einem Schrift­mix
aus Aperçu und Zapf Dingbats.«
Das Herzstück jeder Portfolioseite
sind die Arbeitsproben. Viele Gestal-
ter machen den Fehler, zu viele Pro-
jekte zu präsentieren. Besser ist es, die
aussagekräftigsten Arbeiten zu wäh-
len und gleichzeitig die Bandbreite des
eigenen Könnens darzustellen. Auf der
Website von Arndt Benedikt sind die
Referenzen aufgeteilt in »Selektion«
PAGE eDossier 13.14 003
und »Diverses«. »Unter ›Selektion‹ fin- Die Website
den sich größere Projekte mit erklä- des Hamburger
renden Texten, bei ›Diverses‹ auch klei­ Digitalstudios
nere Arbeiten wie schöne Plakate«, so Swipe basiert auf
Ohlmer. Erklärungen zu Problemstel- der Idee eines
lung, Herangehensweise und Lösung responsiven Pos-
geben Einblick in die Arbeitsweise des ters. Herausge-
Büros, denn Bilder sprechen nicht im- kommen ist eine
mer für sich. Auch hier muss man ab- dynamische Seite
wägen, denn zu viel Text mindert die mit der Ästhetik
visuelle Kraft der Artworks. Am bes­ eines modernen
ten gibt man gerade genug preis, um Printmagazins
den Kunden neugierig genug zu ma-
chen, dass er mehr erfahren möchte.
Deswegen ist die Kontaktmöglichkeit
essenziell – sie sollte am besten jeder-
zeit sichtbar sein.
Experimente erlaubt?
Visuell und technisch State of the Art
zu sein ist besonders für Agenturen
mit digitalem Schwerpunkt von gro­
ßer Bedeutung. »Ein experimenteller
Bestandteil war uns bei der Gestal-
tung unseres Webauftritts sehr wich-
tig«, erklärt Marc Antosch, Kreativ-­
004 PAGE eDossier 13.14 (Beitrag aus PAGE 01.2014)

direktor und Managing Partner bei

Convoy Interactive in Hamburg. Aller-
dings räumt er ein: »Der Balance-Akt
zwischen Gewohntem und Neuem ist
nie ganz leicht – gerade wenn es um
Usability-Aspekte geht.« Gestaltungs-
prinzip der Convoy-Website ist ein auf
einem Würfel basierendes Portfolio. Der
User dreht den Würfel und bekommt
auf jeder Seite ein anderes Projekt zu
sehen. Will er mehr erfahren, legt sich
per Klick eine Textebene über das Bild.
»Das ermöglicht dem Besucher jeder-
zeit den Zugriff auf alle gewünschten
Informatio­nen, ohne dass er das Port-
folio verlassen muss«, sagt Antosch.
Experimenteller geht Il-Ho Jung,
Freelancer im Bereich Grafikdesign,
Interactive und Motion, an seinen Web­
auftritt heran. Auf der ersten Ebene
zeigt seine Seite nur Arbeiten, die von
allein wechseln – weder Text noch Lo-
go sind zu sehen. Will der Nutzer mehr
erfahren und klickt zum Beispiel auf
»About«, wird der Screen mit großer
Typo und grellen Farben durchbrochen.
Die Seite ist äußerst dynamisch, bei-
Die Website der Hamburger Innovations-
nahe ein wenig hektisch und wirkt da-
agentur nerdindustries will in erster Linie
durch jung und hip. »Ich sehe sie als
unterhalten. Schaut man sich die Referen-
Chance, experimentell sein zu dürfen«,
zen an, spielt im Hintergrund ein Kätzchen,
erläutert Jung. Gleichzeitig war es ihm
auf der Kontaktseite klingelt Google-
besonders wichtig, seine Kompeten­
Gründer Sergey Brin durch, der automa-
zen zu verdeutlichen: »Um meine Fä-
tisierte Client Service Director putzt
higkeiten im Grafikdesign zu unterstrei­
unablässig Kundenlogos und warum die
chen, habe ich eine eigene Display-
AGB wichtig sind, erklärt Rapper Ali As.
schrift für mein Portfolio entwickelt.
Die Seite ist definitiv einen Besuch wert!
Um meine Interactive-Expertise hervor­
zuheben, habe ich die Site mit HTML5
technisch auf den neuesten Stand ge-
bracht. Und da ich aus dem Bereich
Motion komme, durfte sie insgesamt
nicht zu statisch wirken.«

Wie viel Spaß darf sein?

Auch ein humorvoller Umgang mit der
eigenen Arbeit und dem Webauftritt
kann visuell und konzeptionell attrak-
tiv sein – wenn es gut gemacht ist. Die
Website der Hamburger Innovations­
agentur nerdindustries wartet zum Bei-
spiel mit lustigen Gimmicks auf: Schaut
man sich die Arbeitsproben an, spielt
im Hintergrund ein Kätzchen; ein klei-
ner Roboter putzt beständig Bilder-
rahmen mit den Logos der bisherigen
Kunden der Agentur; auf der Kontakt-
seite ruft plötzlich Google-Mitgrün-
der Sergey Brin auf dem abgebildeten
Smartphone an. Das Highlight der Sei-
te sind ausgerechnet die AGB: Ihren
Nutzen erklärt der Münchner Rapper
Ali As in einem chartreifen Song.
»Unsere Seite ist für uns ein Teaser
und ein Aushängeschild«, sagt Mitgrün­

der Mathias Keswani. »Sie soll Spaß
machen und Neugier wecken.« Da die
Arbeit von nerdindustries sehr erklä-
rungsbedürftig ist, stellen sich die Krea­
tiven lieber persönlich bei potenziel­
len Kunden vor, die sie mit ihrer unter-
haltsamen Website anlocken. »Vor dem
Relaunch im Mai 2013 hatten wir einen
traditionelleren Webauftritt. Wir waren
stromlinienförmig und viel zu brav. Wir
wollten seriös wirken und wurden da-
durch langweilig«, so Keswani. »Mit un-
serer neuen Website transportieren
wir viel besser den Geist, den wir bei
PAGE eDossier 13.14 005
der Gründung von nerdindustries hat-
ten, und zeigen, wie viel Spaß uns un-
sere Arbeit macht.«
Noch einen Schritt weiter geht das
New Yorker Designstudio karlssonwil-
ker. Auf dessen Website empfangen
den User auf den ersten Blick nur ein
farbiges, animiertes Gebilde, die Kon-
taktdaten und wenig Text. Will er sich
die Arbeiten angucken, legt sich eine
wuselige neue Ebene über die Seite
mit blinkenden, unruhigen Bildern. Be­
nutzerfreundlichkeit sieht anders aus.
Karlssonwilker hat sich aber ganz be-
wusst für diesen Weg entschieden.
Wenn sich Kunden davon abschrecken
lassen, sind es eben nicht die richtigen
Kunden, so ihr Ansatz. »Die Experi-
mente von heute könnten die Usabi­
lity von morgen sein«, meint Megan
Elevado von karlssonwilker.
Muss es immer eine
Eigenentwicklung sein?
Für einen individuellen, maßgeschnei-
derten Webauftritt ist eine Eigenent-
wicklung meist die beste Lösung. Das
gilt besonders für Interactive-Agen-
turen, die damit ihr Können unter Be-
weis stellen, aber auch für Freelancer
und Büros mit analogem Schwer-
punkt. »Ich bin kein großer Freund von
Software-as-a-Service-Lösungen«, sagt
Il-Ho Jung. »Sie führen dazu, dass man
sein Konzept an die Fähigkeiten der
Software und vorhandener Templates
anpasst. Damit beraubt man sich selbst
seiner Freiheit für Experimente und
neue Ideen.« Der Designer ließ seinen
Webauftritt von Developern aus dem
Freundeskreis entwickeln. Arndt Bene­
dikt griff auf einen Programmierer aus
ihrem Freelancer-Pool zurück. »Wir
woll­ten eine Lösung, die speziell auf
unsere Bedürfnisse zugeschnitten ist,
um Austauschbarkeit zu vermeiden
und Außergewöhnliches zu schaffen.
Das macht letztlich den Beruf eines
Designers aus«, erklärt Falko Ohlmer.
Wer keine Entwickler-Expertise im
Haus oder Freundeskreis hat und kei-
nen externen Developer engagieren
möchte, kann auf einen der zahlrei­
chen Software-as-a-Service-Anbieter
zurückgreifen, die speziell auf kreative
Berufsfelder ausgerichtet sind (siehe
PAGE 12.12, Seite 8 ff.). Dass eine sol-
che Lösung nicht nach Einheitsbrei aus-
sehen muss, beweist beispielsweise
Betty & Betty. Ihr Auftritt basiert auf
einem Template des Anbieters Square­
space, das die Gestalter inhouse wei-
terentwickelt haben. Das Design ist un­
aufgeregt und rückt die Arbeitsbei-
006 PAGE eDossier 13.14 (Beitrag aus PAGE 01.2014)

spiele in den Vordergrund. Bild-

schirmfüllende Bilder und Effekte wie
vollflächiges Parallax Scrolling und ei-
ne kleine Animation für die Ladezei­
ten lockern die Seite auf. »Uns ging es
darum, schnell einem Informations-
bedarf zu genügen. Die Kreativität zei-
gen wir über unsere Projekte«, erklärt
Anastasios Koupantsis.

Stets seriös oder auch

persönlich?
Je größer und etablierter eine Agentur,
desto seriöser wird meist der Web­auf­
Dass die Website des Düsseldorfer Designbüros
tritt. Die jüngst relaunchte Home­page
Betty & Betty mit dem Software-as-a-Service-
von KMS Team in München kommt ent­
Anbieter Squarespace erstellt wurde, ist nicht zu
sprechend aufgeräumt und übersicht-
erkennen. Effekte wie großflächiges Parallax
lich daher. »Wir haben gro­ßen Wert auf
Scrolling und eine kleine Animation für die Lade-
eine klare Gliederung gelegt, um unse­
zeiten lassen die Seite individuell wirken
re Leistungspalette auf den ersten Blick
sichtbar zu machen«, erklärt Mitgrün-
der und Geschäftsführer Knut Maier-
hofer. »Wir sind keine marktschreieri­
sche Werbeagentur, die mit allen Mit-
teln um Aufmerksamkeit buhlt – weder
für unsere Kunden noch für uns. Wir
entwickeln Marken, die nachhaltig wir­
ken. Das wollen wir auch mit unserer
eigenen Website kommunizieren.«
So wichtig Professionalität in der
Selbstdarstellung ist – zu trocken darf
es auch nicht sein. Das weiß auch KMS
Team. »Wir haben uns vorgenommen,
öfter mal einen Blick hinter die Kulis-
sen zu gewähren – gerne mit einer Pri-
se Selbstironie«, sagt Maierhofer. Zum
Relaunch gab es ein augenzwinkern-
des Making-of-Video und auf den groß­
flächigen Hintergrundbildern sind Sze­
nen aus den Agenturräumen zu se-
hen. Mehr Einblicke gibt es auf der
in diesem Jahr gestarteten Facebook-
Seite der Agentur.
Social Media sind ein guter Kanal,
um Kunden, Nachwuchs und generell
Interessierte auf einer persönlicheren
Ebene anzusprechen. »Soziale Netz-
werke gehören heutzutage zum Ge-
samtauftritt dazu. Facebook zum Bei-
spiel ist ein guter Multiplikator und
nützlich, um Neuigkeiten zu verbrei-
ten«, sagt Falko Ohlmer. Plattformen
wie Behance dienen dagegen eher
der Vernetzung unter Kreativen und
sind deshalb wichtig für Agenturen
und Freelancer, die oft nach Projekt-
partnern suchen. Eine Anbindung an
Social-Media-Kanäle ist allerdings nur
sinnvoll, wenn man sie regelmäßig be-
dienen kann und die Profile nicht als
Karteileichen vor sich hin dümpeln. So
hat sich Il-Ho Jung gegen Social Media
entschieden, da es für ihn als Einzel-
gänger schwierig ist, dort beständig

aktiv zu sein. Um aktuelle Projekte zu
zeigen und Anekdoten aus dem Ar-
beitsalltag zu erzählen, sind Social Net­
works aber eine gut Methode – im
Idealfall mit viralem Effekt.
Mobile Site – ein Muss?
Zum Webauftritt gehört nicht nur das
stationäre, sondern auch das mobile
Internet. Da Responsive Design bei der
Arbeit für Kunden eine immer größere
Rolle spielt, ist es für viele Kreative
wichtig, auch hier ihr Know-how zu be­
weisen. »Wir nutzen keine Standard-
Templates für Responsive Design, son­
dern gestalten für jeden Kunden in­
dividuelle Lösungen, die Bezug auf ih-
re Erscheinungsbilder nehmen. Das
bringt auch unsere eigene Seite zum
Ausdruck«, erläutert Knut Maierhofer.
Für Marc Antosch von Convoy Interac-
tive war es ebenfalls selbstverständ-
lich, den Auftritt responsiv anzulegen.
Gleichzeitig hat die Agentur eine Ex-
traversion für Mobiltelefone entwickelt,
die noch schlanker ist und für niedrige
Bandbreiten optimierte Bilder enthält.
So wichtig der mobile Auftritt auch
ist: Der Schwerpunkt bei der Gestal-
tung von Agenturwebsites liegt auf
dem großen Bildschirm. Die meisten
Kreativen sind sich einig, dass ihre
Zielgruppe vorrangig am Desktop im
Büro nach Agenturen recherchiert und
haben ihren Auftritt dafür optimiert.
Projekte sehen in großflächigen Bildern
über die ganze Bildschirmbreite ein-
fach beeindruckender aus – von Show­
reels und Videos ganz zu schweigen.
Nerdindustries hat sich sogar komplett
gegen einen Mobile-Auftritt entschie-
den. Ruft man ihre Website auf einem
kleineren Screen auf, bekommt man
nur die Botschaft, man solle sie auf ei-
nem großen Bildschirm ansehen. »Das
ist gegen den Trend, geschieht aber
aus gutem Grund: Das Look-and-feel
unserer Website, die stark auf Bewegt­
bild setzt, lässt sich einfach nicht auf
kleinere Screens übersetzen. Da woll-
ten wir keine Kompromisse machen«,
erklärt Mathias Keswani.
Voll auf mobile Optimierung hat
dagegen das Digitalstudio swipe ge-
setzt. Die Kreativen folgten bei der
Entwicklung nicht nur der Devise »Mo-
bile first«, sondern auch der Idee eines
Responsive Poster: Die Seite passt sich
dynamisch jedem Screen an, wobei
sich immer wieder neue Kompositio-
nen ergeben. Viel Weißraum und pla-
kative Typografie geben der Seite die
Ästhetik eines modernen Printmaga-
zins. Durch das cleane Design und Ne­
on­akzente, die bei jeder Session die
Farbe wechseln, fällt die Seite positiv
auf und unterstreicht gleichzeitig die
Kompetenz des Büros: »den klaren,
zeitgemäßen Mix aus Magazin und In-
teraktion«, wie es auf der Website
heißt. Die Entstehung des Auftritts
wird in einer Case Study detailliert vor­
gestellt – so bekommt der Besucher
neben einer ästhetisch ansprechen-
den Website gleich einen Einblick in
die Arbeitsweise der Agentur. Einen
besseren Pitch ohne persönlichen Kon­
takt kann es kaum geben.  nik
PAGE eDossier 13.14 007
Nette Gimmicks
n Steht das Grundkonzept für den Webauftritt,
kann man an kleineren Stellschrauben drehen. Visu-
elle und inhaltliche Gimmicks frischen eine Website
auf und sorgen für Pluspunkte beim User. Hier eine
kleine Sammlung von Hinguckern, die uns beson-
ders gefallen haben:
Die Designagentur Mooi in Linz hat die Anzeige
im Tab des Browsers so programmiert, dass
dort »Come back to Mooi« steht, wenn man einen
anderen Tab öffnet.
≥  http://mooi-design.com
Das New Yorker Designstudios mgmt peppt
seine sonst eher nüchterne Website mit kleinen
animierten Strichmännchen auf.
≥  http://mgmtdesign.com
Ruft man die Website von Jung von Matt auf
dem iPad im Hochformat auf, bekommt man nur
ein gemaltes Porträt von CEO Peter Figge zu
sehen mit dem Hinweis, die Seite doch bitte im
Landschaftsmodus zu betrachten.
≥  www.jvm.com
Stefan Sagmeister zeigt per Live-Cam, was in sei-
nem New Yorker Studio Sagmeister & Walsh los
ist. Die Navigation der Website ist auf den Agentur-
boden gemalt.
≥  www.sagmeisterwalsh.com
Die internationale Digitalagentur Razorfish treibt
den Wettstreit zwischen den Standorten an, indem
sie in einer »Zeitgeist«-Leiste Statistiken zu den
Tätigkeiten der einzelnen Büros anzeigt. Dabei
handelt es sich aber nicht um Pitchgewinne oder
Auszeichnungen, sondern um Alltagsinfos – etwa an
welchem Standort am meisten Kaffee getrunken
oder wo am häufigsten gefeiert wird. Dem New
Yorker Office können die internationalen Kollegen
allerdings in keiner Disziplin das Wasser reichen.
≥  www.razorfish.com/#!zeitgeist
Hundefotos! In der Agenturbranche haben offen-
bar die Hundeliebhaber die Oberhand. Jung von
Matt hat sogar einen eigenen »Dogs«-Tab auf ihrer
Homepage, in dem Hundefotos von allen Stand-
orten versammelt sind.
≥  www.jvm.com/de/dogs/index.html
PAGE Online
Die Links zu den
genannten Websites
finden Sie unter
www.page-online.de/
selbstdarstellung-
im-web
http://brithanson.com/ 008 PAGE eDossier 13.14 (Beitrag aus PAGE 12.2012)

Das bin ich

Online-Portfolios sind heute Pflicht, doch viele Gestalter schrecken vor HTML und CSS zurück. Die
Lösung: Tools, mit denen sich schnell und intuitiv Websites erstellen lassen – ganz ohne Coding

n Eine eigene Website zu bauen er-
fordert Zeit – vor allem für Leute, die
keine Programmiersprachen beherr-
schen. Ist die Seite einmal online, ist
der Stress noch nicht vorbei: Jede Än-
derung erfordert erneutes Eintauchen
in die Welt von HTML, CSS und Co. Das
führt häufig dazu, dass Portfolios sel-
tener aktualisiert werden, als eigentlich
nötig wäre. Zumal es genug andere Pro­
jekte gibt, die Zeit und Aufmerksam­keit
in Anspruch nehmen. Vor allem Foto-
grafen, Illustratoren und auf Print spe-
zialisierte Designer tun sich mit ihrer
Webpräsenz oft schwer. Dennoch ist
die­se heutzutage essenziell für den
professionellen Auftritt – eine eigene
URL macht sich auf der Visitenkarte
einfach besser als der Link zum Be-
hance- oder about.me-Profil.
Zum Glück stehen immer mehr Web­
applikationen zur Verfügung, die es Ge­
staltern ohne Programmierkenntnis­se
ermöglichen, schnell professionelle On­
line-Portfolios anzulegen – und das für
wenig Geld. Bislang schreckten viele
vor den mangelnden Individualisie-
 PAGE eDossier 13.14 009

Für Blogger Squarespace

n Squarespace hat im Juli eine neue dienen, aktuell wird allerdings noch an
Version gelauncht. Die aktuelle Layout- einer besseren Funktionalität gefeilt.
Engine ermöglicht eine intuitive Erstel­ Eine Statistik nach dem Vorbild von
lung und Bearbeitung der Website per Google Analytics, Suchmaschi­nen­­opti­
Frontend-Editing, Dateien lassen sich mierung und Bildbearbeitungsfunktio­
direkt vom Desktop in den Browser nen gehören ebenfalls zum Angebot.
ziehen. Derzeit stehen zwanzig Design- Im Vergleich zu anderen Portfolio-
Templates zur Verfügung, bei denen Anwendungen setzt Squarespace ver-
man Farbpalette, Font und Layout be- stärkt auf die Integration von Social
http://darrenbooth.com/

stimmen kann. Die Designs sind klar Media. Jede Website hat ein eigenes
und reduziert, die Arbeiten stehen im- Blogging-Tool, in das Nutzer die Inhal­
mer im Fokus. Der Domain-Name ist te von Tumblr, WordPress oder Blog-
frei wählbar und die Darstellung für ger importieren können. So sind sämt­
mobile Devices optimiert. Auch das li­che Blogposts an einer Stelle zusam-
Editing-Tool lässt sich per iOS-App be- mengefasst und nichts geht verloren.
Auch Twitter- und Instagram-Feeds las­
sen sich einbinden sowie umgekehrt
neue Einträge auch automatisch bei
Twitter und Facebook veröffentlichen.
Kommentaroptionen ermöglichen un-
mittelbares Feedback auf der Website,
außerdem kann man mehrere Contri-
butors für eine Seite freischalten. So
eignet sich Squarespace auch für Agen­
turen. Die für die Kreativszene konzi-
pierte Anwendung zählt mittlerweile
auch einige Unternehmen zu ihren
Nutzern, für die die New Yorker Firma
spezielle Templates entworfen hat.

Fazit: Squarespace ist besonders für

Leute attraktiv, die im Social Web aktiv
sind. Mit dem Tool lassen sich sowohl
Website und Blog venetzen als auch
Social Networks nahtlos einbinden.

Preis: 14 Tage frei, Standard-Account

etwa 10 Dollar im Monat (100 Dollar
im Jahr), Unlimited-Account ungefähr
20 Dollar im Monat (190 im Jahr)
≥  www.squarespace.com
http://vanbruntstillhouse.com/

www.lostswell.com/
010 PAGE eDossier 13.14 (Beitrag aus PAGE 12.2012)

rungsmöglichkeiten solcher Tools

zurück – wie soll man seine Kreativität
beweisen, wenn man eine Website von
der Stange hat? Doch die Tools der
neu­en Generation bieten zahlrei­­che
Mög­lichkeiten, das persönliche Port­
folio den eigenen Bedürfnissen ent-
sprechend zu gestalten.
So lässt sich das Layout anpassen,
Farbpalette und Typo auswählen und
bei manchen Diensten auch in den
Sourcecode eingreifen, um tiefere Ver­
änderungen vorzunehmen. Frei be-
stimmbare URLs, eigene Favicons und
der Verzicht auf Eigenanzeigen der
Plattformen (beziehungsweise ganz
de­­zente Hinweise) tragen zur profes-
sionellen Anmutung der Online-Prä-
senzen bei – ebenso wie die puristi­
schen Layouts, die die Arbeiten in den
Mittelpunkt stellen. Zudem bieten alle
Tools die Möglichkeit, Social-Media-
Ka­näle zu integrieren, sodass die eige-
ne Website zur Anlaufstelle für persön­

http://salon.io/janalinaberkenbusch/
liche Inhalte im Social Web werden
kann. Alle Anbieter erfüllen eine wei-
tere wichtige Voraussetzung: Die mit
ihnen eingerichteten Portfolios sind
http://salon.io/Caspar

auch auf mobilen Devices darstell­bar,

die meisten mittels Responsive De­sign
für alle Bildschirmgrößen optimiert.
Wem eine Responsive Website nicht
genügt, der kann auch eigens ein mo-
biles Portfolios erstellen. Mit Booklets
(  www.bookletsworld.com  , gratis) las-
sen sich etwa Collagen aus Text, Bild
und Sound zusammenstellen, die be-
sonders für die Darstellung auf Smart-
phones und Tablets optimiert sind. Ein
umfangreicheres Tool ist die App Port-
folio für iPhone (2,39 Euro) und iPad
(11,99 Euro). Hier lassen sich via Drop-
box hochgeladene Bilder in Ga­lerien
anordnen. Beide Tools eignen sich für
die schnelle Prä­sen­tation unterwegs –
ein richtiges Online-Portfolio können
sie aber nicht ersetzen.
Wir stellen hier Portfolio-Anwen-
dungen vor, die den Ansprüchen von
Kreativen aus verschiedenen Diszipli-
nen gerecht werden. Sie bieten zwar
nicht so viele Freiheiten bei der Ge-
staltung wie selbstständig program-
mierte Web­sites. Die Nutzer schätzen
an ihnen aber die intuitive Bedienbar-
keit, die eine schnelle Umsetzung er-
laubt, und nehmen dafür gern ein paar
Einschränkungen bei der Individuali-
sierbarkeit in Kauf. Neben üblichen
Standards wie Multimedia-Einbindung,
Social-Media-Integration oder mobiler
Nutzbarkeit hat jedes Tool seine eige-
nen Schwerpunkte – sei es in Design,
Funktionsweise oder Community. Letzt­
lich entscheiden die eigene Zielsetzung
und Geschmack über die Auswahl. nik
Für junge Kreative Salon.io
n Salon.io, entstanden in einem In-
teractive-Design-Kurs an der Hochschu­
le für Gestaltung Offenbach (siehe
PAGE 07.12, Seite 104), war ursprüng-
lich als interne Plattform für Studen­ten
gedacht, die dann aber weiterentwi-
ckelt wurde. Die Single-Page-Web-App
befindet sich noch in der Private-Beta-
Phase. Demnächst startet ein Presale,
um die letzten Programmierfeinhei­ten
finanzieren zu können.
Das Tool bietet die Möglichkeit, Bil-
der vom Desktop direkt in den Brow­
ser zu ziehen und sie dort zu bewegen.
Um eine Website zu erstellen, muss
man nicht selbst programmieren –
man kann es aber. Ein Code-Editor im
System erlaubt es Usern mit HTML-
und CSS-Know-how (und Premium-
Account), ihren Auftritt nach Belieben
zu individualisieren. Allen anderen ste­
hen Design-Templates, verschiedene
Webfonts und Drag-&-Drop-Funktio­
nen zur Verfügung. Dazu lassen sich
Social Media, Sound- und Video-Files
nach Belieben einbetten. Salon.io-Sites
funktionieren auf mobilen Geräten,
die Darstellung wird derzeit aber noch
optimiert. Der Domain-Name ist frei
wählbar. Printdesigner Caspar Wünd-
rich lobt unter anderem den schnellen
Support der Betreiber.
Die Designs von Salon.io wirken jün­
ger und verspielter als bei anderen An­­
bietern – viele der Websites erinnern
etwa an den ungeordnet wirken­den
Look des Inspirationsblogs Haw-lin. Ei­­
ne Besonderheit ist, dass Besucher die
Inhalte bewegen können – sofern die-
se Funktion freigeschaltet ist. Die Ver-
änderungen werden nicht gespeichert,
sorgen aber für eine spannen­­dere User
Experience. Unter den Nutzern finden
sich bisher neben Grafik-Desi­gn­ern
und Fotografen auch viele Musiker.
Fazit: Das Angebot des Start-ups wirkt
frischer und hipper als andere. Das
dürfte besonders Studenten und junge
Kreative ansprechen. Nutzer mit Co-
ding-Know-how und Premium-Account
können tief in die Programmierung ih-
rer Site einsteigen. Auch hier gibt es
deutschsprachigen Support.
Preis: Basic-Account einmalig etwa
12 Euro (begrenztes Datenvolumen),
Premium-Account circa 90 Euro im
Jahr (im Presale nur 45 Euro)
≥  www.salon.io
 PAGE eDossier 13.14 011

Für Ästheten AllYou

n Die Züricher Agentur PlasmaDesign
hat ihre Portfolio-Applikation Mitte
2011 gelauncht. Websites lassen sich
mit ihr schnell und intuitiv per Drag-
and-Drop anlegen, ein Backend gibt es
nicht. Zahlreiche Templates und Ge­stal­
­tungs­details ermöglichen ein hohes

http://grol.allyou.net/160076
Maß an Individualisierung. So stehen
etwa 93 Webfonts zur Auswahl, und Bil­
der lassen sich horizontal, vertikal oder
als Slideshow anordnen. Nutzer kön-
nen eine eigene URL wählen und nach
Belieben Plug-ins anderer Dienste wie
Facebook, Twitter oder Google+ ein-
binden. Dank Responsive Design pas­
sen sich die Sites automatisch verschie­
denen Bildschirmgrößen an. »Wir wol-
len ein möglichst umfassen­des Tool bie­
­ten, damit man keine zu­sätz­liche Sei­­­te
mehr braucht«, erklärt Christian Weber,
Geschäftsführer von Plasma Design.
AllYou richtet sich explizit an Krea-
tive. Fotografen, Künstler und Stylis­ten
stellen derzeit die größte Nutzergrup-

pe. Auffällig an dem Tool ist das redu-
zierte, cleane Design, das die Arbeiten
in den Mittelpunkt rückt. Aufgrund der
hohen Individualisierbarkeit sieht den­
noch kein Profil aus wie das andere.
Corinne Tan, Fotografin aus Auckland,
schätzt an AllYou auch den Service der
Betreiber. Olga Gromova, Grafik-Desi-
gnerin in London, berichtet von einer
teil­weise sehr langen Ladezeit, ­sons­t
ist auch sie mit dem Dienst zufrieden.
Fazit: AllYou eignet sich für Kreative
mit einer Vorliebe für puristisches Web­
design. Die Bedienung ist durch Front­
end-Editing besonders schnell und in-
tuitiv. Zu empfehlen für alle, die einen
deutschsprachigen Support vorziehen.
Preis: 30 Tage frei, danach rund 12 Eu­ro
im Monat oder knapp 100 Euro im Jahr
≥  www.allyou.net
Für Präsentatoren projeqt
n Ursprünglich entwickelte TBWA pro­
­jeqt, um eine übergreifende Web­site
für das Agenturnetzwerk aufzubauen.
Die Anwendung orientiert sich weni-
ger an gängigem Webdesign als an
Präsentationsprogrammen. Projeqt-
Seiten sind aufgebaut wie Slideshows,
die Arbeiten stehen klar im Mittel-
punkt. Neben Bildern werden in den
meist horizontalen Slides auch Feeds
von Social Networks angezeigt. URL
www.martenaduss.com/33269
und Favicon lassen sich individuell an-
passen, das Layout ist dagegen wenig
beeinflussbar. Kürz­lich erweiterte pro­
jeqt aber das Angebot mit einer Tile-
Optik im Pinterest-Stil und kündigte
weitere Templates an.
Zu den Nutzern gehören nicht nur
Freelancer, sondern auch Agenturen,
wie etwa Dorland aus Berlin. Die An-
wendung biete ihnen alles, was sie um­
setzen wollten, sagt Chief Creative Of-
ficer Hendrik Melle. »Wenn jemand so
ein gutes Tool produziert, muss man
das Rad kein zweites Mal erfinden. Die
Inhalte machen den Wert aus, nicht die
Plattform.« Außer Bildern las­sen sich
etwa PowerPoint- und PDF-Dokumen­
te hochladen, dank Responsive Design
ist das Profil auf allen Gerä­ten abrufbar.

Fazit: Projeqt eignet sich primär für

die reine Darstellung von Arbeiten. Wer
in kürzester Zeit ein Online-Profil für
eine Präsentation zusammenstellen
http://tbwa.com

will, ist mit dem Tool bestens beraten.

Preis: kostenlos
≥  www.projeqt.com
 012 PAGE eDossier 13.14 (Beitrag aus PAGE 12.2012)
Für Unkomplizierte
4ormat
n Die Anwendung ist einfach zu be-
dienen und zu individualisieren. Nut-
zer können Layout, Farben und Typo-
grafie frei wählen und bei Bedarf in
den Sourcecode eingreifen – sofern
sie einen Pro-Account haben. Zudem
bietet 4ormat die Integration von So-
cial Media und Google Analytics an so-
wie ein eigenes Favicon. Der Domain-
Name ist frei wählbar, ein kleiner
Hinweis auf der Website deutet auf
4ormat hin. Die Websites sind mobil
optimiert. Der New Yorker Grafik-Desi-
gner Rhoan O’Connell lobt, dass sich
die Layouts für alle Gestaltungsdiszi­
plinen eignen – für Motiondesigner
ebenso wie für Printspezialisten. Un-
ter den Nutzern finden sich viele Fo­
tografen, die meisten stammen aus
Nord­amerika – was mit dem Standort
Toronto zusammenhängt.
Fazit: 4ormat bietet soliden Service,
sticht aber weder bei Nutzung noch
Design besonders heraus. Es eignet
sich für alle, die schnell und unkompli-
ziert eine Website erstellen wollen und
keinen Wert auf eine Community legen.
Preis: 30 Tage gratis, Basic-Account
rund 7 Dollar im Monat, Pro-Account
etwa 13 Dollar im Monat
(Agenturen rund 25 Dollar)
≥  www.4ormat.com
http://fradinemmanuel.4ormat.com/
http://rhoan.4ormat.com
Für Anspruchsvolle Cargo Collective
n Cargo Collective ist eine Invite-only- sites sehen entsprechend professionell
Community. Um das Tool nutzen zu aus. Ein Schwachpunkt ist aber das
können, muss man sich per E-Mail be- (noch) fehlende Responsive Design.
werben – in der Regel werden aber
kaum Anfragen abgelehnt. Cargo bie- Fazit: Cargo Collective eignet sich für
tet 39 Design-Templates an, die meis­ Kreative, die Wert auf Exklusivität legen
ten davon sind schlicht und symme- und zugleich Interesse am Netzwerken
tri­sch. Die Plattform dient als Port­ haben. Am besten lässt sich das Ange-
folio­tool sowie als Community. Dabei bot ausschöpfen, wenn man seine Site
fungiert das Frontend als öffentliche durch eigene Programmierung anpasst.
Website, das Backend als persönliches
Profil innerhalb des Netzwerks. Hier Preis: begrenztes Profil gratis, sonst
kann man anderen Mitgliedern folgen circa 9 Dollar im Monat oder ungefähr
und Beiträge kommentieren. Neben 70 Dol­lar im Jahr
vie­len Grafik-Designern tummeln sich ≥  www.cargocollective.com
bei Cargo Collective Musiker, Maga-
zine und sogar ein Designinstitut.
Die Plattform ermöglicht – und
empfiehlt – die Individualisierung mit-
tels Coding. Ist man darin selbst nicht
bewandert, bietet Cargo eine Liste
von Developern innerhalb der Commu­
nity an, die man für die Customization
anheuern kann. Grafik-Designer Tim
Boelaars aus Amsterdam nutzte diese
Möglichkeit, um ein möglichst indivi-
duelles Profil zu erhalten. Er lobt au-
ßerdem das einfache Hinzufügen, Ent­
fernen oder Verbergen von Inhalten.
Cargo ist ein Freemium-Angebot:
Bei der kostenlosen Nutzung sind das
http://michaelstevenforrest.com/
Datenvolumen und die Zahl der Pages
beschränkt. Beim kostenpflichtigen Ac­­
count kann man sich die URL aussu-
chen und hat erweiterte Programmier­
möglichkeiten. Cargo wirkt sehr seriös
und auf Qualität bedacht. Die inner-
halb der Community erstellten Web-
www.timboelaars.nl/

Für Netzwerker
Behance ProSite
n Den meisten Kreativen ist die Com-
munity Behance bekannt, bei der man
kostenfrei ein Profil anlegen kann, um
seine Arbeiten zu präsentieren. Im
März 2011 erweiterte Behance ihr An-
gebot um ein Tool zur Erstellung einer
eigenen Online-Präsenz: ProSite. Auch
hier sind keinerlei Coding-Kenntnisse
nötig, gestaltet wird per Drag-and-
Drop. Das Grundlayout ist zwar immer
gleich, lässt sich aber in hohem Maße
variieren, etwa bei der Anordnung von
Bildern, Hintergrundfarben und Web-
fonts. Ein schöner Effekt sind Roll-over
Shades, mit denen durch Mouse-over
farb­liche Highlights ausgelöst werden
können. ProSite bietet alle Standards
wie eigene URL, Social-Media-, Google-
Analytics- und Multimedia-Einbindung
sowie Kompatibilität für sämtliche mo­
bilen Devices. Darüber hinaus können
User ein eigenes Favicon einsetzen.
Um eine ProSite einzurichten, ist
ein Behance-Profil notwendig, da von
hier die Inhalte hochgeladen werden.
Bei Bedarf lässt sich dieses verstecken,
so­dass es nur als privates Archiv fun-
giert. Die Pflege zweier Profile mag
auf­wen­dig klingen, hat aber Vorteile:
http://lionelfernandezroca.com/
So sind die Arbeiten an zwei Stellen im
Netz auf­findbar und Behance dient
zu­dem als Community für den Aus-
tausch mit an­deren Kreativen oder die
Suche nach Projektpartnern. Während
man die Ar­beitsbeispiele auf der eige-
nen Website zwecks Übersichtlichkeit
einschrän­ken soll­te, kann man das
Behance-Pro­fil als Sammelstelle aller
Pro­jekte nutzen.
Fazit: ProSite bietet sich besonders
für Kreative an, die bereits ein Behance-
Profil besitzen. Der Grad an Individua-
lisierbarkeit ist nicht so hoch wie bei
http://griffincreech.com/
anderen Diensten, dafür ist die Bedie-
nung einfach und schnell.
Preis: circa 11 Dollar im Monat,
rund 100 Dollar im Jahr
≥  www.prosite.com
PAGE eDossier 13.14 013
http://jacknl.com/
www.saragaragnani.com/
Für Social Webber
Flavors.me
n Mit Flavors.me lässt sich zwar auch
eine Website gestalten, doch liegt der
Fokus auf der Integration bestehender
Präsenzen im Social Web. Auf der Profil-
Startseite erscheint meist eine Liste
verschiedener Dienste wie Ins­tagram,
Twitter oder YouTube, deren Inhalte
sich der Besucher anzeigen lassen kann.
Inhalte werden also nicht auf die Web-
site hochgeladen, sondern aus ande-
ren Diensten importiert. Die Individua-
lisierbarkeit der Seite ist begrenzt, die
Selbstdarstellung erfolgt über die ein-
gebundenen Kanäle. Stef Spijkermans,
freier Stratege in Amsterdam, schätzt
diese Übersichtlichkeit: »Im Gegensatz
etwa zu WordPress verliert man sich
nicht in Tausenden von Optionen und
Plug-ins. In wenigen Minuten hat man
eine Online-Präsenz erstellt, die gut
aussieht und repräsentabel ist.«
Fazit: Mit Flavors.me lässt sich eher
ein Aggregat für Social-Media-Inhalte
erstellen als eine eigenständige Site.
Das Tool eignet sich für Kreative, die
unterschiedliche Kanäle bespielen und
diese an einem Ort bündeln wollen.
Preis: limitierter kostenloser Zugang,
Profi-Account rund 20 Dollar im Jahr
≥  www.flavors.me
Inspiration pur!

Gleich
zugreifen !

PAGE präsentiert die entscheidenden Trends

in Sachen Konzeption, Gestaltung & Technik.
Jetzt zugreifen: shop.page-online.de/page-mini