Post on 06-Apr-2016
transcript
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