Web Design Workshop #30: Wave Studio
tuts workshop

Web Design Workshop #30: Wave Studio

on Jan 19th 2013 with 20 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, the follow up to a landing page featured in a previous Webdesigntuts+ workshop..

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

I think you can gather from the design that the site is for a design studio doing websites, print and branding for businesses. I like the current style of the site and don’t see it as too busy or too empty at the moment but would like your feedback on it! It hasn’t been coded yet, I’m going down the route of designing everything in Photoshop first, working out the interactions and then last of all coding it up… 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
  • Paul Kane

    Hasan Qureshi – I like most of the design so far. It is clean, has strong imagery, and makes nice usage of space vertically. However, I would revisit your grid for some of the various sections. It feels as though your spacing starts larger, shrinks as you go further down the page, and then suddenly expands again.

    Also, some of the type treatment could be reworked. You seem to have consistency in the typefaces but the sizing varies a lot from point to point. Especially at the top, I would prefer if the subheading underneath “BRANDING” was bumped up in size, perhaps to meet the left and right edges of the heading. Below in the body, some of the text could be made more simple. Each of the three main content sections has a fairly lengthy paragraph that could be made into two smaller segments or just made more concise.

    Finally, inject a little more color and depth into the page. You have some beautiful colors in the galaxy image at the top- why not carry some of those elements into icons or bring a cropped version of the stars into the bottom near the footer? I would consider making the main content areas, where they’re divided by rules, a little dimensional with some shadowing or gradient treatment.

    • Hasan Qureshi

      Thanks for the reply and comments :D

      I think you’re right in relation to the width of the various sections, I’m currently playing around with which areas are vital to be in the viewers viewport and which aren’t. Hence why for eg in the Wonderfully Unique section the websites stick out more… In a smaller browser window some of the websites would only be partially shown whereas in the case of the details section I want all of the content to be viewable all the time… Especially because this site will be responsive I’m still not sure how to accomplish this to get the site looking its best overall…

      The reason why the subheading under “Branding” isn’t the width of the title is because the idea is that the title will switch from Branding – Websites – Print, each with their own little subheadings. This would mean that if you fit them then each subheading would have to be perfect in length to the size of the word int he heading…

      However I agree with the bit about the content sections paragraphs. They are way too long and I’m looking to cut out two thirds off of each to make it more concise and less like a lecture :/ I’ve had similar comments from other people!

      I’ll look into how the site looks with the stars carrying on into the footer, but I want to keep the main content more simple and rather have the images convey the colour and interest. Maybe I could play around with a bit more colour as you suggested :D

      Thanks for taking the time to reply and critique the design!

      • http://www.facebook.com/haroonaq Haroon Qureshi

        its alright but make it unique…..
        think BIG!!!!

        • http://www.facebook.com/hasan.qureshi.129 Hasan Qureshi

          Haroon, Calm Down and stop hijacking the article :D

          • Navon Quershi

            I agree with @facebook-100002676945321:disqus. Make it BIG!

  • Jiri Wasserbauer

    I love this kind of design! Great work! … Can I ask you for the names of the Fonts, that are used in this page?

    • http://www.facebook.com/hasan.qureshi.129 Hasan Qureshi

      Sure! The Branding font is called Libel suit. And the rest of the text is Segoe UI (The Windows 8 font) :D

  • http://www.facebook.com/profile.php?id=100001866261878 Xavier Bloemen

    Awesome Design!!!! but i think that the website photos under the “Wonderfull Unique” heading would be stronger when instead of going from right to left with the images, to go from centre and out like in the quick mockup i made

    • ianyates

      Great bit of feedback – thanks Xavier :)

    • http://www.facebook.com/hasan.qureshi.129 Hasan Qureshi

      Thanks for the feedback! I’ll see what it looks like, the main reason i didn’t initially go for this layout was that i’ve seen it quite often before… And I wanted to be a bit different :D

      • http://www.martin-brennan.com/ Martin Brennan

        I like what you’ve done with the left-to-right design, the one screenshot in the middle cover flow design has been done to death!

        • http://www.facebook.com/profile.php?id=100001866261878 Xavier Bloemen

          I know but the page is so centre focused that it breaks pattern a little bit, but i the left-to-right is awesome too

  • http://twitter.com/jbark24 Joshua Barker

    Very nice job! The only thing that kind of bugged me, and this might be nit picking, but I think the top image should be moved to the right a little, or rotated a bit to flow better with the hierarchy. Right now your leading my eyes to the working with us button, but it’s thrown off a bit by the trees in the image. But that’s it, I think everything else is great!

    • http://www.facebook.com/hasan.qureshi.129 Hasan Qureshi

      Thanks for the feedback! I’ll look into it…

  • Adi Purdila

    I love the simplicity of it. I think you could make it a bit more attractive tho and easier to understand.

    For starters, there’s a lot of gray and a lot of text. Text is important, but bear in mind that people will quickly scan a new website for the information they’re searching for and having large blocks of text isn’t really helping you. Try to separate the paragraphs into more digestible bits.

    Speaking of typography, how about using the golden ratio to calculate the optimal width of the paragraphs? On 16px font size (which I’m guessing you have there) you should set a width of approx. 700px. See this tool for further info: http://www.pearsonified.com/typography/

    Try to use a bit more color. Now it looks kinda flat even tho you have some colored images (which I suspect are placeholder images, right?). Why not make it a bit more interesting and color the background of that whole section?

    How about adding some info about the team behind the brand? Displaying work is important, but the people behind the scenes are equally important. It’s also a confidence builder in the possible customer. People react differently (to be read better) when they see the real people behind a service or product they wanna buy. So, it would be something like this: “This is who we are and this is what we can do for you. Interested? Get in touch!”

    That’s about it for now :) I hope it helped.

    P.S. Love that footer design, really elegant :)

  • http://www.martin-brennan.com/ Martin Brennan

    Great design Hasan! Just thought I’d pitch in with a couple of really nit-picky things, I think the design is really solid and I love how clean it is and the big colourful images are great too. First of all, I would add a bit more line spacing on your text, it seems that the lines are a bit close together for how wide the paragraphs are.

    I would also add a header to the first section and center the text to make it more consistent with the rest of the design. The only other things I thought were a bit off was that there could be more spacing between the bottom of the text and the images in the Wonderfully Unique section, and there could probably be less spacing under the Find Out What We Can Do For You button, as I was expecting more text to come up after it.

    Very nice design though, I think the only things you need to change are very small changes, great job!

  • Giancarlo

    Beautiful website! well done!

  • Pablo Sijbrants

    Love the design! I like the black accents in the header and footer. Makes the site clean and professional.

  • cmdino

    Cool design, The testimonial part is a bit off. I think you should make it another section just like “Wonderfully Unique”, “It’s the title details”,etc.. Adding clients logo is an effective technique to get cleints. Since it’s a company site, i think you should add it too.

    You have large spacing, that’s cool!, But i might overwhelm the visitor. I think buttons that will scroll down to the next content will solve it. This will add user connection. Hope this helps

  • Shiva

    Thanks for posting such a nice one, It is informative and very useful for me