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

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!

Analytics Tools & Solutions for Your Business - Google 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 Website Speed Test | Pingdom Tools - 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 Markup Generator & Structured Data Testing Tool (inc JSON-LD) | SEO Scout - produces microdata for people, products, events, organizations, movies, books and reviews.

- by Marty
2 | Wufoo - 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.

20 Likes

Thanks for the list !

Thanks for the list, here are two useful additions;

Schema Schema Markup Generator & Structured Data Testing Tool (inc JSON-LD) | SEO Scout - 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.

1 Like

Thanks Marty! I’ve added those two :slight_smile:

Thanks for building this list. I use tinypng religiously!

here’s a few more…
Animate.css - Been having some fun with this: Animate.css | A cross-browser library of CSS animations.
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 - Interactive CSS Grid Layout Generators - 1stWebDesigner
Px to Em - http://pxtoem.com/
CSS, JS, etc Cheat Sheets - http://overapi.com/
Online bin to organize urls (make you own library) - Icebergs | Visual organization for creative minds
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/

4 Likes

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

I love the Px to Em and the responsive testing !

I’ve added http://lorempixel.com/ to the list. It is awesome :slight_smile:

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 - 50 graphic design blogs - David Airey

And Mashable has put together a list of 10 web design bloggers you should follow - 10 Web Design Bloggers You Should Follow | Mashable

4 Likes

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
2 Likes

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 - The W3C CSS Validation Service

Link Checker - W3C Link Checker

Or there’s the all-in-one validator (though it doesn’t always check your page against the correct standard)
Unicorn - Unicorn

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:

2 Likes

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

1 Like

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

1 Like

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!

1 Like

@Joao That’s a good one.

Thanks

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…

Web Design Inspiration

http://www.pinterest.com/regenrek/webdesign-inspiration-2014/

Web Design/Dev Checklist

Webdesign Mockup and Typography Inspirations

Web Typography Inspirations

Parallax Effects Inspiration

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

1 Like

alternative to this - lippingtypical.com

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

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