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.

Abenteuer Blog Hosting

Schreibe einen Kommentar
Blog

Heute habe ich mir vorgenommen, endlich endlich ein „echtes“ eigenes WordPress-Blog einzurichten, mit eigenem Server-Speicherplatz und allem drum und dran. Und es klappte glatt! Allerdings: Ohne den „Support“ (sprich kurzen aber effizienten Telefonaten mit dem lieben Sohn) wäre ich wohl kaum so schnell (in wenigen Stunden) ans Ziel gekommen.

Ein kurzer Bericht in fünf Schritten soll meine Erinnerung an das kleine digitale Abenteuer bewahren =)

  1. Zuerst benötige ich eine „Domain„, eine Adresse im WorldWideWeb also, über die ich dann in einem Web-Browser erreichbar bin. Meine Wunsch-Domain (www.annegretbarth.net) ist eine weltweit einmalige und eindeutige „Subdomain“ im DNS-Namensraum des WorldWideWeb.
    Über einen „Nameserver“ wird dann die aktuelle IP-Adresse des Gerätes ermittelt, auf dem meine Daten liegen (dem „Hosting Server“).
    Ich wähle ein Webhosting-Unternehmen aus (in meinem Fall ist es domainFACTORY) und teste erst einmal, ob meine Wunsch-Domain noch frei ist. Ich habe Glück! Der Spaß ist nicht ganz kostenlos, aber mit weniger als 1€ bin ich dabei: ich wohne jetzt im Netz!
    (Mal checken: inwiefern signalisiert die Startseite des Webhosters „Benutzerfreundlichkeit“?)
  2. Inzwischen werde ich ungeduldig und möchte meine WordPress-Software ausprobieren. „Entpacke die Datei in ein leeres Verzeichnis und lade alles auf den Server hoch.“ rät mir der „liesmich“-Text meiner brandaktuellen WordPress Version 4.3 (vom 18.8.2015!). Wie hochladen? Auf welchen Server? Ich brauche Speicherplatz auf einem Server, dazu noch „PHP“ und „MySQL“ – und all das miete ich mir mit wenigen Mausklicks für ein paar Euros im Monat beim Web-Hoster.
  3. Ich bin nun stolze Besitzerin eines FTP-Host mit 5GB Speicherplatz und weiteren 5GB für Email-Aktivitäten. Doch wie kann ich meine WordPress-Software auf den Server laden? Eine FTP-Client-Software- in meinem Fall „FileZilla“- macht es möglich.
    FileZilla ist sozusagen der Raum auf meinem Rechner, von dem aus meine Daten auf den Server „hochgeladen“  oder vom Server zum Client heruntergeladen werden. Außerdem kann ich mit FileZilla auf dem Server Verzeichnisse anlegen und auslesen, Verzeichnisse und Dateien umbenennen oder löschen. Sehr praktisch! Eine Stolperfalle hatte ich zu umgehen: einige Passwörter waren zu generieren und an passender Stelle einzugeben… wo, war mir nicht immer ganz klar.
  4. Nun weiter im „liesmich“ von W0rdPress: „Gehe mit Deinem Browser zu /wp-admin/install.php. Die Installation wird Dich durch die einzelen Schritte leiten und wird die wp-config.php Datei mit den Details zur Datenbankverbindung anlegen.“ Hm??? Ich gebe nach einigem Herumrätseln in die Eingabezeile meines Browserfensters den entsprechenden Pfad ein und siehe da- ES LEBT! Ich erreiche die Anmelde-Maske meines WordPress-Accounts.
  5. So langsam fängt der eigentliche Spaß endlich an: ein passendes Template wählen, anpassen und vor allem: Content erstellen! Mein erster Blog-Beitrag ist das Impressum.

Konzeption

Schreibe einen Kommentar
Benutzerführung / Informationsdesign / Interfacedesign / UI-Design / UX-Design / Zielgruppe

Screensh_konzept

Digitale Mediengestaltung, das heisst Konzeption, Gestaltung und Produktion digitaler Medien. Für alle drei Bereiche gibt es mittlerweile eigene Berufsfelder. Alle drei sind aber auch eng miteinander verflochten. (Das heißt: Teamwork ist angesagt!)

Screen und Gehäuse eines Endgerätes bilden das „User Interface“ (UI), die Benutzeroberfläche bzw. die Mensch-Maschine-Schnittstelle. Deshalb nennt man digitale Mediengestaltung auch „User Interface-Design“ (UI-Design).

Die Konzeption (auch: Informationsarchitektur) fragt und beschreibt, wie die Kommunikation zwischen Auftraggeber (z.B. einem StartUp-Unternehmen) und Zielgruppe (beispielsweise seinen potentiellen Kunden) grundsätzlich gestaltet werden soll. Die Konzeption steht daher am Beginn eines Mediendesign-Projektes.
Sie stellt beispielsweise folgende Fragen:

  • welche Kommunikationskanäle und Endgeräte werden genutzt und wie geschieht das? (Interaktionsdesign)
  • welche Funktionen und Anwendungen sind für die Zielgruppe nützlich?
  • welche Inhalte sollen angeboten werden?
  • wie wird der Content (die Inhaltselemente) strukturiert (Informationsdesign)
  • welche Möglichkeiten der Navigation sind zweckmäßig? (Benutzerführung)
  • wie kann das „User-Interface“ möglichst leicht nutzbar und einfach zugänglich gestaltet werden
    (Usability/Accessibility/Interaktionsdesign oder UX-Design)

Medienkonzeption ist übrigens auch ein relativ neuer (2015) Studiengang in einer komplexer werdenden (digitalen) Medienlandschaft.
Aktuelle Berufsbezeichnungen beschreibt ein Beitrag im Webgarten – Blog.

Ist der Beitrag fachlich korrekt und leicht verständlich? Ich bitte freundlich um konstruktive Kommentare.

Link und Permalink

Kommentare 1
Navigation

Permalinkanzeige im Browser„Link“ – der Begriff scheint klar. „Links“ (genauer: „Hyperlinks“) sind das, was das Web zu dem macht, was es ist: ein Netz aus Hypertexten. Hypertexte sind html-Dateien, die sich auf miteinander verbundenen Rechnern befinden und über „Links“ (das sind die <a>-Tags oder „Anzeiger“) in „Hypertext-Markier-Sprache“ miteinander sprechen. Im Moment der Kommunikation liegt jede der beiden miteinander kommunizierenden html-Dateien an genau einem definierten Ort, einem „URL“ (=“Uniform Resource Locator“) auf einem Server. Ein Beispiel: Sie öffnen diesen Blog-Beitrag auf ihrem Rechner und verbinden sich über den Hyperlink mit dem Server, auf dem die Startseite meiner Schule liegt: http://www.gs-bk.de/index.php/die-schule.html. Bildlich gesprochen ist ein Hyperlink also eine Art „Tunnel“, der mir ermöglicht, mich lesenderweise an einen anderen Ort zu begeben, während ich diesen (Hyper-)Text hier lese…

Im html-Code sieht ein (externer) Link so aus: <a href=“www.gs-bk.de/index.php/die-schule.html“>Das ist der Link von hier zu meiner Schule</a> . Der Hyperlink funktioniert nur, solange alle Komponenten  der Quelle bestehen bleiben: die Domain „www.gs-bk.de“, die index.php und die html-Datei. Würde unser Administrator den Ordner /index.php oder die Datei /die-schule.html löschen oder umbenennen, so würde der Link ins Leere führen.

Was aber ist ein „Permalink“? Ein Permalink ist ein „permanenter“ URL – also ein „dauerhafter“ Indikator (Anzeiger) zu einer ganz bestimmten Quelle/URL. Das besondere am „Permalink“ ist, dass er sozusagen eine „postlagernd“ Adresse darstellt. Er ist ein Link in eine Datenbank, der mit wechselnden Beiträgen verbunden werden kann. Selbst wenn der Adressat (der Blog-Beitrag bzw. das html-Dokument) umzieht oder umbenannt wird, bleibt die Verbindung erhalten. In der Datenbank kann ich somit das Dokument, welches unter der „permanenten“ Adresse erreichbar ist, mit einem anders benannten Dokument austauschen, ohne den Link zu ändern. Sehr komfortabel! Der Code eines Permalink wird in php geschrieben.

Wichtig ist die Wahl geeigneter Permalink-Begriffe/Schlagwörter: sie sollen die Nutzer möglichst eindeutig auf den Inhalt der verlinkten Quelle hinweisen. So können Suchmaschinen die Seite leichter finden. [Ich nutze WordPress zum bloggen, weil ich hier  die Gestaltung meiner Permalinks beeinflussen kann: /wp-admin > Einstellungen >  Permalinks.]

Wissenschaftliche Arbeiten, die Archive im Netz nutzen wollen, sind auf Permalinks von Bibliotheken oder Sammlungen angewiesen, z.B. für Quellenangaben oder Verweise, oder wenn Dokumente aktualisiert werden sollen.

Ist dieser Text einfach, verständlich und fachlich korrekt? Bitte nutzen Sie die Kommentarfunktion.

Weitere Fragen: Was bedeutet „http“? / ftp / sftp / www / …

Netzialistinnen

Schreibe einen Kommentar
Blog / Responsive Webdesign / Webdesign

Vor ein paar Tagen geriet ich auf das Blog „die-netzialisten“ – in Klarnamen Kirsten Schelper und Elisabeth Hölzl. Die beiden „Webdesigner und Webentwickler“ arbeiten schon seit mehreren Jahren erfolgreich mit WordPress. Nebenbei schreiben sie zahlreiche informative, aktuelle, vorbildlich gestaltete Beiträge, deren Lektüre sich wirklich lohnt! Themenschwerpunkte der Designerinnen sind die Kategorien Responsive Design und Webdesign sowie Anleitungen zu praxisnahen Fragen. Viel Spaß damit!