Wireframing en Lay-out

Het opzetten van een solide structuur begint met een grondige analyse van het ontwerpbestand. Onze webdevelopers bekijken hoe we dit ontwerp het beste kunnen realiseren in Webflow. Dit proces omvat:

• Ontwerpanalyse: We analyseren het aangeleverde ontwerp en bepalen hoe we dit pixel-perfect kunnen nabouwen in Webflow, rekening houdend met de eisen van HTML, CSS en JavaScript.
• Wireframes Maken: Nadat we de structuur hebben uitgedacht, maken we wireframes die dienen als het skelet van de website en laten zien hoe deze zal functioneren.
• Client-First Classes System: We bouwen alles in Webflow volgens het "Client-First Classes System" van Finsweet, wat zorgt voor een gestructureerd en toekomstbestendig ontwerp.

Waarom gebruiken we het Finsweet Client-First systeem?

Het Client-First systeem van Finsweet is ontworpen om het bouwen van websites in Webflow overzichtelijk, schaalbaar en onderhoudbaar te maken. Dit systeem helpt bij het structureren van klassen en zorgt ervoor dat websites eenvoudig kunnen worden beheerd en aangepast, zowel door de oorspronkelijke ontwikkelaar als door anderen. Door het gebruik van een consistent en logisch systeem, kan je snel wijzigingen doorvoeren zonder onbedoeld bestaande elementen te beïnvloeden. Dit draagt bij aan een efficiëntere workflow en betere projectbeheerbaarheid. Voorbeelden van gebruik in ons proces:‍

1. Utility Classes

‍Utility Classes zijn globale klassen die specifieke stijlen toewijzen aan elementen, zoals tekstgrootte of achtergrondkleur. Ze zijn ontworpen om herbruikbaar te zijn in het hele project. Bijvoorbeeld:

• text-size-large: Dit kan gebruikt worden om de tekstgrootte te bepalen van verschillende elementen binnen het project.
• background-color-primary: Deze class bepaalt de primaire achtergrondkleur van een sectie.

Voordeel: Bij het aanpassen van de stijl van een utility class worden alle elementen die deze klasse gebruiken automatisch bijgewerkt, wat het proces versnelt.

2. Globale Class

Globale klassen zijn bedoeld om consistentie door het hele project te waarborgen. Deze klassen worden vaak gebruikt voor elementgroepen zoals navigatiebalken of footers. Ze kunnen met zowel streepjes (-) als onderstrepingstekens (_) worden benoemd, afhankelijk van hun functie. Bijvoorbeeld:

• header_background-layer: Dit is een globale class die kan worden toegepast op verschillende secties met dezelfde achtergrondlaag in de header.

Voordeel: Het gebruik van globale classes zorgt ervoor dat belangrijke componenten zoals headers consistent blijven op elke pagina van de website​.

3. Custom Class

Voor unieke elementen of secties die een specifieke stijl nodig hebben, kunnen custom classes worden gebruikt. Deze klassen maken gebruik van een onderstreeptekensysteem om ze te organiseren. Bijvoorbeeld:

• team-list_headshot-wrapper: Deze klasse definieert de opmaak van het omhullende element rond de teamledenfoto.

Voordeel: Dit maakt het makkelijker om elementen te groeperen en ze te identificeren binnen de Webflow Navigator, wat handig is bij het onderhouden van grotere projecten.

4. Combo Class

Combo classes bouwen voort op een bestaande basisklasse door extra stijlen toe te voegen voor specifieke variaties. Een voorbeeld is:

• button is-brand: Dit geeft een unieke stijl aan een specifieke knopvariant die voortkomt uit de basis button class.

Voordeel: Het gebruik van combo classes vermindert het aantal unieke classes dat je moet aanmaken en geeft extra flexibiliteit zonder complexiteit toe te voegen.

Zoals je ziet, zijn dit slechts enkele toepassingen van het Client-First systeem die onze workflow aanzienlijk versnellen. We begrijpen dat je de techniek graag aan ons overlaat, maar we vinden het altijd leuk om je een kijkje in de keuken te geven. Mocht je nieuwsgierig zijn naar meer details over hoe het Client-First systeem werkt en hoe het jouw project ten goede komt, dan leggen we het graag persoonlijk verder uit.

Componenten en CMS opzet

We zorgen ervoor dat alle essentiële componenten en secties duidelijk gedefinieerd zijn. Dit omvat:

• Herbruikbare Componenten: We bepalen de herbruikbare elementen zoals headers, footers en navigatiebalken en bouwen daarvoor de juiste Webflow Componenten.
• Webflow CMS: We koppelen databases aan met Webflow CMS collection lists, zodat content in de volgende fase gemakkelijk kan worden ingevoegd.
• Sliders: Alle sliders worden gebouwd met Swiper JS, een toonaangevende technologie die zorgt voor gebruiksvriendelijke en uitgebreide sliders.
• Video's: Terwijl achtergrondvideo's geüpload kunnen worden in Webflow, maken we voor het uploaden van eigen video's met geluid gebruik van Bunny of Vimeo. Dit verbetert de laadsnelheid en prestaties van de website. Naar welk platform de voorkeur gaat bespreken we graag tijdens de projectvoorbereiding.

Visuele styling

Nadat de basisstructuur staat, passen we ook de visuele styling toe. Dit proces omvat:

• Standaard Elementen Stylen: We stylen alle standaard HTML-elementen zoals headings, kleuren, tekststijlen en spacing.
• Pixel-Perfect Realisatie: We zorgen ervoor dat er geen verschil te zien is tussen het aangeleverde ontwerp en de daadwerkelijk ontwikkelde website.

Responsive ontwerp

Een goede website moet er op alle apparaten goed uitzien en functioneren. Daarom zorgen we voor een responsief design door:

• Aanpassen voor Verschillende Schermen: We maken de basisstructuur alvast compatibel met verschillende schermgroottes en apparaten.
• Testen en Optimaliseren: We testen de lay-out ook in deze fase alvast op diverse apparaten en maken waar nodig aanpassingen voor een betere gebruikerservaring.

Met deze stappen leggen we het fundament voor een goed gestructureerde en functionele website, klaar voor verdere ontwikkeling en inhoudsinvoer. In het volgende hoofdstuk lees je hoe we de website interactief en gebruiksvriendelijk maken.