" ... Talking of Design ... "
<span>all genres</span>

Welcome. This here is a place where myself and others can gather and type words that hopefully form coherent sentences of some worth (or not) ... [Blog-Home]

Dec 29 Redesigning kevadamson.comPermanent Link

kevadamson.com Over the festive period, apart from munching mince pies and glugging ale, I’ve been working on the new visual layout for this very website. The current main site layout is actually coming up to being 3 years old which, in web age, is actually pretty old. (Update 08/01/08) You can view a dummy page of the new design here: kevadamson.com 2008

It’s been a tough thing to do, as I’m quite attached to the site’s quirky little ways and it’s also still getting good feedback. It was recently featured in the Best of CSS Design 2007 article on Web Designer Wall (which, again, considering the age of the design, is pretty good all things considered). In 2006, when I redesigned my blog: ‘Talking of Design’, it was featured on CSS Beauty. The site first got some attention when, in 2005, it won a Web Standards Award. But even then, the review mentioned:

‘I have to admit, I found the CSS to be a little bit on the scruffy side too but it validates, so I’m not going to hold it against him, he’s the one who has to maintain it after all.’

And that was nearly 3 years ago, and my mark-up has improved greatly since then so a new site is well overdue, even in terms of bringing the mark-up up to the level I am now at. To be fair, I have tidied the CSS and mark-up on the site since then, but it’s no-where near as good as I would like.

So, in essence, my reasons for the redesign and development of my site are:

  • Being a few years old, it feels a little stale in my eyes
  • The mark-up isn’t as good as it could be. If I want to move on to the next level, and if I want to be taken more seriously as a web standards developer, this area needs addressing
  • I want to bring my blog into the site more, with a home page presence etc. With my current site the blog feels too much like an ad hock after thought, and not a fully integrated part of the site. It also doesn’t feel quite ‘finished’ as a module
  • I want to embrace some web2.0 methods and ways of thinking, but through ‘my style’ and without looking like every other web2.0 site out there
  • I want to drop the liquid layout. It worked well when resolutions were mainly 800 and 1024, but now that screen resolutions are getting wider and wider, it’s getting harder and almost more restrictive to get things visually working across the board – I want more visual ‘control’ than that (I’m going for 1024 in keeping with what my stats show)
  • I want to make all areas of my site dynamic, so it is easier to update and will be easier to maintain

What I don’t want to do is loose those areas and the styles which work well already. So, with that in mind, I’m going to keep the grungy feel which people seem to like so much (indeed, 90% of the site redesign will be actually made up of hand-rendered elements, with design software used to add colour, texture and for composition) and also my quirky and humorous touches which visitors find refreshing and welcoming.

I have actually finished the flat home page visual ( Update 06/01/08 : I’ve now marked-up a dummy home page taking into consideration some of the comments above ), and I’ve invited some friends, colleagues, and also some of those I don’t know but admire, for feedback of the design before I ‘go public’ with it. I’m hoping they will comment below as I’m eager to ensure the new re-design is a step forward and that I’m on the right track – I want it right.

So yeah. That’s it. I’m quite excited about it all. Hopefully it will be well received. Watch this space for more progress. Happy New Year ye’all :) ...

(Update 08/01/08) You can view a dummy page of the new design here: kevadamson.com 2008

  1. Elliot Jay Stocks | Dec 31, 16:14 | #

    Thanks for sending through the sneak peak, Kev! I really like the new design, even if it’s only static at the moment. It has all the charm and coolness of your current site but adds a little more breathing space to everything. And I love the grey sidebar with the torn paper!!! Can’t wait to see the real thing…

  2. Kevin Cornell | Jan 2, 09:29 | #

    It looks good – it really gives a feel for your wonderful style – very nice, by the way.

    My only comment would be that I think it could benefit from some breathing room throughout the layout. Things are quite tight, for my eye. Even just adding a bit more leading between the copy would make a big difference in terms of lightening things up.

    HOWEVER – that sort of thing is more a matter of personal preference. So if you’re happy with the overall spacing, then by all means stick with it.

    Anywhoo, excellent job, and I look forward to seeing it go live :)

  3. Jon Hicks | Jan 2, 10:26 | #

    Kev, I like the new layout a lot! Part of the breathing room thing that Kevin mentioned would be the line spacing. If you can add a bit more line-height on paragraphs and lists it would help enormously (leave the headings though – these look good tight). More vertical space between elements like the thumbnails and ‘talk to me’, and all the various sidebar elements would really put the icing on the cake.

  4. Veerle Pieters | Jan 2, 11:44 | #

    I like your lay-out too, it shows personality. I’m gonna sound like a broken record here but I agree with the guys above that it needs more whitespace (breathing room). For example the main article content comes too close to the side bar. Like Jon said add a bit more line-height on paragraphs and lists. I would also try to improve the readability a bit of the main navigation. These are just little things to make it perfect :)

  5. kevadamson | Jan 2, 11:59 | #

    @ Elliot: Cheers! Yeah. I think the grey separates the content nicely. Thanks for the positive feedback!

    @ Kevin and Jon: Cheers for the comments. I’ve just finished slicing and splicing the images for the build of the page, so what I think I’ll do is tweak line heights and spacing in the CSS at that stage. I’ll be sure to give yuz a ganders at the HTML stage to see if it looks better :) That’s if yer don’t mind having another looksy …

    @ Veerle: Thanks (‘’,) Yep. That’s 3 strikes so will defo be tweaking the spacing! Quick question: When you say ‘main article content comes too close to the side bar’ do you mean the content in the left is too close to the side (horizontally) or too close to the intro text above (vertically)? I will also look into your points on the readability of the navigation – I’ve perhaps grunged it a little too much!

    Thanks ye’all for taking the time out to have a look – it’s much appreciated ;)

  6. kevadamson | Jan 2, 13:14 | #

    @ Veerle: Ah yes. Think I know what you mean actually. The content on the white is perhaps too close to the content on the grey. My only concern with altering this is that I would have to lose some horizontal space from another column in order to keep to the 1024 width – looking closely though, perhaps I could win a little more space between the white and grey areas by tweaking things slightly – I’ll have a play …

  7. ceaGallery | Jan 3, 16:41 | #

    I actually like your current design but it seems that the next one will be better … more colours will be better, so can't wait.
    I am happy to know that Elliot and Veerle know you because I read their blog too and I already subscribed to your RSS Feed guys …

  8. stefan alexandru | Jan 3, 16:58 | #

    Sorry to barge in like this, but you did mention this site won an aword for web standards and you mentioned you are “an aword winning web designer” ... but i couldn’t help notice that … this site is not valid doesen’t this mean it’s like not so standard after all. Make it valid man. Cheers.

    Sorry to barge in like this, but you did mention this site won an award for web standards, and you mentioned you are “an award winning web designer” ... but I couldn’t help notice that this site is not valid. Doesn’t this mean it’s, like, not so standard after all? Make it valid man. Cheers.

  9. kevadamson | Jan 3, 20:06 | #

    @Stefan : Heh! Oh yes, so it doesn’t. Ahem: “Ladies and Gentlemen. I am sad to announce that the code used to display my ‘Twitters’ is causing 6 validation errors. I am so ashamed. I should, therefore, like my Web Standards Award to be revoked immediately …”

    Seriously Stefan. Have a sit down and think about what ‘Web Standards’ is all about. I bet you're the kind of guy that ‘tuts’ at wrongly encoded ampersands. Bless. Oh, and sort out your spelling and grammar … ‘man’! I’ve corrected it for you and put it beneath your original, so you can learn from it.

    Also – just in case it keeps you awake at night – try your little validation checking buttons now.

    Sigh. Some people …

  10. stefan alexandru | Jan 3, 21:17 | #

    Congrats it’s valid. Man I’m sorry I’ve upset you. And it’s not a validation button its web developer but you probably know that. Also I’d like to apologise for the grammar. The theme is really nice and original. Haven’t finished mine yet because of exams and stuff.

    Anyway man … didn’t mean to upset you. PEACE?
    Take care.

  11. kevadamson | Jan 3, 21:33 | #

    @Stefan: Hey, no worries mate. Possibly came down on yer a bit hard there! You’ve caught me in my ‘post-xmas-blues’ period – back to work, it’s cold, and no more cozy festive boozy jollities! Bah! Grammar-wise – didn’t realise you were Romanian, so I take it back – I certainly can’t speak a word of your language, let alone spell any words!

    Good luck with your exams and all the best for the new year. Peace.

  12. eko | Jan 3, 22:52 | #

    Great Design …
    I like this design.

    Good job.

  13. John Oxton | Jan 7, 08:53 | #

    Overall I really like it, feels clean and crisp and, as ever, very unique.

    Jon H and I both agree that the text in general needs more line-height
    to be comfortable to read.

    The other thing I wanted to mention was using callto:// links on your
    numbers and a skype:// link on your username

    Hope that helps mate! :)

  14. Jon Hicks | Jan 7, 12:15 | #

    Today’s tweak did the trick! I think it looks spot on now!

  15. Nick La | Jan 7, 16:37 | #

    To be honest with you, I like your old/current version better. The new design seems a bit messy to me. I know that you did intentionally, but the top right talking character looks a bit amateur (sorry, no offense, and I know you probably spent a lot of time on it). I guess it is the hair bugging me. Perhaps if you could make the hair more defined or make it vector-like?

    1) I like the tabs, but the search form took me a while to figure out
    2) Very good job on the tab titles: find an article, read an article …
    3) I like how you styled the links
    4) I like the scrolling showcase/gallery a lot! In fact, the best part on the design. Good job!
    5) I like the white content area and dark sidebar
    6) The contact form is nicely laid out, but the anti-spam box is too small? Took me a while to figure out that I can type inside. I thought it was a checkbox, LOL
    7) The header seems a bit sketchy to me
    Perhaps sharpen the talking character or use vector style instead? – So there is a contrast
    8) Overall design is very sketchy and I think it lacks some contrast?

    These are just my personal comments. Please don’t take it seriously :)

  16. Elliot Jay Stocks | Jan 7, 18:37 | #

    It’s looking really good, mate. Those JS transitions are very nice.

    Can’t wait to see the finished thing! :)

  17. Nick La | Jan 7, 21:18 | #

    Looking at your new site again, do you find the serif font is too small to read? I think the main body type can be bigger font size. Last comment (promise), I really like your rotating gallery, but I find the “Graphic Design” category is a bit odd because it is in grey yet the other categories are in bright colors.

    Good luck on your new design and happy new year!

  18. kevadamson | Jan 7, 22:45 | #

    @Jon ‘n’ John : Thanks guys for the pointers on the skype and call links- not implemented them before so ‘yer learn something new everyday’, as they say. Also cheers the all the pointers on the line-height – I’ve never been brave enough to go so high in the past. It feels kinda dangerous … which I like! I feel naughty … which is weird (I should go out more)! It also gives the site a brochure feel and almost some ‘respect’ to my words (which I’m not entirely sure they deserve!) ...

    @Elliot : Yeah. It’s worked out kinda well. Although the JS might be causing some delay issues on other elements – need someone with more expertise to debug it – and also make it work in ie6 (predictably!) ...

    @Nick :

    To be honest with you, I like your old/current version better

    Heh! It’s good to know there’s life in the old dog yet! The site still gets good feedback. But I do feel I need a change – for better or for worse. My reasons are bullet pointed above in the article.

    The new design seems a bit messy to me

    Hmmm. The general feedback I’m getting is that the new design is crisper and cleaner with more breathing space, so I’m a little confused …

    the top right talking character looks a bit amateur (sorry, no offense, and I know you probably spent a lot of time on it). I guess it is the hair bugging me

    Heh! If you knew me you’d get the hair thing – it really is in real life, very much like some kind of helmet style nest that’s been electrocuted. It’s quite odd and needs attacking with a hedge trimmer or something. Perhaps when I get it cut I’ll change the ‘do’ on the site. The design was originally hand-drawn, then I simplified elements using vectors, I then converted those elements back to bitmaps and added some harsh grungy marks and distresses. I like to think of the style of the illustration / animation as ‘purposefully naive looking’ rather than ‘amateur’ ;)

    The contact form is nicely laid out, but the anti-spam box is too small?

    Yeah possibly. Although there is only one character required. It doesn’t seem logical to create a space for more?? I would possibly change this if it was a site for a client, and make it more of a traditional form in style. But as my site is one of only a few opportunities I have as a professional to try and ‘break some moulds’, I’ll leave it for now and let people click about a bit! I wanna smash some rules!

    Overall design is very sketchy and I think it lacks some contrast

    I wouldn’t agree with this. Often on my site currently, you can be on a page and the visual impact is white and grey with a grey-ish blue – perhaps with a ‘rogue’ red in a heading, and that’s it – just scroll up a bit and you’ll perhaps see what I mean. Whereas I’ve introduced more colours, and also that inverted style of white against dark grey evident, regardless of where you are on the page – quite a dramatic contrast in comparison. The only place on the design where contrast exists at the moment is in the header and footer – they were the areas, at the time, I felt most confident of being creative in. Now I want to pull some of that into content areas of the site, as my XHTML and CSS skills have improved and I feel much more confident of making it work – not just header, footer, blank space in the middle for text and pics, which the site mostly is (bloody hell, I’m slagging it off aren’t I! And it’s my design! I must be mad. Don’t get me wrong. I do still have a rather unhealthy affection for it!). The thing is, I see that most in your own site – Web Designer Wall – and I want to be that ‘playful’ also!

    do you find the serif font is too small to read?

    I did a check and it is a point smaller than the size on your own site. I think the tweaks to the line-height have given it readability, and I’m also happy with the ratio and the hierarchy of the various block text elements, so I’m not too concerned with this. The main body text translates to 12px in size, which I think is fine.

    I find the “Graphic Design” category is a bit odd because it is in grey yet the other categories are in bright colors

    Yeah. I know where you are coming from here. Thing is, I have used yellow, red, green and blue, and I tried other colours such as orange (too much like the red / yellow?), and purples (blue?), so opted for white but with a yellow underline when you hover – to bring in some colour (and you could say because I combine my design with my illustration – although I’ve only just thought of that now – heh!)

    I do agree that perhaps I’ve gone too far with the top nav elements – perhaps they are too messy. Veerle picked up on a possible readability issue also. I may re-visit the nav after I’ve slept on it for a bit, and perhaps go for something more typographical with only hints of ‘mess’. That might tidy things up and also deal with a possible readability issue (although, again, I don’t wanna hold peoples’ hand too much with this project – I want to take risks – hmmm).

    Thanks for all the positive feedback though as well (‘’,). Although, saying that, It’s actually all positive, because you’re a designer who definitely knows what he is talking about, and your opinion and honesty I value highly, so cheers very muchly …

    I do go on don’t I! I’ll be putting the URL of the development page on the site tomorrow for all to see, and will also go through my decisions and design reasoning in more detail in another post real soon. Thanks ye’all! I’ve really learned a lot from this process …

  19. cindy | Jan 16, 15:19 | #

    I like the illustration style.

    Since you asked for comments/suggestions ;)
    I agree with the navigation hard to read. Can you fade out the extra layer so it is easier to read. Don’t make your users work to figure things out. Most of us have a short attention span when taking a looking at sites. You don’t want to loose a visitor because it was hard to figure out the navigation.

    The distinction of what is click-able and isn’t is a bit hard to figure out.
    The +, -, and arrow floating to the right is click-able, but the X in the circle that is repeated isn’t. I believe its a screw?

    Good luck on the redesign! :)

  20. kevadamson | Jan 18, 20:37 | #

    @cindy: Thanks for the feedback … although I think you’ve given it on my current design rather than the one in development: kevadamson.com/2008/ – but I will take on board your comments on ‘distinction’, perhaps on the top level navigation on the new design, as a few people have flagged up that it may be a little too ‘messy’ when considering that they are navigational elements!

Hey! You there! Say Stuff :


| Textile Help