Web Design Workshop #7: Hawaii Bryllup
tuts workshop

Web Design Workshop #7: Hawaii Bryllup

on Apr 20th 2012 with 25 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! This week, we’re feeling romantic..

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 #7
see it live

My second website ever.. Got the job of bringing the website of our wedding planner into this millennia. It’s a win win for us both. She gets a new website, I get to practice and I can use this site as a reference if/when I’ll ever master the skill of web development enough to make a living out of it..- Tommy Waglen Major

The site is in norwegian and many of you most likely won’t understand it, just look at it as if it was lorem ipsum text ;) I really like the fullscreen background image, and the image gallery section (thanks to fancybox).

Working on:

  • making the site responsive
  • smaller file size for the background image
  • fixing the bug with the drop down menu disappearing
  • better logo/more detailed/more suitable for Hawaii

Open for all feedback on design and code. Feel free to rip this one apart and give me the hard truth. I want to learn from my mistakes.

P.S: This site is in use! The contact form WILL send an email to the wedding planner, so please don’t spam her!

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
  • http://www.kricir.com Richard

    First I like the simplicity of the design, its warm and fun, which I picture a wedding to be. I like the pinks, blue, and beige of the sand all together.

    Going on to the critiquing…

    1 > Don’t link the home page anchor to “/index.html” just make it link to “/” this will save you from having it have that .html file at the end.

    2 > I understand that the “Pek her for menyen” translates to “Pull here for menu” (Roughly) but the arrow doesn’t seem to be pointing at anything, I had no idea the menu was under the logo. I would maybe leave the bottom tip of the menu sticking out from underneath, showing that something is there. (by the way this seems to only be happening after you show the menu the first time)

    3 > I am not a huge fan of the colors of the menu items, they are ok to read at the top, however towards the end of the menu they start to blend with the background gradient.

    3.5 > Make the “Pek her for menyen” sit above the content boxes (See contact page for example), I would also make sure that the content boxes either sit to the left of the logo/menu or there is enough left padding that the content is not going underneath the logo (see link page).

    4 > On the FAQ page, I personally have never been a fan of center aligned text, (same with on the about page) I find it hard to read, I would stick with either left aligned or justified text layout.

    5 > The first question of the FAQ page seems out of place way over the right and the call to action on the bottom of the page, doesn’t feel pronounced enough, it’s text is not even as large as the questions being asked.

    6 > The contact page, The gray color of the input boxes seems harsh for the colors of this site. I would reconsider those colors.

    7 > Second on the contact page, the three columns underneath the contact form are small to read and just seem uninviting.

    8 > I like the quote you have added on the lower right corner of the screen, but I would make it more prominent. That’s a beautiful idea adding the meaning of “Aloha” and I would use it to your advantage. Almost like the stamp badge on the left side.

    Code

    I viewed the source code in both Safari and Chrome, and the strangest thing is that Chrome placed all of your text within two sets of “Text Here”. Safari did not, know I don’t know if you used the font tag or not however it is a old tag and is unsupported in HTML5.

    Lastly I want to say for this only being a second website, the site is done quite well. I have seen a lot more problems then these in sites, and I am sure that I have might have even created more than this. So good job on this site either way.

    • http://www.hawaiibryllup.com Tommy W. Major

      Richard:

      Thank you for taking your time to give me a solid feedback!

      1. Noted, will implement this in the next update.

      2. Nice work on the translation.
      The “submenu” is supposed to be sticking out a bit. This is a bug i’m working on.
      At first I had the whole navigation menu animated with css alone. At this point, everything worked as it was supposed to. Then, after testing the site on iPhone, the menu was useless. There was just no way it would show. This left me to grab the first and best jQuery function i could find to do the job. This is now what’s messing up the menu.

      3. Noted, will fix this in the next update. Any suggestions for a color?

      3.5 Noted. Working on making the site more responsive to smaller window sizes. Had the “Pek her for men yen” with a higher z-index before, but then when the content came underneath that, it just looked bad. Will fix ;)

      4. Noted. No centered text ;)

      5. The idea of having the first and last box smaller in size and “out of place” was to try to give the site a more “open” feeling. I guess I’ve just become so used to look at it that I did not give it enough thought.

      6. Noted. Will apply a more soothing color.

      7. Noted. Will work on the design on those columns.

      8. Thank you. Will yet again take your advice and implement that in the next update.

      Code:
      Strange. I have not used the font tag anywhere in my code.
      And when i view the source using Chrome v 18.0.1025.163 on mac it does not show any “Text Here”.

      Thanks again for your feedback and kind words.

  • R. Thor

    Agree on the background, it gives the site a ”glowing” quality.

    What strikes me the most is the footer… It’s not really balanced with the rest of the site and it is beneath the main content. Wouldn’t be much of a hassel to fix.

    • http://www.hawaiibryllup.com Tommy W. Major

      Not sure I quite understand what you mean by the footer not being balanced. Could you please explain it a little for me?

  • chris

    not too bad for your second design =]

    a couple things that stuck out to me:

    -the animated menu doesn’t really add anything. i’d keep it ‘open’.
    -your content areas overlap behind the menu
    -the faq section seems to have each section randomly aligned

    (osx, chrome)

    • http://www.hawaiibryllup.com Tommy W. Major

      Thank you for your feedback.

      - I chose to animate the menu just to get a cleaner and more open page.
      - As I mentioned in my reply to Richard, I’m working on making the site more responsive and will make sure that nothing overlaps.
      - You are absolutely right. There is no order to the alignment for the top and bottom of the F.A.Q. I’m sure there will be a fix for this on the next update.

  • Pingback: Web Design Workshop #7: Hawaii Bryllup | Shadowtek Hosting and Design Solutions

  • http://11bits.es Carlos

    Two ideas:

    The background is very appealing but I wouldn’t keep it throughout the site. I would keep the header and I would focus in the content for the rest of pages.

    And the menu has to be obvious if you need to indicate it perhaps you have to rethink it.

    • http://www.hawaiibryllup.com Tommy W. Major

      Thanks for your feedback.

      Will give your suggestions some thought and play around with it.

  • Steve

    The site is minimalist and delivers a clear message. That’s always a good thing.

    Here’s some stuff I think you should work on:

    - when you click the logo it doesn’t go to the homepage. It reloads the current page. Everyone expects that when they click the logo they will be transported to the first page of the website and I think that’s what they should get.

    - while it’s a really cool idea, the drop-down menu isn’t really intuitive (I spent about 10 seconds figuring where the menu is). I suggest you either get rid of it or place that “instruction thingy” in a more visible place (I’m thinking the sky).

    - I don’t really like the grey-ish color of the contact form. It looks good, but it doesn’t go well with the rest of the website. Try white.

    - the copyright notice and that blockquote should stay, at all times, at the bottom of the page. While at the contact page, if you scroll up there’s a time when the blockquote and the copyright notice intersect with other elements on the page and it just looks broken.

    - maybe italic for the blockquote?

    That’s about it.
    Good luck! It’s a pretty nice 2nd website. :)

    • http://www.hawaiibryllup.com Tommy W. Major

      Thanks for your feedback Steve.

      - Will fix the link on the logo to link back to the homepage.

      - Hmm.. Will have to think about the drop down menu. How about having it start as expanded when the page is loaded, and then it shrinks down after a few seconds??

      - The whole contact page will get a makeover for the next update. This will also include a better background color for the contact form.

      - Noted. Will make adjustments to the copyright and blockquote..

      - Will try the suggestion Richard gave me and make it more prominent.

      • Steve

        The idea about making the menu “pop” and then go away seems good to me.
        The user’s attention will immediately be drawn to the envelope thingy and the problem is solved.

  • http://www.webtekk.net Alexander Rohmann

    I really like the background!

    One of the first things that caught my attention was the font in the footer feeling a bit out of place. Then after navigating the site, I think that changing the body font-family to serif, then flip the headings to sans-serif would help out alot.

    I think having longer rows of text that are center aligned makes it less pleasant to read. You could make better us of the space by using some columns.

    Nice job! Overall great site. Good job on the CSS too, I took a peak at it.

    • http://www.hawaiibryllup.com Tommy W. Major

      Thanks for your feedback and kind words.

      Will play around with changing the font and try to get the footer to feel more in place.

  • http://www.gatoybuho.com.pl Morlas

    Good job on animation and colour setup. It really brings the Hawaii atmosphere.

    Some things that i would rethink:

    1. Main site. Too many different fonts it look chaotic, especially in footer. You have handwritten-like font on menu and menu instructions, then serif in header and another in footer. Defienietly – too much.

    2. Contact form: Why input boxes are all of a sudden black with light blue font. I don’t get it.

    3. FAQ has also strange positioning of boxes. Be consequent!

    4. In “Links’ you have noticed that light pink is hard to read so you put drop-shadow under the text – nice, but you didn’t apply it in e-mail link in Kontakt.

    • http://www.hawaiibryllup.com Tommy W. Major

      Thanks for your kind words and feedback.

      1. Whoops.. It’s not until someone points it out, that you notice. Thank you. Will rethink the fonts.

      2. I don’t either.. Don’t worry, it’s getting a makeover real soon.

      3. FAQ will also get a makeover

      4. Ooh.. Nice catch. Added to my list.

  • http://flavors.me/surendra_vikram_singh Surendra

    Hi Tommy,

    Love the look & feel of the website it’s very clean & minimal.

    I checked the “Sliding Menu” it disappears on mouse out . I just commented line 19 & 24 of “make_dropdown.js” & it works fine. I am just a beginner to javascript but, i think these makes
    show or hide on hover. Hope it will help u a bit.

    Contact page input box & textarea background-colors are not going with the website make it lighter.

    And i just played around ur layout in browser as i feel the faq pages & other inner pages looks bit scattered. Here, is what i have done http://dl.dropbox.com/u/19982181/fab/wedding.jpg

    • http://www.hawaiibryllup.com Tommy W. Major

      Wow! Just wow!
      Thank you so much for taking time out to actually debug my code and for the kind words.

      Working on a new/modified layout with the client now. Will include a lighter color in the contact form and change the layout of the faq-section.

  • http://www.clickoptimize.com/ north carolina internet marketing

    Simplicity is the best part of the design. Combination of pink, blue, and beige of the sand is just awesome. I like the idea of hiding the menu list. You are still working on it to improve it. Wish you all the success.

    • http://www.hawaiibryllup.com Tommy W. Major

      Thank you!

      Glad to hear you like the design.

  • http://www.timothyeberly.com Timothy Eberly

    Like everyone else has said the background is a winner in this case.

    My only comments come from an SEO standpoint…. make sure you don’t have both a www version and a non www version. Redirect one, otherwise search engines will read them as duplicate sites. Secondly, the home link should be without the index.html. Just http://hawaiibryllup.com/

    Thanks for sharing your site with us!

    • http://www.hawaiibryllup.com Tommy W. Major

      Thank you for bringing that to my attention. I must admit that I had no clue that was important or even something to think about.
      Learning something new every day!

      Will fix the home link.

  • http://www.sentconcepts.com SentConcepts

    I like the design itself. I agree with most everyone else though. The few things that stuck out to me where that the content moves behind the menu, the footer is behind the content and that it’s all in html extensions. But overall I like the design. Maybe make the color contrast more on the menu.

  • Jordan

    Really nice design! Love its simplicity, the background, and the nice logo/menu dynamic. My critique is as follows:

    - The menu is a cool idea, but as others have said, it takes too long to figure out it slides down. Having it start in the slide down state on page load solves the problem though.

    - Footer solution: Make it “sticky”, so it’s always present. Then it would just be a matter of using a suitable background for your footer div. Maybe a simple png with beige color at the bottom and transparent at the top, so it blends with the background image.

    - Very minor, but could be good for a “soothing” polish: trying fading in page content with jQuery. Right now, when you click on a link, the new content just pops on like a normal web page. Fading it in fast would make it look even more slick. (Not a problem this way, but worth exploring.)

    - I think the home page could use one call-to-action image link, maybe for booking an appointment. It could possible go in the upper right to balance out the menu on the left.

    All that being said, it really is an excellent design. Awesome job man!

  • http://www.ifuturzinc.com/ Jeff Harvey

    Great discussion guys, thanks for contributing! …

  • lisa

    the site looks beautiful and the photos are stunning.
    i would consider the following:
    1. find a different way of incorporating the quote at the bottom of the page
    2. the fonts on the menu are a bit difficult to read.
    3. align the boxes on the faq page
    you did a great job!