Compilazione massiccia di strumenti di progettazione
I web designer hanno a disposizione un gran numero di strumenti, per fare tutto, dall'organizzazione dei loro pensieri su un particolare design al debugging del progetto finale.
Ma con così tanti strumenti là fuori, come mai determinare quali sono davvero utili e quali stanno andando a perdere tempo?
Abbiamo compilato una vasta lista di alcuni degli strumenti migliori e più utili disponibili per i web designer .
Lasciati di proposito nell'elenco sono strumenti comuni che molti designer probabilmente usano già (come Dreamweaver o Panic's Coda, Photoshop o GIMP e programmi software simili simili che praticamente tutti i designer hanno già nel loro toolkit).
Questi sono strumenti che ti faranno risparmiare tempo, renderti un designer più efficace, semplificare o accelerare il processo di progettazione, o altrimenti renderti la vita più facile.
Compilazione di strumenti offline
La maggior parte dei rastrellamenti di utili strumenti di progettazione Web si concentrano esclusivamente sugli strumenti online.
Ma ci sono un paio di strumenti molto utili che puoi utilizzare per aprire le tue opzioni quando si tratta di design. Queste cose possono rendere certe attività più semplici, incluso lavorare con client indecisi.
Tavolette grafiche
Le tavolette grafiche (anche a volte denominate tavolette grafiche, tavolette grafiche o tavolette grafiche) sono uno strumento incredibilmente utile nell'arsenale di un web designer. Mentre la maggior parte dei designer può disegnare abilmente con un mouse, un tablet rende tutto molto più semplice e veloce.
La maggior parte delle tavolette è costituita da due parti fondamentali: il tablet stesso e la penna (o lo stilo). Molti vengono anche con un disco (che funziona in modo simile al mouse, ma sul tablet stesso invece di un tappetino per il mouse o sulla scrivania). La considerazione principale per il tablet è la dimensione, mentre la considerazione principale della penna è la sensibilità alla pressione.
Le tavolette stesse sono disponibili in dimensioni che vanno da circa 4 "x 5" fino a 19 "x 13". Naturalmente, più grande è il tablet, più costoso sarà. Per la maggior parte, i web designer possono fare a meno dei tablet nella fascia più piccola dello spettro a meno che non abbiano in programma di fare un sacco di lavoro di illustrazione (e anche in questo caso è possibile ottenere risultati di qualità da un tablet di medie dimensioni).
E i tablet più piccoli sono più portatili, rendendoli convenienti per i designer che non vogliono essere sempre legati alla scrivania.
Le penne sono sensibili alla pressione per offrire un'esperienza più realistica . Le sensibilità comuni variano da 256 livelli di pressione fino a 2048 livelli. Più alto è il livello di sensibilità, più ti sembrerà di usare carta e penna.
Tavolette grafiche popolari
Wacom è probabilmente il produttore di tablet più famoso in circolazione. Hanno quattro diverse linee di prodotti: Bamboo (che include i loro prodotti Bamboo Craft e Bamboo Fun), destinati a consumatori e hobbisti; Graphire, il loro tablet Bluetooth; Intuos, la linea di fascia media per professionisti creativi; e Cintiq, la loro linea di fascia alta che incorpora un monitor nel tablet per un'esperienza "penna sullo schermo" (uno dispone anche di uno schermo da 21 ").
Aiptek fa una linea di compresse a basso costo che parte da soli $ 50. Offrono una tavoletta USB da 12,1 "per meno di US $ 130 (rispetto a US $ 469 per una tavoletta Wacom di dimensioni comparabili). L'offerta più interessante di Aiptek, tuttavia, è il My Note Premium (US $ 170) che ti consente di disegnare su un foglio di carta sopra il tablet con una penna reale e registra tutto ciò che fai. C'è abbastanza memoria per un massimo di 100 pagine scritte e viene fornito con uno slot per schede SD per espandere la sua capacità. E se vuoi usarlo solo per prendere appunti in una riunione, può essere scaricato con 4 batterie AAA, il che significa che non dovrai portare il tuo portatile con te.
UC-Logic è l'altro produttore principale di tavolette grafiche. I loro prodotti rientrano nella gamma media dei prezzi per i tablet, con un tablet 9 "x12" (il PF1209-Pro) che arriva a circa $ 250. Dispongono di tavolette disponibili a partire da soli $ 40.
Tavole d'umore
Le tavole Mood (anche chiamate tavole di ispirazione) sono un ottimo strumento per i designer che lavorano con clienti che potrebbero non avere un'idea chiara di ciò che vogliono.
Le tavole dell'umore spesso prendono la forma di un collage che include elementi di design per il progetto. Esempi di elementi inclusi potrebbero essere esempi di tipografia, schemi di colori, esempi grafici specifici o elementi generali di "umore" che riflettono la visione del progettista per l'impressione che il sito dovrebbe dare ai visitatori.
Le tavole dell'umore sono spesso utilizzate nel campo dell'interior design per mostrare ai clienti idee per ridipingere una stanza o un'intera casa. Sono anche utilizzati nel settore della moda per fungere da ispirazione e direzione per una linea o una stagione. Ma sono altrettanto preziosi per grafici e web designer.
A seconda del tipo di cliente con cui stai lavorando, potresti creare un collage sciolto con campioni che si sovrappongono in modo organico . Se il tuo cliente è in un campo creativo o ha familiarità con il processo creativo, questo tipo di mood board può funzionare abbastanza bene.
Se il tuo cliente, d'altra parte, è abituato a un ambiente aziendale o formale, la creazione di un mood board più organizzato è probabilmente più adatta.
Usa le intestazioni per mettere a parte la combinazione di colori, elementi di design specifici, tipografia e altre parti del tuo mood board per dare all'intero oggetto una certa struttura.
Se hai più idee per le direzioni in cui un progetto può andare, creare alcune diverse mood board può essere un ottimo modo per ottenere feedback dai clienti e perfezionare ulteriormente le tue idee.
Creare due o tre esempi diversi per mostrare un cliente può essere utile per ottenere ulteriori indicazioni dal tuo cliente senza passare ore o giorni su un vero e proprio mock-up del sito solo per sentirsi dire che non è niente come quello che stanno cercando.
E questo è davvero il principale vantaggio dell'utilizzo di moodboard nel tuo processo di progettazione. Generalmente un mood board richiede meno tempo rispetto a un mock-up del sito .
Usare le mood board per ottenere un ulteriore feedback da un cliente indeciso o insicuro prima di impegnarsi in un progetto che sarà rifiutato, rende tutti più felici.
Risorse per creare i tuoi Moodboard
Abbiamo pubblicato un articolo su Perché le questioni dell'umore sono importanti alla fine dell'anno scorso. L'articolo tratta le basi della creazione di mood board e perché dovresti usarle. È un ottimo punto di partenza.
Dal divano ha un video tutorial chiamato Creazione di una scheda dell'umore efficace . È lungo circa sette minuti e copre le basi della creazione di una mood board digitale per i progetti.
Flickr ha un Tavole di ispirazione pool che raccoglie immagini di mood e ispirazione da più discipline del design. È un buon posto per trovare un po 'di ispirazione o semplicemente dare un'occhiata ad esempi di come gli altri si avvicinano ai loro mood board.
Compilazione di strumenti online
Gli strumenti di web design online sono una dozzina di dollari. Ordinare attraverso di loro per trovare quelli che risaltano veramente può sembrare che richieda più tempo di quanto tu possa mai aspettarti di risparmiare usandoli.
Ma di seguito abbiamo trovato i migliori strumenti per tipografia, CSS, AJAX e Javascript, selezione del colore e strumenti per rendere più semplice la creazione di singoli elementi della pagina.
Ancora una volta, questi sono alcuni dei migliori strumenti disponibili per quello che fanno, quindi non dovrai perdere un sacco di tempo per testare decine di strumenti diversi.
Strumenti di tipografia
Esistono numerosi strumenti online per sperimentare la tipografia sui progetti del tuo sito web. Alcuni consentono di confrontare diversi tipi di carattere affiancati. Alcuni consentono solo di campionare uno stile alla volta. E altri ancora ti mostrano diversi stack di font consigliati.
Altri utili strumenti di tipografia Web includono app per convertire le dimensioni dei pixel in unità em e una varietà di Lorem Ipsum e altri generatori di testo fittizio. In tutto, ci sono strumenti tipografici là fuori per quasi ogni possibile esigenza di un web designer potrebbe avere.
Typetester
Typetester ti consente di confrontare fino a tre font affiancati .
È possibile selezionare qualsiasi tipo di carattere dal proprio computer o utilizzare i caratteri dal loro menu di caratteri di sistema comuni e tipi di carattere sicuri per il Web. Permette anche di cambiare il colore, la direzione, il tracciamento, le dimensioni e altre opzioni di stile.
È un ottimo strumento quando si tenta di decidere quali font utilizzare per elementi diversi o anche per compilare i propri stack di font (poiché consente di confrontare numerosi font affiancati).
Set di tipi CSS
Tipo di CSS consente di incollare qualsiasi testo che si desidera modificare in una casella, regolare i cursori e scegliere altre opzioni di formattazione, quindi copiare il CSS generato.
È un modo semplice e veloce per formattare qualsiasi testo di cui hai bisogno, dai paragrafi ai tag principali.
Le opzioni includono colore del testo, direzione, tracciamento, spostamento della linea di base, decorazioni del testo, allineamento e altro.
Migliori stack di font CSS
Sebbene non sia uno strumento tradizionale, di per sé, questo articolo offre una serie di alternative agli stack di font standard generalmente utilizzati nei CSS.
Oltre a offrire le linee guida per la creazione di stack di font personalizzati, questo articolo fornisce anche una vasta gamma di stack di campioni che è possibile utilizzare . Una risorsa eccellente quando ti senti un po 'perplesso sulle tue opzioni di tipografia.
HTML-Ipsum
La maggior parte dei generatori standard Lorem Ipsum online ti offre un blocco di testo e niente di più. E questo è bello se stai solo cercando di riempire un po 'di spazio.
Ma HTML-Ipsum ti dà il testo che è già stato contrassegnato con tag HTML di base (paragrafi, intestazioni, elenchi non ordinati, ecc.) In modo da poter vedere come tutti i diversi elementi interagiscono tra loro. È un enorme risparmio di tempo.
PXtoEm.com
PXtoEM.com fa esattamente quello che dice: converte i caratteri in pixel in caratteri di dimensioni em .
Le opzioni che ti dà sono ciò che lo rende uno strumento davvero impressionante e flessibile, però.
Puoi scegliere la dimensione del carattere di base del corpo e ottenere le conversioni in base alla dimensione del carattere predefinito del browser (quindi se, ad esempio, imposti la percentuale del font di base al 62,5% in modo che una dimensione di 10 pixel sia uguale a 1em, puoi selezionare quella come la tua dimensione predefinita).
Typechart
Typechart ti consente di sfogliare una serie di caratteri sicuri per il Web e di vedere come appariranno su entrambi i sistemi Windows e Mac .
Puoi trovare i caratteri in base alle dimensioni, che siano serif o sans-serif o enfasi. Include solo caratteri sicuri per il Web, quindi le opzioni offerte sono limitate. Ma per la tipografia di base, è un ottimo strumento che può fornire molta ispirazione.
Ed è possibile copiare e incollare il CSS per ogni stile senza uscire dalla pagina.
Capovolgimento Tipico
Flipping Tipico ti permette di visualizzare i caratteri comuni che hai sul tuo computer in un formato di griglia per rendere più semplice la scelta del font giusto per il tuo progetto attuale.
Questo è un ottimo strumento quando non sei interessato a usare solo i caratteri standard sicuri per il web e vuoi vedere più opzioni.
È particolarmente utile se non vuoi guadare centinaia di caratteri installati sul tuo computer e vuoi solo vedere quelli più popolari.
Strumenti CSS
I CSS sono quasi altrettanto importanti nel web design come HTML. E ci sono centinaia di strumenti là fuori per rendere il tuo CSS più pulito, più snello, più efficace e generalmente migliore che ti fa risparmiare tempo e fatica per perfezionare manualmente i tuoi fogli di stile.
La compressione dei fogli di stile, che può aiutare ad accelerare il tempo di caricamento dei tuoi siti, è semplificata utilizzando uno strumento online automatico. Esistono anche strumenti per eliminare dichiarazioni duplicate.
I cheat sheet mantengono gli elementi di base della CSS a portata di mano per quando il caffè non si è calmato abbastanza al mattino e hai difficoltà a ricordare quale ordine dovrebbe contenere il tuo markup stenografico.
Mentre la maggior parte di questi strumenti fa un ottimo lavoro per ripulire il tuo CSS, assicurati di tenere sempre un backup dell'originale e testare il prodotto finale generato. A volte un pulitore o un compressore rimuoverà qualcosa che è stato necessario dopo tutto, rompendo il tuo sito.
CSS SuperScrub
CSS SuperScrub mira a ridurre in modo significativo la complessità e la dimensione dei fogli di stile .
Elimina le chiamate ridondanti, elimina i contenuti non necessari e raggruppa gli elementi rimanenti per semplificare l'editing in un secondo momento.
Ci sono alcune opzioni, inclusa una per rimuovere tutti gli spazi bianchi nel foglio di stile, o per inserire una nuova riga prima di aprire le parentesi.
Codice Beautifier
Code Beautifier ottimizza e ripulisce i file CSS .
Offre un gran numero di opzioni per la formattazione del testo, compresa la compressione dei colori, l'ordinamento delle proprietà, la conversione di tutti i selettori in minuscolo, la conversione delle proprietà in maiuscolo o in minuscolo e la scelta del livello di compressione che si desidera utilizzare.
Puoi copiare e incollare i tuoi CSS nell'app o fornire un URL per il tuo file CSS.
Drive CSS
CSS Drive è un compressore CSS di base .
Puoi impostare il modo in cui vuoi che il tuo CSS sia compresso (leggero, normale o super-compatto) e come vuoi che esso gestisca i commenti (se eliminarli).
C'è anche una modalità avanzata che ti offre molte più opzioni, tra cui la rimozione di spazi attorno a determinati personaggi, la rimozione di schede, la rimozione di nuove linee e altro ancora.
Checker di ridondanza CSS
A volte nel processo di progettazione di un sito, potresti impostare selettori CSS che non finiscono per essere inseriti nel tuo markup finale.
Questi selettori non fanno altro che rendere i fogli di stile più voluminosi e difficili da modificare in seguito.
Il CSS Redundancy Checker passa attraverso il tuo foglio di stile e ciascuna delle tue pagine HTML per vedere quali selettori non vengono utilizzati e quindi li rimuove .
È un ottimo strumento da usare se pensi di poter avere selettori non necessari nei tuoi fogli di stile.
Indice di proprietà CSS
L'indice di proprietà CSS elenca ogni proprietà CSS in ordine alfabetico .
Facendo clic su una delle proprietà incluse, si ottiene una definizione e informazioni sul valore predefinito, i valori consentiti e se eredita da una proprietà padre.
Guida stenografica CSS
L'utilizzo delle proprietà CSS abbreviate rende i file CSS più piccoli rispetto all'utilizzo di proprietà longhand .
Ma ricordarsi in quale ordine tutti i diversi elementi vanno per tutte le diverse proprietà può essere un mal di testa, specialmente per quelli che potresti non usare in ogni singolo disegno che fai.
Include anche informazioni sui valori di proprietà predefiniti, quindi se scegli di escludere una proprietà, saprai che cosa assumerà il valore.
Strumenti a colori
Scegliere i colori giusti per i progetti del tuo sito Web può essere una delle decisioni più importanti che prendi nell'intero processo di progettazione.
A volte entriamo in un progetto con una combinazione di colori predefinita (ad esempio quando un cliente ha già stabilito i colori del marchio) o immediatamente sapere quali colori vogliamo utilizzare. Altre volte potremmo essere liberi di creare la nostra tavolozza per il design.
Se stai creando una combinazione di colori da zero, i generatori di palette di colori e le gallerie possono essere di grande aiuto.
Se hai già una combinazione di colori, ci sono altre considerazioni da prendere in considerazione, come l'accessibilità e quali colori usare su quali parti del sito.
Ma ci sono strumenti là fuori per aiutare anche con quelle decisioni. Di seguito sono riportati alcuni dei migliori strumenti disponibili per la gestione delle combinazioni di colori.
Filtro della pagina Web Colorblind
Considerando che da qualche parte tra il 7 e il 10% della popolazione maschile ha un certo grado di daltonismo (secondo Wikipedia ), assicurarti che i tuoi siti siano ancora accessibili a quella popolazione non è una cattiva idea.
Questo strumento mostra come appariranno i tuoi disegni alle persone con una serie di diversi disturbi da cecità. È possibile visualizzare i risultati per l'intero sito o escludere immagini dal risultato.
Forniscono anche un collegamento a uno strumento per la selezione del colore sicuro daltonico.
Trova i colori corrispondenti per il tuo sito web
Questo strumento per la tavolozza dei colori trova i colori che si coordinano con qualsiasi colore selezionato .
È possibile scegliere un colore tra le opzioni predefinite o immettere qualsiasi valore di colore esadecimale o RGB per ottenere tavolozze di coordinamento basate su schemi complementari, complementari divisi, triade, tetrade, analogici o monotoni.
I colori forniti sono tutti simili per intensità, il che significa che questo è davvero solo un punto di partenza per la creazione di tavolozze di colori per i tuoi progetti.
Generatore di tavolozze di colori
Le foto sono luoghi ideali per cercare l'ispirazione del design. Questo strumento può creare una tavolozza di colori da qualsiasi immagine scelta (basta inserire l'URL dell'immagine).
Fornisce schemi di colori opachi e vibranti in base all'immagine che fornisci.
Essere in grado di utilizzare qualsiasi immagine online rende davvero prezioso questo strumento, poiché risparmia il tempo di dover scaricare un'immagine e quindi di ricaricare nuovamente in un sito come questo per generare una combinazione di colori (o scaricare e quindi aprire in un programma di grafica per creare manualmente una tavolozza di colori).
Kuler
La galleria di colori Kuler di Adobe è una delle migliori gallerie di colori disponibili.
Puoi sfogliare o cercare oltre 10.000 tavolozze di colori inviate dagli utenti di Kuler e quindi scaricare o salvare i tuoi preferiti per riferimenti futuri.
Kuler include anche uno strumento per la creazione di una tavolozza davvero potente che ti consente di selezionare i colori con i cursori o in base ai valori cromatici HSV, RGB, CMYK, LAB o esadecimale.
L'impostazione di qualsiasi colore come colore di base modificherà quindi i colori circostanti per completare.
COLOURlovers
COLOURlovers è un'altra grande galleria di colori .
Puoi cercare oltre 800.000 combinazioni di colori (basate su 20 schemi per pagina e 43.200 + pagine di schemi). Oltre alle tavolozze, puoi anche cercare singoli colori e motivi basati sulle tavolozze.
Una delle funzioni più utili di COLOURlovers, tuttavia, è lo strumento per la creazione di modelli, che consente di creare modelli personalizzati basati su una combinazione di colori predefinita o su una creata al volo.
Assicurati di contattare il proprietario del copyright del modello se desideri utilizzarne uno per il lavoro commerciale.
100 colori casuali 2.0
Se davvero non hai idea di dove iniziare sulla combinazione di colori per uno dei tuoi progetti, 100 Colori casuali 2.0 potrebbe essere lo strumento giusto.
Fa proprio quello che dice il nome: ti presenta con 100 colori casuali, inclusi i loro valori esadecimali .
E se non trovi nulla nei primi 100, puoi semplicemente premere refresh e ricevere un set completamente nuovo!
Strumenti degli elementi individuali
Ci sono un sacco di generatori là fuori che rendono semplice e veloce la creazione di pulsanti, sfondi, moduli e altri elementi di design per i tuoi siti.
Alcuni di questi sono semplicemente ingannevoli, ma altri sono di grande aiuto se si desidera creare rapidamente qualcosa come un pulsante Web 2.0 o uno sfondo a strisce di base.
Anche gli strumenti per la creazione di form possono essere molto utili, specialmente se si desidera che i propri client siano in grado di eseguire alcuni dei propri lavori di amministrazione sui propri moduli.
Conosco almeno un paio di designer che usano questi strumenti in modo che non debbano creare un'interfaccia personalizzata e semplificata per accedere al database dei moduli o per modificare i moduli per i loro client. Sono un ottimo risparmio di tempo, soprattutto per la costruzione di forme più complicate.
Wufoo
Wufoo è un generatore di moduli HTML che offre più di 80 modelli di moduli e combinazioni di colori, consentendo inoltre il pieno controllo della creazione di moduli personalizzati per i tuoi clienti.
I modelli rendono più semplice e veloce la creazione di moduli Web standard (come pagine di registrazione o moduli di contatto).
I moduli inviati vengono automaticamente raccolti in un database che semplifica la stampa dei tuoi clienti, invia per e-mail le singole voci, filtra, ricerca ed esegue altre funzioni avanzate senza richiedere la creazione di un'interfaccia personalizzata.
Puoi anche utilizzare Wufoo per creare moduli d'ordine online e integrarli con Authorize.net, PayPal o Google Checkout.
BgPatterns
BgPatterns ti consente di creare pattern affiancati usando un'ampia varietà di diversi elementi ripetuti.
È possibile selezionare il colore di sfondo, la trama della tela e l'angolo del motivo. Puoi applicare gli sfondi che crei al sito di BgPatterns per l'anteprima, quindi scaricare l'immagine dopo averla finalizzata.
Puoi anche consultare i modelli creati da altri. È il modo più semplice e veloce per creare sfondi semplici e affiancati.
Stripe Generator 2.0
Creare strisce ripetitive per un sito Web richiede tempo.
Certo, puoi creare modelli per strisce comuni che potresti usare, ma cosa succede se vuoi una striscia pin per un progetto, una striscia larga per un'altra, e una per un angolo dispari per un'altra? Presto quei modelli non sembrano più tagliarli.
Lo Stripe Generator 2.0 offre strisce in una varietà di angoli , in qualsiasi larghezza tu scelga, con o senza ombre e gradienti e utilizzando qualsiasi colore esadecimale desiderato.
Includono anche una galleria di strisce dove puoi vedere ciò che altri hanno costruito.
Creatore di tartan
Se creare sfondi a strisce richiede molto tempo, creare sfondi a quadri è un enorme mal di testa.
È qui che entra in gioco Tartan Maker. Seleziona la dimensione del filato, i colori per il tuo modello e l'angolo e lo crea automaticamente.
Puoi visualizzare in anteprima i tuoi progetti a schermo intero e quindi scaricare il file.
Dotter di sfondo di Pixelknete
Questo generatore di sfondi crea uno sfondo punteggiato moderno con punti progressivamente più piccoli mentre si spostano lungo la pagina.
È possibile selezionare fino a due colori punto e due colori per uno sfondo sfumato (o solo un singolo colore per uno sfondo solido).
Puoi anche specificare l'altezza del pattern (il valore predefinito è 700 pixel). Lo sfondo creato ripete su un asse orizzontale.
Come generatore di pulsanti
Se ignori il testo tradotto male in questa pagina, vedrai che questo è uno dei generatori di pulsanti più fluidi disponibili . Aggiungi testo, sfumature, strisce, immagini e altro ancora ai tuoi pulsanti.
È possibile selezionare il pulsante e i colori del bordo, la dimensione complessiva (utilizzando cursori o campi di testo) e lo spessore del bordo e la forma arrotondata del pulsante.
Se includi strisce, ti vengono date molte opzioni, tra cui il colore, la trasparenza, lo spessore, lo spazio tra le strisce e l'angolo.
Questo è sicuramente il generatore di pulsanti più completo là fuori.
Button Maker
Questo generatore di pulsanti consente di creare facilmente pulsanti bicolore 80 × 15 pixel .
Seleziona i colori dei pulsanti, i colori del bordo, dove dovrebbe essere la divisione tra le caselle e inserisci il testo per ciascun lato, e il gioco è fatto!
Questo è uno di quegli strumenti che non è caricato con funzionalità ma fa ciò che è stato progettato per fare perfettamente e senza problemi.
Strumenti AJAX e JavaScript
Sappiamo tutti che Ajax può aggiungere un sacco di funzionalità al tuo sito. Sia che tu voglia aggiungere una semplice galleria di immagini, un modulo di contatto interattivo o creare un'intera applicazione web , Ajax è lì per aiutarti.
Ma partire da zero può essere scoraggiante, soprattutto se sei relativamente nuovo per Ajax. E anche se ti consideri un professionista, può essere ancora dispendioso in termini di tempo iniziare con una lavagna vuota per ciascuno dei tuoi progetti.
Ci sono molti strumenti là fuori per accelerare lo sviluppo di Ajax. Dalle raccolte di script ai framework a specifici generatori di elementi, c'è probabilmente qualcosa disponibile negli strumenti sotto che ti renderà uno sviluppatore più efficiente.
Ajaxload
Ajaxload è un generatore per creare icone del caricatore Ajax . Ci sono un sacco di icone diverse tra cui scegliere.
Tutto quello che devi fare è impostare i colori di primo piano e di sfondo (o scegliere uno sfondo trasparente) e quindi scaricare lo script generato.
Veloce e facile, ma ti risparmia qualche minuto (o più) di codifica!
Mini AJAX
Mini Ajax è una galleria di script Ajax e DHTML scaricabili .
Include tutto, dalle finestre modali alle presentazioni agli script più avanzati (come calendari e interi strumenti di gestione dei progetti).
È un ottimo punto di partenza per trovare singoli elementi Ajax o anche solo per trarre ispirazione.
Ci sono demo disponibili per molti script e tutti sono scaricabili dalle loro fonti originali.
MooTools
MooTools è un framework JavaScript orientato agli oggetti . Non è sicuramente progettato per i principianti, ma ti consente di scrivere app Ajax flessibili e potenti compatibili con browser diversi.
È anche conforme agli standard e incredibilmente ben documentato.
Oltre al core builder, ci sono anche un sacco di plugin disponibili. MooTools può essere utilizzato per creare tutto, dalle semplici gallerie di immagini per completare le interfacce utente.
jQuery
jQuery è una libreria JavaScript che semplifica una varietà di funzioni JavaScript .
Una delle parti migliori di questo particolare strumento, però, è il numero di plugin già disponibili per jQuery.
Esistono plug-in pronti per tutto, dalle semplici animazioni alle maschere ai widget agli elementi avanzati dell'interfaccia utente.
Probabilmente è già disponibile un plug-in per qualsiasi cosa tu voglia fare con JavaScript o Ajax, o almeno uno da usare come base per crearne uno tuo.
Script.aculo.us
Script.aculo.us è una libreria di interfaccia utente JavaScript che include un framework di animazione, controlli Ajax, utilità DOM e altro .
È utilizzato da Apple, CNN, Basecamp e Ruby on Rails. È basato sul framework prototipo.
C'è una vasta documentazione disponibile nel wiki Script.aculo.us, che facilita l'avvio.
Strumento di compressione JavaScript online
La compressione dei file JavaScript li fa caricare più velocemente, consumare meno larghezza di banda e occupare meno spazio sul server. Questo strumento semplifica la compressione.
Basta copiare e incollare i file JS (o caricarli) in questo strumento e quindi selezionare se si desidera comprimere utilizzando Minify o Packer.
Sputa automaticamente un codice più pulito e più efficiente. Assicurati di testare accuratamente i risultati e di conservare sempre un backup del tuo file originale.
JavaScript Beautifier
Se il tuo JavaScript è un po 'disordinato di quanto desideri (o quasi impossibile da decifrare perché è formattato in modo così scadente), eseguilo attraverso questo beautifier per ottenere script accurati, puliti, con formattazione coerente che sono più facili da leggere e modificare in seguito .
Le impostazioni utilizzate sono minime, ma puoi scegliere quanti spazi utilizzare per i rientri, se rilevare i packer e se conservare le interruzioni di riga.
Ancora una volta, assicurati di testare il codice finale e di tenere a portata di mano un backup in caso di problemi nel codice appena abbellito.
BrowserShots
Sfortunatamente, i diversi browser rendono i siti in modi leggermente diversi. Questo può essere un enorme problema, specialmente se i tuoi clienti utilizzano un browser e ne stai utilizzando uno completamente diverso.
Se vedono cose che non vengono mostrate alla fine (o viceversa), possono creare problemi su entrambi i lati.
Puoi sempre installare più browser sul tuo computer, ma a) questo è uno spreco di spazio su disco eb) e per quanto riguarda i browser che non sono disponibili per il tuo sistema operativo? Ecco dove BrowserShots entra.
Puoi scegliere da praticamente tutti i principali browser esistenti, inclusi browser oscuri come Minefield ed Epiphany.
BrowserShots mostra gli screenshot solo dei browser che hai scelto di visualizzare , quindi puoi sceglierne quanti ne vuoi quanti ne vuoi.
Ricorda che più browser sceglierai per testare, più tempo ci vorrà. Il modo in cui BrowserShots è impostato, però, puoi semplicemente aggiungere un segnalibro alla pagina e tornare più tardi per vedere i tuoi risultati.
Firebug
Nessun elenco di strumenti di web designer sarebbe completo senza menzionare il plugin Firebug per Firefox .
Spesso pensato come il singolo strumento più prezioso nell'arsenale di un designer , Firebug rende il debugging e la modifica del codice (che sia JavaScript, CSS o HTML) infinitamente più semplice.
Puoi modificare il tuo CSS direttamente nel tuo browser. Visualizza il modo in cui le tue scatole CSS sono allineate. Modifica qualsiasi elemento sulla tua pagina direttamente nel tuo browser.
Esegui il debug del tuo JavaScript e trova gli errori più velocemente. E questo è solo graffiare la superficie di ciò che Firebug può fare.
È davvero uno strumento indispensabile per ogni designer là fuori. Una volta che lo usi, ti chiedi come hai mai progettato senza di esso.
Compilato in esclusiva per WDD da Cameron Chapman.
Quali strumenti usi di più? Quali altri strumenti usi che potremmo aver perso?