The Whitehawk

Ever since I discovered my site’s identity, I was quickly able to overcome some of the things that were blocking my progress, one of those things was the menu. Before choosing what the identity of the site would be, all of my menu design attempts just felt awkward, and out of place.

The first menu attempt was this:

I distinctively remember that at the time when I made this I said to myself: “Ok, I know I want to give this site a Web 2.0 look, but this is pushing my luck: gradients, big letters, reflexions and rounded corners, and this is only the header!”

So that menu was quickly ripped to shreds. Then came attempt number two:

Even though this clearly had a Web 2.0 element to it, and look a little bit nicer (in my opinion, it didn’t fit with the whole design. It was at this time that I started thinking to myself that I was making a mistake with the whole project.

I wasn’t looking at the whole picture. I thought that if I had the header done, the rest of the design would just flow in naturally. I guess I overestimated my capabilities…

What really save the site’s design was the identity I found for it. By choosing the name “Reflexions” for the design, I immediately entered a brainstorm, and hundreds of ideas started flowing in. The first attempt at the menu’s design, since then, was this:

Although I have tweaked it since then, when I look at the design now, it feels “right”. The elements feel much closer to each other than before. The next visual element I will try to use in the side columns will be the blue strike.

Hopefully, I will be able to achieve some effect that makes it seem that the letters are breaking out of it, like the hawk’s head. At least that is the intention.

Note: Even though I didn’t post a Design Journal yesterday, I did work on the website, therefore today there will probably be two Design Journals. Lucky you

As irrelevant as it may seem, yesterday I found out that the most important thing about designing a personal website could very well be choosing a name for it, and in the next paragraphs I’ll explain why.

I am a critic at heart. I like to think that all of us are, even if only a little bit. I find it very easy to criticize a blog, and at the same time give helpful advice that will help improve it. In InforQuali, my former job, that “skill” of mine was very appreciated, and all of the projects I worked on were successful in meeting their deadlines and in pleasing the customers (which was sometimes a hard thing to do).

Even though I didn’t realize it then, all of the design projects I worked on were given a name, or at least a concept. And even this site’s current design has a concept behind it, even though I never realized it before.

When I made the first design for thewhitehawk.net (back then the .com wasn’t available), I wanted to make a design that was an homage to Macromedia’s old website, which has “recently” been butchered (in my humble opinion) by Adobe. That meant it would have a title, a horizontal menu, and 3 columns.

Besides having a concept, I already had a layout, two of the most difficult tasks in making a website were already done, before I even opened Fireworks or drew anything.

When it came to designing version 2.0, I wanted to do something completely fresh. I wanted to make something that followed set forth by some, or most, of 9rules’ blogs, while maintaining a style of it’s own. There were some characteristics I wanted to have, and things that I wanted to drastically improve from this version.

To do that, I tried to disconnect myself from this site’s current design, as it’s creator, and look at is a critic, as I tried to when I did version 1.5, which is what you currently see. I came up with different things I wanted the new design to have:

1. Whitespace – something that this design really needs is Whitespace. In version 1.5 things improved a bit in that aspect, but not enough.
2. Less useless links – no one, except myself, has ever used the archive. Specially since there is “search” box on top of it.
3. Less segmented link list – there are many more aspects like this one that I want to cleanup
4. Screenshot-friendly design – If I want to write an Anime and Manga blog I need to have good image integration with the site

I also wanted to keep some visual elements from the last website, like the hawk’s head, which grew from a 50×50 pixels black & white gif, to a vector image which can be used in an infinite number of ways.

So what did I do from there? Well, obviously I opened up Fireworks and started drawing away, and let my imagination carry me. If version 1.0, or 1.5 had a name, it would definitely be “birdcage”. Everything is wrapped around a border, so I wanted version 2.0 to be the oposite of that. That is why the first, and main, element of the new design is the hawk’s head breaking away from a line. And everything underneath it, will supposedly be “free”.

I intend on minizing the use of borders, give the site the “air” it needs for people to enjoy reading it’s content. But is that enough to drive me through the whole design? Of course not.

I though that trying to design a site from top to bottom, and just create things as I come across them would be easy, and I was terribly wrong. So let me spread the message:

Do not try to design a website with separate elements.

You need to design it as a whole. When a child is growing, it doesn’t get a right leg first and a left leg second. A site shouldn’t grow any differently from that. Let’s look at a good example of that: Avalonstar.

When you visit it right now you might think to yourself: “There are empty fields there, the design feels rushed and tasteless. I beg to differ. Well, it may have been a little rushed, but it was made with a future in mind. It already has space and structure reserved for future growth.

One of the worst mistakes made in any project is when the project outgrows it’s original concept. Instead of constraining it’s site, Bryan already thought about where he wanted to go with the site and left room for it to grow.

The current design wasn’t made for an anime blog. It wasn’t made thinking it would join the ranks of 9rules (speaking of which, the logo has misteriously disapeared from all of the blog pages, need to fix that).

Version 2.0 will be Anime and content friendly. It won’t look as “corporate” as it currently does, but hopefully it will look more “me”, and hopefully my content will also improve with it.

That is why Version 2.0 will be called “Reflexion”. Even though it doesn’t feel very new, and some people have pointed out that it’s very (or too much Web 2.0′ish), the blog’s title was the second visual element I liked the most out of the header. And since I’ve given the site a name, I’ve already overcome some of the “blocks” I had before, but you’ll read more about that in the afternoon

Although I intended on continuing from where I left off last time, I was unfortunately “held” with commitments throughout most of the day, and the little spare time I managed to grab was taken by the articles I wrote for ForeverGeek.

Nonetheless, I promised a journal, and I intend on keeping that promise. If you saw the sneak peak article I made last year, you’ll see that I intend on making the header banner bigger, and also provide a design that is less constrained by visible borders.

The most noticeable change since then happened with the blue outline I put around the Hawk’s head which went down to 2 pixels width instead of 3. That tip came from a 9rules member, but unfortunately I wasn’t able to find the topic in which the suggestion was given. Nonetheless, the suggestion was apreciated and still being used in the current design.

Here is what the header looks like with the new outline (and you can also get a glimpse of the title which is still being worked on) and you can compare it with the old outline by clicking here.

Tomorrow will be another very busy day for me, as I will be attending an Internet Usability conference in my university, therefore there won’t be a Design Journal, but you can definitely expect one during the weekend.

Until then readers, fair winds.

The nice and talented folks at SitePoint have developed a nice tool that allows you to create round corners around content boxes without using JavaScript and with Transitional Code.

Sure, you can already make round corners around content boxes, and you probably see them all the time. But each person uses a different trick in order to achieve it and it doesn’t always work on all browsers. Now you no longer have to worry about which method you’ll use, and you can already use a tested method.

So head on over to Spanky Corners (hehe, don’t ask about the name) and generate your code right now!

[tags]CSS, round corners[/tags]

A couple of years ago, when I was giving my first toddler steps in web design I remember visiting various sites to use as references when making new designs, and what I found were usually complicated schemes of tables with background images in order to try to create “round” shapes for websites.

I remember drooling upon curved image menus that made it look like the options were inside the side of a tire or something else.

The impression I had was that designer sites had curved layouts with fancy image editing and corporate sites were (and still are) mostly “square”. However, most of the modern web design company websites I visit nowadays are also following the lead of the more corporate ones.

So, on one side, we are leaving “table layouts” and evolving to layer based ones which give us more freedom to do what we want. But on the other hand, I see less and less of the former “round” designs I used to and most people adopt the columns design.

Who knows, perhaps we are entering a “Pos-Impressionism Era” in web design and entering a new, more sensible one, or perhaps it’s a common pattern of human evolution.