A small list of awesome design assets for your first website

There is an endless stream of design assets, libraries, websites and Github repos with design assets. When I started creating websites, one of the hardest parts was to find inspiration for the graphical elements on the website.

I have created a small list of awesome resources I continue to use when building websites. The best new resources are rarely found with simple Google searches. These solutions all have code examples provided, which will allow you to implement them on your own website.

1. Codyhouse.co

These guys continue to create beautiful designs in all of their posts. I highly recommend signing up for their newsletter. You aren’t going to be able to use the majority of the designs for your projects but the minimalist style continues to be an inspiration. Additionally, they provide source code and examples for all designs.

2. Unique Gradient Generator

Getting the right background can be tricky. A stock image doesn’t always provide the desired effect and a specific color. This is where a gradient comes in handy. It is perfect as a background for a call-to-action components.

3. Littlesnippets.net for inspiration

I haven’t seen an article, where Littlesnippets.net has been referenced. It provides plenty of great resources for your styling. When creating a landing page for a small business, this is a great place to find resources for the individual components. All examples have the source code provided.

4. An awesome grid for images

The image grid comes in a large number of variations. I have come to love this one for its simplicity and easy styling. It has been used to create Pexels.com with a beautiful result. I have personally used it for a mushroom website (Shroomi).

5. A simple Codepen for headline text animation

This codepen was featured as one of the most popular ones in 2015. It shows how to create a really simple yet extremely beautiful animation for text on a website. Animations should be used in small quantities in the right places and this is definitely one I see myself using for future projects.

6. Simple hover animation

Similar to the previous animation, this one was features on the top codepen list. This time it’s about images, where Chris Deacy created a simple and beautiful hover effect and images.

7. Inspiration for beautiful buttons

This button styling has become increasingly popular on websites around the internet. I find these way more beautiful than the majority of buttons used in frameworks. This codepen uses SCSS, which I highly recommend getting started with. I haven’t used it for long but it makes it so much easier maintaining my websites.

8. Simple color inspiration

Colors and images are used on every website and can make a huge difference in presentation. I’m a fan of the less dramatic colors, which are featured here.

9. Social Icons

Necessary on most websites and easy to find everywhere. I included a small codepen with a couple of cool icons. Remember to include font-awesome on your page to use these icons.

10. Interesting images

Images do not have to be limited to the regular square and circle shapes. Using the tool made by Bennett Feely, you can easily transform them into a variety of shapes. This can help differentiate your website from others.

Create your own style

When creating a website, I don’t recommend trying to come up with a complete style from scratch. Search the web and find inspiration for the individual components. The best way is usually to ‘steal’ the style of these components and integrate them with your own style on your website. This is also a way of distancing your own websites from the styling provided by framworks such as Bootstrap and MaterializeCSS.

I will continue to create posts on web development and web design. If you’re interested, follow me and receive the future updates.