Have you ever browsed Dribbble or Behance and spotted a landing page with jaw-dropping illustrations and beautiful colors and wondered: “Why can’t I create something like that?”. Well, I’m here to tell you that you totally can!
You just have to follow these simple steps:
1. Come up with a fictitious product
Relax, you don’t have to invent the product, only come up with the name. Choose something that’s already a word, preferably used in design scenarios, like “Frame” or “Bold”.
When you’ve named your product you’ll have to create a logo. Pick a sans-serif typeface you like and set the weight to bold or black. Do NOT use free fonts from the Google Fonts library. Pirate a popular font, like Circular, Avenir or Sofia Pro. No need to pay a gazillion dollars, there’s no real client here anyway. Add a punctuation or something to make it look edgy.
2. Start with the header
Pop in that gorgeous logo from step 1 and add some navigation elements. Make sure not to create any visual clues that these are interactive. Underlining your links? Forget about it, nobody likes that.
3. Create a hero section
Head on over to unDraw or Humaaans (Pablo Stanley is my spirit animal by the way) and grab some free illustrations. They don’t have to have anything to do with your product, just choose the ones you like the best.
Populate the hero section with a title and a descriptive text, and place an illustration next to it. Pay close attention now because this is important. Uppercase the first letter of every word in the title like it’s a Buzzfeed article. Choose a light grey color for your descriptive text. Remember, you’re creating this for Dribbble and everyone on there have perfectly calibrated retina screens and 20/20 vision. If you can read the text while being in a well lit room then you’re not going light enough.
Throw in some CTA buttons, one primary and one secondary.
Pro tip: If you really want to spice things up you can add one of those dotted grid elements as background decoration. Visionary.
4. Add some company logos
Choose a couple of big companies, like Microsoft or Netflix, and line up their logos horizontally. Do not explain why the logos are there. Are their employees using this product? Are they sponsors or partners? Doesn’t matter, ambiguity is the key. Oh, and choose a light grey color here too.
5. Create more sections
Now it’s time to tell the audience what your product is good for without actually telling them. Remember, this is a fake product and not even you know all the details. Keep it short and simple. Make people think it’s like Slack, but not like Slack at all. As long as you emphasize that this product can help teams or improve your workflow you’re on the right path.
Choose a different illustration for each section. Think about the rule of threes and create three sections total. Add a number to each one so that you don’t have to count them in your head.
No product landing page is complete without feedback from its users. Go to UI Faces and find some good-looking celebrity photos. Nothing beats getting Wonder Woman’s approval on your product. Don’t use their real name though — be generic and short.
Line them up so that it kind of looks like a carousel, but don’t include any navigational controls. Just imagine them popping up when hovering or something. People can always click and drag, no big deal.
7. Footer sections
Differentiate your footer section from the rest of the website. Add a newsletter sign up form as a buffer. Who doesn’t love newsletters, right? Border-radius the hell out of it (yes, I used ‘border-radius’ as a verb there).
Top it off by adding the classic Four Column Footer Sitemap Thingy™ at the bottom.
Your site is almost complete. Now for the finishing touches.
8. Let your design pop
Skeuomorphism is dead. Flat design is dead. This is something else. Elevate your design. Add shadows to all your elements. A lot of shadows. Make sure your blur-radius is well into the double digits.
9. Create a fake browser
Nobody wants to see how the website will look like in reality. Create a fake browser without all the browser stuff. No scrollbars, no bookmarks, no tabs, no nothing. Just a white container with border-radius and shadow.
Make some of the elements stand out. Pop one of the testimonials out of the container, because that’s not how browsers work at all. Drizzle some confetti-like dots on your background.
Enjoy your finished product.
Bonus tip: Open your design in Adobe After Effects and add some nice animations to each element. The more moving objects the better.
10. Post to Dribbble
It’s time to upload your finished product to Dribbble. Realize that you don’t have an invite so post it to Uplabs instead.
Sit back, relax and put on a life vest to avoid drowning in job offers.