Web Design Workshop #27: Practice Makes Perfect
tuts workshop

Web Design Workshop #27: Practice Makes Perfect

on Dec 1st 2012 with 24 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 Q&A Community Wiki..

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

I personally don’t see any problem with the way the site is currently designed. That’s part of the problem. Unfortunately every one else doesn’t seem to agree. No one likes the current design, and I’d like to hear what specifically is wrong with it, and how it can be improved (no one I know has managed to put their finger on it..) – Oren Abbou

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://croftmedia.co.uk/ Greg Tyler

    To start the discussion off, I’d recommend using some non-standard fonts. It looks like you’re using Times New Roman and Arial, but they’re everywhere! Why not freshen it up with something that looks a little less clinical? Google Web Fonts (www.google.com/webfonts) is your boy for finding some fresh font ideas. Similarly, I’d suggest moving away from the standard <a> colours. Again, as it’s default, it’s always nice to try and make things looks a little different.

    I’d also suggest adding some padding in certain areas. That table has everything a bit close to the edges and the Everything/703 Available Questions equally looks a little bit pressed in. Most people use big ol’ screens, so don’t feel you need to cram everything together.

    I’ve probably got some other tips too, but that’s my first offering. I think it could make a big improvement!

  • torrance scott

    I think you could really benefit from a clearer navigation and better design towards usability. If this site is going to have perhaps hundreds of topics, it isn’t going to be long before finding one among them is a real pain without a good search mechanism. As an example, if I’m looking for batteries on amazon, I could go category by category to get there but I know what i’m interested in, so why wouldn’t I just put it in the search bar. I actually just tried to get to batteries in amazon from the category navigation and couldn’t find it. I know you don’t have that many topics yet, but if things go as planned, that search bar should be front and center.

    Secondly, people don’t like learning in sterile environments. They like learning in fun, engaging atmospheres, where they can feel rewarded for the time they spend and not like they were forced to go to a cramped classroom with a droning instructor. The idea behind your site is great, and people powering other people’s learning is wonderful, but I don’t feel any other people when I go to your site, I feel like a robot being fed information from other robots. Try some color, try some textures, use a chalk font on a blackboard, remove all the hard edges; anything to make learning fun, engaging and most important, communal.

    Third, I took a quiz on regex, and couldn’t remember anything so I had to go look up a reference. Couldn’t that be integrated into the site if the topic permits it? Just put a link and say if you’re stumped, read this article/wikipedia page on the subject.

    Hope this helps!

    • http://www.facebook.com/oren.abbou Oren Abbou

      Thanks A LOT for the insights.. They really seem to be key for the upcoming redesign, and I’m sure to put them to practice. And also thanks for taking the time to really look into it

    • http://twitter.com/jamesandrew2107 Andrew James

      Good help tips scott. thanks for advice.

  • Michael Brent

    It makes me remember the 90′s web pages,

    • Dev Digital

      Same here…good old days.

  • Ripley

    I say we nuke this website from orbit. It’s the only way to be sure.

    • http://www.facebook.com/oren.abbou Oren Abbou

      LOLL. My site is about eLearning, so I said to myself I’ll keep it simple, like Wikipedia.. Guess that didn’t work out well.. But hey, take 2 is on the way, and with the help of you guys I’m sure I’ll improve.

      • Kris

        Use sites that inspire you as a guide of reference in your design. Bookmark the sites you like then go back and see how they did their spacing, fonts, colors etc and then incorporate things in your design. This in no means copy but be inspired by a design.

    • Adam Riley

      Wow I laughed a little too much at that, I thought this was a joke post, it does need completely reworking though.

      • http://twitter.com/jeff_pz_cr Jeffrey Briceno

        Looks like was coding in ms office publisher with some bugs

  • http://twitter.com/grantpalin Grant Palin

    Layout is pretty typical. The login section is oddly located, I suggest moving it below the navigation, or further down the page.

    There are several colors in use: black, grey, white, tan, and looks like three shades of blue. It looks like a mishmash of colors. I think the common wisdom is to have one primary color, one or two secondary colors, and an accent color. The color palette could be simplified to look more harmonious. There are some useful tools out there for creating or browsing color schemes: http://colorschemedesigner.com/, http://www.knorrpage.de/colormatch.html, and https://kuler.adobe.com/.

    • http://twitter.com/jamesandrew2107 Andrew James

      thanks Palin, your suggestion is great and useful.

  • Pingback: Web Design Workshop #27: Practice Makes Perfect | Webdesigntuts+ | Beachdrop

  • Pingback: Web Design Workshop #27: Practice Makes Perfect | Webdesigntuts+ | inLine Media RSS Blog

  • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

    To put it simple is that your site looks as old as that Elthon John song.

  • http://www.thatothertechguy.com/ Sam Magee

    In a project like this, I would take a look at some of the products that Google has created. They have a quite simplistic design, which seems to be what you are looking for. If you aren’t comfortable with using completely different fonts, try using the same font, but making it bold or italic in some parts. I could also see some parts of it being text-transform’d too. Also, it seems like the link colors clash since they are of different bluish colors, so I would suggest making them more uniform, cross-site. That’s about all I have fo you, so I hope it helped!

  • http://twitter.com/jeff_pz_cr Jeffrey Briceno

    See this screenshot in firefox 17 run in ubuntu
    http://www.diigo.com/item/image/o4ma/724w

    left links need a padding and style.
    blue links with under-line decaration really?

    aside en grey and non-round corner is very old, the icons looks like MS Office 1998.

  • Luděk Roleček

    To put it bluntly, design of your site is horrible. Aesthetics aside, it needs much better navigation, clear visual hierarchy between elements on the page, more padding around elements, it needs to not use Comic Sans… I could go on and on.

    I don’t mean to be disrespectful but if you don’t see anything wrong with the site (as you said), I don’t think there’s anything we can say in limited comment space that would really help you. Your site needs complete rethinking and redesigning. You need to throw everything away and start again from absolute zero.

    The best advice I cen get you (and please trust me, I really don’t mean to mock you with this): hire a designer. It will pay off thousand times over.

  • Chatman Richmond Jr.

    I understand that you were going for simplicity. The problem is that it’s a very dated simplicity. The thing about Wikipedia is that while it’s incredibly bare bones, that fits the mission of the site. Wikipedia houses a tremendous amount of content, easily editable by anyone. Craigslist is another site where function overshadows design. From the way the content flows there, the bare bones approach works. The common thread between Wikipedia and Craigslist is that they have a ton of content that’s generated by the visitors, who aren’t meant to spend a lot of time on the site.

    Obviously both sites could be due for a redesign, but consider the scope of everything that needs changing and how people themselves might react to it. I see that you’ve tried to lay it out as simply as possible, but as others have mentioned, it wouldn’t hurt to give it a bit more style. Before that, consider the tone of the content and how you intend to serve it. Wikipedia is an online encyclopedia with mostly text content, and its design reflects that. Craigslist is a personals and service posting and recruitment site, and its design reflects THAT. They wanted to put as few barriers between the user and design as possible. Consider your mission; it might help to look at other e-learning services (Codecademy, Lynda.com, Treehouse for example), and consider how their design complements the structure and format.of their content.

    As Kris said, study other sites with a mission similar to yours. It’ll provide tremendous insight on how you can best design for your needs. The purpose of the site, intended audience, and the volume as well as structuring of the content should always inform your design decisions. In short, if you can’t accurately describe why the current design of your site is the best for its purposes, then it’s a good bet that it isn’t. Every site, even the stiffest, corporate, structured-with-tables site out there has a personality. Think about what you want to project with yours, and to whom, then nail it.

    And yeah, increase whitespace between elements to draw attention to the most important, use non-standard appropriate fonts with Google Web Fonts or any legal, @font-face enabled web-font, a more appropriate color scheme (perhaps consult Kuler as Grant mentioned), and definitely consider Torrance’s suggestions. I really couldn’t have said it better myself.

    Sorry about the long post.

  • http://twitter.com/MtAdamsADesign Aranzamendez Design

    hahha.. This website looks so nasty!lol

  • Tim

    Besides the design… What’s up with all the inline styles in the source code? You use three CSS-files on the homepage alone, yet the source code is full of inline styles.

    You should move all that code to the css-files, and add classes or ids in your HTML.

  • Jimmy T

    With all the respects in the world, I’d have to place this as one of the worse sites I’ve come across. I’d just have to echo the comments that have been posted, get inspired, rethink the entire thing and hire a designer. Good luck with it all!!

  • Diana

    Quick tips:
    - change your logo
    - change the fonts (don’t use comic sans ever again!)
    - give your site a better structure
    - use some images
    - play with some nice colours

    Remember: it’s for kids, so don’t make it to boring. Kids of these days are “playing” with iphones and stuff. Look a the design. Make your site modern, dude!

  • el barto

    Semen XD

  • Devi Kyrene

    I find myself wondering why Oren doesn’t just simply use a CMS system such as Joomla. Find a good responsive template from a quality provider and go from there. That takes care of so much of the fine details. The site as is, is not very mobile friendly either. Take care of padding, fonts, colours, mobile compatibility all in one shot. Just use a good template for a good CMS.