Om de (branded) ClubApp op te starten, zijn enkele gegevens en bestanden nodig. In dit hulpartikel kun je lezen wat wij precies nodig hebben om de app te kunnen bouwen. Voor Apple (iOS) en Android zijn de gegevens soms verschillend per device (iOS / Android). Alle gegevens dienen opnieuw aangeleverd te worden, dit veelal met de nieuwe formaten welke iOS en Android verwachten.
Deze bestanden kunnen verzonden worden naar help@lisahockey.nl
Wat heb je nodig?
- Een eigen iOS Developer / iTunes-account
- Een splashscreen
- De kleuren waarin de app wordt gebouwd
- De naam van de app
- Iconen
iOS
a. Splashscreen
Een splashscreen is een scherm dat enkele (milli)seconden wordt getoond bij het opstarten van de app. Het is vaak een afbeelding die jullie club in beeld brengt, maar kan ook een reclameuiting van een sponsor zijn.
We hebben de splashscreen in 3 formaten nodig, namelijk:
- splashscreen@1x.png (375 x 667 pixels)
- splashscreen@2x.png (750 x 1334 pixels)
- splashscreen@3x.png (1125 x 2001 pixels)
!!! De splashscreens mogen geen transparantie bevatten !!!
De app zal de splashscreens schermvullend maken op toestellen als de iPhoneX, Xs, Xs Max & Xr. Hierdoor kan een deel van de afbeelding aan de rechter- en linkerzijde wegvallen. We adviseren daarom ook om het clublogo, sponsorlogo's, teksten en belangrijke delen van foto's zoveel mogelijk in het midden van de afbeelding te plaatsen. In onderstaande voorbeeld moet het rode gedeelte vrij blijven van belangrijke zaken als logo's en teksten.
We adviseren dan ook om de volgende marges te hanteren aan de rechter- en linkerzijde van de afbeeldingen:
- splashscreen@1x.png (375 x 667 pixels) --> 50 pixels
- splashscreen@2x.png (750 x 1334 pixels) --> 95 pixels
- splashscreen@3x.png (1125 pixels x 2001 pixels) --> 145 pixels
b. Kleuren App
Er kunnen maximaal 2 kleuren gekozen worden voor het gebruik in de app. We ontvangen de gewenste kleuren graag in RGB kleurbenaming.
Voorbeeld: LISA Blauw = gb(62, 172, 236)
Note: de primaire kleur mag niet wit of lichtgrijs zijn en de secundaire kleur mag niet rood, geel, lichtgrijs of wit zijn.
c. Naam van de app
De naam van de app moet rond de 10-12 karakters zijn. Hoeveel karakters het is, is afhankelijk van de grootte van de letters.
Note: mocht je de huidige naam van de app willen hergebruiken, laat het ons dan graag weten.
d. Iconen
De icons dienen in allerlei formaten aangeleverd te worden met de juiste benaming van de bestanden, namelijk:
- iphone-spotlight@3x.png (120 x 120 pixels)
- iphone-spotlight@2x.png (80 x 80 pixels)
- iphone-settings@1x.png (29 x 29 pixels)
- iphone-settings@2x.png (58 x 58 pixels)
- iphone-settings@3x.png (87 x 87 pixels)
- iphone-notification@2x.png (40 x 40 pixels)
- iphone-notification@3x.png (60 x 60 pixels)
- iphone-appicon@3x.png (180 x 180 pixels)
- iphone-appicon@2x.png (120 x 120 pixels)
- ios-marketing.png (1024 x 1024 pixels)
!!! De icons mogen geen transparantie bevatten !!!
e. Screenshot Appstore
Wij voegen een generieke set met screenshots toe. Een van de screenshots is het splashscreen van de app, die door jullie is aangeleverd. Om het splashscreen in de Appstore te kunnen tonen hebben wij het splashscreen nodig in het volgende formaat en met de volgende bestandsnaam:
- App-Store 6.5 - 1 Welcome Club@3x.png (1242 x 2688)--> PNG Afbeelding
- App-Store 6.9 - 1 Welcome Club@3x.png (1320 x 2868)--> PNG Afbeelding
!!! Het screenshot mag geen transparantie bevatten !!!
f. Clublogo
Op verschillende plekken in de app tonen we een clublogo, voor dit logo gelden de volgende specificaties:
- 483 x 516 pixels (bxh)
- PDF bestand
- Bestandsnaam moet zijn "icn_splash_logo.pdf"
- Mag transparantie bevatten
Android
a. Splashscreen
We ontvangen de gewenste splashscreen graag in 5 verschillende formaten, namelijk:
- hdpi_launch_image.png (506x900)
- mdpi_launch_image.png (337x600)
- xhdpi_launch_image.png (675x1200)
- xxhdpi_launch_image.png (1012x1800)
- xxxhdpi_launch_image.png (1350x2400)
!!! De splashscreens mogen geen transparantie bevatten !!!
b. Kleuren App
Er kunnen maximaal 2 kleuren worden gekozen voor het gebruik in de app. We ontvangen de gewenste kleuren graag in HEX kleurbenaming,
Voorbeeld: LISA Blauw = #3EACEC
Note: primaire kleur mag niet wit of lichtgrijs zijn en de secundaire kleur mag niet rood, geel, lichtgrijs of wit zijn.
c. Naam van de app
De naam van de app moet rond de 10-12 karakters zijn. Hoeveel karakters het is, is afhankelijk van grootte van de letters.
Note: mocht je de huidige naam van de app willen hergebruiken laat het ons dan graag weten.
d. Iconen
Voor de Android-app hebben we iconen nodig, hiervoor gelden enkele regels die vanuit Google Play worden opgelegd:
- Format: 32-bit PNG
- Color space: sRGB
- Maximaal formaat van grootste bestand: 1024KB
- Het icoon moet vierkant zijn, iconen met radius of ronde iconen worden geweigerd
- Er mag geen schaduw worden toegepast op het icoon.
Voor een volledig overzicht van de specificaties verwijzen we u door naar de Google Play icon design specificaties: https://developer.android.com/google-play/resources/icon-design-specifications
We hebben de volgende iconen nodig voor de Android-app:
- web_hi_res_512.png (512 x 512pixels)
- mdpi_ic_launcher.png (48 x 48pixels)
- hdpi_ic_launcher.png (72 x 72pixels)
- xhdpi_ic_launcher.png (96 x 96pixels)
- xxhdpi_ic_launcher.png (144 x 144pixels)
- xxxhdpi_ic_launcher.png (192 x 192pixels)
e. Notificatie iconen
De Android-app toont een icoon indien er een notificatie voor de app is. Denk hierbij aan de notificatie van een push-bericht bij clubnieuws. Hiervoor gelden de volgende specificaties:
- Icoon mag uit maximaal 2 kleuren bestaan (full collor is niet toegestaan)
- Toegestane kleuren zijn #FFFFFF (wit) of #617d8b ( grijs)
- Icoon mag transparantie bevatten
We hebben deze nodig in de volgende formaten:
- ic_notification_icon_mdpi.png (24 x 24 pixels)
- ic_notification_icon_hdpi.png (36 x 36 pixels)
- ic_notification_icon_xhdpi.png (48 x 48 pixels)
- ic_notification_icon_xxhdpi.png (72 x 72 pixels)
- ic_notification_icon_xxxhdpi.png (96 x 96 pixels)
De notificatie iconen zijn optioneel, indien u deze niet kunt aanleveren zullen wij een generieke set van notificatie iconen toevoegen.
f. Clublogo's
Op verschillende plekken in de app tonen we een clublogo. Voor dit logo gelden de volgende specificaties:
- mdpi_ic_club_logo.png (118 x 118 pixels)
- hdpi_ic_club_logo.png (177 x 177 pixels)
- xhdpi_ic_club_logo.png (236 x 236 pixels)
- xxhdpi_ic_club_logo.png (354 x 354 pixels)
- xxxhdpi_ic_club_logo.png (472 x 472 pixels)
G. Screenshot Google Play
Wij voegen een generieke set met screenshots toe. Een van de screenshots is het splashscreen van de app, die door jullie is aangeleverd. Om het splashscreen in de Google Play te kunnen tonen hebben wij het splashscreen nodig in het volgende formaat en met de volgende bestandsnaam:
- Play Store - BrandedApp - 1.png (414 × 828)--> PNG Afbeelding
Uitleg kleurgebruik in de mobiele app
Checklist
Mogelijk kan onderstaande checklist je helpen. Print dit uit en vink af (voor je eigen administratie) of je alles gereed hebt.
Algemeen
[ ] Naam in appstores
[ ] Naam onder app icon
iOS
[ ] Primaire kleur (RGB)
[ ] Secundaire kleur (RGB)
[ ] icn_splash_logo.pdf
[ ] ios-marketing.png
[ ] iphone-appicon@2x.png
[ ] iphone-appicon@3x.png
[ ] iphone-notification@2x.png
[ ] iphone-notification@3x.png
[ ] iphone-settings@1x.png
[ ] iphone-settings@2x.png
[ ] iphone-settings@3x.png
[ ] iphone-spotlight@2x.png
[ ] iphone-spotlight@3x.png
[ ] splashscreen@1x.png
[ ] splashscreen@2x.png
[ ] splashscreen@3x.png
[ ] App-Store 6.5 - 1 Welcome Club@3x.png (screenshot)
[ ] App-Store 6.9 - 1 Welcome Club@3x.png (screenshot)
Android
[ ] Primaire kleur (HEX)
[ ] Secundaire kleur (HEX)
[ ] hdpi_ic_club_logo.png
[ ] hdpi_ic_launcher.png
[ ] hdpi_launch_image.png
[ ] ic_notification_icon_mdpi.png
[ ] ic_notification_icon_hdpi.png
[ ] ic_notification_icon_xhdpi.png
[ ] ic_notification_icon_xxhdpi.png
[ ] ic_notification_icon_xxxhdpi.png
[ ] mdpi_ic_club_logo.png
[ ] mdpi_ic_launcher.png
[ ] mdpi_launch_image.png
[ ] web_hi_res_512.png
[ ] xhdpi_ic_club_logo.png
[ ] xhdpi_ic_launcher.png
[ ] xhdpi_launch_image.png
[ ] xxhdpi_ic_club_logo.png
[ ] xxhdpi_ic_launcher.png
[ ] xxhdpi_launch_image.png
[ ] xxxhdpi_ic_club_logo.png
[ ] xxxhdpi_ic_launcher.png
[ ] xxxhdpi_launch_image.png
[ ] Play Store - BrandedApp - 1.png (screenshot)