Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Montag, 25. Februar 2013

Aufbau einer Homepage Teil 1

lulu
frozen-heart von Falling Into A Dream hat mich gebeten, ein Tutorial über den Aufbau einer Homepage zu schreiben. Und genau darüber ist dieser Post hier :) Danke Sou1mates, für die tolle Idee!

Als erstes sei gesagt, dass natürlich jeder seine Page so gestalten kann, wie er möchte und wie es gefällt.
Allerdings haben sich in der "Szene" ein paar Sachen "eingebürgert", die sich mehr oder weniger als logisch und praktisch erwiesen haben. Die möchte ich euch hier aufzeigen.
Es sind auch alles nur Tipps und Vorschläge und keine "Must haves".


Grund Unterseiten


Es gibt Unterseiten, die sollten auf jeder Homepage vorhanden sein.
Die Wichtigste davon ist wohl eine "Home" Seite. Es ist die Unterseite, die angezeigt wird, wenn die Page aufgerufen wird. Auf der Home Seite sollte daher ein kurzer knackiger Text stehen, um was für eine Page es sich handelt, damit der Besucher auch weiß, wo er momentan ist und was er von der Page erwarten kann.
Alternativ dazu kann man auch, wie ich hier auf diesem Blog, diesen Beschreibungstext bereits in der Navigation oder im Header verfassen.
Auf der Home Seite verfassen auch viele gleich ihre News. Das ist ganz praktisch, da der Besucher gleich sieht, was es neues auf der Page gibt, ohne erst mal "rum klicken" zu müssen.

Willkommens Text von PinkPearl

Wichtig ist, dass der Besucher den Homepagebesitzer auch erreichen kann! Deshalb sollte es zumindest eine Kontakt Unterseite, eine Shoutbox oder ein Gästebuch geben!

Damit die Seite gefunden wird, muss sie von anderen Seiten verlinkt werden. Daher ist es nicht schlecht, wenn man ein Linkset anbietet und auf die Suche nach Partnern, Cuties und/oder Affis geht. Diese können natürlich auch entweder im Design, oder auf verschiedenen Unterseiten angezeigt werden.

Auch die Credits dürfen nicht fehlen (außer man hat alles komplett selbst gemacht (Bilder etc.), was aber in den meisten Fällen nicht zutrifft). Diese sollten am Besten in Unterkategorien aufgeteilt sein, damit der Besucher sich auch schnell zurecht findet.

Aufbau einer Unterseite


Unterteilt eure Textseiten in verschiedene Absätze ©PinkPearl

Zu beginn einer Unterseite sollte immer stehen, auf was für einer Unterseite man sich befindet. Es sollte also eine "Überschrift" geben. Als nächstes kann gern ein kleiner Text den Besucher darauf hinweisen, wo er sich befindet bzw. was sich auf der Unterseite befindet. Es ist am Übersichtlichsten  wenn man die Unterseite ebenfalls in mehrere Absätze/Kategorien unterteilt. Z.B. könnte es auf der Unterseite "Link us" noch eine Unterteilung in "Banner" und "Buttons" geben.


Inhalt

Bei dem Inhalt einer Page kommt es immer darauf an, was für ein Thema die Seite hat. Zum Beispiel sollte es auf einer Grafikseite auch Grafiken geben, auf einer SailorMoon Homepage sollten mindestens die wichtigsten Informationen zu Sailor Moon zu finden sein.
Doch die wenigsten Besucher lesen gerne rießige Texte. Daher sollten die Informationen immer wieder mit passenden Bilder aufgelockert werden. Auch das Hervorheben der wichtigsten Daten (evtl. mit verschiedenen Farben) erleichtert dem Besucher das Lesen. Aber Vorsicht: zu viele Farben und Hervorhebungen können den Text auch gleich unübersichtlicher machen!
Der Inhalt der Page sollte immer gut zu lesen sein. Das heißt: eine Farbe, die auf dem Hintergrund gut leserlich ist und eine Schriftgröße/Schriftart, die für den Besucher angenehm ist. Hier bietet sich z.B. Tahoma (13px) oder Arial (11px) an. Auch mit "Text Effekten" sollte bei einem Text gespart werden. Bei Überschriften ist es ok, aber bei normalen Texten kann es sehr schnell anstrengend werden, mit verschiedenen Texten die Informationen zu Lesen.
Hier ein kleines Beispiel:

Gut leserlich, Text ohne Effekte:
Dieser Text ist gut leserlich. Er grenzt sich gut vom Hintergrund ab, die Schriftart ist nicht zu verspielt und die Schrifgröße ist gut leserlich. Das ist jetzt übrigens die Schriftart "Verdana" (12px).
Schlecht leserlich mit Schatten:
Jetzt stellt euch mal vor, hier steht ein rießiger Text in dieser Schrift mit Schatten. Hättet ihr Lust, ihn zu lesen? Es strengt die Augen mit der Zeit zu sehr an und man verliert einfach die Lust.

Ich denke, ihr wisst worauf ich raus möchte :) Oft verführen die vielen Möglichkeiten, die es heute gibt, den Admin dazu, viele Effekte einzubauen (nicht nur bei Texten, sondern auch bei Bildern). Doch eigentlich zählt doch der Inhalt des Textes. Was bringt es, wenn man viele Effekte verwendet und somit zeigt "was man kann", wenn keiner mehr den Text liest?


Style der Textseiten

Bei Unterseiten mit ähnlichem Aufbau findet sich der Besucher schneller zurecht.  ©PinkPearl


Damit euer Besucher sich schnell und gut zurecht findet, solltet ihr darauf achten, einen einheitlichen "Style" auf euren Unterseiten zu haben. Zum Beispiel solltet ihr immer die gleiche Schriftfarbe / Schriftart / Schriftgröße jeweils für eine Überschrift und einen Text verwenden und immer ungefähr den gleichen Aufbau haben. Überlegt euch am Besten gleich zu beginn, wie eure Textseiten aussehen sollen. Vielleicht kennt ihr auch eine Page, deren Aufbau euch sehr gefällt und an der ihr euch orientieren könnt. Überlegt euch, was ihr selbst erwartet, wenn ihr auf eine Page mit eurem Thema geht. Würdet ihr die Texte lesen? Würdet ihr die Seite wieder besuchen? Was findet ihr an anderen Seiten toll?



Das war es jetzt erstmal mit Teil 1. Über was wollt ihr mehr erfahren? Schreibt Kommentare :) Dann weiß ich, in welche Richtung der zweite Teil gehen soll!


3 Kommentare:

  1. Hi
    also der Post ist richtig gut. Die wichtigsten Punkte sind aufgelistet und ich glaube ich check nochmal meine HP durch, ob auch wirklich alles geordnet und lesbar ist.

    Ich mag HPs leider nicht sonderlich mit Schatierung für den text, da ich blindes Huhn es nicht lesen kann <.<
    Ungefähr gleicher aufbau ist total wichtig, sonst hat man schnell seine Besucher verloren. Irgendwo muss ja ein wiedererkennungswert drin sein.
    Für den zweiten Teil habe ich schon eine Idee und zwar Interaktiv und wie es gestaltet wird, Layout und eventuell die Browser!
    Wir kennen es alle: IE ist unser totfeind, dennoch benutzen viele diesen Browser. Bei Pinkpearl ist das Problem... das man nicht auf die Grafiken mit diesem doch sehr schönen effekt zugreifen kann, also wenn ich auf den IE gehe. Jeder der IE benutzt kann keine Grafiken wie Wallpaper oder dergleichen verwenden (höchstens bei der Iconabteilung). Für ein Review wird das (ohne jmd. persönlich damit anzugreifen) Minuspunkte geben. Also man sollte schon achten, dass das ganze auch bei Browsern, die man nicht so gerne benutzt alles stimmt. Ist bei uns in der Schule bei Homepages ein großer wichtiger Punkt.

    Bei Credits noch hinzufügen, dass sie gut geordnet, leicht lesbar und auch darunter den Disclaimer haben, welche man glaube ich bei recht24.de holen kann. Denn Credits wo da nur Bildchen sind und man weiß nicht wohin der Link geht sind nicht so Hilfreich, als wenn man alles schön kategoriersiert und der Name dabei steht.

    Gehe doch beim zweiten Teil auch auf das Layout ein. Du als GFX-Expertin kannst da sicherlich was dazu sagen^^

    So das wärs erst einmal.

    AntwortenLöschen
  2. Wirklich gut zusammen gefasst!
    Ich denke daran kann man sich als Webby immer halten, für mich sind das schon fast "Must-haves".

    Was ich auch immer echt wichtig finde, ist dass man mit Effekthascherei spart. Ich habe schon so viel Webseiten gesehen, die zum Beispiel ein Hintergrundbild hinter dem Content haben, das farblich so intensiv ist, dass man kaum eine Schrift darauf lesen kann.
    Aber die Webbys finden dann natürlich eine Schrift, die sich überall etwas abhebt: grelles rot.
    Wenn ich so eine Webseite sehe bin ich dahin, ohne mir auch nur einen Satz durchgelesen zu haben.

    Genauso wie bei den Schatten - als das möglich wurde, entstand ein regelrechter Hype. Und ich muss sagen es gibt ein paar Möglichkeiten, wie die Schrift trotzdem leserlich bleibt. Das geht aber fast nur bei grauer Schrift, wo der Schatten sehr abgeschwächt ist und weißer Hintergrund vorhanden ist.
    Aber diese paar "Schlupflöcher" nutz kaum jemand, denn die sind schon wieder "zu langweilig". Stattdessen Farbe hinklatschen und hauptsache "schöner Effekt". Dass man dann aber schon nach 2 Sätzen Augenschmerzen bekommt, ist ja egal. Hauptsache hübsch ist es.

    Und sowas gibt es leider immer noch...
    Ich hoffe diese Leute lesen den Beitrag und nehmen es sich zu Herzen!

    AntwortenLöschen
  3. Awww *-*
    Vielen Dank erstmal <3 genau sowas habe ich mir gewünscht *_*
    Jetzt weiß ich was ich an meiner page ändern kann x///D der text hat mir echt geholfen ^o^ *sich gleich an die arbeit mache*
    Für teil zwei würde ich mir wünschen sowas wie "Extras für die besucher" oder "Worauf muss man achten wen man eine gfx seite macht" oder sowas. Was ich auch gern wissen würde... wie man seine homepage intressant für andere macht.

    Auch cool wäre wen man die älteren artikel in bezug auf ne homepage verlinken könnte. Weil es gab ja einige im bezug auf ACP,Schriftarten etc. Das ersparrt einen das ewige rum suchen. Nur so ne idee.

    Amsonsten weiter so <333
    Liebe Grüße. =)

    AntwortenLöschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates