Share
Spesso è pensato progettazione nel browser è un approccio moderno al web design. Infatti, prima dell'avvento di strumenti come Photoshop, c'era poca altra scelta. Solo negli ultimi anni, dagli albori del design reattivo, i designer sono tornati alle loro radici e hanno iniziato a progettare nel browser.
Non sto dicendo che ogni sito web dovrebbe iniziare la vita nel browser, ma dato che i siti web ora devono essere più adattabili che mai, sembra più sensato prendere questa strada. La progettazione in Photoshop (o un'applicazione simile) può avere dei vantaggi, che vedremo in seguito, ma può anche avere i suoi svantaggi. Diamo un'occhiata ad alcuni di questi.
Una domanda che mi viene rivolta molto dai progettisti dell'interfaccia utente al lavoro è "Qual è la larghezza massima che il design deve essere?". La risposta che ho sempre dato a queste domande è stata "Crea il disegno a circa 960px". Al giorno d'oggi ogni volta che mi viene chiesto questo, dico loro che non c'è una larghezza fissa e che dovrebbero immaginare che il design dovrebbe funzionare a qualsiasi larghezza.
Con la reattività di essere in una domanda così forte, è importante che quando i siti web sono stati progettati che questo è preso in considerazione fin dall'inizio, non solo portato in un secondo momento. Quando gli smartphone sono entrati in scena per la prima volta, molti designer hanno creato un design a larghezza fissa in Photoshop per desktop e poi un altro per smartphone (in genere intorno alla larghezza di 960 pixel per desktop e 320 px per dispositivi mobili). Sebbene questo approccio possa aver funzionato per un po ', non è più plausibile a causa della vasta gamma di larghezze del dispositivo che accedono al web. L'unico modo per avere un'idea di come i siti web reattivi funzioneranno, aspetto e funzionalità è progettandoli nel browser.
Anche la coerenza sarà grande. Spero di pensare in termini di parti riutilizzabili per mantenere le cose semplici e coerenti - Chris Coyier sulla riprogettazione dei trucchi CSS
Anche se può essere vero che i visitatori (nella maggior parte dei casi) non visitano un sito Web per il suo design, ma lo visitano per il suo contenuto, progettando nel browser siamo in grado di concentrarci sui contenuti di un sito Web e costruire il design attorno a questo.
Quando si progetta in Photoshop è spesso il caso che il design sia considerato prima e il secondo contenuto. In alcuni casi il contenuto non viene nemmeno preso in considerazione. Quante volte hai creato un disegno in Photoshop e hai riempito il contenuto con un carico di Lorem Ipsum? L'abbiamo fatto tutti, tuttavia sembra uno strano approccio da adottare quando il contenuto deve essere una delle considerazioni più importanti. La progettazione nel browser lo consente.
Quando opti per questo approccio, prima di saltare direttamente nel tuo editor di codice preferito è importante avere una forte idea di quali elementi e componenti il tuo sito web comprenderà. In questo modo sarai in grado di creare componenti riutilizzabili, utilizzando lo stesso codice HTML e CSS. Qualsiasi modifica apportata può essere facilmente modificata semplicemente cambiando alcune righe di codice.
Uno dei motivi principali che potresti voler progettare nel browser è che puoi vedere come può apparire un design reattivo in tempo reale. Prima di partire, potrebbe essere una buona idea impostare alcuni punti di interruzione predefiniti per le query sui media e quindi tutto ciò che si trova tra questi punti di interruzione dovrebbe essere fluido.
Pensa al layout del tuo sito e adatta la soluzione migliore per le sue esigenze. Ad esempio, se si dispone di un sistema di griglia fotografica 4x4, pianificare in quale punto di interruzione la griglia 4x4 diventerà non idonea per risoluzioni più piccole e modificare la griglia in qualcosa di più appropriato, ad esempio un sistema a griglia 2x8.
Ok, quindi potresti pensare che Photoshop abbia subito un po 'di violenza in questo articolo, ma Photoshop ha ancora tempo per brillare anche quando si progetta nel browser. Ci sono volte in cui i CSS non tagliano lo stile e per altri elementi decorativi dovrai ricorrere a Photoshop. Dovresti usare Photoshop insieme al tuo editor di codice.
Siti web come quello sopra sarebbero difficili da progettare nel browser in quanto ha uno stile fortemente illustrato. Progettare nel browser non sarebbe l'approccio migliore per siti come questo.
Al giorno d'oggi non è raro che i progettisti della UI presentino un mood board di un design di siti web piuttosto che una rappresentazione reale di esso. Questi moodboard possono includere cose come
In questo modo, il design è ancora ben considerato, ma non è così restrittivo come un tradizionale modello mockup di Photoshop.
Se non hai ancora provato a progettare nel browser e vuoi rimanere bloccato, ecco alcuni strumenti utili che ti aiuteranno a scegliere questo approccio.
Ci sono molti IDE disponibili, ma qui ce n'è uno online, che porta la progettazione nel browser ad un livello completamente nuovo. I vantaggi dell'utilizzo di un IDE cloud-based è la possibilità di condividere file con colleghi o altre persone che lavorano su un progetto, tutto con grande facilità.
Le tessere degli stili possono essere descritte come
un deliverable di design composto da caratteri, colori e elementi dell'interfaccia che comunicano l'essenza di un marchio visivo per il web.
Ti permettono di creare un'identità di marca per un sito Web che può dargli un certo stile senza essere troppo restrittivo su come dovrebbe apparire il design finito. Se non li hai usati prima, puoi trovare qui un'ottima introduzione.
Live Ricarica aggiorna automaticamente la pagina del browser non appena si salva un HTML / CSS / javascript o qualsiasi altro file. Questo può farti risparmiare tempo e rimuovere la necessità di premere costantemente il pulsante di aggiornamento F5.
Il cast di tipo è ottimo per progettare la tipografia nel browser. Ti consente di digitare rapidamente il tipo nel browser e controllare la leggibilità e il rendering mentre lavori.
Al momento di scrivere Adobe ha un piccolo strumento in cantiere che sembra abbastanza promettente. Si chiama 'Edge Reflow' e ti consente di progettare contemporaneamente tutte le dimensioni dello schermo senza sacrificare qualità o capacità. È uno strumento davvero utile per progettare siti web reattivi poiché, a differenza di Photoshop, non utilizza una tela a larghezza fissa. Non ci sono novità su quando è previsto il rilascio, ma è possibile iscriversi per ricevere una notifica di rilascio.
Sfortunatamente può esserci un effetto collaterale negativo nella progettazione nel browser. Come web designer e sviluppatori siamo sempre alla ricerca di modi per accelerare il nostro flusso di lavoro di web design. Quando progettiamo nel browser possiamo diventare così coinvolti nella funzionalità, assicurandoci che funzioni ad ogni risoluzione che a volte possiamo dimenticare di dare al design l'amore e l'attenzione che merita. Prenderemo scorciatoie e cercheremo di rendere la vita facile per noi stessi, il che può contribuire a trascurare.
Non sederti e prendi la "via facile". Ci sono state molte volte in cui ho ricevuto un file per un disegno, dato un solo sguardo e ho pensato "Sì, non molto di questo può essere creato in CSS, sarà un sito pesante per immagini solo per il layout". Sappiamo tutti che le immagini si gonfiano e quindi cerchiamo di usarle il meno possibile. A volte, tuttavia, questo può essere inevitabile, ad esempio quando si lavora su contenuti di marca pesantemente progettati. È lo stesso con molte discipline; devi fare un ragionevole compromesso tra forma e funzione. Troppa forma e troppo poca funzione si tradurrà in un sito Web scarso e viceversa.
Non è mai stato più importante essere in grado di progettare siti web fluidi e reattivi che si adattino a varie risoluzioni. La necessità di questi requisiti rende gli strumenti come Photoshop meno utili di una volta per il web design.
Poiché il design reattivo è qui per rimanere, possiamo iniziare a vedere alcuni cambiamenti nel modo in cui i siti web sono progettati esteticamente e con questo verranno nuovi strumenti e soluzioni per alcuni dei problemi di oggi. Naturalmente, se un sito web è più focalizzato sul branding e sul design, Photoshop sarà sempre il tuo strumento numero uno a cui fare riferimento; alcuni siti sono più orientati alla progettazione che ai contenuti guidati.
.
Accentsconagua