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

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

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

View Image: displays single full size comic

![enter image description here][4]

Any thoughts would be great!

share|improve this question
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
show 3 more comments

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

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
add comment

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
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.
{"cc_re__cc_re__cc_by_sa_3_0": ["        <li><a href=\"http://area51.stackexchange.com\" title=\"proposing new sites in the Stack Exchange network\">Area 51</a></li>\r\n                        <li><a href=\"http://careers.stackoverflow.com\">Stack Overflow Careers</a></li>\r\n                    \r\n                </ol>\r\n            </td>\r\n    </tr>\r\n</table>\r\n                </div>\r\n            </div>\r\n\r\n            <div id=\"copyright\">\r\n                site design / logo &#169; 2014 stack exchange inc; user contributions licensed under <a href=\"http://creativecommons.org/licenses/by-sa/3.0/\" rel=\"license\">cc by-sa 3.0</a> \r\n                with <a href=\"http://blog.stackoverflow.com/2009/06/attribution-required/\" rel=\"license\">attribution required</a>\r\n            </div>\r\n            <div id=\"svnrev\">\r\n                rev 2014.3.11.1444\r\n            </div>\r\n            \r\n        </div>\r\n    </div>\r\n    <noscript>\r\n        <div id=\"noscript-warning\">User Experience Stack Exchange works best with JavaScript enabled<img src=\"http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif\" alt=\"\" class=\"dno\"><"], "copyright__copyright__copyright": ["nds, 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.\n\nshare|improve this answer\nadd comment\n\nYour Answer\n\n\u00a0\ndiscard\n\nBy posting your answer, you agree to the privacy policy and terms of service.\n\nNot the answer you're looking for? Browse other questions tagged or ask your own question."]}