The Whitehawk

For those of you following the Live Design, you might be interested to hear that I think that I managed to create a cross-browser header which works on all browsers I tested which were: Firefox 2, Opera 9.23, Safari 3 Beta and Internet Explorer 7.

Although it’s practically impossible to get it to render exactly the same due to some small differences, it’s rendering well enough for me to consider it done. From here on, till the end of the conversion it should be a breeze.

You can check out the header here.

It has been a very busy day for me today, but the progress in the live design has been going by so fast that I’ve decided to maintain it separate from this blog until it is finished.

You can visit the live design blog by going to http://thewhitehawk.com/live and comment or test it out.

One of the things I didn’t miss from working with CSS was the numerous hacks one had to apply in order to create a relatively complex layout. In my opinion, anything with more than 2 columns can be considered complex.

Sure, there are hundreds of 3 column CSS layouts on the web, but to find one where I could easily adapt to my site’s dimensions (Stu Nicholl’s was too hard to do that). Thankfully, after many attempts, including some of my own. I found a layout I could adapt to my design and change easily by using Layout-o-matic.

My time to work on converting the theme was very short, because I had to attend on my best friend’s birthday party. But! I had enough time find a good layout, and adapt it’s dimensions to the ones I needed.  As I type this right now, it’s 4am, and I am slowly converting it to a wordpress theme.

You can see the “raw” layout by clicking here.

Sorry folks, today’s Design Journal won’t be about the redesign, but instead, about an issue which concerns me greatly.

I recently purchased two new Web Design Index books, that called “Web Design Index” (very original name) from the Peppin Press which feature a nice selections of websites organized by different categories.

If I were to choose the websites for a book of this sort, I would be much more selective. Some of the designs chosen, are indeed original, in terms of layout and overall look, but most of them also sacrifice having a proper structure entirely.

I have absolutely nothing against being artistic with your website. But with some of the designs I’ve seen on this book there are several basic interface rules that are broken:

The structure changes almost entirely between the different sections.
Some websites have numbers representing the different pages of the website, with no other identification other than the address.
Other have really big and nice wallpapers, and all of the content is jammed inside a tinny semi-transparent box with “scroll buttons”.

I’m not by far the best web designer in the world, nor am I even close to that. But I would never sacrifice a good structure, that helped the user interact better with a website for a difficult or unconventional one for the sake of style alone. Unless the single purpose of your website is to entertain the visitor visually.

There are exceptions, like 2advanced studio’s website. The layout is a bit unconventional, although it’s somewhat structured, but the aim of the site is to visually appeal visitors and to demonstrate the kind of services that they can provide.

If you can design a site that is as visually appealing as theirs, then yes, you can sacrifice the structure a little bit for the sake of a good visual appeal. But as I mentioned before, they are an exception.

How far can I change the structure without making the website a maze to navigate?

Well, I think that a picture, on in this case a website, is worth a thousand words.

The link above directs you to Wolfgang Bartelme’s website.

On the front page you will have the beginning of the latest article, and just below, a few links to the articles before it. When you click on an article’s title, you will notice that the whole structure below the banner changes, and that was one of the bad things I mentioned about some design focused sites.

So why does it “work” in Bartelme’s site?

I never thought I’d ever quote myself, but if you ever read that long text in the index page of my website, you will find this on the first paragraph:

When you first arrive to an unknown site, even if you don’t notice, you will always ask yourself four questions: Who? What? Why? and How? and the text that follows this is precisely the answer for each of those questions.

Let’s look at this Bartelme article, as an example.

Do we know whose website it is? Yes, we do.

Do we know what the website is about? We immediately think that the website is about Design, and it is. Even though it doesn’t have an explanatory tagline, like the one I have, the content of the site becomes evident almost immediately.

I could go on, but I think you get the picture.

Even though the “body” of the site changes depending on the section, the most important part, which is the navigation, and the header (in the case of this particular design), remains the same. You can always identify where you are and easily return to where you were.

Certainly, there ways to make the website better, in terms of navigation. But for a website with such simplicity, it isn’t necessary unless it starts to grow beyond it’s boundaries and becomes more complex.

When I made this website, I didn’t really consider whether such elements were necessary, and when I look back at it now, I could easily remove 80% of the links that clutter the site. That is why the redesign will have such a fresh and simple look, compared to the current look of the website.

How can you prevent making your website as cluttered as this one?

Think about your target audience, and what your needs will be. For a website like mine, with only 4 pages (which will be reduced to three), you don’t need to make it very complex. In fact, with such a small number of pages, you are given more liberty in how you can give your visitor the information he needs.

*note* - I had a small problem with the Wordpress “more” so the later part of the article looks a bit weird at the momment. I will fix this later this evening and I’m sorry for any trouble caused.

Now that I have a basic layout, all the last step is to arrange the most important aspect of the design. The area where the content will be. If any (real) designers are reading this, they will probably be thinking “Hey… how come the area where the content will be is the most important aspect? Isn’t the rest of the interface more, or at least as important?”. To answer that question, I ask them another one:

When you’re reading a blog, or any other website, how much of your time do you use looking at the interface, and how much do you use looking at the content?

Of course it’s important to have a good looking layout, but it’s very common to see websites with great designs with little or no care for the content area. On the other hand, sometimes you can also find websites with great design, good typography, but with inconsistency in the layout.

Regarding the design, there is no way I can please everyone that visits. Most of the heavy visual elements are in the header, so if you scroll down a bit, you can simply focus on the content, rather than on anything else. And regarding typography, I intend to make the site as easy and nice to read as possible.

Content is king, but if it’s difficult to read the content due to the wrong colors, or length of the line or visual interruptions of the text (like advertisement); you’re better off using your writting skills elsewhere (unless, of course, you’re being payed to write for a website with those conditions).

After much fiddling about, I came to relatively satisfying conclusion.

So what aspects did I consider when making this?

(more…)

Yesterday a lot of small changes were made to the design, or what’s done so far. I needed a way to integrate the header with the rest of the layout without butchering either one too much.

My original idea, was to create a fading border around the columns, similar to what you can find in the 9rules  homepage. For example, look at the border around the 9rules notes which appears in the topleft corner and fades out very quickly. I wanted a similar effect, something that would explain how the information is aggregated without butchering the rest of the design.

After a lot of tweaking, what I came up with was this:

 The site will have 3 columns, like it currently does, but only the right column will be limited, and only for a shortwhile. Even though there will be no border separating the two right columns, the visual aid will help in indicating the separation between them. But if it doesn’t seem enough, I might just extend it a bit more.

The other tweaks I did were mainly on the hawk’s head, I slightly changed the color and made it a bit stronger. Now I need to balance out the colors, and bring the site’s secondary color, orange, to balance things out.

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]