Portfolio Konzeption

Portfolio Konzeption

In Webdesign von Christian Arns0 Comments

Unter der Portfolio Konzeption versteht man nicht das Design oder die Wireframe Konzeption, sondern welche Funktionen auf der Seite sind und was du mit der Seite erreichen möchtest. Vor dem Design und der Programmierung machst du dir also Gedanken über das Konzept der Seite. In diesem Fall geht es um eine Portfolio Webseite, mit der du dich für Projekte oder einen Job bewerben möchtest. Du solltest dir die Konzeptionsphase genau planen und einen Projektstrukturplan anfertigen.

Projektstrukturplan

Immer hat man zu wenig Zeit für eigene Projekte. Um dir die Arbeit weitestgehend zu erleichtern, solltest du dir eine Struktur in deine Projekte anlegen, wie hier im Beispiel, für deine Portfolio Konzeption. Aber nicht nur die Konzeption sollte strukturiert sein, sondern das komplette Projekt, inklusive Programmierung. Lege dir also dafür Zeiten und Deadlines fest, an die du dich halten kannst. Teile dafür dein Projekt in mehrere Schritte auf. So hast du Meilensteine, die du bewältigst und dadurch Motivation und Erfolg steigt. Dies kann zum Beispiel so aussehen:

Projektstrukturplan Portfolio

Portfolio Konzeption

Wer ist der Betreiber dieser Webseite? Und wer ist die Zielgruppe? (Studenten, Personaler, Mitarbeiter) Mit diesen zwei Fragen kannst du anfangen dein Konzept zu entwerfen. Um den Besucher das zu bieten, was er erwartet, musst du zwei weitere Punkte beachten: 1. Einfache Navigation 2. Wie machst du deine Arbeit? Darauf basierend kannst du nun eine Content Strategie entwickeln.

Bei deiner Navigation kommt es zum zweiten Punkt „Funktionen / Features“. Was brauch also deine Zielgruppe um mehr über dich herauszufinden? Bei Portfolios ist es ähnlich wie bei Lebensläufen.

  • Über mich / Biografie
  • Projekte
  • Leistungen
  • Kontakt

Jeder möchte bei einem Personaler herausstechen und bringt deshalb noch Alleinstellungsmerkmale auf der Seite unter. Betreibst du einen Blog und die Artikel sind relevant für deine Zielgruppe, kannst du diese gut unterbringen. Worauf du dich letztlich fokussierst, liegt an dir. Achte nur darauf, dass du weniger die Geschichte deines Lebens, sondern mehr die Geschichte erzählst, wie du deiner Zielgruppe helfen kannst, in dem was du machst.

Portfolio Design

Nicht nur kreative sind Webseiten-Besitzer. So kann es auch bei dir sein, dass du eine gewisse Inspiration und Hilfe bei der Auswahl der richtigen Elemente für dein Design brauchst. Abgesehen von Google kannst du auf Award-Seiten zurückgreifen. Beim Durchforsten solcher Seiten, findest du verschiedene Elemente für dein perfektes Portfolio. Die Elemente beziehen sich sich auf die Portfolio Konzeption.

Das Wireframe für Projekte wie ein Portfolio kann man mit Tools wie Axure oder Sketch anlegen. Ich bevorzuge jedoch die Erstellung mit Stift und Papier. Dabei ist man an Elemente nicht gebunden und kann viel kreativer arbeiten. Um sich auf das Wesentliche zu beziehen, kann man das Wireframe klein Zeichnen und sieht direkt, welche Elemente für Mobile in Frage kommen.

Das ScreenDesign wird basierend auf der Portfolio Konzeption angelegt und hilf dabei, Abstände, Farben und Elemente so anzuordnen, dass alles im Einklang ist. Dafür kann man mit verschiedenen Varianten und Programmen starten. Mit Adobe Photoshop kannst du diese Elemente nicht nur perfekt anordnen, sondern auch Farben, Masken oder Transparenz in dein Design mit einfließen lassen. Aber auch Axure oder Sketch bieten sich wunderbar dafür an.

Auch wenn du sehr kritisch bei deiner eigenen Seite bist, solltest du das Design in der Entwicklung nicht ständig ändern. Natürlich wird einem die Seite nach einer gewissen Zeit nicht mehr gefallen. Aber in der Programmierung sollte man sich sicher sein, dass alle Elemente so bleiben, wie sie im ScreenDesign dargestellt sind. Genauso bei den Animationen. Dafür kann man schlicht und einfach bleiben und z.B. Parallax-Effekte verwenden oder auch sehr komplexe Animationen mit GSAP anlegen. Um sicher zu gehen, dass auch die Animationen zueinander passen, kannst du einen Klick-dummy anfertigen und damit alle Animationen Mobile und Desktop testen.

Portfolio Entwicklung

Nachdem du die Portfolio Konzeption und das Design angefertigt hast, kommt es nun zum dem schwersten Teil. Je nach Programmierkenntnissen kannst du auf verschiedene Möglichkeiten zurückgreifen. Du kannst Content Management Systeme wie WordPress, Typo3 oder Drupal verwenden oder die Programmierung selbst in die Hand nehmen. Vorteil bei CMS ist die einfache Bedienung und die zahlreichen Templates. Nur ist man dabei leider etwas eingeschränkt und muss auf fancy Animationen verzichten.

Die andere Variante ist für fortgeschrittene Programmierer oder welche, die solche werden wollen. Vor der Programmierung solltest du dir aber Gedanken über deinen Workflow machen. Dazu gehört der Upload deiner Dateien, der Editor und behilfliche Plugins, die dir das Leben erleichtern. Außerdem musst du dich für eine Programmiersprache entscheiden. Je nach Portfolio, brauchst du dafür HTML, CSS, JavaScript, bis hin zu SASS oder NodeJS. Auf die Entwicklung der Portfolio Konzeption gehen wir in den nächsten Wochen drauf ein.

Leave a Comment