Die geheimen Strukturen der Website

Kommentare 2
Informationsdesign / Navigation

Das Wichtige zuerst

Ein wesentlicher Vorteil von Hypertext im Vergleich zu Printmedien, ist die Möglichkeit Inhalte so zu strukturieren, dass am Anfang, auf der Startseite im Browserfenster oder auf dem Bildschirm erst einmal nur die wichtigsten Informationen zu sehen sind (Stichwort: Priority/Priorisierung=Prioritäten werden gesetzt). Hintergrundinformationen werden auf tiefere Navigationsebenen gelegt.
So entsteht eine Art virtuelles Gebäude. Verschiedenen Räume und Ebenen sind miteinander verbunden, in welchem man sich frei bewegen kann (Stichwort: Informationsarchitektur). Allerdings ist es sinnvoll, bei aller Freiheit bereits in der Planungsphase auch die Reihenfolge der Inhalts“pakete“ zu bestimmen. Dies erleichtert beispielsweise die Benutzung von Screenreadern.  Zudem können so die Inhalte auf kleinen Screens (wie z.B. Smartphones) bestmöglich, d.h. einspaltig und scrollbar, dargestellt werden (Stichwort: Linearisierung).

Weiterlesen

Datenschutz im Internet

Schreibe einen Kommentar
Allgemein / Datenschutz

„Das Internet ist kaputt- die Idee der digitalen Vernetzung ist es nicht“

Sascha Lobo’s These hält das Banner „Prinzip Hoffnung“ hoch in einer Welt, deren „Technologie“, und er meint das Internet mit, wenn er mit Herbert Marcuse sagt, „das Prinzip Herrschaft bereits in sich trägt“. Sascha Lobo, ein Mensch der sich wie wenige andere ein Bild vom Internet macht und uns kompetent an seinem Wissen und Erkennen teilhaben lässt.

Weiterlesen

Welt um spannend!

Schreibe einen Kommentar
Allgemein / World Wide Web

Uuups…. Internet und WWW – ist das denn nicht ein und dasselbe? Da sind einmal die vielen weltweit miteinander vernetzten Geräte: Einzelne PCs, ganze Computer-Netzwerke, Server, mobile Endgeräte wie Tablets und Smartphones… und alle sind miteinander vernetzt. Verbindungen entstehen über Kabel, Glasfasernetze oder W-Lan-Router. Sie alle bilden eine weltumspannende Infrastruktur. Weiterlesen

Was will die Zielgruppe?

Kommentare 2
Gestaltung / Konzeption / Zielgruppe

In der Planungsphase eines Web-Projekts ermitteln wir die Bedürfnisse und Interessen unserer Zielgruppe. Wir fragen:

  • Was erwarten die NutzerInnen von der Website? Nach welchen Informationen suchen die BesucherInnen?
  • Gibt es Produkte und/oder Dienstleistungen, die auf der Website präsentiert werden? Wenn ja, mit welchen gestalterischen Mitteln soll das geschehen?
  • In welcher Breite und Tiefe soll über die Produkte und/oder Dienstleistungen informiert werden?
  • Wie sollen die NutzerInnen angesprochen werden (Corporate Communication)?
  • Soll die Website neben der Informationsfunktion, auch die Interaktion der (potenziellen) Kunden untereinander oder mit  dem Unternehmen ermöglichen?
Quelle: frei nach www.e-kompetenz-ratgeber.de, Thema „Website-Gestaltung“, 27.7.2015

Aufgabe 1: Gehen Sie auf die Seiten des Ratgebers.
Klicken Sie sich durch die Tests „Website-Gestaltung“ und „Mobile Website-Gestaltung“.
Notieren Sie sich je fünf wichtige Stichpunkte zu den Themen.

Aufgabe 2: Entwickeln Sie 2-3 „Personas“ für Ihre Zielgruppe. Falls Sie sich fragen: „Wie bestimme ich meine Zielgruppe?“ informieren Sie sich bei www.onpulson.de

20 Dinge über Web & Browser

Schreibe einen Kommentar
Webdesign / World Wide Web

Google das Unternehmen hinter dem Marktführer der Suchmaschinen, hat ein nettes E-Book ins Netz gestellt: „20 Dinge, die ich über Browser und das Web gelernt habe.“  Es eignet sich super als Einstieg in das Themenfeld Websurfing, Browser, WWW, Internet… Mit Stand von 2010 ist der Content zwar „schon“ nicht mehr brandaktuell.  Grundlegendes verändert sich aber auch im Web relativ langsam.

Der Daten-Pixel-Faktor

Schreibe einen Kommentar
Gestaltung / Informationsdesign / Screendesign

Zeitgenössische Designer, auch UI-Designer, berufen sich wieder auf moderne Klassiker: „form follows function“ oder „less is more.“  (Beispiel:  Netzialisten und Dieter Rahms).
Edward Tufte, Informationsdesigner und Infografik-Guru, erläutert diese Haltung anschaulich in seinem 2001 (!) erschienenen Klassiker „Visual Display of Quantitative Information“ und bringt sie als sogenannte „Data-Ink-Ratio“ auf den Punkt- auf Deutsch der Daten*/Tinte-Faktor, das Verhältnis „Daten : Tinte“. Bei Datenbildern soll dieser möglichst hoch sein. (Für Digitale Medien gilt demnach der „Daten/Pixel-Faktor“).
Erstrebenswert ist ein grosser Anteil an Elementen, die nicht weggelassen werden können, ohne den Sinn des Dargestellten zu verändern. „Alle Elemente ohne Daten nehmen den Daten die Aufmerksamkeit.“ schreibt Tufte.

(* Daten sind relevante/wichtige/sinnvolle Informationen)

Ein wundervolles Beispiel [von Emily Zimiris] für „minimalist design“ im Sinne Tuftes:
https://www.behance.net/gallery/17120667/Remra

Eine erstklassige, zeitlos-moderne Webseite: Moormann

Ein intelligenter, kritischer Kommentar zum Thema:
http://www.fit-fuer-usability.de/archiv/die-wurzeln-des-minimalismus-im-webdesign/


Aufgabe 1: Die Web-Agentur „Webgarten“ stellt in einem Blog-Beitrag Edward Tuftes Buch vor. Klicken Sie sich durch die interaktive Grafik „Redesign einer Grafik“ im obigen Blog-Beitrag. Es lohnt sich die Kommentare zu lesen.

Aufgabe 2: Nehmen Sie Stellung zum vorgestellten  Redesign (vorher/nachher). Begründen Sie Ihre Meinung.

Aufgabe 3: Notieren Sie sich die aufgelisteten Regeln. Inwiefern halten Sie diese für sinnvoll?

Aufgabe 4: Nehmen Sie Stellung zu dem Zitat „Gestalte den Inhalt und nicht das „Rund-um-den-Inhalt“.

Creative Commons

Schreibe einen Kommentar
Allgemein / Urheberrecht

„Jede unserer Lizenzen hilft Urhebern — wir nennen sie Lizenzgeber, wenn sie von unseren Werkzeugen Gebrauch machen — ihr Urheberrecht zu behalten und gleichzeitig anderen zu erlauben, ihr Werk zu kopieren, zu verbreiten und anderweitig zu nutzen — nach allen Lizenzen zumindest auf nicht-kommerzielle Weise. Jede Creative-Commons-Lizenz stellt zudem sicher, dass Lizenzgebern die ihnen gebührende Anerkennung als Urheber des Werks zukommt.“

Creative Commons / NGO / 24. 8. 2015

Dieses Blog unterliegt als „Werk“ dem Urheberrecht. Rechteinhaberin für den Inhalt bin ich, Annegret Barth. Urheberin des Themes „Cocoa“, auf dem das Layout beruht ist „elma studio est.2009“.

Die CC-Lizenz für dieses Blog sieht übrigens so aus:

Creative Commons Lizenzvertrag
Frau Barth bloggt von Annegret Barth ist lizenziert unter einer Creative Commons Namensnennung – Nicht-kommerziell – Weitergabe unter gleichen Bedingungen 4.0 International Lizenz.
Beruht auf dem Werk unter http://www.elmastudio.de/wordpress-themes/cocoa/.


Aufgabe: gehen Sie auf die Seiten von „creativecommos.org“ und informieren Sie sich über mögliche Lizenzformen. Wählen Sie dann eine für Sie und Ihr Projekt passende Lizenz über das interaktive Auswahlformular.
Inwiefern erfüllt dieses Formular Kriterien von Nutzerfreundlichkeit (Usability)

Luxus: Theme Cocoa

Schreibe einen Kommentar
Blog / HTML + CSS

Ein Ordner, prall gefüllt mit Cocoa!

Heute habe ich mir ein neues WordPress-„Theme“ gegönnt. Es heisst „Cocoa“ und wurde von Elma-Studio entwickelt. Ein einzelnes Theme kostet bei Elma 12€, inklusive Dokumentation und Live-Demo. Das Theme besteht aus einem Ordner prall gefüllt mit vielen PHP- und einigen wenigen CSS-Dateien.

Klare Trennung von Inhalt und Gestaltung

Grundsätzlich gilt: die Inhaltselemente eines Beitrages werden als „Content“ (Texte, Hyperlinks, Bilder, Videos…) in eine HTML-Datei geschrieben. „CSS“ legt das Design und das Layout fest, wie zum Beispiel die typografischen Gliederungselemente, Abstände, Größenverhältnisse oder Farben.  PHP hilft mir als „Laie“, Content und Layout zu verbinden, ohne selbst „coden“ (Code schreiben) zu müssen. Manchmal allerdings doch, in Form kleiner kopierter und angepasster „Code-Schnipsel“. Das macht aber Spaß!

WordPress ist Content Management

Das Theme kam „verpackt“ per Email, ich  musste es nur noch entpacken und mit Hilfe des FTP-Clients in den „Themes“-Ordner der WordPress-Software auf meinen FTP-Server schieben.

Der große Vorteil an der Sache ist, dass ich je nach Laune eine anderes „Theme“ über meine Inhalte legen kann. Somit passe ich das „look&feel“ meiner Seiten ganz einfach immer wieder an meinen sich wandelnden Geschmack (bzw. dem meiner Zielgruppe oder dem „Zeitgeist“) an. Dabei kann ich die Inhalte stehen lassen: ich muss sie nicht immer wieder neu erfassen.

Ein schönes, „uraltes“ Beispiel für dieses Prinzip sind die Seiten „CSS Zen Garden“ von Dave Shea.

Wer ernsthaft ins „Coden“ einsteigen will, nutzt die W3Schools.