Share
Gratulerer! Du har designet nettstedet ditt, og du føler at det er klart å bli sendt ut til et kodings team. Du kan ha en utvikler i tankene, eller du kan sammenligne de populære PSD> HTML-butikkene som er der ute ... du kan til og med planlegge å koden alt selv. Uansett hvilken løsning du bestemmer deg for, er det noen triks som jeg tror hver designer burde vite når de forbereder sine design for å bli kodet til fullt funksjonelle nettsteder.
Philo Hermans er freelance webutvikler fra Utrecht, Nederland. Han har over 9 års erfaring og arbeider ofte med designere for å gjøre designene deres omgjort til fullt kodede nettsteder eller webapplikasjoner. Philo er også en vellykket plugin-utvikler på CodeCanyon, og har skrevet ofte på Nettuts +. Med den innledningen ut av veien, la oss komme i gang med tipsene!
Teorien bak å skape "piksel perfekt" comps kan angis slik: Til oss kodere, hva vi se er hva du få! De fleste kodere vil ikke tolke dine design for deg. Hvis du overleverer et design-komplement med feilmatchende marginer, polstring, skriftstørrelser, farger, etc., vil de fleste utviklere kodes det akkurat som vi ser det - inkludert feilene! Dette kan bety mye frustrasjon og bortkastet tid (og penger) å gjøre revisjoner; så redd deg selv en hodepine og send ut piksel-perfekt comps hvis du vil ha piksel-perfekt koding.
Før du sender designet til kodingsfasen, ta en time eller to for å se gjennom den med en fin tannkam.
Arbeidsflytsløsningen her er enkel - Før du sender design til kodingsfasen, ta en time eller to for å se gjennom den med en fin tannkam. Du trenger ikke nødvendigvis å dokumentere hele designet (selv om noen utviklere vil kreve dette), men pass på å sørge for at følgende elementer er nøyaktig hvordan du vil at de er avgjørende:
Det er også verdt å ta et øyeblikk å sette noen "retningslinjer" inne i designfilene du overleverer. En enkel måte er å bruke en rutenettmal som 960.gs nettside gir. Retningslinjene i rutenettet sørger for at bredden av elementene er helt presise. Så i stedet for å ha en container som er 957px bred, vil det være den eksakte 960pxen du ment.
Hvis du vil ha noe som ikke er åpenbart, for eksempel en navigasjonsmeny som må skyve ned når du flytter musen til toppen av skjermen. Pass på at du gjør det klart ved å legge til notater. Det er noen måter du kan gjøre dette på (jeg har sett alt fra PowerPoint-dokumenter til utskrifter med håndskrift på den), men min favoritt måte er faktisk ganske enkel: Bruk Merkverktøy i Photoshop (se bildet nedenfor). Notatverktøyet vil automatisk lage notater dukker opp når en utvikler åpner filen, og det er lett å lese raskt hva en designer har ment.
Hvis du ikke bruker Photoshop, er det greit. Mest grafikkprogramvare jeg har funnet (fra Fireworks to Illustrator) har en lignende måte å legge til notater. Hvis det av en eller annen grunn ikke er et alternativ, gjør du notatene dine til en tekstfil som du inneholder med filene du leverer til utvikleren.
Jo mer detaljert utformingen din er når det gjelder samhandling, desto lettere er det for en utvikler å kode den. Sørg for å legge til noen eksempler på hvordan designet vil se ut når det samhandler med. Hvert design kommer til å være annerledes, men de viktige samspillene som ikke bør glemmes, inkluderer:
Årsaken til dette tipset er dette: Hvis du ikke viser en utvikler hvordan du forventer at en bestemt interaksjon ser ut, er det sjansen for at de bruker en ustylt generisk design som kan skje som en sår tommel. Visst, det er noen kodere (som meg!) Som vil gjøre vårt beste for å gjette hva du ville ha ønsket, av hvorfor la noe være så viktig å gjette når det tar deg bare noen få minutter å designe det selv?
Tiden er penger, så hvis du designer en nettside med en fin glidebryter, og du vet nøyaktig hvilket skript som ville være perfekt for det, fortell utvikleren før de begynner å kode det fra grunnen av! Hvis du ikke har et bestemt skript i tankene, er det nok verdt tiden å tilbringe et par minutter på å lete etter hvorvidt en eksisterer eller ikke. Tilpassede skript kan koste mye tid og penger - og det er mye enklere for deg å lage et design med et bestemt skript i tankene enn det er å lage et tilpasset skript fra bunnen av for å matche designen din.
Å bruke forhåndsdefinerte skript er ikke en dårlig ting! Dette kan virke som råd som er ment for å ødelegge din kreativitet, men tenk på det på denne måten: det kan lett ta 20x så mye tid å kode noe fra grunnen i stedet for å bruke et prefabrikat stykke kode. Pre-built skript er vanligvis enkle å tilpasse og re-design, og det er tusenvis av tusen av dem tilgjengelige gjennom et enkelt Google-søk. Envato har selv sin egen markedsplass for premium skript hvis du ikke finner en ledig som fungerer: CodeCanyon!
La oss forestille deg at du er designer på et stort prosjekt. Du tilbringer uker arbeidet over et design og til slutt får godkjenningen av klienten din ... bare for å finne ut en uke senere at designet er nesten umulig å kode, og at det kommer til å koste 10x så mye som kunden hadde budsjettert; Alt fordi du designet hele nettstedet uten forståelse for hva er og er ikke mulig med en viss teknologi (Flash, HTML, etc.).
En av de viktigste tipsene jeg kan gi ut er dette: Det er viktig at alle webdesignere har noen kunnskap om plattformen de designer for. Dette kan være HTML, Flash, PHP, eller til og med en enhet som en telefon eller nettbrett. Hvor mye du lærer er opp til deg, men den grunnleggende forståelsen av hvordan en plattform fungerer, vil spare deg for mye hjertesorg i det lange løp. Altfor ofte får jeg en nydelig design som ikke er praktisk (eller rimelig) å kode fordi den ikke er designet med praktisk funksjonalitet i tankene.
Altfor ofte får jeg en nydelig design som ikke er praktisk (eller rimelig) å kode fordi den ikke er designet med praktisk funksjonalitet i tankene.
Jeg foreslår ikke at du begrenser din kreativitet (omtrent alt kan kodes med nok tid og energi); og jeg foreslår heller ikke at du går ut og blir en kodende guru (du vil sette meg ut av en jobb!) ... Men å ha en grunnleggende kunnskap om teknologien du designer for, vil bidra til å informere dine design med noen grunnleggende tommelfingerregler som vil gjøre kodingen enklere og rimeligere.
For eksempel: Hvis du utformet et nettsted som skal bygges som en statisk nettside, ville det være fornuftig å lære litt om hvordan HTML og CSS fungerer. Å ha til og med bare en grunnleggende forståelse av hvordan HTML og CSS relaterer seg til hverandre, vil være nok til at du kan ta bedre beslutninger når du designer. Jo mer informert en designer handler om teknologien han / hun designer for, desto bedre blir de på design!
* Ja, HTML er ikke den eneste teknologien der ute, så hvis du designer med Flash eller en annen teknologi i tankene, gjør det fokuset på din forskning ... du får det skjønt, arkitekten bør vite hvordan du kan svinge en hammer, selv om han aldri gjør det.Du trenger ikke å gi en 20-siders stilguide for hvert nettsted du designer, men kommunikasjonsprinsipper som kanskje ikke vises i comps kan være veldig viktige for suksessen til et kodingsprosjekt. Hvis designen din har spesielle krav (det vil si: det må oppfylle visse tilgjengelighetsstandarder, eller det må være 100% kompatibelt med IE5.1, etc.), sørg for at du lar koderen kjenne oppe, slik at vi kan planlegge forut for det . Finne ut store krav Etter at designen er kodet, er det en oppskrift på dyre revisjoner, som ikke er like morsomme eller lukrative for kodere som du kanskje forestiller deg! De fleste av oss ville mye heller gå videre til et annet spennende prosjekt enn å bruke måneder med å gjøre revisjoner med en frustrert klient.
Det siste jeg skal nevne er dette: Hvis du følger disse tipsene, vil du ikke bare finne at designene dine blir enklere og rimeligere å kode, men du vil også merke at arbeidet ditt vil bli bedre. Å ta noen få ekstra skritt for å sikre at du designer gir mening i den praktiske verden av webutvikling, kan være forskjellen mellom en god nettside og en eksepsjonell nettside. Jeg håper du likte denne artikkelen!
Accentsconagua