Eine Webseite gestalten

Sicherlich gibt es viele verschiedene Wege, wie man die Gestaltung einer Webseite angehen kann. Jeder wird da seine persönlichen Vorlieben haben. Dennoch finde ich es sinnvoll, über diesen Prozess nachzudenken, um den ganzen „Workflow“ effizienter zu gestalten.

Eine grosse Hilfe ist dabei ein Artikel von Jason Santa Maria, der erläutert, wie er die ganze Sache angeht. Hier eine Zusammenfassung der einzelnen Designphasen, wie sie für mich Sinn ergeben.

Schritt für Schritt

Bevor man voller Enthusiasmus anfängt und mit Farben und Formen in Photoshop wild drauflos gestaltet, muss man sich klar sein, dass man nur Schritt für Schritt ans Ziel kommt. Kleine abgeschlossene Schritte verhindern, dass man Ideen immer wieder über den Haufen wirft und wieder von vorne beginnt.

For web design, the key for me is to split my design process up into smaller chunks. If they overlap too much, I have trouble making sure certain things are done before moving on.

Was sind die Ziele der Webseite?

Gute Webseiten zeichnen sich dadurch aus, dass sie die Bedürfnisse der Menschen, die sie benutzen möglichst befriedigen. Zu diesem Schluss kommt auch Cameron Moll in einem Interview:

Instead, it’s about understanding just two things: The needs of your site visitors, and what you hope to accomplish as an organization. As designers, we spend a great deal of time mastering layouts that adhere properly to grids, authoring impeccable CSS code, and the like. And rightfully so. But frankly, none of that matters if it doesn’t serve a specific objective. What matters is that we understand the goals at hand, and then deliver the process, the technology and the design needed to satisfy those goals. Sure, you might be able to formulate a general checklist with things like fast download times, usable navigation, and so on. But a fair amount of that is still subjective. I’m confident the best checklist is the one written exclusively with your own objectives in mind.

1. Informationsarchitektur

Für mich steht ganz klar der Inhalt an erster Stelle des Designprozesses. Ohne erste inhaltliche Fragen geklärt zu haben, kann gar kein gutes Konzept erstellt werden:

• Was soll die Webseite wem mitteilen?
• Wie sind die Informationen gegliedert?
• Was steht auf der Startseite?
• Wie sind die „Unterordner“ organisiert?

2. Sketching

Papier und Bleistift sind immer noch die besten Hilfsmittel, um Ideen zu sammeln, zu vergleichen und zu entwickeln. Bevor man sich also an den Computer setzt, ist ein traditionelles Brainstorming gefragt. Ein „wildes Ausprobieren“ verschiedener Alternativen ist hier noch erlaubt, am Schluss muss man sich aber für ein Konzept entscheiden, dass man umsetzen will.

Sketching out your ideas is still one of the most important parts of any design. I believe it is still the fastest way to brainstorm and see your ideas, make your mistakes and build off of them, and to see your progression through to ideas you never thought of before. […]. By sketching first you allow yourself time to really focus on the idea you need in a rough enough stage to not get hung up on things like imagery and color usage and kerning.

3. Grey Box Method

In dieser ersten digitalen Phase wendet Jason Santa Maria seine Grey Box Method an. Er versucht das Konzept in einem Programm wie Photoshop oder Illustrator umzusetzen, allerdings nur vorerst nur in Grautönen. Damit kann der Fokus auf die Position, Verhältnisse und Grössen von Elementen gelegt werden.

I can remove myself from worrying about color and imagery choices and allow myself to focus on the site’s structure and hierarchy. I can plot out space relative to importance and insure that the overall architecture of the site makes sense with the flow of the project.

4. Jetzt erst richtig designen

Erst jetzt werden die definiven Farben, Schriftarten und Hintergrundbilder gewählt. Bei den Farben ist die Wahl eines geeigneten Farbschemas unerlässlich. Ein guter Ansatz ist es, sich dabei von den eingesetzten Bildern leiten zu lassen. Bei den Schriftarten sollte der Grundsatz gelten, dass nicht mehr als drei verschiedene Schriften eingesetzt werden sollten, sonst wirkt das Design unruhig.

5. Pogrammieren

Nun wird das Design mit XHTML und CSS umgesetzt. Als erstes erstellt man eine XHTML-Vorlage mit Bilndtext.[1] Nun kann das CSS mit der Web Developer Extension für Firefox direkt im Browser erstellt werden. Dabei können folgende CSS-Regeln nützlich sein, die ich immer am Schluss der CSS-Datei anfüge und auskommentiere, sobald ich sie nicht mehr brauche.

/* Debugg
div {
border: 1px solid red;
}
p {
border: 1px solid green;
}
ul, li, a {
border: 1px solid blue;
}
*/

Um die richtige Positionierung sicherzustellen, kann das gesamte Design in Photoshop gespeichert werden und als Hintergrundbild des body-Tags eingesetzt werden.

body { background: url(img/design.jpg) no-repeat }

6. Testen

Verschiedene Browser machen Mühe mit CSS. Tests und Hacks sind also unvermeidlich.

7. User Testing

Ein paar Benutzer fragen, wie sie die Seite finden.

8. Design und Code anpassen

Letzte Änderungen vornehmen.

Und zuletzt: immer interessiert bleiben

Cameron Moll sagt von sich, dass er in jedem Projekt versucht sich neu herauszufordern:

“Never Stagnate, Always Evolve.” I constantly challenge myself to make each project somehow better than the last. Granted, rush jobs and tight budgets often prevent that from happening, but I strive for it nonetheless. I fear the day I no longer outdo myself on a consistent basis is the day I’ll quit designing.

Update

Jeffrey Veen folgt einem ganz anderen Ansatz, der diesem hier gegenübersteht. Dennoch ist er interessant und man kann von beiden Ansätzen lernen.

I build up a tremendous amount of background data, let it synthesize, then „blink“ it out as a fully-formed solution. It typically works like this:

1. Talk to everybody I possibly can about the problem.
2. Read everything that would even be remotely related to what I’m doing. Hang charts, graphs, diagrams, and screenshots all over my office.
3. Observe user research; recall past research.
4. Stew in it all, panic as deadline approaches, stop sleeping, stop eating.
5. Be struck with an epiphany. Instantly see the solution. Curse my tools for being too slow as I frantically get it all down in a document.
6. Sleep for three days.

The key to this, really, is in the fourth step: stewing in it. That is, gathering as much data as possible, whether it appears to be related or not, and just letting my mind soak it in. One of the criticisms levied against Gladwell is that he appears to suggest that snap decisions work really well except when they fail. Fair enough. But he does offer examples as to why this happens — preparation. The art historians had spent decades surrounded by historic art. The general had studied every conflict and strategy in the history of warfare.

This leads me to believe that doing research in web design – for me at least – has more to do with Method Acting than ethnography. Robert De Niro used this technique as he prepared for his roll as Travis Bickle in Taxi Driver, spending a month pulling late night shifts as a cab driver. He did this not to mimic those in the profession, but to be able to react on screen in a way that they would. Applied back to design: Rather than figure out how to design for your audience, design for yourself after becoming like your audience. At that point, I find, snap decisions become good decisions.

¹ Es ist gut möglich, hier auf bereits bestehende Vorlagen von anderen Projekten zurückzugreifen und diese anzupassen.