Bij het Pixel Perfect laten omzetten van een grafisch ontwerp naar een responsive WordPress website
Om inzichtelijk te maken hoe een heel traject van het ‘Pixel perfect’ omzetten van een grafisch ontwerp naar een snelle en responsive WordPress website gaat hebben we de 10 stappen uitgeschreven. Van Stap 1: Oriënterend gesprek met de klant tot Stap 10: het aanpassen van de van de geproduceerde website in de periode na de oplevering.
Ongeveer 90% van alle websites die we maken zijn gemaakt op basis van een grafisch ontwerp. Wij werken voor het maken van websites dan dus ook in de meeste gevallen samen met grafisch ontwerpers. Wij weten wat er belangrijk is in een ontwerp en weten dat als wij ons niet aan het ontwerp houden een ontwerp zijn kracht verliest.
Een lijn van 2 pixels dik in uw ontwerp moet 2 pixels dik worden op de website en niet 1 of 3 pixels. Fontgroottes, kleuren, line-height, gebruikte font-gewichten, horizontale en verticale ruimtes tussen onderdelen van de website: alles moet precies zo worden als u in uw ontwerp heeft ontworpen.
Hieronder kunt u de 10 stappen zien die in de meeste gevallen worden doorlopen in het proces van het omzetten van een grafisch ontwerp naar een Pixel Perfect responsive WordPress website. Afwijken van deze stappen is voor ons geen enkel probleem en wij passen ons graag aan naar de manier van werken die uw voorkeur heeft. Ook wat betreft de facturering mag u beslissen hoe die gaat lopen, via uw bedrijf of rechtstreeks naar de klant? Allemaal prima wat ons betreft, u mag het zeggen.
Hieronder staat een heel lang verhaal, daar zijn we ons van bewust, maar op deze pagina staat alles wat u zou kunnen willen weten over een samenwerking met BrandNewFresh. Sterker nog wij vullen deze pagina regelmatig aan n.a.v. vragen en opmerkingen die we krijgen van onze klanten. Neem gerust contact met ons op voor meer informatie of als u geen zin heeft om dit hele verhaal hieronder te lezen 😉
- Stap 1: Oriënterend gesprek met de klant
- Stap 2: Het maken van het ontwerp van de website
- Stap 3: Het ontwerp van de website sturen naar BrandNewFresh
- Stap 4: Presenteren van het ontwerp aan uw klant
- Stap 5: Aanleveren van het ontwerp aan BrandNewFresh
- Stap 6: Wij gaan de website bouwen
- Stap 7: Puntjes op de i
- Stap 8: Opleveren van de nieuwe website
- Stap 9: Website staat online en wat nu?
- Stap 10: Een website is geen statisch ding en is eigenlijk nooit af
Samenwerken zonder risico
We begrijpen dat het voor u een hele stap kan zijn om met ons in zee te gaan. Daarom geven we iedere nieuwe klant de garantie dat mocht het eindresultaat van het Pixel Perfect omzetten van uw grafisch ontwerp naar een snelle responsive WordPress website niet aan uw wensen voldoen, wij u geen factuur sturen voor het geleverde werk. Overigens geven wij deze garantie al 5 jaar en nog nooit is er door een nieuwe klant beroep gedaan op deze tevredenheidsgarantie.
Hebt u vragen over onze tevredenheidsgarantie? Neem dan gerust contact met ons op.
T: +31 (0) 10 3400 355 (algemeen) | M: +31 (0) 6 398 56 209 (quin) | E: wijzijn@brandnewfresh.com
Stap 1: Oriënterend gesprek met de klant
U heeft een gesprek met uw klant over het produceren van een website. Heeft u vragen of dingen wel of niet mogelijk zijn of heeft u een snelle kosten indicatie nodig n.a.v. het gesprek met u klant dan kunt u al voor stap 2 ‘Het ontwerpen van de website’ contact met ons opnemen.
Zo kunnen we bespreken of eventuele wensen die de klant heeft uitgesproken mogelijk zijn te maken op een website. Ook kunnen we eventuele (goedkopere) alternatieven aandragen om aan de wensen van de klant te gemoet te komen.
Stap 2: Het maken van het ontwerp van de website
Bij het maken van een ontwerp moet u met 3 dingen rekening houden.
- De Bootstrap 12 kolommen indeling
- Google fonts
- Het niet doorbreken van horizontale rijen/lijnen.
1. Bootstap 12 kolommen indeling
Om een website responsive te maken maken wij gebruik van Bootstrap. Het Bootstrap systeem verdeeld de website in 12 (verticale) kolommen. Bijna 99% van de websites die responsive zijn, maakt op een of andere manier gebruik van een kolommen indeling. Daar moet dus rekening mee gehouden worden in het ontwerp van de nieuwe website.
Op deze pagina hebben wij een uitleg over Bootstrap staan en zijn er een aantal ‘live’ voorbeelden te zien van webpagina’s die met Bootstrap responsive zijn gemaakt. Hier kan u zien wat er gebeurd als u uw browser scherm smaller en breder maakt en welke invloed dat heeft op de indeling van een website.
Bovendien zijn hier templates te downloaden van het Bootstrap grid als .PDF, .EPS, .INDD en .PSD bestand zodat u een goede start kan maken met uw ontwerp.
2. Fonts
Wij adviseren om Google fonts te gebruiken. Google Fonts zijn gratis en kunnen zeer eenvoudig aan de nieuwe website worden toegevoegd. Ook zijn deze fonts gratis te downloaden en te gebruiken in Photoshop, InDesign of Illustrator.
Er zijn meer dan 1000 Google fonts en bovendien zijn er een heleboel Google fonts die heel erg op populaire lettertypes als Helvetica, Futura of Avenir lijken mocht de huisstijl van uw klant dit voorschrijven.
Het gebruikt van niet-Google fonts kan zeer kostbaar zijn en bovendien zijn sommige niet-Google fonts zeer moeilijk aan de website toe te voegen, werken niet altijd even goed of vertragen de laadtijd van de website.
3. Niet doorbreken van horizontale rijen/lijnen
Website werken buiten de 12 verticale kolommen in z.g.n. horizontale ‘rows’ / rijen. Het is zonder veel kunst en vliegwerk niet heel eenvoudig om een afbeelding of tekst te plaatsen die in 2 of meer horizontale rows/rijen moet komen te staan.
Die afbeelding of teksten moeten dan met een ‘negatieve margin-top’ worden geplaatst en zullen anders getoond worden als de website op een andere schermbreedte moet worden getoond. Hierdoor moet voor alle 5 de Bootstrap viewports worden ingesteld hoe zo’n afbeelding of tekst zich in die desbetreffende viewport moet worden getoond.
Daarnaast is het bijna onmogelijk om dit zo in te stellen dat in elke browser op elke display van mobiele telefoon, tablet, laptop, desktop en zelfs Gameconsoles of televisies goed wordt getoond.
T: +31 (0) 10 3400 355 (algemeen) | M: +31 (0) 6 398 56 209 (quin) | E: wijzijn@brandnewfresh.com
Stap 3: Het ontwerp van de website sturen naar BrandNewFresh
Als u uw ontwerp heeft afgerond is het handig om dit ontwerp, voor u het naar uw klant stuurt, naar ons te sturen. Als wij uw ontwerp ontvangen dan kijken we het helemaal na. Wij adviseren u dan meteen indien onderdelen in het ontwerp misschien anders, beter of goedkoper kunnen worden opgelost.
U krijgt dan meteen een offerte voor het ‘pixel perfect’ omzetten van uw ontwerp naar een responsive WordPress website.
Stap 4: Presenteren van het ontwerp aan uw klant
Nu kunt u uw ontwerp presenteren aan uw klant. Mocht uw klant nog aanmerkingen hebben op het ontwerp en u moet u nog aanpassingen maken in het ontwerp? Dan kunnen stap 3 en 4 weer herhaald worden.
Stap 5: Aanleveren van het ontwerp aan BrandNewFresh
Is het ontwerp door uw klant helemaal goedgekeurd dan kunt u het ontwerp bij ons aanleveren.
Dat mag van ons in het formaat dat voor u het makkelijks is. Of u nu in InDesign, PDF, (open)Photoshop bestand of Illustrator bestand aanlevert, het maakt voor ons niet uit.
Graag ontvangen we een ontwerp voor de desktop website en een ontwerp voor de mobiele versie van de website.
Fonts
Graag ontvangen we bij het ontwerp een lijstje van de (Google) Fonts die gebruikt zijn in het ontwerp. Graag weten we voor de bouw ook graag de fontgrootte, het font-gewicht en de regelhoogte/regelafstand van de bodytext van de website.
Kleuren
Graag ontvangen we ook een overzicht van de gebruikte kleuren in het ontwerp in RGB en hexadecimale waardes.
T: +31 (0) 10 3400 355 (algemeen) | M: +31 (0) 6 398 56 209 (quin) | E: wijzijn@brandnewfresh.com
Stap 6: Wij gaan de website bouwen
Wij bouwen een nieuwe website meestal op onze eigen ontwikkel-server. U krijgt als wij de homepage met de header/menu en de footer klaar hebben de link naar de map op onze ontwikkel-server waar we de nieuwe website bouwen. U kunt dan de bouw van de website stap voor stap volgen.
Wij maken overigens bij de bouw van een website GEEN gebruik van een gekocht thema maar van een leeg ‘underscores’ thema dat wij helemaal van af de grond af aan opbouwen met de aanwijzingen uit ontwerp.
Doordat we dit ‘underscores’ thema als basis gebruiken worden er geen onnodige plugins en / of code aan de website toegevoegd en bestaat de nieuwe website van uw klant alleen uit de voor die website essentiële onderdelen en code. Veel van de website die wij hebben geproduceerd hebben niet meer dan 3 plugins nodig om te functioneren.
Als de nieuwe website niet meer dan uit 10 pagina’s bestaat en wij alles wat wij nodig hebben voor het maken van de website in een keer hebben aangeleverd gekregen dan hoeft de bouw over het algemeen niet langer dan 5 werkdagen te duren.
Stap 7: Puntjes op de i
Als wij helemaal klaar zijn met produceren van de website dan melden wij dat meteen en dan kunt u heel de website nalopen. Eventuele onderdelen die niet helemaal 100% naar uw zin zijn vertaald door ons naar code kunt u dan aan ons doorgeven. Wij passen die onderdelen dan in de meeste gevallen binnen 24 uur aan. Eventuele aanpassingen t.o.v. het door u aangeleverde ontwerp voor de website worden ook door ons aangepast. Alleen als dit heel erg veel extra tijd kost dan melden we dat en dat wordt dan gerekend als extra werk boven de offerte.
Stap 8: Opleveren van de nieuwe website
Bent u helemaal 100% tevreden over de nieuwe website dan kunnen we de website gaan verhuizen naar zijn uiteindelijke server. Wij doen zelf geen webhosting maar helpen u graag met het vinden van de juiste hostingpartij voor uw website.
Stap 9: Website staat online en wat nu?
Een belangrijk onderdeel om te zorgen dat de nieuwe website veel bezoekers krijgt is het optimaliseren voor Google van de website (SEO). Ook kan het mogelijk zijn dat uw klant online wilt adverteren (SEA). Wij hebben in ons netwerk verschillende partners die uw klant kunnen helpen met SEO of SEA. Wij brengen, indien gewenst, uw klant graag in contact met een van deze partijen.
Stap 10: Een website is geen statisch ding en is eigenlijk nooit af
Mocht uw klant na het door ons opleveren van de website aanpassingen op de website willen laten maken dan mag u als de ontwerper beslissen hoe u wilt hoe dat contact gaat verlopen. Of u nu tussen uw klant en ons wilt blijven zitten of de klant rechtstreeks met ons wilt laten communiceren, het maakt ons niet uit. Wij willen u en uw klant helpen op de manier die voor jullie het beste werkt, wij passen ons aan naar jullie wensen.
T: +31 (0) 10 3400 355 (algemeen) | M: +31 (0) 6 398 56 209 (quin) | E: wijzijn@brandnewfresh.com