Nanyate?! Gets A 2009 Redesign

After designing, coding and scrapping 2 layouts, I finally settled with this new theme, which I call “Zen”.

Searching for a personal brand, an identity

It was quite a challenge coming up with something new. With my job now related to the Singaporean social media scene, I wanted to create some sort of identity for myself and for nanyate?!. I’m not sure about professional web designers, but I always get stuck when it comes to creating a brand for myself. The stress of wanting to be perceived a certain way, and the questioning the accuracy of my perception of myself is all too overwhelming. And of course, I still have my readers from my previous political blog, and those who just stalk my site for new designs, and those who’s become online friends with me since my first blog in 1999 – with the amalgamation of such a diverse audience, I no longer knew how to cater to everyone’s liking.

So for the first redesign, I illustrated an Edo Fuurin – Edo-styled windchime – ornament as nanyate?! logo.

edo windchime design

But it was too contrived. It does reflect the anime otaku in me but that otakuism doesn’t quite define me, and more importantly, what I write about. So it was promptly scrapped.

Then I remembered what my rhetoric professor would say when we got stuck with essay topics or research: “when in doubt, keep it simple”. So, came theme “minimetamorphasis”.

minimalist design

I was initially proud of this theme, since minimal layouts that rely on typography and a solid grid system aren’t easy to create. But when I showed the prototype to some friends, they all said that it was just too blah.

Blah?! There’s no way I’d want to come off as a boring person, with a boring site. So it too was scrapped.

And suddenly, it hit me. Why did I need to go through such great lengths to design something so different than what I usually design, just because I wanted to have a more permanent identity? I mean, it’s not like I didn’t have an identity in the first place – I just didn’t consciously think about it. So came Zen, a remix of my previous theme – just louder, bolder with more SEO and Web 2.0 than ever before!

So What’s New?

Search Engine Optimized Coding

Well, it’s not like I never had meta tags, or didn’t search engine friendly URLs before, but I just never paid too much attention to the nitty gritty. And by that, I meant the coding.

Some examples of the SEO coding including paying attention to the H1 – H6 titles and content frontloading. Search engines give priority to the words used in H1 – H6 codes, that’s why you should always make sure to use H1 – H6 for titles instead of [span] to customize your headings. Search engines, like humans, will also read your code from top to bottom and give priority to what you put on top. So you should place your content code on top, and your menu and/or sidebar at the bottom.

To see how your site looks like to a search engine spider, visit SEO-browser.com.

Relevant, Targeted Content

I could write a book on my life, add 300 fanlistings and rant about my lunch. Unfortunately, no one would actually bother to read it. The only people that would are probably only the new visitors. They want to know what this site is about, and who the owner is – and they want it fast. So a short biography should suffice – what I do for a living, where I’m from, what I stand for. And with that in mind, I re-wrote my about page.

Typography

What’s branding without font? So I scoured, and searched, and sunk into the depths of Internet to find that one true font destined to take Nanyate?! to the next level only to end up with the pre-installed Apple font, Kozuka Gothic Pro Extra Light. (If you have the font installed, I use it for my title tags. If you don’t, it’s the font on the nanyate?! logo.)

I am exploring the use of sIFR (this script that converts text into flash) so that everyone can read my site in Kozuka, but haven’t had time play around with it yet. Will get to it when I can scavenge for time.

Lifestreaming (coming soon)

I’ve become very busy with work lately, so Twitter and his bigger cousin, Tumblr, have become a more effective avenue for me to stay connected with people and express my opinions. As a result, I’d like to have them play a more central role on nanyate?!.

And then the incredibly hot talented dude called YongFook developed exactly what I needed: a lifestream to allow me to stream all my feeds into my blog. (Although, I have yet to play around with the script.)

Well, I guess you could say it’s the epitome of narcissism to stream your entire life on your blog. But I prefer to see it as the epitome of Web 2.0 social networking, where your blog is now more than just a place to express your opinion; it’s now a place to display your life, reach out and connect with others.

Still Work in Progress

So I hope you enjoy the re-invented theme and content, and my mini pitch SEO and social media. “Zen” is still on beta release, as there are still some bugs that need ironing out – especially for my arch nemesis, Internet Explorer 6. The navigation menus for the sub pages are also in dire need to be more user-friendly. And I also need re-write quite a bit of content. There a few more things I’m exploring to do to this site, but it’ll have to wait until I have time to spare.

So, look out for those changes in the near future, and do let me know what you think of the new design and the new direction nanyate?! is headed for. If you’re a web designer, do share your experiences on how you developed your brand online.

(Sorry, for all the grammatical errors. Will fix it in the morning).


  • http://www.ofrainbows.com Maria G.

    Just had to make my mark first!

    From our Gmail chat, you know that I did like the first re-design attempt. Your last pink and blue design was one of my favourites (I say ‘one of my favourites’ because this one has surely claimed a spot!), so to see a similar incarnation off that design was a pleasant surprise. However, I do see a huge leap in growth in terms of your designs.

    Over the last 6-9 months or so, I have lost my own motivation to blog, well, rather blog in the personal manner that I have for many years. Initially I thought it was a privacy issue, but I realised it was the desire to shift into a writer whose focus lay in what I do for a living. Unfortunately, I am hindering this plan with lots and lots of overthinking.

    I guess this is my way of expressing gratitude, as it takes a friend to push another in the right direction. You did it simply by launching this new design and letting us readers know of how you re-focused the site to go with your career and (now) identity.

  • http://pocketcultures.com Liz

    I’m no web designer, but I think it is gorgeous. And totally suitable for a working girl 2.0.

  • http://www.takoyaki.org Barron

    I love the design! The bamboo is awesome.

  • http://twentyfourcarat.net Katy

    Hey Ivy, I love the new look of your website… you’ve done an awesome job branding it! I’ve been meaning to redesign my blog too but keep on putting it off. I’ve spent hours and hours of different designs and then I get sick of them so I can’t make up my mind. Should I go minimalistic? Grungy? Back to the old web 2.0? Ahhh.

  • http://michaelpark.org Michael

    I like that minimal design a little better. However, this one is pretty.

  • http://simply-precious.net Simply Precious

    Oh man, I love this design!!! Hahah, as for the SEO tip, wow, thanks! I need to use that when I develop pages for the company I work for….. Hahah. I don’t need it for my site because I don’t want it to be in search engines. =P

  • http://silvercpu.com/blog Lissy

    It’s perfect! Very “you” :)

  • http://jaejones.aigoo-chamna.net/ JJ

    Very nice and clean! I’m envious of people with mad web skillz; my own mostly result from dabbling and no real study.

  • http://momo4ever.com Michelle

    love you new template, especially the green bamboos!!! :)

  • http://aigoo-chamna.net Tara

    I think this looks very nice! <3 Great job!

  • http://www.everdestiny.com Destiny

    Beautiful new design and revamp for your site!! I know what you mean by trying to establish an identity for your website. I think mine is still ongoing, but I always love your bamboo sticks!!!

  • http://amourchaleur.com Dayna

    I love this new design especially the bamboo, they look delicious (I’m a panda, remember?) šŸ˜‰ Did you draw that? The shading looks very nice as well. Well done!

    I don’t really think about how to develop my site online though, I just go according to feelings. :p

  • http://its-olivia.com Olivia

    I really like this! It has a premium feel, like it is the website of or made by a professional.

  • http://www.teddy-o-ted.com teddY

    Omigosh Ivy, you’ve outdone yourself again! This theme really grabbed my attention – when the page first loaded my breath was immediately taken away. I’ve seen just too many blocky three-column themes out there, but you’re is such a breath a fresh air. The minimalistic layout, coupled with transparency, sets your layout apart from the other Jap-themed and 3-column themes out there. Two thumbs up for the effort!

    What makes this theme even more impressive is that you’ve actually designed two mockups before settling for the final one – and I can see that it’s a synthesis of the two dumped layouts. You’ve got the minimalistic element from the plain white theme in your typography and layout, and you also incorporated Japanese culture from the otaku-themed layout. It’s immediately obvious that you’ve gave this theme much thought before finally releasing it – and that’s exactly what design is about. Design is intentional, and is not only for visual appeal – it also represents the meticulous arrangement of content and good typography. You’ve just hit a bingo button, Ivy :)

    If you don’t mind, I’ll be linking your theme in a blog entry due in the near future.

    p/s: Happy early Valentine’s Day!

  • http://dollprincess.org Melle

    twitter and tumblr are cousins? lol I just thought it’s plurk and twitter., lol they’re both the same,.. the only difference is that, the other one has karma points and the other one has none.. =(

    the ornament on the 1st layout was very oriental.. very japanese..

    ps: if ever you’ll visit my blog.. the password for my post is: whatcanmelsay

  • http://justshen.com Shen

    The design is lovely, as always. You did a great job on this one as well as the others you didn’t choose to use.

  • http://riyuu.org Mimi

    I love this design, it’s very lovely, and it’s definitely got a taste of Japan to it šŸ˜› The wind chime one was nice too.

  • http://www.rin-wendy.com Wendy

    I love the bamboo and how it complements the color scheme :)

  • http://www.chewak.com Lisalicious

    wow impressive designs…

    I love that ‘tanglung’ so cute !!

  • http://blog.ditz-revolution.net Helga

    Well this definitely looks great!

  • http://nanyate.com Ivy

    @teddY: Whoa! Thanks a lot for the review. It definitely took a lot out of me to design this layout. Those two mockups are actually converted into HTML already. And the otaku one has even made it to the production stage (ie, it already on my WordPress as a theme.) So, I may release them as themes. We’ll see. Coding for other people a little different than coding for myself. Haha.

    @Melle: Well I think of Twitter and Plurk as brothers, since they function the same way except without the Karma points. I think of Twitter and Tumblr as cousins, since they both still belong to the general category of microblogging, but with some differences in that Tumblr is less social and has no word limit. And thanks for the password.

    @Dayna: Haha, I wished I drew it, but no. I bought a brush set and re-illustrated parts of it to suit the site. But I did shade it. šŸ˜€ Yes, I remember that you’re a panda. Please refrain from eating my site when you’re hungry, okay? šŸ˜€

  • http://shadesofme.org Brandy

    I love the new theme! :) It’s so fresh. You’re too creative, it should be illegal. heh. šŸ˜›

  • http://diaryofchanel.com chanel

    The new design looks great. I love the functional aspects of the upgrade. Clean & unique. Thanks for the birthday wishes as well.

  • http://hellorathy.com Rathy

    Totally understand what you mean. I’m so picky about what I design for myself. It’s so much harder because I’m more critical of it. But hopefully I’ll pin down something that will really represent me.

    Been doing some SEO layouts at work lately too. >_<

    And glad you found me after all these years. Haha. o_O

  • http://blondish.net Nile

    Re-design for branding is fun. The red lantern actually reminded me of the red light hanamachi district in Memoirs of a Geisha.

    You could always theme your site with the alternate ones you created. They are very nice and not to be scrapped. I have gotten into Twitter a lot and it has been great. I have found a lot of great connections and some commissions for web design. I am hoping to drive more into attracting business to my small webhosting biz. It might take actual monetary investment to get it kicking again.

  • http://nanyate.com Ivy

    @Rathy: I’m so glad I found you too! Would’ve been such a waste if you’ve left the internet forever since I am a big fan of angel-goddess.

    @Nile: Multiple themes is interesting, but since I’m trying to get people to associate me with a certain look and field, I felt I should design something that isn’t about to be too easily replaceable hence the permanent typeface for my logo: Kozuka Gothic Pro, and the color scheme which is basically the same as my previous layout. šŸ˜€ I wish you all the best your webhosting business though! :)

    @JJ: No way…. you have maddd skills at writing & designing! *Envies* I can’t write to save my life! T___T

    @Michael: Figured you’d say that. Hahaha. I think the minimal design appeals more to the boys. Perhaps I should just release it as a theme. Hahaha.