What’s the catch.

Onze heldere aanleverspecs. Wel zo duidelijk.

 

Je bent echt geïnteresseerd in Dev Metal, hè? Nice! Lees dan snel verder en zet Dev Metal alvast in jouw ‘speed dial’ lijst.

Om onze belofte van een snelle levertijd en lage prijs na te kunnen komen hebben we een aantal spelregels in het leven geroepen. Op deze manier kunnen onze Code Cannibals & Dev Devils snel jouw design omzetten in een vette website.

 

 

Onze componenten catalogus

Voordat je start met ontwerpen controleer je in onze catalogus of de gewenste functionaliteit beschikbaar is binnen Dev Metal. Deze catalogus is met zorg samengesteld en wij zijn ervan overtuigd dat het gros van de websites hiermee gemaakt kan worden. Ontbreekt er een bepaalde functionaliteit, neem dan even contact met ons op.

Jouw ontwerp

Bij Dev Metal zijn we gek op alle nieuwe tools waarmee je vandaag de dag websites kunt ontwerpen. Sketch, Figma, Adobe XD… we love it.

Als je jouw ontwerp in een van deze programma’s maakt kunnen we hier direct mee aan de slag.

Bootstrap Grid

Het systeem dat we binnen Dev Metal gebruiken is gebaseerd op het Bootstrap grid. Het idee hierachter is dat alle verschillende elementen in een ontwerp geplaatsts worden op – en uitlijnen met een denkbeeldig grid. Het grid deelt de pagina in de breedte op in 12 kolommen. Elk element beslaat 1 of meer kolommen.

Een voorbeeld
3 elementen van gelijke grootte naast elkaar bestaan elk uit 4 kolommen: 3 x 4 = 12
2 elementen van gelijke grootte bestaan elk uit 6 kolommen: 2 x 6 = 12

Uiteraard hoeven de elementen niet allemaal dezelfde hoogte of breedte te krijgen zoals in bovenstaand voorbeeld. Alle combinaties zijn mogelijk. Elementen kunnen ook verspringen zoals in onderstaand voorbeeld, maar lijnen altijd met het grid:

Ook kun je aan een element een bepaalde ‘padding’ meegeven voor meer lucht binnen het element:

Hoe beter het ontwerp lijnt met het grid, hoe beter en voorspelbaarder de vertaling naar kleinere devices. Door gebruik te maken van kolommen in je ontwerp kunnen wij een betere inschatting maken van de weergave op mobiel of tablet.

Met onze voorbeeldbestanden voor XD, Sketch en Figma kun je meteen aan de slag met je ontwerp. Neem contact op voor meer informatie.

 

 

Typography styles

Binnen een website worden er verschillende tekststijlen gebruikt. Voor zoekmachines is het handig als er op een pagina een bepaalde hiërarchie is aangebracht. In HTML wordt dit onderscheid gemaakt door titels en kopjes te voorzien van een H1 t/m H6 tag. Waarbij H1 de belangrijkste titel (altijd maximaal 1) op de pagina is en H6 de minst belangrijke. De P of paragraph tag wordt gebruikt voor de ‘normale’ tekst.

Voor de vertaling van een ontwerp naar HTML is het voor de developers handig om te weten welke stijl bij elke H of P tag hoort. Dus welk font, font-grootte, font dikte, regelafstand, letterafstand etc. Binnen XD, Sketch of Figma kun je alle teksten voorzien van een tekststijl. Dit zorgt tevens voor consistentie binnen je ontwerp en je kunt zo gemakkelijk in 1 keer een tekststijl op alle plekken in je design aanpassen.

Color styles / Shadows

Net als bij tekststijlen kun je kleurstijlen vastleggen binnen je ontwerp. Je kunt dit doen door alle gebruikte kleuren te voorzien van een passende naam. Dit kan de daadwerkelijke naam van de kleur zijn, dus bijvoorbeeld donkerrood of okergeel. Maar ook waar deze kleur voor gebruikt wordt. Dus Heading-kleur, tekstkleur, achtergrond-kleur. Enzovoorts.

Je kunt dit ook doen voor kleurverloopstijlen (gradients) of schaduwen (shadows).

Benieuwd naar onze voorbeeldbestanden? Neem contact met ons op.

Buttons

Op elke website zijn er wel 1 of meer buttons aanwezig. Om de gebruiker te laten zien dat hij of zij op een knop kan klikken is deze voorzien van een ‘hover-state’, een aangepaste weergave in achtergrondkleur, grootte etc. Om deze hover-state door onze Angels te laten bouwen is het gewenst om deze ook op te nemen in het ontwerp. Bekijk onze voorbeeldbestanden om te zien hoe wij dit doen.

 

Assets & images

Alle gebruikte iconen, masks en logo’s dien je aan te leveren als losse optimized SVG’s, voorzien van een duidelijke naam, tezamen gezipt in een map. Dit zorgt ervoor dat onze developers niet hoeven te speuren in jouw ontwerp en dat alle iconen op de juiste manier worden getoond in alle browsers.

Hetzelfde geldt voor de gebruikte afbeeldingen uit je ontwerp. Deze lever je als hi-res (jpg) aan in een gezipte map. Wat is hi-res, wat is groot genoeg? Bedenk dat een afbeelding altijd minimaal 2x zo groot moet zijn als in je ontwerp. Dus als in je ontwerp een afbeelding 600 pixels breed is, zorg dan dat je hem minimaal 1200 pixels breed aanlevert zodat deze ook op hoog-resolutie schermen (en dat zijn er tegenwoordig veel) scherp worden weergegeven.

Aanlevervoorwaarden

Componenten

Je ontwerp bestaat uit maximaal 10 verschillende componenten. Hoe werkt dat? In onze componenten catalogus vind je de 20+ verschillende component-types waarmee je aan de slag kunt. Elke variatie op een component type beschouwen wij als een uniek component. Uiteraard is een gespiegelde variant, waarbij enkel de volgorde van de kolommen wordt aangepast, geen uniek component.

Voorbeeld: een tekst-image component in jouw design bestaat uit een tekstkolom van 3 kolombreedtes en een image van 9 kolombreedtes, met een witte achtergrond en een gecentreerde verticale uitlijning.

Een ander tekst-image component in je ontwerp heeft bijvoorbeeld een 6 / 6 verdeling met een donkere achtergrond en een verticale uitlijning aan de onderkant.

Wij beschouwen dit dan als 2 verschillende componenten en deze worden apart in jouw componenten-bibliotheek opgeslagen. Na oplevering van de website heb je uiteindelijk een ‘bouwdoos’ met 10 kant-en-klare blokken waar je site uit opgebouwd is.

Een Menu Navbar en Footer zijn standaard componenten die niet meetellen in het totaal.

Meer componenten nodig? Geen probleem. Voor 349 euro per component, ben jij de man.

Pagina’s

Je ontwerp kan verder uit maximaal 8 pagina’s bestaan die wij als zodanig voor je kunnen bouwen en klaarzetten. Wil je meer pagina’s? Die kun je die gemakkelijk zelf toevoegen en vullen met de kant-en-klare componenten uit jouw bibliotheek. Je hoeft dan alleen nog maar de tekst en afbeeldingen te wijzigen. Voor extra pagina’s rekenen wij 99,- per pagina.

Standaard wordt de website uitgerust met een ‘berichten’-post-type. Dit is een mogelijkheid om nieuwsberichten te kunnen plaatsen op je website, bijvoorbeeld een blog

Twijfel je of de door jou gewenste functionaliteit door ons gemaakt kan worden. Neem dan even contact met ons op. Een ‘custom’ post-type kunnen we meestal tegen een meerprijs voor je maken.

Menu / Navbar

Het menu in de navbar kan uit maximaal het aantal items bestaan dat in de weergave past. Zijn dit meer items dan redelijkerwijs kan worden weergegeven dan kiezen we automatisch voor een menu dat zichtbaar gemaakt kan worden door middel van een ‘hamburger’-icoon.
Verder kan het menu een maximale diepte van 1 submenu hebben. Om deze subitems zichtbaar te maken kun je gebruik maken van een dropdown-menu. Een navbar-menu kan wel meer dan 1 dropdown-menu’s bevatten.

De website zal worden opgeleverd met 1 user-account met admin-rechten. Je kunt zelf onbeperkt nieuwe gebruikers toevoegen.

Aan te leveren assets / images

  • Gebruikte fonts (als ttf) indien geen adobe of google font
  • Gebruikte icons (pijltjes, toggle-icon, contact-icons etc)
  • Social icons (evt ook hover / diap)
  • Logo’s (liefst als svg, anders als PNG)
  • Image masks (svg)
  • Favicon (png 512 x 512 pixels)