Projektpräsentation

„Piktogrammserie für das Landesportal Sachsen-Anhalt“

In Koorperation mit

brain-scc GmbH

Staatskanzlei Sachsen-Anhalt

frische Ideen GmbH

10. 02.2015

Erstellt von:

Nina Bark Peter Hoffmann Lisa Schalk Markus Schmahl Toni Wechselberger

Betreut von:

Prof. Dipl.-Grafikdesignerin Kerstin Alexander

Inhalt

10. 02.2015

1 Aufgabenstellung

2 Ideenfindung

3 Anforderungen

4 Gestaltungskonzept

5 Philosophien

Aufgabenstellung

10. 02.2015

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

Aufgabendetails

10. 02.2015

Allgemeine Piktogramme

SchriftgrößeSprachauswahlGebärdenspracheSucheBenutzerhinweiseDatenschutzKontaktSitemapImpressumTelefonE-MailAnschrift

Themenspezifische Piktogramme

Download/PublikationenVeranstaltungen/TermineAktuelle Meldungen/NewsStellenausschreibungenBUS(Bürger und Unternehmensservice)eVergabeHaushalt/SteuernAPPHilfe/Serviceexterne/interne LinksSeitenanfangWeiter/Lesen Sie mehrRechtsgrundlagenVerwandte ThemenInformationen zum ThemaMenüebene (nicht) gewählt

Ideenfindung: Vergleichsanalsyse

10. 02.2015

Oft verwendete Piktogramme Brandenburg Bayern Niedersachsen Baden-Württemberg

Schriftgröße -

Kontrast - -

Drucken - - -

Suche -

Sprachen -

Vorlesen -

Externer Link - -

Informationen - - -

Leichte Sprache - - -

Download - - -

Ideenfindung: Beispiel Entwicklungsprozess

10. 02.2015

News und Meldungen

Anforderungen

10. 02.2015

Barrierefrei

Konsistenz um Schriftfamilie weiter zu führen

Einfügen in vorhandenes Design der Seite

Anpassbarkeit an Responsive Design

Barrierefreiheit

10. 02.2015

Wahrnehmbarkeit:

- Skalierbarkeit

- Farbunabhängigkeit (Farbenfehlsicht)

Anpassbarkeit (Kontrast, Skalierbarkeit)

Verständlichkeit

Für Piktogramme relevante Punkte der Web Content Accessibility Guidelines 2.0

Konsistenz

10. 02.2015

durch die Festlegung eindeutiger Regeln wird eine konsistente Gestaltung ermöglicht

Beispiel:

Konsistenz

10. 02.2015

In unseren Piktogrammserien wurden folgende Regeln zur Erreichung einer Konsistenz festgelegt:

- Größe

- Anzahl der Objekte

- Linienstärke

- Farbe

- abgerundete Ecken

- wiederkehrende Elemente

Einfügen in vorhandenes Design der Seite

10. 02.2015

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“

Anpassbarkeit an Responsive Design

10. 02.2015

Heutige Smartphones weit höhere Pixeldichte als

Bildschirme

Piktogramme sollten auf Touchscreen größer sein

Wichtigster Punkt: Skalierbarkeit

Einbindung als Vektorgrafiken

Gestaltungskonzept

10. 02.2015

Raster

Linienstärken

Allgemeine & themenspezifische Piktogramme

Gestaltungskonzept: Raster

10. 02.2015

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)

Gestaltungskonzept: Raster

10. 02.2015

Reale Maximale Größe:

28x28px

Gewähltes Raster: 56x56px Umgehen von Problemen mit

Illustrator

Größere Symbole für

Skalierbarkeit (Barrierfrei)

Gestaltungskonzept: Linienstärken

10. 02.2015

Zwei zu benutzenden Linienstärken zur

besseren Darstellbarkeit:- Effektiv 1px und 2px

- Im Illustrator 2px und 4px

Dicke Linie

Dünne Linie

Gestaltungskonzept: Differenzierung

10. 02.2015

Unterteilung in Allgemeine & Themenspezifische Piktogramme

Allgemeine Piktogramme

SchriftgrößeSprachauswahlGebärdenspracheSucheBenutzerhinweiseDatenschutzKontaktSitemapImpressumTelefonE-MailAnschrift

Themenspezifische Piktogramme

Download/PublikationenVeranstaltungen/TermineAktuelle Meldungen/NewsStellenausschreibungenBUS(Bürger und Unternehmensservice)eVergabeHaushalt/SteuernAPPHilfe/Serviceexterne/interne LinksSeitenanfangWeiter/Lesen Sie mehrRechtsgrundlagenVerwandte ThemenInformationen zum ThemaMenü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:- bestehen aus einer

durchgehenden Linie- auf der Seite ca. 14px groß- eine Linienstärke (1px real,

4px im Illustrator)- Linien haben abgerundete

Kanten

Themenspezifische Piktos:- festgelegte Linienstärken- auf der Seite meist 28px

groß- Linien haben abgerundete

Kanten

Allgemeine Piktogramme

10. 02.2015

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

Philosophien

10. 02.2015

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

Philosophien

10. 02.2015

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

Piktogrammserie „Schnittmarke“

Philosophien

10. 02.2015

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

Piktogrammserie „Schablone“

Philosophien

10. 02.2015

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

Piktogrammserie „Color-Key“

Philosophien

10. 02.2015

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

Piktogrammserie „Farbverlauf“

10. 02.2015

Vielen Dank für Ihre Aufmerksamkeit