Nuovo collegamento gratuito con strumenti e risorse per la progettazione Web. Il design è facile se lo fai in modo intelligente!

Design Studio
26 Settembre 2018 Diana Parker
Share Tweet Share Pin

Ci possono essere troppi strumenti gratuiti per accelerare / ottimizzare il processo di Web design? Certamente di no, come nuove tecnologie avanzate che crescono come i funghi. Ogni giorno, gli sviluppatori di Web, trovano qualcosa nuovo ed interessante. Ma ci vuole tempo per cercare il contenuto pertinente in rete.

Risparmia tempo ed energia per la creazione. Monster Post è qui per soddisfare la tua sete di conoscenza. L'autore di questo post ha già scoperto 137 strumenti di sviluppo Web gratuiti e risorse progettuali che potrebbero interessare i sviluppatori di Web, e agli sviluppatori entusiasti. Scommetto che alcuni strumenti di progettazione Web gratuiti semplificheranno davvero il tuo ciclo di lavorazione, alcuni dei migliori strumenti di sviluppo Web ti sorprenderà e alcuni ti terranno aggiornato.

Tutti gli strumenti, gli articoli, i tutorial, i plug-in, i suggerimenti e i trucchi descritti in questo articolo non ti costeranno un centesimo. La nostra squadra si sforza a farti risparmiare il tuo denaro, quindi raccoglie il materiale gratuito al primo turno (se garantisce un focus speciale, ovviamente). Se qualche strumento non è completamente gratuito, ha un periodo di prova gratuito certamente. Durante questo periodo sarai in grado di strapparlo e indossarlo come preferisci o di capire se vale davvero la pena. Alcuni dei prodotti hanno piani gratuiti e a pagamento, che consentono anche di familiarizzare te stesso con l'innovazione senza estrarre il portafoglio dalla tasca posteriore di tuoi jeans.

  • Macaw - Uno strumento di Web design che consente di interrompere la scrittura del codice e iniziare a disegnarlo. Macaw offre la stessa flessibilità del tuo editore di immagini preferito, ma scrive anche HTML semantico e CSS incredibilmente conciso.
  • Gravit - Gravit è uno strumento di progettazione per Web professionale per i progettisti e novizi. Con il suo aiuto puoi facilmente creare bellissimi loghi, biglietti da visita, siti Web, volantini e copertine dei social media.
  • Lucidpress - Permette di creare e condividere contenuti visivi stupendi: fascicoli, volantini, notiziario, relazioni, pubblicazioni digitali, volantini on-line, riviste digitali e altro ancora. Elimina la curva di apprendimento dei software di layout e di progettazione tradizionali, quindi sia i designer nuovi che quelli esperti si sentiranno a casa.
  • Sparkle - Strumento del design vettoriale che ti offre infinite possibilità di espressione. Sparkle non ti blocca con modelli rigidi, il layout è in forma libera. Lo strumento è pagato, ma ha una versione di prova gratuita.
  • LogoGala - I progettisti possono inviare i loro lavori alla galleria o semplicemente sfogliare la galleria per ispirazione.

  • Fabricator - Organizza il tuo sistema di progettazione nel modo che desideri. Genera una guida di stile dal codice di tuo kit di strumenti. Scrivi la documentazione in markdown per rendere il tuo kit di strumenti facile da usare per altri sviluppatori.
  • Uilang - Uilang è utile per creare componenti personalizzati dell'interfaccia utente, aggiungendo interattività al tuo sito, costruendo prototipi e così via. Non è richiesta alcuna esperienza di programmazione.
  • Anijs - Una libreria per migliorare le tue capacità di Web design senza coding. Fornisce una migliore integrazione tra progettisti e programmatori, è facile da usare, veloce, funziona bene su iPad, iPhone, Android e sui browser moderni.
  • ColorFavs - Questo è il posto che rende facile da creare e scoprire nuovi colori e tavolozze per tutti i tuoi progetti.

  • Froont - Crea pagine responsive da solo, senza il coinvolgimento dello sviluppatore. Ogni pagina è creata con FROONT ed è una pagina statica che è facile da creare e caricare rapidamente.
  • STATNUT - STATNUT è una posizione centrale per tutte le tue statistiche Web. L'applicazione è bella e colorata.
  • Designfeed - In realtà, puoi dire a Designfeed cosa vuoi ed egli crea automaticamente un numero infinito di varianti di design tra cui puoi scegliere. Lo strumento crea automaticamente versioni perfettamente dimensionate del tuo design per la pubblicazione su tutte le tue sucial media.
  • Bonsai - Scopri i tassi di freelance con Bonsai. Aiuta ai più di 10.000 freelancer migliori a essere pagati in tempo. Ricevi 5 fatture gratuite al momento della registrazione.
  • The Pattern Library - The Amazing Pattern Library è un progetto in continua evoluzione che rispetta i modelli condivisi dai designer più talentuosi che puoi utilizzare liberamente nei tuoi progetti. La collezione di modelli e la qualità sono di prima qualità
  • Write a Book - Stai pensando di condividere le tue conoscenze in un libro o di progettare un libro per la terza parte? Questo bellissimo strumento di produzione si occupa della formattazione e della conversione, prima ancora di aver finito di scrivere.
  • Hack - rismarmi il tuo tempo con qualsiasi strumento di modifica dei font moderni e personalizzarlo per le tue esigenze. Include set obliqui regolari, bold, bold e oblique a tutto campo per coprire tutte le esigenze di evidenziazione della sintassi. Fornisce oltre 1500 glifi che includono set di caratteri latini, greci moderni e cirillici espansi amorevolmente sintonizzati.
  • Desygner - Con Desygner puoi modificare da un computer, tablet o telefono, importare immagini e testo da Adobe PDF, PSD e Microsoft Powerpoint. Offre milioni di immagini pubbliche gratuite da utilizzare con drag-and-drop, migliaia di sfondi, adesivi e testi gratuiti. Condividi online o scarica come PDF, JPG o PNG gratuitamente.
  • CMD space - Ogni progettista ha bisogno di un portfolio. Lo strumento si connette al tuo account Dribbble dandoti la possibilità di creare un portfolio di design immediatamente.
  • WeVideo - WeVideo è una piattaforma collaborativa per creare video, basata su cloud. Non è necessario d’essere professionisti per creare video di alta qualità. Tuttavia, puoi controllare l'aspetto del tuo video includendo le transizioni, movimento veloce / lento, Green Screen e altro. WeVideo permette di salvare il tuo disco rigido. Carica nel cloud. Inizia da un computer e riprendi da dove hai interrotto su un altro.
  • Semplice - Il primo sistema di portfolio con Responsive case study con funzionalità avanzate per piccoli studi e startup.
  • Visage - Hai bisogno di creare molti contenuti visivi? Visage è uno strumento di progettazione che semplifica la creazione dei contenuti di moda a differenza dei fornitori lenti e costosi.
  • Ezgif - Ezgif.com è un generatore semplice di gif-online e un set di strumenti per la modifica di gif-animate di base. Qui puoi creare, ridimensionare, ritagliare, invertire, ottimizzare e applicare alcuni effetti alle gif. Puoi usare questi strumenti online per quasi tutti i tipi di immagine (jpeg, png, bmp, tiff).
  • Imgix - Con Imgix puoi ridimensionare ed elaborare le immagini in tempo reale con semplici comandi URL. Inserisci un URL imgix o fai clic su un esempio e sandbox analizzerà ogni trasformazione di immagine per te mentre modifichi e aggiungi nuove operazioni.

  • Craft - Craft è il nuovo punto di riferimento per gli utenti di plug-in interfacce Sketch. Ti permette la manipolazione diretta, trattamento simile a WYSIWYG per dati finti. Dispone inoltre di una semplice interfaccia integrata per estendere i dati di esempio copiando e incollando file di testo piatto. Facendo i clic sui blocchi di contenuti dei siti Web esistenti per estrarre i dati nel proprio progetto è un altro approccio pratico.
  • Mobile Wireframe Kit - Mobile Wireframe Kit è un documento Sketch costituito da alcuni degli elementi dell'interfaccia utente più comunemente utilizzati nella progettazione di applicazioni mobili.
  • Sketch Plugins - Una raccolta di plug-in per Sketch creata da sviluppatori in conto terzi.
  • Sketch Toolbox - Un semplice gestore di plugin per Sketch. Ti consente di consultare i plugin più popolari disponibili per Sketch. Scarica e installa i nuovi plugin con un solo clic. Mantiene automaticamente tutti i plug-in aggiornati.
  • Sketch Land - Un elenco delle risorse più utili per chi usa Sketch.
  • Craft - Craft è una suite di plug-in per Sketch e Photoshop che permette di progettare con dati reali, importare dati ricchi e duplicare risorse di progettazione in modo rapido.
  • Bjango - Un set completo di modelli, icone, applicazioni per Photoshop, Illustrator, Sketch e Affinity Designer. I modelli coprono Android, iOS, OS X, Apple TV (TVOS), Apple Watch (watchOS), Windows, Windows Phone e Web favicon. Oltre a una raccolta di azioni Photoshop, script Photoshop, regole Hazel, progresso del lavoro OS X e altre cose casuali per screen progettisti e sviluppatori.
  • Sketch Palettes - Un plug-in di Sketch che permette di salvare e caricare i colori nel raccoglitore di colori.
  • Marvel - Marvel è un plug-in per Sketch per la creazione di prototipi dei dispositivi mobili e Web.
  • Cognitom - Un set di modelli per creare un font di simbolo o un font di iconi con Sketch.

Strumenti per Mac solo

  • RapidWeaver - Progetta, costruisci e pubblica il tuo sito Web utilizzando questo straordinario strumento per Mac.

Strumenti UI/UX

  • UI - Un'ispirazione quotidiana raccolta dall'archivio dell'interfaccia utente e non solo. Oltre 2200 progetti suddivisi in 117 categorie.
  • Heat Map - La mappa termica ti aiuterà a capire quali elementi delle pagine Web ricevono più o meno attenzione. Il risultato è in genere disponibile in meno di 20 secondi. Non è necessario inserire codici speciali o script. L'algoritmo è basato su ricerche scientifiche.
  • Marvel - Trasforma i design e i schizzi in prototipi iOS trascinandoli in Marvel, invia il tuo prototipo agli utenti e avvia i test. Guarda esattamente cosa è successo in ogni punto del tuo prototipo e condividi i risultati con la tua squadra.

Lezione UI/UX

  • Im Creator - Questo è più di un solo tipico costruttore di siti Web. Qui usi strisce e poligoni pronti per la creazione. Non è necessario codificare e i risultati sono pienamente Responsive e Google friendly. Inoltre viene fornito con eCommerce e blogging.
  • StackHive - StackHive ti consente di progettare siti Web responsive pixel perfetti tramite l'interfaccia drag and drop e genera automaticamente codice di qualità di produzione HTML, CSS e JS. Fornisce ampi pannelli di stile e animazione per controllare ogni aspetto del design e delle interazioni.
  • RAML - Con RAML puoi vedere come appare la tua API mentre la progetta in un testo semplice di facile lettura. Non è necessario scrivere una singola riga di codice. Non puoi solo perfezionare la tua progettazione dell'API, ma creare una simulazione completamente funzionale per clienti, soci e ingegneri interni da rivedere e ampliare.
  • Design Research Techniques - Questo è un deposito on-line per Design Research Techniques. Queste tecniche aiutano a far evolvere il ciclo di vita del progetto attraverso la partecipazione di più parti interessate, inclusi potenziali utenti o pubblici, soci o squadre interni.
  • Surreal CMS - Surreal CMS si collega al tuo sito eb tramite FTP, SFTP o Amazon S3 per apportare modifiche. Non dovrai mai più preoccuparti degli aggiornamenti. I tuoi clienti potranno modificare il contenuto solo all'interno degli elementi specificati. Tutte le modifiche sono tracciate in modo da poter vedere cosa stanno facendo i tuoi clienti e persino tornare alle versioni precedenti, se necessario. Prova gratuita di 14 giorni disponibile.
  • Brackets - Un editor di testo open-source per i web designer di Adobe scritto in JavaScript, HTML e CSS.
  • Web Designer - Crea progetti interattivi e grafici HTML5 accattivanti e interattivi che possono essere eseguiti su qualsiasi dispositivo. Questa è una suite di design completa che ti consente di dare vita a qualsiasi visione. Lo strumento gestisce HTML5 e CSS3, quindi sei libero di concentrarti sulla creazione di fantastiche esperienze visive.
  • Responsive Web Design Tester - Metti alla prova il tuo design su qualsiasi dispositivo, visualizza rapidamente in anteprima i tuoi progetti di siti Web responsive alle dimensioni che saranno visibili sui gadget mobili più popolari.
  • Browser Shots -Browsershots crea screenshot del tuo Web design in diversi sistemi operativi e browser. In questo modo puoi testare la compatibilità del browser del tuo sito Web in un unico posto.
  • Fenix Web Server - Fenix è un semplice server Web desktop statico. Ottimo per sviluppatori e designer che lavorano con siti statici. Con Fenix puoi accendere / uccidere server Web statici, rileva automaticamente le porte disponibili. Include un cestino della richiesta, supporto Growl, rendering Markdown e uno strumento da riga di comando lucido. Ti consente di gestire visivamente i siti locali affiancati, con miniature, registri e altro, di sviluppare localmente e condividere online tramite localtunnel.
  • NW.js - NW.js ti consente di chiamare tutti i moduli Node.js direttamente dal DOM e abilita un nuovo modo di scrivere applicazioni nei moderni HTML5, CSS3, JS e WebGL.
  • Commerce.js - Lo strumento consente di creare rapidamente belle esperienze di eCommerce che iniziano con poche righe di codice.
  • Valence - Valence è un componente aggiuntivo sperimentale che consente agli strumenti di sviluppo di Firefox di eseguire il debug di una più ampia varietà di browser, non solo i browser basati su Gecko, Firefox per Android e Firefox OS. Gli obiettivi iniziali di debug sono Chrome su Android, Chrome Desktop e Safari su iOS.
  • Bedrock - Questo è un file di WordPress con moderni strumenti di sviluppo, una configurazione più semplice e una struttura delle cartelle migliorata.
  • MJML - MJML è un linguaggio di markup che riduce il dolore della codifica di una e-mail responsive. La sua sintassi semantica rende semplice e diretta la sua ricca libreria di componenti standard che velocizza i tuoi tempi di sviluppo e alleggerisce la tua base di codice email.
  • Firebug - Lo strumento di sviluppo Web più popolare e potente che consente di ispezionare HTML e modificare lo stile e il layout in tempo reale. Usa il debugger JavaScript avanzato disponibile per qualsiasi browser, analizza con precisione l'utilizzo e le prestazioni della rete, estendi Firebug e aggiungi funzionalità per rendere Firebug ancora più potente.
  • Web Starter Kit - Web Starter Kit è un modo semplice per iniziare un nuovo progetto. Viene fornito con tutti i file necessari per avviare un nuovo progetto Web, tra cui un processo di compilazione, uno standard HTML e stili. Un layout responsive è incluso nel kit.
  • UserForge - Crea rappresentazioni realistiche dei tuoi gruppi di utenti con meno scatti di quanto impiegherebbe utilizzando software di progettazione o elaboratori di testi, mantieni le parti interessate in sincronia in ogni fase, inviti le persone a collaborare e contribuisci al processo di iterazione attraverso commenti e discussioni, o semplicemente condividi il tuo l'URL univoco di persona con chiunque per l'accesso alla presentazione di sola lettura.
  • Kore - Kore è un framework di applicazioni Web di facile utilizzo per la scrittura di API Web scalabili in C. I suoi obiettivi principali sono la sicurezza, la scalabilità e il rapido sviluppo e distribuzione di tali API.
  • Hoodie - Hoodie con cappuccio è un backend completo per le tue applicazioni: sviluppa il tuo codice frontend, collegalo alla nostra API e goditi la tua applicazione già pronta.
  • Tumult Hype - Crea bellissimi contenuti Web HTML5 senza richiedere la codifica. I contenuti Web interattivi e le animazioni realizzate con Tumult Hype funzionano su desktop, smartphone e iPad.
  • WebShell - WebShell è un'applicazione Web bundle per l'applicazioni OS X senza codifica.
  • UberBot - Se vuoi confrontare le tue abilità con quelle dei tuoi amici, condividi il bot e vedi se riescono a batterlo.
  • WatchPeopleCode - Qui puoi vedere i livestream di persone che codificano.
  • Mobirise - Mobirise è un'applicazione offline per Windows e Mac per creare facilmente siti Web di piccole / medie dimensioni, pagine di destinazione, curriculum on-line e portfolio, siti di promozione di applicazioni, eventi, servizi e prodotti.
  • GrapesJS - GrapesJS è uno strumento di nuova generazione per la creazione di modelli senza codifica.
  • Mailmalade - Questo strumento consente di creare rapidamente email HTML compatibili con i tuoi file di progettazione. Non avrai nemmeno bisogno della tua conoscenza di programmazione.
  • Challenge Hunt - Challenge Hunt è un concorsi di programmazione open source e un aggregatore di hackathon. È possibile visualizzare tutti i concorsi di codifica attivi, imminenti, hackathon, assunzioni e scienze dei dati in un unico posto.
  • Lytmus - Lytmus è uno strumento di interviste dal vivo per le persone che intervistano gli ingegneri. Condurre interviste per ruoli di back-end, front-end, full-stack, sviluppo mobile e analista di prodotto. Scegli tra 21 lingue, 6 framework e 10+ strumenti su un computer virtuale nel tuo browser.
  • Etleap - Lo strumento consente di connettere tutte le fonti di dati che ti interessano, analizzare i tuoi dati più rapidamente che mai e non preoccuparti mai più dell'ETL.
  • Experimental Platform - Essendo uno sviluppatore, sarà divertente per te creare alcune delle seguenti cose con la piattaforma sperimentale. Un semplice indicatore della qualità dell'aria che utilizza una luce intelligente che passa dal verde al rosso a seconda dei livelli di CO₂. Timer di cottura a base vocale. Le telecamere di sicurezza basate su ip si accendono ogni volta che blocchi la tua casa usando uno smartlock.

Strumenti di collaborazione per lo sviluppo Web

  • Figma - Con la figma puoi fare progetti di design online, lavorare con gli altri sullo stesso design, allo stesso tempo. Il tuo lavoro viene costantemente salvato (le vecchie versioni sono accessibili con un clic). Lo strumento funziona su qualsiasi sistema operativo ed è gratuito durante la versione di anteprima.

CSS Tools

  • HTML Cheat Sheet - Questo cheat HTML interattivo ha un elenco completo di tutti gli elementi HTML, incluse descrizioni, esempi di codice e anteprime in tempo reale.
  • Enjoy CSS - Questo è un generatore CSS avanzato per la creazione di stili grafici ricchi senza codifica.
  • CSS Typeset - È sufficiente incollare il testo che si desidera modificare, quindi copiare e incollare il CSS generato nel foglio di stile.
  • One CSS Feature - L'unica caratteristica CSS che voglio veramente da bitsofcode.
  • Imperfect Buttons - Pulsanti di bordo disegnati a mano. Una penna di Tiffany Rayside.
  • Poor Man's Styleguide - È uno guida di stile dal frontend veloce e sporco, progettato per essere copiato e incollato nel CMS. Se non sei Twitter Bootstrap, non hai tempo o denaro per creare una libreria di modelli CSS dinamica e personalizzata, usa questo styleguide.
  • Sass Placeholders - Sass: Placeholders and @extend-only Selectors by Steven Bradley.
  • Penguin - Pinguino: nessun HTML, nessun JS. Una penna di Abdullah Abusall

Lezione CSS

Strumenti JS

  • MERN - Il MERN è uno strumento per gli scaffold che semplifica la creazione di applicazioni isomorfe usando Mongo, Express, React e NodeJS. Riduce al minimo i tempi di configurazione e ti mette al passo con le tecnologie collaudate.
  • Ember - Programmazione funzionale in Ember - Jeffrey Biles intervista i talentuosi sviluppatori Ember di tutto il mondo, condividendo le loro sfide, passioni e trionfi.

Lezione JS

ES6 Tools

  • ES6 - ES6 cheatsheet.
  • ES6 Library - A minimal starter for an ES6 library.
  • Descartes - Descartes è una libreria sperimentale per scrivere CSS in JavaScript per i programmatori.
  • Search Index - Indice di ricerca è un motore di ricerca permanente di testo completo per il browser e Node.js.

ES6 Reading

  • Waka Time - Questo è un plugin per quantificare la tua codifica. Metriche, approfondimenti e tracciamento del tempo sono generati automaticamente dalla tua attività di programmazione.
  • Bricks.js -Un veloce generatore di layout in muratura per elementi a larghezza fissa.
  • okayNav jQuery Plugin - Til suo plugin punta a ridurre progressivamente i collegamenti di navigazione in una navigazione fuori schermo invece di farlo per tutti i collegamenti contemporaneamente.
  • jQuery easypin - Plugin semplice e veloce che fissa gli oggetti sulle immagini.
  • Sticky Elements - Crea elementi e link appiccicosi.

  • Hour of Code - In questa edizione speciale di Hour of Code di Box Island, tu ei tuoi bambini imparerete le basi di algoritmi, sequenze, loop e condizionali. Il tutorial è guidato dagli studenti e adatto a tutte le età.
  • Codingame - Impara e migliora le tue capacità di codifica, mentre giochi.
  • Hopscotch - Esplora i fondamenti di CS come astrazione, variabili, condizionali, loop e altro mentre fai cose che in realtà vuoi giocare.
  • MeteorToys - Strumenti di sviluppo follemente utili per aiutarti a creare fantastiche applicazioni. L'uso di MeteorToys aumenta la velocità del tuo lavoro attraverso i problemi e ti aiuta a creare soluzioni di lavoro finite e più veloci.
  • ScratchJr - Con ScratchJr, i bambini possono programmare le proprie storie e giochi interattivi. Nel processo, imparano a risolvere problemi, progettano progetti di design e si esprimono creativamente sul computer. Adatto a bambini di 5-7 anni.

Hai appena sfogliato 137 Web design e strumenti di sviluppo e risorse utili. Pensi che qualcosa di questo sia utile? Se la tua risposta è "sì", specifica quali ti hanno colpito di più nella sezione dei commenti.

E non dimenticare di mettere “mi piace” e condividere questo sommario con i tuoi amici e colleghi. L'autore lo apprezzerà!

Web Design
Diana Parker
Diana Parker

Se stai cercando dei post per ispirarti, potrebbero interessarti gli articoli condivisi da Diana.

Post correlati

Articoli

50 Tutorial per creare effetti di testo con Photoshop

28 Maggio 2018 4K