A C.R.A.P. Design

When I read up on C.R.A.P. last month — I admit — I was hoping it would turn me into an amazing designer overnight. Of course, we all know that this is an impossible feat and you can’t reverse several years of bad design habits with one book. However, it did at least make me stop and think about what I was doing.

Usually I find something little that inspires a design. A picture, a random colour, some squiggly lines I threw into Paint Shop Pro because I was bored. This time I actually sat down with a layout idea in mind and started drawing. I have to say, in advance, that the layout is now completely unlike my original plans. Anyway, I drew. Or rather, I opened PSP7 and used the line tool and the rule of thirds to come up with a basic structure (cropped to size)…

sketch of layout

It was quite by coincedence that I clicked upon a link to colourlovers.com and found a cool new colour scheme, so the layout itself came together quite quickly. It was identical to the sketch…

1st stage of design

However, it didn’t strike me as particularly different to any other two columned layout and the buttons — although entertaining to hover over — looked amateur and chunky. Not the elegant look I was going for really. I tried putting in some photography, basic line shapes, etc but couldn’t really give the design anything ‘fresh’; even advice from Jacky led to nothing in the end (sorry :p).

I experimented with three columns, and started to put in ‘actual’ jemjabella.co.uk content just in case it was the Lorem Ipsum demotivating me and, while I figured I could probably get more stuff in on the front page I’d have to drop a column for content-based pages and that would require me to fart-arse about with liquid columns and all sorts of coding crap that I have neither the time nor the inclination to mess with.

That said, when it comes to time I’ve definitely spent more of it on this layout than any other, and finally settled — sort of — on what you see now. I’ve brought back my cocky tagline from the early 06 layouts, given a lot of size and focus to my main navigation and tried to add a bit of C.R.A.P. It’s not unique, it’s not got flashy gradients or web 2.0esque stars and banners and is very low on imagery… but, it’s doing the job I want it to do and doing it well.

67 Comments

  1. It’s a nice layout. I like the flowery background at the very top. The only problem I see is the dates under Also Worth Noting are white and I don’t know about other people, but I had to highlight them to read them.

  2. Jem

    07 Apr at 5:23 pm

    Well spotted Kimmie. I had them white when the background was green, and when I removed the background I didn’t see the dates so forgot to re-style them, hah!

  3. I love the return of the tagline and your comment styling is enviable. *nods*

  4. Ooh yes, I like the comments. As I’ve already told you, I don’t particularly like the brown, but meh. And is the divider supposed to just say “divider”, or is that a temporary thing you forgot to update? ;)

  5. Jem

    07 Apr at 5:41 pm

    It’s supposed to say DIVIDER.. :P

  6. I really do like this design, much more than the last one (sorry :P). I am asuming everything is done with %’s? It looks so nifty. :)

  7. I would take issue with the idea of ‘bad design habits’. There are no good or bad habits, just good or bad results. It doesn’t matter how you get there. If anything I wonder if so called ‘rules’ or ‘good habits’ could actually hinder the process, lead you to including things that simply aren’t necessary. A good example is whitespace. It’s not as big a deal as the pro’s like to paint. If you look at sites like BBC News and CNN. Not only do they use tables for layout, but they cram as much on the page as possible – and it works. Even the W3C site gives little time to whitespace, they just layout and colour to keep things tidy. Finally web useability guru Jakob Nielsen’s site uses style markup in the xhtml. So I say stop worrying about standards and design rules. Just make sure it’s cross browser, fast, stable, and good to look at.

  8. What you’re saying about design and how I feel about programming code. I can do it in a perfunctory kind of way, but I suck donkey balls at doing anything remotely new or interesting. If we could combine our brains, we’d take over the world. Well, maybe. That said, I think you’re much better a designer than you give yourself credit for; the fact that you consider colour and shade and composition is all designing – so stop being so hard on yourself! I like the new look and like Claire, love the return of the tagline! :) V xx

  9. At first, I thought, “this really is CRAP, and not in the acronym sense.” Of course, I needed to refresh the page, and gosh its rather ace. I like the way the navbar is above the logo, and it seems kinda… I can’t explain it. But it’s good, maybe I’d like a bit more jazz lower down the page.

  10. Nice design, well done :P

  11. Wow, i really love the new design. The colors really play nicely together and every thing’s valid. I give it an A+!

  12. I’m in love with the colors and the style of the layout. So well done. I’m not to big on the nav on top but it still is very well done. It all fits. :)

  13. I like the tagline. However there’s a problem with your footer. I’ve taken a screenshot of it for you, just in case you weren’t aware: http://tinyurl.com/252xpz. I really love the colour scheme and I like the floral pattern and the header. You always sell your design skills short and if I were you I’d be pretty proud of this theme. (That’s because I can’t design for toffee and haven’t practise in an aeon.)

  14. *has mad love for layout* I think this must be my favourite Jemjabella.co.uk layout ever. It just.. gets me. Excellent work – I think it’s high time you quit dissing your design skills, woman. :)

  15. I like the color scheme a lot. It feels very warm and comfortable, for some reason.

  16. Ain’t nobody better than me, except maybe Ray Mears. I’d be fucked in a jungle, he’d make a stew.

  17. I like the color scheme but the ‘Jemjabella’ logo hangs off the brown area into the green. I’m using Firefox 2.0.0.3 on Windows (what looks to be XP). I think something that might add to it would be to have a shadow at the top of the green area, snug against the bottom of the brown. It would just add some depth to the layout, and I think it’d be pretty.

  18. Yikes, I just noticed something else. When I hover on the links ‘Home’ through ‘Articles’, the ‘Jemjabella’ logo jumps to the right to avoid the bottom border on the hovers. You might want to absolutely position the logo or something, since it’s both hanging out of its area and moving around.

  19. Jem

    07 Apr at 7:25 pm

    Sarah – can you send me a screenshot? I can’t replicate what you’re getting.

  20. I think this is one of your best layouts yet Jem. I love how elegant it is, but with that cocky tagline so it’s not boring. I’ve visited jemjabella for a while, and though I do not know you personally, this layout screams Jem.

  21. I have mixed feelings, which is why I took so long to say something :P What I *do* like is the styling tidbits – like the navigation at the bottom of the page and the way the comments look :D

  22. I really like it. All your layouts are really nice and clean. I really like that it takes up the whole page, but doesn’t seem so huge. Except for the hot pink footer bar. The other hot pink text is ok. But it’s really hard to read what’s on the bar. And it hurts my eyes. XD

  23. Oh damn Jem! You used a pattern I was thinking of using for a new layout. Oh well. :P

  24. Jem

    07 Apr at 7:31 pm

    @Mallory: the ‘hot pink’ you see is from the style overrides I provided with the last layout. If you go back to the style overrides page and select ‘Default’, this won’t be an issue.

  25. I’m completely in love with the layout, great work Jem. This shade of green is one of my favorites. It reminds me of spring (which is supposed to be here by now but we just got six inches of snow the other day so it doesn’t feel like it).

  26. I really really like this layout, it’s low key while still being really gorgeous. After reading so much about the book on here, I think I need to pick it up lol.

  27. I love it! Reminds me of chocolate limes :o)

  28. Ahh…I just came this morning, and didn’t see an update, and all of a sudden BAM! Very nice…I love the non-evidence of the columns. Although, I not quite with the brown, it’s still very nice. The green was what blew me away! :D And very CRAP indeed.

  29. I REALLY like the colors, like a lot a lot. This is probably my favorite layout of yours since the Feb 2006 layout. (Yes, I had to go look through the past layouts to get that date.)

  30. Beautymus. :)

  31. I think it’s pretty :]

  32. Wow – this is a stunner! Yeah, I think this is one of your best yet :D The flowery stuff definitely adds some oosh to it. The transformation is complete. You are now an amazing designer :P

  33. Wow! I actually like this layout. No offense, but, I have said that I don’t like the previous layout, and I have said this all along. Anyhoo… This is a nice layout! Great job Jem! :D You may want to use books more if they are going to land you with great layouts like these. Oh, and this is completely off subject, but I was at a mall in a nearby town, and they came over the intercom asking for a Jemma Turner! It was VERY VERY shocking, as I live in the U.S.A.

  34. As I mentioned on Mint Pages, the new design is wonderful :)

  35. Err… I don’t like it, but that’s me lol, the colors… I don’t know, not something I like.

  36. I really do love this design. I’ve always been a fan of elegant layout. There have been many times when I tried to do the elegant thing, but I can never pull it off. The floral pattern is also very beautiful.

  37. oooooooooooooh! I love it. It’s fresh & so unlike all your other layouts! I love the image you got in the navi too! I also can never get these colors to look goo together. I am so in awe of you again.

  38. This is very different from the other layouts. A change is good, and I do like this layout, particularly the little swirly flowery things on top. It seems to imply that you can be a bit sweeter than you seem…

  39. Oooh nice shade of green. I would say this is maybe your most “girliest” layout? I never expected to see that flowery red background on your site! Still, makes for an interesting change.

  40. It’s nice…is the base of the flower background from Squidfingers? It looks familiar. I do like the colours. :)

  41. Oops, forgot to say that the “Add Comment” button has to be widened because it currently looks like “Add Comme”. :)

  42. Like Rose, I have mixed feelings too, but I do like the color scheme (reminds me of a chocolate mint cookie!) and lol’d at the tag line. XD The comments are pretty as well. :D I really need to check out that that color site!

  43. To be honestl, I generally don’t like your layouts. Not because they look terrible, because they dont. they just don’t appeal to me. (but then again, I typically don’t come here because I want to stare at your prettyful layouts for hours on end.) But with that being said, I like this one a hell of a lot better than I liked the one you had prior.

  44. definitely love the divider! hehe

  45. Please DON’T use that star. I’m sincerely starting to get sick of them. It invaded the web these days. I LOVE this design, though I have to admit that the screenshot of the version you intended at first is something I like better. Nevertheless, I like the outcome of this as well. At any rate it’s better than what I’ve seen from you before. Incidentally, what did you do last night? No sleep? I’m sure when I left snark the design here was the old one. In any case, if you still think that such a design is unworthy of Perfection… I LOVE it. :)

  46. Jem

    08 Apr at 10:44 am

    Thanks for all your feedback guys. :)

  47. I love it :) It looks so clean and simple :) And it loads fast too. Way to go Jem!

  48. Ooh, nice! I don’t like the colors individually, but together they go well.

  49. I like new new layout a lot, it’s balanced and easy to navigate. The colours are great! (colourlovers rock :D) the divider is cool XD

  50. I think you’ve pulled off elegant very well! I love colourlovers.com! I love colour so its my home away from home!

  51. Hey, i found many more beautiful backgrounds like yours (and that one too) on squidfingers.com .. don’t know if you guys already knew it, but it’s a must have in Favorites :) .

  52. This is my new favorite of your layouts… It reminds me of the new phones the cell companies are trying to hustle by calling them chocolate and cherry, etc… Once again, awesome job, as always!

  53. Jem

    08 Apr at 5:48 pm

    Yep, Florarie, this is a squidfingers background :)

  54. I really like this, the color schemes are something I haven’t seen all over the place and it’s got the perfect professional look for your website. :)

  55. Have a happy Easter, Jem! ^_^

  56. For some reason I don’t like this layout very much (Heck, I’m really saying it :P). I can’t point out why but it’s not as good as your previous ones. I like the color scheme though!

  57. I like it. Though, it is very web 2.0-y in my eyes. I like the comments the most.

  58. I think it’s nice.

  59. *blinks* *blinks again* I believe I may have some colorising to do, because this is what I’ve been working on for the past 4 days… http://tinyurl.com/3xgkgt How on earth did we end up with almost the same colour scheme?! And why must yours look better than mine. Bah humbug!

  60. Looking great; absolutely adore the new layout. Found your “divider” quite amusing, too :)

  61. When I opened the page, I went ‘ooh’ out loud. I mostly enjoy the green drop shadow on the bar onto the background after the title. Looks lovely!

  62. I’m very proud of you Jemmie. :) It looks darling and I’m quite happy with it. Though, you may want to change your footer? The Skip to Content link, though handy, may want to be called something else, as when you’re viewing the footer, you’ve already skipped the content. xD

  63. Love it. Great design. Very inspirational. Regarding comment from Kenna – “…as when you’re viewing the footer, you’ve already skipped the content.” I see what you mean, but your missing the idea: It’s like an old-fashioned “return to top of page”, except it’s telling you exactly what section you’ll be returning to. In this case, the content. Skip, Return, its all semantics.

  64. I completely understand Stephen, no offense, but I’m not stupid. xD Regarding accessibility and a friendly user interface, it’s completely disregarding the less savvy web user.

  65. I love the colours

  66. Not been for a while, the page loaded and my immediate reaction was, “Holy crap, it’s gorgeous.” I actually said that out loud. So yeah, first impression? I really like it. Love the green, love the cocky slogan. Not completely sold on content and sidebar having the same background – stylistically it’s nice, practically, I don’t immediately focus on the area that I actually want to be looking at – which might matter if you were trying to sell me something (you’re not are you?) but ultimately, ain’t that important. Overall, thumbs up.

  67. I love this layout. It’s very pretty and I love the colors too.