Some of you asked for an Expression Engine tutorial a while ago and I thought today would be a good moment to explain how I implemented the comment boxes on my site. There is a lot to talk about so lets move ahead and get on to it…

What's on the EE menu today:

• Alternating comment boxes and your own comment box
• The use of gravatars
• Permalink a comment
• Number the comments
• Hide the e-mail address and show URL
• Date and time stamp

Alternating comment boxes and your own comment box

Having the comment boxes alternate in style is a must. It gives a nice overview, it's more pleasing for the eye. Having your own comment box is even better. It's not that difficult to implement. I'll show you how.

The static XHTML code

Let's have a look first at our static code:

The outer div has a class "comment-box". This div will get another class named "comment-box-alt" for the alternate style of this box and a class "comment-box-v" for the style of the box when I enter a comment.

The EE code

And here is the EE code:

What I did is using the "switch" variable. BTW, you can add more then just 2 styles.

To give my box a special style, I used a conditional variable, which allows you to conditionally show or hide information based on criteria being met. In case you want to highlight your own comment box, you could check this by using your e-mail address. "!=" means "not equal to" "==" means "equal to".

Have a look at the complete EE code

The use of gravatars

For the gravatars I use Les Jenkins' plugin which works with gravatar.com. Just download the plugin and place it in EE's plugins folder on your server. Then add the proper EE code (shown in the image above).

Permalink a comment

To give each comment a permalink I use the comment_id variable. Because these are pure numbers and I want my code 100% W3C valid, I added "c_" in front.

Number the comments

Just add the variable count (the word count between curly brackets) to number your comments.

Hide the e-mail address and show URL

To hide the e-mail address of user, make sure that the "Automatically turn URLs and email addresses into links?" EE Admin is set to "No". You'll find this in Admin > Weblog Management > The name of your blog > Comment Posting Preferences.
As you can see I've used conditionals again: if the URL field in the form is not (!=) empty, then render the link and if not than the link won't be rendered and you'll only see the name. Notice how I added this conditional around the "a" element in 2 separate parts. I added it around the opening tag and a second time around the closing tag.

Date and time stamp

The date and time stamps are also pretty easy to do. Well, everything is, you just need to find the proper code :) I always browse to this overview of the date and time formats you can use in EE.

Additional info

The word "comment" between curly brackets will render the comment. The "link" between curly brackets is a variable I've created that replaces my URL. So each time I want to use this 'path' I just type "link".

Hope you enjoyed my mini EE tutorial. Don't forget to browse the user manual. You'll find a bunch of information there. And if you just start on implementing your templates, make sure you copy the default templates in a separate template group and use them to learn from. Well, that's how I did it ;)

The last couple of days brought me a lot of inspiration, because of the places I’ve visited. No stress, well expect to catch a train at 6.30 a.m. for Paris after 3 hours of sleep coming back from London. In fact, that was a bit crazy. A little too much in a short time (London, Paris and then driving to Normandy Honfleur). And so, I felt the urge sketch and draw this weekend and so I came up with some ideas, like using art brushes on text in Illustrator ...

When I was at @media, I didn't do any sightseeing in London like I did last year. So as you can see Paris gave me inspiration as well as Honfleur, but this one I'll save for later :)

Tracing the sketch vs final result

As always I start from a sketch, scan it and trace it using the Pen tool in Illustrator.

Final result

As you can see I used some Illustrator brushes for my drawing here. Illustrator has some amazing Brush Libraries you can use. Only, you need to load them. You do this by choosing the Window menu and choose Brush Libraries and then select one of the libraries available in the submenu.

Applying brush strokes on text

Did you know you can use these brushes on text as well? And did you know that your text remains editable? These Brushes are in fact Illustrator Effects, but they are applied as strokes. After applying this brush effect, the text in my illustration is totally editable. Oh and you can layer several brush strokes on top of each other using the Appearance palette. Now how cool is that? :)

If you select the text using the Selection or Direct Select Tool, you can apply a brush stroke to the text. Go to the Appearance palette and choose "Add New Stroke" from the fly-out menu.

A 1 pt black border will be added to the text. Change the color and choose a special brush in the brush palette. For my illustration I chose Dry Ink 2 found in the "Artistic Ink" Brush Library. The thickness of the stroke will probably be much too heavy as you can see from the picture above.

Choose a color that suits perfectly with the fill of the text and reduce the stroke until you get the effect you want.

If you wonder how you get to see the names of the brushes, you need to choose "List View" from the palette's fly-out menu.

Experiment and create your own

Never forget to experiment with these brushes, there are tons of them and You can get real nice effects. Oh or even better, have some fun and create them yourself! Here is what you need to do in short:

• Draw some random straight lines on paper using different crayons or pencils
• Scan them at 300 ppi
• Save them one by one as CMYK Photoshop files
• Open Illustrator CS2 and create a new document
• Select Place from the File menu
• Select your scan and go to LiveTrace select and Tracing Options
• Select Color 16 and 30 - 35 as Max Colors
• Convert your effect into real vector paths by choosing Expand from the Object menu
• Eliminate the light fillings of the paper background by selecting 1 path (using the Direct Selecting Tool) and choose Same Fill Color from the Select menu and press delete
• Creating the brush by selecting your vector brush and click dragging it into the Brush palette
• Select New Art Brush in the New Brush dialog window, click OK
• In the Art Brush Options you can define the direction, size and colorization of the brush
• Choose "Tints" to render the Stroke color that's been applied to the Brushed path

More detailed information on how to create your own Brushes can be found on this site.

Just got back from Paris today. After @media London, we decided to travel a bit and go to Paris with Dave. It was an honor to speak on @media about design with 2 of my favorite colleague designers Jon Hicks and Cameron Moll.

• Download the presentation slides (ZIP/PDF file - 3.5 MB)
• Notes taken from the panel by Cindy Li
• Podcast will be available later

URLs mentioned in the presentations

• Khoi Vinh’s Subtraction to show that a great design doesn't solely rely on colors and also for examples of how to show hierarchy without changes in type size.
• Jason Santa Maria’s redesign of A List Apart where the typography is the design itself.
• Denis Radenkovic’s LogoLog for examples of clever logos.
• Survey of default fonts installed for Windows, Mac and Unix.
• Sign up for Type catalogues from Type Foundries such as FontFont and House Industries
• Richard Rutters’ Elements of Typographic Style Applied to the web
• Mark Boulton’s series Five Simple Steps to Better Typography.

The experience

Let me tell you that was a thrilling experience to be up there and talking in front of a few hundred people. It's not that I do this kind of thing every day. I was pretty nervous at the beginning but once I started off talking about one of my favorite topics, design and colors in particularly things went pretty OK. It was different from speaking at SXSW since this time I knew my panel members, at SXSW I didn't really. That, and also the subject made a big difference to be able to be more less nervous.

Too bad I had to miss Jeremy Keith's talking since his session was at the same time. I missed it at SXSW as well. There were a lot of great panels and speakers this year. I especially liked Jeffrey Veen's speech and also Tantek Celik's speech about Microformats. The last one was a hard decision since Andy Clarke was speaking at the same time about design and I wanted to see this as well. I really wanted to find out more about Microformats. Pretty fascinating stuff. It triggered my interest and I'll be looking into what the possibilities are.

My short break

Tomorrow is my birthday and we're heading to Normandy with my friend Cindy. We'll be staying in Honfleur for 2 days and do some sight seeing. She's staying here till June 27th and while she's here I'm taking a bit of a break. I've been in Normandy once, but that was years ago when I was a kid and I really loved it. Hopefully I'll have some great pictures for you to show. Pardon my short absence here. Hopefully you enjoy the pictures on Flickr that will follow.

Almost two years ago I created a PDF document full of handy CSS resources. Most of the links are still ok but I personally found that it was high time for an update. In our everyday work life we discover so many new links to bookmark. Personally I always have a hard time finding back my links in those bookmarks when I need them.

Reader suggestions

In the comments of that article many people suggested to put them online and that made me think about my link section of this blog when I was designing it. But as always the ideas are there but time was not ;) So if you visited that section before only a few links were there because of that fact.

The link section on steroids

So after an extended period of gathering quality links, categorizing them and making it all fit in the design, I’m proud to re-launch my link section today. It’s like the previous PDF file but multiplied by a factor of 3.? I hope I succeeded in presenting them in a usable way and that it isn’t too overwhelming. They certainly will make my life a little easier and I hope the same for you ;)

So go ahead and check out the link section!

Time has been going so fast lately and I can’t really believe that @Media 2006 is next week already. So much has been happening in our life in such a short time so high time for bit of life update I guess. Since we are back from our trip to Austin (SXSW) and Washington DC in March we have been burning the midnight oil.

Vacation time

So I’m actually very much looking forward to the last 14 days of June. Next Wednesday my best friend Cindy lands in Belgium and will be here for the remaining part of June. Perfect timing for our Summer break. We have set up a hectic program. For starters we leave the same day that she arrives for London to hook up with some old friends and my talk about “Good Design vs Great Design” together with Jon Hicks and Cameron Moll. After London back to Belgium for one night and in the morning we are off to Paris to explore the city of light and to conquer the Eiffel tower ;)

Next on the list is Normandy for a few days. You know the Internet can be such a great tool to help plan all kinds of fun stuff. I discovered such a cute hotel in Honfleur in an old cider house from the 17th Century.

Belgium what to show a visitor from the US?

All other remaining days I’ll try to be a great host and try to be a little more patriotic (we Belgians aren’t really) and try to show in what beautiful country we live. My favorite city Bruges is the first one on the list. It was ages ago that I was a tourist in Bruges too. We are going on a boat trip on the canals, a carriage will take us on a tour.

Let’s hope the weather gods are with us so we can explore our coast too. Maybe Antwerp for a girlie shopping day and some sightseeing in Ghent too. Any fellow country boys and gals out there with more bright ideas on what to do if you had some time to kill with a friend from the States here In Belgium? Much appreciated ;)

Some of you remember part 1 and part 2 and have been eager to view part 3. It took me a while to find some free time to work on part 3. Today I have been able to finish my drawing. This part covers the final touch of the illustration. We’ll be adding highlights and shadows and use the Gradient Tool a lot…

The final touch of an illustration improves the illustration a lot. It'll make the illustration more appealing if you spend some attention to details without overdoing it. An illustration style like this is clean but a little depth, light and shadow will make the difference.

A bit of face lifting

The eyes

The part of the illustration that needs some extra attention and improving is the face, especially the eyes. First we'll add some smooth shadow effect which gives the impression as if she wears a bit of make up. This effect also adds a bit of depth to the face. First of all I removed the filling and used a stroke. I cut both into 2 parts and gave the outer lines the same color as the face. I made sure there is the same amount of points on both lines, otherwise this could result in some weird effect when using the Blend Tool. Choose the Blend Tool, click a point on the light line then click the equivalent point on the dark line.

The neck and mouth

Adding some shadow on the neck will give the illustration extra depth. Make sure you always add shadows in a subtle way, too dark shadows will spoil it and make the illustration too hard. I use a gradient that has the same color of the skin and a bit of darker skin color. First I drew a shape that fits exactly on the neck. I copied the shape of the face and place it in front (command/control + f), then I used the Scissors Tool to cut off the part I don't need and drew the other parts of the path using the Pen Tool. For the lips a subtle red radial gradient is been used (instead of flat red).

The hair

For the hair I added extra paths to give it more color. The color variation in the hair adds extra dimension, detail and it gives the girl also a more 'modern' look.

Adding the right eye, adding shadow on her forehead

The left eye wasn't drawn yet in part 2, the hair covers her eye, so you could decide to leave it out. However it feels unfinished and a bit odd to me not to draw the left eye. It's also better to finish the right eye first since we will copy it to create the left one. You simply mirror (and if needed, rotate) the eye, except the eyeball of course. To finish her face I've added some shadow and highlights: an extra shape to highlight her nose, same for her left cheek and chin and a radial gradient on the shape of her face to add a bit of shadow on her forehead.

Adding extra shadows and highlights

I've added subtle shadows and highlights on her skin and clothes by using subtle gradients or adding a highlight shape, a small line that follows the border.

Adding a background

Last but not least I've added a background. Since she's wears a swimsuit (or kind of), I thought of adding the beach in the background. So I added sky, water, sand (with a tiny bit of structure), a beach chair and some boats to finish it off.

The before and after effect

In case you need me to refresh your memory, this is how the illustration looks without any finishing touch. Not bad but far from complete, just basic. Never forget the extra touch. Go the extra mile, but just remember to keep it well balanced.

Most of you will already know that I use Expression Engine as tool for my site (further referred to as EE) and that I enjoy working with this tool mainly because of its flexibility and user friendlyness.

Today I want to unveil some of the EE implementation of my site, in particularly the template part. No real secrets there, but I can imagine that some people are considering EE as blog tool and I want to give them an introduction. I'll explain how I implemented : my header, the last 2 months on my archive page and my related links. This is of course how I did it, no idea if there are better and more efficient ways. Anyhow, this method works for me and I like to share this with you.

General setup and templates of my site

First off, let me introduce you how my site is set up in general. Maybe not that well known but you can set up several blogs with EE in a very easy way. No multiple installs etc. just click "Create new Weblog" in the Weblog Management. You can use a different weblog for each section and change the word "weblog" to the word "section" (or another word) if you like. There is a lot more to tell you how to get your site organized. The best thing to do is to analyze the structure of your site and decide from there if the sections will be treated as 'categories' or as separate 'weblogs'. It depends on a lot of factors and the main thing is to give it a serious thought before you start to set up things.

My different weblogs

These are my different weblogs:

• Veerle's blog
• Veerle's art
• Art
• Approved

As you can see I run 4 blogs. Each of those blogs have their own templates, but some of them are 'shared'. Shared in a way that I reuse them as in 'nesting' them into other templates. Templates in EE are stored in template groups. I've set up a template group for each weblog. My nested templates are stored in a group called 'includes'. This group contains: my header, my footer, my art to the right, my categories, my flickr images and the sidebar (which contains "previously", "what's cookin" and "search"). These parts are all repeated over my site. If I need to do an update in the header, footer or any other element I only need to do this once. Very clever and easy ;) Even my CSS files are stored in templates. You have total freedom over the (X)HTML code of these templates, no restrictions there. See what I mean with flexibility? These are called 'templates' but they are far from the templates that most people would call them ;)

Overview of my templates

These are the main templates for my main weblog (Veerle's blog), not including the CSS files:

• index
• contact
• about
• links
• archive
• archive-summary
• comments
• comments-preview

Since there is so much I could talk about, I decided to pick 3 interesting subjects:

• The implementation of the header
• The implementation of the related links
• The implementation of 2 latest months on the archive page

The implementation of the header

As I told you already, my header is stored in a separate template, which is used as 'nested' template and stored in a template group called 'includes'. This template is implemented in all the main templates. Updating the header means only updating this template. The header contains the illustration, the links at the very top and my main navigation. The fun part is the navigation, since I use an "active" state for the pages : home, about, archive, contact and links. This all purely done by CSS, no EE magic here, just you read on...

I use the embed EE tag for my header. So each page has this tag:

In my body element I use a different id for each of the pages. Each list element (each 'li') has a separate id, so I have

As promised this the sequel to our chat about the Net2 project that I finished a while ago. In part 1 I talked about creating the brand/identity for NetSquared so if you didn’t read it, I suggest that you go there first to get a better understanding about the project. This part will be about the creation of the website. Once you have the final logo and colors beaten down you’re all set to start the design phase of the website.

The first building blocks

I don't know if all designers work in a similar fashion but the logo and colors are always my starting points. I know that some don't think about color right away, but I almost always do because color has such a huge impact on the final outcome. Another element that is important to the first building blocks is communication. That's where I always find a great difference between let's say a Belgian or US company. Here they tend to organize a meeting for every little detail and the motto is "the more the merrier ". I mean no disrespect but most of those are a pure waste of time. I understand the necessity to sometimes meet face to face but from my experience many of them could be handled by just supplying me a document with the goals of the project. That is something that a client should know from the start of the project or it will became a problem later on. So far we never had a communication problem with a foreign client thanks to all modern technologies iChat, iChat Video, Skype, etc. The time difference is only a matter of setting out some guidelines that you are not longer available after a certain hour.

The Design

The goals for the website were to give "Share and Build" the most visibility since the project was about helping hundreds of thousands of non-profit organizations (NPOs) and non-governmental organizations (NGOs) successfully utilize the community empowering capabilities of the Internet to increase their impact and achieve social change. The first thing I created was the header. My mind was already sure to use rounded corners because those elements are also found in the Chalet typeface of the logo. To visualize the build and share items I came up with the idea to create icons in a similar look as the icon in the logo. The last element of the page is the navigation at the bottom. My client really loved the way Flickr used their navigation and wanted something similar for Net2. Personally this was not one of my favorites decisions because I thought about the inner-pages and the fact that these could be very long, so the user had to scroll all the way down. Another tough cookie design wise was to make something beautiful of all the items that needed a place in this navigation.

The challenges that we faced

In each project a designer faces there are challenges that one needs to overcome. That was no different in this Net2 project. If you are a passionate designer your work is like a little baby and you want it to treasure it as long as possible. Reality is harsh and that's especially true when the marketing people enter the scene after seeing the design. They like the design so the sales people are not the boogie men but they always need the largest screen estate for sponsoring. In the case of a non-profit this the life line of the project, so it's very important. In my initial design I placed the sponsors under the content in a subtle way. The problem was they were outside the 800x600 area by a fraction and the sales people didn't like that. So I had to rethink my design again. Below you'll find some of the design iterations.

You'll even notice that there is a big difference between what is online now and my final design. The sponsor logos are much bigger. It comes down to the point that you have to let it go at a certain point and hope that the client understands the value of keeping things professionally and pretty design wise. I could waste a lot of time in bringing issues forward to the client each time I see something that is not right but that's the real world for you. I am a perfectionist so that's my problem ;o)

Interesting stuff on the site

It is cool to read how technology can help the non-profits sector. Of interest is also the vlog section, short video interviews with interesting people like Matt Mullenweg, lead developer of the blog software WordPress, Buzz Andersen, developer of Cocoalicious and PodWorks, Craig Newmark of Craig's List and Mena Trott, President and Co-Founder of Six Apart.

The NetSquared Conference

Their conference in San Francisco is coming close now (May 30th) and they have a huge list of interesting speakers like Chris Messina of Flock and BarCamp/WineCamp and Tantek Çelik, Chief Technologist at Technorati and co-founder of the microformats.org, two gentlemen that I had the pleasure of meeting briefly at SXSW in Austin. I hope it will be a huge success and I wish them all the luck. Deadlines where tight sometimes but I really enjoyed working on this project ;)

In what seems like a never ending saga of building a house we were faced with the question what about lightening not so long ago. From what I understand most people don’t really think about light, but they should really. Light is no longer just an essential element that is needed when it is dark. Light and illumination can bring a personal, artistic or dynamic touch to your home. It sets a mood, so Geert and I both agreed that we needed some research on this matter. The best surprise of this research was that Belgium is blessed with some leaders when it comes down to light architecture/design.

We had no clue where to start

Luckily the Internet and Google became our partner in this investigation (aren't they always?). The outcome of the research was all the more surprising to be honest. According to our research two companies are at the forefront of light design and a coincidence or not both of them are situated in Roeselare. Roeselare seems it has a lot to offer design wise, you also have "'t Casteelken" there. You see work from designers like Antonio Citterio, Ame Jacobsen, Maarten van Severen etc. But back to the two light leaders, they are:

• Deltalight
• Wever and Ducré

Deltalight

Deltalight was a name that rung a bell in my head. When visiting it came back to me that their Flash website had won a lot of prizes in the past. Despite the implementation to go full screen :) The negative effect of an all Flash site is that they aren't that visible on Google. They could benefit a lot from making their site up to par code wise. Deltalight's big catalogue is called the "Lighting Bible". I filled in a form to receive it and after like 14 days I actually got it. Could be faster, but I think it is not that bad for such a heavy and expensive well designed catalogue.

Wever & Ducré

Thanks to our electrician we had the privilege to visit their headquarters and get a tour in the showroom. It's great to get inspired and see all the possibilities with such a simple thing as light. Actually not that simple because to me it sets my mood and light is also the creator of all living things when you start to think about it. The big catalogue of Wever & Ducré is my favorite because it so well designed. The colors, the typography, photographs and placement of items makes this a winner. I'm not afraid to say that I couldn't do it any better.

Choosing was actually the hard part

When you have so much choice it becomes hard in finding just what you want. We had some basic ideas of the style that we want for the house but in these big books almost everything is not an afterthought but a well designed product. Let's say that we spend a decent amount of time in the catalogs to find what we want. But eventually we did and we ordered light from both Deltalight and Wever and Ducré. Light used up a big part of our budget but I'm 100% sure we won't regret it one bit if we are to relax in a cozy atmosphere in a few months time.

Led there be light

No the title is no typo :) I'm referring to the Light Emitting Diodes, the newest thing in architectural light. LED can be used anywhere in your home to add colors to your home decor or to accent some design elements. It's great for creating an atmosphere. Leds are energy efficient, emits no heat and last longer then regular light bulbs. RGB LEDs means 16 million colors at your fingertips to create any kind of lighting we desire.

We choose some led lights for our bathroom, just above the bathtub to be more precise. Another part of the house were we placed led light is in the wall of our stairs to illuminate them. Like with any design decision the clue is not to go overboard since kitsch is always looking around the corner :)

Digital Web just published a pretty long interview with me. So if you are curious in getting a peek, point your browser to their website and read all about it. The interview covers my blog, my work and some other random babble :)

Not sure about you, but when I create buttons for a web site, I always use shapes, especially if the button has rounded corners. These vector shapes have the advantage that they are easy to scale or resize. Combine them with effects and you have the most flexible button ever. Not sure what I mean? I hope I can share something useful with you here…

Drawing the button using the rectangle shape

Select the Rounded Rectangle Tool, enter 4 or 5 px as radius for the rounded corner and draw your rectangle button shape. Double click the layer name, enter a name and then double click to the right of the layer to active the Layer Styles options.

Adding styles

Adding a drop shadow effect

Check the Drop Shadow style and enter 8% opacity, 90 degrees for the angle, 5 px distance and 0 px size (in case you don't want a blurry shadow). Feel free to enter what you think is nice.

Adding a gradient overlay

Check the Gradient Overlay option and click the gradient image. That will bring up the Gradient Editor. Click the first Color Stop and click in the Color below to change it. I used #a4cee6. Do the same for the Color Stop to the right. I've used #56add6. Now add a Color Stop in the middle by clicking right below the gradient in the middle. If it's not 100% the middle you can correct it by entering 50% in the location field. I've used #468bcc for this Color Stop. Now add another Color Stop at this same location. To do this just link to the right of it (below the gradient). I've used #81b3e2 for this new Color Stop. Now change its location to 50%. You should now get the effect shown in the image above.

Adding a border

Check the Stroke style at the bottom and select 1 px for the size and white as color (or the background color you are using).

Adding an extra glow

To finish the button off I added an extra glow on top by drawing a path using the Pen tool. I've filled this path with white and added a little mask to make it fade a bit and less hard. I set the transparency to 50%.

If needed, change the tone of the color

Sometimes you come to the conclusion that the color of the button is not exactly what you had in mind. You can experiment by using the Hue and Saturation Adjustment Layer. I de-saturated the button to make the button less blue and more grey. If you command/control + click on the Layer icon in the Layers palette of the button layer, your button will be selected. If you then select the Adjustment layer and click the Add vector mask option at the bottom of the Layers palette, only your button will get effected and not the rest of your layout.

This is just one way of doing things, it's one way of adding certain effects but there are a zillion possibilities and things you can try out.

PS: in case you have multiple Photoshop documents open, try this : hold down shift + command/control + space and click in the active document. You'll see that you zoom in on all of the documents. If you hold down shift + option/alt + command/control + space and click you'll zoom out on all of them. This is a tip I got from Roger Johansson who accidentally hit the shift key when he was zooming in.

First of all let me apologize for the downtime earlier today. As it turns out there was some sniffer program on or watching the server to scan for passwords. Don’t ask me how it came there in the first place since I am not a technical person and I certainly didn’t put it there. It is the second time since the launch of my redesign that I had major down-time.?

So I am on the look out for a new hosting partner so that this doesn’t happen anymore in the future. With moving to another physical location some more down-time will be needed until name servers are updated. I’m very sorry for the inconvenience that this may have caused and I’ll do anything in my limited powers to prevent this from happening again. Any hosting horror stories to share to make me feel better? :)

Oh man! Never let me design something again for somebody who’s into accessibility, those guys are a major pain in the ass… JUST KIDDING!! :o) Maybe there is a little bit of truth in the fact that it is more difficult to design something really nice and take as good as all accessibility factors into account. So it was quite a challenge because I also had restrictions in what I could change and what I could not…

The scope

As a designer it’s hard to leave things alone. There is always the urge to brush up, replace that, move things around… in other words make drastic changes. Just ‘improve’ a little was the job, and sometimes that’s more difficult than starting fresh. I see it a bit like designing with my hands tied :)

What to keep

The first thing that came up in the conversation was the grasshopper. I see this as the trademark of 456 Berea Street but Roger wasn’t sure he wanted to keep his grasshopper. He was a bit bored with it and wanted to change it, but I advised him not too. He showed me a mockup of the new header he made and it was like “Honey I shrunk the grasshopper” :) It was nice though, but all the beautiful details of his grasshopper were gone. I thought if I would change something it would be the position of the grasshopper and manipulate the background a little bit. Here is the before and after:

The old header

The new header

Organizing

When I looked at the current design (previous as of now), my first impression was that it needed some organizing. There is so much text that I had a bit of trouble differentiating the separate posts and sections. Especially with the text ads, it felt like everything looked too equal to me. My first area of focus was to get things organized in an easy and light way. Adding a bit more space and a bottom line in between sections did the job combined with some typographical changes. For example bigger titles in a new color and font. The Google ads in between articles got a light background to better distinguish them from the posts and making them less obstructive in the process I think.

Tweaking and compromising

And with every design there is tweaking and compromising. As a designer and color lover I like to believe that I’m good at picking the ‘right’ colors, but what seems right to me, doesn’t always seem right for everybody. As an accessibility advocate, Roger puts my choice of colors to the test. A few adjustments needed to be made in terms of contrast. But let me assure you that these are really tiny changes.

The navigation, the initial version

The navigation, final version

We both decided to use the color for the active button as a mouse over effect and give the active button more contrast.

Titles

I always try to take contrast in account, but if you design very strictly to make sure “all” colors are within the limited range of what is ‘generally’ allowed, you’ll have a hard time to make it attractive and nice. Your choices are rather limited. It’s like Roger says in his article too, it’s all about compromising, but I’m gonna be honest here and I wouldn’t like to do it in every design, at least not in every element of the design. The rule of thumb is think about it and make it as good as possible but don’t cut yourself short and try to stay creative design wise. Roger’s site shows the perfect balance, especially since his focus is not on design like my site, but on the subject of accessibility. Knowing your target audience is the clue.

Finishing touch

I guess I always have to add at least a few icons to finish things off and to put my stamp on a design ;) It’s those little details that makes a difference or set a site apart. Of course the whole package needs to be good or this wouldn’t make sense.

Colors of links and icons

A strong complimentary duo

Working on this with Roger was really fun and I learned a lot. We learned from each other since we are very complimentary and we are both perfectionists. You may think we are like the perfect duo and never disagree, but our different areas of work engage some nice discussions :) The funny thing is that mutual respect brings out the best of both worlds. I wish each web project could be like this.

Also read Roger’s post about the redesign.

It’s unbelievable how the rumors are flying again in the anticipation of Monday’s start of the WWDC. It’s that time again where everybody starts daydreaming about iPhones, Tablets, Home cinema appliances, some are new and most of them popup every time there is an event. I’m not focusing on making an educated guess in what’s coming hardware wise but like to think a little of possible interface changes in 10.5 Leopard. I have been wondering what direction Apple will take a few times already. I always postponed writing something about it but this post of Brent Simmons sparked my interest again.

First a little bit of history

I still remember standing in line in Paris to get the first Mac OS X public beta! So before going any further let’s see what changes Mac OS X has had over the years.

Mac OS X Public Beta

When this was launched it was a huge change from Mac 9 and to some it was too drastic. I never had that feeling and wanted to stay away from OS 9 as soon as possible. When you look now at it I’m amazed how overwhelming the stripes really are.

Mac OS X 10.0 - Cheetah

The most visible change here was that Apple dropped the button look in the finder and introduced some new icons along the way.?

Mac OS X 10.1 - Puma

Mac OS X 10.2 - Jaguar

In 10.2 the brushed metal look appears for the first time in some applications like address-book for example. The finder still had the striped look.

Mac OS X 10.3 - Panther

Panther saw the most changes and marked to me also the point that Mac OS X was getting at a mature age. This marks also the introduction of the brushed metal Finder. But one of the best things in Panther was that the pinstripes in the menu background and anywhere else in the OS were nearly invisible. Title bars lost the stripes completely.

Mac OS X 10.4 - Tiger

Tiger didn’t match Panther in terms of the number of graphical changes. One of the changes was in the Apple menu icon, It became a bit brighter and consisted of a flatter shade of blue. It’s now a brighter, flatter shade of blue. The biggest graphical change then was the new unified titlebar/toolbar. Mail for example had the icons in the glassy button look which I really hate.

Windows Vista lessons

Let’s say that I would be very disappointed if Apple took some lessons from the Windows Vista look, where glass and transparency is everywhere. I can’t shake the feeling that it is a bit like when bevel filters first appeared in Photoshop. Everybody was like “look what I created”. I have that same feeling when I look at the Vista interface, they used it too much and all subtleness is out of the window. John Gruber said that he thought Apple was setting out to make Vista look like a toy when compared to a more refined and professional OS X. My thinking exactly. To me Vista is like a theme for ShapeShifter, something fun for awhile. That’s what I have with most themes by the way, I always go back to simplicity and the original look Apple created.

Mac OS X 10.5 - Leopard

I wouldn’t be surprised if Apple introduced bigger icons then 128x128 pixels because I guess they are thinking about what to do with the growing trend of bigger screens and higher resolutions. I think it would be wonderful if the system is smart and detects your resolution and adjusts everything accordingly. Some new icons could be added because I’m bored with the blue default folders.

The Brushed Metal Look

Personally I really hope they will get rid of the brushed metal look, I didn’t like it from the start. First introduced in 10.2 and since 10.3 almost in all parts of the OS. The new iApps could be an indication of the path Apple is following. That look isn’t available anywhere else in the system. Maybe something along the lines of the UNO look.

What I would like

Another welcome change to me would be more subtle shadows. When two windows are on top of each other I find them too hard when the background is white. Most of the icons in the toolbars could also benefit from softer shadows. What I would prefer, is that the windows or any UI elements that are visible but not on top are a bit shaded so that the top ‘active’ window’ stands out more. My guess is that the new UI will have a more subtle use of 3D, shadows and other effects. I’m thinking of a more flatter look but still with a bit of shininess left, maybe a bit like this? (something that I quickly designed):

What bothers me a bit is that Apple has so many different window styles now in the system that I sometimes dream of more consistency. We could benefit from it aesthetically I think and it would end the critique that Apple is no longer eating its own dog-food. Maybe Apple will come up with 2 variations: a dark one and a light one. Black MacBook Pro’s have the dark UI as default and the white ones the lighter one, but both ‘themes’ are available. Apple likes to work with either black and white these days and they like to reflect the look of their hardware in the UI. They used these stripes and a lot of aqua in the first OS X UI which suited perfectly with the look of the Macs back then.

The Finder could learn a thing or two from Path Finder in that regard, so I am kinda hoping that “tabs” will make into 10.5.

I’m also wondering what Apple will do with the aqua effect: the scrollbars, the 3 top left bullets etc. My guess is that they will dump it, or let’s say reduce the effect to make is less bubbly. What I’m saying would mean a drastic change. It’s a very wild guess I know. I could be totally wrong :) Although my guess is that Apple is thinking ‘we had this, it was cool for that time, it’s passé now, let’s move on’.

So what’s on your Leopard list?

Have you ever wondered how you create a seamless pattern in Photoshop? It’s easy and it’s fun. Let me show you how…

Step 1 - Create a Color Fill

First of all create a vector illustration in Illustrator CS2. It might be just a simple dot or circle. Copy this object. Go to Photoshop and create a new document of 300 by 300 pixels. Select the Rectangle Selection Tool from the Toolbox and drag a squared selection (hold down shift) in the center of the document. Leave enough space around the square. Click on the Create New Fill or Adjustment Layer in the Layer's Palette and select Solid Color. Select a color you like and click OK.

Step 2 - Paste your Illustrator object

Paste your Illustrator object. Select Smart Object in the Paste options. In the View menu, make sure that Smart Guides are active (Show > Smart Guides). Snap and Snap to Layers should also be checked.

Step 3 - Place your object over the border

Drag your object over the border of the Color Fill. If you see the Smart Guide and feel the object 'snapping', release the object.

Step 4 - Drag a 2nd object on the other side of the border

Duplicate the layer (drag the layer in the Layer's Palette onto the Create New Layer icon). Now drag the object over the bottom border of the Color Fill holding down the shift key. Again, when you feel the Snap effect release your mouse.

Step 5 - Drag other objects on the other side of Color Fill borders

Repeat step 3 and 4 for the left and right side of the Color Fill.

Step 6 - Fill up the 4 borders of the Color Fill

Make sure the border of the color fill is nicely filled. Play around with the shape by transforming it (command/control + t) and using different Layer transparency values. Just make sure that each shape on either side is still the same, so that in the end the pattern will match seamlessly.

Step 7 - Fill up the middle of the Color Fill

Now fill up the middle of the Color Fill. Make sure you have enough variation. You might need to turn off Snap and Smart Guides. Once you're finished, click on the Layer Mask of the Color Fill Layer in the Layer's Palette holding down the command/control key. The Color Fill is now selected. Go to the Edit menu, select Define Pattern and give your pattern a name. If the option is greyed out, you just need to select another layer. Now do the test by creating a new document (make sure it's big enough to see the effect), hit command/control + a and go to Edit > Fill and select your pattern.

Step 8 - Play around and experiment

As you can see, my example with the flower is rather flashy. Because we've used Smart Objects, we can change the pattern in a rather quick way. Double click the Smart Object icon on one of the Layers. This will open the object in Illustrator. Now change the shape into something else, use other colors etc. Save it and close the document. Go back to Photoshop and you'll see that all Smart Objects will change to the new one. Change the color of the Color Fill. Go to Edit > Define Pattern and save your new pattern. Create as much patterns as you like, all in a rather fast and smart way :)

See? This is fun. Still, make sure to use patterns like the one I made here with caution, don't overload your design, make sure there is enough breathing space. Otherwise it could be too flashy and playful... unless that's exactly what you are looking for of course.

In what seems like a never ending saga of building a house we were faced with the question what about lighting not so long ago. From what I understand most people don’t really think about light, but they should really. Light is no longer just an essential element that is needed when it is dark. Light and illumination can bring a personal, artistic or dynamic touch to your home. It sets a mood, so Geert and I both agreed that we needed some research on this matter. The best surprise of this research was that Belgium is blessed with some leaders when it comes down to light architecture/design.

We had no clue where to start

Luckily the Internet and Google became our partner in this investigation (aren't they always?). The outcome of the research was all the more surprising to be honest. According to our research two companies are at the forefront of light design and a coincidence or not both of them are situated in Roeselare. Roeselare seems it has a lot to offer design wise, you also have "'t Casteelken" there. You see work from designers like Antonio Citterio, Ame Jacobsen, Maarten van Severen etc. But back to the two light leaders, they are:

• Deltalight
• Wever and Ducré

Deltalight

Deltalight was a name that rung a bell in my head. When visiting it came back to me that their Flash website had won a lot of prizes in the past. Despite the implementation to go full screen :) The negative effect of an all Flash site is that they aren't that visible on Google. They could benefit a lot from making their site up to par code wise. Deltalight's big catalogue is called the "Lighting Bible". I filled in a form to receive it and after like 14 days I actually got it. Could be faster, but I think it is not that bad for such a heavy and expensive well designed catalogue.

Wever & Ducré

Thanks to our electrician we had the privilege to visit their headquarters and get a tour in the showroom. It's great to get inspired and see all the possibilities with such a simple thing as light. Actually not that simple because to me it sets my mood and light is also the creator of all living things when you start to think about it. The big catalogue of Wever & Ducré is my favorite because it so well designed. The colors, the typography, photographs and placement of items makes this a winner. I'm not afraid to say that I couldn't do it any better.

Choosing was actually the hard part

When you have so much choice it becomes hard in finding just what you want. We had some basic ideas of the style that we want for the house but in these big books almost everything is not an afterthought but a well designed product. Let's say that we spend a decent amount of time in the catalogs to find what we want. But eventually we did and we ordered light from both Deltalight and Wever and Ducré. Light used up a big part of our budget but I'm 100% sure we won't regret it one bit if we are to relax in a cozy atmosphere in a few months time.

Led there be light

No the title is no typo :) I'm referring to the Light Emitting Diodes, the newest thing in architectural light. LED can be used anywhere in your home to add colors to your home decor or to accent some design elements. It's great for creating an atmosphere. Leds are energy efficient, emits no heat and last longer then regular light bulbs. RGB LEDs means 16 million colors at your fingertips to create any kind of lighting we desire.

We choose some led lights for our bathroom, just above the bathtub to be more precise. Another part of the house were we placed led light is in the wall of our stairs to illuminate them. Like with any design decision the clue is not to go overboard since kitsch is always looking around the corner :)

Digital Web just published a pretty long interview with me. So if you are curious in getting a peek, point your browser to their website and read all about it. The interview covers my blog, my work and some other random babble :)

Not sure if this is a cool tip, but this is something I always do when I start on a full bleed design in Photoshop (I mean a design for print, obviously). I thought I share this one with you…

Here is was I do:

• I create a new document using the exact dimensions
• I add guides on all sides of the document (make sure Snap to Document Bounds is checked in the View menu)
• I add the bleed area by enlarging the Canvas Size (Image > Canvas Size)

For me it's just a logical thing to do, but I know from reading the comments on my blog, that everyone does things differently. I'm curious now, do you do exactly the same or do you have a smarter trick?

In one of my previous posts I promised that I had some more news about what is going on in my world lately. As most of my readers know I’m always pretty busy and the balance between work and life is mostly in favor towards work. I’m not complaining or anything, in fact that’s how I like it. But a few months ago we received some news that has thrown everything out of balance completely.

Unexpected news

Two months ago on a beautiful Friday morning the postman brought us some disturbing news from our landlord that we need to leave the building. We have lived here for twelve years and knew the owner rather well. He lives just across the road so we saw him several times a week, but still he failed to mention any of this news to us. The official notice was the first time. Is it just me or would you expect more after such a time? It's not that we are bad tenants, we always payed on time and even helped him out on several occasions.

6 months to find something...

Luckily for us we live in a country that has its shit together if something like this happens. They have to give us 6 months to find something else, at least a decent period if compared with the US where this is only a month according to my overseas friends. So after the initial shock we did what any true geek would do and that's checking the Internet for a new home. Now you have to know that we stayed at our current place so long because rent was pretty low and we never actually created time to search for something. Always work work :)

Buy or rent?

We both felt that it wasn't opportune anymore to rent something, prices for a place big enough to work and live would cost us as much or more than buying a new one. So after all that calculation work the pretty amazing thing was that it took Geert only 3 pages on www.easy.be to find a place that we both liked very much. But as you know it is always smarter to look around a bit more and that's exactly what we did. We drove around for two weekends but didn't find anything better than our first love. It's true what they say, you have to fall in love with a house and feel its vibe or potential.

Houston we have a house!

Recent statistics showed that 70% of the people in Belgium own a house and now we are included in those figures :) There is even a saying that every Belgian citizen gets born with a brick in his stomach. As any house owner knows it comes down to money, so as you guessed by now we had to talk to several banks too to get the best deal. Luckily for us we have an accountant that is a true diamond and he helped and assisted us in this matter. We own him a great deal of gratitude!

I'm proud to say that we now own a house that will also have enough room to fit Duoh! our company. It's a new house that they are still building only a few minutes from where we live now. You also have to imagine that most people prepare such a life changing thing a year ahead. We didn't know anything about building a house at all, the work and exploration that comes with it like choosing tiles, parquet, bathroom, kitchen, lightening etc. We never spend so much time in shops as of late!

• Groundlevel blue print
• 1st level blue print

So much to do and to plan + some reader advice...

Of course it's all exciting and if you know me from my work environment posts, you know I like to decorate. But for painting we will have to wait for a year because the plastering of the walls needs to dry out. That's not bad at all since there is so much else to do. That's were I hope I can learn a little from my readers too. For example we are thinking about contacting a carpenter to:

• Create an table like the ones you find in the Apple Store.
• Another thing that comes to mind are custom made built-in cabinets.

I was wondering if any of my readers have experience in this and would like to share tips and experiences in the comments. Is this something that is expensive? Materials don't have to be top notch just good looking if you know what I mean. Another thing that I would like to know a little more about is:

• working with a landscape architect to design your garden

So if you have something interesting to tell, please don't hesitate. It can be about anything that has to do with building a new house. Thanks in advance angels :)

Some of you asked for an Expression Engine tutorial a while ago and I thought today would be a good moment to explain how I implemented the comment boxes on my site. There is a lot to talk about so lets move ahead and get on to it…

What's on the EE menu today:

• Alternating comment boxes and your own comment box
• The use of gravatars
• Permalink a comment
• Number the comments
• Hide the e-mail address and show URL
• Date and time stamp

Alternating comment boxes and your own comment box

Having the comment boxes alternate in style is a must. It gives a nice overview, it's more pleasing for the eye. Having your own comment box is even better. It's not that difficult to implement. I'll show you how.

The static XHTML code

Let's have a look first at our static code:

The outer div has a class "comment-box". This div will get another class named "comment-box-alt" for the alternate style of this box and a class "comment-box-v" for the style of the box when I enter a comment.

The EE code

And here is the EE code:

What I did is using the "switch" variable. BTW, you can add more then just 2 styles.

To give my box a special style, I used a conditional variable, which allows you to conditionally show or hide information based on criteria being met. In case you want to highlight your own comment box, you could check this by using your e-mail address. "!=" means "not equal to" "==" means "equal to".

Have a look at the complete EE code

The use of gravatars

For the gravatars I use Les Jenkins' plugin which works with gravatar.com. Just download the plugin and place it in EE's plugins folder on your server. Then add the proper EE code (shown in the image above).

Permalink a comment

To give each comment a permalink I use the comment_id variable. Because these are pure numbers and I want my code 100% W3C valid, I added "c_" in front.

Number the comments

Just add the variable count (the word count between curly brackets) to number your comments.

Hide the e-mail address and show URL

To hide the e-mail address of user, make sure that the "Automatically turn URLs and email addresses into links?" EE Admin is set to "No". You'll find this in Admin > Weblog Management > The name of your blog > Comment Posting Preferences.
As you can see I've used conditionals again: if the URL field in the form is not (!=) empty, then render the link and if not than the link won't be rendered and you'll only see the name. Notice how I added this conditional around the "a" element in 2 separate parts. I added it around the opening tag and a second time around the closing tag.

Date and time stamp

The date and time stamps are also pretty easy to do. Well, everything is, you just need to find the proper code :) I always browse to this overview of the date and time formats you can use in EE.

Additional info

The word "comment" between curly brackets will render the comment. The "link" between curly brackets is a variable I've created that replaces my URL. So each time I want to use this 'path' I just type "link".

Hope you enjoyed my mini EE tutorial. Don't forget to browse the user manual. You'll find a bunch of information there. And if you just start on implementing your templates, make sure you copy the default templates in a separate template group and use them to learn from. Well, that's how I did it ;)