I web designer devono sapere come programmare?


31

Come sviluppatore web, sia architetto front-end che back-end, lavoro con molti designer diversi e a volte trovo frustrante lavorare con componenti di progettazione in cui non si pensava a come realizzare la progettazione in CSS e HTML di base. D'altra parte, come sviluppatore, dovrei essere in grado di produrre codice da qualsiasi progetto.

I web designer devono conoscere le moderne tecniche CSS e HTML di base? Perché o perché non è importante per un web designer a tutto tondo?

Alcuni pensieri generali:

  • Gli sviluppatori Web front-end dovrebbero essere abbastanza abili da codificare qualsiasi progetto.
  • I web designer dovrebbero comprendere come gli utenti interagiranno effettivamente con il loro design.
  • I negozi di design preferiscono progettare i designer e lasciare tutta la programmazione agli sviluppatori.

5
quello che hai descritto sono grafici, non web designer.
Jin

I designer senza un mezzo sono come compositori senza uno strumento.
Adam,

Nella mia esperienza, "front-end" attorno a qualsiasi web o software significa interfaccia utente, interfaccia grafica o interfaccia. È questo il senso che intendevi?
user179700,

Risposte:


23

I web designer devono conoscere le moderne tecniche CSS e HTML di base?

Sì.

Perché o perché non è importante per un web designer a tutto tondo?

Ho risposto "sì" perché hai usato la parola base .

È assolutamente essenziale che i web designer conoscano le tecniche HTML e CSS di base, allo stesso modo in cui gli architetti devono sapere qualcosa sulla fisica e la scienza dei materiali, i designer di stampa devono sapere qualcosa sul processo di stampa CMYK e gli stilisti devono sapere qualcosa sul tessuto.

Se non sai nulla delle tecniche CSS e HTML non puoi definirti un "web designer". Sei semplicemente un artista o qualcosa del genere.

Commenti sui tuoi pensieri:

Gli sviluppatori Web front-end dovrebbero essere abbastanza abili da codificare qualsiasi progetto.

Falso. Questa è una semplificazione eccessiva. Alcune cose non si traducono bene nel web. Alcuni disegni potrebbero cadere o non funzionare su una determinata piattaforma o dimensioni dello schermo che devono essere supportate.

Un web designer deve conoscere le limitazioni in base al pubblico e ai requisiti di prestazione. Un designer che conosce CSS e HTML sa come modificare il design in modo che il codice sottostante possa essere reso il più reattivo ed efficiente possibile.

I web designer dovrebbero comprendere come gli utenti interagiranno effettivamente con il loro design.

Hai descritto UX Design , che è una disciplina completamente diversa. Sebbene User Experience Design coinvolga aspetti del Graphic Design, ha davvero poco a che fare con CSS o HTML.

Mentre i bravi web designer a tutto tondo dovrebbero avere familiarità con UX Design, è anche comune per loro collaborare con specialisti UX.

I negozi di design preferiscono progettare i designer e lasciare tutta la programmazione agli sviluppatori.

Questo potrebbe essere parzialmente vero, ma non del tutto. Un paradigma popolare nei sistemi di gestione dei contenuti è MVC (modello / vista / controller). Molti negozi di design desiderano che i progettisti abbiano una certa familiarità con la codifica HTML / CSS in modo che possano concentrarsi sulla presentazione del contenuto (la "vista"), mentre gli sviluppatori si concentrano sul modello / controller.

Questo non vuol dire che alcuni negozi non impiegano artisti grafici che si concentrano semplicemente su elementi grafici e spostano i pixel, ma a mio avviso non sono Web designer. Un sito Web di grandi dimensioni potrebbe impiegare artisti grafici, web designer, progettisti di UX, sviluppatori Web e specialisti di database che collaborano tutti per produrre un sito Web finito. Un libero professionista che costruisce siti più piccoli potrebbe dilettarsi in tutte le discipline e definirsi un Web Designer / Developer.


17

Un web designer dovrebbe capire come funziona il codice e di cosa è capace, allo stesso modo in cui un designer di stampa capisce come apparirà l'inchiostro su carta e come può piegare o tagliare la carta. Qualsiasi designer dovrebbe comprendere i limiti e i punti di forza del supporto scelto.

Se un web designer sta creando questo meraviglioso sito drop-dead, sarebbe opportuno che lui o lei imparasse le basi della codifica o siedesse con un programmatore in alcuni punti del processo per verificare che il sito della magnificenza possa essere realizzato. Quindi direi un web designer al minimo bisogno di sapere su codice.

Penso che sia specioso dire "uno sviluppatore può codificare qualsiasi cosa", allo stesso modo in cui non si può dire che tutto ciò che può essere stampato possa essere riprodotto esattamente sul web usando HTML / CSS.


1
1, in particolare per "ha bisogno di sapere su codice". Ho lavorato con persone che non sapevano scrivere una riga di codice ma avevano una comprensione del mezzo ed erano abbastanza aperte da rispettare ciò che lo sviluppatore aveva detto. Funzionava sempre molto bene.
Pekka supporta GoFundMonica il

6

Lauren, Ghoppe e Farray parlano tutti tranquillamente, quindi non ripeterò nulla di ciò che hanno detto. Per praticità, lascia che ti offra un'altra interpretazione delle tue domande esplicite e implicite.

L'approccio migliore per uno sviluppatore è lo stesso su cui gli stampatori hanno battuto il tamburo da quando Gutenberg ha tagliato il suo primo tipo: insistere affinché il designer ti coinvolga nel progetto fin dall'inizio. Metti in chiaro che devi essere coinvolto nella discussione prima che un singolo pixel colpisca lo schermo.

Quando sono in un progetto di design di stampa che coinvolge qualcosa di insolito, sono subito in trattative con la tipografia e la gente della rilegatura. Sanno molto più del mio mestiere di me, quindi faccio in modo di coinvolgerli fin dall'inizio. Sfortunatamente, i progettisti principianti, specialmente quando sono appena usciti dalla scuola e non hanno ancora familiarizzato con il mondo reale, a volte trascurano quel semplice passo e finiscono nel profondo kimshee senza un salvagente.

Campagna nei blog, nei forum, con clienti e project manager, con scuole locali e gruppi di utenti e qualsiasi designer nel raggio di azione: "Parla con il tuo sviluppatore prima di iniziare a progettare!"

Uno sviluppatore otterrà comps da designer che non hanno idea di cosa stiano chiedendo, proprio come i dipartimenti di prestampa a volte ottengono opere d'arte che sono inutilizzabili (e i progettisti ottengono slip che solo un masochista avrebbe seguito). Ma puoi evitare molta frustrazione e perdere tempo se insisti su un posto al tavolo della pianificazione.


Esattamente! Come sviluppatore, mi piace poter fornire feedback sulla fattibilità e sui costi di implementazione di un particolare progetto. Quanto più dettagliato posso essere riguardo al motivo per cui una parte di un progetto è __in__fattibile aiuta i miei designer a creare progetti migliori (meno costosi) in futuro. Pertanto, anche se i progettisti non sono in grado di scrivere codice, dovrebbero essere in grado di comunicarlo e dovrebbero cercare di comprendere le sottigliezze del framework / degli strumenti disponibili per gli sviluppatori. (E meglio possono, meglio posso implementare ciò che mi danno.)
EthanB

1
Ironia della sorte, ho recentemente completato la fase di progettazione di un sito Web in cui lo sviluppatore è dietro tre livelli di burocrazia aziendale e assolutamente inaccessibile. Ci sono volute settimane solo per ottenere una risposta alla domanda "In quale forma preferiresti i file di progettazione?" - Un modo di lavorare insoddisfacente, che causerà problemi al cliente. Con un po 'di fortuna, avranno presto un'epifania.
Alan Gilbertson,

5

Sì e no. Sapere come funziona l'ambiente di destinazione è importante, ma non è molto importante comprendere il codice specifico richiesto per far funzionare il sistema in quel modo. In altre parole, non mi preoccuperei della sintassi specifica per creare angoli arrotondati in tutti i principali motori di browser, ma ritengo importante che tu capisca se puoi creare angoli arrotondati in tutti i principali browser (e quanto codice è necessario fare così).

Ad esempio, solo pochi anni fa eravamo ancora sellati con IE6. Avevamo un design assolutamente bello per un'applicazione intranet aziendale, ma dipendeva fortemente da overlay trasparenti. IE6 poteva visualizzare i PNG8 ma non rispettava il canale alfa nei PNG24 e per utilizzare l'opacità basata su CSS richiedevano filtri ActiveX e altri problemi. I cerchi potrebbero essere saltati attraverso per ottenere l'effetto desiderato, ma ogni telaio rappresenta un ciclo di sviluppo più lungo, un più alto tasso di bug, una manutenzione più difficile, ecc. Oltre al costo diretto nelle ore-uomo che sviluppano e mantengono questo design (ora problematico), c'era anche il costo opportunità di legare le ore degli sviluppatori patchare una base di codice kludgy invece di lavorare sulla versione N + 1.

Quando in questo tipo di situazioni, il costo / beneficio di ciascun effetto visivo in un disegno deve essere misurato:

  • Quanto è sorprendente l'effetto visivo?
    Può essere sostituito con un altro visual altrettanto impattante che non richiede tante risorse di costruzione?

  • L'effetto può essere riprodotto correttamente sul bersaglio? Se il design originale non può essere ricreato con precisione dal target, il design deve essere sostituito con l'approssimazione più vicina che sarà disponibile. (Per fortuna questo sta diventando sempre meno un problema per i web designer.)

  • Quanto tempo hai preventivato?
    Potete permettervi più ore di lavoro in costruzione per ottenere l'effetto desiderato? In caso contrario, puoi ridisegnare la funzione in meno tempo?

  • Quanta parte del codebase dovrebbe essere refactored per adattarsi al tuo visual?
    Se la progettazione e la costruzione avvengono contemporaneamente o se si sta riavviando un'applicazione legacy, quanto sarà difficile per i programmatori incorporare il proprio visual? Non solo le ore necessarie per eseguire la riscrittura, ma le ore potenziali per il debug e il mantenimento del codice appena modificato.

C'è una sovrapposizione tra i punti elenco sopra elencati e alcuni altri punti che non sono elencati. Il punto è che, anche in questo breve elenco, ci sono costi aziendali che devono essere considerati. Puoi valutare la situazione in modo molto più efficiente se hai una comprensione di come funziona effettivamente il sistema di destinazione.

Se hai una comprensione delle limitazioni di CSS o HTML prima di realizzare il tuo progetto, puoi creare progetti che attraverseranno la fase di costruzione senza problemi. Avrai anche la certezza che il tuo progetto può essere implementato e il potere di conoscere il costo approssimativo. Questo è sempre utile avere dalla tua parte.


5

Nella mia esperienza (sono un programmatore, non un designer), non è una domanda tanto che il web designer dovrebbe conoscere il codice. Ma dovrebbero sapere come il loro lavoro viene applicato all'interno di un browser.

Il problema più grande con i designer che non hanno abbastanza conoscenza del web / dei browser è che creano progetti che sembrano belli, ma non funzionano davvero all'interno del browser. Solo un paio di cose che alcuni potrebbero non aver considerato:

  • Uso di caratteri. Usano i caratteri installati con il loro PhotoShop, che l'utente medio non ha. Oppure usano i caratteri Mac, che non esistono su Windows / Linux.
  • Mancanza di rispetto delle dimensioni dello schermo / del browser. Il design non è pensato per essere mostrato su computer più piccoli. Poiché i notebook / tablet più piccoli stanno diventando più popolari, diventa più importante la necessità di prendere in considerazione dimensioni dello schermo più piccole.
  • Cosa dovrebbe accadere quando si ridimensiona lo schermo del browser? Il designer ha tenuto conto di ciò che dovrebbe accadere con il design quando il browser viene ridimensionato.
  • Che dire delle barre di scorrimento. Il design viene in genere con segnaposto "lorem ipsum". Che cosa succede se un sacco di testo va in quel segnaposto e abbiamo bisogno di barre di scorrimento, dove dovremmo posizionarli.
  • Molte immagini. Alcuni disegni richiedono di ritagliare molti png. Ciò può comportare tempi di risposta lunghi dal server Web poiché la pagina iniziale richiede al browser di scaricare tutti questi png.

Questi sono i problemi che ho riscontrato lavorando con i designer. Non si tratta di problemi con il designer che non sa nulla del codice. Ma problemi a non pensare a come il design viene utilizzato.


Ottimo punto sui caratteri. Ho ottenuto PSD per lavorare con dove non ho nemmeno i caratteri utilizzati installati sul mio computer.
Chris_O,

4

Una comprensione più ampia del mezzo su cui si sta lavorando rende sempre uno un artista e un artigiano migliore in quel regno.

Molti web designer che non conoscono lo sviluppo del front-end sono difficili da lavorare non tanto perché sono cattivi web designer ma perché non sono affatto web designer. Sono grafici con un po 'di background di stampa e stanno cercando di creare brochure e poster piuttosto che siti web reali.

È come assumere un paesaggista per rimodellare il tuo bagno. Hanno un senso del design e probabilmente comprendono alcuni dei fondamenti, ma è probabile che siano molto più bravi nell'abbellimento del prato davanti che nel piastrellare la doccia.

Un decennio fa, quando la maggior parte dei siti Web erano ancora costruiti come linee di assemblaggio del pavimento della fabbrica, non era un grosso problema avere una persona a fare il PSD, la persona successiva a fare l'HTML e la successiva aggiungere il DB, ecc.

Ma al giorno d'oggi, la costruzione di siti web più progressiva è fatta con un processo agile e i team sono diversi con molta metodologia di esperienza utente aggiunta, miglioramenti progressivi, sistemi integrati di back-end e front-end, concetti come il web design reattivo che viene lanciato, ecc. In quanto tale, gran parte del processo di progettazione deve avvenire nel codice . Che si tratti di prototipazione, test utente, progettazione iterativa o che cosa hai, il codice è il mezzo e il team deve comprenderlo.

No, non tutti i membri del team devono essere in grado di scrivere plugin jQuery. Ma il team dovrebbe almeno sapere cosa sono e il team UX / Web dovrebbe avere persone che POSSONO scriverli, poiché alla fine, tutto ciò che viene progettato deve essere costruito.


4

Sì. Un artista dovrebbe capire il mezzo su cui sta lavorando, che si tratti di un pittore con il suo olio e la sua tela, uno scultore con il suo marmo e scalpello, o un web designer con il suo HTML e CSS.

Lavoravo nel settore dei videogiochi. I migliori progettisti di giochi erano persone creative con una forte inclinazione tecnica che comprendevano le sempre mutevoli limitazioni del mezzo e potevano progettarlo. Le persone che non riescono a fare questo sbraccio e l'implementazione annacquata della loro visione finiscono per succhiare.

Di recente ho realizzato alcuni sviluppi web in cui il background del designer era interamente nei supporti di stampa. Il risultato furono pagine piuttosto belle, che sarebbero state fantastiche in stampa, ma funzionarono piuttosto male come sito web.


4

Per me, la disconnessione del designer / sviluppatore è qualcosa che è accaduto anni fa, ma poi le persone hanno capito che il web design è molto più di un semplice modello.

Per me, quando qualcuno si definisce un web designer mi aspetto:

a) They can design a layout either in a image editing program, or in the browser
b) Can articulate their design choices, and have sensible reasons
c) Proficient (as opposed to basic knowledge) with HTML, CSS, and JavaScript.
d) Basic knowledge of server side programming

Per me, un web designer è qualcuno che può creare il lato client di un sito.

Un buon web designer avrà tutto questo e una comprensione di come le scelte che fanno durante il processo di progettazione influenzano la UX del sito.

Quando qualcuno dice sviluppatore web, mi aspetto:

a) Proficient with at least one server side programming language
b) Basic knowledge of server configurations
c) Basic knowledge of client side technology (JavaScript and AJAX implementations)
d) Basic knowledge of backend architecture

Un buon sviluppatore web avrà tutto questo e sarà in grado di capire come le scelte di architettura che farà influenzeranno il front-end del sito e la funzionalità esposta agli utenti.

Ottieni anche persone specializzate in UX e in altre aree che sono più orizzontali del web design, in quanto si applicano a diversi ambienti di sviluppo.

modifica: Se qualcuno ha un esempio di un buon gruppo di design che separa il design grafico dal web design, sarei molto interessato.


3

I progettisti dovrebbero avere un'idea di come funziona la codifica. A volte è l'unico modo per impedire al loro sviluppatore front-end di diventare omicida . Per acquisire quell'idea, l'esperienza diretta può essere il modo più semplice.

Ce ne sono sicuramente altri, ma non può far male alla tua azienda imparare a programmare un po 'di Javascript. (In realtà i tempi stanno cambiando e ci sono legioni di ragazzi con abilità di designer che possono uscire javascript dai loro DOM, ma questa è una storia completamente diversa)

I miei pensieri generali:

  • Gli sviluppatori Web front-end devono affrontare terribili back-end e molti livelli di idiosincrasie per disturbare le sottigliezze del tuo design. La maggior parte di quelle idiosincrasie sono causate da cattive scelte di back-end pre-fab da parte della direzione e rubano ingenti quantità di tempo da affrontare.

  • I web designer mentre affrontano individui così stressati rischiano costantemente la vita . E dovremmo prendere in seria considerazione alcune di queste questioni front-end, invece di lasciar cadere il disegno sul tavolo e scappare urlando in ufficio "Ho finito, ho finito, da ora in poi è tutta colpa del dev! "

  • I negozi di design dovrebbero bruciare.


2

Dipende da dove lavori.

Se lavori per una grande azienda, questi potrebbero essere tutti ruoli individuali:

  1. Specialista di architettura o UX: pianifica l'architettura / organizzazione delle informazioni del sito / crea wireframe

  2. Designer: progetta il sito utilizzando Photoshop o altri strumenti

  3. Sviluppatore front-end - fa html / css / javascript / json / xml / ecc. e scrive codice di template che integra front-end con back

  4. Back End Developer - fa la programmazione che fa funzionare tutto in modo dinamico

La maggior parte dei posti di livello intermedio richiedono che il progettista gestisca anche le decisioni sull'UX. Ma i luoghi più piccoli potrebbero aver bisogno del progettista per fare tutte e 3 le cose sopra. Tuttavia, il front-end è un'area complicata e ci sono persone di diverse competenze. Se sei un designer che ha bisogno di fare front-end, sicuramente non dovresti aspettarti di sapere molto di più di HTML / CSS e JQuery o qualche altro lavoro sul frame. Aspettarsi che un designer conosca gli aspetti più profondi dell'integrazione javascript e back-end è chiedere troppo.

Ovviamente se fai il freelance devi sapere e fare tutto da solo;)


1
L'OP non chiede se un Web Designer debba essere anche un programmatore esperto, ma piuttosto se il Web Designer deve conoscere le basi di HTML e CSS. Anche se sei un Web Designer e non devi mai toccare un file HTML o CSS, dovresti comunque sapere abbastanza per sapere se il tuo design è persino fattibile (o, se del caso, possibile ) come sito Web per il tuo pubblico di destinazione.
Shauna,

2

Penso che i web designer dovrebbero conoscere HTML / CSS - anche se si limitano solo ai fondamenti - per il bene di essere in grado di creare web design e interfacce web che funzionano sul supporto.

I web designer possono scegliere di non scrivere HTML / CSS da soli, ma sapere come funzionano markup e CSS è essenziale per essere un web designer. I web designer potrebbero non dover essere ninja HTML / CSS, ma serve loro a conoscere (almeno) come i loro layout di layout web vengono convertiti in un sito Web.


1

I web designer devono sapere come programmare?

Sì, il web designer ha a che fare con software come Adobe Photoshop, Illustrator e InDesign per creare un design per il web. Quindi questo design si occupa della codifica per renderlo online. E per questo, è molto importante che il web designer comprenda i componenti del design da rappresentare come codice. Per questo, dovrebbero avere la conoscenza della codifica, non della piena comprensione ma con le basi.


0

Personalmente, tutto dipende dalle tue capacità e requisiti. Capacità di apprendere e afferrare rapidamente le cose. Requisiti in termini di finanze. Imparare qualcosa avrà bisogno di tempo. E questo per il momento ucciderebbe la tua produttività.

Quindi, se hai molto tempo per uccidere, vai avanti e impara a programmare.

Sono stato un designer negli ultimi quattro anni e sono bravo a modificare le cose di base. Non ho abbastanza tempo per imparare il codice in modo professionale.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.