{"id":1478,"date":"2024-12-01T10:14:50","date_gmt":"2024-12-01T09:14:50","guid":{"rendered":"https:\/\/digikompas.com\/?post_type=projects&#038;p=1478"},"modified":"2025-06-11T19:49:39","modified_gmt":"2025-06-11T17:49:39","slug":"website-mijn-stargroup","status":"publish","type":"projects","link":"https:\/\/digikompas.com\/nl\/projecten\/website-mijn-stargroup\/","title":{"rendered":"Website Mijn Stargroup"},"content":{"rendered":"\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull hero-section has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"background:radial-gradient(rgba(33,150,243,0.63) 0%,rgba(33,150,243,0) 73%);padding-top:0\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1152\" src=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?fit=1536%2C1152&amp;ssl=1\" alt=\"\" class=\"wp-image-2370\" style=\"width:1600px\" srcset=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?w=1536&amp;quality=100&amp;ssl=1 1536w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=300%2C225&amp;quality=100&amp;ssl=1 300w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=1024%2C768&amp;quality=100&amp;ssl=1 1024w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=768%2C576&amp;quality=100&amp;ssl=1 768w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=1200%2C900&amp;quality=100&amp;ssl=1 1200w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=800%2C600&amp;quality=100&amp;ssl=1 800w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=600%2C450&amp;quality=100&amp;ssl=1 600w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=400%2C300&amp;quality=100&amp;ssl=1 400w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2024\/12\/mijnstargroup-img.png?resize=200%2C150&amp;quality=100&amp;ssl=1 200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n<\/div>\n\n\n\n<h1 class=\"wp-block-heading alignwide has-text-align-center is-style-text-display shiny-text is-style-text-display--1\">De Mijn Stargroup Website<\/h1>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--60)\">\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Over het project<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na de lancering van <a href=\"https:\/\/digikompas.com\/projecten\/de-mijn-stargroup-app\/\" data-type=\"projects\" data-id=\"2056\">de Mijn Stargroup app<\/a> was het tijd voor een campagne om klanten van Stargroup op de hoogte te brengen. Voorheen was de app namelijk door een andere partij gemaakt en helaas kon deze niet worden geupdate met de nieuwe app. Zoals bij elke campagne hoort een goede landingspagina, met als doel: app downloads.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gebruikte technologie\u00ebn<\/h3>\n\n\n\n<div class=\"wp-block-group has-global-padding is-content-justification-left is-layout-constrained wp-container-core-group-is-layout-236ffaf5 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group display-flex is-layout-flex wp-container-core-group-is-layout-94f98c81 wp-block-group-is-layout-flex\" style=\"margin-top:0\">\n<div class=\"wp-block-group wp-container-content-6884ef2a is-nowrap is-layout-flex wp-container-core-group-is-layout-de868385 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full wp-container-content-5cc0e011\" style=\"margin-bottom:10px\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"823\" src=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=1024%2C823&#038;quality=100&#038;ssl=1\" alt=\"\" class=\"wp-image-2449\" style=\"object-fit:cover\" srcset=\"https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?w=1024&amp;quality=100&amp;ssl=1 1024w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=300%2C241&amp;quality=100&amp;ssl=1 300w, https:\/\/i0.wp.com\/digikompas.com\/wp-content\/uploads\/2025\/06\/google-cloud.png?resize=768%2C617&amp;quality=100&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"margin-top:0;margin-bottom:0px\">Google Cloud Hosting<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Vormgeving<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Om het vriendelijke karakter van Stargroup over te brengen is er gekozen voor een interactieve landingspagina. Deze enkele pagina is compleet gevuld met elementen uit de Mijn Stargroup app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Kleuren<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile colors-wrapper is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-FDD835\"><\/div>\n<span>Primair<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-1A237E\"><\/div>\n<span>Secondair<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-content-justification-center is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-2196F3\"><\/div>\n<span>Accent<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"color-card color-F5F5F5\"><\/div>\n<span>Achtergrond<\/span>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Fonts<\/h3>\n\n\n\n<div class=\"wp-block-columns is-not-stacked-on-mobile colors-wrapper is-layout-flex wp-container-core-columns-is-layout-3a88641f wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"font-card\"><\/div>\n<span>Montserrat<\/span>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Animaties<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Hover hero<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De hero van de site is gevuld met kleine elementen die ook in de app terug komen. Deze elementen reageren op de muis van de bezoeker om er een interactieve ervaring van te maken.<\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls src=\"https:\/\/videos.files.wordpress.com\/0y5AMQQb\/mijnstargroup-hero-opname.mov\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--70)\">Interactieve YouTube video<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Het implementeren van een interactieve YouTube video blijft 1 van de leukste dingen die ik heb mogen doen in mijn carri\u00e8re. In de onderstaande video zie je dat de video vergroot wanneer er op play wordt geklikt. Als een soort cinematic-experience. Daarnaast is de video te besturen met de knoppen er onder of toetsenbord.<\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls poster=\"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijnstargroup-video_mov_vp9_2160p.original.jpg\" src=\"https:\/\/videos.files.wordpress.com\/yLLpM1I4\/mijnstargroup-video.mov\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Om de cinematic-experience echt af te maken wilde we er soort 3D effect aangeven. Wat je terug ziet in zowel bovenstaande als onderstaande video. De webpagina <strong>achter<\/strong> de video, reageert op wat er in de video gebeurd.<\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls src=\"https:\/\/videos.files.wordpress.com\/9hbTSV3c\/mijnstargroup-video-schade.mov\"><\/video><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--70)\">CSS Animaties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In plaats van gifjes en videos zit de site vol met CSS animaties die reageren op de muis. Deze animaties nemen minder ruimte in dan een afbeelding of video. Waardoor de site ondanks de de vele interactie snel is.<\/p>\n\n\n\n<figure class=\"wp-block-video highlight\" style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\"><video height=\"1802\" style=\"aspect-ratio: 3200 \/ 1802;\" width=\"3200\" controls poster=\"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijn-stargroup-css-animatie_mov_hevc_2160p.original.jpg\" src=\"https:\/\/videos.files.wordpress.com\/j3Fmoyjg\/mijn-stargroup-css-animatie.mov\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"border-bottom-color:#ffffff33;border-bottom-width:1px;margin-top:var(--wp--preset--spacing--80);padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)\">Credits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Video:<\/strong> Digikompas in samenwerking met Stargroup&#8217;s marketing team<br><strong>App:<\/strong> Digikompas<br><strong>Website:<\/strong> Digikompas<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>De Mijn Stargroup Website Over het project Na de lancering van de Mijn Stargroup app was het tijd voor een campagne om klanten van Stargroup op de hoogte te brengen. Voorheen was de app namelijk door een andere partij gemaakt en helaas kon deze niet worden geupdate met de nieuwe app. Zoals bij elke campagne [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1476,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"projectslug_image_url":"https:\/\/digikompas.com\/wp-content\/uploads\/2025\/06\/mijn-stargroup-nl-groot-1024x576.jpeg","projectslug_image_alt":"Screenshot Website Mijn Stargroup app","footnotes":""},"categories":[30],"tags":[],"class_list":["post-1478","projects","type-projects","status-publish","has-post-thumbnail","hentry","category-website"],"_links":{"self":[{"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/projects\/1478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/projects"}],"about":[{"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/types\/projects"}],"author":[{"embeddable":true,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/comments?post=1478"}],"version-history":[{"count":27,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/projects\/1478\/revisions"}],"predecessor-version":[{"id":2469,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/projects\/1478\/revisions\/2469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/media\/1476"}],"wp:attachment":[{"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/media?parent=1478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/categories?post=1478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digikompas.com\/nl\/wp-json\/wp\/v2\/tags?post=1478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}