Web Design: Wie man ein Design-Stil zu etablieren

Nachdem der Entwurf für eine Website genehmigt wird, ist es eine gute Idee, einen visuellen Stil Führung zu schaffen, die die Farbpalette, die Verwendung von Schriften und grafische Behandlungen regelt. zunächst einen Style Guide entwickeln - oder ein Start-und zu verfeinern, wie Sie gehen - wird Ihnen helfen, während der Entwicklung Ihrer Comps konsistent bleiben. Darüber hinaus werden die grafischen und Textstile Sie jetzt definieren schließlich in CSS übersetzt werden (C

ascading Style Sheets) Arten von den Entwicklern während des Build-out-Phase.

Grafik-Stil führt für Websites

Es gibt so viele Elemente, die Sie visuell definieren können nur mit einfachen CSS-Code allein. Visuelle Elemente wie Rahmen, Füllungen Farben, Roll Farben, Linkfarben, Hintergrundfarben und Regelzeilen sollten alle von dem Designer definiert werden. Fragen wie diese sollten dokumentiert werden: Wie dick sind Regelzeilen? Wenn Sie über einen Inhaltsbereich rollen, hat seine Hintergrundfarbe ändern, und wenn ja, welche Farbe?

Für andere gemeinsame Elemente auf der Seite - wie benutzerdefinierte strukturierten Hintergründen, ausgefallene Knöpfe und Grenz Behandlungen, die grafische Unterstützung benötigen - Sie können eine Bibliothek solcher Gegenstände erstellen. Diese Bibliothek, in einem Programm erstellt wie Adobe Fireworks oder Adobe Photoshop, würde auf die Seite zusätzlich sein Comps Sie bereits erstellt haben. Alle Produktionsdateien und Comps sollten als Dateien mit Ebenen in der Software des nativen Format (PNG und PSD bezeichnet) gespeichert werden. Die Ebenen und Ebenensets sollten klar organisiert und benannt werden, so kann jeder Designer abholen, wo Sie aufgehört haben.

Button-Arten in Web-Design

Eine Sache, oft übersehen in Web-Design Planung ist eine Hierarchie der Arten für Buttons und Links führen. Sie sollten einen Plan für die verschiedenen Qualitäten von Schaltflächen und Links haben: eine wichtige Taste, eine weniger wichtige Knopf- einen wichtigen Text-Link und einem weniger wichtigen Textlink (oder einen Link im Einklang mit anderen Körper Kopie gefunden wird). Oft ist eine Links und Schaltflächen Seite auf Hintergründe in verschiedenen Farben platziert. Wenn der gleiche Stil nicht auf beiden Hintergründen nicht funktioniert, haben einen separaten Stil für jeden Hintergrund.

Im Beispiel arbeiten die beiden Top-Tier-Tasten gut auf beide ein licht- und einem dunklen Hintergrund. Die grüne und die orange Akzentfarben für die Tier 3 und Tier 4 Links jedoch nicht gut auf beiden Hintergründen. In diesem Fall sind sowohl die grüne und die orange waren # 147-betrogenen # 148- sein leichter und heller für den Einsatz auf dunklem Hintergrund und dunkler auf hellem Hintergrund zu arbeiten.

Typ Stile in Web-Design

Heutzutage ist es selten zu nutzen grafischen Text - Text, der einfach ein grafisches Bild ist - in Web und mobile Websites. Es gibt mehrere Gründe für die Verwendung von grafischen Text vermeiden. Zunächst grafischen Text ist schwer zu pflegen: Es ist viel einfacher, in das Feld eintragen oder Wörter in HTML oder in einer Datenbank zu übersetzen und haben CSS die entsprechende Styling gelten als ein Bild zu wiederholen. Zweitens grafischen Text ist nicht suchbar, wenn Sie ALT-Tags mit Keywords anwenden.

In der Vergangenheit verwendeten Designer grafischen Text weil Schriftarten ein Thema auf dem Netz waren: Nur eine begrenzte Anzahl von (eher langweilig) Fonts waren auf jedem System des Benutzers zur Verfügung. Jetzt ist es möglich, einbetten Fonts - Ihre Website-Link-Dateien Schriftart haben - durch verschiedene Dienstleistungen und Technologien.

Wie bei den Tasten haben Sie Design-Stile für alle Arten von Schriften und die Situationen, in denen Sie sie verwenden zu definieren - Kopie von Körper zu Schlagzeilen, Überschriften und Bildunterschriften. Diese Schriftstile wird letztlich eine Reihe von CSS-Stile werden, um dynamische Text angewendet. Als Designer müssen Sie nicht die CSS zu schreiben classes- Sie einfach ein Stylesheet erstellen, die alle Ihre Schriftstile in Photoshop zeigt. Die Entwickler können aufzulesen, was sie aus der Photoshop-Datei benötigen. CSS ist erstaunlich entgegenkommend - Sie viele coole Effekte zu bekommen.