Concetti di sviluppo Web che tutti i web designer dovrebbero comprendere
C'è molto da dire su il divario tra designer e sviluppatori. Certo, ci sono molti ibridi designer / sviluppatori che possono capire entrambi i lati della medaglia, ma sono pochi e lontani tra loro.
I progetti creativi prosperano comunicazione corretta. Tuttavia questo può essere difficile quando i progettisti e gli sviluppatori non sono sicuri su come parlare l'un l'altro. Non penso che i designer debbano sapere come scrivere JavaScript corretto, né gli sviluppatori dovrebbero padroneggiare la selezione tipografica. Ma ce ne sono alcuni argomenti fondamentali che penso vada in entrambe le direzioni.
I seguenti argomenti sono la mia personale interpretazione idee vitali di sviluppo web che tutti i designer dovrebbero capire. Come progettista / sviluppatore, so quanto possa essere confuso studiare entrambe le aree. Ma vale sempre la pena di imparare perché una chiara comprensione migliora la comunicazione e rende un designer molto più prezioso per un team creativo.
Comportamento del codice di frontend
I web designer sono spesso pensati per avere abilità frontend con i loro talenti di design. Questo è un argomento molto dibattuto, soprattutto perché c'è nessuna risposta corretta.
I progettisti dovrebbero fare quello che loro stanno bene con. Se questo significa solo fare un lavoro di visual design, allora così sia. Tuttavia una breve comprensione delle tecnologie di frontend può fare lo stesso progettista più intuitivo quando si creano risorse per gli sviluppatori.
Credo che ogni designer dovrebbe almeno capire il tre linguaggi fondamentali dello sviluppo del frontend (HTML, CSS e JS) insieme a come vengono utilizzati. Ad esempio, la maggior parte dei menu a discesa si basano su JavaScript, ma esistono anche alternative solo CSS.
Quando un designer crea un menu a discesa, può pensare a complessità di implementarlo tramite codice. Un designer che capisca quali elementi richiedono JavaScript può essere preparato meglio per capire cosa stanno chiedendo agli sviluppatori di costruire.
Questo è possibile senza imparare a scrivere una singola riga di codice.
Il CSS è fatto per stile il sito web. È per lo più statico a parte l'animazione CSS e CSS crea la maggior parte delle immagini su una pagina. La maggior parte delle funzioni dinamiche sono creati con JavaScript.
Se riesci a capire questa divisione, respirerai uno sforzo consapevole nel lavoro di progettazione. Inoltre costringerà i progettisti di motion designer di UX a considerare quanto lavoro è necessario per animare un'interfaccia.
Tecniche reattive
Ogni web designer dovrebbe almeno conoscere il termine design reattivo. Questo consente ai siti Web di adattarsi a diverse dimensioni dello schermo, a ciascuno dei quali appartiene un diverso layout. Le dimensioni del dispositivo quando viene applicato un nuovo layout sono definito dai punti di interruzione, aggiunto in (uno dei) file CSS.
I punti di interruzione sono specificati da a certa larghezza di pixel (e / o talvolta altezza), minimo o massimo, a cui il layout si adatta per adattarsi alle dimensioni dello schermo. Quindi un layout reattivo avrà un aspetto diverso su un monitor 1080px rispetto a uno smartphone 320px.
Per vedere come funzionano i breakpoint su siti reali, visita il sito Web Media Queries.
Il tuo compito come progettista è considerare come potrebbe ogni punto di interruzione influenza il modello. Potresti essere incaricato di progettare diverse composizioni, ciascuna adattarsi a diverse dimensioni dello schermo.
Una volta compreso che un punto di interruzione CSS definisce le condizioni in cui il layout cambia, avrai un tempo molto più facile a consegnare queste risorse al team di sviluppo.
Pensare modulare con disegni
Gli sviluppatori vogliono sempre riutilizzare il codice il più possibile, poiché questo approccio rende lo sviluppo meno prolisso e riduce le dimensioni dei file - in effetti è un'importante tecnica di ottimizzazione del codice.
Design modulare descrive un metodo per creare siti web da “moduli” Quello può essere riutilizzato nel tempo. Pensa a pulsanti, input di form, stili di titolo o blockquotes con stili fantasiosi.
Se tu elementi di design modulari, diventa più facile per gli sviluppatori di codificare il layout con classi CSS riutilizzabili. È sempre una buona idea pensare a dove puoi riutilizzare ragionevolmente gli stessi colori, trame e gli elementi della pagina, tuttavia è necessario essere intelligenti su di esso non danneggiare l'estetica generale.
È ancora meglio se tu annotare quali elementi hai copiato su diversi prototipi, in modo che gli sviluppatori possano contrassegnare queste parti del sito con codice di ripetizione - rendere lo sviluppo più rapido e semplice.
Il design modulare si riferisce a design atomico, entrambi gli approcci sono piuttosto orientati verso gli sviluppatori. però visualizzazione può aiutarti a capire come funziona il codice, quindi se stai lottando visualizza il design modulare dai un'occhiata a questo post per vedere alcuni esempi.
Comprendere immagini Retina e SVG
Di solito è compito del designer preparare le immagini, acquisire le foto necessarie e progettare le icone da zero. Ciò significa che i progettisti sono gli unici responsabili consegnare le risorse visive che gli sviluppatori alla fine codificano nel layout. Questo è il motivo per cui è importante capire dimensioni della retina e a passare le risorse supportate da retina agli sviluppatori insieme al / i modello / i finale / i.
Consiglio vivamente questo post di Smashing Magazine se vuoi saperne di più sui flussi di lavoro di design della retina. Retinizza È una raccolta gratuita di azioni di Photoshop che possono crea automaticamente versioni di retina dei tuoi beni.
La maggior parte dei designer sa già di supportare @ 2x immagini, ma i nuovi dispositivi iPhone 6+ hanno @ 3x risoluzioni. Tuttavia alcuni progetti non si preoccupano delle dimensioni delle immagini di @ 3x, quindi parla con il tuo capo progetto prima di finalizzare qualsiasi risorsa.
Un'ultima cosa da considerare è il avanzamento di SVG In rete. Tutti i browser moderni supportano SVG che è un formato di immagine vettoriale. Ciò significa che le icone SVG lo faranno scala automaticamente senza alcuna perdita di qualità, quindi non hai bisogno di risorse di retina per la grafica SVG.
Tuttavia, non tutti i team creativi sono disposti a collaborare con gli SVG per il web design. Sono supportati dai browser di sicuro, ma in alcuni casi possono anche essere difficili da implementare. Questo è il motivo per cui la comunicazione è vitale per una relazione di successo tra designer e sviluppatore.
Discutere i pro e contro dell'uso della grafica vettoriale e decidere qual è il modo migliore per ogni progetto. Con la semplice comprensione di queste funzionalità sarete in grado di comunicare chiaramente con gli sviluppatori e persino aiutarli a codificare il layout per il supporto della retina.
Comprendere l'accessibilità
Miglioramento progressivo e degradazione aggraziata sono due diversi modi di gestire lo stesso problema: accessibilità. Non tutti gli utenti si troveranno su dispositivi o eseguiranno browser che supportano il 100% delle funzioni dinamiche di un sito Web.
Questi utenti dovrebbero ancora ottenere un esperienza che funziona, e questo deve essere gestito con una corretta codifica. Alcuni screen reader potrebbero ignorare tutti i codici JavaScript e CSS, ma il sito Web deve ancora funzionare.
Recentemente ho fatto un post che copre miglioramento progressivo in dettaglio, poiché è il mio metodo di sviluppo preferito. Miglioramento progressivo inizia con caratteristiche di base, quindi funziona fino a più “Avanzate” Caratteristiche.
Degrado grazioso è il approccio opposto dove tutte le funzionalità principali sono progettate per prime, quindi lo sviluppatore decide come gestire queste funzionalità se l'utente non supporta JavaScript o CSS.
È improbabile che a un designer venga chiesto di creare prototipi per ognuna di queste situazioni. Ma è importante che i designer comprendano questi termini e il loro significato, perché loro influenzare il processo di sviluppo. Questo è particolarmente vero per i progetti in cui l'accessibilità è una grande preoccupazione.
In chiusura
Ci sono alcuni argomenti che ho saltato perché li considero opzionali. Controllo della versione, gestione degli errori e animazioni JavaScript sono alcuni argomenti più complessi che i progettisti potrebbero voler approfondire.
Ma sinceramente, i punti affrontati in questo post saranno più che aiutare i progettisti a capire i requisiti di un team di sviluppo. Semplicemente sfiorando la superficie dello sviluppo web, lo farai ottenere informazioni ciò ti aiuterà a comunicare idee e a comprendere i problemi che si verificano durante la produzione.
Se stai cercando altri contenuti correlati dai uno sguardo a questi post:
- Come comunicare in modo efficace con gli sviluppatori (Smashingmagazine.com)
- Aiuta designer e sviluppatori a imparare a capirsi (Uie.com)
- Imparare a codificarti ti dà dei vantaggi come progettista di UX (Jessicaivins.net)
