Suggerimenti per migliorare la consegna del design del tuo sito web

Nel processo di creazione di un sito Web, si verificano alcune fasi. Se dovessimo semplificarlo e guardare un sito web standard, le fasi sarebbero:

1. La necessità : qualcuno richiede un sito Web per un motivo o per l'altro.
2. Brainstorming - Decidere su struttura generale, obiettivi e altro.
3. La proposta - Il cliente trova un libero professionista o un'agenzia per realizzare il sito.
4. Contenuto : articoli, immagini, ecc. Tutto ciò che può essere trovato su pagine di destinazione, Sitemap, ecc.
5. Design : una persona / team lavora sul design e sul layout in base al contenuto.
6. Sviluppo - Una persona / team sviluppa la parte funzionale del sito in base al design.

Il più delle volte, puoi mescolarlo qui. Puoi cambiare l'ordine delle cose che vengono fatte e il team può comunque produrre ottimi risultati. Tuttavia, questo può essere difficile quando hai persone di diverse agenzie che lavorano allo stesso progetto, che è il motivo principale per optare per un'agenzia a tutto tondo che può occuparsi di tutto.

Per questo articolo, lo portiamo dal passaggio 5, la progettazione, al passaggio 6, lo sviluppo. È qui che le cose possono andare storte rallentando lo sviluppo e incasinando ciò che è stato deciso in precedenza nel processo di pianificazione.

Le cose che un designer dovrebbe considerare

"I progettisti dovrebbero sapere come programmare?" è una domanda comune ed è molto ragionevole. Se un designer comprende il codice alla base e idealmente può produrlo (in una certa misura), allora può aiutare l'intero team nella loro spinta a completare il progetto più velocemente.

Ecco alcuni motivi per cui questo è il caso:

1 - Alla fine, finisce tutto nel browser.

Tutti i progetti che crei in Figma, Adobe, ecc. Verranno visualizzati nel browser. Tutti i browser utilizzano un tipo di linguaggio di programmazione noto come HTML / CSS per il rendering di una pagina. Se viene utilizzato Javascript, puoi rendere interattivi i tuoi progetti.

La nota importante da prendere da questo è che qualsiasi progetto dovrebbe essere fattibile in HTML / CSS. Molti sviluppatori front-end di talento possono implementare quasi qualsiasi cosa fintanto che la tecnologia lo consente. Ma ricorda, non si tratta sempre di "Puoi farlo?", Si tratta di "Puoi farlo bene e renderlo mantenibile".

2 - Coerenza

Essere mantenibili è il segreto per un progetto di successo. Non vuoi passare ore e ore a modificare gli elementi del sito esistenti e ad aggiungerne di nuovi perché il codice è un disastro. A volte progetti estremamente complessi con pochi o nessuno componenti riutilizzabili finiscono in un pasticcio.

Alcuni suggerimenti per i web designer:

• Progettare pensando ai componenti. La maggior parte degli strumenti ora fornisce questa funzionalità (Figma, Adobe XD, Sketch). Sforzati di usarli più spesso fino a quando non diventa più fastidioso farlo.
• Allinea bene gli elementi. Sezioni simili dovrebbero avere la stessa distanza l'una dall'altra. 80px è una buona separazione da mantenere, ad esempio. Non spaziare casualmente le sezioni usando 80 qui, 86 là, 92 su una terza e 78 sull'altra. Tienilo pulito e ordinato.
• Usa una griglia! Tutti gli strumenti forniscono un sistema a griglia. Idealmente, scegli una griglia a 12 colonne.
• Mostra il tuo design su schermi ampi (1920 px o più). Questo aiuta gli sviluppatori a capire come funzionano ogni sezione e il loro background.

3 - Peso del sito

Vogliamo tutti un sito web veloce, giusto? Ebbene, anche il designer fa parte di questo. Considera questo: un sito Web con 8 enormi immagini ad alta risoluzione, quattro video ed elementi animati. . Buona fortuna con l'ottimizzazione in tempo. Sebbene fattibile, richiederà tempo e tecniche di sviluppo aggiuntivi per caricare immagini e video, ottimizzare i media durante il caricamento, supportare formati di file immagine migliori e aggiungere approcci di animazione intelligenti per prestazioni elevate.

Se gli sviluppatori non sono molto esperti o non sono preoccupati per la velocità, il tuo sito web potrebbe risultare estremamente lento su smartphone e laptop di livello medio-basso.

Come aiutare gli sviluppatori?

In qualità di designer, uno dei tuoi obiettivi da tenere a mente è rendere lo sviluppo più facile e veloce mantenendo l'aspetto e il design del sito.

Dovresti considerare ciò che è facilmente realizzabile sul web.

• Scatole - Sono tutte scatole. Puoi arrotondare alcuni angoli, sì, puoi creare ellissi (che sono definite in una casella) e altro ancora. Tuttavia, quando si utilizzano forme più complesse che interagiscono con il layout, le cose diventano difficili.
• Animare una posizione precisa è difficile: immagina di voler fare clic su un'immagine, quindi spostarla sull'altro lato del testo? Sembra "facile" ma non lo è. La posizione in cui si sposterà l'immagine deve rimanere relativa al contenitore del sito, che cambia in base alla visualizzazione e altro ancora. E poi cosa succede se l'immagine è più grande?
• L'animazione delle dimensioni del riquadro influisce sul layout. Si riferisce a qualsiasi modifica al modo in cui gli elementi vengono ordinati durante un'animazione. Questo può essere estremamente pesante per il browser e spesso si tradurrà in un enorme ritardo.

Considera contenuti diversi!

Come sarebbe il design con il doppio del testo? O come immagine di ritratto anziché di paesaggio? Non sai mai cosa caricherà la redazione. Dovrebbero esserci vincoli come le proporzioni o anche i bordi delle immagini? Se puoi, mostralo nel design.

Fornisci i tuoi progetti in strumenti come Zeplin

La maggior parte degli strumenti di progettazione come Figma o Adobe XD hanno un modo per "condividere" i progetti con gli sviluppatori. Da lì, il team front-end può ispezionare i colori, le impostazioni tipografiche, le spaziature e altre proprietà visive dei livelli, che consentirebbero loro di aderire molto strettamente ai disegni.

Fornisci altre risorse come caratteri o video

Se hai utilizzato un carattere specifico sul sito, forniscilo agli sviluppatori. Se è concesso in licenza e accessibile tramite URL specifici, assicurati di condividere anche quello. È importante che uno sviluppatore lavori con i caratteri corretti sin dal primo giorno. Se ci sono video, assicurati di condividere anche quello! I video sarebbero su YouTube, Vimeo o ospitati autonomamente?

Non andare per "pixel perfetto"

Questa nozione di mantenere l'aspetto finale del sito perfettamente uguale al design è un modo semplice per farti odiare dal tuo team di sviluppatori e può distruggere ogni possibilità di andare in diretta in tempo. In quasi tutti i casi il design NON sarà perfetto. È impossibile essere certi al 100% che prima di ogni pulsante ci sia esattamente una spaziatura di 18 px? E non 19px? O che ogni singolo titolo sia 38px e non 37px? O forse che ogni bordo è #ddd e che non ce n'è uno nero ma ha il 15% di opacità?

Gli sviluppatori raccolgono piccoli errori come questi qua e là per mantenere la coerenza in tutto il sito. Costruiscono in componenti che seguono le stesse regole. Finché non c'è ovviamente un cambiamento intenzionale in un caso specifico, non dovrebbe esserci un motivo per cui un elemento non può essere lo stesso su tutta la linea.

Alla fine, il sito web codificato dovrebbe seguire l'aspetto generale del design.

Lascia commenti nel design

Se vuoi che un determinato elemento sia interattivo come schede, fisarmoniche, cursori e simili, dedica alcuni secondi a scrivere come dovrebbe funzionare su desktop, mobile e cosa è cliccabile, se si scambia.

Pensa come un utente

Quando hai finito, fermati un secondo e immagina di utilizzare il sito. Leggi dall'alto, scorri verso il basso, fai clic da qualche parte per vedere di più. C'è qualcosa che potrebbe mancare nel flusso di lavoro? Esiste una vista di un determinato elemento che cambia con l'interazione dell'utente? Se questo è vero e non esiste un progetto, lasci che siano i tuoi sviluppatori a capirlo, il che aggiunge stress al lavoro. Se le scadenze sono strette, puoi condividere i file generali con il tuo team e fargli sapere che un sono imminenti poche visualizzazioni di "stato" (assicurati di menzionare quali sono).

Visualizzazioni reattive

È scoraggiante progettare 15 pagine sul desktop e poi fare una versione mobile. È ancora più fastidioso fare una versione per tablet leggermente diversa oltre a quella. Questo è il motivo per cui alcuni designer ignorano l'aggiunta. Tuttavia, ciò significa che gli sviluppatori dovranno farlo in codice. E prendi decisioni per questo. Se vedi elementi complicati, mostra idealmente le loro visualizzazioni dal tablet anche se non fai l'intero sito.

In sintesi

Il designer può rendere la vita dello sviluppatore un incubo o un'esperienza molto positiva. La chiave per ottenere quest'ultimo è capire meglio la tecnologia utilizzata, HTMl / CSS, quali elementi interattivi sono fattibili, ecc.

Se hai la fortuna di essere intorno a sviluppatori e sei preoccupato per alcuni elementi, chiamali per dare un'occhiata a tutto. Ti daranno sicuramente indicazioni su ciò che è difficile e su ciò che è facile.