The Best Web Design Resources: A Megathread
The Best Web Design Resources: A Megathread
This megathread is a resource dedicated to archiving interesting and helpful website design tools. The majority of resources found here are free, and the paid ones offer immense value. Instead of creating a list that can only be edited by our staff, we're going to be using our comments section to post interesting web design resources (in the form of online websites or applications) that should be helpful for you.
Because this is using our comments section, we invite you to respond to our resources (ask questions, provide other viewpoints), or submit one of your own. Be sure to follow the same structure that our comments take, or your resource will not be approved. The goal of this page is to create a megathread of awesome tools that you can easily run through.
Scroll to comments to view resources.
Some defining characteristics:
- New or unknown
- Free or offering immense value
- NOT tied to any 1 CMS
- Helpful for web designers or developers
Also, we publish more detailed information regarding each of these website design and development resources on our Facebook group which can be found here:
Bookmark This Post
James LePage
WEB DEISGN RESOURCE: CSSGradient.io
A free website That helps you easily generate CSS background gradients. This is super helpful if you are looking to add a unique and modern effect to your sections or divs. it's also a major timesaver if you need to write the CSS for gradients and simply don't want to type it out.
The design of the website is super easy to use, there's a one click copy feature of the code it outputs, and you can easily preview the gradient. It's completely ad supported, though you can block that via ad block. Basically, if you're looking to create CSS gradients, this is the best resource for you.
WEB DESIGN RESOURCE: LogoBook
LogoBook Is a massive repository of logos That is categorized by shapes, letters and numbers, objects, nature scenes, businesses, and more. It's the perfect place to get inspired by existing logos created by world renowned design firms and freelancers. We use this tool a lot when looking for specific inspiration related to a shape or a letter.
WEB DESIGN RESOURCE: Coolors
This is a web application that has grown to include extensions to the Adobe creative cloud as well as IOS. It is a complete platform for managing and generating color palettes. If you're looking for a simple way to create color website schemes, this tool is perfect for you.
There are several ways to generate different color palettes which use actual scientific methods, you can also choose from images (an eyedropper mode), see the different shades of the individual color, generate gradients, and save all of your pallets to an account. All of this is 100% free, and it comes in an incredibly well designed and easy to use interface. This is the tool that we used to create and manage all of our colors for every single one of our website creation projects.
WEB DESIGN RESOURCE: Blobmaker
A super nice web app that helps you quickly create random, unique, and organic-looking SVG shapes. Blobs are very unique elements, and incorporating them in your website design and development projects as a cool effect. This tool allows you to create super cool blob shapes without even needing to understand how SVG works.
WEB DESIGN RESOURCE: Better Lorem Ipsum Tool
Instead of generating standard placeholder text and looking like every other web designer in the world, this platform allows you to quickly scrape information from Wikipedia related to a specific topic. Because Wikipedia is public domain, you can use this as placeholder text in your projects, and even make the topics relate to the website itself. Not only does this look better, but it provides more real world text placeholder so you can design around that. You can generate paragraphs and or bullet points, and include HTML tags or keep it as plain text. This is the tool that we used to create the majority of our placeholder content because we don't like Lorem Ipsum.
WEB DESIGN RESOURCE: CSS Flags
This website is an archive of a bunch of different country flags created with CSS only. If you're looking to include a flag on your website and don't want to go the standard SVG or PNG route, you can use these CSS flags instead. As a unique resource that probably comes with some performance benefits as well.
WEB DESIGN RESOURCE: Website Carbon
The website carbon website allows you to calculate the total environmental impact that running your website or your client's website will have on the world. It tells you the total output per year, gives you statistics to help you personify this data, and let you know how many trees you need to plant to offset this footprint (if you have any). it's a very unique tool, and something that we haven't thought about in the past. For us, our blog is not environmentally friendly, and we have planted 14 trees via a charity to offset our carbon footprint.
WEB DESIGN RESOURCE: Responsively.app
A helpful desktop application that Displays any website in a collection of device screens. It is created to help you design responsively, and includes several tools oriented to website developers and designers like a complete developer tools integration, the ability to add and remove preset devices, and also custom dimensions, hot reloading, and screen synchronization between all devices when clicking or scrolling on one.
WEB DESIGN RESOURCE: Measure-it (Chrome/Firefox Browser Extension)
This is a super simple browser extension that allows you to accurately measure pixel distances between elements, or the volume (l*w) of an area on the page.
WEB DESIGN RESOURCE: K6 Tools
K6 Is an open source tool that allows you to load test your web server with it, you can send a ton of fake traffic and see how the server responds. This is great if you need to determine the maximum load that your current server resources can handle, and you can confirm that your website won't go down if there's a traffic spike. You can also figure out if your webhost is fast by determining the speed of connection over an average of thousands of individual ones. They also offer a nice free GUI that can be used online for testing as well.
WEB DESIGN RESOURCE: Vector Pattern Generator
A really intuitive way to create vector patterns for design work. You can choose from presets or add your own assets to create seamless patterns. This is very helpful if you're trying to create large CSS backgrounds by utilizing the repeat functions (It also keeps your page way down because you only load one smaller file instead of many large ones).