Qual è il modo giusto di lavorare con un graphic designer? [chiuso]

Di recente, abbiamo lavorato con un graphic designer (organizzato dal cliente) per fornire la skin per un'applicazione Django + Bootstrap che avevamo creato. Il progettista ha fornito una serie di immagini statiche del nuovo layout, insieme a un documento che descrive alcuni attributi tecnici (dimensioni dei caratteri, colori, alcune dimensioni ecc.).

Si è rivelato incredibilmente dispendioso in termini di tempo per implementarlo. Sebbene l'intero sito fosse sostanzialmente una prima pagina, una pagina indice e una mezza dozzina di pagine di dettaglio, ho trascorso almeno 5 giorni solo implementando le modifiche CSS e HTML. Quindi uscirò su un arto e chiamerò The Wrong Way .

Il mio approccio di base era:

1. Confronta l'immagine statica e il rendering corrente e nota una differenza.
2. Indovina quale modifica sarebbe necessaria nel CSS / HTML
3. Apporta quel cambiamento
4. Vai al passaggio 1.

Alcuni dei problemi particolari non sono stato quello di capire che il design includeva un passaggio da 8 colonne a 12, alcune immagini fornite nel formato errato (i file .png possono essere visualizzati in modo diverso su diverse combinazioni browser / piattaforma), fastidi che cercavano di annullare lo stile di Bootstrap, il solito wrestling CSS per ottenere un rendering pixel perfetto ecc. E occasionalmente ho dovuto riorganizzare i template HTML per ottenere un certo comportamento.

Qual è la strada giusta?

Nella mia azienda, ci sono alcune persone specializzate in questo lavoro.

Sono designer. E conoscono l'HTML. Possono essere un ponte tra i progettisti e gli ingegneri front-end; che di solito sono. In questo modo, non ci resta che integrare il loro HTML.

Questo è un duro lavoro. C'è un motivo per cui siti come "PSD in HTML in 24 ore" funzionano bene. La soluzione nella nostra azienda è quella di avere persone specializzate nel fare questo. Per noi, lavorare con l'HTML è un gioco da ragazzi.

Non c'è proiettile d'argento.

Non sono sicuro che esista un "modo giusto", ma un modo ragionevolmente efficace di collaborare con un designer è innanzitutto quello di costruire un sistema non progettato che utilizza modelli e consente un facile scambio di tutti i modelli. Quindi, una volta che hai un'interfaccia funzionale ma non stilizzata (o in stile minimale), dai i risultati al designer per lo styling.

Un esempio decente di questo tipo di modello di progettazione sarebbe jQueryUI ( http://jqueryui.com/ )

Innanzitutto, devo ammettere che finora non ho mai lavorato con i front-end web.

Ma penso che potrebbe essere una buona pratica per te e il designer scrivere in prosa di come dovrebbe essere il progetto finale. In questo modo puoi essere più sicuro che sia coerente, perché avrebbe un odore se descrivi tabelle diverse per ogni pagina. La prosa può semplificare l'implementazione, poiché in realtà stai scrivendo codice, che è più vicino all'implementazione rispetto alle immagini.

Cerca anche di focalizzare il progettista sui componenti, non sulle pagine intere. Se ottieni correttamente i componenti di una pagina, comporli su tutta la pagina è un passaggio molto più semplice.

Ho sviluppato HTML / CSS con diversi designer e, come già detto, non esiste un "proiettile d'argento". I designer con cui ho lavorato non sapevano molto (nulla) su HTML / CSS. Alcuni di loro hanno avuto una certa esperienza nel web design e devo dire che quando hanno questa conoscenza, finisce sempre con più facile da sviluppare e "sito Web migliore" specialmente quando è coinvolta la reattività di una UX.

Immagino che ciò che alcune aziende alla ricerca di un sito Web non conoscano / ignorino sia: chiunque può dire che è un graphic designer / webdevelopper / webdesigner / UI designer con conoscenze di base (o addirittura nessuna, sì, l'ho visto) in entrambi. Considerando che "quelli reali" possono fare il possibile e produrre siti Web sostenibili ed efficaci. Cerco di "educare" il cliente e di spiegare che il Webdesigning implica abilità che i grafici "solo stampa" non hanno. Quando funziona, di solito mando il cliente verso designer con cui ho già lavorato e con cui ho un flusso di lavoro comune.

Detto questo, spesso accade per molte ragioni che finisci per costruire siti Web con persone che hanno abilità grafiche e nessuna abilità di web design. In questa situazione, il modo migliore che ho trovato per risparmiare tempo di programmazione e non finire con un layout non sviluppabile è essere coinvolto nel processo di progettazione e comunicare con il progettista e spiegare cosa puoi / non puoi fare e cosa sarebbe più semplice / migliore dal tuo punto di vista.

Anche se questo può essere difficile da organizzare in alcune situazioni, è capitale spiegare al cliente e al progettista che "se pensi che il webdesigning costituisca la nascita di un progetto web finirai per risparmiare tempo, denaro e mal di testa" e che sarai felice di prendere parte al processo di progettazione per risparmiare tempo e mal di testa.

Questo è il worflow che cerco di seguire nella maggior parte dei progetti:

1. Il designer crea standard grafici se non esistono (di solito non mi coinvolgo qui. Cerco solo di suggerire al designer caratteri compatibili con il web come: google fonts)
2. Mokup realizzato dal designer. Sono coinvolto qui e lavoro con il progettista per creare layout conformi al Web (specialmente per quelli reattivi) prima che il cliente lo veda .
3. client convalida mokup
4. Codifico il mokup

Il tempo che trascorro per comunicare e lavorare con il designer viene risparmiato durante il processo di codifica e questo finisce con un codice più semplice, più gestibile e più accurato.

Questo non ti salva da un felice designer che ti chiama venerdì sera con un mokup molto carino che il cliente ha visto e ora vuole con questa frase: "Ehi pall, potresti codificarlo per me, la scadenza è ... ieri! " Quindi l'intera teoria cade a pezzi e se stai cercando lavoro in quel momento, sei buono per un mal di testa per tutto il fine settimana.

Conclusione :

Non penso che questo sia molto diverso da qualsiasi codice relativo al non progetto, il modo migliore per lavorare con altre persone è comunicare con loro.

Come graphic designer diventato sviluppatore web full stack, per me questa è stata finora la parte facile. Trovo che molte volte c'è un divario nella comunicazione tra un team di progettazione UX e gli sviluppatori che implementano il prodotto. Certo, i documenti aiutano, ma il processo può iniziare a sembrare molto più naturale una volta che si verificano delle conversazioni faccia a faccia sulla strategia. Inoltre, so che il tempo è scarso per tutti, ma cerco di essere coinvolto durante la fase di progettazione e layout. Ciò può essere di grande aiuto quando è necessaria la comunicazione tra designer e sviluppatore. Il progetto assume più di uno sforzo di squadra unificato e meno di uno scenario "Beh, ho fatto la mia parte, oltre il muro va". Ho trovato molto utile avere il lavoro di progettazione e sviluppo in parallelo, incoraggiare il team di progettazione a fornire wireframe all'inizio del processo. In questo modo, puoi fare un passaggio di stile che si occupa esclusivamente di layout e posizionamento. Quindi, man mano che i santi diventano più ricchi e completi. Prendi un altro pass CSS per l'aspetto e altri attributi di stile. Almeno questo ti impedisce di doverti concentrare su tutto in una volta.

Sto affrontando un problema simile. ho l'idea che strumenti come Greasemonkey o Tampermonkey possano essere usati a tale scopo. Proprio la scorsa settimana, ho chiesto commenti su questa idea: come esternalizzare l'interfaccia utente di un'applicazione Web dinamica? , ma non ha ottenuto risposte soddisfacenti.

Con questi strumenti puoi inserire CSS, HTML e Javascript in una pagina. Nella mia idea, dai l'URL del sito di lavoro al designer e ti aspetti in cambio gli script Greasemonkey. Teoricamente dovresti essere in grado di integrarli molto rapidamente nel sito esistente. In questo modo, sarà compito del progettista scrivere HTML e CSS e far funzionare il sito. Ciò richiede però molte più capacità di programmazione da parte del progettista.

So che questa idea richiede molta elaborazione. Ma non l'ho ancora provato e non so se qualcun altro lo stia facendo. Potrebbero esserci dei problemi con l'implementazione.