Präsentation am 10.02.15

10. 02.2015
Projektpräsentation
„Piktogrammserie für das Landesportal Sachsen-Anhalt“
Erstellt von:
Nina Bark
Peter Hoffmann
Lisa Schalk
Betreut von:
Prof. Dipl.-Grafikdesignerin Kerstin Alexander
In Koorperation mit
brain-scc GmbH
Staatskanzlei Sachsen-Anhalt
frische Ideen GmbH
Markus Schmahl
Toni Wechselberger
10. 02.2015
Inhalt
1 Aufgabenstellung
2 Ideenfindung
3
Anforderungen
4 Gestaltungskonzept
5 Philosophien
10. 02.2015
Aufgabenstellung

Bildunterstützung für das Landesportal Sachsen-Anhalt
hinsichtlich des Anforderungskatalogs „Piktogramme für
die Neugestaltung des Landesportals“

Erstellung einer Piktogrammserie für eine bereits
vorgegebene Informationsstruktur
10. 02.2015
Aufgabendetails
Allgemeine Piktogramme
Themenspezifische Piktogramme
Schriftgröße
Sprachauswahl
Gebärdensprache
Suche
Benutzerhinweise
Datenschutz
Kontakt
Sitemap
Impressum
Telefon
E-Mail
Anschrift
Download/Publikationen
Veranstaltungen/Termine
Aktuelle Meldungen/News
Stellenausschreibungen
BUS(Bürger und Unternehmensservice)
eVergabe
Haushalt/Steuern
APP
Hilfe/Service
externe/interne Links
Seitenanfang
Weiter/Lesen Sie mehr
Rechtsgrundlagen
Verwandte Themen
Informationen zum Thema
Menüebene (nicht) gewählt
10. 02.2015
Ideenfindung: Vergleichsanalsyse
Oft verwendete Piktogramme
Brandenburg
Bayern
Niedersachsen
Schriftgröße
Kontrast
-
-
Drucken
Suche
-
-
-
-
-
Sprachen
Vorlesen
Baden-Württemberg
-
-
Externer Link
-
-
Informationen
-
-
-
Leichte Sprache
-
-
-
Download
-
-
-
10. 02.2015
Ideenfindung: Beispiel Entwicklungsprozess
News und Meldungen
10. 02.2015
Anforderungen

Barrierefrei

Konsistenz um Schriftfamilie weiter zu führen

Einfügen in vorhandenes Design der Seite

Anpassbarkeit an Responsive Design
10. 02.2015
Barrierefreiheit

Wahrnehmbarkeit:

Skalierbarkeit

Farbunabhängigkeit (Farbenfehlsicht)

Anpassbarkeit (Kontrast, Skalierbarkeit)

Verständlichkeit

Für Piktogramme relevante Punkte der Web Content Accessibility Guidelines 2.0
10. 02.2015
Konsistenz
 durch die Festlegung eindeutiger Regeln wird eine
konsistente Gestaltung ermöglicht
Beispiel:
10. 02.2015
Konsistenz
 In unseren Piktogrammserien wurden folgende
Regeln zur Erreichung einer Konsistenz festgelegt:
 Größe
 Anzahl der Objekte
 Linienstärke
 Farbe
 abgerundete Ecken
 wiederkehrende Elemente
10. 02.2015
Einfügen in vorhandenes Design der Seite
 Piktogramme mit maximal zwei Farben
 Schrift der Seite wirkt grau (ist aber schwarz)
 Farbe der Piktogramme muss angepasst werden
 Dünne Linienstärke der Piktogramme um Schrift
nicht zu „erdrücken“
10. 02.2015
Anpassbarkeit an Responsive Design
 Heutige Smartphones weit höhere Pixeldichte als
Bildschirme
 Piktogramme sollten auf Touchscreen größer sein
 Wichtigster Punkt: Skalierbarkeit
Einbindung als Vektorgrafiken
10. 02.2015
Gestaltungskonzept
 Raster
 Linienstärken
 Allgemeine & themenspezifische Piktogramme
10. 02.2015
Gestaltungskonzept: Raster
 Verhältnis zwischen den verwendeten Schriftgrößen
des LPSA und den erstellten Piktogrammen:
 Schriftgröße Fließtext: 14px
Piktos = 14 x 14px
 Schriftgröße in der Navigationsstruktur: 20px und 7px
Padding = 34px Platz
Piktos =28 x 28px
 um eine Skalierbarkeit zu ermöglichen wurden die
Vektorgrafiken in der doppelten Größe erstellt
(56 x 56px)
10. 02.2015
Gestaltungskonzept: Raster

Reale Maximale Größe:
28x28px

Gewähltes Raster: 56x56px

Umgehen von Problemen mit
Illustrator

Größere Symbole für
Skalierbarkeit (Barrierfrei)
10. 02.2015
Gestaltungskonzept: Linienstärken
 Zwei zu benutzenden Linienstärken zur
besseren Darstellbarkeit:
 Effektiv 1px und 2px
 Im Illustrator 2px und 4px
Dicke Linie
Dünne Linie
10. 02.2015
Gestaltungskonzept: Differenzierung
 Unterteilung in Allgemeine & Themenspezifische Piktogramme
Allgemeine Piktogramme
Themenspezifische Piktogramme
Schriftgröße
Sprachauswahl
Gebärdensprache
Suche
Benutzerhinweise
Datenschutz
Kontakt
Sitemap
Impressum
Telefon
E-Mail
Anschrift
Download/Publikationen
Veranstaltungen/Termine
Aktuelle Meldungen/News
Stellenausschreibungen
BUS(Bürger und Unternehmensservice)
eVergabe
Haushalt/Steuern
APP
Hilfe/Service
externe/interne Links
Seitenanfang
Weiter/Lesen Sie mehr
Rechtsgrundlagen
Verwandte Themen
Informationen zum Thema
Menüebene (nicht) gewählt
10. 02.2015
Gestaltungskonzept: Differenzierung
 Gründe für die Differenzierung:
 Positionierung auf der Website
 Funktionalität
 Allgemeine Piktogramme werden im Single-Line-Design
dargestellt um eine Differenzierung zu ermöglichen
10. 02.2015
Gestaltungskonzept: Differenzierung
 Single-Lines:
 Themenspezifische Piktos:
 bestehen aus einer
 festgelegte Linienstärken
durchgehenden Linie
 auf der Seite meist 28px
 auf der Seite ca. 14px groß
groß
 eine Linienstärke (1px real,
 Linien haben abgerundete
4px im Illustrator)
Kanten
 Linien haben abgerundete
Kanten
10. 02.2015
Allgemeine Piktogramme
 Single-Line
Benutzerhinweis
Kontakt
Anschrift
Impressum
Telefon
Gebärdensprache/ Leichte
Sprache
Suche
Sprachwahl (englisch)
Sitemap
Sprachwahl (deutsch)
Schriftgröße (größer)
E-Mail
Schriftgröße (kleiner)
Datenschutz
Kontrast
10. 02.2015
Philosophien
 weitere Piktogrammvariationen der themenspezifischen Piktogramme
App
Informationen zum
Thema
BUS
Menüebene gewählt/
nicht gewählt
Downloads/
Formulare
News und Meldungen
eVergabe
Rechtsgrundlagen
Externer Link
Zum Seitenanfang
Haushalt und Steuern
Stellenausschreibungen
Hilfe und Service
Veranstaltungen/ Termine
Verwandte Themen
Weiterlesen
10. 02.2015
Philosophien
 Piktogrammserie „Schnittmarke“
App
Informationen zum
Thema
BUS
Menüebene gewählt/
nicht gewählt
Downloads/
Formulare
News und Meldungen
eVergabe
Rechtsgrundlagen
Externer Link
Zum Seitenanfang
Haushalt und Steuern
Stellenausschreibungen
Hilfe und Service
Veranstaltungen/ Termine
Verwandte Themen
Weiterlesen
10. 02.2015
Philosophien
 Piktogrammserie „Schablone“
App
Informationen zum
Thema
BUS
Menüebene gewählt/
nicht gewählt
Downloads/
Formulare
News und Meldungen
eVergabe
Rechtsgrundlagen
Externer Link
Zum Seitenanfang
Haushalt und Steuern
Stellenausschreibungen
Hilfe und Service
Veranstaltungen/ Termine
Verwandte Themen
Weiterlesen
10. 02.2015
Philosophien
 Piktogrammserie „Color-Key“
App
Informationen zum
Thema
BUS
Menüebene gewählt/
nicht gewählt
Downloads/
Formulare
News und Meldungen
eVergabe
Rechtsgrundlagen
Externer Link
Zum Seitenanfang
Haushalt und Steuern
Stellenausschreibungen
Hilfe und Service
Veranstaltungen/ Termine
Verwandte Themen
Weiterlesen
10. 02.2015
Philosophien
 Piktogrammserie „Farbverlauf“
App
Informationen zum
Thema
BUS
Menüebene gewählt/
nicht gewählt
Downloads/
Formulare
News und Meldungen
eVergabe
Rechtsgrundlagen
Externer Link
Zum Seitenanfang
Haushalt und Steuern
Stellenausschreibungen
Hilfe und Service
Veranstaltungen/ Termine
Verwandte Themen
Weiterlesen
10. 02.2015
Vielen Dank für Ihre Aufmerksamkeit

Download Report