05
Design System

InsectScan

Application mobile de scan alimentaire
Détection d'insectes • Ionic & Angular

Explorer le guide
01

Introduction

Ce design system documente l'ensemble des composants, styles et patterns développés pour InsectScan, application mobile de scan alimentaire pour détecter les insectes.

Client
InsectScan
Secteur
Santé & Alimentation
Services
Design, Développement Mobile, UX
Technologies
Ionic, Angular, TypeScript, Capacitor
02

Couleurs

Palette naturelle verte évoquant le bio et la santé, avec alertes rouges/oranges pour la détection

vert-nature
#4CAF50 RGB 76, 175, 80
Primary & produit sain
orange-alerte
#FF9800 RGB 255, 152, 0
Warning & présence partielle
rouge-danger
#F44336 RGB 244, 67, 54
Error & insectes détectés
bleu-info
#2196F3 RGB 33, 150, 243
Info & liens
gris-clair
#FAFAFA RGB 250, 250, 250
Background & cards
03

Typographie

Typographie système Roboto (Android) et SF Pro (iOS) pour une expérience native optimale

Scannez vos produits
Style Heading 1
Font Roboto / SF Pro Bold
Size 32px / 2rem
Weight 700
Line Height 1.2
Historique des scans
Style Heading 2
Font Roboto / SF Pro SemiBold
Size 20px / 1.25rem
Weight 600
Line Height 1.3
Consultez instantanément la présence d'insectes dans la liste des ingrédients.
Style Body
Font Roboto / SF Pro Regular
Size 16px / 1rem
Weight 400
Line Height 1.5
04

Composants

Bibliothèque des composants UI développés pour l'application mobile

Scanner Camera avec Overlay

Interactive Production
Scanner

Interface de scan avec caméra native Capacitor, overlay de visée pour cadrage du code-barres, feedback visuel et sonore à la détection. Reconnaissance automatique des codes EAN-13/UPC.

Capacitor Camera Barcode Scanner Overlay UI

Card Produit avec Badge Détection

Content Production
Product Card

Card affichant l'image produit, nom, marque et badge de détection coloré (vert=sain, orange=traces, rouge=présence). Tap pour accéder au détail complet des ingrédients.

Ionic Card Status Badge Image Lazy Loading

Liste Historique avec Swipe Actions

Interactive Production
History List

Liste des produits scannés avec swipe-to-delete, filtres par statut (tous/sains/insectes) et tri par date. Virtual scroll pour performances optimales sur longues listes.

Ionic List Swipe Actions Virtual Scroll

Modal Détail Ingrédients

Layout Production
Modal

Modal on-screen avec liste complète des ingrédients, highlight des insectes détectés en jaune. Fermeture par swipe down/bouton.

Ionic Modal Swipe Dismiss Share API
05

Fonctionnalités

Fonctionnalités clés développées pour une expérience mobile native optimale

01

Scan Instantané de Code-Barres

Intégration native de la caméra via Capacitor pour scanner les codes-barres EAN-13/UPC. Reconnaissance automatique avec feedback visuel et sonore. Requête API instantanée vers la base de données produits avec affichage des résultats en moins de 2 secondes.

Capacitor Camera Barcode API Real-time Scan
02

Base de Données Produits Synchronisée

Base de données locale SQLite synchronisée avec API backend contenant des milliers de produits. Mise à jour automatique en arrière-plan pour garantir les données les plus récentes. Détection intelligente des insectes alimentaires dans la liste des ingrédients avec algorithme de parsing.

SQLite Background Sync API Integration
03

Historique et Favoris Persistants

Sauvegarde locale de l'historique complet des scans avec stockage Ionic Storage. Système de favoris pour marquer les produits fréquemment consommés. Filtres avancés (par statut, date, marque) et fonction de recherche textuelle dans l'historique.

Ionic Storage Local Persistence Advanced Filters
06

Écrans

Aperçus des interfaces mobile iOS et Android

iOS • 390 × 844
iOS 1
iOS • 390 × 844
iOS 2
iOS • 390 × 844
iOS 3
Android • 360 × 800
Android 1
Android • 360 × 800
Android 2
Android • 360 × 800
Android 3
07

Performance

Métriques de performance et optimisations techniques mobile

98
Performance Mobile
Lighthouse Score
2s
Scan Speed
Code-barres vers résultats
12MB
Taille APK/IPA
Build optimisé
100%
Offline Support
Base locale + sync
Besoin d'une expertise similaire ?

Concrétisons
votre projet digital

Parlons de votre besoin