Projektpräsentation „Piktogrammserie für das Landesportal Sachsen-Anhalt“ In Koorperation mit brain-scc GmbH Staatskanzlei Sachsen-Anhalt frische Ideen GmbH Erstellt von: Nina Bark Peter Hoffmann Lisa Schalk Markus Schmahl Toni Wechselberger Betreut von: Prof. Dipl.-Grafikdesignerin Kerstin Alexander

Inhalt Aufgabenstellung 2Ideenfindung 3 Anforderungen 4 Gestaltungskonzept 5 Philosophien

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

Aufgabendetails Allgemeine Piktogramme Schriftgröße Sprachauswahl Gebärdensprache Suche Benutzerhinweise Datenschutz Kontakt Sitemap Impressum Telefon Anschrift Themenspezifische Piktogramme 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

Ideenfindung: Vergleichsanalsyse Oft verwendete PiktogrammeBrandenburgBayernNiedersachsenBaden-Württemberg Schriftgröße- Kontrast-- Drucken--- Suche- Sprachen- Vorlesen- Externer Link-- Informationen-- - Leichte Sprache--- Download -- -

Ideenfindung: Beispiel Entwicklungsprozess News und Meldungen

Anforderungen  Barrierefrei  Konsistenz um Schriftfamilie weiter zu führen  Einfügen in vorhandenes Design der Seite  Anpassbarkeit an Responsive Design

Barrierefreiheit  Wahrnehmbarkeit:  Skalierbarkeit  Farbunabhängigkeit (Farbenfehlsicht)  Anpassbarkeit (Kontrast, Skalierbarkeit)  Verständlichkeit  Für Piktogramme relevante Punkte der Web Content Accessibility Guidelines 2.0

Konsistenz  durch die Festlegung eindeutiger Regeln wird eine konsistente Gestaltung ermöglicht Beispiel:

Konsistenz  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  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  Heutige Smartphones weit höhere Pixeldichte als Bildschirme  Piktogramme sollten auf Touchscreen größer sein  Wichtigster Punkt: Skalierbarkeit  Einbindung als Vektorgrafiken

Gestaltungskonzept  Raster  Linienstärken  Allgemeine & themenspezifische Piktogramme

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)

Gestaltungskonzept: Raster  Reale Maximale Größe: 28x28px  Gewähltes Raster: 56x56px  Umgehen von Problemen mit Illustrator  Größere Symbole für Skalierbarkeit (Barrierfrei)

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

Gestaltungskonzept: Differenzierung  Unterteilung in Allgemeine & Themenspezifische Piktogramme Allgemeine Piktogramme Schriftgröße Sprachauswahl Gebärdensprache Suche Benutzerhinweise Datenschutz Kontakt Sitemap Impressum Telefon Anschrift Themenspezifische Piktogramme 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

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

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  Single-Line BenutzerhinweisKontakt AnschriftImpressum TelefonGebärdensprache/ Leichte Sprache SucheSprachwahl (englisch) SitemapSprachwahl (deutsch) Schriftgröße (größer) Schriftgröße (kleiner)Datenschutz Kontrast

Philosophien  weitere Piktogrammvariationen der themenspezifischen Piktogramme AppInformationen zum Thema BUSMenüebene gewählt/ nicht gewählt Downloads/ Formulare News und Meldungen eVergabeRechtsgrundlagen Externer LinkZum Seitenanfang Haushalt und SteuernStellenausschreibungen Hilfe und ServiceVeranstaltungen/ Termine Verwandte ThemenWeiterlesen

Philosophien AppInformationen zum Thema BUSMenüebene gewählt/ nicht gewählt Downloads/ Formulare News und Meldungen eVergabeRechtsgrundlagen Externer LinkZum Seitenanfang Haushalt und SteuernStellenausschreibungen Hilfe und ServiceVeranstaltungen/ Termine Verwandte ThemenWeiterlesen  Piktogrammserie „Schnittmarke“

Philosophien AppInformationen zum Thema BUSMenüebene gewählt/ nicht gewählt Downloads/ Formulare News und Meldungen eVergabeRechtsgrundlagen Externer LinkZum Seitenanfang Haushalt und SteuernStellenausschreibungen Hilfe und ServiceVeranstaltungen/ Termine Verwandte ThemenWeiterlesen  Piktogrammserie „Schablone“

Philosophien AppInformationen zum Thema BUSMenüebene gewählt/ nicht gewählt Downloads/ Formulare News und Meldungen eVergabeRechtsgrundlagen Externer LinkZum Seitenanfang Haushalt und SteuernStellenausschreibungen Hilfe und ServiceVeranstaltungen/ Termine Verwandte ThemenWeiterlesen  Piktogrammserie „Color-Key“

Philosophien AppInformationen zum Thema BUSMenüebene gewählt/ nicht gewählt Downloads/ Formulare News und Meldungen eVergabeRechtsgrundlagen Externer LinkZum Seitenanfang Haushalt und SteuernStellenausschreibungen Hilfe und ServiceVeranstaltungen/ Termine Verwandte ThemenWeiterlesen  Piktogrammserie „Farbverlauf“

Vielen Dank für Ihre Aufmerksamkeit