Finally Redesigned!
Friday, June 27th, 2008
After weeks of designing and programming I’ve completed the redesign for my blog designworkplan.com. With the previous design I still felt there where things missing and the readability could be improved. I could not find a standard wordpress template that would match my ideas about the look and feel, therefore I’ve created my own template (the redesign).
With the redesign I’ve put emphasis on the following factors:
- Readability
- Usability
- Type
- Design
The most important factor is content readability, I’ve tried to make the content as easy readable as possible and left out all unnecessary items. My main focus was when talking about design the looks should be according.
For 95% I’m satisfied about the new design, there are still some small things to be adjusted, but this is a ongoing process. I have used the following design items to create the redesign:
- A fixed grid style theme, based on 940 width with 3 columns. Left and right column 180 width and the content column 540 width.
- A customized homepage with only the latest story as a featured post, below that 9 earlier posts.
- A big high contrast footer containing useful information like topics, tag cloud, search and more.
- A big type header & big type date.
- A list of most popular posts from the website and the latest posts at the right sidebar.
- A comment style in grid with the content (maby also add the gratavar).
- Trackbacks are below the comments (where they belong).
- Header image and several other text images are created with the beautiful type Meta Sans by Erik Spiekermann..
Thank you
I’ve learned from you guys & girls, no particular order:
iLoveTypography, Creative Curio, Inspirationbit, David Airey, Thomas (Fontanel, thanks for testing!), Brian Gardner, WpCandy, AlphaBlogDesigns, Jon Tangerine, TypeSites, Vandelay, Adii, SmashingMagazine , Designers who Blog, Six Revisions, Just Creative 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?
June 28th, 2008
Sander, it is beautiful! 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!
June 28th, 2008
Hi Sander! Love the re-design, the typography is styled very nice and I love the layout. I would however agree that a nice rollover (maybe turns to red or black, text white) would look really nice. I think that would complete your re-design. Great job and keep up the great work!
June 28th, 2008
cat Thank you for your comment! 1) Sounds good, indeed this makes it more a button. I’ll get right onto it. 2) Good idea. Thanks again for your opinion, appreciated.
adelle Glad you like the choice of typography, I’ll change the buttons to a rollover. Thank you for your comment! Much appreciated.
June 28th, 2008
The design is really great bud!
I love the minimalistic nature thereof, along with (what is obvious) an extreme passion for the typography! Really well done!
June 28th, 2008
Hi Sander,
Very nice switch from the previous version. How many weeks were you working on it?
Be careful with the month beside the date for each blog post. There’s an overlap which I don’t think is meant, as it hinders legibility. 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 people to make out I think.
I really like how you differentiate your own comments from the rest. Subtle, yet easily recognised. Great job.
June 29th, 2008
Adii Thanks! Appreciated remarks on the minimalistic style in combination with typography, this is how I meant it to be.
David Airey Thank you for your comments, I see what you mean with the month & year overlapping the date, I might push the month a bit lower to increase the legibility. I’m working on a mouse over for the navigationbar, hopefully will get that done asap. I’ve tried to make the text besides the logo part of the logo to indicate what my site is about in a few words (Dutch and English), might put it up in caps to make it more readable. The redesign took me aprox 3 weeks (night time). Thanks again for your in-dept comments, appreciated!
June 30th, 2008
You’ve done a great job, Sander. Like David, I’m impressed with how you differentiate your own comments using the asterisk—very simple and effective. Like the logo too.
Just several small things: the link (in Safari at least) “SEGD.nl 84 RSS readers” isn’t in blue (as are the other links); I’m also wondering whether the title for each post might look better aligned left, rather than centred (maybe not). And the typogrify plugin would fix those quotation marks. Would also love to see a link to the old design.
Congratulations on the redesign.
July 1st, 2008
Johno Thank you for your in-dept comment about the redesign! I’ve removed the black link for the RSS Readers, but might the change complete 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 balance with the ‘segd’ header centered, might experiment with it a bit more. At the moment I’m running the typogrify plugin for the & mark, will set the quotations aswel, thanks for the mention. I will put up a screenshot from the old design in the post.
Much appreciated comments! Thank you and good luck with iLT.
July 2nd, 2008
Your blog looks really good. Love the simplicity of the design and all the white space— it really showcases your use of typography. I’m not experienced with CSS (I usually go as far as mocking up my layouts in Photoshop and that’s about it!) but I do enjoy looking at awesome design!
July 3rd, 2008
Finally! (for my comment that is).
Love: the drop cap, the block quotes, the small caps for emphasis, the use of line (dotted and in the section titles), giant date, post meta, grid, typographic hierarchy, details like using a red asterisk for your comments
Needs work:
- to me, people’s comments are at least equally important as who said them but by making the comment 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 happen to it. It fits great on the home page and I see you kept it the same for the article page, but I don’t know that it works so well the way it is here.
Overall, I love this design and I’m sure Johno will feature it in the next collection of excellent web typography
Edit: for some reason I didn’t get taken back down to my comment when the page reloaded. This makes me think my comment was eaten by Akismet. Perhaps it’s low on your list of fixes, but maybe you can look into it? You may just be missing a comments anchor.
Edit 2: looking at some of your other posts, I see you’re doing a similar image caption style as iLT. Using a pixel font for the text would help with the readability at that small size. Style-Force has some free ones.
July 5th, 2008
Katy - Thank you for your comments about the design, much appreciated! I’ve enjoyed reading about your purse, it gave me a idea about a future post, thanks and I’ll keep you posted.
LaurenMarie - Wow! First off all thank you very much for your time and in dept comments about the redesign!
Well spotted! I’ll fix this asap, thanks for the mention.
- You are completely right! I’ll set the text of the comments in black, the same color as the article body text.
- I’ve moved the brace in all directions so far, I might make it a bit smaller to give the header a bit more air. I’ll dive into that.
- iLT collection of excellent web typography, I rather think your website will be featured there
- Edit: Your post was not eaten by Akismet, I’m missing the comments anchor in the templete
- 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. Personally I really like the stripes above the images, this focussus your attention more on the image.
July 5th, 2008
Good work!!!
July 7th, 2008
man, i love this! Great work.
July 7th, 2008
With all due respect, it’s a lovely site, but the color scheme and typography (plus the curly brackets for the date) are far too close to iLT’s website. Honestly, dropping the grayscale + red theme would make a world of a difference.
July 7th, 2008
I simply love it. Found it on BWG. I have a purely semantic suggestion though. Unless you have style the EM tag for something specific, I’d suggest changing the SPAN CLASS=”CAPITALS” tag to EM. Useful for SEO and accessibility. Otherwise, looks very nice. The typography was an excellent choice.
One extremely MINOR feature that I liked was the red asterisk in the author comments. I prefer being able to easily notice where the author commented.
Thanks for the pleasure view. Cheers.
July 8th, 2008
Diogo & jayhan - Thank you!
Andrei - Thank you for your comment. The inspiration and ideas for the theme came from many different resources. I designed the date with the bracket myself and was not intended to look like iLT. I will take this notice very serious and might change a few things. Thank you for your honest 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 & accessibility of the website. Thank you for the link to the semantic mark up article, much appreciated. Good luck with your website.
July 9th, 2008
Hi Sander,
Zie dat het goed gaat met de site, altijd leuk om de comments te zien groeien nietwaar?
Een ding wat me wel opviel en wat ik even wilde meedelen is dat je af en toe nogal springt in taal. Zoals ik het nu zie zijn 80% of iets dergelijks van je bezoekers internationaal.
Is het zo dat je vanaf nu alles in het engels doet? Zou dan even de About pagina ook in het Engels maken
Verder is het all good! Net als de anderen vind ik de Asteriks een goede toevoeging
July 9th, 2008
Thomas - Ha! Je hebt helemaal gelijk! Ik krijg verschillende emails of mijn blog niet in het Engels kan.. Dat zet je toch aan het denken. Ik ben er nog niet helemaal uit, wellicht een poll aan de lezers voorleggen, kijken wat er uit komt.
Nogmaals dank voor het testen en je reactie! Hoe gaat het met jullie nieuwe design?
July 9th, 2008
I like it. The footer’s particularly well executed, although the tag cloud leaks out of its container.
A few gripes: some of the fonts are a little small for me to read, especially around the post meta data and the navbar at the top. There’s also no margin under the ‘popular posts’ section. Oh, and the search box is hidden in the footer.
I also like ilt, but I have to agree that it’s a little too similar, what with the Georgia, colours, superscripts etc.
I’m a bit anti-grids at the moment: I think they can make sites too visually complex. I don’t think you need 3 columns for your posts; it detracts from the impact of the actual content. Having said that, it works really well with the comments.
Apologies if that came across as a bit of a moan - it is a lovely looking site!
July 10th, 2008
i love this templates
July 10th, 2008
eko - Thank you for your comment.
Leon P. - Thank you for taking the time to comment on my design. I’ve seen the tag-cloud sometimes leak out of it’s container. Looking for a way to improve that. Thanks for the mention.
The findings on the small text in the header and the -small- tag in the body text is mentioned a few times, time to take action! I´ll start designing a new header with bigger and more readable fonts.
I´ve tried to keep the menu on the right-side as short as possible to focus the attention to the content. I will keep the 3 columns for now, but will take it in consideration for future changes.
No apologies for your comments! I highly appreciate your time in commenting on my design. Thanks again, (nice website btw, bookmarked it).
July 12th, 2008
I’m glad you found my comments helpful, Sander! I see you’ve already implemented many of them. The headers/captions on your images look much cleaner. I like the way you chose to do those.
You should definitely be proud of all the hard work you’ve obviously poured into this design. It’s spectacular!
July 12th, 2008
I love it! Great Design Work!
July 12th, 2008
Philipp - Thank you!
LaurenMarie - Creative Curio - Hi LaurenMarie, thanks for stopping by. I appreciate the help and insightful comments to improve my website and will take every comment in consideration.
I’m so happy that my readers will take the time to evaluate the website and give their opinion/experise on the design! Thank you all!
July 17th, 2008
Very nice work Sander, and thanks for the shoutout to Typesites. It brings on the warm tinglies to know that it has helped someone with their work. I’m loving some of the elements here, specifically the headlines and logo. Meta Sans is such a beautiful typeface. Keep up the great work!
July 18th, 2008
Kyle Meyer - Thank you very much for your comment, appreciated. Good luck with Astheria & Typesites!
July 18th, 2008
What a beautiful site. I love the clean, white space teamed with the use of simple, yet very attractive icons and excellent execution of typography. Very inspiring indeed.
July 22nd, 2008
Blimey! This is a frightfully marvellous redesign! One tiny thing: it might be nice if the links were more obviously links: perhaps a bit of grey underlining or something might do the trick.
Nice content too — I’ve subscribed.
August 11th, 2008
Hi Sander,
Nice weblog, you were obviously inspired by I Love Typography.
I think you can improve your website a little bit by tuning down the brigtness of the white font in the footer. A bit more gray would make it easier to read.
Like Thomas remarked earlier, make a choice between English or Dutch. Mixed languages will confuse the English readers, I think.
August 12th, 2008
Hi Frank - Actually a great suggestion to make the text off-white instead of white. I’ll look into the design.
Agreed on the Dutch-English language mix. I have had many requests to go for English, I will probably create pages for English & Dutch.
Thank you for your comment.
September 1st, 2008
Nice Sander, ga je blog in mn reader stoppen..meta sans is altijd leuk en damn relaxed dat Spiekerman zich in de discussie bemoeide..redesign Fontanel is almost done, ik geef ons een weekje.
September 2nd, 2008
Hallo Willem, dank voor je bericht! Succes met de redesign van Fontanel, ik ben benieuwd.
September 19th, 2008
Sander this is a really beautifully executed site. A lot of comments above have already discussed the strengths that I agree with, but want to add that, as a print designer, typographer and typophile, I really appreciate the clean and subtly dynamic page layout you have developed here. I can’t help, even when looking at website designs/layouts, to view them through a print design lens… for the best or worst! I especially love how the footer works. Beautiful!
September 19th, 2008
Hi Matt, thank you very much for your in-dept reaction about the redesign, appreciated. I like the way you look at a website 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 simple yet so effective and all of the article is readable without scrolling.
Thanks again.