Styleguide für Appdesign

Transkript

1 Styleguide für Appdesign Beispielhaft für news.orf.at, angewendet auf iphone-5-maße. Für größere Displays und andere Betriebssysteme wie z.b. Android können die Angaben dementsprechend adaptiert werden.

2

3 Grundsätzlicher Aufbau der App-Startseite von ORF.at News Die Startseite der News-App setzt sich aus den Inhalten der Webansicht von news.orf.at zusammen. Stories, die in der Webansicht im Newsgrid auftauchen, werden in der App ganz oben dargestellt. Die wichtigste Story wird dabei direkt unter dem Header Seitenbreitefüllend platziert. Weitere Stories aus dem Grid tauchen in einer Thumbnail-Headline-Kombination in der Liste darunter auf. Beiträge aus dem Network wie z.b. Österreich und Sport werden durch einen schmalen rechtsbündigen Streifen in Sitefarbe hervorgehoben (Blau für Österreich, Gelb für Sport). Sonderseiten wie z.b. die EU-Wahl 2014 können an vierter Stelle zwischen den Grid- Storystreifen als hervorgehobener Streifen positioniert werden. Unter dem Grid-Block werden die Tickerstories nach Kategorie in einer Liste verlinkt.

4 Flächen-Einteilung Frontseite: Alle Aufmacher Grid Elemente stehen flächenfüllend im Anschnitt direkt am Bildschirmrand links und rechts. Die Thumbnail-Headline-Elemente darunter haben eine fixe Standardhöhe (Touchfläche) von 122 Px, dadurch sind maximal dreizeilige Headlines bzw. Keyword-/Headlinekombinationen möglich. Der Abstand zwischen den Streifen beträgt 8 Pixel. Die Sondersite-Promofläche wird als Pixelgrafik gestaltet.

5 Flächen-Einteilung Frontseite, Ticker: Im Unterschied zu den oberen Aufmacherelementen werden die Flächen, in denen die Tickermeldungen stehen, nicht am Bildschirmrand positioniert. Sie stehen mit jeweils einem Abstand von 8 Px rechts und links auf der Backgroundfläche. Tickernachrichten aus der selben Rubrik werden als Liste zusammengefasst und durch eine graue Linie (4 Pixel hoch, #f0f1f4) getrennt. Der Anfang zur nächsten Rubrik wird durch einen Abstand der weißen Contentflächen von 68 Px markiert, in dem die Rubrikenbezeichnung auf der Backgroundfläche steht.

6 Flächen-Einteilung Teaser Die Storyebene folgt der Weblogik, das heißt, vor der Story folgt zunächst der Teaser nach Klick auf der Front. Über dem Aufmacherbild der Story liegt halbtransparent die Fläche des Teasertextes Am Fuß des Teasertextes folgt direkt der Link mit Einstieg in die Hauptstory plus weitere Links zum Thema.

7 Flächen-Einteilung Storyebene Die Story beginnt immer mit einem großen, über die komplette Breite gehenden Aufmacherbild, das dem Bild im Subgrid (Web) entspricht. Die Headline ist im Bild positioniert Bodybilder und Big-Size-Bilder gehen im Storylayout der App über die komplette Breite. Die Höhe ergibt sich aus dem Seitenverhältnis des Bildes.

8 Farben Header: News-Blau : #5286c1 Einfärbung Systemleiste: #4371A3 Links: # Textflächen: #ffffff Keywords und Rubrikenbezeichnungen: #a5a5a5 Grundsätzlich wird die Farbwelt von news.orf.at zugrunde gelegt und in nur wenigen Fällen modifiziert, wie zum Beispiel die Linkfarbe. Lesetexte: # Fotocredits: #a5a5a5 Background und Substory-Navigation: #f0f1f4 Textflächen: #ffffff

9 Interaktion: In der ORF.at News-App wird neben dem Tipp auf die Schaltfläche die Interaktion Wischen eingesetzt. Alle Elemente auf der Frontpage werden getippt und mit einer Schiebeanimation von links nach rechts geöffnet. Im Storypaket (ab Teaser) und im Tickerbereich wird durch eine Wischbewegung von rechts nach links oder Tipp auf das Display navigiert. Im Teaser bleibt dabei das große Aufmacherbild, das unter der Wischfläche liegt, stehen und der Text der Hauptstory erscheint. Zusätzlich zu dieser Interaktionsmöglichkeit wird am Fuß der Story der Bereich Zu diesem Thema angeboten, der die Storys im Paket in einer Thumbnail/Headline-Kombination anbietet.... In der Leiste unterhalb des Headers wird durch kleine Kästchen die Anzahl und der Stand der Storys angezeigt.

10 Typografie: Apps aus dem ORF.at-News-Network werden ausschliesslich in der eigens entwickelten Schriftfamile ORF ON gesetzt. Die Schrift wurde für den Bildschirm und mobile Devices entwickelt und zeichnet sich durch eine extrem gute Lesbarkeit aus. ORF ON Condensed bold, 44 Px, ZAB 48 Px ORF ON condensed bold wird in erster Linie auf Bildern in Weiss (also negativ) als Headline eingesetzt ORF ON condensed medium wird als Headlineschrift für Storylisten, Tickermeldungen und weiterführende Links eingesetzt. ORF ON Condensed medium, 34 Px, ZAB 38 Px Für alle ORF ON-Schnitte (bis auf Small Caps) gilt, dass kein extra Spacing hinzugegeben werden sollte. Die Schrift ist von der Laufweite optimal für die Lesbarkeit auf dem Bildschirm zugerichtet.

11 Typografie: ORF ON regular, bold, italic, italic bold Diese Schnitte werden im Newsbereich in der Story, in Headlines und Zwischenheadlines, in Lesetexten, sozusagen als Brotschrift in allen Schnitten eingesetzt und erfüllen die grundsätzlichen Belange eines typografischen Satzes. Um eine gute Lesbarkeit zu gewähren, sollte etwas mehr Zeilenabstand als gewöhnlich hinzugegeben werden. Headlines auf weisser Fläche: ORF ON bold 44 Px, ZAB 56 Px Teaser- und Lesetexte: ORF ON regular, 34 Px, ZAB 44 Px Lead: ORF ON bold, 34 Px, ZAB 44 Px

12 Typografie: ORF ON condensed medium TF Dieser Schnitt (Table Figures) wird vorwiegend im Tabellensatz in der App und im mobilen Bereich (überall, wo Platzmangel herrscht) eingesetzt, wie zum Beispiel bei Sporttabellen und Wetter-Übersichten. Tabellenheadline ORF ON condensed bold TF 30 Px, ZAB 46 Px Tabelle ORF ON condensed book TF 30 Px, ZAB 44 Px Tabelle Hervorhebungen/Links ORF ON condensed medium TF 30 Px, ZAB 44 Px

13 Typografie: ORF ON condensed bold SC ORF ON condensed medium SC ORF ON condensed regular SC Der Small-Caps-Schnitt eignet sich für Navigationselemente und zum Strukturieren durch z.b. Keywords oder Rubriken. Wetter Schiebenavigation ORF ON condensed medium SC 30 Px, ZAB 46 Px, +1 Spacing Ticker Rubriken, zu diesem Thema ORF ON condensed medium SC 30 Px, ZAB 46 Px, +1 Spacing

14 Kontakt art direktion ORF.at Grafik design ORF.at stand