designworkplan

Finally Redesigned!

by Sander Baumann. Average Reading Time: almost 2 minutes.

After weeks of design­ing and pro­gram­ming I’ve com­pleted the redesign for my blog designworkplan.com. With the pre­vi­ous design I still felt there where things miss­ing and the read­abil­ity could be improved. I could not find a stan­dard word­press tem­plate that would match my ideas about the look and feel, there­fore I’ve cre­ated my own tem­plate (the redesign).

With the redesign I’ve put empha­sis on the fol­low­ing factors:

  • Read­abil­ity
  • Usabil­ity
  • Type
  • Design

The most impor­tant fac­tor is con­tent read­abil­ity, I’ve tried to make the con­tent as easy read­able as pos­si­ble and left out all unnec­es­sary items. My main focus was when talk­ing about design the looks should be according.

For 95% I’m sat­is­fied about the new design, there are still some small things to be adjusted, but this is a ongo­ing process. I have used the fol­low­ing design items to cre­ate the redesign:

  • A fixed grid style theme, based on 940 width with 3 columns. Left and right col­umn 180 width and the con­tent col­umn 540 width.
  • A cus­tomized home­page with only the lat­est story as a fea­tured post, below that 9 ear­lier posts.
  • A big high con­trast footer con­tain­ing use­ful infor­ma­tion like top­ics, tag cloud, search and more.
  • A big type header & big type date.
  • A list of most pop­u­lar posts from the web­site and the lat­est posts at the right sidebar.
  • A com­ment style in grid with the con­tent (maby also add the gratavar).
  • Track­backs are below the com­ments (where they belong).
  • Header image and sev­eral other text images are cre­ated with the beau­ti­ful type Meta Sans by Erik Spiek­er­mann..

Thank you

I’ve learned from you guys & girls, no par­tic­u­lar order:

 iLoveTy­pog­ra­phy, Cre­ative Curio, Inspi­ra­tionbit, David Airey, Thomas (Fontanel, thanks for test­ing!), Brian Gard­ner, WpCandy, Alph­aBlogDe­signs, Jon Tan­ger­ine, Type­Sites, Van­de­lay, Adii, Smash­ing­Magazine , Design­ers who Blog, Six Revi­sions, Just Cre­ative Design, Web Designer Wall and many many more. Thank you!

Let me know

What do you think of the redesign?
How can I improve my website?

Update: 2010

Since sum­mer of 2010 this site design­work­plan has been over­hauled using the word­press theme from Infor­ma­tion Archi­tects iA3, I have adjusted ele­ments and tried to keep a clean look and feel for the web­site. In the future I will keep on updat­ing the web­site, stay tuned for more. Thank you for vis­it­ing designworkplan.com.




37 comments on ‘Finally Redesigned!’

  1. cat

    June 28, 2008

    Sander, it is beau­ti­ful! Wow.

    “How can I improve my website?”

    Just two things. 1) rollovers of some sort in the top nav. 2) An archives page.

    Very nice!

  2. adelle

    June 28, 2008

    Hi Sander! Love the re-design, the typog­ra­phy is styled very nice and I love the lay­out. I would how­ever agree that a nice rollover (maybe turns to red or black, text white) would look really nice. I think that would com­plete your re-design. Great job and keep up the great work!

  3. Sander Baumann

    June 28, 2008

    cat Thank you for your com­ment! 1) Sounds good, indeed this makes it more a but­ton. I’ll get right onto it. 2) Good idea. Thanks again for your opin­ion, appreciated.

    adelle Glad you like the choice of typog­ra­phy, I’ll change the but­tons to a rollover. Thank you for your com­ment! Much appreciated.

  4. Adii

    June 28, 2008

    The design is really great bud! :) I love the min­i­mal­is­tic nature thereof, along with (what is obvi­ous) an extreme pas­sion for the typog­ra­phy! Really well done!

  5. David Airey

    June 28, 2008

    Hi Sander,

    Very nice switch from the pre­vi­ous ver­sion. How many weeks were you work­ing on it?

    Be care­ful with the month beside the date for each blog post. There’s an over­lap which I don’t think is meant, as it hin­ders leg­i­bil­ity. I agree with Cat how a hover effect would be nice on your top nav bar. Also, the text in your header image (either side of *segd* is very small. Too small for a lot of peo­ple to make out I think.

    I really like how you dif­fer­en­ti­ate your own com­ments from the rest. Sub­tle, yet eas­ily recog­nised. Great job. :)

  6. Sander Baumann

    June 29, 2008

    Adii Thanks! Appre­ci­ated remarks on the min­i­mal­is­tic style in com­bi­na­tion with typog­ra­phy, this is how I meant it to be.

    David Airey Thank you for your com­ments, I see what you mean with the month & year over­lap­ping the date, I might push the month a bit lower to increase the leg­i­bil­ity. I’m work­ing on a mouse over for the nav­i­ga­tion­bar, hope­fully will get that done asap. I’ve tried to make the text besides the logo part of the logo to indi­cate what my site is about in a few words (Dutch and Eng­lish), might put it up in caps to make it more read­able. The redesign took me aprox 3 weeks (night time). Thanks again for your in-dept com­ments, appreciated!

  7. johno

    June 30, 2008

    You’ve done a great job, Sander. Like David, I’m impressed with how you dif­fer­en­ti­ate your own com­ments using the asterisk—very sim­ple and effec­tive. Like the logo too.

    Just sev­eral small things: the link (in Safari at least) “SEGD.nl 84 RSS read­ers” isn’t in blue (as are the other links); I’m also won­der­ing whether the title for each post might look bet­ter aligned left, rather than cen­tred (maybe not). And the typogrify plu­gin would fix those quo­ta­tion marks. Would also love to see a link to the old design.

    Con­grat­u­la­tions on the redesign.

  8. Sander Baumann

    July 1, 2008

    Johno Thank you for your in-dept com­ment about the redesign! I’ve removed the black link for the RSS Read­ers, but might the change com­plete RSS button/text into another design. At first I set the header text of the post left aligned, but I felt it would come more in bal­ance with the ‘segd’ header cen­tered, might exper­i­ment with it a bit more. At the moment I’m run­ning the typogrify plu­gin for the & mark, will set the quo­ta­tions aswel, thanks for the men­tion. I will put up a screen­shot from the old design in the post.

    Much appre­ci­ated com­ments! Thank you and good luck with iLT.

  9. Katy

    July 2, 2008

    Your blog looks really good. Love the sim­plic­ity of the design and all the white space— it really show­cases your use of typog­ra­phy. I’m not expe­ri­enced with CSS (I usu­ally go as far as mock­ing up my lay­outs in Pho­to­shop and that’s about it!) but I do enjoy look­ing at awe­some design!

  10. LaurenMarie - Creative Curio

    July 3, 2008

    Finally! (for my com­ment that is).

    Love: the drop cap, the block quotes, the small caps for empha­sis, the use of line (dot­ted and in the sec­tion titles), giant date, post meta, grid, typo­graphic hier­ar­chy, details like using a red aster­isk for your comments

    Needs work:
    – to me, people’s com­ments are at least equally impor­tant as who said them but by mak­ing the com­ment a shade of grey, it de-emphasizes it. I think the names should come down in value (lighter grey).

    - the red curly brace at the top of the post next to the date and meta seems out of place. I think it could work there, but it needs to move up or be smaller… I’m not quite sure what needs to hap­pen to it. It fits great on the home page and I see you kept it the same for the arti­cle page, but I don’t know that it works so well the way it is here.

    Over­all, I love this design and I’m sure Johno will fea­ture it in the next col­lec­tion of excel­lent web typog­ra­phy :D

    Edit: for some rea­son I didn’t get taken back down to my com­ment when the page reloaded. This makes me think my com­ment was eaten by Akismet. Per­haps it’s low on your list of fixes, but maybe you can look into it? You may just be miss­ing a com­ments anchor.

    Edit 2: look­ing at some of your other posts, I see you’re doing a sim­i­lar image cap­tion style as iLT. Using a pixel font for the text would help with the read­abil­ity at that small size. Style-Force has some free ones.

  11. Sander Baumann

    July 5, 2008

    Katy - Thank you for your com­ments about the design, much appre­ci­ated! I’ve enjoyed read­ing about your purse, it gave me a idea about a future post, thanks and I’ll keep you posted.

    Lau­ren­Marie - Wow! First off all thank you very much for your time and in dept com­ments about the redesign!
    – You are com­pletely right! I’ll set the text of the com­ments in black, the same color as the arti­cle body text.
    – I’ve moved the brace in all direc­tions so far, I might make it a bit smaller to give the header a bit more air. I’ll dive into that.
    – iLT col­lec­tion of excel­lent web typog­ra­phy, I rather think your web­site will be fea­tured there ;-)
    – Edit: Your post was not eaten by Akismet, I’m miss­ing the com­ments anchor in the tem­plete :o Well spot­ted! I’ll fix this asap, thanks for the men­tion.
    – Edit2: For some other small text (header) I used a font from Style-Force, but might also give it a try for the images stripes. Per­son­ally I really like the stripes above the images, this focus­sus your atten­tion more on the image.

    Thank you very much for your com­ments, I’ll go over them to improve my web­site! Have a great weekend.

  12. Diogo

    July 5, 2008

    Good work!!!

  13. jayhan

    July 7, 2008

    man, i love this! Great work.

  14. Andrei

    July 7, 2008

    With all due respect, it’s a lovely site, but the color scheme and typog­ra­phy (plus the curly brack­ets for the date) are far too close to iLT’s web­site. Hon­estly, drop­ping the grayscale + red theme would make a world of a difference.

  15. Sean

    July 7, 2008

    I sim­ply love it. Found it on BWG. I have a purely seman­tic sug­ges­tion though. Unless you have style the EM tag for some­thing spe­cific, I’d sug­gest chang­ing the SPAN CLASS=“CAPITALS” tag to EM. Use­ful for SEO and acces­si­bil­ity. Oth­er­wise, looks very nice. The typog­ra­phy was an excel­lent choice.

    One extremely MINOR fea­ture that I liked was the red aster­isk in the author com­ments. I pre­fer being able to eas­ily notice where the author commented.

    Thanks for the plea­sure view. Cheers.

  16. Sander Baumann

    July 8, 2008

    Diogo & jay­han — Thank you!

    Andrei — Thank you for your com­ment. The inspi­ra­tion and ideas for the theme came from many dif­fer­ent resources. I designed the date with the bracket myself and was not intended to look like iLT. I will take this notice very seri­ous and might change a few things. Thank you for your hon­est opinion.

    Sean — Thanks! I’m using the tag already in the theme but it might be a good idea to take a closer look into the seo & acces­si­bil­ity of the web­site. Thank you for the link to the seman­tic mark up arti­cle, much appre­ci­ated. Good luck with your website.

  17. Thomas

    July 9, 2008

    Hi Sander,

    Zie dat het goed gaat met de site, altijd leuk om de com­ments te zien groeien nietwaar?

    Een ding wat me wel opviel en wat ik even wilde meede­len is dat je af en toe nogal springt in taal. Zoals ik het nu zie zijn 80% of iets dergelijks van je bezoek­ers internationaal.

    Is het zo dat je vanaf nu alles in het engels doet? Zou dan even de About pag­ina ook in het Engels maken ;-)

    Verder is het all good! Net als de anderen vind ik de Aster­iks een goede toevoeging

  18. Sander Baumann

    July 9, 2008

    Thomas — Ha! Je hebt hele­maal gelijk! Ik krijg ver­schil­lende emails of mijn blog niet in het Engels kan.. Dat zet je toch aan het denken. Ik ben er nog niet hele­maal uit, wellicht een poll aan de lez­ers voor­leggen, kijken wat er uit komt.

    Nog­maals dank voor het testen en je reac­tie! Hoe gaat het met jul­lie nieuwe design?

  19. Leon P

    July 9, 2008

    I like it. The footer’s par­tic­u­larly well exe­cuted, although the tag cloud leaks out of its container.

    A few gripes: some of the fonts are a lit­tle small for me to read, espe­cially around the post meta data and the navbar at the top. There’s also no mar­gin under the ‘pop­u­lar posts’ sec­tion. Oh, and the search box is hid­den in the footer.

    I also like ilt, but I have to agree that it’s a lit­tle too sim­i­lar, what with the Geor­gia, colours, super­scripts etc.

    I’m a bit anti-grids at the moment: I think they can make sites too visu­ally com­plex. I don’t think you need 3 columns for your posts; it detracts from the impact of the actual con­tent. Hav­ing said that, it works really well with the comments.

    Apolo­gies if that came across as a bit of a moan — it is a lovely look­ing site!

  20. eko

    July 10, 2008

    i love this templates

  21. Sander Baumann

    July 10, 2008

    eko — Thank you for your comment.

    Leon P. — Thank you for tak­ing the time to com­ment on my design. I’ve seen the tag-cloud some­times leak out of it’s con­tainer. Look­ing for a way to improve that. Thanks for the mention.

    The find­ings on the small text in the header and the –small– tag in the body text is men­tioned a few times, time to take action! I´ll start design­ing a new header with big­ger and more read­able fonts.

    I´ve tried to keep the menu on the right-side as short as pos­si­ble to focus the atten­tion to the con­tent. I will keep the 3 columns for now, but will take it in con­sid­er­a­tion for future changes.

    No apolo­gies for your com­ments! I highly appre­ci­ate your time in com­ment­ing on my design. Thanks again, (nice web­site btw, book­marked it).

  22. Design Critique: designworkplan » Inspiration Bit

    July 11, 2008

    […] repeat­ing some of those rec­om­men­da­tions here I advise you to visit design­work­plan your­self and check out the dis­cus­sions there, while I will add a few of my comments […]

  23. LaurenMarie - Creative Curio

    July 12, 2008

    I’m glad you found my com­ments help­ful, Sander! I see you’ve already imple­mented many of them. The headers/captions on your images look much cleaner. I like the way you chose to do those.

    You should def­i­nitely be proud of all the hard work you’ve obvi­ously poured into this design. It’s spectacular!

  24. Philipp

    July 12, 2008

    I love it! Great Design Work!

  25. Sander Baumann

    July 12, 2008

    Philipp — Thank you!

    Lau­ren­Marie — Cre­ative Curio — Hi Lau­ren­Marie, thanks for stop­ping by. I appre­ci­ate the help and insight­ful com­ments to improve my web­site and will take every com­ment in consideration.

    I’m so happy that my read­ers will take the time to eval­u­ate the web­site and give their opinion/experise on the design! Thank you all!

  26. Kyle Meyer

    July 17, 2008

    Very nice work Sander, and thanks for the shoutout to Type­sites. It brings on the warm tinglies to know that it has helped some­one with their work. I’m lov­ing some of the ele­ments here, specif­i­cally the head­lines and logo. Meta Sans is such a beau­ti­ful type­face. Keep up the great work!

  27. Sander Baumann

    July 18, 2008

    Kyle Meyer — Thank you very much for your com­ment, appre­ci­ated. Good luck with Asthe­ria & Typesites!

  28. Lucinda - Eightyone Design

    July 18, 2008

    What a beau­ti­ful site. I love the clean, white space teamed with the use of sim­ple, yet very attrac­tive icons and excel­lent exe­cu­tion of typog­ra­phy. Very inspir­ing indeed.

  29. Josh

    July 22, 2008

    Blimey! This is a fright­fully mar­vel­lous redesign! One tiny thing: it might be nice if the links were more obvi­ously links: per­haps a bit of grey under­lin­ing or some­thing might do the trick.

    Nice con­tent too — I’ve sub­scribed. :)

  30. Frank

    August 11, 2008

    Hi Sander,

    Nice weblog, you were obvi­ously inspired by I Love Typography.

    I think you can improve your web­site a lit­tle bit by tun­ing down the brigt­ness of the white font in the footer. A bit more gray would make it eas­ier to read.

    Like Thomas remarked ear­lier, make a choice between Eng­lish or Dutch. Mixed lan­guages will con­fuse the Eng­lish read­ers, I think.

  31. Sander Baumann

    August 12, 2008

    Hi Frank — Actu­ally a great sug­ges­tion to make the text off-white instead of white. I’ll look into the design.

    Agreed on the Dutch-English lan­guage mix. I have had many requests to go for Eng­lish, I will prob­a­bly cre­ate pages for Eng­lish & Dutch.

    Thank you for your comment.

  32. Willem

    September 1, 2008

    Nice Sander, ga je blog in mn reader stoppen..meta sans is altijd leuk en damn relaxed dat Spiek­er­man zich in de dis­cussie bemoeide..redesign Fontanel is almost done, ik geef ons een weekje.

  33. Sander Baumann

    September 2, 2008

    Hallo Willem, dank voor je bericht! Suc­ces met de redesign van Fontanel, ik ben benieuwd.

  34. Matt

    September 19, 2008

    Sander this is a really beau­ti­fully exe­cuted site. A lot of com­ments above have already dis­cussed the strengths that I agree with, but want to add that, as a print designer, typog­ra­pher and typophile, I really appre­ci­ate the clean and sub­tly dynamic page lay­out you have devel­oped here. I can’t help, even when look­ing at web­site designs/layouts, to view them through a print design lens… for the best or worst! I espe­cially love how the footer works. Beautiful!

  35. Sander Baumann

    September 19, 2008

    Hi Matt, thank you very much for your in-dept reac­tion about the redesign, appre­ci­ated. I like the way you look at a web­site like printed paper, in fact that is (what I believe) a proper way to look at a website.

    Did you see this design http://jasonsantamaria.com/articles/explain-yourself/ so sim­ple yet so effec­tive and all of the arti­cle is read­able with­out scrolling.

    Thanks again.

  36. Jason

    November 19, 2010

    It is a nice site, but why say you designed from scratch when it is a mash-up of the iA3 Word­Press template?

    • Sander Baumann

      November 19, 2010

      Thanks Jason for point­ing this out, this arti­cle is dated from Fri­day, June 27th, 2008, over two years ago. Since then a few new redesigns have been adapted for design­work­plan. The lat­est design is indeed based on the won­der­ful iA3 word­press tem­plate. I will update the arti­cle. Thanks again for your com­ment, appreciated.

Leave a Reply