I Migliori Tools per Web Designer Freelance

Get Started. It's Free
or sign up with your email address
I Migliori Tools per Web Designer Freelance by Mind Map: I Migliori Tools per Web Designer Freelance

1. Sviluppo Front End

1.1. Validazione codice

1.1.1. Link checker http://validator.w3.org/checklink

1.1.2. Validazione dei css http://jigsaw.w3.org/css-validator/

1.1.3. Validazione del codice http://validator.w3.org/#validate_by_uri+with_options

1.2. Test su più browser/dispositivi

1.2.1. http://browsershots.org/

1.2.2. http://crossbrowsertesting.com/

1.2.3. http://www.browserstack.com/

1.2.4. Download di immagini per macchine virtuali per testare IE http://loc.modern.ie/en-us/virtualization-tools#downloads

1.2.5. http://netrenderer.com/

2. Corsi online

2.1. Tuts ebook e corsi/videocorsi https://tutsplus.com/

2.2. Killersite http://library.killersites.com/

2.3. Codeacademy http://www.codecademy.com/

2.4. W3Dev Campus http://www.w3devcampus.com/

2.5. https://teamtreehouse.com/

3. Siti web da seguire

3.1. http://alistapart.com/ (versione italiana http://www.italianalistapart.com/)

3.2. http://www.smashingmagazine.com/

3.3. http://www.creativebloq.com/

4. Mockup/Wireframe/presentazioni per il cliente

4.1. Place It https://placeit.net/

4.2. Balsamiq http://webdemo.balsamiq.com/

4.3. MockFlow http://www.mockflow.com/

4.4. QwikVu http://qwik.vu/

4.5. http://www.wirify.com/

4.5.1. wirify

4.5.1.1. consente di trasformare una qualsiasi pagina web in un wireframe in un click

5. Prestazioni sito

5.1. GT Metrix http://gtmetrix.com/

5.2. Smush It http://www.smushit.com/ysmush.it/ per ridurre il peso delle immagini

5.3. http://www.cleancss.com/

5.4. Minimizzare i CSS http://cssminifier.com/

5.5. Minimizzare i js http://javascript-minifier.com/

6. Font

6.1. Font Showcase http://www.typewolf.com/

6.2. Differenze tra font http://tiff.herokuapp.com/

6.3. Combinazione font http://font-combinator.com/

6.4. Libreria font https://typekit.com/

6.5. Google font http://www.google.com/fonts/

6.6. Font Squirrel http://www.fontsquirrel.com/

6.7. Che font è da immagine http://www.myfonts.com/WhatTheFont/

7. software di editing e grafica

7.1. http://bohemiancoding.com/sketch/

7.1.1. recensioni

7.1.1.1. https://medium.com/sketch-app/f1448d9ae62a

7.1.1.2. http://www.ridble.com/sketch-3-recensione/

7.1.2. esempio pratico

7.1.2.1. http://dribbble.com/shots/1509489-Bidaway-Landing-Page-Redesign/attachments/227401

7.1.3. discussione su facebook

7.1.3.1. https://www.facebook.com/groups/webdesigner/permalink/698916620167945/?stream_ref=3

7.1.4. che cos'è

7.1.4.1. software a pagamento, disponibile solo per mac utile per creare interfacce grafiche per siti web e per il mobile. Ottima ed economica alternativa a programmi ben più costosi come Photoshop o Illustrator.

7.1.5. tutorial

7.1.5.1. come creare un set di icone con Sketch

7.1.5.1.1. http://www.creativebloq.com/netmag/create-hairline-icon-set-using-sketch-81412575

7.2. http://www.pixelmator.com/

7.2.1. che cos'è

7.2.1.1. editor di immagini professionale solo per mac a pagamento. Permette di aprire e gestire anche file creati con Photoshop

7.2.2. recensioni

7.2.2.1. http://it.wikipedia.org/wiki/Pixelmator

7.2.2.2. https://www.macupdate.com/app/mac/25879/pixelmator#ratings

7.2.2.3. http://www.saggiamente.com/2010/02/20/pixelmator-semplice-alternativa-a-photoshop/

7.2.2.4. http://pixelmator.softonic.it/mac

7.2.2.5. http://lifehacker.com/jumping-ship-from-photoshop-to-pixelmator-a-switchers-1689515606

7.2.3. testimonianza

7.2.3.1. Christian Amorelli (da facebook): Uso Pixelmator sul MacBook e Photoshop su iMac e per il tipo di utilizzo che ne faccio non ci sono grandi differenze. Il fatto che con Pixelmator posso aprire i PSD lo rende un prodotto veramente valido. Visto che ci sono ti segnalo ANTETYPE

7.2.3.1.1. http://on.fb.me/1teO8ZE

7.3. http://www.antetype.com/index.html

7.3.1. che cos'è

7.3.1.1. editor a pagamento per la creazione di interfacce grafiche in responsive design di siti web, applicazioni mobile o software aziendali.

7.3.2. recensioni

7.3.2.1. http://mac.appstorm.net/reviews/graphics/create-stellar-prototypes-with-antetype/

7.3.3. testimonianza

7.3.3.1. Christian Amorelli (da facebook): ha già il necessario per gestire varie tipologie di interfacce per siti web, web app, e app native. Tutti gli elementi tipici di Bootstrap ad esempio basta posizionarli, personalizzarli e prendersi le regole CSS. Lo utilizza un mio collega, così quando mi passa le grafiche ho già tutte le 'direttive' per scrivermi il mio file LESS senza troppi sbattimenti. In più lui può gestirsi il responsive e quando apro il file di Antetype ho subito una visione completa del progetto per lavorare al meglio sulle griglie.

7.3.3.1.1. http://on.fb.me/1hZnKtl

7.4. https://affinity.serif.com/

7.4.1. recensioni

7.4.1.1. http://www.webhouseit.com/affinity-designer-una-valida-alternativa-photoshop-e-illustrator/

7.4.2. esempio pratico

7.4.3. discussione su facebook

7.4.3.1. https://www.facebook.com/groups/webdesigner/permalink/753144408078499/

7.4.3.2. https://www.facebook.com/groups/webdesigner/permalink/872708096122129/

7.4.3.2.1. vengono suggeriti altri software

7.4.4. che cos'è

7.4.4.1. software di grafica solo per mac

7.4.5. testimonianze

7.4.5.1. Mattia Astorino (da Facebook): Affinity design nasce come sostituto di Illustrator, non photoshop. Per photoshop stanno sviluppando Affinity Photo, che sembra ottimo. Alternative a photoshop per il web design ci sono da tempo, e anche piu specifiche, vedi Sketch e Pixelmator

8. programmi per catturare lo schermo (screenshots)

8.1. https://app.prntscr.com/en/index.html

9. programmi per creare palette di colori

9.1. http://coolors.co/intro/

9.2. http://palettab.com/

9.2.1. crea in maniera random una palette colori associata ad un Google Web Font

10. Idee/spunti

10.1. http://www.nomadidigitali.it/tecnologia-e-attrezzatura/10-migliori-software-per-lavorare-viaggiando/

10.2. http://www.getapp.com/

10.3. http://www.designjunction.com.au/useful-tools

10.4. http://www.webdesignerdepot.com/2014/03/the-ultimate-guide-to-freelancing/

10.5. https://medium.com/design-ux/799d16952a56

10.5.1. da controllare le risorse dedicate alla fatturazione, Wireframing, mockup

10.6. http://oozled.com/

11. Organizzazione del tempo/aumento produttività

11.1. https://www.wunderlist.com/en/

11.2. http://www.getharvest.com/

11.3. http://www.boomeranggmail.com/#

11.3.1. http://francescogavello.it/boomerang-gmail-email-tracking

11.4. http://latuaprivacy.com/

11.4.1. generatore automatico di una pagina privacy

11.5. https://www.toggl.com/

11.5.1. time tracking

11.5.1.1. https://www.toggl.com/

11.6. http://www.webhouseit.com/grunt-task-runner-spiegato-webdesigner/

11.7. http://www.clockingit.com/

11.7.1. discussione su facebook

11.7.1.1. https://www.facebook.com/adriano.dearcangelis/posts/10152201732237675

11.8. http://businessandtech.com/10-risorse-per-risparmiare-tempo-e-ridurre-lavoro-inutile/44792

11.9. trello

11.9.1. http://www.webhouseit.com/trello-tool-gratis-per-project-management-spesso-ignorato/

11.10. http://www.officetime.net/

11.10.1. recensione

12. DA CLASSIFICARE

12.1. http://jsfiddle.net/ sviluppo collaborativo

12.2. http://www.sublimetext.com/

12.3. http://www.panic.com/coda/

12.4. https://github.com/ sviluppo collaborativo

12.5. Icon finder https://www.iconfinder.com/