Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


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 Erstellt von: Nina Bark Peter Hoffmann Lisa Schalk Markus Schmahl Toni Wechselberger Betreut von: Prof. Dipl.-Grafikdesignerin Kerstin Alexander

2 Inhalt Aufgabenstellung 2Ideenfindung 3 Anforderungen 4 Gestaltungskonzept 5 Philosophien

3 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

4 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

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

6 Ideenfindung: Beispiel Entwicklungsprozess News und Meldungen

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

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

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

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

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

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

15 Gestaltungskonzept: Raster  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  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  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

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

21 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

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

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

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

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

26 Vielen Dank für Ihre Aufmerksamkeit


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

Ähnliche Präsentationen


Google-Anzeigen