So erstellen Sie ein Website-Schema

Sobald sich Ihre Unternehmens-Website über ein einfaches Site-Diagramm hinaus entwickelt hat, können Sie Entscheidungen darüber treffen, was auf den einzelnen Seiten wohin geht. Ein Website-Schema oder Drahtgitter stellt die Grundlagen der Seitenfunktionalität vor, ohne die Designelemente, Farbschemata, Schriftstile oder interaktiven Elemente selbst einzubeziehen. Stellen Sie sich den Schaltplan als einen Grundriss und die fertige Seite als einen möblierten Raum vor. Anstatt Wände neu zu streichen und Möbel neu zu ordnen oder zu ersetzen, um das Zusammenspiel Ihrer Seiten zu ändern, können Sie Ihren Online-Bereich mithilfe von Boxen und Platzhaltern planen, die die Funktionsweise Ihrer Websiteseiten bestimmen.

1

Listen Sie die wiederkehrenden Elemente auf, die auf Ihren Seiten angezeigt werden. Dazu gehören Elemente wie Ihr Logo, die Seitennavigation, Fotobereiche, Textbereiche, Kopfzeilen, Fußzeilen und Seitenleisten.

2

Zeichnen Sie ein Diagramm, das die relativen Größen der Seitenelemente sowie deren vertikale und horizontale Position zeigt. Sie können dieses Diagramm auf Papier skizzieren, in einem Bildbearbeitungs- oder Illustrationsprogramm aufbereiten oder es mithilfe einer Online-Wireframing-Anwendung zusammenstellen.

3.

Erstellen Sie ein Seitendiagramm für jeden Seitentyp, den Ihre Website benötigt. Ihre Homepage enthält möglicherweise eine andere Teilmenge von Seitenelementen als eine Produkt- oder Serviceseite, Kontaktseite oder ein Blog.

4

Verwenden Sie einen Platzhaltertext, um anzugeben, wo der Text angezeigt wird. Möglicherweise möchten Sie zwischen serifenlosen und serifenlosen Schriften wählen, ein Schema ist jedoch nicht der richtige Ort für Experimente und Demonstrationen.

5

Kommentieren Sie Ihre Wireframes mit Notizen, wie Elemente funktionieren oder wo sie verknüpft werden. Fügen Sie Symbole hinzu, die auf externe Websites oder Dienste verweisen, einschließlich RSS, Twitter, Facebook und Partner- oder Herstellerseiten.

6

Verteilen Sie Ihre Wireframes zur Überprüfung, Diskussion und Genehmigung und ändern Sie sie bei Bedarf. Wenn Sie den Punkt erreichen, an dem Ihre Schemata alle wiederkehrenden Elemente enthalten, die Ihre tatsächlichen Seiten benötigen, und die relative Position und Größe der Elemente zu den Anforderungen Ihrer Website passt, können Sie über die Drahtmodellphase hinausgehen.

Tipps

• Website-Schemata gehen im Entwurfsprozess normalerweise Mockups und Prototypen voraus. Modelle zeigen Farbschemata, Schriftstile und andere Designdetails in Formularen, die Sie tatsächlich in Betracht ziehen. Prototypen entwickeln sich über Mockups hinaus zu fest formatierten Exemplaren, die ein echtes Erscheinungsbild der Seite zeigen.
• Wenn Sie eine mobile sowie eine browserbasierte Version Ihrer Site erstellen möchten, müssen Sie möglicherweise Schemata für mehr als einen Entwurfsfluss erstellen.
• Wenn Sie Ihre Schaltpläne von Hand zeichnen, verwenden Sie Farbstifte oder Bleistifte, um bestimmte Bereiche Ihres Seitenlayouts hervorzuheben, die im Entwurfs- oder Entwicklungsprozess eine größere Bedeutung haben. Sie können beispielsweise eine bestimmte Farbe auswählen, um Module darzustellen, die von einer bestimmten Person codiert werden sollen. Diese Farben zeigen Planungselemente an, keine Designauswahl.

Warnung

• Wenn Sie Ihre Schaltpläne in einem Website-Design-Tool entwickeln und CSS für Ihre Wireframes erstellen, vermeiden Sie es, die schematische Phase der Website-Entwicklung in eine Entwurfsübung umzuwandeln. Wireframes vermitteln Features, nicht Stil.