Webwissenschaften

Web Art und Design Aspekte der Gestaltung:

Bildschirmauflösung

Ein wichtiger Punkt ist die Auflösung. Viele freuen sich über ihre 17‘‘ Bildschirm und wollen auch eine solch breite Homepage erstellen, diese 1024x768 Pixel auflöse haben jedoch noch nicht alle. Um zu vermeiden, dass Nutzer einen Horizontalen Scroll Balken erhalten, ist es zu empfehlen 800x600 zu nehmen und dies schön abgrenzen, damit jeder etwas sehen kann. Nicht zu empfehlen ist eine noch kleine Auflösung. Der Trend liegt klar in der 1024x768 Pixel Auflösung

Bildschirmheader / Hintergrund

Im Trend liegt bereits und kommt immer mehr zum bildschirmfüllenden Header. Der Trend mehr Bilder und weniger Text rein zu bringen nimmt immer grössere Ausmasse an. Der gleiche Trend ist bei Hintergrundbildern zu sehen. Je grösser und imposanter desto besser.

Verschiedene Scroll Ebene

Bereits auch schon in Verwendung sind Bereich die sich unterschiedlich schnell scrollen lassen. Diese können auch unterschiedlich gesteuert werden.

Schrift

Die Headlines werden immer grösser und fetter. Wichtiges wird gross geschrieben und stark hervorgehoben. Auch das Prinzip „weniger ist mehr“ wird immer stärker berücksichtigt.

Mobile/Mobilität

Ein grosser und wichtiger Trend ist die Kompatibilität zu anderen Endgeräten wie Smartphone, Tablett und weiteren.

Benutzerfreundlichkeit

Beachte:

Browser

Weiter ist ein wichtiger Punkt – der Browser. Der Internet Explorer ist nach wie vor einer der meist genutzten Browser und dies sollte beachtet werden. Es sollte darauf geachtet werden, dass das Design / Site auf den wichtigsten Browsern gut aussieht.

Datengrösse

Ein wichtiger Tipp ausserdem ist, nicht zu grosse Daten hochzuladen. Keine Website Besucher möchte lange warten. Vor allem zum Beispiel Bilder mit über 50 kb.

Corporate identity

Klare Übersicht mit einer Vor und Zurück Funktion ist weiter unumgehbar. Wichtig ist es den Benutzer an der Hand zu nehmen wenn er die Seite betritt und ihn einfach mit wenigen Klicks zum gewünschten Ergebnis führt. Dazu gehört eine „corporate identity“ welches Farben, Muster, Schriftarten und vieles mehr festlegt damit die Site nicht chaotisch wird. Dabei muss geachtet werden, dass eine Schriftart gewählt wird, welche auch angezeigt wird und leserlich erscheint.

Beispiel einer neuen modernen Website mit viel Bild wenig und grossem Text:

http://www.abm.at/de/home

Beispiel für einen grossen Header, viel Bilder und grossem Text:

http://www.oscarholub.at/

Beispiel für eine Seite für viele Endgeräte:

http://www.mtraining.at/

Eigenes Beispiel: 

Diese von mir angefertigte Seite (Bilder wurden wegen rechtlichen Aspekten überdeckt) entspricht den Aspekten:

·         Bildschirmheader / Hintergrund

·         Schrift

·         Corporate Identity

·         Benutzerfreundlichkeit

Das Headerbild ist gross und erstreckt sich über die gesamte Länge der Breite von 980 Pixeln. Die Schrift ist gross und ist gut leserlich. Die Seite ist nicht überfüllt was dem Grundsatz „weniger ist mehr“ entspricht. Das CI umfasst (nicht von Starbucks) zum Beispiel die Schriftart, Schriftgrösse, Schriftfarbe und weitere Inhaltsdarstellungen der Seite. Die Benutzerfreundlichkeit wird erreicht durch den Grundsatz „weniger ist mehr“ sowie einem guten Aufbau und übersichtlicher Gestaltung. Der User sollte nicht zu lange suchen müssen um seine Information zu erhalten.

Meinen Lernblog habe ich soweit Angepasst, dass die Zentralen Aspekte Berücksichtigt wurden.

Hintergrund des Header(background-image: url(/static/webwicori/images/farbverlauf3.jpg);) wurde angepasst anhand eines angenehmen Farbverlaufs. Anhand dieses Bildes wurde ein kleines Corporate Design mit Farbanpassung (b80a4f, 625d5f) erstellt. Die Farbe der Überschriften ist an das Bild angepasst und wirkt somit einheitlich und nicht verwirrend. Die Schrift wurde nicht weitgehend verändert, lediglich etwas grösser gemacht (1.1, 0.9) um das lesen zu erleichtern. Ausserdem wurde bei der Schriftart auf Verzierung verzichtet (sans serif). Die Seite wurde dahingehend Angepasst indem die Breite auf 800px begrenzt wurde und mittig angezeigt wird.

Somit sind Überschriften, Schrift, Corporate Identity und die Benutzerfreundlichkeit berücksichtig worden.

Das Twitter Widget wurde so angepasst, dass ein Beitrag ersichtlich ist und mit der Positionierung keine Unruhe stiftet.