There is an endless stream of assets, libraries, websites and 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. design Github 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. 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 with a beautiful result. I have personally used it for a mushroom website ( ). Pexels.com 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 , you can easily transform them into a variety of shapes. This can help differentiate your website from others. Bennett Feely 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.
