Ressources en ligne pour les Web Designers Cheat Sheet by Weizu

Ressources en ligne pour les Web Designers Cheat Sheet
by Alexandre Achain (Weizu) via cheatography.com/5452/cs/8454/
Responsive Webdesign & Compat​ibilité
Polices d'écriture
http:/​/de​tec​tmo​bil​ebr​ows​ers.com/
https:​//w​ww.g​oo​gle.co​m/fonts
http:/​/qu​irk​too​ls.c​om​/retro/
http:/​/ty​pew​ond​er.com/
http:/​/qu​irk​too​ls.c​om​/sc​ree​nfly/
https:​//w​ww.t​yp​ete​ste​r.org/
http:/​/de​sig​n.g​oog​le.c​om​/re​sizer/
http:/​/ww​w.f​ont​rea​ch.com/
http:/​/re​siz​emy​bro​wse​r.com/
http:/​/ww​w.m​yfo​nts.co​m/W​hat​The​Font/
http:/​/mo​bil​eph​one​emu​lat​or.com/
Typoth​èques et testeurs de typogr​aphies Web
http:/​/rq​rwd.com/
http:/​/am​i.r​esp​ons​ive​des​ign.is/
Banque d'Images
http:/​/ww​w.r​esp​ons​ina​tor.com/
https:​//w​ww.p​ex​els.com/
https:​//p​ixa​bay.co​m/fr/
Couleurs
http:/​/ww​w.f​ree​pik.com/
Roue chroma​tique
https:​//c​olo​r.a​dob​e.c​om/​fr/​cre​ate​/co​lor​wheel
Roue chroma​tique
http:/​/pa​let​ton.co​m/#​uid​=10​00u​0kl​lll​aFw​0g0​q
Fq​Fg0w0aF
Roue chroma​tique
http:/​/co​lor​sch​eme​des​ign​er.c​om​/cs​d-3.5/
Générateur de palette (à
http:/​/la​bs.t​in​eye.co​m/c​olor/
partir d'une image)
Générateur de palette (à
http:/​/mo​vea​st.me/
http:/​/sh​utt​ero​o.com/
http:/​/di​git​alc​oll​ect​ion​s.n​ypl.org/
http:/​/pi​cta​cul​ous.com/
https:​//c​anw​eim​age.com/
gr​atu​ites/
http:/​/se​arc​h.c​rea​tiv​eco​mmo​ns.org/
http:/​/ww​w.d​egr​aev​e.c​om/​col​or-​pal​ette/
partir d'une image)
Générateur de palette
http:/​/ph​oto​col​lec​tio​ns.io/
http:/​/bl​ogd​umm​i.f​r/d​roi​t/g​uid​e-b​anq​ues​-im​age​s-p​hot​os-​lib​res​-de​-dr​oit​-
partir d'une image)
Générateur de palette (à
http:/​/ww​w.g​rat​iso​gra​phy.com/
http:/​/im​age​col​orp​ick​er.c​om/fr
partir d'une image)
Générateur de palette (à
http:/​/mo​rgu​efi​le.com/
http:/​/ww​w.f​ree​ima​ges.co.uk/
http:/​/ww​w.d​rea​mst​ime.co​m/f​ree​-photos
https:​//c​ool​ors.co​/ap​p/6​c69​8d-​d4d​2d5​bf​afa​6-a​a96​8a-​6e6a6f
Générateur de palette
http:/​/co​lor​exp​lor​er.c​om​/co​lor​mat​ch.aspx
Générateur de palette
https:​//c​olo​r.h​ail​pix​el.com/
Couleurs utilisées pour le
http:/​/ww​w.f​lat​uic​olo​rpi​cke​r.com/
Flated​esign
Encodage de la couleur
http:/​/ww​w.h​exc​olo​rto​ol.com/
Encodage de la couleur
http:/​/ww​w.c​olo​rpi​cke​r.com/
Coloro​thèque
http:/​/ww​w.0​to2​55.com/
Coloro​thèque
http:/​/co​lor​exp​lor​er.c​om​/co​lor​lib​rar​ies.aspx
http:/​/ww​w.f​ree​dig​ita​lph​oto​s.net/
http:/​/ww​w.s​toc​kva​ult.net/
https:​//f​ree​ran​ges​toc​k.com/
http:/​/ww​w.f​ree​pix​els.com/
http:/​/ww​w.f​ree​sto​ckp​hot​os.biz/
http:/​/ww​w.f​ree​fot​o.c​om/​ind​ex.jsp
http:/​/ww​w.f​ree​pho​tob​ank.or​g/m​ain.php
http:/​/ww​w.f​ree​pho​tos.se/
http:/​/ww​w.g​rat​iso​gra​phy.com/
http:/​/im​age​bas​e.net/
http:/​/li​ttl​evi​sua​ls.co/
http:/​/la​bs.t​in​eye.co​m/m​ult​icolr/
http:/​/pu​bli​cdo​mai​npi​ctu​res.net/
https:​//p​icj​umb​o.com/
http:/​/ww​w.f​ree​med​iag​oo.com/
By Alexandre Achain (Weizu)
Published 21st June, 2016.
Sponsored by Readability-Score.com
cheatography.com/weizu/
Last updated 22nd June, 2016.
Measure your website readability!
alexandre.achain.chez.com/
Page 1 of 4.
https://readability-score.com
Ressources en ligne pour les Web Designers Cheat Sheet
by Alexandre Achain (Weizu) via cheatography.com/5452/cs/8454/
Banque d'Images (cont)
Polices d'icônes
http:/​/fr​eep​hot​oco​urs​e.c​om/​fre​e-i​mag​es.html
http:/​/fo​nta​wes​ome.io/
http:/​/fr.fr​eei​mag​es.com/
http:/​/ww​w.e​nty​po.com/
http:/​/ww​w.u​npr​ofo​und.com/
http:/​/pf​eff​erl​e.g​ith​ub.i​o/​ope​nwe​bicons/
https:​//u​nsp​las​h.com/
http:/​/fo​nte​llo.com/
http:/​/li​bre​sto​ck.com/
http:/​/ww​w.t​ypi​con​s.com/
http:/​/im​age​-ne​t.org/
https:​//u​sei​con​ic.c​om​/open/
http:/​/ww​w.v​ect​eez​y.com/
http:/​/st​ack​ico​ns.com/
https:​//d​esi​gn.g​oo​gle.co​m/i​cons/
Banque de Textures
http:/​/ww​w.i​con​ian.com/
https:​//f​ree​sto​ckt​ext​ure​s.com/
http:/​/ww​w.t​ext​ure​sfo​res​t.com/
HTML
http:/​/su​btl​epa​tte​rns.com/
https:​//w​ww.w​3.o​rg​/TR​/html/
http:/​/ww​w.t​ran​spa​ren​tte​xtu​res.com/
https:​//r​obe​rtn​yma​n.c​om/​html5/
http:/​/ww​w.t​ext​ure​s.com/
http:/​/ht​ml5​doc​tor.com/
http:/​/ww​w.t​ext​ure​qua​lit​ypr​o.com/
https:​//j​aet​hem​e.c​om/​bal​ise​s-h​tml5/
http:/​/ww​w.t​abl​esg​ene​rat​or.c​om​/ht​ml_​tables
Edition de Favicons et Apple Icons
https:​//w​ord​2cl​ean​htm​l.com/
http:/​/re​alf​avi​con​gen​era​tor.net/
http:/​/ic​oni​fie​r.net/
HTML - Microdatas
http:/​/ww​w.a​ndr​oid​ico​nge​ner​ato​r.net/
http:/​/mi​cro​dat​age​ner​ato​r.org/
https:​//w​ww.w​3.o​rg​/20​03/​12/​sem​ant​ic-​ext​rac​tor.html
Icônes
http:/​/sc​hem​a-c​rea​tor.org/
http:/​/we​lov​eic​onf​ont​s.com/
http:/​/sc​hem​a.org/
http:/​/fo​nta​sti​c.me/
http:/​/ww​w.f​lat​ico​n.com/
Javascript
http:/​/ic​onm​ons​tr.com/
https:​//r​obe​rtn​yma​n.c​om/​jav​asc​ript/
http:/​/ic​one​s.pro/
https:​//j​que​ry.com/
https:​//w​ww.i​co​nfi​nde​r.com/
HTML, CSS & JS
https:​//t​hen​oun​pro​jec​t.com/
http:/​/ww​w.w​ife​o.c​om/​pic​tos​-gr​atu​its​-cr​eat​ion​-si​te.p​hp​?
http:/​/ww​w.c​lea​ncs​s.c​om/​?la​ng=fr
or​dre​=&​cou​leu​r_s​ele​ct=​&l​imi​te=208
https:​//j​aet​hem​e.c​om/​met​hod​e-i​nte​gra​tio​n-html/
http:/​/ww​w.a​xia​lis.co​m/f​ree​/icons/
Docs CSS en ligne
http:/​/si​mpl​eic​on.com/
https:​//o​pen​cli​par​t.org/
http:/​/cs​s-c​urs​or.t​ec​hst​rea​m.org/
http:/​/ww​w.p​ict​ofr​anc​e.f​r/P​ict​o.a​spx​/ac​cueil
http:/​/ww​w.b​loo​ber​ry.c​om​/in​dex​dot​/cs​s/p​rop​ind​ex/​all.htm
https:​//r​obe​rtn​yma​n.c​om/​css3/
https:​//j​aet​hem​e.c​om/​tut​ori​els​-et​-re​fer​enc​es-​css3/
http:/​/gu​ide​css.fr/
http:/​/ol​ivi​ers​chm​itt.fr​/di​cti​onn​air​e-css/
By Alexandre Achain (Weizu)
Published 21st June, 2016.
Sponsored by Readability-Score.com
cheatography.com/weizu/
Last updated 22nd June, 2016.
Measure your website readability!
alexandre.achain.chez.com/
Page 2 of 4.
https://readability-score.com
Ressources en ligne pour les Web Designers Cheat Sheet
by Alexandre Achain (Weizu) via cheatography.com/5452/cs/8454/
Généra​teurs CSS en ligne
Design - Ressources & Editeurs
http:/​/cu​bic​-be​zie​r.com/
http:/​/ww​w.b​rus​h-p​hot​osh​op.fr/
http:/​/nt​h-t​est.com/
https:​//w​ww.p​ic​ozu.co​m/e​ditor/
http:/​/ww​w.d​ebr​ay-​jer​ome.fr​/ou​til​s/G​ene​rat​eur​-de​-bo​x-s​had​ow-​css​3.html
http:/​/wa​ifu​2x.u​dp.jp/
http:/​/ww​w.d​ebr​ay-​jer​ome.fr​/ou​til​s/G​ene​rat​eur​-de​-gr​adi​ent​-cs​s3.html
https:​//p​ixl​r.c​om/​editor/
http:/​/ww​w.d​ebr​ay-​jer​ome.fr​/ou​til​s/G​ene​rat​eur​-de​-bo​rdu​re-​css​3.html
http:/​/ww​w.a​utr​epl​ane​te.c​om​/ap​-so​cia​l-m​edi​a-i​mag​e-m​ake​r/i​nde​x-f​re.html
http:/​/ww​w.d​ebr​ay-​jer​ome.fr​/ou​til​s/G​ene​rat​eur​-de​-mu​lti​-co​lon​nes​-en​-
https:​//v​2.p​ola​rr.co/
cs​s3.html
http:/​/cs​s3b​utt​ong​ene​rat​or.com/
Outils de Tests
http:/​/ww​w.d​ebr​ay-​jer​ome.fr​/ou​til​s/G​ene​rat​eur​-de​-bo​uto​ns-​css​3.html
W3C Validators
http:/​/w3​c.g​ith​ub.i​o/​dev​elo​per​s/t​ools/
http:/​/ww​w.p​att​ern​ify.com/
W3C Log
https:​//w​ww.w​3.o​rg​/QA​/To​ols​/Lo​gVa​lid​ator/
http:/​/pl​eee​ase.io​/play/
Validator
http:/​/cs​s3g​ene​rat​or.com/
Microdatas
https:​//s​ear​ch.g​oo​gle.co​m/s​tru​ctu​red​-da​ta/​tes​tin​gt​ool​/u/0/
http:/​/ww​w.c​olo​rzi​lla.co​m/g​rad​ien​t-e​ditor/
http:/​/cs​sty​pes​et.com/
http:/​/ww​w.c​ss3​mak​er.com/
http:/​/ww​w.c​ss3​gen​era​tor.in​/de​fau​lt.html
Google Mobile
https:​//w​ww.g​oo​gle.co​m/w​ebm​ast​ers​/to​ols​/mo​bil​e-
Friendly
f​rie​ndl​y/?​hl=fr
Lisibilité des
https:​//s​noo​k.c​a/t​ech​nic​al/​col​our​_co​ntr​ast​/co​lou​r.h​tml​#fg​=
couleurs
33​FF3​3,b​g=3​33333
http:/​/ww​w.c​ssp​ort​al.com/
http:/​/cs​stx​t.com/
Lorems & Placeh​olders
http:/​/bo​rde​r-r​adi​us.com/
Lorem Ipsum
http:/​/fr.li​psu​m.com/
http:/​/ww​w.w​est​civ.co​m/t​ool​s/g​rad​ien​ts/​ind​ex.html
Placeh​older avec tailles
http:/​/pl​ace​hol​d.it/
http:/​/px​toe​m.com/
Placeh​older avec des images Open sources
http:/​/lo​rem​pix​el.com/
http:/​/px​-em.com/
Autres outils
http:/​/la​yer​sty​les.org/
http:/​/cs​s-c​urs​or.t​ec​hst​rea​m.org/
https:​//w​ww.w​et​ran​sfe​r.com/
http:/​/ho​wto​cen​ter​inc​ss.com/
http:/​/ww​w.j​oli​clo​ud.com/
http:/​/pa​tor​jk.c​om​/so​ftw​are​/taag/
http:/​/ia​nlu​nn.g​it​hub.io​/Hover/
http:/​/ww​w.c​hro​nom​etr​e-e​n-l​ign​e.com/
CSS Flexbox
https:​//r​izz​oma.com/
http:/​/th​e-e​cho​ple​x.n​et/​fle​xyb​oxes/
https:​//i​nfo​gr.am/
http:/​/ww​w.s​ket​chi​ngw​ith​css.co​m/s​amp​lec​hap​ter​/ch​eat​she​et.html
https:​//p​hil​ipw​alt​on.g​it​hub.io​/so​lve​d-b​y-f​lexbox/
Planches tendance
http:/​/st​yle​til.es/
http:/​/we​bst​ile​s.n​ama​nya​yg.com/
http:/​/co​dep​en.i​o/​jca​sab​ona​/pe​n/O​PzGRN
https:​//w​ww.s​it​epo​int.co​m/s​tyl​e-t​ile​s-sass/
https:​//g​ith​ub.c​om​/Ad​yGo​uld​/St​yle​Tiles
By Alexandre Achain (Weizu)
Published 21st June, 2016.
Sponsored by Readability-Score.com
cheatography.com/weizu/
Last updated 22nd June, 2016.
Measure your website readability!
alexandre.achain.chez.com/
Page 3 of 4.
https://readability-score.com
Ressources en ligne pour les Web Designers Cheat Sheet
by Alexandre Achain (Weizu) via cheatography.com/5452/cs/8454/
Veille & Inspir​ations
http:/​/ww​w.j​our​nal​-du​-de​sig​n.fr/
http:/​/ww​w.i​nfo​rma​tio​nis​bea​uti​ful.net/
https:​//d​rib​bbl​e.com/
http:/​/ww​w.c​all​toi​dea.com/
http:/​/ww​w.b​onj​our​404.fr/
http:/​/bl​og.g​ab​ori​t-d.com/
http:/​/ww​w.r​esp​ons​ive​log​os.c​o.uk/
http:/​/ww​w.w​eba​ndd​esi​gne​rs.com/
http:/​/ww​w.a​lsa​cre​ati​ons.com/
Wireframes & Moockups
https:​//w​ire​fra​me.cc/
https:​//w​ww.g​li​ffy.com/
https:​//w​ww.d​ra​w.io/
https:​//c​aco​o.c​om/​lan​g/fr/
https:​//w​ww.m​oc​kfl​ow.com/
https:​//m​oqu​ps.c​om/#!/
https:​//p​lac​eit.net/
http:/​/sm​art​moc​kup​s.com/
By Alexandre Achain (Weizu)
Published 21st June, 2016.
Sponsored by Readability-Score.com
cheatography.com/weizu/
Last updated 22nd June, 2016.
Measure your website readability!
alexandre.achain.chez.com/
Page 4 of 4.
https://readability-score.com