13 Corners of the Internet to Find Inspiration for Web Design
Looking for a shot of inspiration for your fancy projects? Look no further as below I have compiled a list of some of the best online goodies that you can check in order to give a boost to your creativity in your quest for the perfect web design.
This curated list targets not only the adventurers who are seeking some inspiration in starting up fresh with some awesome projects, simply the ones that are looking to fill a gap in their design, but also the perfectionists who would like to try out different things until they reach their digital Fata Morgana.
If you are like me, then in most cases, after a thorough brainstorming, you end up firing new projects at your GitHub account faster than the rate of finishing them. Way, way faster.
After some self-reflection and poor judgment, I realized that in most cases I would end up being caught in a design loop every time I would try bringing my ideas to life. Basically, by not aiming at something, you end up improving something that always ‘can be better’ or you might be tempted to try out different things until you decide that you are happy with your current design. If, you will ever be truly happy!
Reasoning
If we start tapping into the reasoning of such a flaw, the main trigger for such a decision scarecrow is the inability to see the bigger picture while you lay the foundation of your website, <div> by </div>, brick by brick. Having a clear goal of what you are trying to build will not only tremendously boost up your development speed but it will also offer you the chance of creating milestones in your journey, that you can celebrate while achieving them. And this is definitely a key motivator, especially when you are developing for yourself, for fun, or even on a normal basis.
If this struggle sounds familiar, then you are in the right place. Below, you will find a list of some of the finest resources that you can use to spice up your ideas while you bring them to life.
For your convenience, I have separated them into some main categories, which will keep you on track with your current needs.
Design
Even if it’s for peeking at a fully unrolled web design, a nice footer, or, even more granular, for some specific component ideas, as I have already said earlier, it is a vital step to set some goals when we are trying to materialize our ideas and the best way to do so is by deciding on what we are trying to build before we move on to understand how we are going to do it.
CSS Nectar
CSS Nectar is a website design showcase for web designers and developers. Here you can browse for a wide variety of portfolio websites as well as product-related websites that are already up and running. They update their collection on a daily basis.
Land-book
“The homeland for fine websites” — This is their motto and I have to say, it does not disappoint. They also aggregate fine designs and well-crafted websites of different topics such as landing pages, portfolios, online stores, blogs, and much more. No matter what project you’re working on, there’s always something around that might inspire you here.
Behance
Behance is basically a social platform for creatives that aims “to showcase and discover creative work”. They are owned by Adobe so they are pretty huge in terms of the categories that they are curating on their platform. Specifically, one which we are most interested in, web design, offers plenty of designs and mockups which you can explore by tweaking some filters. If you are more into design than code, you’d be happy to hear that they also have a live category, where creatives from all over the world stream in real-time their work. Neat!
UI Design Daily
This fella is a special one since it boosts the works of an independent designer who started from a 100-day design challenge and apparently never stopped since. I personally use this one extensively for inspiration for small components, layouts, and also different themes. Another cool thing is that you can sort the designs based on the tools that they have been created with and then also download them locally so that you can tweak something if needed.
Awwwards
As the name suggests as well, this is the crème de la crème of web design and web development. To be more precise, this platform is like the Oscars of web development. A submission based competition that recognizes and promotes the talent and effort of some of the best web developers, designers, and web agencies in the world based on innovation, creativity & technicality.
Roll out the red carpet!
Dribble
Just like the others, Dribble serves as a design portfolio platform where designers from all over the world share their ideas. In some of the cases, these are designs that end up not being implemented so they get repurposed by sharing them with the community but also designs coming from self-promoted creatives. Regardless of their source, something will definitely catch your eye here, while browsing these goodies.
Assets
Okay, so this is the category that we consume in our projects. Literally. I’m talking about everything which we serve in our web projects: images, icons, fonts, etc. You can find a humongous amount of resources like this over the internet, but the ones that I hand-picked here are the ones that have the easiest integrations, so you can add them to your project on the go and use them right away. Plug and play!
Google Fonts
Fonts are an essential part of our websites since they are the most direct mean of communication between us and our users. Sometimes we want our texts to catch the attention, other times we want them to inspire a feeling or send a message. Regardless of what we want to express, Google Fonts hosts an impressive collection of over 1000 font faces.
Here you’ll find a font for almost any need, from the super flashy and excentric to the geometrical and the exquisite and calligraphic typefaces. You’ll probably spend some time deciding which one to use, so they conveniently added a simulator to see how they mix together.
Font Awesome
The legend, the famous Font Awesome. This icon toolkit gives you scalable vector icons that can instantly be customized from size to color, and pretty much anything that can be done with the power of CSS. It offers a wide variety of paid and free icons that together pass a little over 9000 icons. You can find almost anything you want here and on top of that, the integration is very simple and the usage is even easier. Happy ‘iconing’! 😏
Unsplash
Okay, this one is most probably known from our list, therefore it could not get unnoticed. It’s amazing for experimenting with full image layouts and various image sources in general. No matter the niche that you are working on, you can find pretty much anything while browsing through their never-ending categories.
Tools
In short, this category contains some of the best platforms that you can use in order to help you manage your projects, play around with assets, store personal preferences (e.g color palette), and more. There are plenty out there as well, but I will stick to the ones that I found myself using the most.
Figma
Figma is an amazing free tool for your side projects and nowadays I find myself working with it more often than not. It lets you do a lot of cool things but the most usual ones are importing designs, ideating by creating various mockups, manipulating vectors, and creating different shapes. One neat trick that I discovered was that you can also group your vectors and name them and upon export, you can shoot it out as an SVG in which the ids are the actual group names. Using this, you can manipulate them from JavaScript and make it do everything you want (animations, transformations, behavior).
Hero Patterns
Hero Patterns is a collection of highly scalable and repeatable SVG patterns that you can use for your backgrounds. As a bonus, you will also appreciate Hero icons which boosts a few hundred icons that you can also easily integrate into your projects.
Coolors
This color scheme generator is definitely one of my favorites. It’s fast and easy to use. If you wanna be inspired, there are plenty of trendy color palettes that you can explore from the community, transform an image into a palette, create collages, explore color shades, and much more. And on top of that, you can of course create your own library with different presets and bookmark your favorite coolor combinations.
Web Gradients
If you are into gradients, you will highly appreciate this one. Web Gradients is a collection of linear gradients that you can use for pretty much anything that you can imagine. After you had chosen the one that you find the most appealing, you have the option to easily copy the CSS3 cross-browser snippet straight into your source file. Easy peasy, lemon squeeze.
Conclusion
That’s all folks! I hope this list will provide you with plenty of ideas and resources for the quests that you are going to complete in the land of design and web development. If you also know of any other gems that can throw a little push in our creativity, then be sure to leave them in the comments. I would love to see new and fresh goodies like this, as I am always on the lookout for more.
Announcement: We are hiring! If you are interested in similar technologies and would like to work with us, check our careers page. We are looking for enthusiastic candidates, especially for Belgium. So, send us your CV!
And also, don’t forget something important: you can never run out of creativity. The more you exercise it, the more you’ll gain. 🦄 Good luck!
