Web Design Workshop #1: Nomus Landing Page
tuts workshop

Web Design Workshop #1: Nomus Landing Page

on Feb 17th 2012 with 27 comments

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!

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 #1

I’m creating a whole new website for a software company and while it’s not ready, I’ve made this landing page to try to catch some emails. My thought was to let it be as minimal as it could be, so the focus could stay on the email. – André Quintão

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..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

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

    I don’t like the background. In my opinion it ruine the composition, but the bubble is very cool!

  • George

    From a marketing perspective, you need to think about the psychology when it comes to data capture. When requested to provide information, every user experiences a degree of friction (i.e. “why do u want this”, “what’s in it for me”, “will my data be safe”).
    As a designer there are steps we can undertake to reduce these negative influencers & this will result in a better conversion rate for the page.

    One element to consider is the type of language used on the page. Another is the positioning of key elements. For example, putting a benefits list (or similar) right by the input would help. Also include a subtle note about data security or how the information will be used can set their mind to rest.

    A lot of these points are easily implemented with a minimal design.

    –

    If it was me & this is solely a consideration on the balance of the page, I would have the width of the text & the input to be the same (i.e. 100% as per the footer).

  • http://terencedevine.com Terence

    I like how you created the OK button to look very 3d, dimensions, etc… but I feel like it doesn’t fit with the rest of the design. If you made that just a little less exaggerated, it would fit in with the rest of the design a little better.

    Overall the landing page is looking great tho! Keep up the good work!

    • http://themeforest.net/user/sasinger/profile SAsinger

      Agreed, I was hoping that there was a tutorial on how to make a button look 3d (like the OK button), since I have been trying to figure it out and have been looking through websites but have had no success :(.

      Does anyone know how to do this? Do you use the 3d object tool, drop shadow or what?
      Thank you very much :)

  • Mecha

    The font you are using for the logo is fine though I think you could drop the graphic and still be ok. You might consider the currently fashionable use of letter pressing and maybe drop the gradient. You have everything centered except for the footer info. Generally I would center everything if you are going to center it. Anyways keep up the work.

  • André

    Thanks for the feed back guys! You are giving me alot of ideas to think about.

  • http://iamnatalia.com Natalia Ventre

    It’s great that you took the time to create the coming soon page, I always forget those details.

    At first sight it’s hard to tell that it’s a subscription form, I think you should change the “Ok” label for subscribe or notify, add a placeholder in the field, or add a “Keep updated” title.

    I think there’s also a conflict of hierarchy, the logo and the form are too big and compete with each other.

  • Marco Salatin

    As someone said before, the OK button doesn’t fit in this design I think. Next I would suggest to use more white space, you have space, so use it… I don’t like the favicon of the logo, try to bring some idea into it and maybe do it a bit smaller (whole logo). A logo should make some kind feeling to a potencial client, but like this doesn’t make “serious” feeling about the company for me. Last think which I see, try recut the background pattern correctly, since atm its broken when is repeated.

  • http://time-wellspent.com Jaina

    I like the simplicity of the page – it’s pleasing to the eye and not being completely overwhelming.

    Though maybe I’d have a “sub-heading” with less text and set slightly smaller. Make more of an impact, aside from the logo. Like George said, there needs to be a reason as to why the user would give up their email address.

    I’m not too keen on the ok button. Looks like a keyboard key. Too blocky and doesn’t fit in with the smooth feeling of the logo.

  • http://www.dana-svedova.cz/ Dana

    As Natalia said, it would be better for the button to say something other than OK. The 3d design is interesting but I feel it doesn’t quite fit with the overall look of the page. Maybe try flattening it a little bit.

    For me the input field is a bit lost in it, even though it’s quite big. If you could try making it a bit more white, so it doesn’t blend in that much with the background?

    The white bits of the letter ‘N’ on the edges of the circle look a bit strange to me, maybe try colouring them as the blue circle below or instead of using white/light grey with the darker grey you use in the inside of the ‘N’.

    It’s a great look! :)

  • john

    i agree with a lot of what people have been saying, but also, i’d make the background a bit brighter and the pattern a bit more subtle. maybe go with a solid bright white (#fff) for the background and a slightly darker color for the stripe, maybe (#f5f5f5 or #eee). i feel like changing those colors a bit would add more contrast between the background and the input tags while maintaining your minimalist design.

  • David

    I would make the call to action more clear and prominent. Right now the only sentence telling the visitor to register his email is too subtle and hard to get if you are not paying attention.

  • http://www.dribbble.com/colewinans Cole Winans

    Cool start, a few thoughts:

    1. The logo seems a bit rough, almost like it was re-sized in a way that has made it pixelated Specifically, look at the top of the curves on the “n”, “o”, and “s” on “nomus”.

    2. I like the dimension and coloring of the “OK” button in the design – but this wasn’t actually implemented in the demo that’s staged here: http://nomus.com.br/site/

    3. I think the input could use some love – maybe an inner shadow?

    4. I’d play with the type a bit, increase the font size all around, and make it more interesting.

    5. Lastly… is “OK” representative of the action? Maybe “Submit” would be better?

    6. The drop shadow on the validation tooltip makes the tooltip somewhat fuzzy – maybe tighten that up a bit?

    It’d be cool if you shared the PSD — so those that comment can iterate, instead of just talking the talk.

  • Pingback: Web Design Workshop #1: Nomus Landing Page | Shadowtek | Hosting and Design Solutions

  • http://www.redcrown.co Matthew

    I agree with some of the comments above. Lose the gradient, make everything equal width, make the effect on the button less exaggerated, and I wouldn’t center any of the text.

  • dj

    It’s true you’ve captured simplicity very well and I guess we’re just looking at the design (not being able to see how you’ve actually coded it); however, I believe you are quite wrong in what you claim is your intent. You say you want to keep it simple “to focus on the email” – huh? That is NOT the goal of an “under development” page no matter what you call it. Your goal should be to tantalize, entice, tease or do whatever you can to give an enticing glimpse of your web site which makes people WANT to come back or care enough to want to follow your progress.

    I don’t have a clue what the wording says (in Spanish?) BUT unless that silly button taking up the center of my screen says “you’ve won $500 dollars for real here’s your check” I would be cursing that I just wasted a click and pissed at the deception that tricked the search engine into serving me your link. You must consider the person visiting the site and NOT give a crap about what other designers think. How did the visitor get to this page, why is he here (what WAS he expecting that you didn’t give him) and what is he feeling – AND, what are you now going to do to make up for disappointing him with a silly “under construction” page! Until you think about the reader, all the fanciness or spectacular design in the world isn’t going to get you a single click.

    IF, on the other hand, I was looking for a widget and you had an animated photo of the most unusual widget that I’d ever seen, truly unique… I probably would give you an email so I could come back and watch your progress. Or, if you had said: “We want to make it up to you for not being ready when you came by – give us your email and we’ll give you 50% off your first order, no questions asked and no obligation.” The way it is now, just leaves me flat and would be a waste of time.

    • David

      great tips, I didn’t look at it this way before but you are absolutely right.

  • Rafael

    Try to make the background i bit lighter, the contrast is too much and it doesn’t fit with the blue color from the other elements. Also fix your negative space.

    • http://www.web-cooperative.com Web Cooperative

      This was my first impression too. The background is a silver/grey and most of the text is grey too. Doesn’t stand out clearly enough for me.

  • http://tannernelson.me Tanner Nelson

    I think that if you removed the background and swapped it out with a simple gradient or some noise and then made the input 3D or the button more subtle, it would look even better!

    Also, instead of putting small underneath the email field what it does, try putting that above the email field in bigger letters like “Don’t be left out!” “No seas estupido” o algo asi. haha. :)

  • alexandros.greece

    Well, i like the logo! Also a page like this is a little bit difficult to make something that give something else to people. The hole design is also good. But i have some thoughts about this page.

    1. What if you get all the text ” Estamos criando um site muito mais fácil e acessível para você Registre seu e-mail e receba as novidades e data de inauguração” bottom of the field.

    2.Change the “OK” button in circle and when you hover it to click it appears the logo of Nomus in low opacity

    3. Maybe give a drop shadow to e-mail field

    4. Also maybe to use bigger logo of company

    5. T: is for telephone why not a small image of a telephone, or if you want use hole the word, or Tel:

    6. Finally, as for background, something with noise or something with css3-animation in bottom :P

    Try this i don’t know how looks with this changes but maybe gives you inspiration to make better this page.

    Sorry, for my bad English !

  • http://mrweevil.com MrWeevil

    It seems something a bit wrong with the button when it’s hover, it doesn’t look natural

  • sohel

    nice design the way u did it was amazing dude……

  • http://www.iuditg.com Udit Goenka

    The placement of the site looks nice but few things I would like to point out.

    1) Color section could have been better because the overall site is looking a bit dull.
    2) The Submit button styling for hover and actual state looks weird.
    3) Could have used some better web fonts.
    4) I think adding box-shadow in active state for input box would look awesome.
    5) Telephone Number should have been a bit bigger

  • http://tinyurl.com/nathanielalbrecht Nathaniel Albrecht

    First of all, I really like the design, and your strive for minimalism. My comment is not here to nit-pick but just give some pointers that just a new, fresh pair of eyes can give. I’m gonna try to start with major design considerations working down to the finer details.

    1. Since the purpose of one of these sites is to try to get intrest in the site, and get the viewer to signip for some service that will remind them when the site is open, I would consider explaining more, maybe with a box of uo features. We want to try to get attention, so I would consider making a big-ish headline that says something that will get your tatget market’s attention. Pictures of the service would be good too, even if the UI is still in beta.

    2. Minimalism uses also incorporates a sense of strong use of whitespace. While you defintley have a decent amount here, I think some could be helpful on the too and bottom of some elements, to give a better visual hierarchy, and in general, spacing.

    3. This look fixed on the demo site, but, in the picture here in the blog post, the 3D type effect on that button did not fit with the rest of design. Everything up to that point on the page, gave the impreession of you looking straight down…. Maybe the biggest conflicting element was the input field that was right next to the button. A strong drop/inner shadow would be needed on the text box if you wanted that effect…. But, personally, I don’t think you should take that approach with this design.

    4. It could just be me…. But on the demo site, I think the button is larger vertically than the input box… They don’t seem to line up.

    5. I like and would prefer the text in the logo to be styled in CSS than it be an image…. But thats just mympersonal opinion, not something you have to do, by all means. I do find the text in the logo ( actually, the whole thing, logo and logo text ) to be blurry. Again, it could just be me, but it does seem not crystal clear. I’ve read stuff that this is caused by your design not matching up with the pixels in photoshop, PS allows for your design to only be on like 2/3 of the pixel… You should probably look into that.

    6. The logo icon isn’t looking right… I’m not sure why its not sitting with me… Maybe the shadowing…. But I’d get a second opinion on that

    7. The small text isn’t centered with the text input box… Not a major issue. I just saw that after scrutinizing the design… Nit-picking :D

    8. The new button in the demo site still looks a bit off. A stroke on the outside might help…. Hmmm not sure. Inner shadow?? Not sure.. Seems a bit flat

    9. OK is defintley not “ok” to put there <—– hehe see what I did there ;) Either put something like submit or try experimenting with something clever, funny, and witty. (Actually clever,witty,funny stuff anywhere seems to make a more emotional and personal connection.) ( <<<<—– in moderation though. :P )

    10. The drop shadow on the "ok" is way too heavy. Looks sorta unnatural and out of place

    11. Possibly a different color for the submit button so that it draws attention as a call to action. Make sure the colors work together though :) (Just an idea lol)

    ————————————————————————————————————————————————

    And my final, possibly most serious advice…. 12. Provide other ways for your target audience to connect with you and be notified through when you guys open. Facebook, Twitter, Google Plus… Sometimes people would rather add you to their social network than add "one more newsletter". Also, many people most likely check their social networks much more often than their email. This also makes it easy for hem to (re)share you with their social networking friends and lets your client have more people exposed to the service peior than opening. This isn't about getting rid of the email what.so.ever. Maybe even, if the signed up for the email, show. Page saying thanks would you like to connect with us on ….. to stay uptodate in are progress. And the reverse if they followed/circled/liked you… Thanks! Would you like to sign up to be email when we launch (as to your message in their stream possibly getting lost)

    12b. This is sorta a subset of 12… FB like button, +1 button… Send a tweet to your followers, twitter buttons that let your target market follow you with out ever leaving the page… A stream of your recent tweets maybe to show that you guts are active and making progress…

    I think I won for the longest and most nit-picking commenter… Lol sorry. I hope my comment is recieved well, even though its probably pretty depressing. I hope it helps! Its sooooooooo much easier saying what's wrong than actually designing it myself. Good luck to you with this project and your career!

    —Nathaniel Albrecht
    tinyurl.com/nathanielalbrecht

    • http://tinyurl.com/nathanielalbrecht Nathaniel Albrecht

      Ahhh…. A few I forgot.

      I really like that the Text input box is nice abd big. :)

      I really like the font when you enter stuff in the text box. The blue border on the text box is cool too! Not sure if thats the browser (<— prob.) or you, but its cool.

      The state effects are not gonna cut it… Sorry, but its kinda ugly. Reconsidertion on the button would good. I would share some button makers/freebie/insoeration stuff I saw and boomkmarked recentley, but its in ym other computer.

      A javascript confirmation box isn't gonna cut it either… Sorry, seems very unprofessional. I don't think many people have js disabled… But some say so, and so that might break and cause some issues.

      I don't like the font for the text part of the logo… Not defintley bad, but I just something I personally don't care for. Defintley a minor issue.

      Hope it helps. :)

  • Filipe

    This (http://tinypic.com/r/15n4q53/5) is my take on the design feel free to use it in any way, if u would like to take some elements or all. For the PSD just contact me.

  • Martin Martev

    1. The N in the logo: Maybe a little bit brighter. Consider adding a little color to the shadow, just to tint it. I think that having a tiny bit of the color of the object that drops the shadow mixed in with the black ties it together.

    2. Logo again: the “blades” of the N are not as 3D-ish as the rest of it. Consider adding a shadow to make the effect consistent.

    3. Background: This might be due to my crappy office monitor but the background can be lighter to make the logo pop more. Or brighten the logo a bit.