Share
Congratulazioni! Hai progettato il tuo sito e ti senti come se fosse pronto per essere inviato a un team di programmazione. Potresti avere uno sviluppatore in mente, o potresti confrontare i popolari negozi di PSD> HTML che sono là fuori ... potresti perfino programmare di codificarlo tutto da solo. Non importa quale soluzione decida, ci sono alcuni trucchi che penso che ogni designer dovrebbe sapere quando stanno preparando i loro progetti per essere codificati in siti web completamente funzionali.
Philo Hermans è uno sviluppatore web freelance di Utrecht, Paesi Bassi. Ha oltre 9 anni di esperienza e lavora spesso con i designer per trasformare i loro progetti trasformati in siti Web o applicazioni web completamente codificati. Philo è anche uno sviluppatore di plugin di successo su CodeCanyon e ha scritto spesso su Nettuts +. Con questa introduzione fuori mano, cominciamo con i suggerimenti!
La teoria alla base della creazione di composizioni "pixel perfect" può essere affermata in questo modo: Per noi programmatori, cosa noi vedere è cosa tu ottenere! La maggior parte dei programmatori non interpreterà i tuoi progetti per te. Se consegni una composizione di design con margini di corrispondenza errata, padding, dimensioni, colori, ecc., La maggior parte degli sviluppatori la codificherà esattamente come la vediamo noi - inclusi gli errori! Questo può significare un sacco di frustrazione e sprechi di tempo (e denaro) che fanno le revisioni; quindi risparmia un mal di testa e invia comps pixel-perfetti se vuoi la codifica pixel-perfect.
Prima di inviare il tuo progetto alla fase di codifica, prendi un'ora o due per esaminarlo con un pettine a denti fini.
La soluzione per il flusso di lavoro qui è semplice: prima di inviare il progetto alla fase di codifica, prendi un'ora o due per esaminarlo con un pettine a denti fini. Non è necessario documentare l'intero progetto (anche se alcuni sviluppatori lo richiedono), ma avendo cura di assicurarsi che i seguenti elementi siano esattamente come li si desidera è fondamentale:
Vale anche la pena prendere un momento per impostare alcune "linee guida" all'interno dei file di progettazione che si consegnano. Un modo semplice è utilizzare un modello di griglia come il sito Web 960.gs. Le linee guida nel modello di griglia assicurano che le larghezze degli elementi siano tutte precise. Quindi, invece di avere un contenitore largo 957 px, sarà esattamente il 960px che intendevi.
Se vuoi qualcosa che non è ovvio, ad esempio un menu di navigazione che deve scorrere verso il basso quando si sposta il mouse nella parte superiore dello schermo. Assicurati di renderlo chiaro aggiungendo note. Ci sono alcuni modi per farlo (ho visto tutto dai documenti PowerPoint alle stampe con la scrittura a mano su di esso), ma il mio modo preferito è in realtà piuttosto semplice: usa il Strumento di nota in Photoshop (vedi immagine sotto). Lo strumento delle note mostrerà automaticamente le note quando uno sviluppatore apre il file, ed è facile leggere rapidamente ciò che un designer ha voluto.
Se non stai usando Photoshop, va bene. La maggior parte dei software di grafica che ho trovato (da Fireworks a Illustrator) hanno un modo simile di aggiungere note. Se per qualche motivo questa non è un'opzione, basta inserire le note in un file di testo che includi con i file consegnati allo sviluppatore.
Più il tuo progetto è dettagliato in termini di interazione, più è facile per uno sviluppatore codificarlo. Assicurati di aggiungere alcuni esempi di come sarà il tuo design quando interagirà. Ogni design sarà diverso, ma le interazioni importanti che non dovrebbero essere dimenticate includono:
Il motivo alla base di questo suggerimento è questo: se non mostri a uno sviluppatore come ti aspetti una determinata interazione, è probabile che utilizzeranno un design generico senza stile, che potrebbe risaltare come un pollice dolente. Certo, ci sono alcuni programmatori (come me!) Che faranno del nostro meglio per indovinare cosa vorresti, perché lasciare qualcosa di così importante da indovinare quando ti ci vogliono solo pochi minuti per progettarlo da solo?
Il tempo è denaro, quindi se progetti un sito Web con un dispositivo di scorrimento dall'aspetto gradevole e sai esattamente quale script sarebbe perfetto, informalo prima che inizi a codificarlo da zero! Se non hai in mente uno script particolare, probabilmente vale la pena dedicare un paio di minuti a cercare se esiste uno. Gli script personalizzati possono costare molto tempo e denaro - ed è molto più facile per te creare un design con uno script particolare in mente piuttosto che creare uno script personalizzato da zero per abbinare il tuo design.
Usare script pre-fatti non è una brutta cosa! Questo potrebbe sembrare un consiglio per schiacciare la tua creatività, ma pensa in questo modo: può facilmente richiedere 20 volte tanto tempo per codificare qualcosa da zero piuttosto che usare un pezzo di codice pre-creato. Gli script predefiniti sono in genere facili da adattare e riprogettare e sono disponibili migliaia e migliaia di loro tramite una semplice ricerca su Google. Envato ha persino il proprio marketplace per script premium se non riesci a trovarne uno gratuito che funzioni: CodeCanyon!
Immaginiamo che tu sia un designer per un grande progetto. Passi settimane a lavorare su un progetto e finalmente ottieni l'approvazione del tuo cliente ... solo per scoprire una settimana dopo che il design è quasi impossibile da codificare e che costerà 10 volte tanto quanto il cliente aveva preventivato; Tutto perché hai progettato l'intero sito senza capire cosa è e non è possibile con una certa tecnologia (Flash, HTML, ecc.).
Uno dei suggerimenti più importanti che posso dare è questo: è fondamentale che ogni web designer abbia alcuni conoscenza della piattaforma per la quale stanno progettando. Questo potrebbe essere HTML, Flash, PHP o persino un dispositivo come un telefono o un tablet. Quanto stai imparando dipende da te, ma la comprensione di base di come funziona una piattaforma ti farà risparmiare un sacco di dolore nel lungo periodo. Troppo spesso mi viene regalato un design sfarzoso che non è pratico (o economico) da codificare perché non è stato progettato pensando alla praticità.
Troppo spesso mi viene regalato un design sfarzoso che non è pratico (o economico) da codificare perché non è stato progettato pensando alla praticità.
Non sto suggerendo di limitare la tua creatività (qualsiasi cosa può essere codificata con abbastanza tempo ed energia); e inoltre non sto suggerendo che tu esca e diventi un guru del codice (mi faresti disoccupare!) ... Ma avere anche una conoscenza di base della tecnologia che stai progettando aiuterà a informare i tuoi disegni con alcuni regole di base che renderanno la codifica più facile e più economica.
Ad esempio: se hai progettato un sito per essere costruito come una pagina Web statica, avrebbe senso imparare un po 'su come funzionano HTML e CSS. Avere anche solo una conoscenza di base di come HTML e CSS si relazionano tra loro sarà sufficiente per prendere decisioni migliori quando si progetta. Più un progettista è informato sulla tecnologia per cui sta progettando, migliore sarà il design!
* Sì, l'HTML non è l'unica tecnologia là fuori, quindi se stai progettando con Flash o un'altra tecnologia in mente, fai che il focus della tua ricerca ... lo capisca, l'architetto dovrebbe sapere come far oscillare un martello, anche se non lo fa mai.Non è necessario fornire una guida in stile di 20 pagine per ogni sito Web che si progetta, ma comunicare principi che potrebbero non essere visualizzati in comps può essere davvero importante per il successo di qualsiasi progetto di codifica. Se il tuo progetto ha requisiti speciali (es .: deve essere conforme a certi standard di accessibilità, o deve essere compatibile al 100% con IE5.1, ecc.), Assicurati di far sapere al programmatore in anticipo in modo che possiamo pianificare in anticipo per esso . Individuazione dei principali requisiti DOPO che il design è codificato è una ricetta per revisioni costose, che non sono altrettanto divertenti o redditizie per i programmatori come si potrebbe immaginare! La maggior parte di noi preferirebbe passare ad un altro progetto eccitante piuttosto che passare mesi a fare revisioni con un cliente frustrato.
L'ultima cosa che menzionerò è questa: se segui questi suggerimenti, non solo scoprirai che i tuoi disegni diventano più facili e più convenienti per il codice, ma probabilmente noterai anche che il tuo lavoro migliorerà di conseguenza. Fare qualche passo in più per assicurarti di avere un design sensato nel mondo pratico dello sviluppo web può essere la differenza tra un buon sito Web e un sito web eccezionale. Spero che questo articolo ti sia piaciuto!
Accentsconagua