Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I recently launched a comics website, www.hittingtreeswithsticks.com, which I created from scratch. I created my own design because I wanted to keep it unique, and used no templates.

Unfortunately, people who've looked at it says it appears "outdated" and "from the 90s", but haven't really been able to pinpoint how so. I was wondering if people could help me "modernize" my site without presenting me with downloadable templates. I'd still like to keep this my design, but I guess I need some artistic/design pointers.


DESIGN EDIT:

Okay, I've spent some time redesigning the template given your feedback, and found some great ideas on http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/.

I have two main templates I'm going to go for: (keep in mind this is just for layout... so none of the fonts, colors, images, or dimensions are set yet)...

Either:

A) Two column template

  • Search is on top and will expand down a bit with search results

  • In effort to get people to my artwork sub site, I'll include latest artwork on top right

enter image description here

Or

B) 3 Column template

  • Search is on the right and will expand downward as such with results

  • Gives more room for advertisements and other links

enter image description here

And this is the proposed, although minor, redesign for the View All and View Image templates:

View All: displays all images with archive-able dates

enter image description here

View Image: displays single full size comic

![enter image description here][4]

Any thoughts would be great!

share|improve this question
1  
I think you might find some luck submitting this question to graphicdesign.stackexchange.com instead of here. –  mawcsco Jan 10 '13 at 19:54
    
@mawcsco ah okay, I think you're right. Thanks! –  Growler Jan 10 '13 at 19:57
1  
Hey, another Comics UX'er! Hi there! –  Rachel Keslensky Jan 11 '13 at 0:01
    
@RachelKeslensky haha Hi! Just checked out your site- cool stuff! I'm not nearly at the level you are o_O I'm just gettin' into the game of comics and have lots to learn. Tips welcomed :) –  Growler Jan 11 '13 at 0:05
1  
The problem is you don't have any animated gifs or marquee text. Also there are these JavaScripts which you can make something follow the mouse cursor. You should do a Webmonkey tutorial on these, go to Lycos in Netscape Navigator and search for them. –  Captain Jan 15 '13 at 14:12
show 3 more comments

4 Answers

up vote 16 down vote accepted

1990's design is a symptom of a poor design aesthetic driven by the fact that computers were at the time constrained by what the end user could handle. This led to design with three main flaws:

  • loud color choices designed to be "web-safe"
  • poor font choices often involving Comic Sans, Papyrus, or Viner Hand ITC, as these were three of the "fanciest" fonts that happened to be installed with Windows and thus were considered web-safe (as they were on nearly every computer)
  • table-based design with hard borders and bevels

In order to get rid of the "1990s" look, you have to avoid these three things. Fortunately, we have ways of fixing that.

  • To fix poor color choices, design your site in black and white first, and only then add colors as needed to emphasize certain elements.
  • To fix poor font choices, use webfonts that allow you to pick fonts that users don't have installed on their machines. Google Web Fonts has an awesome collection to choose from, and for your images, the Oatmeal has a good short list you can use as a starting point, and Blambot has an awesome collection of fonts designed for comics.
  • To avoid table-based design, learn to design with divs that allow you to do many of the same things you used to do with tables, but don't suffer from their problems. Oh, and... you can do without the beveled borders. Seriously.

Once you get the hang of it, it'll not just fix your web design -- it'll make your comics look better too!

share|improve this answer
    
Thank you, Rachel. The last bit-"it'll make your comics look better too", do you mean my chosen fonts for the comic thumbnails and comics themselves is a poor choice? –  Growler Jan 11 '13 at 0:25
2  
I consider your comics to be the focal point of your web design, so it'd be a mistake not to at least account for them in trying to fix your "1990's" issues. I've seen your facebook page, so you're obviously doing fine with your comics. I'm just suggesting they would still be improved with a little extra thought put in on typography -- I find your comics to be on par with The Oatmeal if not for your font selection. –  Rachel Keslensky Jan 11 '13 at 0:33
    
Thank you for the comments! Good points. –  Growler Jan 11 '13 at 0:45
    
Hey, I've added my new template designs below as an answer. What do you think? –  Growler Jan 15 '13 at 6:07
    
I would suggest that for a non-designer, you should avoid picking fonts altogether, and stick with the defaults. –  Bryan Oakley Jan 15 '13 at 15:05
show 3 more comments

First I'd rework the layout. Do not take up the full width of the browser viewport, center everything in a div that's 1200px wide max. The header color bars can go the full width but keep all the content contained in a centered column. Of course keep it responsive and fit nicely in narrower viewports.

The other aspect that makes it seem passé is that there's a heaviness about it. As mentioned the fonts in the header are heavy. Those frames around the comic blocks are especially heavy, try some lighter border treatments, perhaps a very light border with a slight drop shadow (perhaps - try different things there but lighten it up).

You might experiment with rounded corners. I'm not sure that's the right way to go but it might be and it will also modernize it a bit. The pagination controls at the bottom ("1", "2", "next", "last") are clunky, it doesn't need to stand out so much (less contrast and maybe rounded corners).

Once you get a look that's more modern you should go around and tweak all the margins and paddings to fine tune the spacing to get the layout more professional looking.

You haven't developed a sense of visual style so it's going to be a lot of trial and error. Try something, think about it, get feedback from your friends, and don't be afraid to undo it and try something else. But just change aspect at a time (e.g. layout, borders, fonts, etc.) and try to determine if that's better or worse before modifying some other aspect. In the process you'll learn much and it's kind of fun.

share|improve this answer
    
Thank you so much obelia; that was exactly the type of insight I was seeking! –  Growler Jan 10 '13 at 22:53
add comment

Some quick feedback as to what makes it pop as 90's

  • Graphics and text effects, such as shadows. They appear very stock, and generic. I would get rid of them.
  • Your font choice. Not a very modern font. I get it is about comics and you want to use a comic looking font, but you take comics seriously and so should your font.
  • And probably the biggest is the very obvious table/grid structure. This is probably your biggest problem. Yes all websites usually follow a grid, but balancing that grid is key. 90's sites look like they set up a table and then just placed things in the boxes. Modern sites use a grid as a way to guide content but not define it.

My recommendation to you: Find a couple of sites you like and use ideas for that site. Don't straight up copy another site...instead use and build on elements you like. For example, find a navigation structure you like, combine it with a content display you like, and combine that with a right rail from another site.

share|improve this answer
    
Firstly, thank you for the feedback. Next, Very true on the font. I think I'm going to draw my fonts for the top headings... and use a serious font for the descriptions. And, were you also referring to the fonts within the thumbnails themselves? Also, I was kind of going for a grid style similar to theoatmeal.com. His site nets millions of hits per month, so I figured it was okay. And, what's your take on not centering the page (like theoatmeal.com), but instead having it span edge to edge (like a reddit.com)? –  Growler Jan 10 '13 at 21:39
    
No problem :) To answer your questions: Yes I was referring to the fonts in the thumbnails as well. It is fine to use a hand written looking font just find something more balanced. (just do a google search for comic sans typography to learn more). To compare it to the oatmeal: he uses a mixture of shapes & sizes. You will notice the left boxes are bigger than the ones on the right. This establishes a hierarchy of content on the page, and makes the page less generic. So on your site you might want to try this, add small boxes for your "most popular" to the right rail. –  James D Jan 10 '13 at 22:54
    
Okay. The issue is, I loved everything The Oatmeal did (his site was what actually inspired me to do comics), but I didn't want to copy it. I was thinking about doing the "Most Popular" as such, but felt he had already done that... I'm struggling to understand the fine line of copying someone's style –  Growler Jan 10 '13 at 22:58
1  
A very common practice for websites is to put main content on the left and secondary (or featured) content on the right rail. So I would not say that is specific to the oatmeal. However the general idea is not to just copy, but to copy and improve. What other things can you add over there that will help (be careful to not become too cluttered); maybe add your facebook like & feed, your artwork, ect. What I would recommend is make some of the graphics & layout changes first, see where you are at, then start messing with adding extra feature if need be. –  James D Jan 11 '13 at 16:09
add comment

Your website title is confusing me. At first I thought that it is a comic book website where user can come and select his favorite comic book to read. Try making following changes to your site -- make header contents and body contents more center aligned -- show most popular in a carousal on the home page -- give a facebook like button rather than 'Facebook link' -- Reduce the size of the icons so that more number of icons appear at the same time

Give a specific theme (or more popular theme) to your site. Make it about Office related comic site so that user realize the purpose of this site when it comes to home page. Have a look at other famous websites for inspiration like http://www.dccomics.com/ or even ibnlive.in.com

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.