designing for clarity - ui breakfastdesigning for clarity 5 landing page design recipes from a...

31
Designing for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director

Upload: others

Post on 03-Oct-2020

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Designing for Clarity5 Landing Page Design Recipes from a Seasoned

Creative Director

Page 2: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Clarity by Frank Oriti

frankoritijr.com

Page 3: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

“Déformation Professionnelle”— a tendency to process the world through one’s

professional eyes rather than from a more balanced perspective.

Page 4: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

“Consumer Hat” Scenario:1. Tell me what it is.

2. Tell me what to do.

3. Don’t undermine my trust.

Page 5: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

“Design is not just something designers do. Design is marketing.”

— Peep Laja

Page 6: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

“Very often you will hear that ugly converts better but it doesn’t have

to be the case.”— Denis Suhopoljac

Page 7: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Recipe #1

Kill It with Your Hero Shot.

Page 8: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

A sales page can exist without images at all.

So be super-selective about those you add.

Page 9: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Invest in a professional photoshoot.It has the highest ROI possible.

Page 10: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Don’t use device images unless you mean it.

Laptops and browsers are for desktop & web apps.

Tablets are for iPad apps.

Phones are for mobile apps.

Page 11: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Home page design for Planscope by Brennan Dunn

planscope.io

Page 12: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Recipe #2

Keep Calm and Stay Consistent.

Page 13: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Wear red socks with a red dress.It’s that easy.

Page 14: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Keep a simple arsenal of assets.A logo

One background color

One accent color for your CTAs

An idea of the font (optional)

One or two illustrations (optional)

Page 15: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Style guide for Airstory by Joanna Wiebe & Jim Briggs

airstory.co

Page 16: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Recipe #3

Create Spectacular Linear Experience.

Page 17: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Ferrari World in Abu Dhabi, UAE

Page 18: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Control the logic. Control the environment.

Make your CTA a visual culmination point of the flow.

Page 19: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Home page redesign for Egghead.io by John Lindquist & Joel Hooks

egghead.io

Page 20: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Recipe #4

Sell on the Process.

Page 21: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

The benefits are not only about the end result.

We want to be cool in the process.

Page 22: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Users crave to look pro. Show them...Schemes or technical drawings

Workspaces, hands & tools

Professional people absorbed in work

Page 23: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets
Page 24: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Recipe #5

Don’t Undermine My Trust.

Page 25: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Things to show:You’re modern

You have existing clients

You’re trustworthy

You’re a good investment

Page 26: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Instructor portraits used for building trust

egghead.io

Page 27: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Lengthy author’s note written by Brennan Dunn

planscope.io

Page 28: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Things to avoid:ALL CAPS

Mispelings

Sleazy stock images

Outdated layouts from 10 years ago

Page 29: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

A credible-looking page.That’s all you need to build.

Page 30: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

“Perfect clarity would profit the intellect but damage the will.”

— Blaise Pascal

Page 31: Designing for Clarity - UI BreakfastDesigning for Clarity 5 Landing Page Design Recipes from a Seasoned Creative Director. ... Laptops and browsers are for desktop & web apps. Tablets

Thank You!Please get in touch:

[email protected] @uibreakfast