Webdesign-Tutorial Homepageentwurf

ff-webdesigner

ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

Freelancer
 
Webdesign-Hotline
Sie haben Fragen rund
um Ihre Homepage?
Unser Internet-Service München & Regensburg berät Sie jederzeit gerne!

Tel: (+49) 941 4618 3055
Skype: ff-webdesigner
Webdesigner Hotline
   
   
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline

Sie haben Fragen zur
Suchmaschinenoptimier-
ung Ihrer Homepage? Rufen Sie uns an!

Tel: (+49) 941 4618 3055
Skype: ff-webdesigner Status
Suchmaschinenoptimierung
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
Webdesign-Hotline
Homepage-Probleme? Testen Sie unseren Internet-Service!

Tel: (+49) 941 4618 3055
Skype:
ff-webdesigner ff-webdesign status

Internet-Service
   
     

 

 
ff-webdesigner Zum Seitenanfang
   
  ff-webdesigner - Webdesign-Agenturen Regensburg & München

ff-webdesigner.de
Regensburg München Wien

 
   
     

 

 
ff-webdesigner Zum Seitenanfang

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 354 € 421,26 € 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.

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 + Internet Explorer 6 / 7
  • Ü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. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot WDE :
Webdesign-Entwurf
Unser Preis: ab 236 € 280,84 € incl. MwSt.
Für wen? Sie wünschen ein professionelles grafisches Homepage-Layout, die HTML-Struktur der Homepage aber selber erstellen

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. [Jetzt bestellen!] [Mehr Webdesign-Angebote]

Webdesign-Angebot HPK :
Komplette Homepage-Erstellung mit Layout, 10 Seiten
Unser Preis: 590 € 702,10 € incl. MwSt.
Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Komplettangebot aus den unter WDEpro, WEA und HUT aufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration - Sparen Sie bis zu 350 € gegenüber den Einzelpaketen!
  • Homepage-Erstellung mit 10 HTML-Seiten incl. Impressum und Kontakt
  • Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
  • Individuelles überzeugendes Layout mit Ihrem Firmenlogo
  • 10 HTML-Seiten mit Text/CSS-Navigation
  • Homepage-Erstellung unter Einsatz semantisch korrekten validem HTML
  • Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
  • Saubere Suchmaschinenoptimierung auf relevante Keywords
  • Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
  • Upload auf Server Ihrer Wahl oder Übergabe auf CD
  • Anmeldung bei den wichtigsten Suchmaschinen
  • Einrichtung aller Email-Adressen
Bei mehr als 5h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet. [Jetzt bestellen!] [Mehr Webdesign-Angebote]


Webdesign-Kundenmeinungen: "Kurz vor Weihnachten war unsere zu diesem Zeitpunkt auch technisch veraltete Homepage plötzlich mit Malware infiziert und musste vom Netz genommen werden. Nach etwas Recherche stiessen ..."  [weiterlesen]
 

Das Ganze ist mehr als
die Summe seiner Teile.

Aristoteles

Homepageentwurf Webdesign
Einträge aus dem ff-Webdesign Lexikon:

Entwurf bedeutet im Webdesign die grafische Konzeption einer Webseite. Der Webdesign-Entwurf wird in Grafikprogrammen wie z.B. Photoshop erstellt. Die Abnahme des Entwurfes ist ein wichtiger Schritt bei der Realisierung einer Website. Erst nach Entwurfsabnahme folgt die Umsetzung der Webseite in HTML.

Layout ist die Verbildlichung eines geistigen Entwurfes. Das Layout vermittelt Auftraggebern erste Eindrücke und wird im Projektverlauf zunehmend konkretisiert. Webdesigner verwenden ein sogenanntes Master-Layout, aus der nach Freigabe durch den Auftraggeber alle weiteren Seiten der Webpräsenz erstellt werden. Gute Webdesigner versuchen immer, das Layout einer Homepage so einfach und gleichzeitig überzeugend wie möglich zu gestalten. Ein sehr häufiger Fehler im Webdesign ist die Verwendung mehrerer ... [ Mehr lesen ]

Homepage Der Begriff Homepage hat im Webdesign zwei ungleiche Bedeutungen. Klassisch definiert der Begriff Homepage die Eingangsseite einer Webpräsenz. Heute wird der Begriff Homepage auch für die Summe aller Dateien, welche eine Webpräsenz bilden, gebraucht. Der Begriff Homepage wird dann zum Synonym für Webpräsenz.

Webdesign ist die Ganzheit aller Dienstleistungen, die für die Erstellung, Änderung oder den Betrieb einer Homepage nötig sind. Typische Aufgaben im Webdesign sind: Entwurf, Layout, HTML-Umsetzung, JavaScript-Coding, PHP-Coding, Updates, ... [ Mehr lesen ]

B2C ist die Abkürzung für Business-To-Consumer und steht somit für den Handel zwischen Geschäftsleuten und Konsumenten. Vergleiche auch B2B.

B2B ist die Abkürzung für Business-To-Business und steht damit für den Handel zwischen Geschäftsleuten. Vergleiche auch B2C.

Navigation Die Navigation ist der Hauptunterschied zwischen Internet und klassischen Printmedien. Durch die Navigation hat der Benutzer die freie Auswahl bei seiner Bewegung auf einer Homepage. Die Navigation einer Webseite wird in der Regel in einem Block zusammengefasst und kann bei größeren Homepages mehrere hierarchisch aufgebaute Ebenen beinhalten. Eine schlechte Navigation ist der Hauptgrund für den Misserfolg bestimmter Webseiten.

Browser Der Browser ist das Programm auf Ihrem Computer, mit dem Sie gerade diese Definition lesen. Der derzeit weitverbreitetste Browser ist der Internet Explorer von Microsoft mit einem Marktanteil von ca. 75% (sinkend). Weitere wichtige Browser sind Netscape (jetzt von AOL weiterentwickelt), Opera sowie der auf der Netscape-Engine basierende Firefox Browser. Mit dem Trend ... [ Mehr lesen ]

... [ Mehr lesen ]

Cross-Browser-Compatibility bedeutet "übergreifende Browserkompatibilität" und steht für das Bestreben des Webdesigners, seine Webseiten in allen Browsern exakt gleich aussehen zu lassen. Jeder Browser stellt Webseiten etwas anders dar. Gute Webdesigner sorgen dafür, dass Ihre Homepages in allen Browsern möglichst gut aussehen. Prinzipiell gilt: Je einfacher eine Homepage aufgebaut ist, desto einfacher ist Cross-Browser-Compatibility zu erreichen.

Usability Eine gute Nutzbarkeit ist die wichtigste Grundlage für den Erfolg einer Homepage. Usability bedeutet Gebrauchstauglichkeit: eine Homepage so zu gestalten, dass ein Maximum an Nutzern die Homepage mit minimalem Wissen einfach bedienen kann. Die kritischen Teilbereiche für gute Usability sind vor allem Navigation, Farben, Aufteilung, Layout sowie die Struktur der gesamten Homepage. Usability ist immer ein subjektiver ... [ Mehr lesen ]

HTML ist die Kurzform von "Hyper Text Markup Language" und ist die jeder Webseite zugrundeliegende Programmiersprache im Web. HTML wurde 1989 von Tim Berners-Lee in Genf zur Übermittlung wissenschaftlicher Daten entwickelt. Seine heutige Bedeutung erhielt HTML erst durch den Boom im Internet ab ca. 1995. HTML regelt den Aufbau und das Aussehen der in den HTML-Tags enthaltenen Texte. HTML wird im Klartext übermittelt, d.h. Auch Menschen können HTML ... [ Mehr lesen ]

CSS ist eine zu HTML gehörige Ergänzung, die die Trennung von Layout und Inhalten ermöglicht. In seperaten Dateien werden allgemeingültige Regeln für das Aussehen bestimmter Tags auf der gesamten Website definiert. Änderungen am Layout sind so flexibler und in kürzerer Zeit möglich. Auch für unterschiedliche Ausgabegeräte (Audio, Drucker, WAP) können verschiedene Layouts definiert werden. Insbesondere CSS ist ein wichtiger Punkt bei der ... [ Mehr lesen ]

JavaScript ist eine von Netscape entwickelte objektbasierte Programmiersprache, die in erster Linie zur Dynamisierung von Webseiten verwendet wird. Javascript wird nicht auf dem Server, sondern auf dem Rechner des Betrachters ausgeführt und ist die einzige Möglichkeit zur Verarbeitung zahlreicher Variablen wie z.B. Bildschirmauflösung, Farbanzahl, Browserart und -version etc. Über die DOM-Schnittstelle können ... [ Mehr lesen ]

Rollover ist das Austauschen einer Grafik gegen eine andere, sobald man darüber mit der Maus fährt. Ein Rollover wird im Webdesign gerne für Navigationselemente eingesetzt und basiert auf Javascript. Ein klassisches Beispiel ist die „Beleuchtung“ eines Buttons, wenn man mit der Maus darüberfährt. Vorteile beim Einsatz eines Rollovers sind die bessere Usability durch Verdeutlichung. Nachteile ... [ Mehr lesen ]

WYSIWYG ist die Abkürzung für das englische "What you see is what you get." ("Was du siehst, ist was du erhältst."). Es bedeutet, dass eine Datei während der Bearbeitung im WYSIWYG-Editor genauso aussieht wie im späteren Ausgabemedium. Im Webdesign bedeutet WYSIWYG den Einsatz eines grafischen HTML-Editors. HTML-Code wird nicht von Hand geändert, sondern Seitenelemente mit der Maus per Click and Drop angepasst. Der WYSIWYG-Editor schreibt ... [ Mehr lesen ]

Slicing bedeutet "zerschneiden". Im Webdesign mit Photoshop bedeutet Slicing das Zerlegen eines Entwurfes in verschiedene Teilgrafiken. Ziel der Zerteilung ist ein flexibler Seitenaufbau sowie perfekte Größenoptimierung durch Wahl des zur Teilgrafik passenden Dateiformats. Das Slicing findet gewöhnlich zwischen der Entwurfsabnahme und der Abnahme des HTML-Masterlayouts ... [ Mehr lesen ]

JPEG ist neben GIF das Haupt-Grafikformat im Internet. Basierend auf einer MPEG-Kompression bietet es die Möglichkeit, große Bilder für den schnellen Transport im Internet aufzubereiten. JPEG oder auch JPG wird vor allem zur Kompression von Bildern eingesetzt, die unregelmässige und vielfarbige Flächen aufweisen, in der Regel Fotografien. Auch moderne Videokompression wie z.B. DivX basiert auf dem JPEG zugrundeliegenden Verfahren.

GIF bedeutet Graphic Interchange Format. GIF ist eines der drei Hauptgrafikformate im Webdesign. Der Einsatz empfiehlt sich für grafische Bilder mit einheitlichen Farben und geraden Flächen. Außerdem sind mit GIF auch Animationen und transparenter Hintergrund möglich. GIF ähnelt dem überlegenen Format PNG, hat jedoch maximal 256 Farben und keinen Alphakanal (stufenlose Transparenz für jede einzelne Farbe). Zum Erstellen eines GIFs werden Bildeditoren wie Photoshop, Photo Impact oder das kostenlose ... [ Mehr lesen ]
 
  ff-Webdesigner
Kostenrechner


Berechnen Sie jetzt online, was Ihre Homepage bei den ff-webdesignern kostet.

[ Jetzt berechnen ]
 
 
 
 
 
 
 
Business-HomepagesFreelancer Webdesigner