Come migliorare il flusso di lavoro di designer e sviluppatori?

• Assicurati che il designer usi caratteri sicuri per il web. Molti designer provengono da uno sfondo di design di stampa e / o rendering e sono abituati a scegliere tra qualsiasi carattere che riescono a trovare. Il Web è diverso.
• Il design dovrebbe indicare chiaramente il tipo di carattere, le dimensioni, il peso e le decorazioni su ciascun elemento di testo.
• Siediti con il tuo designer e mostra e spiega cosa succede quando il testo trabocca i limiti del suo contenitore e quanto è importante identificare quali contenitori di testo devono essere in grado di espandersi nella progettazione.
• Riutilizzare elementi di design. Link, pulsanti, pannelli, menu - cosa hai. È compito dei progettisti assicurarsi che tutte le nuove pagine o componenti siano conformi al design esistente e utilizzino gli stessi componenti grafici.
• Contrassegna le distanze e i paddings tra i componenti in pixel. Un design è molto simile a quello di un architetto che disegna una casa. Se vuoi pixel perfetti, il design deve indicare la distanza dei pixel e le dimensioni.

Il designer potrebbe inserire il carattere / colore / altezza della riga nella copia dell'oggetto nel disegno. Ad esempio:

Tahoma Bold 20px / 26px # 000

La soluzione è una guida al design o allo stile e se la tua squadra non è pronta, dovrai risolverla finché non lo sarai.

Suggerirei di redigere un documento standard di progettazione e di rivederlo iterativamente in ogni periodo di tempo.

Se sai che ogni pulsante avrà un padding di 10, non devi controllare con il designer ogni volta che implementi un pulsante.

Anche se la prima bozza è sbagliata, almeno è un inizio ed è più facile coordinare i cross team con un singolo file. Questo è il motivo per cui i programmatori usano le interfacce e il progettista può modificarlo e modificarlo nel tempo. Spetta a te mantenere il tuo css il più pulito possibile, quindi fare questi cambiamenti nel tempo non è un compito terribile.

Inoltre, se / quando il progettista lascia il team, una guida di stile solida può essere utilizzata e gestita dai futuri designer.

Sospiro, abbiamo problemi molto simili. I miei sviluppatori a volte trascorrono 3 volte il tempo del progettista su cose semplici.

Innanzitutto i progettisti e i programmatori si siedono accanto a vicenda per mezza giornata o durante le prime fasi di un nuovo progetto / progetto. Trovo che ciò sia stato di grande aiuto e in gran parte hanno risolto i loro problemi insieme. I progettisti, una volta capito quanto lavoro è stato fatto per rendere tutto 'perfetto', erano estremamente disponibili a compiere ulteriori sforzi iniziali. Devi renderli consapevoli della difficoltà di uno sviluppatore di ottenere il loro PSD / PNG così vicino in html / css.

In secondo luogo ci sono alcuni buoni strumenti per consentire ai progettisti (non codificatori) di visualizzare / vedere in anteprima gli stili CSS in tempo reale. Questo è un ottimo modo per loro di vedere come sta andando a vedere qualcosa in un browser ed è così che puoi ottenere che i tuoi progettisti costruiscano facilmente "guide di stile" anche quando non sono loro stessi esperti di css.

link

link

Seguo la guida allo stile. Una cosa però non è chiara se il progetto viene spedito come png appiattito, quindi come vengono derivate le risorse non cedibili? Idealmente questi sarebbero forniti dal progettista al momento della consegna iniziale, piuttosto che i tuoi sviluppatori passino il tempo a tagliarli fuori dalla singola immagine che hanno.

Potresti anche guadagnare dal fatto di avere i tuoi sviluppatori nella stanza mentre il tuo designer inizia con alcuni schizzi grezzi e composizioni iniziali. Ciò consente agli sviluppatori di accelerare rapidamente e di dar loro voce per presentare i limiti del design.

Poche cose che puoi fare per minimizzare il tuo flusso di lavoro

• usa livereload.com: aggiorna automaticamente la tua pagina web al salvataggio, aggiorna la tua modifica css senza aggiornare e compilare script per sass, less, coffee ....

• inizia con un framework, quindi non devi preoccuparti di float, positiong, dimensioni ... ho appena scritto il mio terzo framework link

• oppure puoi usare qualcosa come link , il loro è professionale.

ma il motivo del mio framework è che l'ho suddiviso in pezzi davvero piccoli, più piccoli delle basi. che può essere facilmente gestito e sostituito tra ogni progetto. devi solo gestire il tuo config.css e fare un minifoto alla fine per comprimerlo in un file css (io uso juicer merge app.css, che impiega 3 secondi per comprimere qualcosa come 23 file.)

ad esempio, dovresti sederti con il designer e unificare le dimensioni della griglia con loro, se è necessario un pixel perfetto, in questo modo progettano all'interno della tua dimensione della griglia per rendere trasparente il tuo flusso di lavoro.

Per pixel perfect basta fare uno screenshot del tuo sito con una sovrapposizione dell'80% di trasparenza su psd, puoi usare gimp per confrontare il file psd, o semplicemente salvare come jpg e confrontare lo screenshot con

Perché il tuo team di progettazione non può consegnare le cose nel mezzo corretto? Stai creando un sito Web e non una galleria fotografica. Utilizziamo HTML e CSS e li facciamo lavorare direttamente nel progetto con gli sviluppatori.

Nei casi in cui questo non è pratico, abbiamo bisogno di una guida di stile da parte dei progettisti che mostri cose come font, dimensioni, margini, padding e simili. Se lo spazio bianco è importante per loro, possono almeno dirti quanto è grande.