Web design beginner: Resource guide

Share This Post

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.

  Golden ratio in web design

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.

 

BITDEGREE 

Bitdegree offers hundreds of online courses that scaled many careers worldwide. Online education is what they do. They took blockchain and used it to connect students with teachers and employers. They will help you start from zero by teaching skills that land you a job. Here you may find many useful web design courses.

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.

  Design thinking: a key aspect for innovation

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.

  Web Design for Coding: 7 steps checklist to have it ready for development

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!

Author

  • Ekaterina Novoseltseva

    Ekaterina Novoseltseva is an experienced CMO and Board Director. Professor in prestigious Business Schools in Barcelona. Teaching about digital business design. Right now Ekaterina is a CMO at Apiumhub - software development hub based in Barcelona and organiser of Global Software Architecture Summit. Ekaterina is proud of having done software projects for companies like Tous, Inditex, Mango, Etnia, Adidas and many others. Ekaterina was taking active part in the Apiumhub office opening in Paseo de Gracia and in helping companies like Bitpanda open their tech hubs in Barcelona.

    View all posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Subscribe To Our Newsletter

Get updates from our latest tech findings

Have a challenging project?

We Can Work On It Together

apiumhub software development projects barcelona
Secured By miniOrange