Software Designer con gli sviluppatori

Disegnare il software

Prima di iniziare a disegnare il software è importante conoscere le base della programmazione. E’ necessario vedere le cose da realizzare da nuove prospettive mettendoti spesso nei panni di un programmatore. Devi poter vedere le cose anche dalla prospettiva di chi poi svilupperà la tua idea.
Come Designer del software il tuo compito non è solo quello di creare nuove interfacce usabili ma di saperle chiarire con chi poi dovrà scrivere il codice.
Il tuo impegno, in fase di definizione delle interfacce, è di costruire modelli puliti che chiunque possa capire. In effetti, dovresti anche mantenere una guida di stile che funga da documentazione per ciascun progetto. Questo aiuta te, nell’avere sempre sotto controllo il progetto, e chi scrive il software.

Comprendere lo sviluppo come Software Designer

Esiste un’equilibrio preciso tra l’apprendimento del funzionamento del codice e l’apprendimento del codice. Come Software Designer, dovresti essere soprattutto interessato al primo argomento, studiando i fondamentali dello sviluppo del software.

Durante la progettazione di modelli, dovresti essere in grado di “vedere” come possono essere creati dal punto di vista di uno sviluppatore. Ad esempio nel caso della costruzione di una pagina web, dovresti sapere che un campo di input viene creato utilizzando un tag HTML e disegnato con CSS.

Non è necessario saper scrivere codice

Non è necessario sapere come scrivere questo codice ma è necessario conoscere le basi di come vengono generati gli input del modulo nel mondo HTML.

Se sei perplesso su un determinato argomento, non esitare ad informarti anche googlando su internet o chiedendo a colleghi con più esperienza. Prendi in considerazione la possibilità di studiare alcune di queste idee per aiutarti a parlare in un modo che gli sviluppatori siano in condizione di capirti (parliamo sempre di un progetto web):

  • Come i tag HTML sono nidificati e resi disponibili nel browser;
  • Le basi del CSS e come vengono utilizzati nell’HTML;
  • Come vengono utilizzate le proprietà CSS per creare effetti come le ombre delle caselle;
  • Quali elementi possono essere creati utilizzando CSS puro rispetto a quali elementi richiedono immagini;
  • Come funzionano i breakpoint nei layout di siti Web reattivi.

Elenco degli strumenti utili da condividere con i team di sviluppo

La collaborazione in team è un processo complesso che richiede comunicazione, brainstorming, gestione delle attività e presentazione del progetto. Sebbene sia possibile coordinare queste attività separatamente, può essere molto più semplice fare affidamento su strumenti appositamente creati per questi singoli compiti.

Come possiamo gestire un progetto in modo efficiente?

Di seguito una lista di applicativi utili per condividere in modo attivo idee e attività di un progetto:

  • Google Drawings –  note visive e idee possono essere organizzate contemporaneamente a Disegni di Google. Questo plugin funziona su Chrome ma può anche funzionare offline senza accesso a Internet. Questo può anche legarsi a Google Drive per condividere idee con altri membri del team.
  • Cage App – questa app dashboard approfondita offre tutto per una gestione semplice dei progetti. I team possono condividere file e commenti in ogni fase del processo rimanendo aggiornati con le ultime modifiche.
  • UXPin – Consente la progettazione da bassa a alta fedeltà in un unico strumento, trasforma facilmente i wireframe in prototipi, si integra con Photoshop e Sketch, supporta test di usabilità in-app e consente una facile collaborazione e co-creazione tra team.
  • Slack – i team di grandi dimensioni hanno bisogno di grandi strumenti di comunicazione. Slack è uno di questi strumenti costruito intorno alla comunicazione del 21 ° secolo tra i team creativi. Tutti i registri della chat vengono salvati e ricercabili dalla dashboard Web e dalle app mobili proprietarie.
  • Trello – molti team e singoli considerano Trello il miglior strumento gratuito di gestione delle attività. Imposta programmi, condividi le responsabilità, lascia note e gestisci i file di progetto all’interno della stessa dashboard – gratuitamente!
  • Asana – Asana è uno strumento di gestione del progetto più dettagliato. La loro piattaforma si integra con tutti gli smartphone e include il supporto per più team con più progetti.
  • Conceptboard – Hai mai avuto bisogno di uno scratchboard online per prendere appunti? Conceptboard offre aree di lavoro interattive con elementi trascinabili e commenti multiutente. È ottimo per tutto, dal brainstorming iniziale alle presentazioni finali.
Tutte le risorse che collaborano nel progetto dovrebbero impegnarsi attivamente per chiarire le proprie intenzioni e vedere ogni problema dal punto di vista degli altri.

citazione

Non pensare solo alle tue preferenze

E' ovvio che come designer dovresti creare design piatti e interattivi di alta qualità, ma il metodo di consegna influisce sulla qualità e il rispetto dei tempi dell'implementazione finale.
Quando si tratta di una buona pulizia del design, assicurati di pensare a ciò di cui gli sviluppatori hanno bisogno (non solo le tue preferenze organizzative).

Organizza le risorse

Organizza le singole risorse in cartelle in modo che gli sviluppatori sappiano dove trovare elementi come icone e file di caratteri. Oltre alle risorse basate sul Web, dovresti anche considerare l'aggiunta di codici HEX per i colori e possibilmente il contenuto demo con testo effettivo (no Lorem Ipsum). Come descritto nelle migliori pratiche di progettazione dell'interfaccia utente Web, ecco un piccolo elenco di attività per iniziare:

  1. Includi gli stati al passaggio del mouse e descrivi le animazioni nel modo più chiaro possibile (o verbalmente in una riunione veloce alle spalle o come note apposte sui primi wireframe).
  2. Crea diagrammi e / o storyboard per comunicare dove ogni link dovrebbe condurre.
  3. Etichetta ogni famiglia di caratteri e includi file di terze parti per qualsiasi carattere web. Verifica che tutti i caratteri a pagamento dispongano anche di licenze adeguate per l'uso Web.
  4. La grafica, i riquadri, le icone e le foto devono essere opportunamente denominati e organizzati. È meglio formattare questi file da soli piuttosto che aspettarsi che gli sviluppatori eseguano la gestione delle risorse.
  5. Includi codici HEX per tutti i colori e le sfumature.

Tratta le guide di stile come uno strumento collaborativo

Quando si tratta di implementare dettagli in modo coerente nei progetti, scoprirai che le guide di stile sono uno strumento eccellente per la collaborazione tra designer e sviluppatori.
I progettisti possono vedere come creare modelli di interfaccia utente riutilizzabili (fino ai componenti atomici come i trattamenti dei pulsanti e le etichette), mentre gli sviluppatori hanno un rapido elenco di controllo visivo e possono persino accelerare la loro implementazione se la guida di stile include frammenti di codice riutilizzabili.

Di seguito alcuni dei vantaggi che si hanno nella creazione di una guida di stile:

  1. Coerenza: le guide di stile organizzano un design coerente che riflette un linguaggio visivo comune. Elementi di progettazione visiva e di interazione come tavolozze di colori, famiglie di caratteri e animazioni contribuiscono a un'esperienza utente unificata.
  2. Contesto: idee specifiche possono essere estese a lungo per codificare le scelte progettuali. Le grandi guide di stile non mostreranno solo una pagina basata su tab e una pagina basata su scroll, ma spiegheranno anche il contesto corretto per entrambi. Ad esempio, Jawbone utilizza una pagina a scorrimento per la narrazione e una pagina a schede per la personalizzazione del prodotto.
  3. Collaborazione: un manuale di riferimento per ciascun membro del team assicura che tutti siano sulla stessa pagina. La collaborazione diventa più facile con meno domande ripetute. Le guide di stile semplificano anche la comunicazione creando un vocabolario di progetto (ovvero, definendo quale dovrebbe essere un "widget" o un "modulo").
  4. Standardizzazione del codice - Le guide di stile front-end aiutano a standardizzare HTML, CSS e JavaScript in modo che progettisti e sviluppatori possano verificare se una nuova idea si discosta dagli standard stabiliti. Queste guide forniscono anche vocabolario e mini-template per l'aggiunta di interfacce simili su pagine diverse.

Quando si discute di una guida di stile PDF vs HTML, è necessario considerare il supporto del progetto. Tutti i progetti di interfaccia utente Web / mobile in genere scelgono il percorso HTML perché è molto più facile da aggiornare e si sentono più naturali per gli sviluppatori.

Condividi le tue idee in una guida si stile

Le guide di stile sono utili in ugual modo per designer e non designer.

Gli sviluppatori possono sfruttare appieno le guide perché sono parte della documentazione e quindi una risorsa di progettazione. Le migliori guide di stile coprono solo ciò che è necessario fornendo assistenza a chiunque e in qualunque step del progetto dando supporto al team di sviluppo, al marketing e persino alla gestione nel post rilascio in produzione del software.

Col passare del tempo, i dipendenti in una azienda cambiano posizione o addirittura lavoro. I team incaricati di aggiornare un progetto più vecchio non saranno sempre in grado di chiedere al designer che ha fatto lo startup del progetto i colori o le scelte tipografiche.
Quando è importante dedicare del tempo alla creazione e all'aggiornamento di una guida di stile. Questo riduce drasticamente la quantità di domande e discussioni ripetitive durante e dopo gli sviluppi del software. Naturalmente avere una guida di stile migliora anche la collaborazione tra i team che seguono il progetto non lasciando dubbi su quanto c'è da fare e come va fatto.

Quando si crea una guida di stile, considerare i seguenti argomenti:

  1. Stili logo: dimensioni, colori, posizionamento, spazio bianco e posizionamento corretti del logo. Includi disegni logo alternativi e icone / mascotte di marca, se necessario.
  2. Combinazioni di colori: Elenca tutte le scelte di colore e il modo in cui si collegano al design. Includi codici per fare riferimento a questi colori in RGB, CMYK o Pantone®.
  3. Navigazione: includi tutte le regole relative alla navigazione, come l'uso di caselle di ricerca, barre laterali, collegamenti (se non trattati nella sezione tipografia) e menu e menu a discesa (ad esempio, qual è la gamma appropriata di elementi da includere).
  4. Caratteri: elenca quali caratteri tipografici si adattano al design e in quali posizioni. Prova a includere una tabella dei caratteri per tutte le lettere A-Z, a-z, 0-9 e simboli. I caratteri che richiedono una licenza dovrebbero includere collegamenti alle fonderie di caratteri online.
  5. Grafica: includi qualsiasi grafica correlata al marchio come icone, pulsanti, simboli, icone, sfondi piastrellabili o grafica vettoriale. Se questi elementi sono elencati nella guida di stile, assicurati di fare riferimento a dove si trovano i file PSD / AI effettivi nel database cloud o server. Inoltre, assicurati di descrivere i dettagli dell'esecuzione: ad esempio l'allineamento e la posizione delle immagini, come sovrapporre il testo alle immagini, ecc.
  6. Layout: le guide di stampa e stile Web spesso includono modelli di esempio per griglie, margini e composizioni diverse.
  7. Codice riutilizzabile: il codice non deve essere una singola sezione (puoi allegare gli snippet nelle sezioni pertinenti). Le guide di stile devono includere sia classi CSS che ID negli esempi di frammenti. Idealmente, gli sviluppatori dovrebbero essere in grado di copiare e incollare ciò di cui hanno bisogno.
  8. Identità e personalità (extra): includi dettagli riguardanti la voce e il tono della copia, il personaggio generale del design e qualsiasi altra cosa che descriva l'obiettivo emotivo generale alla base del design.

Potrebbero interessarti anche...