FLASH SALE! Up to 40% off on unlimited courses, tutorials and creative asset downloads SAVE NOW
Advertisement
  1. Web Design
  2. Web Design
Webdesign

Le mie idee sul "Web Design nel Browser" contro "Web Design in Photoshop"

by
Length:ShortLanguages:

Italian (Italiano) translation by Luca Mellano Califano (you can also view the original English article)

Il design su browser sta diventando sempre più popolare grazie all'ascesa dei cosiddetti "designers programmatori". Ma è davvero il caso di buttare all'aria studi, libri, utility e software ad hoc per il wireframing solo grazie a queste nuove capacità e lanciarci nel coding di prototipi?

Browser vs Photoshop: la guerra del momento

Lavorando nel mondo digitale di designers e sviluppatori, esiste ormai un trend decisamente in crescita di designers ai quali è richiesto un minimo di conoscenza dello sviluppo del codice.

In tanti credono in questa nuova tendenza, mentre gli altri pensano che i designer non dovrebbero mai vedere una sola linea di codice. Ad ogni modo alcuni di questi "nuovi designer" ci stanno prendendo decisamente gusto e iniziano a mettere in discussione anche l'utilità di Photoshop per alcune tipologie di progetti.

Sono dell'idea che la vera creatività sia indipendente dagli strumenti utilizzati, ma è evidente che esistono pro e contro per entrambi gli approcci al design. (Li ho elencati in basso, così da poter illustrare meglio la mia idea a riguardo).

In questo articolo uso specificamante i termini "Photoshop" e "UXPin". In realtà mi riferisco a qualunque tipo di prodotto simile, che sia Sketch, Balsamic o altro.  Non cambia la logica di base.  Semplicemente quei due strumenti sono quelli che preferisco, ma sono solo gusti personali.

Andiamo direttamente nel Browser

Copyright © 2013 Olle Svensson Attribution-commercial-Share Alike 2.0 license

A volte si presenta la situazione tipo in cui troviamo in un'azienda la persona con ottime capacità di visual design, ma in grado di lavorare discretamente bene anche sul codice. Un esempio può essere l'obiettivo di comunicare allo sviluppatore (che lavora al CMS) che design dovrà ottenere sul lavoro finale. Il file PSD è sicuramente la base standard più adatta, ma talvolta il designer può avere necessità di mostrare anche più elementi attivi, quali animazioni, responsività e dettagli quanto più possibili vicini a quelli della versione finale.

I benefici

  • Frameworks famosi come Bootstrap e Foundation rendono questo processo più veloce. Nella mia esperienza personale ho imparato che è sempre meglio imparare il codice da zero prima di buttarsi sui frameworks, quantomeno per avere un'idea di come funzionano.
  • Sviluppare codice lato front-end riduce notevolmente i tempi di sviluppo, soprattutto se il team è particolarmente popolato sul lato design. In questo modo gli sviluppatori possono concentrarsi sugli aspetti più impegnativi e su aree dedicate.

Le note dolenti

  • Il design via browser può essere decisamente lento se non c'è una sufficiente confidenza con il coding. Può tornare utile in questi casi seguire un corso di sviluppo lato front-end, e prendere confidenza con lo sviluppo di landing page e simili.
  • Questo lavoro ovviamente può distrare il designer da quelle che sono le sue peculiarità. Sicuramente è ottimo saper lavorare con il codice. Resta sempre valido il parere di alcuni che la suddivisione del lavoro in area specifiche e con specifici assegnamento porta sicuramente a vantaggi nei tempi e nell'efficienza della produzione. Le realtà sul mercato (e i discorsi sulla flessibilità nel mondo digitale) sicuramente vanno contro quest'ultima affermazione.

Il design su Photoshop/UXPin

Copyright © 2013 Serg Kij Attribution-commercial-Share Alike 2.0 license

Software desktop come Adobe Photoshop oppure servizi quali UXPin rappresentato solo 2 dei tanti strumenti base per gli odierni designers. Gli stessi designer/coders li usano come base per qualunque lavoro.

I benefici

  • I programmi di grafica sono straordinari nella prima pianificazione e nelle fasi di ricerca. Carta e appunti vari sono strumenti rapidi, a volte non sempre ordinati, ma che aiutano a raggiungere velocemente un'idea valida.
  • I wireframe rappresentano sicuramente un ottimo strumento per un analista di comunicare i dati meta base. In questo caso il design via browser può essere forse inutile, soprattutto se l'obiettivo di generare qualcosa di ancora astratto nel progetto.
  • La pianificazione con mockup semplici può sicuramente abbassare notevolmente i tempi di sviluppo.

Le note dolenti

  • Realizzazione progetti web responsivi su Photoshop può essere ripetitivo e non rendere perfettamente l'idea finale che si ha in mente. In questo caso è sicuramente più veloce visualizzare la resa responsiva "ad occhio" sui vari dispositivi, con un feedback in tempo reale del risultato, piuttosto che realizzazione bozze differenziate per ogni soluzione tramite Photoshop.
  • Ci sono inoltre limitazioni tecniche quando si lavora su Photoshop in questo contesto. Ad esempio, una volta stavo preparando una landing page per un cliente. Era caratterizzata da un campo email, che ha rappresentato una vera sfida nella realizzazione vista la sua complessità. Alla fine l'ho "realizzato" direttamente nel browser, ed è stato sicuramente più pratico ed immediato.

Conclusioni

La creatività non dipende dagli strumenti che usiamo. Lavorare direttamente nel browser ci permette di vedere subito possibili problemi o limiti e ci permette di evolvere la nostra idea di design di un progetto. Ed è ugualmente fuori di dubbio che per le prime fasi di progettazione, strumenti quali UxPin e Adobe Photoshop siano insostituibili. Questi due approcci al design non si auto-escludono comunque. Lavoro tanto su Photoshop, anche quando faccio design via browser. E poi oggi, con tutte le estensioni interessanti in giro, è sicuramente più comodo lavorare sul codice.

E tu? Che designer sei? Ti piace sperimentare le tue idee direttamente nel browser oppure usi esclusivamente bozze realizzate in Photoshop? Scrivi un commento e facci conoscere la tua opinione.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.