Projektpräsentation „Piktogrammserie für das Landesportal Sachsen-Anhalt“ In Koorperation mit brain-scc GmbH Staatskanzlei Sachsen-Anhalt frische Ideen.

Präsentation zum Thema: "Projektpräsentation „Piktogrammserie für das Landesportal Sachsen-Anhalt“ In Koorperation mit brain-scc GmbH Staatskanzlei Sachsen-Anhalt frische Ideen."—  Präsentation transkript:

1 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

2 Inhalt 10. 02.2015 1Aufgabenstellung 2Ideenfindung 3 Anforderungen 4 Gestaltungskonzept 5 Philosophien

3 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

4 Aufgabendetails 10. 02.2015 Allgemeine Piktogramme Schriftgröße Sprachauswahl Gebärdensprache Suche Benutzerhinweise Datenschutz Kontakt Sitemap Impressum Telefon E-Mail 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

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

6 Ideenfindung: Beispiel Entwicklungsprozess 10. 02.2015 News und Meldungen

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

8 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

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

10 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

11 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“

12 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

13 Gestaltungskonzept 10. 02.2015  Raster  Linienstärken  Allgemeine & themenspezifische Piktogramme

14 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)

15 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)

16 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

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

18 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

19 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

20 Allgemeine Piktogramme 10. 02.2015  Single-Line BenutzerhinweisKontakt AnschriftImpressum TelefonGebärdensprache/ Leichte Sprache SucheSprachwahl (englisch) SitemapSprachwahl (deutsch) Schriftgröße (größer)E-Mail Schriftgröße (kleiner)Datenschutz Kontrast

21 Philosophien 10. 02.2015  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

22 Philosophien 10. 02.2015 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“

23 Philosophien 10. 02.2015 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“

24 Philosophien 10. 02.2015 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“

25 Philosophien 10. 02.2015 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“

26 10. 02.2015 Vielen Dank für Ihre Aufmerksamkeit