Saturday, December 08, 2007

www.ciyring.com

[ANOTHER failed attempt at lauching a site]
www.ciyring.com was to be the dream of mine.
'Cuz It's Your Ring - a ring customization site.

I'm embarrassed about this experience so I won't really
go into explaining why I made it. Just know that
I had to do it, my friend asked me, and now I ditched it.

Again, I spent way too much time deciding every
single minute detail that went into this design.
Is it going to be like this for every design of websites?
Gosh..

Here's a brief spec:
1. Idea: Ring customization site, in accordance a jewelry shop.
2. Backend: a basic ecommerce, Ruby based app made by yours truly
3. Time: good 3 months from start to disastrous end

Ruby coding was just enhancing the tutorial they had in the book,
Agile Programming in Ruby or something like that. The famous
one by Pragmatic?

I honestly say I have learned alot about Ruby on Rails, but the whole
thing is still new to me and a bit overboard. I don't think I'll have
the balls to implement such a thing again. Why do that when
there are other well developed open source engines?

Here's the image:


If you go to the site, I still left the debugging mode for Ruby open so it's
gonna take time to load.

Sucks cuz I lost the whole thing behind this one because my laptop hdd
failed on me. I really don't know what to do with this one..
Could I possibly sell this on eBay or something?

Onmorie - the newly revamp, rest in my hdd forver.

The design and also the chosen backend system will never see the
light on the Internet, and what the hell am I gonna do with this
highly specialized design? I can't use it on anything else.
I mean, it's not like I have a showcasing site of my own that
displays my web designs.
CRAP.

Well, I will think about that later. Right now, just laying out the
specifics on this site will vent some much-stored steam of mine.

Developing environment:

I went for an offline development this time.
After my past developing experiences with site-development,
The time-consuming step of uploading and editing and uploading again
just seemed, finally, too wasteful for a developer like me that
develops websites as just a hobby.
Hey when you start it, you gotta finish it, and when you finish it,
it's only worthwhile only if it turns out good, right?

So, I searched for some methods to make an offline setup.
I thought about LAMP. But even though Linux is a good environment,
it was too overhead to change a computer setup to make one decent web site.
Then I hit on WAMP - the Windows version of LAMP.

The overall setup turned out to be very concise and easy to manage.
I had a PHP, MySQL, phpMyAdmin, Apache-based server running in my
Vista in no time!

Then, I had to choose the backend engine:
My dad's business is teaching how to be creative. He is a guest lecturer,
employed by a Korean personnel training company. Generally, the site
was in focus for creating more lecturing opportunities - a chance
for him to show his ideas on creativity and a place to connect with those
interested or wanting to affiliate.

Therefore, this called for a blogging engine.

Now, if it's in English, I would take no time in choosing the Wordpress engine.
Sure, I even tried the Korean version of Wordpress as the backend in
www.onmorie.com/wordpress.
However, the writing/managing experience was all in English!
I wasn't really a fan for half-baked translation, and plus I wanted this site
to be fully manageable by my dad, so I ditched that idea.

I went for Tattertools - a very good blogging software in Korean.
I'm serious, if there is Wordpress for the Western languages, there is
Tattertools for Korean! It's that good.
And it's based on Korean so all the utf-8 setup is ready from the get go.
It's open source as well, is followed by much devoted coders, bloggers,
and all that,
and the best thing is that all the posts made using the engine gets
an option to be posted to Eolin - the Korean blogosphere-equlivalent
of [Put ur favorite blog-aggregating site here].

Okay, all the ingredients are set. Off I went on designing.

God what a pressure it was to think about a design for a site about creativity.
It has to informative, fluid, and show that concept of "thinking outsite the
box."

I generally start by jotting down notes like above ideas. Well, I jot down 30%
of ideas and the other 70% I just roll it around in my head for a while.

Fluidity. Informative. Creative. Out of the box.
And I'm just a freakin line-thinkin noob coder.
Here is the train of my thoughts:
out of the box => break out of the borders somewhat
meaning overlayed transparent png..
color: nothing bold, official, office like, but more showing fluid, acceptance, free-living
overall tone of color had to show inceptual concepts, ideas, fountain of ideas

I had to think of a cool logo too.
It had to show the concept of Onmorie - using the right and the left part of brain
to synnergize a new idea, a new creation. Well, I didn't go into researching further.
Creativity is similar to idea to a fluid type font,
Logic is similar to angular type font.
I also wanted to make a trendy statement, so I tried on a Web 2.0 type badge as well.
After a couple more playing around in GIMP, I got this:

Yes.. that was my attempt in making a logo, and well, it's just my biased opinion
but I like it :) Mix of fluid font styles, with the center font of angular, rigidness
shows the concept of the site in somewhat clear voice.

Next up was the overall layout of the site.

I decided on a simple 2 column layout, because that meant less CSS-headaches later on.
Plus, after checking out the engine, the sites that were created by it generally sported a
2-column anyways. Good for me.

God I SPENT 2 FULL DAYS just deciding on the borders of the layout!
2 FULL Days of answering this question: To round or not to round the borders?

If the corners are rounded, that's for the overall outer border of the layout,
my final judgment was that it would mean ideas are finalized, and it wouldn't
reflect the fluidness of ever-evolving creativity as the site was supposed to persuade.
A basic, minimal graduated background color of the layout sounded more
appealing at the time. I have no confidence in this decision. I mean, I'm a perfectionist and an
owner of small balls. I have to set these decisions over 2 days, what can I say :)?
................
God you CANNOT image the sleepless nights and countless aggravation and stress I went
through to decide each and every detail of the design of the site.
Even now, I think I couldn't have done a better job, because I suck at design and color-
coordinating. This is the best I can do. I gained a whole new level of respect for
CSS-web designers like those in CSSZengarden. Cudos for you guys. You guys ROCK!
Here's a shot of my final design:
Rightside top of the design has the outline of a guy lifting his arm, pointing with his
index finger. Yeah, that guy is having a Eureka! moment. My expression of
what creativity is, as is well the balloons exhibiting expressions.

I did my best man, I did my best. And then I chopped this into CSS,
and this time I followed the book I bought from CSSZengarden to
make the CSS as formal and pristine as possible. To make it really
CSS-compliant. I'm really happy how the CSS turned out.

As for putting the skin into backend, it wasn't really a time-consuming
experience as only minimal details needed to be put into the overall
HTML files. And having a local WAMP server to see it didn't hurt the process either.