As I was working on Dontchip.com, I had a front-end developer stand next to me and watch as I used all these different resources to build my passion project. From the sites I use for inspiration to apps I use to integrate a chatbot.
It was cool to see him jot down all the resources to save for later. Which made me think that other people might find it useful too! So below are all the FREE and useful resources that I use on the daily!
Here we go!
✨Let’s start with the inspiration
I’ll be the first to admit, I’m not always inspired when I need to be. I get these creative blocks - similar to a writers block. 😬
“Creative blocks, or barriers to inspiration, can be described as the inability to access one’s internal creativity”
So that’s when I turn to my two favorite websites: Dribbble and Awwwards.
Dribbble is practically Instagram for professional designers. Instead of photos, this place allows us to showcase all our creative passion projects or work that we’re proud of.
This place inspires me to try new color palettes, find ways to create my own patterns and makes me question why the other designers lay out components the way they do.
Awwwards is a platform that holds the best website designs in any industry. Agencies, designers, and developers from all over the world upload their website to get nominated for the various awards, so its the perfect place to see what’s type of design is trending in certain industries, what content they have on their site or which new typefaces are being used.
🛠 Tools to design and build your site —
Peeper plugin
Peeper is a plugin I use religiously. This awesome plugin lets you browse every color, the exact typeface, the font size and even lets you download all the assets! You can now inspect the page to seeCSS and HTML, the divs and their exact margins and padding.
Peeper is the biggest time saver 🙌
Download here:
Figma
I’ve recently transitioned from Sketch to Figma. I’ve really learned to love how easy it is to collaborate or present deliverables to engineers and/or clients with the their live design feature-
It’s as if Sketch + Google drive + Zeplin had a baby.
You can also store all of your files online and access it from anywhere if you have internet access. Only downside to it right now is their filing system. There aren’t any folders to place projects in one place. But it did force me to make sure all the titles are easy to navigate and read. So, thanks for that Figma! 🙃
Check out Figma here:
😎 Webflow
No longer do you need an engineer to build super awesome websites… you got this
I was introduced to Webflow about two years ago and let me tell you… this platform has allowed me to unleash my creativity on a blank canvas. Webflow does a great job making it easy to design and build responsive websites. With CMS features that makes it great for custom blogging, portfolio and case studies.
Webflow is complex but its because you get full customization to your website.
Now you can create a customized interactive website without any knowledge of HMTL and CSS
- The very first Webflow video tutorial I used: https://www.youtube.com/watch?v=APiSNBkyD5Y&t=3927s
- CMS to create a template for your blogs:
https://university.webflow.com/lesson/link-field-cms
🔥HotJar
Looking to see how your audience interacts with your website?
Hotjar lets you see a recorded clip of how your audience is using your site.
Now you can now see if buttons are in the right place and what theyre reading and if theyre reading all of your content. It really helps you understand your users and their behaviors. As you learn what works and what doesn’t, make sure to update your website based on your findings.
Watch how to install Hotjar by clicking down below:
Hope you enjoy these free tools that I use on the daily. Let me know some of your favorite tools! I’d love to check them out!
Thanks for reading!
— read my other article to see how I break down my UI Design Process
— Im packing my bags and trying the nomad life! Read all about it!
