The Whitehawk

Today I had the privilege to participate in my first ever web convention, and what a convention it was.

If this were a Hollywood movie the cast would consist nothing but top actors in the business, think Pulp Fiction without the guns, swearing, sex and violence but with lots of insightful thoughts and ideas on how to develop better websites. In retrospect, maybe it wasn’t like Pulp Fiction, but the quality was definitely there. » Read the rest of this entry «

Even though my company has decided to stop supporting IE6 for our upcoming projects it doesn’t mean we should ignore it completely. At least I don’t.

A lot of web design firms have been pushing and advertising different websites to try to “kill” IE6. Expression Engine will stop supporting it in their next release, and franqly, with IE now in version 8 we have very little reaason to support it unless you live in an under-developed country where PC specs are minimum. » Read the rest of this entry «

As a sign of having free room to breathe again in my host I decided to spice up my blog design and bring it something to what I wish to give my visitors when they visit my “custom tailored” which will be coming soon™.

This template I’m using this time, is what all websites in a perfect world would look like. A world where customers wouldn’t say “let’s use up this empty space over here and put animated banner gifs with comets that fly around them” (sadly, this was a real customer).

I’ll be changing the title’s color to blue tomorrow, and some of the orange highlights, but only because blue is a color that is better suited for this site than it.

This incredibly beautiful template called Oulipo was made by an equally beautiful and talented designer called Andrea Mignolo. I thank her for making this available to everyone and I hope you enjoy it as much as I do.

I wish that one day all websites look “like this”, but seeing how intrusive advertising seems to be this year, I really don’t see that happening any time soon.

The company I work for, Navega Bem, has an interesting team to say the least. Each of them have very specific skill sets and personalities, but what makes it the most interesting is that almost everyone performs a very specific job.

With this said, I’m mostly responsible for technical assistance to our customers, fixing small mistakes in websites and putting together all of the designs my colleagues put together. What makes that task interesting is that they know very little, if anything at all, about HTML and CSS.

This results in some very awkward designs that make my life a living hell, though I admit they help me tackle some unusual design issues. Today’s task was to make a layout that could be either 2 or 3 columns. And I wanted to achieve that without resulting to multiple templates for the website, so I used a very simple solution: margins. » Read the rest of this entry «

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?

» Read the rest of this entry «

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.