Streaming live at 10am (PST)

[LIST] Useful Websites for Design Resources/Tutorials/Assets


#1

Hello fellow webdesigners!

I want to share you with sites that are always “with me” when designing sites and optimizing them. Add your favourites too, let’s make a library here!

all-free-download.com/ - great vector icon sets, graphic etc.

livetools.uiparade.com/ - awesome tool for live building forms, icons, ribbon and buttons

spritepad.wearekiss.com/ - epic optimization tool for graphic I’m using. It’s better to have one PNG file than 5 or 80 of them, right? It affects the first-load of site. It’s always better to have less http requests :slight_smile:

jscompress.com/ - Compressor for JavaScripts used in your site.

tinypng.org/ - PNG files compression. Before you add hundreds of PNG images to your website let them flow through tinypng first!

google.com/analytics - I don’t think I could live without that tool. It helps a lot with on what should I focus more. I can see places people go to and from where did they came. I can see what “road” did they take. It’s an awesome tool that everyone should be using to maximize their website user-experience.

www.google.com/webmasters/tools/home - Same as above. Must-have tool. You can add your website to Google Index and have a control over what’s driving users onto your website like keywords etc. useful. period.

developers.google.com/speed/pagespeed/insights and tools.pingdom.com/fpt/ - both to test web speed. While Google Pagespeed Insights gives you hints on how to improve your website load speed, pingdom gives waterfall details on what loads when and how long.

deezer.com - nothing fits to working on anything better than good music ;D

lorempixel.com - Lorem ipsum is a well-known text placeholder. Here we have a nice image placeholder generator :slight_smile:

- by Marty
schema-creator.org/event.php - produces microdata for people, products, events, organizations, movies, books and reviews.

- by Marty
wufoo.com/2 - Wufoo is a web application that helps anybody build amazing online forms. When you design a form with Wufoo, it automatically builds the database, backend and scripts needed to make collecting and understanding your data easy, fast and fun.


Where to get content?
#2

Thanks for the list !


#3

Thanks for the list, here are two useful additions;

Schema http://schema-creator.org/event.php - produces microdata for people, products, events, organizations, movies, books and reviews.

Wufoo http://www.wufoo.com/ - Wufoo is a web application that helps anybody build amazing online forms. When you design a form with Wufoo, it automatically builds the database, backend and scripts needed to make collecting and understanding your data easy, fast and fun.


#4

Thanks Marty! I've added those two smile


#5

Thanks for building this list. I use tinypng religiously!

here's a few more..
Animate.css - Been having some fun with this: http://daneden.me/animate/
CSS Deck, CodePen - code snippets: http://cssdeck.com/ - http://codepen.io/
Responsive testing, etc: http://screenqueri.es/ - http://dfcb.github.io/Responsivator/
Website Checklist - http://lite.launchlist.net/
Color Scheme Designer - http://colorschemedesigner.com/
45 Online Generators - http://www.1stwebdesigner.com/design/generators-improve-workflow/
Px to Em - http://pxtoem.com/
CSS, JS, etc Cheat Sheets - http://overapi.com/
Online bin to organize urls (make you own library) - https://iceber.gs/site
Font Awesome, One Font, 361 Icons - http://fortawesome.github.io/Font-Awesome/
Bootswatch Free themese for TBS - http://bootswatch.com/
Free PSD, HTML CSS - http://pixelsdaily.com/


#6

Thanks for the links @bartekkustra, @pingram3541, and @Marty


#7

I love the Px to Em and the responsive testing !


#8

I've added http://lorempixel.com/ to the list. It is awesome smile


#9

A couple more...

Using Font Awesome, icnfnt lets you create a custom icon-font kit - icnfnt.com*

Another online form builder, JotForm similar to Wufoo for you to try - jotform.com

Steven DeGraeve's Colour Palette Generator creates a colour palette for you from any image - degraeve.com/color-palette/

For nearly every website I design, I have to use one of SubtlePatterns' excellent background patterns - subtlepatterns.com/

And now for a few blogs that I love:

DesignModo - designmodo.com/

Web Designer Depot - http://www.webdesignerdepot.com/

YouTheDesigner - http://www.youthedesigner.com/

I Love Typography - http://ilovetypography.com/ (and We Love Typography - http://welovetypography.com/)

Smashing Magazine - http://www.smashingmagazine.com/

Logo Design Love - http://www.logodesignlove.com/

Just Creative - http://justcreative.com/

And if these don't suit your needs, David Airey has put together a list of 50 graphic design blogs - http://www.davidairey.com/top-50-graphic-design-blogs/

And Mashable has put together a list of 10 web design bloggers you should follow - http://mashable.com/2010/06/18/design-blogger/


#10

Speaking of icon fonts there are 3 other tools that come to mind All of them have multiple sets including fontawesome.

  • We Love Icon Fonts -
    • is used as a CDN.
    • Can be forked on github.
  • Fontastic -
    • can import SVG files
  • icomoon -
    • imports SVG files
    • Chrome webapp for offline use
    • lots of other features for a fee

#11

I'm always working on making sites backwards and forwards compatible as much as possible. So even when designs look right, I validate them to make sure I'm not missing anything. Typically, I use the W3C validators.

HTML - http://validator.w3.org/

CSS - http://jigsaw.w3.org/css-validator/

Link Checker - http://validator.w3.org/checklink

Or there's the all-in-one validator (though it doesn't always check your page against the correct standard)
Unicorn - http://validator.w3.org/unicorn/


#12

Hey! I justr found an amazing guide to SEO for beginners! It explains a lot of stuff and I believe eveyrone who develop websites should read it wink

http://moz.com/beginners-guide-to-seo


#13

Very Useful thread.. thanks for sharing.

I've seen a few people on the forum say they weren't familiar with Jquery.. So I want to share this site I signed up to last year, for Free. It's called Codecademy. They have a interactive jquery course there that I still find helpful. I've taken the course a couple times now.

It's free.. they make you type out the code as you go and test you. There are other courses there also. Hope someone finds it helpful.

Codecademy - http://www.codeacademy.com


#14

codeacademy is great... I too have taken courses there serveral times over... it is really good on multiple levels, but I like it, because it helps you to also train that "muscle" memory.... smile

Although not free for all courses, there is also www.udemy.com, which has thousands of courses in many subjects, many of which ARE free and others very cheap... I recommend to check them out. I found courses in other subjects that I am not by default great at, such as internet marketing, writing etc...

A great site for advanced CSS, javascript techniques for different effects is www.codrops.com smile Cheerio


#15

Hello everybody! Here´s a website I use a lot: http://wordmark.it/

It previews the text you type in all fonts installed in your computer.

Cheers!


#16

@Joao That's a good one.

Thanks


#17

I know this is a bit old thread but rather 'useful', so I'd like to add this on the list:

CDN Hosted CSS/JS Repo.
https://cdnjs.com or http://www.jsdelivr.com

CSS/JS Effects/Animation Resources and a lot more..
http://tympanus.net/codrops/

Web Design Inspiration
http://www.awwwards.com

Web Design/Dev Checklist
http://lite.launchlist.net

Webdesign Mockup and Typography Inspirations
https://dribbble.com
https://www.behance.net

Web Typography Inspirations
http://www.typewolf.com

Parallax Effects Inspiration
http://www.creativebloq.com/web-design/parallax-scrolling-1131762

I have tons of other resources but I think it would be too overwhelming to put it all in here =)


#18

alternative to this - lippingtypical.com


#21

Hey, um, sorry for the necro, but you seem to have dropped an f :eyes: it should be http://flippingtypical.com/


#23

https://www.gridlover.net/
vertical rhythm generator to make sure your text flow visually.