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. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.