Wie ihr fürs Web designt: “Einige Trends sind aber völliger Quatsch.”

14. April 2016 von Sebastian Maier

Interview von Matteo Sanfilippo von SANFILIPPO.DESIGN zum Thema: Wie designst du fürs Web?

In unserer Interviewreihe rund um das Thema Designen fürs Web sprachen wir dieses Mal mit Matteo Sanfilippo, Agenturinhaber von SANFILIPpO.DESIGN. Die seit 2005 bestehende Agentur hat ihre Schwerpunkte in den Bereichen IT & Technologie, Consulting und Gesundheit. 

Matteo Sanfilippo von SANFILIPPO.DESIGN


1. Welche Tools verwendest du zum Designen von Websites und warum?

  1. Konzeption: Für die Struktur, Planung und die Übersicht für den Kunden, also die Sitemap, nutze ich das Mindmap-Tool XMind. Mit diesem Tool ist eine schnelle Bearbeitung möglich, ich kann es im Team teilen und der PDF-Export für Kunden ist einwandfrei. Anhand der Sitemap kläre ich im Vorfeld, ob der Kunde mit der anvisierten Struktur d'accord geht.

  2. Prototyping: In InDesign stelle ich mit grauen geometrischen Formen und schwarzer Schrift “quick and dirty” den Aufbau der Startseite und der wesentlichen Unterseiten dar. Dieser Zwischenschritt hat sich aus zwei Gründen bewährt: A) Der architektonische Plan muss vor dem Layout ohnehin erledigt werden und B) der Kunde ist involviert. So hat der Kunde die Möglichkeit zu sagen "Ja, der Aufbau passt – jetzt designen bitte".

  3. Layout: Nach dem “Go” des Kunden folgt das Layout in Photoshop. In einer PSD und mehreren Ebenenkompositionen – nicht zu verwechseln mit Ebenen – erstelle ich einfache bis komplexe Webdesigns. Da ich das seit 10 Jahren mit PS mache, ist mein Workflow flott – ich schaue mich auch seit Beginn immer wieder um und teste andere Möglichkeiten wie beispielsweise das Designen via Adobe InDesign, Adobe Muse oder das brandneue Adobe Experience Design. Mit letzteren beiden experimentiere ich noch, bleibe aber bislang bei meinem Workflow mit Photoshop.

  4. Präsentation: Meine Ergebnisse exportiere ich als JPGs und lade diese in ein Online- Präsentationstool, das ich eigens für unsere Kunden habe programmieren lassen. So können unsere Kunden die Layouts in einer realistischen Umgebung betrachten: in Ihrem Browser. Denn die Betrachtung in PDF-Readern und Bild-Programmen ist leider missverständlich, beispielsweise aufgrund eines unerwünschten Zooms, Verzerrung, Farbprofilen etc.

  5. Programmierung: Dies übernimmt ein gutes Webentwicklerteam wie beispielsweise smooster, das die Ergebnisse realisiert.
      

2. Was ist für dich der Hauptunterschied zwischen einem Design für Print und einem für Web? Worauf sollte man hier besonders achten?

Eine gute Frage. Ich komme quasi aus dem Print und habe mir Screen Design via Learning by Doing beigebracht. 1999 gab es noch keine Studiengänge oder Fächer in diesem Bereich. Damals war es für einen Printler wie mich schon herausfordernd genug, sich in dieses interaktive und scrollbare Medium einzufühlen. Seit etwa drei Jahren ist es noch schwieriger für uns Printler, in der Welt der Screen Designs Fuß zu fassen, da wegen Responsive Design nun nicht mehr pixelgenau designt werden kann. Hier half mir die Teilnahme an einem Workshop zu diesem Thema, um Sicherheit und Gefühl für Responsiveness zu erhalten.

Im Print ist alles statisch, man hat klare Grenzen und kann im Raum komponieren. Bei Screen Design auch, aber hier ist alles in Bewegung. Die Auseinandersetzung mit guten Websites hilft, um ein Gefühl dafür zu bekommen.

Was mir besonders wichtig an einem Webdesign ist:

  1. Das Design entspricht den Bedürfnissen und Erwartungen der Zielgruppe – und nicht meinem persönlichen Geschmack, zumindest nicht ausschließlich.

  2. Die Website hilft dem Besucher, schnell an das wesentliche Ziel zu kommen. Bei Websites für Coaches sind es z. B. Videos, bei denen ich den Coach in Bewegung sehen, seine Gestik und Sprache erfassen kann – so kann ich feststellen ob dieser Mensch der Richtige für mein Anliegen ist. Bei einem Friseur oder einem Gasthaus sind Videos natürlich auch vorteilhaft – wichtiger ist hier aber, auf den ersten Blick Kontakt aufnehmen zu können, also die Telefonnummer oder den Standort finden zu können. Unsäglicherweise sind auf vielen solcher Websites die Kontaktdaten sehr gut versteckt. Fast als ob es den Betreibern unangenehm wäre, wenn jemand anruft.

  3. Das Design wird für den Kunden und seine Zielgruppe individuell entwickelt. Wir lehnen Template-Vorlagen von Wordpress, Typo3 etc. nicht strikt ab – unser Anspruch ist aber der, dass wir nichts von der Stange weiterentwickeln oder verkaufen wollen. Wir möchten unseren Kunden einzigartige Designs erstellen, die informieren, überzeugen und Freude bringen.

  4. Die Website ist responsive und funktioniert selbsterklärend. Damit ist nicht gemeint, dass die Seite nach Schema 0815 gestaltet und aufgebaut sein muss – im Gegenteil. Aber eine Seite mit einem rätselhaften Menü und nicht richtig funktionierenden Elementen ist wenig hilfreich. Beim Planen und Gestalten vergisst man gerne neue Besucher, die es glücklicherweise auf die Seite geschafft haben. Diese sind in der Regel knallhart – sie springen sofort ab, wenn die Seite zu langsam lädt oder die Bedienung irritiert. Niemand will freiwillig eine Software oder Website bedienen, für die man erst eine Anleitung lesen müsste. Der Absprung nach den ersten Sekunden ist bei solchen Seiten vorprogrammiert.

3. Wo bekommst du deine Inspirationen her?

Meist geschieht das völlig natürlich und ich entdecke gute neue Sites, während ich einen Blick auf Xing oder Facebook werfe. Diese Links speichere ich mir für eine spätere genauere Betrachtung ab.

Um gezielt nachzusehen, wohin ein Trend geht, besuche ich solche Seiten wie mediaqueri.es, www.awwwards.com, webbyawards.com oder www.smashingmagazine.com. Dort finde ich einiges an Inspirationen. Einige Trends sind aber völliger Quatsch. Häufig werden sie auch so stark ausgereizt, dass sie ihre Wirkung völlig verfehlen, wie beispielsweise striktes Flat-Design und Long-Shadow-Design. Aus diesen Beobachtungen mache ich meist einen eigenen Zwischenweg – und hinterfrage dies immer wieder.


4. Was gefällt dir an Webdesign am meisten? Und was ist in deinen Augen die besondere Herausforderung?

Am besten gefällt mir, dass Webdesign ständig in Bewegung ist. Dies ist aber gleichzeitig die Herausforderung. Ständig aber schleichend verändert sich unser Verhalten im Web – so kommt es, dass heute eine wesentlich größere Schrift erwartet wird als vor drei Jahren, Videos der neue Standard sind und Flash-Animationen durch HTML5 ersetzt wurden.


5. Welchen Stil/Trend findest du momentan besonders schön?

Es kommt darauf an, ob für Business oder Unterhaltung. Für Letzteres gefallen mir Onepager mit Storytelling á la apps.ua/en.


6. Designst du erst für Desktop und wandelst das dann für Liquid-Responsive um oder designst du nach dem Mobile-First-Ansatz?

Hier gehen wir nutzerorientiert ran. Geht es um eine Zielgruppe, die überwiegend privat surft, ist anzunehmen, dass diese mit ihren mobilen Geräten auf die Seite gelangen. In diesem Fall planen und gestalten wir also Mobile-First.

Websites, die geschäftlich genutzt werden, planen wir zunächst für Computerbildschirme.


7. Was hältst du von dem Content-First-Ansatz? Also wenn sich das Design nach der Art und der genauen Menge des Textes richtet.

Hier verstehe ich die zwei Lager nicht. Wenn eine Website nur nach Content-First-Ansatz geplant wird, die Zielgruppe es aber eilig hat, sollte der Content kurz sein – wo wir wieder bei Mobile-First wären.

Und umgekehrt: Wird bei Mobile-First zu minimalistisch gestaltet, ohne Möglichkeit, die Information zu vertiefen, wirkt die Seite zu platt.

Beide Ansätze sollten Hand in Hand gehen und je nach Zielgruppe berücksichtigt werden.


8. Gibt es einen Stil oder eine Art von Website, die du noch nicht umgesetzt hast, die du aber unbedingt mal umsetzen möchtest?

Hmm, ja: eine Site, die virale Verbreitung finden soll. So ein irres Projekt wie z. B. die "tiefste Website der Welt" von Borjomi wäre reizvoll.


9. Hast du einen Tipp zu Webdesign, den du eher printlastigen Designern mitgeben möchtest?

Aufmerksames Surfen und genaues Betrachten angenehmer und ansprechender Websites und die Interaktionen auf diesen Seiten.


10. Worin siehst du zukünftig für dich die größte Herausforderung im Web-Design?

Vor sechs Jahren kamen die Smartphones und Tablets auf den Markt, kurz darauf kündigte sich TV zum Surfen an und seit zwei Jahren gibt es Smart Watches. Wir müssen nicht den Anspruch haben, immer im Voraus Bescheid zu wissen, was das nächste große Ding ist. Aber wenn wir feststellen "huch, mein Backofen zeigt mir Tipps von chefkoch.de", dann würde ich mich mal damit befassen, was bei Backofen-Screens die Herausforderungen und Chancen für gutes Screen Design sind. Also einfach aufmerksam bleiben und den Kopf nicht in den Sand stecken, wenn der geliebte Workflow überholt wird.

Eine große Gefahr sind diese günstig erwerbbaren Templates von Wordpress, Joomla etc. – wie gesagt lehne ich diese nicht ab. Es gibt immer Berechtigungen für deren Einsatz, vor allem wenn das Budget schlank ist oder die Zielgruppe es einem Unternehmen/einer Marke nicht übel nimmt, wenn die Seite von der Stange ist.

Diese preisgünstigen Templates verzerren jedoch den preislichen Wert einer individuell angefertigten Website. Vergleichen wir das am Beispiel eines Konditors. Dieser fertigt liebevoll und nach allen Regeln der Konditorskunst eine schöne, bekömmliche und schmackhafte Torte mit guten Zutaten. So etwas hat schon immer seinen Preis gehabt. Dann gab es plötzlich die Discounter und alle vergleichen mit diesem billigeren Produkt – welches aber mit Sicherheit nicht dieselben Qualitäten hat. Heute haben wir die Wahl und das ist auch OK.

Nun besteht die Gefahr, dass die Verbraucher den Wert der guten Arbeit eines individuell angefertigten Produktes eines Experten vergessen. Das Beispiel ist auch anwendbar auf Druckereien, Logo-Entwicklung, Programmierung etc.


11. Warum arbeitest du mit smooster zusammen? Und wobei greifst du gerne auf unsere Unterstützung zurück?

Ich liebe es, mit Profis zu arbeiten. Darum ist die Frage einfach zu beantworten, weswegen ich es genieße, smooster mit Website-Entwicklungen zu beauftragen: Vereinbarte Timings werden eingehalten, das Ergebnis sitzt wie angegossen, die Ansprechpartner und Entwickler sind in Deutschland tätig – was mir sehr wichtig ist –, und der Service und der Code sind ausgezeichnet.

Und das Beste: es wird mitgedacht. Denn jede unserer Websites wird individuell geplant und designt – und so genau und eingehend wir die Reinzeichnung und Dokumentation auch erstellen mögen... irgendwo ist irgendein Detail, das wir in der Dokumentation nicht berücksichtigt haben, vor allem bei komplexeren Websites. smooster denkt mit und stellt fest, ob hier oder dort noch eine Rücksprache notwendig ist. Darüber sind wir – und der Kunde – immer sehr dankbar. Kurz zusammengefasst: Ein sehr menschliches, zuverlässiges Team, das den hohen Anspruch an ein außergewöhnlich gutes Endergebnis besitzt und erfüllt.

zurück
comments powered by Disqus