Aanleverspecificaties voor eigen ontwerp

Bestandsformaat

Wij ontvangen het liefst open bestanden zodat wij zelf de mogelijkheid hebben om hier de benodigdheden zoals kleuren, icons en afmetingen uit te halen. Daardoor kunnen wij het ontwerp op de pixel nauwkeurig bouwen.

Onder open bestanden verstaan wij:

  • llustrator bestand (.ai)
  • Photoshop bestand (.psd)
  • XD bestand (.xd)

Onze voorkeur gaat uit naar een XD bestand omdat dit bestand al grotendeels is geoptimaliseerd voor web. Hieruit kunnen wij ook makkelijk de benodigdheden halen.
Daarnaast is het belangrijk dat het bestand ook de volgende specificaties bevat:

  • In lagen met duidelijke naamgeving
  • Grootte in pixels instellen, ook lettertypen
  • Kleurgebruik in RGB
  • Minimale resolutie van foto’s is 72 dpi
  • Liefst in vectoren uitwerken

Graag alle gebruikte foto's, logo's en illustraties separaat bij het ontwerp aanleveren. Dit kunnen PNG’s, JPG’s of SVG’s zijn. Is dit groter dan 10 MB? Dan kun je gebruik maken van WeTransfer

Lettertype

Gebruik bij voorkeur:

Deze fonts zijn makkelijker in te sluiten in een stylesheet. Google Fonts breidt zich ook regelmatig uit. Er is een grote keuze uit ruim 800 font families.

Grid ontwerp

Het ontwerp van de website moet in een grid staan met vaste en responsive breedtes op basis van het Bootstrap grid. Dit grid zorgt ervoor dat op alle schermformaten het ontwerp netjes getoond zal worden en dat er geen elementen buiten het beeld zullen vallen.

Het Bootstrap grid werkt met 6 afmetingen en zijn verdeeld in de volgende benamingen:

  • XS < 576px
  • SM ≥ 576px
  • MD ≥ 768px
  • LG ≥ 992px
  • XL ≥ 1200px
  • XXL ≥ 1400px

Een voorbeeld van hoe het grid werkt en is opgebouwd is te vinden op demo.buro26.nl/.

Opbouw ontwerp

Het ontwerp moet vertaald gaan worden naar een goed werkende website. Het is voor de technische ontwikkeling van belang dat de
volgende elementen bekend zijn:

  • H1, H2, H3 en H4 titels
  • Mouse-overs aangeven van alle links
  • Actieve menu-item afwijkend van mouse-over
  • Gelijke marges waar nodig
  • Pixel perfect

Aan alle eisen voldaan?

Dan ontvangen we graag je ontwerp zodat we deze pixel perfect kunnen bouwen.