As a Web design beginner, it is sometimes hard to find web design 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 RESOURCES FOR BEGINNER – 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 in my list of web design resources
  • 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

 

 

1- INSPIRATION

 

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. I think it’s almost in my top 5 of web design resources. 

 

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.

 

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.

 

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.

 

2- GRIDS

 

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.

 

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.

 

3- TUTORIALS

 

 

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.

 

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.

 

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.

 

4- MEASURES

 

ANDROID CHEATSHEET

This CheatSheet really helps out graphic designers to prepare graphic assets for developers and makes it easier for both parties.

 

5- RESOURCES

 

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. It’s a must in your web design resources list! 

 

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.

 

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!

 

PSDDD

 

This is an amazing web you can use! They post high quality resources that you can use as icons, backgrounds & patterns, buttons, etc.

 

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.

 

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.

 

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.

 

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.

 

6- COLOURS & PATTERNS

 

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.

 

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.

 

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.

 

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 those web design resources will help you as a web design beginner 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!