Suggerimenti e strumenti utili per gli esperimenti di Web design

L'articolo di oggi ti incoraggia a prendere l'abitudine di dedicare del tempo a piccoli esperimenti. Testare idee e risolvere problemi in un ambiente a bassa pressione e forse anche divertente può potenziare enormemente la tua istruzione e portare a fantastiche innovazioni.

Inizieremo con alcuni vantaggi e suggerimenti per sperimentare progetti di sviluppo web e concluderemo con un breve sguardo alcuni degli strumenti che uso personalmente per comporre i miei esperimenti. Iniziamo!

I vantaggi della sperimentazione

La sperimentazione è una cosa potente. In effetti, lo chiamerei un elemento assolutamente cruciale nella formazione continua di qualsiasi sviluppatore web, sia che lo abbiate fatto per dieci giorni o dieci anni. Tutta la conoscenza del web design nel mondo non significherà lo squat se non salti e ti sporchi le mani.

? Il modo migliore in assoluto per me di imparare qualcosa in questo campo è quello di accendere un editor di testo e dargli un colpo da solo.?

Leggo regolarmente libri di web design e, almeno, sfoglio, se non consumo completamente diversi tutorial di web design ogni giorno. Queste sono grandi risorse, tuttavia, il modo migliore in assoluto per me per imparare qualcosa in questo campo è quello di accendere un editor di testo e dargli un colpo da solo.

Teoria e istruzione sembrano avere un posto abbastanza temporaneo nel mio cervello, ma un progetto pratico si immerge profondamente nella mia memoria a lungo termine. La ragione è di solito piuttosto semplice: la frustrazione. La verità è che regolarmente fallisco quando cerco di realizzare un'idea o un esperimento specifici. Il più delle volte le cose semplicemente non funzionano così bene come immagino lo faranno e il risultato sono io seduto e armeggiare con un problema per ore e ore.

La frustrazione mi sfida. Una volta affrontato un problema che non riesco a risolvere immediatamente, risolvo di batterlo ad ogni costo. Il progetto in sé è di poca o nessuna conseguenza, è l'atto di lavorare fuori che mi costringe ad aumentare la mia base di conoscenze, che a sua volta aiuta in tutti i progetti futuri in futuro.

Suggerimenti per la sperimentazione

Prima di dare un'occhiata ad alcuni degli strumenti che uso personalmente per cancellare rapidamente le mie idee, passiamo ad alcune cose di base da tenere a mente quando ti imbarchi in esperimenti di sviluppo web.

Non hai bisogno di un obiettivo

È assolutamente d'aiuto avere un obiettivo o una destinazione in mente quando si suona con un po 'di codice, ma in realtà non si dovrebbe evitare la pratica solo perché non si ha una grande idea o un dilemma.

Gli scrittori spesso si impegnano in questo esercizio in cui si limitano a sedersi e annotare i propri pensieri mentre arrivano, è una grande abitudine entrare e può davvero generare alcune idee di scrittura solide. Come sviluppatore, dovresti provare la stessa cosa. Se ti annoi un pomeriggio e hai trenta minuti per uccidere, inizia a programmare per vedere dove ti porta. Sembra terribilmente noioso per gli estranei, ma credimi, se sei nella giusta professione, ti piacerà ogni minuto.

Dig Around nel codice di altre persone

Non è necessario ricominciare da capo durante la sperimentazione, uno dei modi migliori in assoluto per imparare nuove tecniche è quello di aprire il codice di qualcun altro per vedere che cosa lo rende interessante. Una volta entrato, non solo sfogliare, iniziare a cambiare le cose e commentare le sezioni per vedere come risponde la pagina. Ricordati sempre di chiedere? Perché ?? quando vedi qualcosa che non capisci!

Alcuni ottimi posti da cui iniziare sono i framework e le piastre prefabbricate come la piastra metallica HTML5. Questi tipi di strumenti sono creati per una facile navigazione, quindi oltre ad essere abbastanza avanzati, tendono anche ad essere estremamente ben documentati e organizzati.

Dimentica le regole

Quando stai codificando un sito web professionale, assicurati di essere il tuo miglior comportamento con codice semantico valido e compatibilità cross-browser. Tuttavia, quando stai sperimentando, non aver paura di gettare attenzione al vento e provare qualsiasi cosa ti venga in mente.

Nel risolvere un problema, è importante sapere cosa funziona e perché, anche se la tua soluzione risulta inaccettabile in un ambiente web dal vivo, potrebbe aiutarti a raggiungere quello che è.

Inoltre, tra HTML5 e CSS3, ci sono un sacco di nuove tecniche là fuori che aspettano solo di provare a dare un'occhiata al web design in futuro. Molti di loro funzionano solo con due browser o meno, ma questo non significa che non ne valga la pena di scavare e vedere come funzionano!

Una volta che hai finito di creare il tuo mostro web di Frankenstein, eseguilo attraverso un validatore o uno strumento per sfilacciare per vedere alcune spiegazioni sul perché non è corretto e suggerimenti su come risolverlo.

Completa il tutorial

Un altro grande catalizzatore per la sperimentazione è un tutorial sul web design come quelli che vedi su questo sito e altro. Ogni volta che ne vedi uno, sfogliatelo e chiedetevi se la soluzione presentata è la migliore.

Non seguire semplicemente le istruzioni senza pensare, pensa a come puoi migliorare il processo riducendo le inefficienze. Il competitivo tra voi scoprirà che, di fronte ad un avversario che stai cercando di fare meglio, sarai guidato molto più lontano di quanto faresti normalmente.

Strumenti per la sperimentazione

Piuttosto che darti una lista enorme di risorse che devi ordinare attraverso te stesso per trovare le vere gemme, ho deciso di ridurre questa offerta e presentare solo quegli strumenti che uso personalmente per la sperimentazione.

Gli strumenti sottostanti sono abbastanza simili nel concetto, ma sono abbastanza diversi da trovarmi a utilizzarli per cose diverse. Mentre li provi e ti fai un'idea per ognuno di loro, vedrai cosa intendo.

Espresso per Mac

Iniziamo con l'unica risorsa non libera presente nell'elenco. L'espresso non è semplicemente uno strumento per la sperimentazione, è un IDE professionale completo che ti porterà a circa $ 80. Se sei un web designer professionista, vale ogni centesimo.

Ci sono un milione di motivi per cui è ottimo per agire come ambiente di programmazione principale, ma la ragione principale per cui è fantastico sperimentare è la finestra di anteprima dal vivo. Durante la codifica, l'anteprima HTML viene aggiornata in tempo reale senza un aggiornamento manuale.

Usa Divvy o qualche strumento simile per dividere il tuo spazio sullo schermo tra il tuo codice e le finestre di anteprima e ti sei procurato un imbattibile workflow di sperimentazione. Un altro fantastico vantaggio qui che spesso non troverai negli strumenti online gratuiti è il completamento automatico, il che ti fa risparmiare molto tempo di digitazione e ti permetterà di sbarazzarti di questi esperimenti in un terzo del tempo.

Se sei già un fan dell'Espresso, dai un'occhiata alla versione di Espresso 2 di Kaboom!

CSSDesk

Vuoi un ambiente di programmazione che aggiorni dal vivo ma non ti costa un centesimo? Dai un'occhiata a CSSDesk. Questo fantastico piccolo strumento comprende tre aree principali: CSS, HTML e anteprima. Mentre esegui il codice nel piccolo cassetto espandibile sul lato sinistro dello schermo, l'anteprima a destra si aggiorna in tempo reale, rendendolo un modo fantastico per provare rapidamente qualsiasi idea di web design che potresti avere.

CSSDesk è estremamente utile e ha alcune funzioni davvero grandi, inclusa la possibilità di condividere o scaricare le tue creazioni. Una cosa unica che non ho visto da nessun'altra parte è la possibilità di personalizzare lo sfondo per i tuoi esperimenti. Questo è davvero fantastico quando non stai codificando un'intera pagina, ma preferisci concentrarti su un singolo oggetto.

Amerai anche i vantaggi della numerazione delle righe, l'evidenziazione del codice e la possibilità di nascondere completamente il cassetto del codice per vedere il tuo esperimento nelle dimensioni dell'intera finestra.

jsFiddle

jsFiddle è molto simile a CSSDesk, solo con un notevole miglioramento delle funzionalità (che può essere un pro o contro per un semplice esperimento). Per i principianti, come suggerisce il nome, qui c'è una forte enfasi su JavaScript. Tuttavia, non è necessario scrivere una singola riga di JavaScript perché ciò sia utile.

In jsFiddle, hai quattro aree ridimensionabili, una per HTML, CSS, JavaScript e un'anteprima. A differenza delle precedenti due scelte, l'anteprima deve essere aggiornata manualmente ogni volta che si desidera visualizzarla.

Una caratteristica fantastica di jsFiddle è la possibilità di caricare rapidamente le librerie JavaScript più popolari come MooTools e jQuery. Puoi anche salvare, condividere e sborsare il tuo lavoro e ci sono pulsanti per riordinare il tuo codice e lasciare commenti sugli esperimenti degli altri.

Mi piace molto l'ambiente CSSDesk semplice ed efficace, ma in realtà jsFiddle è il mio posto dove andare online per esperimenti rapidi. Semplicemente adoro questo strumento e non posso raccomandare abbastanza da farti prendere un'abitudine settimanale dal prendere tempo per venire qui e armeggiare con idee o problemi che hai avuto.

Conclusione

Per riassumere, la sperimentazione frequente è fondamentale per la tua crescita come web designer e sviluppatore. È fin troppo facile cadere nella trappola di ricorrere agli stessi vecchi metodi su ogni singolo progetto che si intraprende, il che può facilmente provocare una stagnazione di talenti. Non c'è nulla di più pericoloso per la carriera di un web designer che restare indietro e diventare obsoleti!

I suggerimenti per la sperimentazione di cui sopra sono rivolti principalmente ai programmatori ma possono essere facilmente applicati anche ai pixel pusher. Qui il tuo parco giochi sarebbe semplicemente Photoshop, Illustrator e / o Fireworks, ma i suggerimenti generali di sperimentazione a mano libera, guardando al lavoro degli altri per ispirazione e rompendo le tue abitudini tipiche, si applicano ancora.

Lascia un commento qui sotto e facci sapere quanto tempo dedichi semplicemente a giocare e provare nuove cose. Quanto valore ricevi da questo momento e quali strumenti usi?