The personal disquiet of

Mark Boulton

May 10th, 2006

A bit of a realign

Maybe it’s some­thing about spring or maybe it’s the 48 hours I spent on a plane recently, but I thought it was about time I spruced this site up. Actu­ally, the main reason goes back to @media last year when Jeremy included in his present­a­tion a javas­cript image gal­lery. It kind of spir­alled, totally out of con­trol, from there really.

There’s quite a few changes. I’ve gone for a wider, more flex­ible four column grid, which I use in more con­fig­ur­a­tions than the pre­vi­ous site. Typo­graphy wise, I’ve ditched Hel­vetica in favour of a serif, in this case Geor­gia. There’s also a logo­type. I hope you agree, more of an evol­u­tion from the pre­vi­ous design. 

One thing I am excited about in this new design is actu­ally the new piece in my port­fo­lio: The Inter­na­tional Bac­ca­laur­eate Organization’s Online Cur­riculum Centre and Work­shop Resource Centre. Bit of a mouth­ful, but this was a fant­astic pro­ject to work on. From April to Janu­ary last year, I worked with the IBO to pro­duce web stand­ards based tem­plates for these great applications. 

Any­way, after a couple of weeks being unable to post due to rep­lic­a­tion issues, it’s nice to be back!

31 Responses to “A bit of a realign”

  1. Alex B. said on: May 10th, 2006 at 10:31 pm

    I’m really dig­ging this Mark. The subtle changes really have a major impact on the design.

  2. Mark Boulton said on: May 10th, 2006 at 10:39 pm

    Thanks Alex. It may not be to everyone’s taste as it’s quite dif­fer­ent to the pre­vi­ous design. Per­son­ally I think it’s a more con­sidered, mature design which solves some prob­lems which had been addressed on an reac­tion­ary basis on the pre­vi­ous design.

  3. TR said on: May 10th, 2006 at 10:54 pm

    What I like: Good use of white space and the green accents. 

    What I find con­fus­ing: The header being over the right column, and thus leav­ing the menu nav­ig­a­tion kinda free-wheeling it on the left. It seems that hav­ing the header over the right column anchors the page to the right which feels unnat­ural con­sid­er­ing I read left to right, and adds weight/prominence to the right side which seems to be less import­ant than the con­tent on the right.

  4. Mark Boulton said on: May 10th, 2006 at 11:01 pm

    Thanks TR.

    What I was try­ing to do was retain an ele­ment of visual ten­sion which was present in the pre­vi­ous design. This is achieved, I feel, by the logo place­ment and the res­ult­ing white space sur­round­ing the navigation. 

    I take your point though.

  5. TR said on: May 10th, 2006 at 11:02 pm

    I meant “…than the con­tent on the left.”

  6. Mike Stenhouse said on: May 11th, 2006 at 12:32 am

    Really, really nice!  I par­tic­u­larly like the vary­ing thick­ness of lines to demark con­tent areas… Works very well. 

    There’s a little bit of trouble in your work sec­tion in FF/Mac though — the screen­hosts look like they’re overlapping.

  7. kartooner said on: May 11th, 2006 at 12:38 am

    Looks really nice, Mark. Well done, chap. 

    Although, I must say that I’ve noticed the thick line look (above the sec­tions), for use of a bet­ter term, being car­ried over from print design (news­pa­pers, magazines, etc.) to web design, blogs more specifically.

    I’ve seen this design ele­ment used on Jeff Croft, Sub­trac­tion and a couple oth­ers that I can’t name off the top of my head. 

    What are your thoughts on it and why did you decide to use it for this par­tic­u­lar design and/or designs you’ve done in the past? I’m just curious.

  8. Sean Fraser said on: May 11th, 2006 at 1:48 am

    I like the visual ten­sion you’ve cre­ated with all sec­ond­ary nav­ig­a­tion on the right. Espe­cially, how you com­bined three columns for the first/index/home page into two columns (with an implied third column if one includes the Gravatars) for the entries. And, how you’ve broken the rigid struc­ture with your choice of align­ment for the “Journal Feeds” (and it’s extra large Proud Member).

    Very cool.

  9. john said on: May 11th, 2006 at 8:21 am

    The space and pos­i­tions used in the header are nice, even though doesn’t seem to align per­fectly, there also seem to be some incon­sist­en­cies through­out the design in regards to spa­cing and use of hori­zontal rules. My gripe how­ever is with the gut­ters being so tight and not hav­ing any mar­gins on the page, it feels a bit too closeted, its neither severe or open. 

    The post info fields also feel odd being on the right, it seems to break the flow of the thread, espe­cially on the longer posts. 

    I’m guess­ing the stroke ele­ments high­light import­ant sections/areas through the use of width and con­trast to dis­tin­guish them (which if true means the nav doesn’t com­ply with this oth­er­wise com­mon con­ven­tion). –As the con­tent is pretty much stand­ard across the sites men­tioned and only a few ele­ments can be used in this way in min­im­al­ist strictly grid based sites, they do seem to blend together into one cohes­ive whole, as opposed to indi­vidual design voices. 

    Incon­sist­en­cies aside, it works, but in a slightly bor­ing way…

  10. Stuart Maynard-Keene said on: May 11th, 2006 at 8:46 am

    I really like the subtle changes you’ve done Mark. Mir­ror the words of Mike the vary­ing thick­ness of lines works great. The dif­fer­ences in size of type works great too. Love it!

  11. mike said on: May 11th, 2006 at 9:02 am

    get­ting this : 

    mb.gif

    seems over­lap­ping col­ours

    safari 2.0.3

  12. mike said on: May 11th, 2006 at 9:46 am

    All fixed — my mis­take.

    Dreaded Safari cache, 

    Cheers Mark.

  13. Mark Boulton said on: May 11th, 2006 at 10:15 am

    kar­tooner: I think it’s a visual con­ven­tion that works in some instances. If the approach is a formal, grid based, design (such as this one), then this visual device fur­ther strengthens the vis­ib­il­ity of the under­ly­ing grid structure. 

    Also, they act as clear indic­at­ors to dif­fer­ent con­tent areas and could argu­ably aid legib­il­ity. I’m sure in news­pa­per design, where the con­tent is con­sid­er­ably more densly presen­ted than this site, that the hori­zontal rules help in seper­at­ing out the dif­fer­ent con­tent areas.

    john: You make some inter­est­ing points, espe­cially your point about ‘indi­vidual design voices’. My aim with this design was to con­sciously reduce the amount of visual noise and align the design a step closer to print media in terms of some of the visual con­ven­tions used. It’s head­ing in that dir­ec­tion, and over the com­ing few months I’m going to be adding more to the design which my increase the noise of that ‘voice’ you talk of. Think of this as a bit of a blank can­vas at the moment. 

    Food for thought though, thank you.

  14. Steve Marshall said on: May 11th, 2006 at 10:21 am

    I really like the ‘new’ design, Mark: it’s clean, open, and pro­fes­sional.

    I also like the use of Geor­gia for head­ers in com­bin­a­tion with a sans-serif body? I’m sure I’ve seen it done some­where else but, as usual, you man­age to put my efforts to shame! 

    Oddly enough, I was toy­ing with the idea of a redesign for my site but it would seem that it’s pretty much identical to what you’ve done here. Oh well, back to the draw­ing board!

  15. Graham Sanders said on: May 11th, 2006 at 1:10 pm

    Bring back the homepage portal!!!

  16. maleika said on: May 11th, 2006 at 2:23 pm

    It seems that I’ll be the first to not like the new design very much. It has lost plenty of the eleg­ance and noble appeal that your pre­vi­ous ver­sion had. The typo­graphy was a lot more soph­ist­ic­ated in my opin­ion. The homepage had much more impact on me. When I first vis­ited your site a few moons ago, I was highly impressed with the beauty of your typo­graphy, grid and lay­out struc­ture, as well as the use of subtle brown tones to com­pli­ment the green. My first impres­sion was the reason I was inter­ested in find­ing out more about the works and essays of this site. Now, well, it’s not at all a bad design, but it has very little impact on me because I see less indi­vidu­al­ity here, less cre­ativ­ity, less intel­li­gence (design wise) and more con­form­ity which might be a good thing for many and less so for oth­ers. This is just my humble per­sonal opin­ion and, from the com­ments above, it seems that I’m on a very lonely train of thought.

  17. Richard Rutter said on: May 11th, 2006 at 2:25 pm

    Like some of the other com­menters I too like the logo on the right and nav­ig­a­tion placed where it is in plenty of space, although it feels like the nav should line up with the thick stripe below the logo. 

    The whole lay­out is really quite effect­ive, except it seems to be lack­ing a suit­able gut­ter between the two major columns — althought this could be a browser glitch — the markboulton.co.uk cat­egory almost touches the right hand column (I’m using Camino).

  18. Khoi Vinh said on: May 11th, 2006 at 3:39 pm

    Mark, I think this looks ter­rific. I llike the logic of the page a lot. One com­ment: I recently tried some­thing sim­ilar over at Subtraction.com with the visual attri­bu­tion of com­ments, col­or­iz­ing the hori­zontal rule above the com­ments that I authored to help read­ers pick them out more easily. 

    The feed­back I got was that it seemed to sug­gest an unin­ten­tional and artii­fi­cial hiearchy within the com­ment thread. I didn’t see it imme­di­ately, but even­tu­ally I saw what I think a lot of read­ers were see­ing. I think you may have that effect going on here with your green lines too. 

    Also, I’d just like to go on record: not­with­stand­ing the fact that I think Cameron Moll is a super-smart guy, I can’t stand the term “realign.” I know it has a grass­roots ori­gin, but I really feel like it has all the mak­ings of a mean­ing­less cor­por­ate buzzword. Sorry to vent there.

  19. Mark Boulton said on: May 11th, 2006 at 3:52 pm

    Thanks Khoi, I appre­ci­ate it. I take your point about the com­ment hiearchy and I totally agree, I really hadn’t spot­ted it, but thought there was some­thing just, well, odd about the green line. At first I thought it might just be because the thick­ness was the same as the column lines, but now you men­tion it, maybe it is the hierachy. 

    It’s ok to vent. At first I thought that too, but I do like the idea that a realign has it’s roots in the pre­vi­ous designs and doesn’t imply a com­plete rethink. Maybe that’s just the ‘re’ in (re)design though.

  20. Ryan Brill said on: May 11th, 2006 at 5:40 pm

    I can’t stand the term “realign.”

    Finally, someone said it. I totally agree — every time someone says “realign” I flinch a bit… Really, did we need a new term for it?

  21. John Arthur said on: May 11th, 2006 at 6:38 pm

    It’s wierd. At first, the right-aligned logo made my head spin and the nav­ig­a­tion made me feel like both it and I were dangling from a rooftop. How­ever, I go back, and it seems right. Hmmm. 

    Realign does seem too much like a marketing/sales term, as well. I like to think of a “refresh,” though that may bor­der on the same prob­lem I’ve lis­ted above. But I think it’s good to dis­tin­guish between tear­ing down the house, and slap­ping some new paint on some of the walls, and I want to have a term for that.

    JA

  22. Graham Sanders said on: May 11th, 2006 at 8:34 pm

    Got to admit, I much pre­ferred the older ver­sion as well sorry mate. 

    The bold black type is quite impact­ful whereas before it was more soph­ist­ic­ated in its understatedness. 

    The logo really both­ers me with it being in upper­case and what I really liked about the old ver­sion was the portal feel to the homepage. It was some­thing I used almost everyday :( 

    Also you’ve broken the grid with the work sec­tion, surely there should be a gut­ter space between the 2 images? 

    ?and lastly the strap­line is too near to the cliche ‘web­sites that work’ used by Zeld­mann and Imaginet. 

    Still a good site though but was nicer before I’m afraid, guess I don’t changes.

  23. Michael Hessling said on: May 11th, 2006 at 9:01 pm

    You might try chan­ging the color of your com­ment text to a dif­fer­ent color. See how Ryan Ire­lan does it. Just an idea. 

    I like your reima­ging. I find myself drawn to sites that dis­play an obvi­ous grid with lots of lines. That includes Sub­trac­tion, Jeff Croft, and yours. Of course, it helps that all three sites are quite well-done and well-written.

  24. Lin @ Pulmann said on: May 12th, 2006 at 12:35 pm

    I read with great interest all the com­ments about your web­site, being a novice I find that your site is easy to read and very uncom­plic­ated, the design to me looks really good, although as I said I am a novice where design is con­cerened, hav­ing said that, I know what looks good and have a very good eye for colour/text.

  25. Reuben Whitehouse said on: May 12th, 2006 at 12:58 pm

    Really lik­ing it Mark.  A definate improve­ment.  A lot more ‘solid’.

    My feel­ing on the com­ments is that the green line makes the author’s com­ments stand out so much more than oth­ers that I tend to ignore the one or two com­ments above or below (I find this issue with a lot of sites where the author com­ments are high­lighted). I think the thick green line is in too much con­trast with the min­imal grey line of every­one else’s.  Sim­ple­bits car­ries it off well by mak­ing everyone’s com­ments bold enough to com­pete with the author’s.

  26. Wilson Miner said on: May 12th, 2006 at 10:04 pm

    Looks great. I always enjoy a good evol­u­tion. And I have to say I still approve highly of the green.

  27. Trevor Filter said on: May 14th, 2006 at 10:21 pm

    Hey hey, I just fin­ished the last of my Inter­na­tional Bac­ca­laur­eate Dip­loma Pro­gramme exams! What a funny coin­cid­ence… it’s excel­lent to see the IBO mov­ing for­ward with standards-compliant web work, no less by a very tal­en­ted and admired designer… 

    Really like the new design, esp. the Geor­gia head­lines. I also like the vari­ance in the green, now. I was really hop­ing you hadn’t lost the green when I first read of your realign in my newsreader… 

    Any­way, con­grats! It looks great!

  28. Kuswanto said on: May 16th, 2006 at 1:04 am

    Great redesign BTW, i just revis­ited your site. It look…rr..cleaner :)

  29. Peter Holloway said on: May 16th, 2006 at 9:20 am

    Per­son­ally, Mark, I like the high­light­ing of your com­ments. As more of a lurker than a com­menter it helps me to browse the com­ments quickly, see­ing what you have con­sidered import­ant enough to reply to. After all, it is your blog :)

  30. Micha?l De Meirleir said on: May 16th, 2006 at 12:36 pm

    I liked the pre­vi­ous ver­sion of your site a lot.

    But this is even bet­ter : clean, bal­anced, pleas­ing to the eye… 

    Espe­cially the new logo (top-right).

    … it works allright… 

    Wow.

  31. The Wife said on: May 16th, 2006 at 10:13 pm

    I agree with JA above. I must admit that when you first showed me your new design, I wasn’t sure what to make of it as I told you. I quite liked it but it looked ‘dif­fer­ent’. Like Linda, I’m not a design expert so I couldn’t find the right words to say to express what I thought and wasn’t really sure anyway! 

    Now how­ever, look­ing again at it, I really like its sim­pli­city. I think it sums up your design ‘USP’ (yes, yes, I’m a mar­ket­ingy jar­gon person).

    As a few people have com­men­ted how­ever, I’m still not keen on that strap­line. Cre­ativ­ity doesn’t do you justice. I’ll get my think­ing cap on for some­thing more fitting. 

    Nice use of white space ;0)

  • Me

    Hello. My name is Mark Boulton. I’m a designer, an author, a speaker and I run a small design agency where we work with lovely cli­ents and pub­lish books as we go. This is my blog.

  • More of me

  • Publications

    Design­ing for the Web
    Start­ing from £19 + VAT for a PDF Down­load. £29 for a full col­our paperback.
  • Where I work

    Mark Boulton Design
    A small design stu­dio doing good things for nice clients.
    Five Simple Steps
    Pub­lish­ing easy to read design books.
  • See me speak

    Access­ib­il­ity 2.0
    Septem­ber 22nd, London.
    Drupal­con, Paris
    Septem­ber 1st — 5th, Paris.
    Web Dir­ec­tions South
    Octo­ber 6th, Sydney
    Build Con­fer­ence
    Novem­ber 5th, Belfast.
    Cam­bridge Geek Day
    Novem­ber 21st, Cambridge.
    Design­ing for the Web work­shops: Lon­don, Manchester & Glasgow
    Novem­ber & Decem­ber 2009
  • Copyright © 1999–2009 Mark Boulton. Made with an Apple Mac in Wales. Powered by WordPress and hosted by Media Temple.