Earn Money From Design Workshops
You’ll find here the best high-quality web design resources that would upgrade your skills as a web designer.
Web design can be overwhelming. Just the enormous amount of new trends and techniques appearing every day on the web can be confusing, even if you are an advanced web designer. But don’t worry guys, this is exactly why I made this post with the best resources on the web to improve your knowledge and skills as a web designer.
There are lots of web design tutorials and courses on the web – some paid, some free; some interactive, some not; some are text based, others on video. But where do you start than?
To make it all easier for you, I’ve collected a list of the best resources I’m using when I want to expand my knowledge about web design and find inspiration about the latest trends and techniques.
Inspiration & trends
Being a portfolio site that’s open to all, Behance has lot of accessible inspiration creatives you can search and explore. From UI design to web design to graphic design, It shares the best web design creations to be found on the web and features the most talented designers you’ll probably ever meet. This site can defiantly help you make your next design trendier.
Branded with the tagline “show and tell for designers,” Dribbble is where creatives can find quick hits of inspiration from fellow graphic designers, illustrators, and many more. When it comes to finding new innovative ideas about design – it’s the best place to start with.
Awwwards is a little different than most web design inspiration websites, because most of its collection of website is selected by a jury of web designers rather than a single curator. If you sign up to the site you can curate your own choices and create your own favorites list, which is very handy if you’re looking for a certain niche in web design.
At GraphicBurger, you’ll find unique and colorful UI kits, icons, banners and every web design related topic. A great website for finding inspirational designs and also download some freebies for a faster production of your current design.
Weshare is a search engine for tutorials. It curates more than 6500 tutorials from around the web. A great tool for discovering and collecting web design tutorials for beginners and advanced designers.
It offers a variety of tutorials from basic web design principles such as color theory and spacing to more advanced subjects in the web design world.
Don’t Fear the Internet is aimed at creative people who have little to no desire to do web design professionally – but at the same time don’t want an ugly cookie-cutter site showcasing their work.
From a basic explanation of what the Internet is, to detailing the bones of a website, to teaching page layout skills, you’ll learn the foundations of creating a website in a very welcoming environment that won’t overwhelm you with technical information.
A List Apart is an online magazine that “explores the design, development, and meaning of web content, with a special focus on web standards and best practices.” They’ve been around since 1997 and they have a reputation for really knowing their stuff. If you’re interested in reading some well-crafted content by serious talent – this is the site for you.
It’s not actually a magazine (well, not in the traditional print sense of the word), but the web design blog Smashing Magazine is a fantastic resource of tutorials on all aspects of the process. The lessons are aimed at the intermediate to advanced end of the web design spectrum.
Podcasts & newsletters
HackingUI has a great podcast & newsletter where they share some of their best resources for web design including interviews, tools and courses over the most trended web design topics like UI/UX, Front-end development and others.
Fresh Tilled Soil is a Boston-based digital agency that provides UI/UX design and development services. Aside to those, they run a nice podcast that covers a wide range of topics related to web, UI/UX designer, remote working etc.
Hands-on web design training
Codecademy describes itself as the ‘easiest way to learn how to code’ and has established a great reputation for itself within the web design community. This free web design training resource runs through the path of building websites, games, and apps in an engaging way, easing users in gently with a very basic first lesson. It’s recommended for web designers who want to learn more about web development and improve their skills.
Shay Howe bundles HTML and CSS into one learning block that is beginner-friendly and well organized. The text-based beginner guide is cleanly formatted for optimum readability and touches on the common elements of web design and development.
Webflow is a prototyping tool that helps web designers in designing native websites without any knowledge in coding. It would let you skip Photoshop and let you work on the real deal. When using webflow you can choose a template to start with or start with a blank page.
Even if you are sticking with WordPress, you can simply use this drag and drop page web design tool to create fully interactive website and theme prototypes. After that, you can recreate your designs by hand for WordPress or use your favorite drag and drop theme to build your new WordPress website.
Webflow might offer more than you need, but it’s packed with features that can help you create eye-catching designs you might otherwise struggle to build as quickly.
InVision is a web-based prototyping tool that allows designers to create highly interactive mock-ups for web and mobile projects. While you can’t create designs directly within InVision itself, you can upload your static page designs into the tool and then add hotspots to transform them into fully interactive mock-ups. Additionally, InVision has the ability to sync with your Photoshop or Sketch documents, allowing you to update your prototype in real-time within your design suite program of choice.
Lolcolors is a useful tool to help you make color palettes. It is based around the LOL emoji, with the palettes appearing as a stream of tears that run out of the laughing emojis eyes. Why? I have no idea. This mystery aside, It’s a great tool for finding inspiration and generating a random color palette for your next design.