New Site Theme

By Shamus
on Oct 4, 2007
Filed under:
Projects

Some people have already begun commenting, so I thought I’d start a proper post so we can have all the comments in one place.

As I’m sure you’ve noticed, I’m working on a new site theme. The old one was (I think) very good looking but I’m weary of the thing now. I’m still working on this one. I might chuck it and start over. I might give it a new paint job. I’m not sure just yet, but I know we’re due for a redesign.

Feedback welcome.

Later: Okay, based on feedback so far it looks like this design is:

  • Too colorful.
  • Not colorful enough
  • Too businesslike.
  • Too childish.
  • Too clutterd.
  • Too barren and stark.

It’s perfect!

I kid. Please don’t stop with feedback. I’m gathering it all up, and I’ll decide what I’m going to do once I see what the major problems are.

Enjoyed this post? Please share!


A Hundred!2013There are 133 comments here. I really hope you like reading.

From the Archives:

1 2 3

  1. Rawling says:

    Gah, my brains…

    Seriously, though, not bad. Might just take a little getting-used-to, is all. I miss the old category pictures!

  2. Freya says:

    Not entirely sure about the yellow box around the comments. It is going to take some time to get used to; think I like it though!

  3. Jansolo says:

    I don’t like it.

    It looks like an IBM site.

    The new separators (text within oranged-line table) are simply worse than the previous images. Big size of letters (well, Verdana is a good choice in my opinuion, better than times new Roman) Try smooth colours.

    I prefer the old one.

    But don’t give up (just ignore people like me ;) )

  4. Alex says:

    I agree with those who’ve said the text is a little too large.

    Whilst I wouldn’t want to suggest you make your site less accessible to the vision-impaired, it currently looks a little… clumsy? Childish? Amateurish? And since the rest of your site is adamantly none of those, that’s quite the wrong impression to give.

    Actually, it’s a vile varicolored background and a “sign my guestbook!” link away from being a Geocities site.

  5. I like larger fonts. I’d go for a lighter cyan than what you are using right now for the alternate comment box, and non-bold links on the right. I’d add a bit of whitespace around the header. I’d get rid of the orange background for the subtitle.

    Cheers. :)

  6. Shamus says:

    Text: Smaller.

    Many other small tweaks to tone down the colors.

  7. Itzchy says:

    I miss the little anime cartoons that accompanied each post to show what topic it was filed under. :(

  8. Scott says:

    I like the new look when it comes to most of the site except the roundy looking icons for the different categories… I think they take too much away from the text and it’s hard to see anything but them.

  9. Shamus says:

    Sam: That is the least helpful feedback. Ever.

    Also: No.

  10. hevis says:

    The old one was better. This is too blue for me.. :)

    And those old anime- category pics were lots better than new ones.

  11. Phil says:

    It’s crispy, it’s crunchy! I like it!

  12. maehara says:

    those old anime- category pics were lots better than new ones.

    Agreed. But then I’m an anime nut to start with…

    I’m assuming the current look’s still very much a work-in-progress, so I’ll hold off the praise / criticism until Shamus tells us he’s done with the redecorating…

  13. Ian says:

    Whoa, definitely a mite surprising. :)

    I like it. It makes better use of horizontal space than the old theme, which is always a good thing. The colors are nice and, of course, change is always good.

    The only thing that doesn’t completely agree with me are the italicized names in the comments. Not a big deal.

  14. Shamus says:

    maehara: Go ahead. Don’t hold back. The feedback from Alex Schröder and Ian is exactly what I’m looking for.

    The anime icons did have more personality, but after a while they struck me as… i dunno… messy. Maybe anime faces on the blue buttons instead of symbols?

    I’m still mulling it over.

  15. Shawn says:

    The blue icons seem a bit too generic web 2.0, but then the anime icons were far too 1998. If only you knew an artist person who could tweak together some icons for you…

  16. Shawn says:

    More generally, I like it. The blue isn’t my favorite shade, but it’s very clear and readable. The only issue now is the site doesn’t really match your logo.

    Also, the white and blue alternating in the comments is a huge improvement over the old white and yellow.

  17. Joe Werner says:

    Hm.
    I like some of it. What I find irritating is:
    – The windowsy ‘icons’, at least to me they look like those newfangled Win XP icons, all soft and round and quite a contrast to the sharp (right word?) outlines of the “Twenty Sided” font.
    – I am not sure about using italics for the names… too many font styles perhaps?
    I like:
    – the new colours. The contrast is good. The site also looks ‘cleaner’, sort of ‘more professional’?

    I will still need a while to get used to it, though…

  18. Joe Werner says:

    The new logo
    – fits the rest of the design
    – contains _three_ colours (one too many?)
    – the white “blog” is nearly unreadable
    – is there a reason to change the colour from blue to red for the last two letters? I find that you use too many effects:
    1. the colour change (blue + red)
    2. the reflection of the letters
    3. the usage of two shades of colour per letter
    3.b) the change of the height of the colour shade per letter
    4. the ‘sun’ with a circle around it (which is messed up by the resolution) and the white word ‘blog’

    I like most of those but the combination might be a bit too much…
    On the other hand I enjoy your site for its content and as long as it stays as good I probably shouldn’t care about the design. But still, humans don’t like changes…
    Also:
    Your logo was some sort of “trademark”… at least in my eyes

  19. Shamus says:

    Hmmm. And now it looks a bit naked without the yellow circlething.

    Ah well. Time to start my actual, real job for the day. I’ll let this sit and see what other people say.

    Thanks for the logo Shawn.

    Thanks for the feedback Joe & everyone else.

  20. Greg says:

    Personally, I loathed the anime subject pictures. But, at the same time, I’ve also always loathed anime :P. So, for me, I actually really like the new site design. Just seems a bit more professional, and less like something my sister would do. (Of course, this is from the same guy wearing a shirt and tie at his computer…)

  21. ngthagg says:

    I like the projects girl on the blue button, but the picture is faded at the top, which kind of ruins the effect.

    The blue and pink is bad. It looks like a child’s bedroom. Simply making the colors darker would be better.

    The bottom line on the thread title (ie, under posted by Shamus on . . . ) should be dropped a few pixels. It’s too tight to the text.

    Still it isn’t horrible. Not like:

    Times New Roman title, with a blink tag for emphasis.
    64 x 64 picture tiled for the background.
    Frames.
    Content not matched to size of said frames so that every frame has a full set of scroll bars.
    Built in midi player that plays by default.
    Built in midi player that plays be default and doesn’t have an obvious stop button.
    etc . . .

  22. Matthew says:

    I like the use of color contrast on the Twenty Sided logo, however, having the pink highlight solely on the “-ed” gives it a weird verbal emphasis and makes it read (at least to me) something like “twen-tis-id-ed.” I like the style, definitely, but perhaps moving the color to match the emphasis of pronunciation would make it look more presentable. My humble suggestion? Highlight all of “sided” in pink and you’re golden (color pun not intended.)

    Other than that, the format looks clean and presentable, and the color choices work with each other. The most important thing a reader should be worried about is whether or not the information will be presented in a clean manner for optimal viewing (one of the reasons I hate MySpace so much, with all of those heavy picture backgrounds that clash with the text.)

    But yeah, I think it looks sharp. I was originally going to suggest going with a color scheme that matched the proud, venerable d20 on the upper right, but two seconds of contemplation realized the folly of having gold text on white background.

    Hopefully some of that feedback is useful! :)

  23. Mattius Caesar says:

    I’m not a design expert so I don’t think I can offer *good* constructive critizism. However, my initial reaction to seeing this page as it is now (7:50am EST, Oct4th) was “OMG! The site has been taken down and replaced with one of those ugly ad sites that appear when you type in the wrong URL for a website!!”

    No offense, its ugly. To empty, like there isn’t enough effort put into it. Even if there *was* a lot of effort it doesn’t seem like it. If I were you, I’d try more colour. But as I said, I’m not a design expert…or layman for that matter.

  24. Chargone says:

    you know, i always liked the old arrangement. this one’s harsh and… ‘cold’

    ‘course, personally i tend to prefer silver text on black backgrounds… its’ quite possibly the easiest on the eyes of any color combination you can do on a screen. not sure how good it is for people with eye sight problems other than my own high sensitivity though

    i dunno, it just looks Really stripped down.

    also, the pink ‘ed’ doesn’t really help matters, but that’s partially mitigated [or made worse, depending on your point of view] by the fact that the entire logo disappears from one’s focus due to being right at the very top and then having that eye grabbing black bar directly underneath.

    actually, looking at it again, that category icon would be good if it didn’t wash out to white up the top.

    and now, to render the bulk of my post irrelevant, looking back at it, if there wasn’t so much harsh White [capitalized as much for the color it’s self as to make a point], it’d be just as good as the old one, possibly even Better. [‘cept for the logo. it really does disappear like i said]

    make of that what you will.

  25. Gwen says:

    Let’s try to make smart remark about it : Err, I much prefered the old skin…

    More seriously, the “blue and pink” colors are so “Web 2.0 hype” that it will be out of fashion in a few month. Usualy when I visit a site with such logo, it can means only two thing : i’m a on technological site and the author desperately wants to appear hyped. If you don’t believe me, just go to the Web 2.0 Logo Generator page (http://h-master.net/web2.0/index.php), you’ll see i’m not overreacting to your logo.

    Moreover I find the color so cold, so… hygienical. I would like the warm old skin back.

    Last but not least : I didn’t write anything in English for month. I hope my post is understandable. ;-)

  26. kat says:

    I like it too. The color scheme is a little cold, maybe, but the layout is nice and clean.

  27. Issachar says:

    The new theme doesn’t work equally well on all pages. Pages with a high density of topic headings, such as the main DMotR page or even the month-by-month archive pages, look uglier than the main page.

    I agree with those who have complained that the new theme is overly blue, giving the site a vaguely cold, sterile feel. It could use a touch of warmer color somewhere in the design.

  28. Palette says:

    I personally can’t stand the pink “ed” at the end of Twentysided. When my brain sees two colors in the same word like that, it tries to break them into to two separate words.

    So to me, it looks like the title is now “Twentysid Ed.” Who is Sid, and why should I care that he’s twenty? Furthermore, is Ed his buddy, or is it an abbreviation for Education?

    If you absolutely MUST have a dual-color one-word logo, I suggest “20sided,” with the 20 being a separate color.

  29. Pugio Rosso says:

    I’ll have to go with “Too buisnesslike” and “Too barren and stark”.
    Now I’m not saying that this design is bad: it’s actually very professional-looking, without useless clutter and flashy “stuff”. ;)
    But I do not think it’s appropriate for a website about hobbies and geek culture in general.
    Your previous one was a tad more colorful (without being painful to watch) and more “personal”, while this one seems more “detached” and less welcoming.
    Nontheless the reason I visit this site is for the content so even if I don’t like the design, I will keep visiting it. ;)

  30. clodia says:

    My opinion: poor choice of colors, too barren, too business like. I thought at first that I had been routed to a site that would tell me that you were no longer online.

  31. Rob says:

    I’m not too picky. I like the blue. I like the comment shading. However, my only gripe is that I hate the pink. I think it looks a little tacky. I also kinda felt that your old theme fit with the D&D side of your blog. This one fits better with your VG side. Don’t know if there’s a compromise! :) Either way, I’ll get used to whatever you do so don’t worry too much about me!

  32. theckhd says:

    Most of my comments have already been covered by others.

    * Like the new title graphic, but the logical part of my brain wants to color in the “sid” with pink to match the “ed”.

    * The “Projects” logo is neat, but the only reason I can identify the anime girl is that I’ve seen her on your site before. I like the glare effect, but toning down the intensity of it slightly might help.

    * The white-backgrounded comments seem to “float” a bit. This is probably just the organizational freak in me coming out, but I like a clear delimiter between content and background. This might just be my quirk though.

    * The pink seems underused. Other than a splash in the twentysided logo and two lines in the post title, it’s nowhere else. Maybe shading every other comment with a pink background so that it alternates b/p/b/p instead of b/w/b/w would help tie it together. It would also soothe my “boundary issues.”

    * I do miss the old color scheme, as I think it had a nice feel to it. This one feels a lot more flickr-esque. That may be what you were going for though. In any event, it does feel colder than before. A happy medium ground might be blue/yellow rather than blue/pink, since the soft, warm yellow you used in the past seems to have endeared itself to a lot of your readers. Just food for thought.

  33. Chris says:

    I’m with Sam. What was wrong with the old design?

    At least change the blue.

  34. beno says:

    Hmmm, the blue and the pink clash. If you change the colours I think that will help a lot…

  35. JKPolk says:

    ARGH the “web 2.0” phenom takes over yet another site. I’m sick of the whole idea of web 2.0 being a theme, and not just an idea of socially networked sites.

  36. Asmogard says:

    I think it’s colorful enough, but you’re just using the wrong colors. Blue and pink don’t feel like colors that represent the contents of this site. I know that I should offer alternative suggestions if I’m going to criticize, but I just don’t have any good ones right now. It’s one of those “I know it when I see it” sort of things.

    Also, the site is far from cluttered or childish. Perhaps it’s a little too barren and business like.

  37. Phlux says:

    I think your new design is pretty good, but personally I think the black bar at the top looks out of place. Maybe if it didn’t stretch wall-to-wall, or were a different color (blue maybe?).

    As for the “web 2.0” thing, I hate that term anyway. It’s a pointless distinction that serves no real purpose in distinguishing new web technologies from old ones, has no agreed upon definition, and irks upon my pet peave of assigning version numbers to brand names and slogans.

  38. ShadowDragon8685 says:

    It just feels wrong. A bit too much like a bisuness’s corporate website, or maybe even their corporate intra-web.

    After all, the name of the site is 20-sided, the website icon is a d20. Perhaps the redesign should take as inspiration the new WotC site for D&D 4th Ed?

  39. M says:

    It was a bit of a shock seeing this; my major problem with it has to be that the pink and blue clash. With the post headings as just text on a white background, it seems a bit…sparse, as well, but I think I’ll get used to that – the pink + blue is just plain nasty on the eyes.

  40. azrhey says:

    I think most things I would have to say have already been covered. When I first arrived here from the RSS by first thought was : Ohhh, I was redirected to flickr. It is very flickrish colour palette.

    The rest seems fine ( I like the cold cold colours, but that is just me ).

    Although will you keep the dice comment counters? It is pretty neat but they don’t fit with the minimal-techno-design.

    But as others said, I come here for the content whatever the design.

  41. Dan says:

    Not stark enough! Too personal!

    Just kidding. I actually really like this direction. The old design was a great one, so it is tricky to follow that up, so I think a radical change is in order. It vaguely reminds me of the old Paranoia! documents.

  42. Nixorbo says:

    I second everyone who doesn’t particularly like it but doesn’t hate it.

    Looks too much like Flickr.

  43. ShadoStahker says:

    Alrighty, totally candid opinion, plus one bug.

    Yes, a bug.

    Opinion first:

    Looks pretty good. The blue category icons (blue and… lighter blue) can be a bit hard to see, especially if you have vision problems. A bit more contrast in the icons might be good, but I’ll leave that to you to design.

    It’s very much less casual, which is both good and bad. I won’t say businesslike, as the colour kind of goes against that, but less casual for sure. As I said, though, that’s good and bad, depending on who’s comenting.

    I agree with those above that said the logo changes colour at an odd place. Having “twenty” in blue and “sided” in pink would probably look better. As it is, it looks as though the site belongs to a guy named “Ed”.

    Altogether, I like it.

    And the bug.

    When comments are closed, the template doesn’t display properly.

    Check out the controversy thread, and you’ll see it. In Firefox on Windows, at least:
    – the sidebar menu is at the bottom of the page (centered)
    – the search box is below it
    – the footer (“powered by WordPress”) is on the right-hand side
    – the text google ads don’t exist
    – and the google ad banners are on top of comment 114

    If you check the sources on this page, and that one, you will find that the table tag that holds the comment form is being opened, but not closed. As such, the td tags holding the sidebar are being placed into said comment-form table, and not into the main site table.

    (By extension, the main site table isn’t being closed which, while it will display properly, is just bad form. :-P )

    Hope that helped!

  44. axcalibar says:

    Magenta? Why’d it have to be magenta!? Pure red would look great with that shade of blue. It works here: http://www.arkalmighty.com/

  45. Rhea says:

    I think it’s the blue, pink, and white color combination that makes it look childish. And a lot like flikr. Then, all the white and the rounded edges on the icons make it look too soft and simple. I’m not sure how I feel about the all lowercase in the header there, but maybe I’d like it better with different colors?

    Anyway, it feels too streamlined and too childish right now. I would try changing the colors and then see how that changes it?

  46. Hal says:

    I’m sure the new design will feel more comfortable at some point. Still, I must chip in with the people who question the color scheme.

    Pink?

    I dunno. I guess if you like it, that’s what’s important. I’m not that big on pink, myself.

  47. Hal says:

    Hey, I just noticed that each comment is numbered by the dice at its side. How long has that been there? How high will it go?

  48. Jessie says:

    Well, I had a moment of, “Wait, is this the right site?” this morning. After that, my initial reaction was also, “Wait, pink?”

    I don’t think the pink makes it childish. I think it, with the the baby blue, makes it look a bit girly. Nothing wrong with that, of course. Hell, I am a girl.

    Ah, I suppose we’ll get used to it.

  49. siliconscout says:

    UH dude. the Magenta might as well be pink, and in my never to be humble opinion is a little too “cotton candy”.

    I would do with a more red or burgundy to get a more “grown up” feel.

    Other than that I am OK with it however I do prefer to read light text on a dark background. It’s easier on the eyes.

  50. lplimac says:

    It’s definitely blue, I’ll give it that. Personally I like sites that look more business like then one that has glaring color backgrounds. Only thing I’d really change with the new design is use the old post icons, or new ones in the same style. But hey, it’s your website not mine, so do what ever you want!

  51. Maddy says:

    All I ask is that you don’t screw with the dice. :-)

  52. axcalibar says:

    Perhaps if you used the blue cubes with colorful pictures within. You could have them go outside the cube’s borders for a nice impact.

    siliconscout: Magenta is a euphemism for pink.

  53. Shamus says:

    Yeah: No matter what I do, we’re keeping the dice. They’re just too much fun.

  54. asterismW says:

    I’m with the others, who’s first reaction was, “Gah, what happened to TwentySided??” I thought I’d stumbled across some imposter site, and I almost left to try and find the “real” one. I much preferred the old logo (to me, it’s what defined the site the most), and I think the whole theme is too blue. Also, the old icons were easier to differentiate. Before I could just glance at them and know the category of the post. Now I have to spend a few extra brain cycles deciphering the image.

  55. Avaz says:

    I didn’t have time to read all 50+ posts ahead of me, so I apologize if this was mentioned, but I think the reason you’ve gotten “too childish” is because of the magenta/pink and sky blue combination. I’d expect to find those colors painted all over a newborn’s nursery or something.

    (on further browsing, I have found this topic has been touched upon a few times)

    Aside from that, I think the rest just needs getting used to.

  56. onosson says:

    I think it looks great!

    I was actually thinking you should do something to update it a while back… nice job.

  57. maehara says:

    I go away for a few hours and it’s all changed again. I’m guessing the redesign is maybe another way of moving on from the DMoTR era? I know I’ll always associate the old logo with that. Ah, the memories…

    Anyway. I do like the clean / minimalist look, so I quite like how this is turning out. The smaller text makes better use of the space & is still big enough to read, the blue and pink (er, magenta) works quite well together (although the new logo’s a little too plain), and +1 for Winry on the Projects icon – although the images “under” most of the icons are a little hard to make out.

    A few more tweaks and I’d call it a job well done. But then, my web design skillz are hopeless, so what do I know. :)

  58. Joe Werner says:

    @siliconscout:
    Yeah, light text on dark background… the old feeling of dos… the current feeling of the console under *nix… While I also prefer this for my “everyday business”, I’d rather go with dark text on light background for a webpage. The contrast tends to be better if you are using a small or lightweight font. (Contrast is good on my terminal with a grey monospace bold font on black background, but I’d rather not use bold fonts for webpages and such)

    @Maddy:
    I’d love to second this (the dice), but they don’t seem to be in the same ‘style’… ah, well, but I really love them… hard to say what to do with them.

    About the font:
    I am not sure about the relation between the logo and the main font. I am just starting to get some grasp for those design things, so I am by no ways an authority. I have one issue, namely the number of fonts and font weights (right word? I’m no native speaker, sorry).
    You use one font for the logo and another one for the content. In the content you use different fonts / weights / sizes for:
    – The caption “Unrelenting nerdery” (Probably better use the same font as in the logo, it is “part” of the logo)
    – The subject of the page
    – Author (bold) and date (normal)
    – The previous in this category
    – The content
    – The number of the comment
    – The timestamp of the comment (same as “previous entry”?)
    – The subtitle of the logo for the category
    – The captions in the sidebar (capitals)
    The problem I have is mainly that you use two sans serif fonts quite close together and I cannot decide if thats good. I also suspect that you use too many different font sizes / weights too close together. I especially mean the comment section whenever it says “#blah SomeOne Says”.

    Oh, and the capital “S” in “Says” sort of keeps irritating me…

    And I think I should probably not post so much since reading all the comments might keep you from actually creating new content *feels slightly ashamed*

    I probably should also say that I am not really unhappy with the design. I admire people who can do such things, who are creative enough to create a site with that much great content and who attract such a mass of readers!

  59. roxysteve says:

    The DM of the Rings doesn’t really work with the new theme. Perhaps it should be moved to an archive with the old wallpaper and fixtures put back up?

    Steve.

  60. Joe Werner says:

    Rereading my post…. (last paragraph)
    I wanted to say that I actually find the design to be quite good, I need to (and most probably will) get used to it.
    Sorry, I didn’t mean to sound unhappy, harsh or unfriendly. It tends to happen when thinking in German and writing in English… sorry.

  61. I like it in general, but not for this site. I think it looks a bit too high-tech for a blog that’s based around a tabletop RPG idea. I think it could use a slightly more organic look.

1 2 3

Leave a Reply

Comments are moderated and may not be posted immediately. Required fields are marked *

*
*

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun.

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>