In dieser Serie möchte ich einige Hilfestellungen zum Thema “Der Weg zur (fast) perfekten Homepage” geben. Eine perfekte Homepage gibt es nicht, aber jeder kann aus seinen Fähigkeiten, seinem Wissen und seinen Erfahrungen das beste rausholen um eine für sich perfekte Homepage zu gestalten. Dabei sollte man aber einige Dinge beachten, die Anfänger oft nicht wissen oder nicht verstehen.

Versteht mich nicht falsch, ich möchte keinswegs den Eindruck erwecken alles zu wissen und alles richtig zu machen. Jeden meiner Punkte kann man kritisieren oder anders machen, aber alleine schon die Tatsache, dass man sich nach dem Lesen Gedanken über das Thema macht, bringt dich und mich, wenn du kommentierst, einen Schritt nach vorne.

Teil 1 handelte vom Thema der Homepage, wie finde ich eins, was sollte man beachten usw. Hier gelangst du zu Teil 1!

Teil 2 handelt über das Thema:

Das perfekte Design

So etwas wie das perfekte Design gibt es einfach nicht! Beim Inhalt kann man abwägen zwischen, interessiert mich und interessiert mich nicht. Beim Design ist das noch viel extremer: Es gibt unzählige Farben, Fotos und Arten ein Design zu gestalten. Entweder schlicht oder voller Extras, knallbunt oder sehr eintönig. Geschmäcker sind verschieden und nirgends wird es so sichtbar wie im Design. Wenn du dir das merkst, dann kanns zumindest hier mal weiter gehen:

Zuersteinmal braucht man eine Idee, wie schon bei Teil 1 empfehle ich dir auch hier trotz des PCs ein Blatt Papier und einen Stift zur Hand zunehmen und loszumalen. Folgende Punkte sollte man sich überlegen:

Der generelle Aufbau?

Wohin soll der Header, die Links und der Inhalt. Dabei ist wichtig zu beachten wieviele Links man hat, oder wieviel Wert man auf einen schönen Header (Kopf) legt.

Beispiel 1: Oben ein Header, links die Links und rechts der Inhalt

Eignet sich gut, wenn man viele Links hat und diese übersichtlich darstellen möchte. Generell eignet sich eine Sidebar gut um den Besuchern schnell einen Überblick über die Wichtigsten Infos zu geben, man kann z.B. die Updates veröffentlichen. So sieht jeder Besucher schnell, dass es sich um eine HP handelt, die regelmäßig geupdatet wird.

Beispiel 2: Links der Header, daneben die Links und ganz rechts der Inhalt

Dieses Design eignet sich gut, wenn man mit einem Iframe arbeitet und wenige Links hat. Es wird hierbei viel Wert auf das Gesamtbild gelegt, das Bild, wird integriert.

Beispiel 3: Oben der Header, darunter die Links und darunter der Inhalt

Eignet sich gut, wenn man wenige Links hat, da es bei zu viele sehr gequetscht aussehen würde.

Der Header als Foto oder der Header als Name?

Die Überschrift bzw der Homepagetitel sollte man immer sofort erkennen und damit auch die Domain über die die Homepage erreichbar ist. Du kannst dir nun überlegen dieses in ein Foto einzuarbeiten oder nur den Domain namen mit einem Untertitel schön zu gestalten. Ich habe auch schon beide Varianten genutzt:

bzw.

Auch hier kommt wieder der Inhalt ins Spiel: Der Inhalt sollte sich nicht vom Design unterscheiden. Ich frage mich bei privaten Seiten oft was die Models im Design sollen. Was liegt bei privaten Seiten näher als Motive zu benutzen, mit denen man etwas verbindet? Oder bei einer Page über Kühe, Kühe in den Header zu setzen?

Bei Themenseiten würde ich auf jeden Fall ein Bild zum Thema ins Design einbauen. Dann wissen Besucher sofort: Ah eine Page über Fotos! Besucher sollte man schnell gewinnen und nicht erst nach dem Grund wieso sie hier sind suchen lassen

Ganz wichtig ist es auch die Ladezeit im Blick zu haben, gerade wenn man sich für ein sehr Headerlastiges Design entscheidet! Wenn du dein Grafikprogramm genau unter die Lupe nimmst findest du eine Einstellung wie du die Größe der Bilder runterschraubst und damit die Ladezeit verkürztst. Bei PSP gibt es eine Funktion die heißt JPEG Optimierung, die findet man unter Datei > Exportieren als. Dort kann man dann auch den Komprimierungswert festlegen, das Bild wird nun kleiner gemacht.

Die Links

Links kann man nun auf mehrer Arten einfügen, entweder du setzt Textlinks oder erstellst dir sogenannte Buttons. Beides sieht schick aus und kann man wirklich gut einbauen. Textlinks sind Ladezeiten freundlicher, sehen vielleicht nicht so schick aus wie Buttons, können aber mithilfe von CSS super aufgepeppt werden.

Das Gesamtbild

Eine Homepage muss im Ganzen zusammenpassen, d.h. Inhalt und Design gehören unvermeidlich zusammen und zum Design gehören auch die Farben. Wenn du also für deinen Header ein Foto oder Bild gewählt hast orientiere dich an diesen Farben. Wenn du meinen Header anschaust, siehst du viel beige und Grautöne, würde ich jetzt pinke Links benutzen würde jeder sagen: “hey das passt doch nicht”. Am harmonischten sieht es aus, wenn Farben immer wiederkehren und diese sich wie ein roter Faden durch das Design ziehen.

Wichtig ist es auch Farben aufeinander abzustimmen: Hintergrund- und Schriftfarbe dürfen nie gleich sein. Auch nicht ähnlich! Eine HP ist zum lesen da (und wenn es nur Bildunterschriften sind)!

Genauso ist es mit der Schriftgröße. Es gibt verschiedene Bildschirmauflösungen, die deine Seite unterschiedlich darstellen können, wenn bei einer 1024px Auflösung die Schrift groß aussieht, ist sie bei 1400px winzig klein- man braucht also einen Mittelweg. Am besten du testet deine HP auch bei anderen Auflösungen. Das geht so:

Du machst einen Rechtsklick auf deinem Desktop, gehts auf Eigenschaften und dann auf Einstellungen. Da kann man nun relativ weit unten die Bildschirmauflösung einstellen.

Bildmaterial
Da nicht jeder gerne fotografiert oder weiß wo man Bildmaterial für seine Seite her bekommt habe ich nun einen Tipp für euch. Es gibt im Internet lizensfreie Bilder ohne Urheberrecht, die zur Nutzung freigegeben wurden. Diese findet man aber nicht über Google!
Ganz wichtig: Bilder haben ein Urheberrecht, auch wenn es nicht dirket auf den Bildern drauf steht, man darf sie nicht ohne weiteres benutzen. Wnen dir ein Bild gefällt, frag nach. Wenn du niemanden zum nachfragen findest, lass es sein. Eine Urheberrechtsverletzung kann teuer werden!

Aber es gibt ja auch Bilder die schwirren so im Netz herum, man muss nur suchen und die AGBs lesen! Da gibt es z.B. Pixelio.de, eine Bildquelle, die man mitbenutzen darf, nachdem man sich angemeldet hat. Man kann auch weiter nach lizensfreien Bildern googeln, sich den Service genau anschauen und sich gegebenenfalls anmelden.

Weitere Dienste:

Freeimages.co.uk
photocase.com
Twicepix
Bitte lest aber deren AGBs selbst durch! Ich bin nicht für eventuelle Änderungen der Dienste oder Neuerungen verantwortlich.

Die Grafikprogramme

Was hilft einem mehr, als Grafikprogramme… Aber die Suche nach dem richtigen ist oft schwer. Ich empfehle daher immer sich verschiedene Programme aus dem Netz runterzuladen und sie zu testen. Dabei helfen auch Tutorials, die man im Internet findet. Wenn man nun denkt ein Programm liegt einem, kann man sich die Vollversion kaufen. Aber ich denke es ist nicht sinnvoll sich zuerst was zu kaufen, ohne zu wissen wie das Programm funktioniert. Oft findet man auch in Ebay günstigere Versionen der Vorgängermodelle eines Programms. Ich nutze auch PSP 8, obwohl es schon X gibt.

Wer kein Geld ausgeben möchte findet im Netz auch kostenlose Programme, diese habe ich aber nie genutzt, daher kann ich dazu nichts sagen. Aber wie gesagt: ladet sie euch runter, sucht nach Tutorials, test sie und entscheidet dann.

Ich hoffe ich konnte euch ein wenig weiterhelfen. Das nächste mal geht es entweder um Dinge, die auf einer Homepage gehören oder allgemeine Infos über Websites.
Wer Ideen für ein Tutorial hat oder Verbesserungsvorschlage am Tutorial, bzw. denkt es fehlt etwas, darf und soll sich bitte bei mir melden