Natuurlijk! Hier is een uitgebreide UX-stijlgids voor jouw website, gebaseerd op jouw specificaties: --- # UX Stijlgids voor [Jouw Website] ## Inhoudsopgave 1. Introductie 2. Ontwerpprincipes 3. Typografie 4. Kleurgebruik 5. Componenten en UI-elementen 6. Lay-out en grid 7. Navigatie 8. Beeldgebruik 9. Interactie en feedback 10. Consistentie en toegankelijkheid 11. Merkwaarden integratie 12. Richtlijnen voor onderhoud en updates --- ## 1. Introductie Deze gids biedt richtlijnen voor het ontwerpen en ontwikkelen van een gebruiksvriendelijke, consistente en merkgerichte website. De focus ligt op het verleggen van grenzen, gericht op jonge volwassenen (25-35 jaar), met een moderne uitstraling en gebruiksvriendelijkheid. --- ## 2. Ontwerpprincipes - **Gebruiksvriendelijkheid**: intuïtieve navigatie en duidelijke communicatie. - **Consistentie**: eenduidige stijl in kleuren, typografie en componenten. - **Minimalisme**: overzichtelijke layout, minder is meer. - **Responsiviteit**: optimale ervaring op alle apparaten. - **Innovatie**: subtiele vernieuwing en verrassingen die grenzen verleggen. - **Toegankelijkheid**: inclusief voor alle gebruikers, ongeacht beperkingen. --- ## 3. Typografie - **Primair lettertype**: Sans-serif (bijvoorbeeld Helvetica Neue, Open Sans, of Montserrat) - **Gebruik**: - Koppen: Bold of Semi-Bold, grote lettergrootte (bijv. 24-32px) - Subkoppen: Medium, iets kleiner (bijv. 18-24px) - Bodytekst: Regular, leesbaar (bijv. 14-16px) - Accenten/Knoppen: Semi-Bold of Bold - **Regelafstand**: 1.5x de lettergrootte voor leesbaarheid - **Letterkleur**: Contrasterend met de achtergrond, meestal donkergrijs of zwart voor tekst --- ## 4. Kleurgebruik - **Primaire kleuren**: kies 2-3 kleuren die het merk representeren - **Secundaire kleuren**: voor accentuering, bijvoorbeeld voor knoppen of hovereffecten - **Achtergrondkleuren**: wit en lichte grijstinten voor rust en overzicht - **Kleuren voor grenzen en aandacht**: rood, oranje of geel voor belangrijke meldingen of calls-to-action - **Kleurcontrast**: voldoende contrast voor leesbaarheid en toegankelijkheid (WCAG-richtlijnen) --- ## 5. Componenten en UI-elementen ### Knoppen - **Stijl**: rechthoekig met afgeronde hoeken (radius 4-8px) - **Varianten**: - Primaire knop: volle kleur, witte tekst - Secundaire knop: omringd met kleur, transparant of licht - Hover/effect: lichte schaduw of kleurverandering - **Gebruik**: voor belangrijke acties binnen de site ### Formulieren - **Velden**: duidelijke labels, voldoende padding - **Foutmeldingen**: rood, onder het veld of naast het veld - **Succesmeldingen**: groen of blauw ### Icons - **Stijl**: minimalistisch, lijnicons of filled icons - **Gebruik**: voor navigatie, acties of status ### Cards - **Ontwerp**: raster met schaduw of rand, voldoende padding - **Gebruik**: overzicht van content, projecten of producten --- ## 6. Lay-out en grid - **Grid**: 12-koloms grid voor responsiviteit - **Margins en padding**: consistent, bijvoorbeeld 16px of 24px - **Responsief ontwerp**: - Desktop: uitgebreide layout - Tablet: aanpassingen voor kleinere schermen - Mobiel: gestapeld, grote knoppen, minimale content --- ## 7. Navigatie - **Hoofdnavigatie**: horizontaal bovenaan, duidelijk en overzichtelijk - **Mobiele menu’s**: hamburger menu met slide-in of dropdown - **Breadcrumbs**: indien nodig, voor grote hiërarchieën - **Zoekfunctie**: prominent geplaatst --- ## 8. Beeldgebruik - **Stijl**: hoge kwaliteit, authentiek en inspirerend - **Filters**: consistent gebruik van filters en overlays - **Afbeeldingen**: groot formaat, relevante en grensverleggende content --- ## 9. Interactie en feedback - **Hover-effecten**: subtiel, bijvoorbeeld kleurverandering of schaduw - **Loading indicators**: doorlopende animaties - **Transities**: vloeiend en niet afleidend - **Fouten en successen**: duidelijke meldingen met visuele signalen --- ## 10. Consistentie en toegankelijkheid - **Design tokens**: centrale definities voor kleuren, typografie en spacings - **Toegankelijkheid**: - Contrastverhoudingen - Toegankelijke labels - Focus states - Responsieve tekstgroottes --- ## 11. Merkwaarden integratie - **Grenzen verleggen**: - Gebruik gedurfde visuals en innovatieve interacties - Speel met asymmetrie, animaties en onverwachte elementen - **Tone of voice**: - Inspirerend, uitdagend en modern - Gebruik korte, krachtige teksten --- ## 12. Richtlijnen voor onderhoud en updates - Documenteer veranderingen - Houd consistentie in nieuwe componenten - Test op verschillende apparaten en browsers - Verzamel gebruikersfeedback voor continue verbetering --- Wil je dat ik deze gids verder uitwerk met concrete voorbeelden of visuele schetsen?

Hier is een uitgebreide UX-stijlgids voor je website, afgestemd op je specificaties: ## 1. Ontwerpprincipes ### Kernprincipes - **Vooruitstrevendheid**: Ontwerp dat uitdaagt en inspireert - **Geraffineerde eenvoud**: Complexiteit verbergen achter intuïtieve interfaces - **Emotionele impact**: Visuele ervaring die ambitie en groei uitstraalt - **Functionele elegantie**: Schoonheid die altijd de gebruikserving dient ### Gebruikersgerichte principes - **Progressieve betrokkenheid**: Gebruikers stap voor stap meenemen - **Directe feedback**: Onmiddellijke respons op elke interactie - **Toegankelijke innovatie**: Geavanceerde features met lage drempel - **Contextuele hulp**: Hulp waar en wanneer nodig ## 2. Typografie ### Primaire lettertypefamilie - **Hoofdlettertype**: Inter (Sans-serif) - **Fallback-stack**: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif ### Hiërarchie en schaal ``` Kop 1 (H1): 48px / 56px - 700 Kop 2 (H2): 36px / 44px - 600 Kop 3 (H3): 28px / 36px - 600 Kop 4 (H4): 24px / 32px - 500 Body groot: 18px / 28px - 400 Body klein: 16px / 24px - 400 Caption: 14px / 20px - 400 ``` ### Gebruiksrichtlijnen - Maximale regelbreedte: 65 karakters - Contrastverhouding: minimaal 4.5:1 - Letterafstand: -2% voor koppen, 0% voor body tekst ## 3. Kleurenpalet ### Primaire kleuren - **Hoofdkleur**: #0052FF (Energieblauw) - **Secundair**: #00C389 (Innovatiegroen) - **Accent**: #FF6B35 (Actie-oranje) ### Neutrale kleuren - **Zwart**: #1A1A1A - **Donkergrijs**: #4A4A4A - **Middengrijs**: #8A8A8A - **Lichtgrijs**: #E5E5E5 - **Wit**: #FFFFFF ### Functionele kleuren - **Succes**: #00A878 - **Waarschuwing**: #FFB800 - **Fout**: #E53E3E - **Informatie**: #0052FF ## 4. Componentenbibliotheek ### Navigatie - **Hoofdnavigatie**: Horizontaal, donkere achtergrond (#1A1A1A) - **Subnavigatie**: Lichte achtergrond, duidelijke hover-states - **Breadcrumbs**: Kleine tekst, scheiding met pijltjes (>) ### Knoppen ``` Primaire knop: - Achtergrond: #0052FF - Tekst: Wit, 16px, 600 - Afgeronde hoeken: 8px - Padding: 12px 24px - Hover: 10% donkerder Secundaire knop: - Rand: 2px solid #0052FF - Tekst: #0052FF - Transparante achtergrond - Hover: #0052FF met witte tekst Tertiaire knop: - Alleen tekst, geen achtergrond - Kleur: #0052FF - Hover: onderstreept ``` ### Formulieren - **Label**: 16px, #4A4A4A, 500 gewicht - **Inputveld**: 16px, 8px border-radius, 1px solid #E5E5E5 - **Focus state**: 2px solid #0052FF, schaduw - **Placeholder**: #8A8A8A, 400 gewicht ### Kaarten en Containers - **Schaduw**: 0 4px 12px rgba(0,0,0,0.1) - **Afgeronde hoeken**: 12px - **Padding**: 24px - **Achtergrond**: Wit ## 5. Layout-systeem ### Rastersysteem - **Basis eenheid**: 8px - **Containerbreedte**: 1200px max - **Grid**: 12 kolommen - **Gutters**: 24px ### Spatiëringsschaal ``` XS: 8px S: 16px M: 24px L: 32px XL: 48px XXL: 64px ``` ### Breakpoints - **Mobiel**: 0-767px - **Tablet**: 768-1023px - **Desktop**: 1024px+ ## 6. Iconografie ### Stijl - Lijnicons, 2px lijndikte - Afgeronde eindpunten - Consistent 24x24px grid ### Gebruik - Actie-icons: #0052FF - Informatie-icons: #8A8A8A - Waarschuwingsicons: #FFB800 ## 7. Animatie en interactie ### Micro-interacties - **Hover**: 0.2s ease-in-out - **Focus**: 0.1s ease-out - **Klik**: 0.1s scale(0.98) ### Pagina-overgangen - **Fade in**: 0.3s ease-out - **Slide**: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) ## 8. Toegankelijkheid ### WCAG-richtlijnen - Minimaal AA-niveau - Keyboard navigation ondersteund - Screen reader compatible - Kleur niet als enige indicator ### Focus management - Duidelijke focus rings - Logische tab volgorde - Skip-links voor navigatie ## 9. Content-richtlijnen ### Tone of Voice - **Toon**: Ambitieus maar toegankelijk - **Stijl**: Direct en actiegericht - **Temperament**: Energiek en optimistisch ### Schrijfstijl - Korte, krachtige zinnen - Actieve werkwoorden - Concrete voorbeelden - Positieve formuleringen ## 10. Consistentie-checklist ### Voor elke nieuwe component - [ ] Past bij bestaande design tokens - [ ] Getest op toegankelijkheid - [ ] Responsief gedefinieerd - [ ] Documentatie toegevoegd - [ ] Getest met doelgroep ### Regelmatige audits - Maandelijkse design review - Kwartaal toegankelijkheidstest - Halfjaarlijkse gebruikerstest Deze stijlgids zorgt voor een consistente gebruikerservaring die grenzen verlegt terwijl het herkenbaar en gebruiksvriendelijk blijft voor je doelgroep van 25-35 jaar.