Share
Gefeliciteerd! U hebt uw site ontworpen en u voelt zich klaar om naar een coderingsteam te worden gestuurd. Misschien heb je een ontwikkelaar in gedachten, of vergelijk je misschien de populaire PSD> HTML-winkels die er zijn ... misschien ben je zelfs van plan alles zelf te coderen. Welke oplossing u ook kiest, er zijn een paar trucjes die ik denk dat elke ontwerper moet weten wanneer zij hun ontwerpen voorbereiden om te worden gecodeerd in volledig functionele websites..
Philo Hermans is een freelance webontwikkelaar uit Utrecht, Nederland. Hij heeft meer dan 9 jaar ervaring en werkt vaak samen met ontwerpers om hun ontwerpen om te zetten in volledig gecodeerde websites of webapplicaties. Philo is ook een succesvolle ontwikkelaar van plug-ins op CodeCanyon en heeft regelmatig bij Nettuts + geschreven. Met die introductie uit de weg, laten we aan de slag met de tips!
De theorie achter het maken van "pixel perfecte" comps kan als volgt worden gesteld: voor ons codeerders, wat wij zien is wat u krijgen! De meeste codeurs interpreteren uw ontwerpen niet voor u. Als u een ontwerp comp overhandigt met mis-matchende marges, vulling, lettergroottes, kleuren, etc., zullen de meeste ontwikkelaars het precies coderen zoals wij het zien - inclusief de fouten! Dit kan veel frustratie en verspilde tijd (en geld) betekenen die herzieningen maken; dus bespaar jezelf hoofdpijn en stuur pixel-perfecte comps weg als je pixel-perfecte codering wilt.
Voordat u uw ontwerp naar de codeerfase stuurt, moet u er een uur of twee over doen om het met een fijne kam te bekijken.
De workflow-oplossing is eenvoudig: neem voordat u uw ontwerp naar de coderingsfase verzendt een uur of twee de tijd om het met een fijne kam te bekijken. Je hoeft niet noodzakelijk je hele ontwerp te documenteren (hoewel sommige ontwikkelaars dit nodig zullen hebben), maar zorg ervoor dat de volgende elementen precies zijn zoals je ze wilt: cruciaal:
Het is ook de moeite waard even de tijd te nemen om enkele "richtlijnen" in te stellen in de ontwerpbestanden die u overdraagt. Een eenvoudige manier is om een rastersjabloon te gebruiken zoals de website van 960.gs biedt. De richtlijnen in de rastersjabloon zorgen ervoor dat de breedten van de elementen allemaal precies zijn. Dus in plaats van een container van 957px breed te hebben, is dit exact 960px.
Als u iets wilt dat niet voor de hand ligt, zoals een navigatiemenu dat naar beneden moet schuiven wanneer u uw muis naar de bovenkant van het scherm beweegt. Zorg ervoor dat je het duidelijk maakt door notities toe te voegen. Er zijn een paar manieren waarop je dit kunt doen (ik heb alles van PowerPoint-documenten tot afdrukken met handschrift erop gezien), maar mijn favoriete manier is eigenlijk vrij simpel: gebruik de Note Tool in Photoshop (zie afbeelding hieronder). De notitietool laat automatisch notities verschijnen wanneer een ontwikkelaar het bestand opent, en het is gemakkelijk om snel te lezen wat een ontwerper heeft bedoeld.
Als u geen Photoshop gebruikt, is dat goed. De meeste grafische software die ik heb gevonden (van Fireworks tot Illustrator) hebben een vergelijkbare manier om notities toe te voegen. Als dit om een of andere reden geen optie is - maak dan van uw aantekeningen een tekstbestand dat u opneemt bij de bestanden die u aan de ontwikkelaar levert.
Hoe gedetailleerder uw ontwerp is in termen van interactie, hoe eenvoudiger het is voor een ontwikkelaar om het te coderen. Voeg enkele voorbeelden toe van hoe uw ontwerp eruit zal zien wanneer het wordt gebruikt. Elk ontwerp zal anders zijn, maar de belangrijke interacties die niet mogen vergeten zijn:
De reden achter deze tip is deze: als je een ontwikkelaar niet laat zien hoe je een bepaalde interactie verwacht, is de kans groot dat ze een onstyld generiek ontwerp gebruiken dat zich als een pijnlijke duim kan onderscheiden. Natuurlijk zijn er enkele coders (zoals ik!) Die ons best doen om te raden wat je zou hebben gewild, door te laten waarom iets zo belangrijk is om te giswerken als het maar een paar minuten kost om het zelf te ontwerpen?
Tijd is geld, dus als je een website ontwerpt met een leuk uitziende schuifregelaar en je weet precies welk script daarvoor perfect zou zijn, vertel het dan aan de ontwikkelaar voordat hij het vanaf nul begint te coderen! Als je geen bepaald script in gedachten hebt, is het waarschijnlijk de moeite waard om een paar minuten te besteden aan het zoeken of er al dan niet een bestaat. Aangepaste scripts kunnen veel tijd en geld kosten - en het is veel eenvoudiger voor u om een ontwerp te maken met een bepaald script in gedachten dan om een aangepast script helemaal opnieuw te maken, passend bij uw ontwerp.
Het gebruik van vooraf gemaakte scripts is geen slechte zaak! Dit lijkt misschien een advies dat bedoeld is om je creativiteit te verpletteren, maar denk er wel zo over na: het kan gemakkelijk 20x zoveel tijd kosten om alles vanaf nul te coderen in plaats van een vooraf gemaakt stuk code te gebruiken. Vooraf gemaakte scripts zijn meestal eenvoudig aan te passen en opnieuw te ontwerpen, en er zijn duizenden en duizenden beschikbaar via een eenvoudige Google-zoekopdracht. Envato heeft zelfs zijn eigen marktplaats voor premium-scripts als je geen gratis code kunt vinden die werkt: CodeCanyon!
Laten we ons voorstellen dat je een ontwerper bent van een groot project. Je besteedt weken aan het werken aan een ontwerp en krijgt uiteindelijk de goedkeuring van je klant ... alleen om er een week later achter te komen dat het ontwerp bijna onmogelijk te coderen is en dat het 10x zoveel zal kosten als de klant had begroot; Allemaal omdat je de hele site hebt ontworpen zonder dat je begrijpt wat is en is niet mogelijk met een bepaalde technologie (Flash, HTML, etc.).
Een van de belangrijkste tips die ik kan geven, is dit: het is van vitaal belang dat elke webontwerper dat heeft sommige kennis over het platform waarvoor ze ontwerpen. Dit kan HTML, Flash, PHP of zelfs een apparaat zoals een telefoon of tablet zijn. Hoeveel je leert is aan jou, maar het basisbegrip van hoe een platform werkt, zal je op de lange termijn veel hartzeer besparen. Veel te vaak krijg ik een prachtig ontwerp dat niet praktisch (of betaalbaar) is om te coderen, omdat het niet is ontworpen met praktisch oogpunt.
Veel te vaak krijg ik een prachtig ontwerp dat niet praktisch (of betaalbaar) is om te coderen, omdat het niet is ontworpen met praktisch oogpunt.
Ik suggereer niet dat je je creativiteit beperkt (zo ongeveer alles kan gecodeerd worden met voldoende tijd en energie); en ik suggereer ook niet dat je uitgaat en codeergoeroe wordt (je zou me uit een baan moeten zetten!) ... Maar zelfs een basiskennis hebben van de technologie waar je voor ontwerpt, zullen je ontwerpen helpen met wat basis vuistregels die het coderen ervan eenvoudiger en betaalbaarder maken.
Bijvoorbeeld: als u een site hebt ontworpen die moet worden gebouwd als een statische webpagina, is het logisch om een beetje te leren over hoe HTML en CSS werken. Als je zelfs maar een basiskennis hebt van hoe HTML en CSS zich tot elkaar verhouden, ben je voldoende om betere beslissingen te nemen tijdens het ontwerpen. Hoe beter geïnformeerd een ontwerper is over de technologie waarvoor hij / zij ontwerpt, des te beter zullen ze worden bij het ontwerpen!
* Ja, HTML is niet de enige technologie die er is, dus als je ontwerpt met Flash of een andere technologie in gedachten, zorg dan dat de focus van je onderzoek ... je begrijpt het wel, de architect zou moeten weten hoe je een hamer moet slingeren zelfs als hij het nooit doet.U hoeft geen stijlgids voor 20 pagina's te geven voor elke website die u ontwerpt, maar het communiceren van principes die mogelijk niet in comps verschijnen, kan erg belangrijk zijn voor het succes van elk codeerproject. Als uw ontwerp speciale vereisten heeft (dat wil zeggen: het moet aan bepaalde toegankelijkheidsnormen voldoen, of het moet 100% compatibel zijn met IE5.1, enz.), Zorg ervoor dat u de codeur van tevoren op de hoogte brengt, zodat we er voor kunnen plannen . Belangrijke vereisten vinden NADAT het ontwerp gecodeerd is, is het een recept voor dure herzieningen, die lang niet zo leuk of lucratief zijn voor codeerders als je je misschien zou voorstellen! De meesten van ons gaan liever naar een ander opwindend project dan maandenlang revisies te doen met een gefrustreerde klant.
Het laatste dat ik noem is dit: als je deze tips volgt, merk je niet alleen dat je ontwerpen eenvoudiger en betaalbaarder worden om te coderen, je zult waarschijnlijk ook merken dat je werk hierdoor zal verbeteren. Een paar extra stappen nemen om ervoor te zorgen dat uw ontwerpen logisch zijn in de praktische wereld van webontwikkeling, kan het verschil zijn tussen een goede website en een uitzonderlijke website. Ik hoop dat je dit artikel leuk vond!
Accentsconagua