Pastelkleurige gebruikersinterface voor de hardloopapp met luiaardmascotte

{ "type": "UI-model voor een mobiele fitness-app", "style": "Een strak en modern pastel app-ontwerp met zachte beige en warme witte oppervlakken, geaccentueerd met delicate saliegroene tinten, afgeronde kaarten en knoppen, subtiele schaduwen, slanke minimalistische pictogrammen, een vriendelijke en speelse merkidentiteit met een luiaardmascotte en een donkerbruine stippenachtergrond in Dribbble-stijl.", "theme": "App voor het bijhouden van hardloopactiviteiten", "layout": { "device_count": 3, "arrangement": "Drie langwerpige smartphoneschermen naast elkaar, gelijkmatig verdeeld, vooraanzicht.", "background": "Zeer donkerbruin met een vaag, uniform stippenrasterpatroon.", "screens": [ { "position": "Linkerzijde", "screen_type": "Startscherm", "header": { "greeting": "Goedemorgen, hardlopers! 👋", "left_icon": "geen", "right_icon": "Notificatiebel" }, "hero_card": { "kopregel": "Klaar voor een geweldige dag?", "subkaarttekstregel_1": "Elke stap voorwaarts is een overwinning.", "subkaarttekstregel_2": "Laten we van elk moment iets bijzonders maken. 🌱", "illustratie": "Een schattige luiaard, met een crèmekleurige hoofdband en een mintgroen trainingspak, staat aan de rechterkant van de kaart en zwaait." }, "secties": [ { "titel": "Deze week", "positie": "Boven-midden", "aantal": 3, "labels": [ "Aantal runs", "afstand", "tijd" ], "waarden": [ "3", "12,6 km", "1 uur 45 minuten" ], "presentatie": "Een enkele statistiekenkaart met afgeronde hoeken, met drie kolommen van gelijke breedte en een lichtgroen cirkelvormig pictogram." }, { "title": "Volgend doel", "position": "Midden tot onder", "count": 1, "labels": [ "20 kilometer deze maand" ], "values": [ "63%" ], "presentation": "Afgeronde voortgangskaart met een groene voortgangsbalk en een kleine illustratie van een luiaard die aan de rechterkant zwaait." }, { "title": "Recente activiteiten", "position": "onder", "count": 1, "labels": [ "Recente activiteiten" ], "presentation": "De bovenrand van de andere afgeronde kaart is zichtbaar, maar wordt bedekt door de onderste navigatiebalk." } ], "bottom_nav": { "count": 4, "labels": [ "homepage", "running", "schedule", "Personal information" ], "active": "homepage" } }, { "position": "middle", "screen_type": "Running Summary", "header": { "left_icon": "Return arrow", "center_text": "Goed gedaan!", "subtext": "Je hebt het gehaald! Tijd om te vieren! 🎉", "right_icon": "share" }, "hero_illustration": "Een schattige luiaard, met een hoofdband, een mintgroen trainingspak en een gouden medaille, heft zijn armen in de lucht ter viering.", "stats_row": { "count": 3, "labels": [ "distance", "time", "pace" ], "values": [ "5.00 km", "32:15", "6:27" ], "presentatie": "Drie statistische capsules met afgeronde hoeken" }, "prestatiekaart": { "aantal": 1, "titel": "Een nieuw persoonlijk record! 🌟", "ondertitel": "Je was 1 minuut en 12 seconden sneller dan de vorige keer dat je 5 kilometer aflegde.", "icoon": "Kleine gouden medaillebadge" }, "tabelgedeelte": { "titel": "Segmentatie", "aantal": 2, "kolommen": [ "kilometer", "tempo", "tijd" ], "rijen": [ [ "1", "6:35", "6:35" ], [ "2", "6:23", "12:58" ] ], "presentatie": "Afgeronde witte formulierkaarten met lichtgekleurde scheidingslijnen" } }, { "positie": "rechterkant", "schermtype": "Hardloopdoelen instellen", "koptekst": { "linkericoon": "Sluiten" X", "center_text": "Laten we beginnen met hardlopen!", "subtext": "Je kunt het. We doen het rustig aan. 🦥", "right_icon": "Schakel in" }, "goal_visual": { "type": "Cirkelvormige voortgangsselector", "top_label": "Selecteer doel", "main_value": "5.00", "unit": "kilometer", "ring": "Vetgedrukte saliegroene boog op een lichtbeige ring", "illustration": "Een kleine luiaard die zich uitstrekt in de rechterbovenhoek van de cirkel" }, "goal_options": { "count": 4, "labels": [ "2 kilometer", "5 kilometer", "10 kilometer", "Halve marathon" ], "active": "5 kilometer" }, "primary_cta": { "label": "Begin met hardlopen", "style": "Grote afgeronde saliegroene knop" }, "secondary_action": { "label": "Alleen volgen", "icon": "Locatiemarkering" }, "bottom_nav": { "count": 4, "labels": [ "startpagina", "actief", "schema", "Persoonlijke informatie" ], "active": "actief" } } ] } }