Designing a landing page

📅 Saturday, March 30th 2019

9 minutes read

I was always amazed by the creativity and problem solving of the designers I had the privilege to work with. It's not just about delivering some content and making it look good. Good design plays with the psychology of the visitor. It tells a story and guides you through it effortlessly. That's art in my book.

As a developer, I can do some prototyping right on the spot, but I don't have the skill to properly communicate my idea with my visitors. I just lay out the contents and apply some acceptable styling. This website is a testament to this. I have iterated over and over again, with no plans to stop.

So what am looking to do, is to be a little more competent at it. Most importantly though I want to understand my designer's POV a bit better.

So what better than try stepping in their shoes for a day?

What I think I know about Web Design

For now, I'll go ahead with these things in mind:

  • General principles

    • When in doubt, use the golden ratio
    • The readers skim the text.
    • The readers scan the website in an 'F' pattern. Vertically when skimming, horizontally when something is interesting.
    • Negative space is good. Busy & cluttered designs are offputting
    • Consistency. Sloppy design and/or implementation gives the idea that the product is sketchy.
    • Everything depends on the target audience
    • Usability above all
  • Implementation good stuff

    • Content hierarchy is better achieved using font color & weight rather than font size
    • The fewer the borders the better
    • The shadows should be offset - the light comes from above
    • Small text benefits from bigger letter-spacing
    • Centered text should be avoided
    • #000 as the main font color is not ideal

Alright, not so much. We're still doing it though!

What I want to do as a front-end developer

But my secret weapon here is that I'm the guy implementing the designs! Here's what I would like to see from the result:

  • Adaptive design
  • Focus on accessibility

    • Everything should have a satisfactory color-contrast ratio
    • Everything is in a sensible size. Having some text in 10px makes no sense (fine-print or not)
    • Links should have descriptive text. Single arrow links are a nightmare for voice-over users
    • Feedback should not rely on color. Colorblind people like my father cannot differentiate error states just by being red. Using an X icon helps a ton
    • If there is a form, it should look like a form. Labels focused state and visible borders are important
    • The outline effect serves a purpose. The default browser outline is something the users expect to see. This also includes Google Chrome's annoying yellow input highlight
    • The controls should be visible at all times. Having actions like edit or delete being hidden behind hover, is almost always confusing.
  • Being sensible about the number of typefaces and their fonts. Too many of them and we're slowing down the site. System fonts are also an option - The users already use them on their machines, and tech leaders like Github trust them
  • Reusing as much as possible, which leads to fewer CSS rules
  • Having very few DOM repaints, which is the most expensive operation and can make the UI sluggish
  • Not relying (too much) on Javascript. (Bad networks receptions, old devices)
  • Having images that can be used in Next-Gen formats. For example, if we need transparency for something as minor as a shadow and are stuck with PNG, the design needs tweaking
  • If there are have images, most of them should be lower than the initial viewport. That way lazyload is possible and we minimize critical network requests
  • No fixed width elements. If we were to translate our page, something like 'Our Journey' becomes 'Наше путешествие'. A design that expects a button to be (say) 120px is flawed.
  • An idea on how the navigation behaves as the viewport shrinks.

Before we continue, a little something about accessibility

Working towards a product that is accessible for anyone, does not mean that it should be ugly or boring. Some fellow on a forum about card games told me that Limitation breeds creativity. I stopped raging for the moment (some cards got banned from competitive play) and thought about it. Sounds pretty cool doesn't it? Since then I always carry this thought in the back of my head. I believe the same applies here.

Anyway, back on topic, accessibility is important and it's not 'just blind people'. Try to navigate without your mouse for a couple of minutes. How do these super useful popups about GDPR, newsletters, and discounts look now?

What about the text-to-speech functionality? These :after & :before hacks seem so pointless to me now. I always felt great getting the design right, but never thought that it might offer 0 value to some people. I browse around my website or some older projects I made and I'm embarrassed.

So yeah, for this project (and forever in my head), accessibility is #1.

The use case

Alright, let's create a hypothetical scenario.

  • The website is for a company called Chevalier (I have this poster right in from of me so...)
  • They sell a time tracking software (Because I was reading Toggl's blog before)
  • They have different paid plans
  • They have a free plan (thus you can download something immediately)
  • They care much about accessibility and want to be a bastion of a web that is inclusive
  • They have a blog and want to preview something on their landing page
  • They don't want to use system fonts because it will look like crap on Windows
  • They don't have a style guide (I said it's hypothetical)
  • Their audience is

    • Regular people who want to track their working hours efficiently
    • Colleague students
  • Their product is available on

    • Web
    • MacOS, Windows, Linux
    • iOS, Android
    • As an extension for Chrome, Firefox, Safari
    • Wearables
  • Let's say their primary color is green (Green: Wealth, Money, Calming, Trees, Ambition, Endurance, Healing, Calm, Generosity, Natural, Completion, and Protection)
  • And finally, they asked me to go easy with the bullet points

Prototype

Time to brainstorm.

What is the main thing I want someone to do when they visit the web page? Probably to sign up. Downloading the native application is the secondary action.

We also need a strong copy for the Hero section, something to do with time. Can't think of anything right now, so let's move on for now.

Afterward, we should succinctly explain what we do. We have software that helps you better organize your tasks and increase productivity. Something like that, honest talk. Actually, upon re-reading it, it's too lengthy. Let's just Lorem Ipsum our way to production for now.

As per usual let's throw something eye-catching. A fancy illustration so that the visitor won't bounce. I already feel like I'm innovating here.

Is the visitor still here? Brilliant - let's inform them that we have a generous free plan and a 100% discount for college students. Actually, this should be more prominent. Maybe our lead text can use this.

Now we can follow-up with the features. We need to include some info on the platforms that we support, but this is a feature too. Maybe we can use this as a way to swap between sections.

It would be a good time to mention our blog now, before giving some more info on the pricing plans. Now that I think of it, the opposite is better. Plans, Blog, another sign-up CTA and then whatever else is left.

Hmm, let me get some pen and paper.

Prototyping

This is horrible and I should feel bad. Let's keep it though and start using Sketch.

Oh boy, let's try Sketch

The design will not be using a mobile first approach. Why? Because I just opened Sketch and I'm overwhelmed.

Sketch intro

Ok, now we're talking. Working on a 15' inch Macbook template, testing the grid, and making room the color palette. I'm so good.

Let's decide on the colors for a moment.

These will suffice for now. #444 is for the text color, and the rest are some random ones I generated without much thought.

Colors

At this point, I'm trying to figure out how to lay out a basic structure. It's much much harder than I anticipated I haven't figured a way to have a button template and put some text. Falling back to using pixels is sometimes mandatory. I start to understand now.

The first attempt

First attempt

I spent way too much time on the top half and rushed the rest.

Things I need to revisit:

  • Use consistent spacing - multiples of 8 (8px, 16px, 24px, etc)
  • Use consistent font sizes. I'm so zoomed out that 28px fonts make sense at times.
  • Update the second section
  • Decide on the text-alignment of the pricing section
  • Update the downloads section
  • Update the testimonials page, no background seems bland
  • Update the footer

The updated version

Second attempt

Hmm, it still feels a bit rushed (it is) and some sections are way too close. But this should be it. I don't want to work on it for more days.

Stuff I missed

The most important is that I still don't make clear what the hell we're selling. I was so consumed with making the style acceptable, that I missed the point that it should be usable & helpful.

It also feels cartoonish. I wasn't going to design something for an enterprise client, so rounded borders and silly illustrations made sense. But still, it feels way too playful.

Furthermore the downloads should be in a more prominent section. They don't feel "clicky", and the said section looks more like a footer than the footer does.

Overall, I'm not very happy with the result, but I was a time well spent trying out Sketch!

General takeaways

Designers are a treasure we should cherish them.

I can completely understand how hard working with adaptive design in mind can be. Also, when I rage about buttons being in X pixels, that's because it makes sense to design them this way. When writing CSS, it's easy to say "Every button should have Y padding left and right, and expand as needed". So that's something to keep in mind.

It's also difficult to work with accessibility in mind. I sure as hell preached a lot about it earlier, but color-testing was a tedious task. I can only assume how harder it is while having a strict deadline.

So, yeah. Sketch is lovely and I enjoyed using it. Design as a field is a super interesting one, and I'm sure I made a lot of professionals angry by oversimplifying their craft.

Looking forward to doing some more work!

Download the sketch file here

I used evernote.design for the resources

Thanks for reading!  ❤️
Next up: The impostor syndrome
Previous: Removed tracking
Due to privacy concerns, I've decided to remove Disqus.
Until I settle for another commenting solution, you can share your thoughts with me via e-mail
Back to Posts