Webdesign-Tutorial: Homepageentwurf

Das Entwerfen einer Homepage erfolgt normalerweise in zwei voneinander getrennten Schritten. Zuerst erfolgt die reine Entwurfsarbeit, dann die Umsetzung des Entwurfes in ein Masterlayout in HTML, das dann immer wieder für neue Seiten bei der Ausarbeitung kopiert wird. Diese Anleitung richtet sich an Webdesign-Anfänger.

Diese Trennung beim Entwurf ist aus zwei Gründen äußerst wichtig: Erstens führt eine saubere Vorarbeit beim Entwurf im allgemeinen zu einem besseren Layout der Homepage. Zweitens ist eine Änderung am Layout nach dem Beginn der Homepage-Ausarbeitung bedeutend zeitaufwendiger, da immer alle bereits erstellten Seiten nochmals geändert werden müssen.

Die Entwurfsarbeit umfasst die grafische und inhaltliche Konzeption der Homepage. Anfangs verwendet man hierfür normalerweise nur Stift und Papier. Viele Layoutvariationen einer geplanten Website lassen sich so in kurzer Zeit überlegen, diskutieren und verbessern. Wichtige Fragen, die sich der Webdesigner hier zu stellen hat sind z.B:

• Welchen Zweck hat die Homepage und wie kann das Layout den Zweck der Homepage verdeutlichen?
• Was bietet der Auftraggeber seinen Kunden über die Homepage an und wie könnten sich Besonderheiten dieses Angebots im Design der Webseite widerspiegeln?
• Welche Inhalte werden über die Webseite angeboten werden? Nicht alle Layouts eignen sich für alle Inhalte.
• An welche Besucher richtet sich die Homepage? Ältere Menschen brauchen größere Schrift, größere Schrift braucht mehr Platz in Navigation und Inhalt.

Die Webdesign-Grobstruktur Alle obigen Fragen helfen beim Finden der Grobstruktur der Homepage. Unter der Grobstruktur oder auch der Topologie eines Layouts versteht man im Webdesign die Flächenmäßige Verteilung der einzelnen Funktionsbereiche. Ein Funktionsbereich ist eine Fläche im Layout, der eine bestimmte Funktion erfüllen soll. Typische Funktionsbereiche einer Webseite sind beispielsweise Navigation, Kopfbereich mit Logo des Anbieters und der eigentliche Inhaltsbereich.

Funktionsflächen Für die Funktion – und den damit direkt verbundenen Erfolg – einer Homepage ist ein schlüssiges Topologie-Konzept der erste große Stolperstein beim Entwurf. Eine Homepage mit nicht funktionierender Grobstruktur wird niemals Erfolg haben, egal wie groß und einmalig der präsentierte Inhalt ist. Wie kommt der Webdesigner nun zu einer schlüssigen Topologie?

Ein gutes Konzept muss drei Bedingungen erfüllen: Es muss durchgängig auf allen Seiten gleich sein (Konsistenz). Es muss dem Zielpublikum möglichst schnell verständlich sein, und es muss dem Anbieter und dem Angebot entsprechen.

1. Ein Layout für alle Seiten! Eine Struktur ist zuallererst einmal dann gut, wenn Sie durchgehend auf allen Seiten einer Homepage sinnvoll angewandt werden kann., d.h. Wenn sie nicht im Widerspruch zu den Inhalten steht. Eine Homepage, auf der die Funktionsbereiche von Seite zu Seite ihre Stellen wechseln wirkt verwirrend: ein Besucher muss auf jeder Seite neu den Inhalt, Navigation etc. finden.

2. Einfache, klare Seitenunterteilung! Zweitens muss das Konzept zum anvisierten Zielpublikum passen. Generell lässt sich hier sagen: Je vielschichtiger und älter das Zielpublikum, desto konservativer sollte die Topologie sein. Es gibt hier eine Reihe guter Webseiten-Strukturen, die weit verbreitet und bewährt sind.

Vertikal Schauen Sie sich die Website www.lsc-canada.de an! In einer immer gleich bleibenden horizontalen Kopfleiste finden Logo des Anbieters sowie Titelgrafiken Platz. Auf der linken Seite werden vertikal die einzelnen Navigationspunkte angeordnet. Den Rest der Fläche nimmt der eigentliche Inhalt der Homepage ein. Wird gerne für umfangreichere Sites verwendet, da die Navigationsbereiche beliebig verlängert werden können.

Horizontal Die Website www.kitecamp.com verwendet eine horizontale Navigation unter der Titelgrafik. Der darunterliegende Raum steht auf der gesamten Breite dem Inhalt zur Verfügung. Zum Einsatz kommt das horizontale Schema eher bei kleinen Websites. Unversierte Internetuser scrollen nur vertikal, deswegen kann eine gute Navigation in der Breite nicht beliebig vergrößert werden.

Mischformen Sehr große Websites verwenden gerne Mischformen aus horizontaler und vertikaler Unterteilung. Diese Variante bietet den meisten Platz für die Navigation. Die Site www.sprachkurse-weltweit.de verwendet im Kopfbereich eine horizontale Navigation (Hauptpunkte). Bei den untergeordneten Navigationspunkten kommt eine vertikale, beliebig erweiterbare Navigation auf der linken Seite zum Einsatz.

Experimentell Werden besondere Inhalte angeboten, oder ein besonderes Zielpublikum angesprochen, kann man von bewährten Strukturen abweichen und experimentellere Topologien entwickeln, wie z.B. bei www.kunst-moment.de

3. Das passende Layout Der dritte wichtige Punkt, der eine gute Homepagestruktur auszeichnet, ist der passende Zusammenhang mit dem Angebot und dem Anbieter. Manche Angebote müssen mit anderen Flächenverteilungen präsentiert werden, als andere. Ein Tourismusunternehmen braucht viel Platz für Beschreibungen und Bilder seines Angebots siehe www.boehmen-reisen.de . Ein Webkatalog braucht mehr Platz für die Navigation, da seine Qualität vor allem von der systematischen Unterteilung in Unterbereiche abhängt (www.sprachkurse-weltweit.de).

Buchempfehlung Ein hervorragendes Buch mit vielen nützlichen Beispielen und Analysen von Homepage-Strukturen ist „Layout Digital“ von David Skopec, erschienen im Rowohlt Taschenbuch Verlag, 16,90 €.

Grafisches Konzept Ist die Grobstruktur einer Homepage gefunden, beginnt der Webdesigner mit der Entwicklung eines grafischen Konzepts. Das grafische Konzept beginnt meist mit dem Suchen der richtigen Farben.

Die richtigen Farben Häufig wird ein Farbkonzept durch bestehende Logos oder Kataloge des Auftraggebers vorgegeben. Um den Wiedererkennungswert zu wahren sollte man in solchen Fällen diese Vorgaben nicht ignorieren. Gibt es keine solchen Vorgaben, so muss der Webdesigner selbst ein passendes Farbkonzept entwickeln: Welche Farbe passt von ihrer Bedeutung zum Angebot? Gibt es inhaltliche Bezüge zwischen dem Angebot und einer bestimmten Farbe? Häufig wird eine Primärfarbe für die Website durch eine dieser Fragen vorgegeben. Im Webdesign kosten Farben kein Geld. Dies wirkt sich zweierlei aus: Einerseits ist es wunderbar, alle möglichen Farben jederzeit nutzen zu können. Andererseits besteht aber genau hierin ein großes Problem, vor allem für Webdesign-Anfänger. Zu viele nicht aufeinander abgestimmte Farben wirken unruhig und verwirrend.

Wenige Farben! Gute Webseiten bestehen meist aus nur zwei bis vier aufeinander abgestimmte Farben, häufig Komplementärfarben mit guten Kontrasten. Wenige Farben ermöglichen die inhaltliche Verbindung bestimmter Funktionen einer Homepage mit jeweils einer bestimmten Farbe und tragen somit zur intuitiven Benutzerführung bei. Beispielsweise können alle Links auf Webseiten rot sein, alle Textinhalte schwarz und alle Überschriften blau. Besuchen Sie den EasyRGB! Geben Sie verschiedene Farben vor, die Website liefert Ihnen dazu passende Frabreihen.

Kontraste Achten Sie stets auf gute Kontraste! Dunkel auf Hell ist immer besser lesbar als Hell auf Dunkel. Halten Sie den Hintergrund von Textbereichen äußerst dezent, am besten einfarbig!

Layoutdesign Steht das Farbkonzept, fängt die Hauptarbeit im grafischen Vorentwurf an: Was soll die Aussage der Homepage sein, was sind die Inhalte, wer ist das Zielpublikum? Mit welchen grafischen Mitteln und Inhalten wird das Layout gestaltet? Formentwürfe und Ideen zu möglichen ins Layout oder den Hintergrund zu integrierenden Bildern führen allmählich an die Gestalt der Homepage heran.

Lassen Sie sich von Homepages aus dem gleichen Feld inspirieren! Kaufen Sie Webdesign-Bücher wie z.B. den Webdesign-Index von Pippin Press. Kopieren ist die beste Möglichkeit, zu lernen. Aber kopieren Sie nicht nur, sondern passen sie Konzepte auch Ihren Notwendigkeiten an, beachten sie das Copyright! Copyrightfreie Bilder finden Sie im Internet nur auf wenigen Seiten, eine davon ist www.sxc.hu.

Verwenden Sie Raster! Ein Raster ist das einfachste und effektivste Mittel bei der Strukturierung Ihres Homepage-Entwurfs. Raster engen niemals ein, sie befreien durch die Verbesserung der Ordnung. Orientieren Sie alle Layoutelemente strikt am Raster. Einige wenige Elemente, die aus dem Raster herausfallen, wirken später umso lebendiger. Verwenden Sie beim Entwurf am besten Raster mit Pixelmaßen (800 oder 1024 Pixel Breite). Homepages sollten wegen der vereinfachten Umsetzung immer im Maßstab eins zu eins geplant werden.

Grafikdesign Sind Sie sich auf dem Papier klar darüber geworden, wie Ihre Homepage ungefähr aussehen soll, so können Sie mit der Ausarbeitung am PC beginnen. Die meisten Webdesigner verwenden für den grafischen Entwurf einer Homepage Adobe Photoshop. Für den Gelegenheitsnutzer ist dieses Programm mit seinen fast 1400 € Listenpreis sicherlich viel zu teuer. Es gibt jedoch auch noch eine kostengünstigere Version, nämlich Photoshop Elements für ungefähr 80 €. Eine weitere Alternative ist das Programm Photo Impact von Ulead für ungefähr 20 €.

Bildschirmauflösung und Entwurfsgröße Bei der grafischen Ausarbeitung des Entwurfs am PC mit einem Grafikprogramm ist die erste wichtige Frage: Wie viel Platz habe ich auf dem Bildschirm für meine Homepage zur Verfügung? Ca. 6 Prozent aller Nutzer haben eine Auflösung von nur 800 mal 600 Pixel, der größte Teil von zirka 60 Prozent aller Nutzer benutzt eine Auflösung von 1024 mal 768 Pixel. Ca. 20 Prozent aller Nutzer haben Auflösungen über dieser (Stand: Juli 2006. Quelle: www.webhits.de).

Da die Bildschirmauflösung so etwas wie den kleinsten gemeinsamen Nenner für das Webdesign darstellt, sollte man sich immer an der niedrigsten Auflösung (800/600) orientieren. In unserem Fall verwenden wir die nächst höhere Auflösung 1024/768. Damit stehen maximal 1000 mal 600 Pixel zur Verfügung, je nach Browser und benutzerspezifischen Einstellungen. Ein überall gut dargestellten Entwurf sollten Sie sich an einer maximalen Breite von 800 Pixel orientieren. Das Scrollen der Seite in eine Richtung geht in Ordnung. Somit kann die Höhe ein Vielfaches der darstellbaren Höhe von ca.600 Pixel betragen.

Legen Sie in ihrem Grafikprogramm eine neue Datei mit einer Größe von zirka 1200 mal 1000 Pixel an. Für den eigentlichen Inhalt Ihrer Homepage stehen freilich max. 1000 Pixel Breite zur Verfügung. Da es jedoch auch noch die Möglichkeit gibt, im Body-Tag einen Hintergrund für die gesamte Seite zu definieren, der durchaus auch breiter als das eigentliche Layout sein kann, sollten Sie auf der Seite noch etwas Platz zu Verfügung haben. Das Layout einer Homepage wird immer im Maßstab 1:1 erstellt, da er nur dann ohne Verzerrungen und mit minimalem Aufwand in HTML übergeführt werden kann.

Einfache Linien! Arbeiten sie beim Erstellen des Layouts mit einfachen Linien. Reduzieren Sie Ihren Entwurf so weit wie möglich. Weniger ist mehr! Am Anfang ist es sehr schwer zu begreifen, wie schnell der Nutzer einer Homepage sich durch zu viel Layout verwirren lässt. Regelmäßige Abstände, vorgegeben durch ein Raster erleichtern das Verstehen der Homepage. Fügen sie in ihrem Grafikprogramm Blindtexte in Original-Schriftgröße ein. Nur so können sie genau beurteilen, wie viel Platz Sie für Navigation und Texte auf dem Bildschirm brauchen. Wählen Sie keine zu kleinen Schriftgrößen aus. Zwölf Pixel ist in den meisten Fällen eine gute Größe für Schrift auf dem Bildschirm.

Navigation Falls sie vorhaben, ihre Navigation vertikal auf der Seite anzuordnen, rechnen Sie bei dieser Schriftgröße mit ca. 150 Pixel Breite. Wenn sie ihre Navigation horizontal unter einer Titelgrafik anordnenden, bedenken Sie, dass Sie bei einer Schriftgröße von zwölf Pixel nur ca. 200 Zeichen auf einer Breite von 750 Pixel unterbringen können.

Arbeiten sie in ihrem Grafikprogramm mit Ebenen! Sie haben dann die Möglichkeit, Ihren Entwurf jederzeit zu ändern. Sie können Ebenen einblenden, ausblenden, verschieben oder mit besonderen Effekte wie zum Beispiel Schlagschatten versehen. Außerdem können Sie natürlich die Reihenfolge der Ebenen ändern, was besonders dann an Bedeutung gewinnt, wenn manche Ebenen transparent sind. Erst durch die Aufteilung ihres Entwurfes auf verschiedene Ebenen haben Sie die Möglichkeiten, einzelne Elemente unabhängig voneinander zu editieren.

Grafik oder HTML? Bedenken Sie bei ihrem Entwurf im Grafikprogramm auch jederzeit, dass viele einfache grafische Elemente viel schneller in HTML dargestellt werden können, als diese per Grafik in eine Seite einzubinden. Beispiele hierfür sind rechteckige Kästen, gerade Linien oder Listenpunkte. Ferner empfiehlt es sich stets, die Navigation als Text und nicht als Grafik anzulegen. Dies hat zwei Gründe: erstens wird die Seite schneller geladen, und zweitens haben Suchmaschinen dann mehr zu lesen: ihre Homepage wird besser positioniert. Mit Hilfe von CSS und Javascript ist es später bei der HTML Umsetzung möglich, hinter diese Textlinks dynamisch Grafiken ein- und auszublenden (Pseudo-Roll-Overs, siehe www.sprachboerse.de.

Slicing Sobald sie mit Ihren Entwurf im Grafikprogramm zufrieden sind, beginnt das Slicing. Unter Slicing versteht man das unterteilen des Entwurfes in kleinere grafische Bestandteile. Die Unterteilung ist aus zwei Gründen sinnvoll: erstens gibt es verschiedene Grafikformate (JPEG und GIF), die sich für verschiedene Teilbereiche des Entwurfes anbieten. Für Fotos verwendet man im allgemeinen JPEG. Für grafische Flächen mit wenigen Farben verwendet man GIF. Die größere der Grafiken lässt sich durch die Auswahl des richtigen Grafikformats reduzieren. Der zweite wichtige Grund für das Slicing liegt im Aufbau einer HTML-Seite begründet: normalerweise wird das gesamte Layout über unsichtbare ineinander verschachtelte Tabellen realisiert. Eine Tabellenzeile kann zum Beispiel für die Titelgrafik verwendet werden, eine andere für den Hintergrund der Navigation, und eine dritte für einen einfachen grafischen Hintergrund unter dem Text.

Export Der Entwurf Ihrer HTML-Seite wird jetzt exportiert. Jedes Slice wird im optimierten Format abgespeichert. Damit sind die grafischen Arbeiten an Ihrer Homepage beendet. Sämtliche Grafiken, die sie bis jetzt erstellt haben, werden ab sofort in einem HTML-Editor umgesetzt.

Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesign-Download-Bereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf- Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop- Aktionen – und Homepagelayouts.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot WDEpro : Webdesign-Entwurf + HTML

Unser Preis: ab 540 €626,40 € incl. MwSt.

Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.

Auftrag erteilen

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:

• saubere Umsetzung des grafischen Entwurfs in HTML
• semantisch korrekter HTML-Code, W3C-valide, barrierefrei
• CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
• Anordnung Dummy-Überschriften / Texte / Bilder
• Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
• ausgeführte Meta-Angaben für Eingangsseite
• Layouttest in alle gängigen aktuellen Browsern und alten Internet-Explorer-Versionen
• Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email

Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot WDE : Webdesign-Entwurf

Unser Preis: ab 360 €417,60 € incl. MwSt.

Für wen? Sie wünschen ein professionelles grafisches Homepage-Layout, die HTML-Struktur / das Template der Homepage aber selber erstellen

Auftrag erteilen

Bis zu 4h individueller grafischer Entwurf für Ihre Homepage in Photoshop, incl:

• klare Definition von Navigations/Inhaltsbereichen
• alle nötigen Ebenen und Ebeneneffekte / Stile
• Farbschemata für die Umsetzung von Hintergrund, Vordergrund, Texten und Links
• Anordnung Ihres Firmenlogos, Blindtexte, Blindnavigation und Blindgrafiken
• Rücksprache und Korrekturen am Entwurf bis insgesamt maximal 1h
• bei allen Entwurfsarbeiten achten wir auf die einfache Umsetzbarkeit unter Berücksichtigung der Barrierefreiheit im WWW
• Slicen des fertiggestellten Entwurfes
• die übergabe des Entwurfes erfolgt als .psd via Email

Das Angebote WDE beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität digital durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten

Unser Preis: 900 € 1.044,00 € incl. MwSt.

Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Auftrag erteilen

Komplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!

• Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
• Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
• Erstellen und formatieren von Seiten incl. Impressum und Kontakt
• Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
• Individuelles überzeugendes Layout mit Ihrem Firmenlogo
• Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
• Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
• Saubere Suchmaschinenoptimierung auf relevante Keywords
• Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
• Anmeldung bei den wichtigsten Suchmaschinen
• Einrichtung aller Email-Adressen

Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]