PDF herunterladen
PDF herunterladen
Wenn du eine Webseite designen und entwickeln willst, wirst du es viel einfacher finden, wenn du etwas Zeit mit der Planung verbringst. Die Planungsphase ermöglicht es dem Entwickler und dem Kunden zusammenzuarbeiten, bis sie ein Format und ein Layout finden, das ihre Bedürfnisse erfüllt. Die Planung beeinflusst die Stilauswahl der Seite und ist wohl der wichtigste Aspekt des Web Designs, vor allem für Firmen.
Vorgehensweise
-
Bestimme die Funktionalität der Seite. Wenn du eine Seite für dich selbst erstellst, kennst du die Antwort darauf wahrscheinlich schon. Wenn du die Seite für eine andere Person, Firma oder Organisation erstellst, musst du herausfinden, was sie von der Seite und ihrer Funktionalität erwarten. Alles, was du hier entscheidest, hat eine Auswirkung auf die fertige Seite.
- Braucht sie eine Storefront? Brauchst du Kommentare von Benutzern? Müssen Benutzer Accounts erstellen? Ist sie artikelorientiert? Bildorientiert? Alle diese und weitere Fragen helfen dabei, das Design und die Struktur der Seite in Form zu bringen.
- Dies kann ein schleppender Prozess sein, vor allem bei größeren Firmen, bei denen viele Leute im Projekt involviert sind.
-
Erstelle ein Diagramm der Sitemap. Ein Sitemap-Diagramm ist wie ein Flussdiagramm und zeigt, wie sich Benutzer von einer Seite auf die nächste bewegen. Du brauchst an dieser Stelle noch nicht einmal Seiten, nur einen allgemeinen Fluss von Konzepten. Du kannst für die Erstellung des Diagramms ein Computerprogramm verwenden oder es auf einem Blatt Papier skizzieren. Nutze das Diagramm der Sitemap, um zu zeigen, wie du dir die Hierarchie und Connectivity der Seite vorstellst.
-
Versuche es mit der Sortierung von Karten. Eine beliebte Methode für eine Gruppe ist es, einen Stapel Karten zu verwenden und auf jede den grundlegenden Inhalt einer einzelnen Seite zu schreiben. Lasse dein Team die Karten so organisieren, wie es für sie am nützlichsten erscheint. Dies ist am besten in Situationen, wenn du mit anderen zusammenarbeitest, um eine Webseite zu erstellen. [1] X Forschungsquelle
-
Verwende Papier und eine Pinnwand oder ein Whiteboard. Dies ist die ursprüngliche Planungsmethode für ein kleines Budget und ermöglicht es dir, Inhalte schnell zu löschen oder zu verschieben und neu anzuordnen. Zeichne das Design auf Papierblätter und verbinde sie mit einem Faden oder zeichne den Entwurf auf ein Whiteboard. Toll für Brainstormings.
-
Erstelle ein Inventar für die Inhalte. Dies zielt mehr auf Re-Designs als auf neue Seiten ab. Gib alle deine Inhalte oder bestehenden Seiten in eine Tabelle einer Tabellenkalkulation ein. Erstelle Notizen über den Zweck von jedem und verwende diese Liste, um zu bestimmen, was bleibt und was wegfällt. Dies hilft den Prozess des Re-Designs zu vereinfachen.Werbeanzeige
-
Erstelle ein Wireframe, um die Hierarchie zu festigen. Ein HTML Wireframe ist eine Art Skelett deiner zukünftigen Seite, das nur die einfachsten Tags und Blöcke verwendet, um den Inhalt darzustellen. Es beantwortet die Frage "Was kommt auf den Bildschirm und wohin?". Formatierung und Stil werden in einem Wireframe komplett ignoriert. [2] X Forschungsquelle
- Der Wireframe ermöglicht es dir, die Struktur des Inhalts und Flusses zu sehen, bevor du dich für einen Stil festlegst.
- HTML Wireframes sind nicht statisch wie PDFs oder Bilder und ermöglichen es dir, schnell Blöcke umherzuschieben, um eine neue Struktur zu erstellen.
- Ein Wireframe ist interaktiv, was sowohl für den Entwickler als auch für den Kunden wichtig ist. Da der Wireframe in einfachem HTML geschrieben ist, kannst du durch ihn navigieren und ein Gefühl dafür bekommen, wie das Bewegen zwischen den Seiten funktioniert. Dies ist etwas, das nicht durch ein PDF-Konzept dargestellt werden kann.
-
Versuche es mit der Gray Box-Methode. Versperre den Inhalt deiner Seite mit grauen Kästen, wobei der wichtigste Inhalt oben steht. Die Blöcke werden in einer einzelnen Spalte angeordnet, wobei die wichtigsten Inhalte oben auf der Seite stehen. Wenn die Seite z.B. die Seite "Über die Firma" ist, könnten die Details der Firma oben stehen, gefolgt von einer Liste der Mitarbeiter, dann die Kontaktdaten, etc. [3] X Forschungsquelle
- Dies schließt die Kopf- und die Fußzeile nicht mit ein. Die grauen Kästen sind einfach eine visuelle Darstellung des Inhalts, der auf der Seite zu finden sein wird.
-
Versuche es mit einem Wireframe-Programm. Es gibt mehrere Programme, die dir beim Wireframing helfen können. Die erforderlichen Programmierkenntnisse unterscheiden sich von Programm zu Programm. Zu den beliebteren Programmen gehören:
- Pattern Lab. Diese Seite spezialisiert sich auf "atomares Design", in dem jedes Stück Inhalt als "Molekül" angesehen wird, das die größere Seite ausmacht.
- Jumpcharts. Dies ist ein Service zur Planung von Webseiten und Wireframes. Eine kostenpflichtige Anmeldung ist erforderlich, aber du kannst schnell Wireframes erstellen, ohne dir zu viele Gedanken übers Programmieren machen zu müssen.
- Wirefy. Wirefy ist ein weiteres System für "atomares Design". Die Tools sind für Entwickler kostenlos verfügbar.
-
Verwende einfaches HTML Markup. Ein gutes Wireframe kann später leicht in die tatsächliche Seite umgewandelt werden. Mache dir während des Wireframings keine Gedanken über den Stil. Verwende statt dessen Markup, das leicht verständlich ist und mit wenig Aufwand herumgetauscht werden kann. [4] X Forschungsquelle
- Bei einem Wireframe ist weniger mehr. Das Ziel ist es, einfach die Struktur aufzubauen. Das Aussehen kann später mit CSS und erweitertem Markup angepasst werden.
-
Erstelle für jede Seite deiner Webseite einen Wireframe. Es mag verlockend sein, einen einzelnen Wireframe zu erstellen und zu sagen "Toll, ich kann das auf jede andere Seite anwenden und ich bin gut". Tatsächlich führt dies zu einer typischen und langweiligen Seite. Nimm dir die Zeit, für jede Seite einen Wireframe zu erstellen und du wirst bald herausfinden, dass jede Seite ihre eigenen organisatorischen Anforderungen hat.Werbeanzeige
-
Habe Inhalte fertig, bevor du mit dem Aufbau der Webseite beginnst. Es ist viel einfacher, wenn du siehst, wie der Stil deiner Webseite aussieht, wenn du deine tatsächlichen Inhalte statt Platzhaltern hast. Du brauchst nicht zu viel Inhalt, aber es sieht in einem Modell viel besser aus, wenn du Text und originale Bilder hast.
- Du brauchst nicht notwendigerweise den Text eines Artikels, aber du solltest zumindest echte Überschriften haben.
-
Denke daran, dass guter Inhalt mehr ist als Text. Das Internet ist viel mehr als einfache Textwebseiten. Um in deiner Nische hervorzustechen, brauchst du eine Vielzahl verschiedener Arten von Inhalten, um Besucher anzuziehen und zu behalten. Mögliche Arten für Inhalte:
- Bilder
- Audio
- Video
- Streams (Twitter)
- Facebook-Integration
- RSS
- Content Feeds
-
Beauftrage einen professionellen Fotografen. Wenn du Fotos auf deiner Webseite einschließt, wird der erste Eindruck mit professionellen Fotos viel besser sein. Ein einzelnes gutes Foto ist mehr wert als 20 schlechte.
- Suche nach Hochschulabsolventen in Kunstfotografie, diese sind günstiger als Experten mit langjähriger Berufserfahrung.
-
Schreibe qualitativ hochwertige Artikel. Der geschriebene Inhalt auf deiner Seite wird die Menge des Traffics bestimmen. Während du dir zu diesem Zeitpunkt beim Design der Webseite noch nicht zu viele Gedanken über die Erstellung von Inhalten machen musst, schadet es nicht, darüber nachzudenken, da du regelmäßig Inhalte brauchst, wenn die Seite live geht.
- Neben dem Inhalt von Artikeln gibt es geschriebene Dinge, die du wahrscheinlich während des Aufbaus der Webseite schon kennst. Dies könnten Kontaktdaten, Firmennamen oder andere Dinge sein, die an mehreren Stellen auf der Webseite verwendet werden.
Werbeanzeige
-
Style globale Elemente. Dies sind die Dinge, die auf jeder Seite auf deiner Webseite zu sehen sind, z.B. der Header, die Fußzeile und das Navigationsmenü. Erstelle einen sehr einfachen Stil, damit du sehen kannst, wie alle deine Seiten aussehen, wenn diese eingefügt sind. Dies wird sehr hilfreich sein, wenn du in den Layout-Prozess übergehst.
- Mache dir nicht zu viele Gedanken über die Details, aber versuche sie einigermaßen in die Nähe der letzendlichen Header zu bringen.
-
Erstelle ein einfaches Layout. Beginne, die Blöcke deines Wireframe aus der einzelnen Spalte heraus auf ihre Positionen auf der Seite zu verschieben. Du könntest z.B. den Navigationsblock auf die linke Seite der Seite verschieben und eine Liste der Überschriften nach rechts.
- Experimentiere für ein paar Seiten mit dem Layout, bevor du fortfährst. Lasse andere diese testen, um zu sehen, ob sie sich natürlich anfühlen.
-
Erstelle ein Modell. Verwende ein Programm wie Photoshop, um ein Modell einiger Seiten deiner Webseite zu erstellen. Verwende das festgelegte Layout als Anleitung. Du kannst in einem Bildbearbeitungsprogramm viel schneller arbeiten und alles so hinbekommen, wie du es möchtest. Damit kannst du diese Bilder als Referenzen verwenden, wenn es an die tatsächliche Entwicklung geht.
- Nimm tatsächliche Inhalte in das Modell auf, um sicherzugehen, dass alles zusammen gut aussieht.
-
Ersetze deine Blöcke mit Inhalt. Beginne mit dem Einfügen deiner Inhalte und Elemente in die Seite. Mache dir noch keine Gedanken über den Stil, bringe einfach alles in die richtige Position. Dies hilft dir festzustellen, ob deine Stiländerungen funktionieren werden.
-
Erstelle einen Style Guide. Dies ist wichtig zum Erhalt eines durchgehenden Stils, vor allem für größere Webseiten. Wenn die Seite für eine Firma ist, die bereits ein visuelles Branding hat, dann sollte dieses in das Design der Webseite aufgenommen werden. Dies solltest du in einem Style Guide berücksichtigen:
- Navigation
- Überschriften (<h1>, <h2>, etc.)
- Absätze
- Kursivdruck
- Fettdruck
- Links (aktiv, nicht aktiv, beim Drüberfahren mit der Maus)
- Bilder
- Icons
- Buttons
- Listen
-
Wende deinen Stil an. Wenn du dich für einen Stil und ein Design für die Seite entschieden hast, geht es jetzt an die Implementierung. CSS ist eine der einfachsten Möglichkeiten für die Implementierung eines Stils auf einer Seite oder der gesamten Webseite. Lies diese Anleitung für weitere Details zur Nutzung von CSS.Werbeanzeige
Referenzen
Über dieses wikiHow
Diese Seite wurde bisher 13.065 mal abgerufen.
Werbeanzeige
Melde dich für den kostenlosen wikiHow Newsletter an!
Du erhältst hilfreiche Tipps und Anleitungen jede Woche direkt in deine Inbox.
Registriere mich!
