In 4 Tagen zum Portfolio – Tag 3: Struktur

  • von Lennart Prange

thumb Tag 3 meiner Artikelserie “In 4 Tagen zum Portfolio” beschäftigt sich mit der Struktur der Seite. Nachdem ihr Inspiration gesammelt habt und wisst, was ein Portfolio braucht, habt ihr die Grundlage für ein Wireframe oder das Grey Box Model. Ich arbeite hier natürlich mit dem Grey Box Modell. Was das ist und warum ich es favorisiere könnt ihr hier lesen.

Das Grey Box Modell ist die Basis für die Gestaltung und, mal wieder, sehr wichtig. Jetzt solltet ihr euch auch ganz konkrete Gedanken um den Inhalt machen. Die Anforderung an das spätere Design sind die höchsten und deshalb gestalten wir auch für den Inhalt und nicht nur, um das Ganze schön zu machen.

Dieser Beitrag wird eine komplette Struktur hervorbringen. Diese Struktur wird die Grundlage für den nächsten Beitrag bilden.

Kommentare und Retweets würden mich sehr freuen. Viel Spaß mit dem Artikel.

Was tut ihr jetzt?

Die Planung der Struktur ist dazu da, um die Inhalte zu gliedern. Ihr solltet euch darum Gedanken machen, welche Elemente auf welche Seiten kommen und wie der Aufbau ist. In diesem Schritt plant ihr, welche Elemente das Auge zu erst sehen soll und welche erst später. Ihr solltet als Designer den Nutzer durch die Seite lenken. Auf wichtige Informationen sollte sein Blick sofort fallen. Auf nicht so wichtige später.

Wenn ich von Struktur spreche, spreche ich also auch von Hierarchie. Diese Hierarchie ist so wichtig, weil die Seite bei keiner Hierarchie unübersichtlich wird (das Auge weiß nicht wohin es zu erst gucken soll) und weil der Nutzer bei einer schlechten Hierarchie auf der Seite umherirren wird.

Der Inhalt

Auf allen Seiten

Navigation, Logo und Footer gehören auf alle Seiten. Eine Frage die man sich zwangsläufig für jede Unterseite stellen muss: Brauch ich noch den Hallo Text? Ein Unterschied zwischen Print und Webdesign ist, dass man nicht weiß, wo der Nutzer mit dem Surfen anfängt. Das muss nicht zwangsläufig die Startseite sein. Bei einem Portfolio, welches kaum wechselnde Inhalte enthält, kann man aber davon ausgehen, dass die meisten Nutzer die Website über die Startseite betreten. Egal, sicher ist sicher.

Referenzen

Die Referenzen sind der wichtigste Teil des Portfolios. Das haben wir bereits in der Auftragsbeschreibung festgelegt. Sie werden voraussichtlich auf der Startseite dargestellt. Es soll möglichst viel Platz für die Screenshots bereitgestellt werden und neben den Referenzen soll eine Beschreibung stehen. Diese soll die Leistungen in Form einer Liste enthalten, den Titel des Projekts, einen Button der zu der Website führt und eventuell noch eine kurze Beschreibung der Seite.
Die Liste mit den Leistungen wird nicht sehr lang. Die kurze Beschreibung wird höchstens 2-3 Zeilen einnehmen.

Über Max Mustermann

Die “Über mich” Seite hat vor allem den Zweck zu informieren. Sie soll dem Besucher prägnant schildern, wer hinter dem Portfolio steht und warum man ihn mit einem Auftrag betrauen sollte. Weiterhin soll sie ein wenig Persönlichkeit reinbringen.

Der Inhalt der Seite sollte durch einen kleinen Text eingeleitet werden. Danach könnte eine Taballe o.ä. folgen, die den Lebenslauf mit Auszeichungen und anderen relevanten Dingen zusammenfasst. Wichtig ist außerdem ein Foto.

Kontakt

Ein Kontaktformular sollte auf jeden Fall integriert werden. Außerdem sollte man Nutzern die Möglichkeit bieten, dass E-Mail Programm ihrer Wahl zu nutzen und eine E-Mail Adresse angeben. Zu Kontakt gehören auch Twitter, Xing und Co. Um das Formular werden wir uns noch Gedanken machen, wenn wir die Gestaltung behandeln.

Es soll ja auch noch Leute geben, die Briefe, Telefon u.ä. benutzen. Adresse, Telefonnummer und eventuell Fax Nummer sollten also auch angegeben werden.

Die Navigationsstruktur

Die Herausforderung ist in diesem Fall eher gering. Da wir nur 4 Seiten haben (Startseite / Über / Kontakt / Impressum) wird die Struktur nicht wirklich komplex.

navi

Grey Box Model für die Startseite

home

Die recht einfache Struktur enthält alles, was Max Mustermann für die Startseite braucht. Der klassische Aufbau wird es den Besuchern leicht machen, sich zu orientieren. Die Referenzen werden vor allem durch das große Vorschaubild repräsentiert.

Ich habe bereits angedeutet, dass der Hallo Text sehr wichtig ist. Er wird die erste Station für das Auge sein. Das Logo und die Navigation habe ich an die üblichen Stellen gepackt um, wie schon erwähnt, die Orientierung für den Nutzer möglichst einfach zu gestalten.

Grey Box Model für die Über-Seite

about

Der Text kommt in diesem Fall auf die linke Seite. Rechts wird ein Foto sein. Ihr könnt sehen, dass das Foto etwas mehr Platz bekommen wird als die Beschreibung auf der Startseite. Der Grund ist einfach, dass das Foto sehr wichtig ist und betonen soll, dass es sich um ein persönliches Portfolio handelt.

Grey Box Model für die Kontaktseite

contact

Das Kontaktformular wird großzügig angelegt. Der Nutzer soll genügend Platz haben, um seine Nachricht komfortabel eintragen zu können. Rechts kommen die Adresse und weitere Kontaktinformationen hin.

Fazit

Man kann sich darüber streiten, ob man die Struktur eigentlich so planen muss. Bei einer so einfachen Seite kann man wahrscheinlich sogar darauf verzichten. Trotzdem bin ich ein Fan von einer einigermaßen sorgfältigen Planung. Wir haben nun eine angemessene Grundlage um das finale Design schnell zu erstellen.

16 Kommentare

  1. Jakob Reiter
    25. Juni 2009 um 18:36 Uhr

    Ja sone grobe Struktur zu haben ist echt gut, aber auf nem Blatt Papier reicht das auch.

    • Lennart Prange
      25. Juni 2009 um 18:40 Uhr

      Kann man natürlich auch auf dem Blatt machen, keine Frage. Aus praktischen Gründen habe ich diese Struktur aber schnell mit dem Computer erstellt 😉

      • Jakob Reiter
        25. Juni 2009 um 23:21 Uhr

        aso, na dann 😛

  2. Rata
    26. Juni 2009 um 03:35 Uhr

    Strukturen lassen sich auch immer gut mit einem Flow-Chart-Programm machen.
    Manchmal kommt man dabei noch auf weitere (vorher nicht so naheliegende) Ideen 😉

    Richtig gemacht, fließt bereits die gesammte Site-Planung mit ein.

    Lieber Gruß
    Rata

    • PHP-Friends
      4. Juli 2009 um 00:27 Uhr

      Auch wenn es ein bisschen abschweift: Kannst du ein gutes Flow-Chart-Programm nennen?

      lg Marvin

      • Anonymous
        20. August 2009 um 09:14 Uhr

        Wenn du einfach nur schnell ein paar kleine SiteMaps und Charts erstellen möchtest kann ich Lovely Charts (http://www.lovelycharts.com/) empfehlen!

  3. Philipp
    26. Juni 2009 um 13:11 Uhr

    Sehr schöner Artikel. Was ich vllt nicht so machen würde, wäre den Hallo Text auf alle Seiten zu machen. Ich würde eher einen Einführungstext pro Seite und zu der jeweiligen Seite, also Kontakt etc. machen.

    Den “Hallo-Text” würde ich hingegen nur auf der Startseite anbringen. Klar man weiß nie wie der User auf die Seite kommt. Theoretisch und auch Praktisch könnte man dies mit Hilfe von Php auf der jeweiligen Seite auf welche er zu Erst kommt automatisch einfügen, so dass es bei den anderen Seiten nicht mehr erscheint.

    Liebe Grüße
    Philipp

    • Sammy
      26. Juni 2009 um 19:42 Uhr

      Das mit dem Hallo-Text kann man so und so sehen.
      Viele Portfolios die ich sehe, vor allem englische haben fast immer ein Bild von sich und daneben einen Text wie “Hello, I’m BLABABLA and I’m a professional webdesigner” und so weiter und sofort.
      Sowas finde ich, kann man durchaus auf jede Seite machen. texte die dann wirklich länger/ausführlicher sind, sollten aber wirklich nur auf die Startseite gesetzt werden.

  4. Constantin
    30. Juni 2009 um 12:36 Uhr

    Ich muss hier wirklich mal ein Lob aussprechen! Ich finde, dass gerade für Anfänger in Sachen professionelles Webdesign und dessen Vertrieb/Vermarktung hier viele gut zu verstehende Artikel geschrieben werden. Insgesamt ist der Blog für mich schon fast zu einem Tutorial geworden… nun warte ich gespannt auf den vierten Teil 😉 weiter so!!!

  5. Wishu
    2. Juli 2009 um 10:23 Uhr

    Sehr schöner Artikel. Auch die beiden davor.

    Es ist wirklich praktisch, dass das jetzt kommt, denn ich wollte demnächst meine Portfolio-Site umgestalten.

    Ich freue mich schon auf den 4. Teil.

  6. Sam
    2. Juli 2009 um 23:20 Uhr

    Ich benutze lieber Raster als Grundlage… Aber das sei jedem selbst überlassen. 🙂

    Super Beitrag! Weiter so!

  7. Lukas Michalski
    4. Juli 2009 um 16:38 Uhr

    Ich habe mir die 3 Artikel zum Thema mal druchgelesen und bin der Meinung, dass du das wirklich Anfänger- und Anwenderfreundlich rüberbringst.

    @ PHP-Friends: Flow-Chart Programme gibt es sehr viele. Mein persönlicher Favorit ist Visio. Ist aber leider keine Freeware/OpenSource.

  8. maxi
    6. Juli 2009 um 20:43 Uhr

    4. teil erscheint nicht mehr, was?

    • Lennart Prange
      6. Juli 2009 um 20:59 Uhr

      Sorry, ich komme momentan weder zu Teil 4, noch zu anderen Beiträgen. Ich bemühe mich aber, das so schnell wie möglich hinzubekommen.

Trackbacks/Pingbacks