Tools, Resources & Inspiration I Use For Designing Landing Pages
Designing beautiful landing pages that stand out is a difficult task. Specially since most people are not designers themselves. Luckily it’s 2017 and there are loads of resources and tools out there to help you with this task.
I listed here my own tools, resources and sources of inspiration I use when I am creating a new landing page.
Inspiration
First step for me, before I start even drafting the landing page design on pen and paper, is to get inspired. Here are some sites I use for that.
One Page Love
One Page Love is my initial source for inspiration. These are pages that are live as oppose to a design draft done with Sketch or Photoshop. I often spend time going through the featured sites with Chrome inspector, it’s a great way to learn CSS!
Betalist
Betalist is also awesome source of landing page inspiration. I specially use the site to get inspired on the wordings and call to action tactics! (P.S Betalist people I submitted Tweak a few weeks back, so if you see this…).
Now we get more to design porn territory here. Searching landingpage on Pinterest is also a great way to get inspired, although a lot of the designs would rarely work as responsive websites…so take care wit that.
Tools
After spending some time and sucking in the inspiration like a sponge, I draft a quick layout plan on pen and paper. Then it’s time to start designing the page. I personally don’t use design software for this and instead prefer the DITB (Design In The Browser) approach.
Tweak
Tweak is my number one tool for the DITB approach (not just because I developed it myself 😇! You can read why I made it here). Tweak is a Chrome Extension that turns your browser into a WYSIWYG (What You See Is What You Get) page editor.
WebGradients
WebGradients, there are no words for how much I love this site 😍! I use it all the time for cool gradient backgrounds.
Coverr
Coverr offers beautiful library of videos that you can use for free. It comes with a javascript plugin and instructions on how to get an attention grabbing video background for your landing page.
Waypoints
You know those landing pages that have those cool entrance effects on some elements when you scroll to them? Well you can make those now also with Waypoints!
Animate.css
Another favourite of mine! I use Animate.css on literally every landing page I make. That is because it’s very simple to add animation effects on your Html elements, all you have to do is add the name of the animation you want to do as a classname.
Tip: Animate.css coupled with Waypoints allows you to trigger those animations when you scroll to them 😉!
Typed.js
Have you seen that cool effect on Slacks home page where they have those words typed in the screen? Typed.js is the way to do that, super simple, give it a try!
Resources
Need some cool illustrations, icons or fonts for free on your site to make it really stand out? No problem, here are some sites I regularly use on my projects.
Emoji One
As it’s name says offers a large library of emoticons that you can use for free.
Graphic Burger
A large selection of Freebies collected from different sites. You can find everything there from icons, mockups to backgrounds.
Font Awesome
Another favourite of mine. I use Font Awesome for quick and easy font icons.
Flaticon
Flaticon is a great resource of icons, it offers free icons on multiple formats, such as PNG, PSD and Sketch.
Google Fonts
Most of you know Google Fonts already, if you don’t, your primary source for fonts from this day on.
Unsplash
Unsplash! What can I say, there is no other like you, the very best source of awesome photos that are royalty free.
Dribbble
Need some cool illustrations for free? Just search freebies on Dribbble and behold! Also I have heard that asking people on Dribbble if you can use their illustration for your project sometimes works. (I never noticed dribbble had three b’s till right now 😆!)
That’s about it. Hope some of this can help you on your next landing page design!
What tools and resources do you use? Anything that I missed that should be on this list?
If you are interested in designing your next landing page with Tweak then give it a go!
Since you are all the way here, a like and a follow would be super awesome of you 😇.
