Sign inJoin
4
6 Comments

Ideas on how to improve the design

by Victor Hurdugaci

Hello everyone,

I put up a landing page today for my new product. While I know how to code, my design and artistic abilities peaked at stick figures. I'm looking for feedback on the design and UX of the page. Specifically, what I can do to make it look better?

The page is at: https://www.ideaworkbench.io

Aug 12 update: The landing page has been updated with a new design. Still looking for feedback. https://www.indiehackers.com/product/idea-workbench/new-landing-page-design--MEa6FZbYN8kF6hTe5bD

Victor Hurdugaci's avatarVictor Hurdugaci
on August 11, 2020
Say something nice to victorhurdugaci…
Post Comment
  1. 2

    Hi Victor, the page looks a bit bland as is. Here's what I'd do:

    • Set a fixed height for the above-the-fold section. It looks too big on a desktop screen. Or add a scroll indicator, so that people know they can scroll down.
    • Replace the coloured background with visuals (and use white elsewhere). You can use free sites like unsplash.com or humaaans.com. Use the colours as accent colours e.g. for headlines if you'd like.
    • Add icons to the "What we offer section".
    • Keep whitespace consistent e.g. the space on the bottom of the "What we offer section" and the "Join the whitelist section"; Add whitespace to the "Contact" section / footer.
    • Add some easy scrollspy animations e.g. fade in from top
    • In general look for inspiration from other landing pages. There are many repeating patterns that you can implement for yourself as well.
    thmsobrmlr's avatar thmsobrmlr
    ·
    6 years ago
    ·
    Reply
    1. 2

      https://humaans.com led me to https://blush.design. What a fantastic resource! Thank you again. I've updated the design using it.

      Victor Hurdugaci's avatar Victor Hurdugaci
      ·
      6 years ago
      ·
      Reply
      1. 1

        Looks much better now. Great job!

        If you'd like some further suggestions:

        • I'd make the height of the sections more consistent and add a bit of whitespace. To get an idea what I mean:

          section
  height: 700px;
  display: flex;
  align-items: center;

        • Add whitespaces between the image and text. It's also a good idea to never make text lines too long. The general guideline here is about 80 characters for readability.

          .jss11
  width: 400px;

        • Add some margin to images in tablet / mobile responsive versions

        Cheers

        thmsobrmlr's avatar thmsobrmlr
        ·
        6 years ago
        ·
        Reply
    2. 1

      Thanks for the feedback!

      Victor Hurdugaci's avatar Victor Hurdugaci
      ·
      6 years ago
      ·
      Reply
  2. 2
    • it's very... 16bit like?
    • above the fold the thing that attracts the most attention is the dark blue [1], is tat what you want people to click?
    • What do I do above the fold anyways? it feels like just a random ad that's done.
      try to look at some good marketing landing pages... or read a bit around these topics..
    hatkyinc's avatar hatkyinc
    ·
    6 years ago
    ·
    Reply
    1. 1

      Thanks for the feedback!

      Victor Hurdugaci's avatar Victor Hurdugaci
      ·
      6 years ago
      ·
      Reply