As a web designer, you must have a set of tools and resources that aid your work. Be it inspirational or hands-on code work, the resources we’ve put together in this post will help you to get more out of your day. Have fun while expanding your resources toolbox. Don’t forget to share the tools and resources you use and love in the comments below!
We’ve broken this post into several sections namely:
- Coding Resources – Web design tools and resources that will help with the code and everything that goes with it.
- Photography Resources – You will discover a few great sources of stock photographs for your designs.
- Web Design Blogs – A collection of top web design blogs.
- Typography Resources – Because you have to get your fonts right from the get go.
- Other Resources – All resources that don’t fit in the categories above.
Let’s get started, shall we?
Web Design Coding Resources
To write great code, you must first learn how to write great code. It takes time to become a web design expert, so the earlier you start, the better. HTML (short for HyperText Markup Language) is the backbone of every website you see out there. HTML does not work alone though, and that’s why we have CSS (or Cascading Style Sheets). If you’re a beginner, you must start your web design journey by learning HTML and CSS. The following resources will give you the background you need:
HTML5 Periodical Table
Learn all the important elements and components of HTML5 with this handy periodical table by WebsiteSetup. Hover on key items to view elements grouped by Main, Sectioning, Document Metadata, Embedded Content, Scripting and more.
W3Schools
Going by their tagline, W3Schools is the world’s largest web development site. They provide all manner of tutorials befitting beginners and experts. Topics covered include HTML, CSS, JavaScript, SQL, PHP and jQuery. That’s not the end of it, they also provide over a thousand (1000+) examples and great demos.
HTML Dog
Are you looking for a web design resource that’s dedicated to HTML5 and CSS3 (and a bit of JavaScript to spice up things)? HTML Dog is an excellent place to learn all about HTML and CSS at a relaxed pace. The great guys over at HTML Dog have broken up their tutorials into three progressive levels: Beginners, Intermediate and Advanced, so everyone is covered.
Net Tuts
One of Envato’s projects, Tuts+ is a 90,000-follower strong huge collection of top-level web development tutorials. You can learn everything from HTML to CSS, WordPress, mobile development, Flash, PHP, JavaScript, AJAX and iOS SDK among others.
A List Apart
With a stern focus on web standards, A List Apart is a beautiful and extensive web design resource dedicated to “…people who make websites.” A List Apart publishes material under different topics (or categories) including code, content, design as well as industry and business.
Code Avengers
This well designed website is a fun way of learning to code websites, apps and games. I gave their JavaScript game development tutorial a try and I must say I was pretty much impressed. I will be going back 🙂
Other web design resources to learn code include:
- CSS Zen Garden – A cleverly crafted website dedicated to showcasing the beauty of CSS design.
- Designing with Web Standards
- Coderwall
- The Starter League
- Pluralsight
To learn web design, you must write the actual code. You must have hands-on experience on top of all the theory you will learn from the resources in our previous section. Which tools do web designers use?
Notepad++
I’m not being biased but I started with this nifty code editor because I personally use and love it. Notepad++ is quite popular, runs on Ms Windows and supports multiple languages. It’s 100.0% free!
TextWrangler
This is a general-purpose text editor you can use for data-file editing, light-duty composition and manipulation of text-oriented data. TextWrangler supports various languages apart from Arabic and Hebrew (and other right-to-left languages) and can be used to edit Unicode as well as plain text files.
Sublime Text
According to sublimetext.com, this tool “…is a sophisticated text-editor for code, markup and prose.” Sublime Text is best known for its amazing performance and a slick user interface among other features.
Photography Resources
As you learn and as your designs take shape, you will want to add some color to your work. This is where images come in. But where is a web designer to get high quality images? You can check out these best image resources post over at WPExplorer. Alternatively, you can check out best places for designers to get free stock images.
Below are more stock photography resources:
Big Stock Photo
Offering over nineteen (19) million photos, with a single photo costing as little as 99 cents, Big Stock Photo gives you plenty of image choices and a lot of flexibility in pricing. You can even download more than five (5) images per day for as little as $69 per month.
Dreamstime
This simple and lovingly designed website offers over seventeen (17) million free and paid stock photos as well as video footage. You can download photos for free but premium images attract a price of $0.02 per photo (20 cents per image).
iStock by Getty Images
One of the world’s largest stock photography portals, iStock offers millions of free and paid (staring at $199 for 250 images per month) high quality stock photos.
Typography Resources
Every website must ultimately carry textual content. The font you use will affect the user experience either positively or negatively. You must choose a font that affects UX positively. At the same time, the font you pick should be in harmony with your design. As such, you have to be very careful when choosing your fonts.
If you haven’t seen these twenty (20) examples of beautiful typography design, this Dribbble inspiration or even this font worth $400 million, the following typography resources will interest you:
Google Web Fonts
Google offers you a collection of over 600 free and beautiful web fonts that you can easily use on your web designs. If you’re using WordPress, you can use a plugin such as Google Typography to easily change your fonts.
WhatTheFont
WhatTheFont is so much a tool than a resource that helps you to identify any font you see on the web. You can replicate any font you see out there on your website easily using WhatTheFont.
Web Design Blogs
WDExplorer
Learn everything about web design directly from passionate web designers. The discussion around here is all about web design – tutorials,news, inspiring tips, resources on web development. Follow WDExplorer via Facebook and Twitter or bookmark the site for instant updates.
Smashing Magazine
Whether you’re a beginner or an advanced web designer, you can always learn something at Smashing Magazine. Editors at the blog publish a ranger of topics including typography, CSS and graphics among others.
Web Designer Wall
Are you an aspiring web designer? Looking for inspiration and news on the latest web design trends? Web Designer Wall is a great source of web design news as well as coding tutorials.
1stWebDesigner
If you’re unsatisfied with your freelance web design knowledge, 1stWebDesigner has the training just for you. With a huge blog with coding and web design articles, tutorials, freebies, free video courses and the works, you will be well taken care of at 1stWebDesigner.
Learn about website optimization, conversion-focused design, and typography with…Pearsonified… – Pearsonified.com
Need I say more?
Other Web Design Resources
We’ve just covered a few resources in the sections above. There are so many more web design resources out there. We would would need more that just a single post to cover all of them. Here is a quick list of other web design resources:
- 40+ Web Design and Development Resources for Beginners – Mashable
- Must Have Tools and Resources for a Web Designer – TemplateToaster
- 20 Must-have Web Design tools – Web Designer Mag UK
- Web Design Tools, Services and Free Resources to Help Get Online – Tentononline.com
- 60 Free Resources You Really Must Try – Web Designer Depot
- Useful Learning Resources for Web Designers – Smashing Magazine
- 26 Must Have Resources for the Web Developer’s Toolbox – Fuel your Creativity
- 17 Web Design Resources You Need to Know – Bluehost Blog
- 10 Web Design Bloggers You Should Follow – Mashable
- How to be a Web Designer – Awwwards
Over to you…
Which resources do you regularly use as a web designer? Please share in the comments below!
