Eine Webdesign Case Study erstellen - Portfolio Aufbau

Webdesign Case Study Inhalte

Überlege: Was willst du mit diesem Projekt kommunizieren?

Wenn ich eine Case Study für die Projektseite auf meiner Website erstellen möchte, dann starte ich nicht in einem Layout Programm.

Ich beginne damit, dass ich erstmal die Themen aufschreibe, die ich in dem Projekt auch an den Betrachter kommunizieren möchte.

Da es sich hier um eine Case Study für mein Webdesign Portfolio handelt, geht es primär darum, neue potentielle Kunden zu überzeugen und ihnen zu helfen, sich darin wiederzuspiegeln.
Es könnte also gut sein, dass das Projekt von einem ähnlichen Kunden gesehen wird. Vielleicht aber auch von einem Unternehmen, dass gleiche Herausforderungen oder Probleme hat und sofort sieht, dass ich diese für sie lösen könnte.

Alles, was ich also in diesem Fallbeispiel integriere, sollte auch auf dieses Ziel einzahlen. Solltest du dir dahingehend also bei einem bestimmten Bereich nicht sicher sein, ob du ihn überhaupt integrieren solltest, dann betrachte es einfach aus der Sicht eines Kunden.

Wenn du darüber nachdenkst, was einen neuen Kunden am besten überzeugt, dann ist es weniger die Typo, deine Farbpalette oder eine schicke Animation. Bevor er dich für einen Auftrag bucht, möchte er vor allem mehr Sicherheit haben, dass du ihm auch wirklich helfen kannst, seine Ziele zu erreichen.

Was wir also mit einer Case Study möchten, ist, dass der Betrachter aus dem Projekt sofort herauslesen kann, dass wir ihm einen Zuwachs an Wert liefern können.

In diesem konkreten Fallbeispiel, welches ich dir hier vorstelle, konzentriere ich mich auch genau darauf. Ich stelle die definierten Ziele des Kunden in den Vordergrund und beschreibe anschließend, wie ich eine Lösung gestaltet habe, die mit diesen Zielen übereinstimmt.

• Hilft ihnen die aktuelle Website ihre Business-Ziele zu erreichen?
• Was versuchen sie mit der Website zu erreichen, wenn ein neuer Besucher auf die Seite kommt?
• Bringt die aktuelle Website auch Geld ein oder generiert sie nur Ausgaben?

Die Konzeptphase

Sobald die Inhalte für die Case Study aufgeschrieben sind, importiere ich sie rüber in mein Design-Programm. In diesem Fall baue ich das Layout mit dem Design Programm Sketch.

Eine logische Reihenfolge und Struktur festlegen

Im ersten Schritt geht es darum, die Reihenfolge der Themen logisch und nachvollziehbar für den Betrachter aufzubauen. Das liefert mir gleichzeitig eine gute Struktur-Vorgabe für das Design, wenn es darum geht, zu entscheiden, welche Ausschnitte des fertigen Projekts ich integriere.

Spreche ich also in einem bestimmten Absatz über Responsive Design, sollte ich an dieser Stelle auch ein paar Mockups für das Smartphone platzieren. Das unterstreicht sozusagen nochmal, was ich inhaltlich kommuniziere.

Da das Projekt letztendlich auf meiner Website veröffentlicht wird, sind viele Vorgaben was Überschriften, Copy und Typo-Größen angeht, schon im Voraus definiert. Deshalb geht es jetzt erstmal darum, nicht nur einfach einen langen Copy-Block zu integrieren, sondern direkt ein paar interessante Anordnungen und Text-Style-Kombinationen zu finden. Diese sollen später mit verschiedenen Design-Mockups und Website-Screenshots harmonieren und den Betrachter durch die Case Study begleiten.

Da ich dazu tendiere, meine Fallbeispiele sehr ausführlich zu erläutern, habe ich mich bei diesem Projekt dazu entschlossen, wirklich nur die wichtigsten Sektionen größer für den Betrachter darzustellen. Die restlichen Absätze sollten eher als Infotexte verschiedene Layout Bereiche erklären und dabei mehr in den Hintergrund rücken.

Wer liest deine Case Study?

Du kannst dir merken, dass es zwei Arten von Betrachtern gibt. Einerseits diejenigen, die Zeit investieren und sich diese Inhalte auch wirklich durchlesen. Ein größerer Teil „scannt” aber vermutlich nur einzelne Headlines und scrollt sich zügig durch die Seite durch. Auch wenn das der Fall ist, sollten sie trotzdem ein Verständnis für das Projekt bekommen.

Versuche also am besten nicht zu lange Textblöcke zu integrieren, die den Betrachter gar nicht erst zum Lesen einladen.

Und mach schon ganz oben beim Titel des Projekts deine Aufgabe deutlich. Integriere also nicht nur den Kunden oder Projektnamen, sondern auch was du gemacht hast. Bsp: „Webdesign”, „Website Relaunch” oder „E-Commerce”.

Zudem integriere ich gerne ganz oben einen kurzen Einleitungstext, der direkt beschreibt, um was es in dem Projekt überhaupt geht. In meinem Fall hier von diesem Projekt habe ich das zum Beispiel so beschrieben:

Ich habe QUAAN Capital geholfen einen Relaunch der Website durchzuführen um zukünftig Kosten zu sparen, Reichweite zu erhöhen, Seitenbesucher in neue Kontaktanfragen umzuwandeln und ihre digitale Präsenz professioneller auszurichten.

—

Falls du gerade kein Kundenprojekt zum Umsetzen hast, trotzdem aber deine Projektseite mit einer Case Study erweitern möchtest, habe ich hier die richtige Anleitung für dich: Neue Kunden durch eigene Projekte anziehen – Strategie, Aufbau und Ideen.

—

Die Designphase

Sobald ich die Struktur und alle Texte in einem Artboard platziert habe, fange ich an ein paar Screenshots der fertigen Website als Mockups zu integrieren.

Dazu schweben mir manchmal schon ein paar Ideen im Kopf rum oder ich habe bei anderen Portfolios interessante Präsentationsarten aufgeschnappt, die ich einfach erstmal festhalten möchte. Hier geht es weniger um den richtigen Ausschnitt, sondern eher um den allgemeinen Stil, den ich später abwechselnd mit den Textinhalten verwenden kann.

Versuche jedem Projekt etwas eigenes zu geben

Mein Ziel ist es, dass jedes Projekt, welches ich in meinem Portfolio vorstellen möchte, auch einen eigenen besonderen Aufbau bekommt.

Ich möchte also nicht einfach nur die Struktur von einer anderen Case Study duplizieren. Jedes Projekt hat etwas eigenes und das versuche ich ein Stück weit mit zu übertragen.

Und hey, wir arbeiten als Webdesigner. Für uns sollte es also kein Problem sein, einen individuellen Aufbau umzusetzen. Letztendlich ist gerade das doch unsere Spielwiese und einfach nur Texte und Bilder untereinander zu integrieren, strahlt für mich nicht das aus, was ich an meine Kunden übermitteln möchte.

Denke einfach an die Geschichte, die du mit diesem Projekt erzählen möchtest. Und du weißt ja, dass jede Geschichte einzigartig ist und der Aufbau des Projekts sollte es deshalb auch sein.

Merke dir: Je hochwertiger du deine Design Arbeit präsentierst, desto mehr sehen potentielle Kunden, dass du nicht billig, sondern deinen Preis Wert bist.

Welchen Stil solltest du für die Case Study finden?

Schau am besten, dass das Projekt ein Stück weit das Brand des Kunden bzw. das Website Design wiederspiegelt. Die Seite sollte auf deiner eigenen Website nicht komplett aus der Reihe tanzen, aber du könntest ganz gut ähnliche Hintergrundfarben verwenden oder die Design-Sprache des fertigen Projekts übernehmen. War das Projekt also eher „verspielt” oder „clean” und „übersichtlich”?

In meinem Fall hat die Website des Kunden klare Linien, viel Freiraum und ein schlichtes Erscheinungsbild. Das übertrage ich ein Stück weit auch in den Aufbau dieser Case Study.

Das war auch ein Grund, warum ich mich anfangs gegen reale Mockups entschieden habe. Das heisst, ich wollte bei diesem Projekt keine Tablets oder Smartphones als Rahmen integrieren, sondern einfach nur Ausschnitte aus der Website als Screenshots. Am Ende bin ich ein Zwischending gefahren, welches den Formfaktor eines Tablets imitiert und gleichzeitig nochmal eine Trennung zu Hintergrundfarben und der Umgebung schafft.

Bilder der fertigen Website integrieren

Wenn es darum geht, Bilder in die Case Study zu integrieren, nutze ich fast ausschließlich die fertige Website als Vorlage. Ich integriere also nicht die Layouts aus meinem Design-Programm, sondern mache Screenshots der fertig umgesetzten Website.

Ich nutze dafür die Chrome-Browser-Erweiterung Full Page Screen Capture. Es gibt aber auch andere, wenn du einfach mal nach „Website Screen Capture Erweiterung” suchst.

Prinzipiell mach ich von jeder Seite der Website ein Screenshot in Desktop-, Tablet- und Smartphonegröße. Dadurch habe ich sie mit einem mal in gleichen Breiten und kann im Layout verschiedene Ausschnitte ausprobieren.

Ich arbeite hier bei mit einem 5k Bildschirm und dementsprechend werden auch Screenshots des Bildschirms sehr hochaufgelöst gespeichert. Das heisst ich kann sichergehen, dass die Mockups, die ich später aus Sketch exportiere, auch hochauflösend sind.

Achtung!
Auch wenn das Projekt den Betrachter quasi als Fallbeispiel Schritt für Schritt durch das Projekt führt, ist es trotzdem wichtig, dass du direkt zu Beginn bei der Einleitung schon ein Bild der fertigen Website integrierst. Denn je weiter unten es auftaucht, desto geringer ist die Chance, dass auch bis dorthin gescrollt wird.

Case Study lektorieren lassen

Ich bin nicht gut in Rechtschreibung und selbst wenn, übersieht man schnell kleine Fehler, die sich während des ganzen Prozesses eingeschlichen haben. Deshalb gebe ich das fertige Layout vor der Entwicklung immer nochmal einer zweiten Person in die Hand, die das Projekt für mich Korrektur liest.

Gerade im Design-Prozess schreibe ich immer wieder Wörter oder Absätze um und deshalb ist bei mir persönlich vor der Programmierung der perfekte Zeitpunkt dafür.

Unterschätze diesen Punkt nicht. Wenn du hochwertig rüberkommen willst, dann muss das auf ganzer Linie passieren.

Ein paar wichtige Stichpunkte zusammengefasst:

• Fange jede Case Study damit an, Textinhalte zu erarbeiten und zu überlegen, was du überhaupt damit kommunizieren möchtest.
• Versuche deine Textblöcke aufzuteilen und nicht zu lange werden zu lassen. Sie sollten den Besucher zum Lesen einladen.
• Das Projekt sollte auch verstanden werden, wenn man als Betrachter nur Bilder und einzelne Überschriften scannt.
• Integriere nicht einfach nur Bereiche, weil du sie als Designer gut findest.
• Deine Case Study sollte eine logisch nachvollziehbare inhaltliche Reihenfolge haben.
• Integriere auf jeden Fall ganz oben schon ein Bild des fertigen Projekts, nicht erst am Ende!
• Versuche den Aufbau deiner Projekte nicht jedes mal gleich aussehen zu lassen. Es sollte immer etwas auf den Kunden bezogen und eigenes sein.
• Lass deine Inhalte der Case Study Korrekturlesen!