Web Design Workshop #15: Wavestudio
tuts workshop

Web Design Workshop #15: Wavestudio

on Jul 20th 2012 with 23 comments

Web Design Workshop is our regular 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, a “coming soon” page for a design studio..

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

I created this site as a holding page till I can get the actual site up and running. Wavestudio is a design studio for all things design, websites, print media, applications and all that. I like the range of colours and concept but I’d like some critique on the overall design and functionality of the site as a whole. – Hasan Qureshi

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
  • tom

    I like the desgin and think the page looks good. I did notice in ie8 the date gets cut in half.

    • Ides

      To fix this make sure your line height is set to the correct height.

  • http://ashleyclarke.me Ashley Clarke

    Hi, I think the design is great. However if I was to stumble across your website I would have no idea what you do. Maybe a small “about us” section would be nice to tell viewers who you are and what you do.

  • ato

    It looks nice. Grat job. So, i would like see the brand name little bit bigger.

  • Pingback: Web Design Workshop #15: Wavestudio | Webdesigntuts+ - webdevelopmentdelhi.in

  • http://www.cirkut.net Josh Allen

    When viewing on a larger screen (1920×1080 here), the image gets cut off. Might I suggest changing your css from background-size: auto 100%; to background-size: cover;

    This will spread the image across the whole screen. Also, if you don’t want to do that, fix either the background color or the footer color (they currently don’t match).

    And last, remove the min-width from the background div. Your design then becomes responsive.

    I like the direction you’re headed in, I hope to see you back here for the full site launch!

    **Viewed using Google Chrome v20 on Mac OSX 10.6.8**

    • http://www.cirkut.net Josh Allen

      Well, rather your design doesn’t become responsive so much as it returns to a fluid state. :)

    • http://www.cirkut.net Josh Allen

      Sorry for so many replies, but here’s a couple other things. You could EASILY optimize your background image (1.84MB is a little large). Try saving it as a JPG with quality of around 80 (if you want to keep good quality that is), or I even noticed it can probably be saved as a PNG-24 for under 1.84MB.

      After that, feel free to run the image through a compressor like http://www.smush.it/ to compress it even farther.

      Addressing tom’s comment about the date getting cut off in IE8, I would assume it’s because it doesn’t render background-size: auto (that’s a CSS3 property). You could easily throw the date into an actual img tag (inside the date div) and set the height to 100%. This would resize the whole image tag, while covering for the fact that older browsers can’t render background-size.

      On a user experience note, I would try to add a modal contact form, rather than a direct email link, but that’s just me getting picky.

  • Ann

    Hi like the overall design of the landing page. My comments would be to give your logo a little more room to breath, and center the “site redesign” mention. I really like the dynamic feel of the page, you did a great job!

  • Pingback: Web Design Workshop #15: Wavestudio | Webdesigntuts+ | inLine Media RSS Blog

  • http://www.aranzamendezdesign.com Arlene Aranzamendez

    Wow! very colorful design and you really showed that you have a very creative web designer.. Thumbs up!:-)

  • http://twitter.com/twittem Edward McIntyre

    I like the overall design but I do have a few things I noticed.

    1. The wavestudio logo kind of gets lost in the mix. The arrows do a great job of pulling you eyes into the logo but then you eyes skip right over to the bold images on the other side. I would try removing some of the small arrows that are close to the logo and punching up the colour a bit.

    2. October first is 2 months and 10 days from today. I would suggest adding a Mailchimp “notify me of launch” box. Otherwise most of the traffic you get over the next 2 months will be lost, as very few will return. I see posters for concerts all the time and I think I should check that out. I always forget.

    3. Looking at your code its seems you have a lot of unused CSS such as “#sample_class_id .numberone” you are loading 3 style sheets. 23% of the classes in general.css are unused on the page and 100% of style.css is unused. I would consolidate them down to a signal css file.

    4. As mentioned, I would optimize the background image file size.

    Bonus: I would try as much as possible to avoid using images for your links and page titles.

    Over all it looks great!

  • http://SethCoelen.com Seth

    Very cool design!

    Here are a couple suggestions:

    Draw more attention to your logo (I like the breathing space comment above)

    An about us section or a “portfolio snapshot” would be a great addition to the website. Maybe a box to the upper left hand side that expands when you click on it.

    Maybe offer a place for people to sign up for a newsletter?

  • Hamid

    well, just let me say its looking good because Edward McIntyre said everything that i wanted to say:-)

  • http://namangoel.com Naman Goel

    Most things have already been mentioned. I think you should use CSS transitions for the more info bar. It feels a little low. Check out that jQuery plug-in which uses CSS transitions if possible.

  • http://technologygarden.biz shael

    The site is cool but it should be a little more informative and designed, the authority should discuss details bout webdesign in the first page for the visitors to get the ideas of webdesign.

  • Jesus Bejarano

    I like , but that “lounching on” text is almost invisible.

  • http://www.donataholdingservices.it cesare casadonte

    very cool and elegant design
    regards
    cesare casadonte

  • http://www.trki.sk trkiwp

    Very nice design :)

    And by my opinion i would change:

    1. make more space between logo and arrows in bg.

    2. the launching box i didnt notice it… make it more visible

    3. The abous us is missing i think when i would open the page i would be know what you do.

    But very nice :)

  • Ian Rock

    It’s a ridiculously massive PNG with a bit of basic Javascript thrown in. I really like the image though.
    My advice is stick to PS design and hire freelance web devs. :o)

  • sami

    hey man go ahead good job!!!!

  • shruti

    nyc work….. really presentable….

  • http://www.customicondesign.com/ Custom Icon Design

    Very creative and nice themes. but it’s not enough info so your clients will leave within 10 seconds.

  • http://www.creativethien.com John Tran

    You are a very talented graphic designer, love the aesthetics. The only issue I have is a minor one, I think some of the graphical elements are too close to the logo.

  • Diana

    lovely colours. :)

  • Pingback: Web Design Workshop #30: Wave Studio | Webdesigntuts+

  • Pingback: Get Constructive Feedback With Tuts+ Workshops | Envato Notes