Redesigned

by Jin, 02-28-10 // 22 comments

This weekend I launched the redesign of 8164.org. The old design served me well for the past year and half. The main reason for the redesign isn’t due to boredom with the old look, but more for functional reasons. The old design was geared towards emphasizing the most current article. That’s why the old homepage only showed the excerpt of the latest post, nothing else. In the past couple months I took a break from posting. During this time, I found myself reading some great blogs with short posts. There were times when I felt compelled to write some short entries here too, but the old design wasn’t set up for that. If I posted 2-3 shorts a day the homepage layout just didn’t make any sense.

What’s New

Inspirations

How and what I write, has a lot to do with what I read. Content wise, I’m a fan of Coding Horror and Daring Fireball. I like great link blogs such as Kottke and Waxy links. Going forward, I see myself posting a mix of long and short posts. I no longer have enough free time to write lengthy posts full time.

inspirations

Design wise, I’m influenced by Artasiapacific Magazine(print version) and Hirshhorn Modern Art Museum.

I really like the grid layout of the AAP magazine and its use of bold imagery mixed with type. As for the Hirshhorn Museum, the inspiration came not from its works of art, but how they’re being displayed. There’s so much space around a piece of art, and sometimes a showroom contains a single display. Whenever I look at the exhibits there, I get this airy feeling and am able to pay full attention to what I’m looking at without any distractions. The spatial arrangement feels just right. That’s another aspect I’m hoping to accomplish with the new blog design.

Minimalism?

“Simplicity is about subtracting the obvious and adding the meaningful.”

— John Maeda

Undoubtedly, people would describe the new design as minimalistic. I probably would too, for lack of a better word. I’ve always been a fan of such designs, I also feel it reflects my personality. However, to me, minimalism describes a thinking process, rather than an end look. I didn’t have a design visualized when I started brain storming, but rather I tried to identify the elements that were absolutely needed. The goal of the design is to have readers concentrate on the writings without distraction. The graphical elements are there to serve the hierarchy of importance of the content. To me, designers’ personal sites should reflect their unique tastes.

Typography

The typography treatment in the old design was terrible. When I put up the site in 2008, I didn’t pay too much attention to proper formatting. This time, I tried to fine tune some details.

The hardest, and also the most time consuming part in the redesign process was finding the right font for the site/article header, and the right method of implementing it. I feel choosing a font for personal use is an intimate experience. I have many favorite type faces to use when I create web projects. However when it comes to my own site, I feel the font choice should definitely give people an idea of who I am. I’m not a serif type of guy, even though I love serif fonts, especially the slab kind. I’m definitely not Baskerville Italic despite what this old guy says.

I’ve narrowed my font choices to Digital Sans, Orbitron, Geogrotesque (suggested by Sander), and Helvetica Neue.

For the time being, I’m using Helvetica Neue(Helvetica, Arial for fallback). I’m not entirely happy with the current web font replacement methods out there. Most likely I’ll end up using @font-face, however due to various hinting support, many fonts still look horrible on Windows OS. I feel even though tremendous effort has been made to improve typography on the web, we’re still so far away.

Code

I wrote the new theme in HTML5 and some CSS3. I plan to experiment with new HTML5 elements in the future posts. (e.g. <canvas>,<video>,<audio> etc) I also wrote the new HTML layout in a way that allows me to customize individual posts further than just changing the background image/color. This particular entry uses the default look, without customization.

There are still some minor CSS formatting issues with Internet Explorer 7 & 8. Although I don’t support IE6, I still try to make the site somewhat consistent, but it doesn’t need to be pixel perfect. I also need to go back and tweak some of the older posts since they were customized for the old theme.

Finally…

Thank you for reading. And also thanks go to my online friends who provided me with valuable feedback during the redesign process. Overall I’m happy with the design. I feel it’d allow me to write posts of different natures: long and short, text heavy and photo showcase.

I’d love to hear what you think of the redesign. Feel free to drop me a note in the comment section.

22 comments

also feel free to contact me on twitter or via email
Alex Rozanski 02-28-10

Love the design and a great first post with the new theme! You’ve obviously put lots of work in and it’s definitely paid off!

However one suggestion; for the comment section I’d perhaps have text in each of the boxes – “Your name”, “Your email”, “Your site” in light grey or something – with no text there it made me have to stop and think for a few seconds, even with the icons.

Janko 02-28-10

I am glad I have the opportunity to read new posts from you. The design is absolutely awesome, screenshots were fantastic and it’s even better live. You really nailed it.

The photo is fantastic :)

Paul Randall 02-28-10

I really like the new design. It’s a thoughtful, considered layout and doesn’t feature any of the current design ‘fads’ which are become all too common at the moment.

And I love this quote. Never heard it before, but it’s my new mantra!

“Simplicity is about subtracting the obvious and adding the meaningful.”

— John Maeda

Jin 02-28-10

@Alex, I agree. I haven’t added <label> for the form yet. That’s something on my list of to-dos. I also want to add more interactive elements to the comment form section (e.g. preview, edit etc). That’d take a bit more time. But they’re coming.

@Janko, Thanks! Your lovely redesign launch really motivated me to get mine out of the door. Thanks!

Nathan Bowers 02-28-10

Love the new look. Crisp, clean, readable, serves the content. I’m not a big fan of blogs where each post is its own art directed masterpiece, but I do like seeing fresh bold images in each post, and you look well set up to do that.

Suggestions:

1) The whole thing looks better when I bump up the text size two notches in Firefox. It’s more readable that way. Feels like there are too many characters per line right now at the default size. Those two notches also make the side by side columns more readable.

2) Increasing font size would also make it much more readable in mobile browsers.

3) On the homepage there’s no way to know that you’ve posted something new without scrolling down.

Overall, love the new look, the individual posts look great.

mahalie 02-28-10

Really like the two column divs, I’ve been wanting to implement something like this a long time for readability.

Kyle Weems 02-28-10

This is a great redesign, Jin! It’s clean, minimal and crisp. There’s a sort of glossy feel to it that’s hard to explain. Very nice.

If I had to offer any criticism, the fields in the comment form could benefit from some sort of hover text or other fallback support for people that aren’t good at guessing what the silhouette is supposed to represent.

Stefan Plattner 02-28-10

I really like the new design and it’s aligned with the image of your personality I have in mind.

Seeing how the two column layout and the pictures perfectly fit in the whole theme is a treat to the eyes.

If I had to give a name to the design, I’d call it “Art Gallery Catalogue.”

Jeff 02-28-10

Looks great! I like all the details you’ve put in the new design, like the double-column opening paragraph, the link styles, and the fact that you use icons for the comment form (true minimalism at work).

Jin 02-28-10

@Paul, Mahalie, Thanks!

@Nathan, I bumped up the size just for you. I too felt with the smaller size, there were too many words per line, not optimal for reading given the increased site width. As for the homepage, I’m not sure if there’s a need to highlight the latest, since the date stamps are there. But I may toy with the idea of highlighting a “Featured” post. I’m still debating on whether I should have a mobile version of the site or not. I like your blog’s mobile theme, very easy to read.

@Kyle, thanks. I feel the comment form needs a lot of work still. It doesn’t remember the hide/display state yet. (e.g. after posting, it closes since the page reloads). I may look for an Ajax solution.

@Jeff Your site design is one of my favorites. It’s timeless. I feel there’s a shared commonality between ours. In fact, I plan to use a warm, cross-processed look for my future photos like yours.

Coov 02-28-10

I second the “double-column opening paragraph” comment. That is very cool. Keep up the good work. You continue to remind me how much I suck at design.

KrazyCeltic 02-28-10

As I mentioned on Twitter, I love the redesign. Good call on implementing the font size adjustment suggestion.

Regarding the double-column approach in blog posts, while I appreciate the aesthetic I am often frustrated by the lack of usability — having to scroll up and down if on the small screen of my laptop instead of letting my eyes do most of the work. Your implementation of restrained double-columns in this post was perfect.

Teck Hua 02-28-10

I like the simplicity of your new design…it conveys a super clean, no nonsense feel.

My 2¢ worth of suggestion:

1) Perhaps you might want to consider having a stronger “identity branding” in the masthead area. I feel it’s not obvious enough only with the small logo; apart from the home page it doesn’t “shout” 8164.org or whatever identity you wanna project.

2) Some of the background colors may be a little too subtle; on my screen (at office) it’s hardly noticeable. How about playing around with slightly intensive gradients? I’m assuming you do not intend to have background image for your pages.

Eventually, as you roll out tweaks/improvements, 8164.org gets even better!

Alex Charchar 03-01-10

You know my feelings on this beauty, but I wanted to say it again — nice work!

I think the larger font size is a nice thing to see.. After the geocities era, when over-sized fonts were the norm, we all got nervous and began using smaller and smaller sizes … but seeing the size you’ve used here, with the white space that wraps it, it works so nicely..

oh, and my vote is for Geogrotesque .. im normally not a fan of those kind of faces, but i think it’d be gorgeous here :)

Victor Boba 03-01-10

Awesome redesign there Jin. I’m a developer and don’t have the depth of design capabilities that you have, so a lot of the love for Typography and such I just don’t get.

But I do know that you’re one of the best at design and have always enjoyed all your works.

Dmitry 03-01-10

Great redesign Jin. Clean lines, clear structure, plenty of whitespace, and absolutely no clutter :)

Jin 03-01-10

@Coov and KrazyCeltic, I like the multi-column. But I’d use it carefully. As pointed out, if the column height is too long, it’d force people to scroll down and up, not too user friendly. I’ll continue to use new CSS3 features, where they’re appropriate. I do not believe in using new features forcefully, for the sake of an exercise.

@Teck, I actually down played the branding of the site on purpose. The goal is to feature the writings, not the site itself. As for the background color, it’s an issue with aging LCD monitors.

@Alex, thanks for all your help as always. I’m really looking forward to your site relaunch!

@Victor, Dmitry, thanks! It’s an on going process. There are still plenty stuff for me to tweak on the site.

Aaron Halford 03-02-10

Jin, this redesign is quality work in minimalism. The site structure just works so for the web. We need more sites redesigned this way – focusing on clarity of content and abstaining from clutter, widget, and advertising madness.

I don’t have any other specific compliments that haven’t already been said, but I will inject one thought as you pick your font stacks…

“Don’t forget about us Linux users. We like pretty fonts too.”

Jin 03-03-10

@Aaron, thanks! Could you email me a screen shot how this page looks like on a Linux box? The fallback for Helvetica Neue is arial on Linux, which you should be able to see. When I use font-face later, font appearance should be the same on other platforms.

Steven Clark 03-04-10

Very nice work Jin… I think its all been said above already; its impressive work.

Russell Heimlich 03-07-10

Nice redesign. I’m glad you used the CSS3 multicolumn properties for short text. Most places that I have seen use this are for long articles forcing you to scroll up and down as you read through the article. Columns might work well in print, but they have limited use on the web.

Jin 03-07-10

@Steven, thanks.

@Russell, thanks. multi-col definitely should only use on short text. In fact, on iphone the height is even shorter. I don’t ever plan to use multi-col on text longer than what I’ve used here.