As a Web design beginner, it is sometimes hard to find resources to help us when we are blocked regarding a project or when we just don’t know what kind of elements we should use. That’s why I did a selection of a few websites that could help beginners in those kinds of situations.
WEB DESIGN BEGINNER RESOURCE GUIDE CATEGORIES
- Inspiration: you will find 4 websites that offers free content for inspiration which I use on a regular base
- Grids: As you all know, grids can be difficult when it comes to web design, which is why I mention two simple solutions for you
- Tutorials: You can always learn by yourself, or at least following online tutorials and there are quite a few that could really help you out
- Measuring: In my opinion, measuring is one of the tasks that requires the most patience
- Resources
- Colours & patterns
INSPIRATION
1. AWWWARDS
On Awwwards, the users can vote for their favorite designs and the ones that have the most success are then crowned “top designs” of the day, month, and year. If you’re looking for some trendy website inspiration, you should definitely browse Awwwards’ page.
2. BRAIN PICKINGS
Brain Pickings is relevant to any designer looking for inspiration and motivation. Once registered, you receive articles on a weekly base about different categories as design & creativity but also about psychology, science and others.
3. IT’S NICE THAT
It’s Nice That is a resource for art & design news. On the blog, they post articles, works, videos, events and others about what is considered to be inspirational to the audience in various categories as graphic design, fashion, advertising, film, photography, etc.
4. GRAIN EDIT
On Grain edit you can find amazing posts of design works from a certain time period, more specifically the 1950s-1970s. They also have many posts about contemporary designers that are inspired by that period. On the blog you will discover interviews, articles, designers’ libraries, posters, vintage kids books and many more.
GRIDS
5. GRIDZZLY
Gridzzly is a tool that is very easy to use that basically allows you to make your personalized grid paper for printing. You only need to choose the shape you want and move the slider in order to change the spacing and you can also work on the sizing.
6. GUIDEGUIDE
Via GuideGuide you can create grids quite easily for your work and save them in order to re-use them whenever you need it.
TUTORIALS
7. ADOBE KNOW HOW
On Adobe Know How you can find courses for several Adobe programs. There are free courses but also some that you can pay for and they cover various categories as design, programming, photography, etc.
8. TUTS+
Tuts+ offers free online tutorials – videos and written – for several program in different categories as code, design, development, illustration, etc. Courses are for beginners and also for higher levels.
9. LYNDA
On Lynda, you have a library of courses and tutorials online for design, development, photography, marketing, business, etc. The way it works is that you pay an annual or monthly fee to become a member and its gives you unlimited access to all the videos. You could therefore use it for yourself or even to tain your employees.
10. TUTORIALZINE
Tutorialzine is used to get amazing web development tutorials and resources for people in the industry. The tutorials are easy to understand and they also provide you with a demo for each of them so you can see what the end product will look like.
MEASURES
11. ANDROID CHEATSHEET
This CheatSheet really helps out graphic designers to prepare graphic assets for developers and makes it easier for both parties.
RESOURCES
12. UI CLOUD
UICloud is a search engine that makes it easy and quick for designers and developers to find the best UI element designs (as buttons, toolbars, checkboxes, etc.) on the internet with over 46608 elements to download.
13. FREE IMAGES
Free Images has a library of more than 395,000 photos to download on the web that you can use while working on your projects.
14. WHAT THE FONT
What the Font has a huge collection of fonts that you can use for your projects and you can try them before the purchase. Another great aspect of this page is that you can upload an image of a font that you like and they will try to find the closest match in their database for you!
15. PSDDD
This is an amazing web you can use! They post high quality resources that you can use as icons, backgrounds & patterns, buttons, etc.
16. MARVEL APP
With Marvel you can create free mobile (iOS & Android), Apple watch and web prototypes and no coding is needed; it’s built to be used by anyone and doesn’t require any specific skills to use it.
17. FLUID UI
As Marvel, Fluid also allows you to create free mobile and web prototyping and therefore test a it quite quickly on your devices.
18. TYPEWOLF
Typewolf is a webpage that helps designers when it comes to choosing fonts for projects; it shows fonts in use on websites and provides with information about it as well as personal recommendations.
19. PALETTON
With Paletton users can find complementary colours, share their own palettes, preview them with text, etc. It’s a very simple tool and can be very helpful.
COLOURS & PATTERNS
20. COLOUR LOVERS
Colour lovers is also a webpage that allows you to create & share colours, palettes and patterns that you could use for your web design projects. Other than that, it offers the possibility to discuss trends and have access to interesting articles.
21. CG TEXTURES
We all know how difficult and time consuming it can be to create textures without using a good tool. On CG Textures, you can download free 3D and 2D texture images of good quality.
22. SUBTLE PATTERNS
On subtle patterns, you can download for free high quality patterns and even submit some and therefore share them with other designers and developers that have new web design projects.
23. NO MORE BANDING
This website provides you with a tool that is quite easy to use and that basically fixes all the banding in your documents with one click. You will be able to fix gradients that are created with Photoshop and make them look smooth.
Finally, I hope this mini resource guide to Web design beginner will help you while working and I hope you discovered some webpages you didn’t know before. Obviously there are many others and if you have a few in mind that you’ve used in the past and have found useful, leave a comment below so that other readers and I can benefit from them!
