Web Design Workshop #8: Web App Landing Page
tuts workshop

Web Design Workshop #8: Web App Landing Page

Web Design Workshop is our weekly community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, we have another design from Adi which will be used in a coming tutorial..


Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.


The Design

Web Design Workshop #8

Hey guys, I’m working on a new tutorial series and I could use some community feedback on the design. It’s a landing page geared towards online subscription services/online apps. Let me know what you think! – Adi Purdila

Larger images:


Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Hamid

    well then we’re waiting for it:-)

    btw i like adi tutorial and articles especially tuts videos:-)

  • http://maomuffy.com Mfawa Alfred Onen

    I like the design overall. It has a touch of professionalism but I just feel it could do more with some color. But Once again, Great page.

  • http://jonboutell.co.uk Jon

    Really nice design. Clean and clear. Agree with Mfawa, could do with a more definitive colour scheme.

  • http://sdbwebsolutions.com Serg

    I like your landing page design a lot!
    I could add a small video to act as a teaser to the tagline area box.

    Great job!

  • http://laranzjoe.blogspot.com lawrence77

    yes we need colors, to learn the color theory in web design from the mouth of adi :)

    and why not the area “My imaginary tagline” while be a slider, a avatar of the customer in testimonial area ;)
    the drop-down box in the contact form is sexy ;)

  • dj

    Nothing from what you gave us allows me to see how it will “really” look on my desktop screen (landscape as most all are now). I fear that it looks like yet another tiresome 960 px strip down the middle of the screen where I have to scroll in spite of wasting almost 40% of my screen space above the fold. Why don’t you do something REALLY unique instead of merely repeating previous tuts and design what may be the first ever fully responsive landing page on WDTuts. Get those features up alongside the call to action above the fold on desktops where they belong (or even the testimonials).

    I personally purchase based on “content” not presentation; but I do have to say that, as it stands now, really nothing draws my eye to it to give it a closer look. Color, novelty, and “vortex” are missing. The dark background with texture is distracting and renders it difficult to read the text you’ve chosen – sort of looks like the printer was running low on ink. Also the pricing table looks fairly drab to me. You can do a lot better than a corner ribbon (so “last year”) and dark background for the “Best Value.” Bulge it out, pop the text, intensify some color.

    To my thinking, “clients” should be treated as sort of “name dropping,” obvious but subtle and understated. The way you’ve got them inside a box looks like a paid advertisement. Testimonials, when meaningful, can be indicated in a light, readable script without resorting to a 96pt wasteful quotation mark

    In short, again as it stands now, the page would not draw me in or sell me anything – unless the product or content had such a strong valence for me that it sold itself.

    After writing above, I opened all your “larger images” – I’m still distressed about all the wasted, above-the-fold space on my screen; however, your fabric looking background is much less distracting making the font easier to read – still could be easier however. You’ve given several different choices for “imaginary product taglines” – I don’t know whether you intend them to be a carousel or simply choices. Landing-Homepage-5 is the only one that seems to pop to me.

    I know that others have suggested a video; however, in the real world the most common user experience on videos is that they drastically slow page loads, are needlessly delayed and not at all what you want on a “sales” page like this [I'm still confused why anyone would call this a "landing" page instead of a "sales" page]. Motion would be great but it should be quick and responsive and NOT delay page load in any way. Perhaps some quick and easy css effect from the top or side as it loads. Videos are best left for user responses, when they deliberately choose to see them so know what to expect.

    Hope this helps.

    • http://none Curtis

      Really Good Advice. Took some for myself.

  • Christ

    I see nothing wrong with them really like /Landing-Homepage-5.png the most.

  • Pingback: Web Design Workshop #8: Web App Landing Page | Shadowtek Hosting and Design Solutions

  • supporf

    you got the touch adi
    i’ll never become a designer i dont know how mix the colors and make the effects
    you, you know how to do this
    always good to see your tutorials

    • http://www.snaptin.com Ian Yates
      Author

      At least you keep coming back and checking out our content – that’s a good start :)

      • supporf

        every day and night
        if you check my ip adress (i don’t know if you have the authority to) you’ll see that i keep coming by days and nights.. And by the way Ian Yates i loved your responsive series of webdesign skeleton.
        thank you i’am here i’ll not move or sleep until i learn webdesign

  • quang thanh

    Simple and clean, clear keep going on

  • http://www.landingpagedesign.us/ Mrinal

    I like this landing page clean look and feel. This is a web 2.0 clean landing page design.

  • http://sdplabs.com Srinivas Reddy

    Very nice..waiting for video series for HTML of these pages. Thanks in advance…!

  • http://www.adipurdila.com AdiPurdila

    Thanks for all your comments guys, really appreciate it.

    About the color bit, I intend to add color icons to the layout and a different layout with screenshots to the mix, so that fix it. Even if it looks a bit bland right now, I’m ultimately developing this for ThemeForest and some clients might just need a clean slate where they can add their own bit of color through images, icons and so on.

    @dj Also appreciate the thorough feedback. A fully responsive layout is on my To-Do list right now, it’s a great idea. I agree about the top bit where the call to action resides (it is a bit bland and unexciting), it definitely needs more work. I provided different “tagline” layouts because they will all be included in separate templates (some clients might want a simple price box with a button, some a subscribe form, some a video, etc…)

    Also nice points on the pricing table, clients and testimonials.

    What I don’t really agree is the “put lots of content above the fold” idea. A landing page (or sales page) in my opinion should be simple to use and to scan. Right now, I intended to have the call to action alone above the fold so the user’s job is very simple. I think adding a bunch of different stuff on the same level as a very important part of the layout will be distracting.

    • Robert

      What’s the different with Corpora previous tuts ?

      • http://www.adipurdila.com AdiPurdila

        What do you mean Robert?

  • Martin Martev

    The color for me is balanced enough. Overall a good job.

  • http://www.ennovation.ie Adrian Demian

    By what I see the design is 70-80% done….

    What I think is missing….

    1. Visuals (some images / graphics that have more colors and break the minimalistic 3 color theme) especially in the main banner

    2. The menu bar looks like is something outside the design… doesn’t connect that well … maybe attach it to the banner….

    Other than that I like it… very clean design.

  • http://www.inglesnarede.com.br Renato Alves

    You are doing geat Adi,

    I only wound change the position of the navigation, I would put this side by side with the logo.
    I think people would get what they want faster.

    But you are doing a great job. Thanks for sharing your work with us. =)