Design by Satori – Web Redesign – Part 1


It’s been almost a year since my last redesign of “Design by Satori” and it’s time for another one. By the way -I highly recommend redesigning your site once per year or at least updating chuncks of text in your web copy at least 4 times per year. This will maintain Google rankings not to mention the nice surprise you will give your web viewers – showing that you care about your site and the way you present it to them.

I have decided to share with you the pain of redesigning a website, especially if you are like me (looking at tons of websites for inspiration, trying something, don’t like it and start all over again).

Well the present site was a bit too dark. Here’s a shot of it here:

In fact, here are all my versions since I decided to redesign the site every year (sometimes twice):

Version 1

Version 2

Version 3

The structure of the present site is sound and does not contain a bit of tables. Well…almost. I used 2 tables when I encased the “Contact” forms, casue I was too lazy to figure it all out. The rest of the site is all developed in CSS. In fact these are the “weapons of choice”:

  • CSS – using Notepad as editor
  • FrontPage – also used as editor (I know it’s old and few use it but I’m so used to it, I just can’t get rid of it…)
  • Dreamweaver – here and there (mostly there…)
  • Photoshop CS4 – there are no words to describe this great piece of software; after 7 years of using it I still feel I barely scratched the surface of its capabilities.
  • My trusted Canon EOS Rebel XSi – to take great photographs
  • Photomatix – a piece of software I just bought and played in HDR a couple of times – I like it so far

What don’t I like about the site? Not very many things but the overall comments were: “It feels like a socialist propaganda website…the red stars next to your menu items do not help either” or “It’s nice but too dark. If this site represents you…well, then you must be trubled…”

Based on this I started the work and here’s what I came up as a battle plan:

1. Copy – I will use the same text, but replace large chunks of it and make it more as a freelance site as oposed to a design agency site. The “Main Page” needs to be re-writen and make it a bit more whimsical and not so corporate. The more I was reading the text the more I felt like another corporate drone3 and wondered how I even conceived that dry copy.

I re-wrote the entire “Main Page” and dipped into my “writer ego” with new copy. Once I finish the site, of course you’ll see it and understand what am I talking about here.

2. Structure – I will maintain the structure and change only the main page, creating more “Calls to Action” and emphasize on the ‘Portfolio” page. I will also use the 960 grid for websites, which I like and I think it makes sense, accomodating all browser rezolutions starting with 1027 x 768. For those who have less than that – sorry, that’s where the web rezolutions are for more than 87% of the web surfers so I”ll have to cater to them.

I also needed more links for possible clients to contact me via my social edia accounts (Twitter, Facebook, Linkedin, Flickr, etc.). OVerall – I really need to up the number of links from this main page to all the others (within the site), plus to this blog and hope to climb in Google page ranks.

3. Design – I wanted something cleaner, less dark but artsy enough that my designer skills still can shine through. I decided on a white background with eerie clouds like here:

I also decided to repeat the theme (of dark blue clouds) in the “footer” to grab attention. The header will contain a menu with simply <ul> items instead of sprites coded in CSS to display “cool” but unnecessary graphics. So – text links – best for search engines.

I love smart billboards so I decided to include one above the fold with changing images very 3 seconds (enough for viewers to see it, allow just enough time to think and move on to the next one). I am still having some problems showing PNG transparency in IE but I have some ideas how to circumvent it. Of course Firefox displays it correctly, but I have no time to whine about the IE shortcomings.

For font I decided on ‘Arial” throughout the site. I think it looks cool (especially in headers) and people are used to it.

4. Development – Of course I will stick with CSS (nothing beats that) and hopefully I will learn a thing or two about using it in forms. I still use some CGI scripts with my forms and getting rid of an old and used thing it’s a bit hard, espcially when I have so many balls in the air.

So that’s the plan. I have no time limit on this project. I work on it whenever I have time, between the blog, clients, web promotion, reading marketing and design books and working on a joint venture with another gentleman for a brand new game.

In part 2 of these series I will delve more into the design and development part, so stay tuned.


 Claudiu Geanta is a serial entrepreneur and founder of Design by Satori Inc. & Satori CG Inc.. He helps businesses promote their presence on and off line. He is also an accomplished web designer, book writer and photographer. You can follow him on Twitter.
Read more from this author


, , , , , , , , ,

  1. #1 by Cialis on March 10, 2010 - 7:07 am

    bKCOq6 Excellent article, I will take note. Many thanks for the story!

You must be logged in to post a comment.