In 4 Tagen zum Portfolio – Tag 4: Gestaltung

  • von Lennart Prange

thumb Die letzte Zeit war etwas ruhig hier. Tut mir Leid. Für Zeiten, in denen ich nicht so viel Zeit habe, suche ich übrigens immer noch Gast Autoren!

Heute melde ich mich mit dem letzten Beitrag der Artikelserie “In 4 Tagen zum Portfolio” zurück. Mit dem fertigen Design wird die Artikelserie also beendet. Die Gestaltung ist mir auf Grund der recht guten Vorausplanung mit Struktur usw. recht leicht gefallen.

Das fertige Design erfüllt alle Anforderungen, die im ersten Beitrag gestellt wurden. Dieser Beitrag trägt meine Gedanken während der Gestaltung zusammen und gibt einige Tipps.

Ein Klick auf ein Bild gibt euch übrigens eine 100% Vorschau.

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

Startseite

startseite

Die Startseite ist wahrscheinlich das Erste, was vom Benutzer registriert wird. Der berühmte erste Eindruck wird durch die Homepage entscheidend beeinflusst. Außerdem beginnt die Gestaltung bei mir immer mit der Startseite. Sie gibt also die Richtlinien für die restlichen Seiten vor. Deswegen benötigt die Gestaltung der Startseite im Vergleich zu den anderen Seiten viel Zeit.

Die Farben sind dezent. Die Seite ist hell gehalten. Im Zentrum steht die Beschreibung der Seite. Um das Auge auf jeden Fall schnell dorthin zu lenken, habe ich eine sehr große Schrift und einen dunklen Hintergrund benutzt.

Damit das Ganze nicht vollkommen frei im Raum schwebt, habe ich den Hintergrund mit einem sanften Verlauf und einem sehr hellen Grau gefüllt. Ich habe darauf geachtet großzügig mit White Space umzugehen. Ein paar mehr Pixel kosten nichts und durch den freien Raum wirkt das Design übersichtlich und professionell.

Die Referenzen werden durch einen Strich und einen “Schatten” voneinander getrennt. Außerdem zeige ich einen recht großen Screenshot. Ich denke einfach, dass man als Nutzer nicht viel von diesen winzigen Thumbnails hat. Neben jedem Screenshot steht eine kurze Beschreibung samt der Leistungen und eines Buttons, der zum Projekt führt.

Ich hatte als erstes ein paar Probleme damit, die Beschreibung unterzubringen. Erst als ich Sie durch den Hintergrund farblich abgehoben habe, konnte mich das Ergebnis überzeugen. Wichtig ist, dass man viel Platz lässt. Nicht zu nah am Logo und nicht zu nah am Content. Sonst wirkt es sehr unruhig und dadurch unübersichtlich.

Über Max Mustermann

ueber

Wie angekündigt findet sich hier ein kurzer Text, ein Bild und eine Tabelle mit den wichtigsten Daten. Die Seite habe ich so knapp wie möglich gehalten. Niemand will extrem viel Text lesen. Der Platz reicht, um dem Besucher die wichtigsten Dinge zu vermitteln. Ich habe viel Platz für das Foto eingeplant. Das lockert den Inhalt auf.

Die Verwendung des großen Bildes hat einen weiteren Vorteil: Es lässt die Seite nach etwas mehr aussehen. Bei den kurzen Texten ist das ganz gut. Außerdem bringt das Foto (wenn es ein Gesicht enthält und nicht wie in diesem Fall ein Platzhalter ist) natürlich Persönlichkeit rein.

Kontakt

kontakt

Auch hier gibt es eigentlich nicht mehr viel zu sagen. Das Kontaktformular bietet viel Platz, die Tabelle an der Seite zeigt die wichtigsten Kontaktdaten übersichtlich und ist jederzeit erweiterbar.

Ich habe viele Formulare gesehen und halte nichts davon, wenn man den Nutzer mit zu vielen Feldern “belästigt”. Versucht das Formular auf wesentliche Angaben zu konzentrieren.

In die “Sidebar” gehören auch noch das Xing Profil, der Twitter Account und ein mögliches Blog. Vielleicht wäre es auch noch eine gute Möglichkeit gewesen, kleine Icons zu verwenden. In diesem Fall sah ich keine Notwendigkeit, aber Icons können die Komposition interessanter machen. Vergesst das nicht und experimentiert ruhig ein wenig.

Fazit

Das fertige Design ist recht schlicht und genau aus dem Grund wird es funktionieren. Schnelle Ladezeiten sind garantiert, der Fokus liegt auf dem Wesentlichen. Ich spare unnötige Pixel ein und stelle sicher, dass die wichtigen Informationen rüberkommen. Das hat sich zu meinem Stil entwickelt.

Natürlich kann man sich noch mehr austoben und wie Nick La absolut interessante, zeitintensive und aufwändige Grafiken erstellen, in diesem Fall passt das aber weniger.

Meine Empfehlung für die Gestaltung

Natürlich variiert das von Gestalter zu Gestalter. Trotzdem habe ich ein paar Tipps gesammelt:

  • Bleibt eurem Stil treu – Es bringt nichts, sich für das Portfolio zu verstellen. Gestaltet so wir es am liebsten tut. Denn wenn ihr so gestaltet, wie ihr es am liebsten tut, holt ihr das Maximum aus euch raus. Außerdem wird das Design die potenziellen Kunden ansprechen, die ihr haben wollt. Nämlich die, denen euer Stil gefällt.
  • Nicht zu viel Text einsetzen – Viele Webdesigner sind wirklich keine guten Texter und der Besucher hat eh keine Lust, Romane zu lesen. Um beiden Seiten einen Gefallen zu tun, solltet ihr auf viel Text verzichten. Haltet die Sätze kurz, teilt den Text mit Absätzen ein und benutzt nicht allzu viele Wörter.
  • Es muss nicht vollkommen einzigartig sein – Viele Webdesigner wollen mit einem absolut einzigartigen Design daherkommen. Das ist auch ok, aber wenn darunter die Usability leidet, sollte man es lieber lassen. Innovative Navigationen oder irgendwelche jQuery Spielereien, die niemand versteht, bringen das Portfolio sicherlich nicht voran.
  • Benutzt die richtigen Technologien – Wenn ihr Flash so gut wie nie einsetzt, dann hat dieses Zeug in den meisten Fällen nichts auf eurem Portfolio zu suchen. Habt ihr viel mit Flash zu tun, ändert sich das natürlich wieder. Auch Javascript wird bestimmt nicht gebraucht. Benutzt ihr es häufig in euren Projekten, ändert sich die Lage auch dort wieder.
  • Kontaktieren muss einfach sein – Alle wichtigen Kontaktinformationen müssen auf einer Seite gesammelt werden. Es macht eventuell sogar Sinn, sie überall zu positionieren. Ein Kontaktformular sollte einfach sein und muss auf jeden Fall vorhanden sein.
  • Gestaltet jede SeiteIch habe bereits meine Meinung zu diesem Thema geäußert: Gleichbleibende Layouts sind langweilig. Ihr habt bei eurem Portfolio eigentlich eine sehr gute Möglichkeit um jede Seite zu planen und zu gestalten.

An euch

Ich nehme euren Tipp jetzt mal an und möchte euch hiermit noch mal darauf hinweisen, dass die Nutzer Links in der Sidebar noch ein Stück aktueller werden könnten! Ihr wisst nicht was das ist? Hier findet ihr die Infos.

Eure Meinung

Die Artikelserie ist vorbei. Wie hat sie euch gefallen? Wie findet ihr das Endergebnis? Welche Tipps habe ich vergessen?

24 Kommentare

  1. Carabon
    9. Juli 2009 um 12:11 Uhr

    Mh, nette worte eines Fachmanns ;D Guter Artikel bzw, gute Artiker Serie!

  2. Freezs
    9. Juli 2009 um 14:14 Uhr

    sehr schön geschrieben – alles wichtige wurde behandelt in der serie, fein.

    • Lennart Prange
      10. Juli 2009 um 15:51 Uhr

      Na, das hört sich doch gut an 🙂

  3. Ohrflieger
    9. Juli 2009 um 16:04 Uhr

    Die Serie hat mir sehr gefallen. Weiter so!
    Ich würde mir aber für die nächste Serie wünschen, dass die Artikel wirklich an 4 aufeinanderfolgenden Tagen erscheinen, wenn die Serie schon “In 4 Tagen zum Portfolio” heißt. Die Warterei auf den letzten Artikel kann einen wahnsinnig machen 😉

    • Lennart Prange
      10. Juli 2009 um 15:49 Uhr

      Super! 🙂 Ja, eigentlich war die Artikelserie auch für 4 Tage geplant. Etwas dumm gelaufen…

  4. Wishu
    9. Juli 2009 um 16:54 Uhr

    Gefällt mir. Ich hoffe ich schaffe es, dass mein Portfolio bald diesen Ansprüchen entspricht ^^’

  5. Michel
    9. Juli 2009 um 21:20 Uhr

    Ha, irgendwie hab ich die anderen Teile der Serie übersehen, aber eben nachgeholt zu lesen. Sehr gut und verständlich geschrieben, wenn auch eher für Beginner und nicht die „alten Hasen“. Wobei, eigentlich kann da jeder noch irgendwas draus lernen.

    Ich bin gespannt, ob sich ein paar Leute, die die Serie gelesen haben, dir ihre neuen Portfolios zeigen. Vielleicht lässt sich daraus ja auch wieder ein Artikel machen 😉

    (Und jetzt schau ich erstmal, ob’s Das Webdesignblog überhaupt schon in meinen Feed-Reader geschafft hat. Muss ja eigentlich.)

    • Lennart Prange
      10. Juli 2009 um 15:48 Uhr

      Dein Vorschlag ist interessant 🙂 Ja, meine Artikel sollen immer ein möglichst breites Publikum von Anfängern bis Profis ansprechen.

  6. torsten
    9. Juli 2009 um 23:32 Uhr

    Schön, dass die Serie weitergeführt wurde. Wichtige Aussage ist, meiner Meinung nach: “Das fertige Design ist recht schlicht und genau aus dem Grund wird es funktionieren.” Das ist die Designweisheit schlechthin.

  7. Rata
    10. Juli 2009 um 07:54 Uhr

    Haste aber jetzt lange drauf warten lassen 😀
    Hat sich aber gelohnt.

    Danke.

    Lieber Gruß
    Rata

    • Lennart Prange
      10. Juli 2009 um 15:47 Uhr

      Ja, hat etwas gedauert. War aber eigentlich auch nicht geplant… 😀

  8. Philipp
    10. Juli 2009 um 12:22 Uhr

    Echt gute Artikelserie. Ich hoff davon gibt es hier noch mehr zu sehen/lesen. Mach weiter so, und ich hoff auch dass sich noch ein paar Gast Autoren finden lassen.

    • Lennart Prange
      10. Juli 2009 um 15:46 Uhr

      Danke. Ein paar haben ich schon gemeldet. Aber man kann nie genug Content haben 😀

  9. Ahmet Topal
    10. Juli 2009 um 17:34 Uhr

    Na dass Design find ich schön, darf man sich denn Inspirieren lassen? Vom Design^^?

    • Lennart Prange
      10. Juli 2009 um 17:46 Uhr

      Ich habe noch nicht entschieden, was ich damit mache. Vielleicht biete ich es bei Themeforest an?! Mal schauen. Generell spricht überhaupt nichts dagegen, wenn du dich von dem Design inspirieren lässt. Inspiration ist immer ok. Inspiration wird nur dann problematisch, wenn man sie bemerkt 😉 Ich habe die Serie nicht geschrieben, damit das Ergebnis nachgeahmt wird. Ich wollte euch eine praktische Hilfe auf dem Weg zum Portfolio geben. Versuche lieber, die Schritte zu befolgen und etwas komplett eigenes zu erschaffen.

  10. Ahmet Topal
    10. Juli 2009 um 17:50 Uhr

    Anbieten wäre auch okay 🙂 Ich habe schon viele Designs gehabt, ich habe davon auch viele selber gemacht, eins gefiel mir, dann doch nichtmehr, aber als ich dieses Design gesehen habe, dass es so übersichtlich ist, hat mir gefallen, denn ich bin ein BasicDesign Fan, ich mag leichte, aber Übersichtliche Themes!

    Echt toll gemacht, auch die Serie hab ich mitverfolgt. Ich habe versucht eins zu machen, dann kam was grünes raus^^

    Lieber weiße Themes als Grüne 🙂 Deshalb finde ich deins eichfach nur toll, übersichtlich, Farben passen, gut lesbar, was soll ich da noch sagen^^

  11. Hendrik
    13. Juli 2009 um 16:23 Uhr

    Ich bin auf der Seite http://www.blogprojekt.de/ auf dich und deinen Blog aufmerksam geworden.
    Hier kann man ordentlich was lernen 🙂
    Das Portfolio sieht sehr gut aus.

    P.S.: Und schon hat sich die Aktion mit dem Gastartikel bezahlt gemacht 😉

    • Lennart Prange
      13. Juli 2009 um 16:30 Uhr

      Willkommen 😀 Viel Spaß hier.

  12. Markus
    13. Juli 2009 um 19:10 Uhr

    Ich bin auch druch deinen Artikel auf http://www.blogprojekt.de/ auf deinen Blog gestoßen. Ich habe sonst nicht so viel mit Webdesign zu tun doch, deine Texte sind wirklich sehr ausfürhlich und verständlich, sodass sie sogar eine Photoshop Laie wie ich sie verstehe. Deine 1000 Feedreader geben deinem Erfolg ja auch recht! Weiter so!

  13. Frank
    16. Juli 2009 um 14:26 Uhr

    Eine sehr schöne Serie zum richtigen Moment. Da ich schon seid langem ein eigenes Webprojekt für mich realisieren wollte, mir bisher aber nötige Mittel wie ein Server u.ä. gefehlt hatten. Kam ich nun doch dazu mir etwas Speicher zu mieten und Anhand der Serie eine Webseite für mich umzusetzen.

    Ich möchte mich für die Artikel Serie und damit verbundene Hilfe danken.

  14. Kolja
    3. September 2009 um 18:46 Uhr

    Hallo,
    die Serie ist klasse. Für mich als angehenden Webdesigner eine super Hilfestellung. Vielen Dank dafür!

    Kolja

    P.S.: Dein ganzer Blog ist klasse. Sehr viele hilfreiche Artikel!!

Trackbacks/Pingbacks