I have a bunch of projects I am working on for fun, mostly around web apps. Some of them are just concepts and some exist but need a revamp for a professional design.
So I want to share some of the tools I am using in my process. From designing the layout of the page to choosing color schemes and images. So when I start coding, I have the design and artistic decisions mostly figured out.
Whimsical
A free, intuitive wireframing tool.
Design your app for mobile or desktop. Create some webpage wireframes where you can see your whole website laid out on one giant page, with arrows and lines connecting them.
The ability to add styling is limited, but this is fine as it keeps the emphasis on laying out pages and components on pages, rather than colors or fonts.
Wix
I've used Wix before to prototype designs for a site, even though I end up coding the site myself after for more control.
Being able to move around elements and add a gallery in a few clicks is amazing. Then code it yourself when you are ready.
Webflow
- https://webflow.com/
- 10 best templates of 2021 on their blog.
This is a web design and hosting tool like Wix, but with finer control over styling like adding classes to elements. Wix is ideal for non-developers while Webflow is intended for developers.
You can also add a CMS layer and ecommerce aspect to your site.
I want to use this to prototype my designs.
You need premium for Wix and Webflow if you want to remove ads and use a custom domain.
Coolors
I need to choose a color palette that is harmonious.
On Coolors, I can find existing palettes by other users or make one myself.
There are probably many similar sites.
Unsplash
This is a great stock images site. Search for high quality high resolution stock photos. Link to the image on their CDN at the appropriate resolution from your site, or download them and add them to your site.
They are all free. You are encouraged to use a credit to the author but this is not required.
You'll find dev.to and other blogs tend to have cover images found on Unsplash (which some images of laptops and code on screens being used annoyingly often but such is life).
Free SVG
Similar to Unsplash for searching for SVG files. An SVG can be scaled to any time and is typically small in file size, so it great for small icons to a large logo on your site.
Images are under the creative commons license.
I used this tool to find a dragon image which I added to my one project.
Wrap up
I hope you learned about some new tools and feel inspired to go and design something. Let me know of other similar tools to recommend.
Top comments (1)
Hey Michael!
Thanks for the efficient tools!
I would also like to add Octopus.do — octopus.do for creating sitemap and low-fidelity prototyping.
For objectivity about Octopus.do you can ask Google where we are in the TOP3 relevant queries.