A Revolution in My Web Design Philosophy

As some of you may have noticed, my site structure has changed since the migration to the new servers. I streamlined the pages in preparation for my new theme; a new theme that is going to be radically different from anything I have ever designed.

Not that it’s going to look revolutionary or anything; it’s my design philosophy that has been revolutionized.

For the longest time I struggled to find an answer when asked “why do you blog?”. I have neither extraordinary insight nor life to share with the world. And then it hit me. I didn’t start out on the web by blogging, I started out on the web by designing. The past 11 years of blogging had just been an excuse for me to adorn the web with pretty colors.

For the past 11 years, I was trying to create the prettiest, most original-looking blog. So I tried to never draw inspiration from other websites but from different mediums like anime, fashion, culture etc. I would mull over concepts and colors for weeks, consulting various color theory books, sketching 100s of variations, before I decide to photoshop a prototype and ultimately code it.

A lot of times, this design philosophy served me well and ended in some recognition.

But the last 11 months has changed all that for me. Overseeing web design and development work at an enterprise level has taught me to appreciate another facet of design; a facet that I have downplayed all these years – the function of design.

So the new theme’s concept and color combo only took me 5 minutes to gather. Even the prototyping stage on Photoshop took me less than 2 hours. I’ve just been fussing over typography and usability.

Hopefully, one day when I get skilled enough, I can combine both the art and function aspects of design to design masterpieces. But for the next theme, it’ll be all about the details.

Dear readers, what is your philosophy for web design? Which aspect of web design do you like best? What do you dislike? Do share links of your favorite designers and websites too!

  • i go simple because i’m not artistic but i know something about visual communication.

    i love your bamboo shoots background effect!

  • JJ

    I like handrawn art elements in mine, but I also like simplicity and minimalism. Unfortunately, I can never combine those two elements in the way I like. I also tend to write long blog posts, so trying to find a design to allow for such long blocks of text is kind of hard.

  • thats always the question i answer before creating a blog. thanks for the inspiration!

  • I believe form and function must work together in order to create a visually appealing website, but also be functional. In fact, I can excuse a not-so-pretty website if the functionality of the site is on point.

    Personally, I prefer simplicity. I like colors to communicate a mood or make a bold statement, while playing with typography. I also like creating a successful visual hierarchy with colors and type.

  • I don’t like to web design much now. I used to be creative and into it, but now, it’s all about the web developing. Hehe! Yes, being in a career that does web designing/developing would make you learn a lot of things. I’ve been in the career for a year now, and wow, I’ve learned quite a bit. Hehe! I’m just too lazy to put it into use on my personal sites. =P I also have some things that I just won’t use/do because of personal reasons.

    Web designing-wise, I like simplicity, and functionality.

  • Ivy

    @Junde: Thanks! Simple is always good – especially for enterprise designs. Your site is very effective with its visuals actually. I love your about me section! 🙂

    @JJ: Girl, you have one of the best designed blogs I’ve seen in my life! The watercolor and just how everything is put together is really unique. I guess the only element for long posts is readability… which reminds me. I’m reading this book called The Language of Thought by Steven Pinker and the text is so small, it’s actually discouraging me from reading it.

    @TheBattleScene: Thanks for stopping by! 🙂

    @Yolanda: Sounds good. Typography is key for sure. I’m trying to learn but I’ve quite developed the “eye” for it yet, shame. :'(

    @Simply Precious: Man, I wanna see your professional work though!!!

  • Love the new design 🙂

    I used to love making new layouts for my site. I think I changed designs like once a month. I had a lot more free time in high school, lol. They were all just fun designs though with music and animations and, you know, they looked like a teenager did them. I think when you get older and you visitors get older, you and your audience have different expectations for design. It’s not as fun making layouts anymore because they need to be more mature layouts because I’m more mature and I want to reflect that in my design. And I think you reach a certain point where clean and simple is really the best way to go and there’s no point spending hours fiddling around in photoshop. A talented few can pull of gorgeous, graphic intense, yet clean and useful layouts. I am NOT one of these people, lol.

  • Hey Ivy, love your new theme. I’ve always like the red lantern. That’s almost like your signature now 🙂

  • Ivy

    @Lissy: Thanks! Yeah, I remember the old silvercpu.com! (We seriously had way so much time as high schoolers LOL!) Yeah, the expectations change when you have different audiences. Content becomes king and design becomes and element to enhance the content. Most teen websites have it the other way around. And for a while, I hadn’t changed that mindset – at least not until I started overseeing enterprise-level web development. :S

    Thank God for those super talented ones. Always fun to visit their sites! 😀

    @Michelle: Yes, that red lantern is my blog’s signature. Hopefully that won’t limit my future designs. Thanks! 😀

  • Hi!
    I was searching for content about “website theming” and ended up on your blog and thought I’d leave some design ideas.

    Web graphic elements have to be balanced with loading speed. The suggested load time (mid-2010) is now 2 to 3 seconds. Visitors are very impatient. Visitors have no tolerance for site bloat. If they can’t get past the loading time barrier, they will never see your beautiful design because they will bail out. Your blog took 10.5 seconds (USA cable highspeed) to load on my browser screen. I’ve seen worse!

    With that said, here are “lightweight” non-fat graphic suggestions that help speed up pages and still maintain interest.

    1. Color — HTML color is weightless. Leverage this whenever possible. Themes are created by color combinations. Themes create emotional reactions and can speed up understanding.

    2. Natural or organic elements. On your blog, you have a rice paper background and flowing waves in the banner. These are good examples of organic elements. Basically, we are inviting the “outside” real world into our “structural, technical” offering. This makes for a more inviting site.

    3. Lighting effects. These can be gradients, blurs, edges, shadows, etc that give the illusion of depth and lead the eye. Your wave header has depth illusion.

    4. Legibility. Please google for the “100% Easy-to-read Standard”. Whenever possible type should not be “built images” but HTML fonts and larger.

    5. Liquid or stretchy layouts. Not always possible with a blog template.

    6. Optimize code with PHP-GZIP and optimize images with SmushIt Firefox addon. Your page is not using GZIP compression. I realize you may have no control over that.

    For this site there are 3 heavy images:
    1. logo.png 82K, using GIMP Save for Web addon, 8-bit PNG with transparency > 27K
    2. wave2.png 70K, same treatment, > 29K
    3. bkg2.jpg 72K, same treatment, JPEG 50% Quality output > 6.1K

    Savings with image optimization:
    Before = 224K
    After = 62K
    3.6 times faster image loading speed. This is 28% of your total 799K page weight and would give you a boost. The average page weight on the Internet is now 320K.

    Thanks for the opportunity to share.

  • Pingback: Web Battles Old Media « Stataywhit's Blog()

  • Pingback: Meanwhile, on the Internet… [ VOID-STAR.NET ]()