Creativity in the workplace

I’ve talked about this a bit at WDN with Dave in our presentation. A good idea is more likely to origin from an inspiring environment than from an uninspiring work place. I think that’s a great starting point for today’s post. Personally I think it would be great if at the end we all snap a shot of our working environment and inspire each other. How you decorate your personal space is only part of the larger picture of course.

Creativity defined…

According to the Encyclopedia Britannica Online the definition of “creativity” is as follows:

The ability to make or otherwise bring into existence something new, whether a new solution to a problem, a new method or device, or a new artistic object or form.

To me personally creativity is to master and control the random chaos in my head and bring all separate pieces together into harmony. It’s making the most out of a complex mental process.

There are many forms of creativity. We designers have a different view than for example programmers. But what people sometimes forget is that a programmer needs to be inspired also. It’s not because it looks more boring on the surface that it doesn’t have its influence on the end result. A DJ can be inspired by the reaction of the crowd to his music and know what to next.

What makes a workplace inspiring?

For me it’s hard to believe (because I’ve always been my own boss right from school) but there are people who see their workplace as a source of anxiety, stress and despair. A happy worker is creative and productive that’s what I’ve always believed. Let’s explore a few ways that can have an influence on the state of mind of the worker.

Listen

One way could be to listen to all ideas and explore them regardless of its origin. Making everybody feel part of the team regardless of his or her job description. In the case of programmers I know that some companies let their employees work on personal pet projects during working hours on a given day in the week. In many circumstances that’s the origin of a product or feature that a company later can use.

Play

Another one is let people play during work. I know for example that my friends at Happy Cog have a Wii to play with during business hours. At the Googleplex employees can shoot pool while taking a break in one of several employee lounges. They also have a large idea board and a 2 swim-in-place pools. It doesn’t stop there, Google employees can also take an afternoon volley ball break at Mountain View campus. I’m not sure if it’s still the case now, but in the past people at Apple were allowed to bring their dog. All this is in place to keep the worker motivated and happy. When a worker is happy he is more motivated and it’s not just doing it to receive a paycheck. I like to believe that a web-designer that works at such a motivating place will likely be more interested in using new methods and go the extra mile than a worker that just thinks about his paycheck. It’s all about having a passion for what you do and making it pleasant is just one aspect of that process.

Coworking

Another example of an inspiring environment could be to share it with other people. In Vancouver Dave Shea talked about him working at a shared office called ‘Workspace’. Two people who also started such a project last year are Tara Hunt and Chris Messina, it’s called ‘Citizen Space‘. It’s a nice place in San Francisco which is generally open from 10am – 6pm weekdays. They have a few residents but you can also drop by when you are in SF and use their Wifi etc. They also organize interesting things like a speaker training on the 21st of April. I’ve met both Chris and Tara and I can imagine working there must be lots of fun and inspiring. Some people also like to work at Coffee houses like Starbucks. I’m not sure if we have those coworking places in Belgium, at least not in the same setup as Citizen Space.

Decorating your workspace

For me the place around me and the things I need to look at are very important in finding my creativity. It comes down to many things like outside view, building (architecture), furniture, color, computer etc. We are still in the exploring stage to decorate our office.

Joyn

I kind of like the idea of something called ‘Joyn‘. Vitra calls it the platform for the network office. What I like about it is the flexibility that comes with it. On some projects we have to work together more closely and I like the idea of just reorganizing our desks to accommodate for that. If only they would place as much thought in their web presence as in their design : : : sigh : : :

Some examples of Joyn

Vitra - Joyn - Project: BBC, Birmingham (GB) - Photographer: Nick Kane

inspiring examples

Pixar

At Pixar there aren’t any grey cubicles because their employees have the freedom to decorate as they see fit. The end result looks amazing! My personal favorites are the little huts in a row, where each hut is a separate office.

Pixar offices

Red Bull London

That’s the most advanced I’ve seen so far to be honest. You’re upstairs and you don’t feel like taking the stairs, no problem just glide down in the carbon slide instead πŸ™‚ It immediately makes you feel that there’s no room for grey and tie wearing salesmen.

Red Bull HQ London

Mindlab

The Ministry of Economic and Business Affairs in Copenhagen, Denmark has Mindlab. It’s a meeting place for all employees. Its heart is an egg shaped meeting room with walls that are whiteboards so that you can write on any wall.

Mindlab

These offices were also mentioned in this post

Clearleft

The guys at Clearleft did something nice with their new office too. The oversized clothes pegs and letters are a nice touch. If I remember correctly the tables were custom built.

Clearleft office

What is your idea? How would you do it?

So what’s the perfect working space in your mind? What do you do to get it? Does it have to be modular so it can change often? What makes you feel good? I’m really interested in hearing your ideas about this subject.

Post your office picture in the group

I already did it in the past and would like to do it again, but a little different this time. I’ve set up a Flickr group called ‘Inspiring workplaces’. So if you would like to post your personal space there, that would be super! It’s my hope that this group grows to be a big group where you can go to and absorb some inspiration of other people’s working space. So go ahead and snap a picture of your desk and become a member and post it to the the group.

How to add your picture to the group
  • Become a member of the group
  • Upload your picture
  • Use ‘send to group’ and choose the ‘inspiring workplaces’
Adding the picture to the comments
  • Click ‘All sizes on Flickr for the static url and use the code of number 1
  • Make sure the width is 640px tops. If not resize it by using the ‘width’ and ‘height’ in the code

The new Duoh! logo identity

When we created the previous Duoh! logo (that is still online on my business site), our main goal was to build a more serious approach. I believe it fits its purpose, but we now feel it’s time to move on and rethink our corporate image. Let me share my thinking process with you…

Brainstorming session

Duoh!Geert and I were thinking that our current image didn’t really fit the company we really are. The old Duoh! logo presented a serious corporate image based on our 3 areas : print, web and multimedia. The logo was very business like and less focussed on what Duoh! is all about: design and most of all being creative. We both agreed after some self-analyzing that we needed a logo that showed a more illustrated style. It should be creative, fun without overdoing it and a touch of humor. We do take our job serious but we do believe that creative people have a lot of imagination and that humor is an important factor in originality and being different. Besides poking fun of oneself is better than taking yourself too seriously πŸ™‚

Doodling to get inspired

So I started sketching. Geert suggested me to think about a simple icon, so that we could use that as a single identity. The first idea was to do something with a typeface, with the “o” in the name.

My very first doodling to get inspired for  the new Duoh! logo

While doodling I came to the idea of turning the “o” into a “cute” devil. I added devil horns and a devil’s tail. I was also thinking of adding a very busy colorful background illustration that would reflect our creativity. My idea was to work with a vertical illustration border that is divided by the logo into 2 parts : the top had warm colors, representing passion, the passion for our work; the bottom part showing cold colors representing the “cool” and “chill” factor shown by water and other swirly forms.

Duoh! little devil icon with warm and cold illustration artwork from sketch till Illustrator artwork

Going back to our roots

It didn’t look that bad, the creativity factor was there, but the illustration stole all the attention. If we deleted the illustration and looked at the naked logo, we still felt it was not what we were looking for. Then it hit me. Why not have “us” Geert and “I” in the logo? After all, the name came from being with 2, a couple, a “duo” in Dutch. The other “h” and “!” at the end was added because “duo” is too general and not really all that exciting for a creative business like ours. So I changed that into “Duoh!” which stands for “duo+oh!”, the “oh!” is the reaction we hope people will have when they see our work πŸ™‚

doodles of couples as an idea for the Duoh! logo icon

Designing the logo shape

Now that I got this new idea for the icon of the logo, I did some more sketching and doodling of couples, man and woman faces and such. When I had a few basic ideas on paper I tried them out in Adobe Illustrator. Most of the time I don’t doodle very long for a logo. I want to try it out in Illustrator as soon as I have some basic ideas. Illustrator provides you the freedom and flexibility to play around and experiment with shapes all in a matter of seconds, minutes. Sometimes when I sketch on paper I wish I had this same undo option πŸ™‚ I’m so used to that.

playing around in Adobe Illustrator to get to the right Duoh! icon

Finalizing the logo shape

After playing around with shapes we ended up with a logo we both liked. I added bubbles and stars above our heads symbolizing the ideas we brew for each project and the magic we use to achieve that.

Choosing the colors

Personally I find it hard to choose colors for your own project. I end up with too many choices and being indecisive. Geert came to the rescue and the first 2 colors he chose were just perfect. They fit “us” and the office as well, since the grey is as good as the same color as the window frames of our new office. We are thinking of having our logo on one wall and maybe a light vertical illustration (of the bubbles and curls we use on our stationery) on the other wall next to our office windows.

Experimenting with colors on the final Duoh! logo

Finding the right tagline

The final Duoh! logo with taglineWe thought to emphasize our new identity by adding a tagline. One thing was for sure, we didn’t want a tagline just to have one and to sound hip or cool. We also didn’t want a tagline that sounds serious, traditional, corporate or boring. We always believed we are different from our competitors. This is a tough job if you ask me since taglines are short, max. 3 or 4 words. Geert came up with this funny tagline I loved from the very first moment: “beauty & brains”. We received the reactions we hoped for when we were wearing our Duoh! t-shirts at SXSWi. People found it smart and fun and some asked “So? Who’s brains and who’s beauty?” πŸ™‚ It looks like I’m brains, No? πŸ˜› That was exactly the result we were hoping for. Of course we are referring to what we do, design is beauty and you need to use your (creative) brain to create smart design. After all design is about problem solving. Because of the logo icon this tagline has humor, and that’s exactly what we wanted to achieve.

Stationery design

One thing we both agreed on was to add some illustrations in the stationery design. The mistake of making this far too overwhelming was still fresh in my head, so I decided to go for a light and subtle approach. What I did like about my first illustrations attempt was the curvy rounded vertical shapes. So I decided to reproduce the same idea. The result is much different and exactly what we both wanted.

Illustration art to use on the Duoh! stationery designs

We both believed by making this illustrative effect part of our image, it would emphasize our creativity even more. People would link Duoh! more to design and illustration. This was far from the case in our previous logo. The more serious approach is something that didn’t work for us, because it’s not who we are. We like to be taken serious in our job, but I believe our track record, years of experience, list of references is doing that for us and not our logo.

Photos of the new Duoh! stationery

For the letterhead I can give you this little tip: don’t forget to add a tiny line on the left side so you know where to fold. You can also add another line in the middle for punching holes for storage in a map.

What’s next?

The task is upon us now to design the site and implement our new design into our invoice application and proposals etc. I’ll keep you posted I promise.

Just Add Heat, one of the projects IÒ€ℒve worked on

Let’s talk about food, shall we? πŸ˜‰ One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called Just Add Heat. The logo and colors were already in place so our job was to to create a few website templates. This brings the perfect opportunity to share some basic CSS information on how the main template is set up.

Introducing Just Add Heat

If you are busy you’ll surely recognize the following scenario. Hard at it and completely gone up in your work you suddenly realize that it is dinner time but there is no food in the house or you don’t have time to prepare a decent meal. That’s were a new trend called assembly kitchens comes in. It’s a place where customers spend a couple of hours putting together a week or a month of dinners they can cook at home. That’s what Add Heat is all about, but I let the owner speak for herself:

I just opened an assembly kitchen near Toronto, Canada. While this is a very new concept here (mine is the 9th such facility in the country), these assembly kitchens are spreading rapidly across the U.S. with an estimated 1,100 locations by the end of 2006. It’s a large kitchen where customers can come and assemble family sized, healthy meals in record time. It takes about 10 minutes to put together something like a spicy chicken stir fry or pork tenderloin with apricots and raisins. We provide all of the ingredients that are chopped, washed and ready to go, plus all of the mixing/measuring utensils, and freezer friendly packaging (we also clean up!). Just Add Heat opened August 15th and in less than three weeks it has proven to be a much needed service. Part of this success can be attributed to Veerle Pieters as she created a fabulous website that is easy on the eyes and unintimidating for all. It was great working with her because she understood our wants and needs very quickly – making the birth of the website pain free and fast.

Inside Just Add Heat

It was great working with the people from Just Add Heat and a fun project and subject to design for. I’m very happy and honored they choose Duoh! for the design of their website and I’m double pleased that the business is going so well. It’s amazing how you learn about new things in other countries. Assembly kitchens isn’t something that is available to my knowledge in Belgium yet.

Setting up the template

Here is a picture that shows you how I divided the different areas of the page:

Just Add Heat template layout

As you can see from the CSS below and the picture above, I use 2 wrapper ids and within these I have again 2 content areas:

  1. body {
  2. font:75%/150% "Lucida Grande", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
  3. background:#646464;
  4. color:#666;
  5. }

The body element has the grey color as background and the primary-content-wrapper id and secondary-content-wrapper are stretched over the entire width (100%):

  1. #primary-content-wrapper,
  2. #secondary-content-wrapper {
  3. width:100%;
  4. text-align:center;
  5. }

The primary-content-wrapper id has the background image repeated horizontally. The rest of this area is filled with a very light grey color:

  1. #primary-content-wrapper {
  2. background: #f0f0f0 url(../images/bg-primary-content.gif) repeat-x;
  3. }

The secondary-content-wrapper has a border of 6 pixels at the top:

  1. #secondary-content-wrapper {
  2. border-top:6px solid #585858;
  3. }

There are probably different ways of doing this and achieving the same result. Some of you might find this piece of code a bit too basic to learn from, but from the e-mails and feedback I get I know that a lot of you are still starting to learn CSS. Hopefully by sharing this part of the project I help you to get a better insight on how to think in divs instead of tables.

However reality is, that you don’t always have total control over the outcome. So there are a few things I would have done differently code-wise, but hey, it’s already an improvement from a total table-based website. I don’t want to be a code-nazi, but the urge is always there to correct. “Let it go Veerle” that’s what I tell myself πŸ™‚ Further from that, I wish the people of Just Add Heat all the luck with their new business. I think I would be a regular customer if it was nearby πŸ˜‰

Spraying Symbols in Adobe Illustrator

Say, you want to draw a tree in full Spring, a very green one. Not just an outline you want details too so that you actually see the leafs. Unless you have a ton of time on your hands or you’re paid by the hour, it would be a hell of a job to draw each leaf one by one. This would be one of the many situations where the Symbol Spaying Tool can be of assistance.?

Step 1 – Create a few symbols to spray with

First of all you need to create a few symbols to have a bit of variation to work with. Instead of creating a symbol of only one leaf, I suggest to draw groups of leaves and make them separate symbols. To do this, just select the group of leaves and drag & drop them in the Symbols palette. I’ve used different shades of green for my leafs.

Step 1 - Create a few symbols to spray with

Step 2 – Set the Symbol Sprayer Tool

The second step is to double click the Symbol Sprayer Tool in the Toolbox and adjust the settings to your wishes. This can be a bit tricky and you might need to experiment a bit to find the setting that fits your purpose. I’ve used an intensity of 7 and a Symbol Set Density of 5. Furthermore I’ve changed all dropdown menus to “User Defined”.

Step 2 - Set the Symbol Sprayer Tool

Step 3 – Let the fun begin and spray like you’ve never sprayed before

Once you’ve discovered the desired setting you can start spraying around. Oh and you don’t have to worry about damaging the ozone layer here, you can spray like a madman πŸ™‚ Just click and drag, release the mouse when you think that there are enough leaves. I usually deselect each time I’ve released the mouse. This way you have all separate sprayings, so you can move them around and rearrange them a bit if needed.

Step 3 - Let the fun begin and spray like you've never sprayed before

Step 3 - Let the fun begin and spray like you've never sprayed before

Don’t stop experimenting

Spraying Symbols in Illustrator
If you’re still not satisfied with the result, you can also tweak a bit by using the Symbol Shifter, Cruncher, Sizer, Spinner, Stainer, Screener or Styler Tool. These tools are hidden under the Symbol Sprayer Tool when you select and hold down the mouse. Think about the possibilities here in this tool and the amount of time you can save: a field full of flowers, a sky full of birds,… Ah Spring, can’t wait till it’s here. The weather forecast isn’t looking that bad for this week.

Quick and dirty report on SXSWi07

This is Veerle reporting about my SXSWi 2007 adventures in Austin, Texas πŸ™‚ I can’t really believe that it is over already because it feels like we just arrived in sunny Austin. The flights to Austin via Chicago went very uneventful so that’s a good thing. Returning back home we had a one hour delay in Chicago, but because of favorable winds we made up some of that time. I really had a blast this year and here’s my story if you like it or not πŸ™‚

First day

After a good night sleep we had some extra time to kill before the conference started so we walked around a bit. There is a cool area around the river to walk or sit down and enjoy some warm glows on your face. It’s amazing what that can do to your body, such an energy boaster. It’s at that time I really realized how much I have been missing temps around 23° Centigrade.

The Domain

On Thursday we took a cab ride to a new shopping mall that opened that day for the first time, called The Domain. Like everything in Texas it’s quite big, so we did some shopping. I ended up with some free goodies like a set of cool looking vases from Macy’s. They will look nice on our new furniture πŸ™‚

EllisLab formerly known as pMachine

Talking about pMachine now a company known as Ellislab. I was totally blown away by the magnificent design metamorphose by Jesse Bennett-Chamberlain. This complete re-branding has to rub off some of the greatness, and spread the news about one part of it namely ExpressionEngine. So you can imagine it was the event that I was looking out for on Saturday evening. The pMachine meet-up at the Moonshine grill where we had some good food and drinks. Meeting Leslie Camacho, Rick Ellis (CEO of EllisLab), Derek Jones and Paul Burdick was such a nice and warm experience. It was an honor for me to meet the people behind the tool I love working with. Finally I also got the chance to talk and hang out with the man behind the design as well. The next day we’ve spend lunch together at the Iron Cactus and talked about life and how it came together. Rick you rock for building such fabulous team πŸ™‚ This is what I love about SXSW: meeting people, new people or people you know but never met face to face before. I made quite a bunch of new friends this year, more then last year.

SXSW, the sessions

I have been enjoying and being inspired by some of the sessions that I went to. The only bummer was that this year it seemed that most good sessions had to compete against each other in the morning so that you had like 3 choices and later that day there was nothing really that interesting to attend. The so called power sessions can be a good thing for certain topics but the ones I saw felt like cramped because the speakers needed to rush. A good example of that would be Grids are Good by Marc Boulton and Khoi Vinh. There is a truck load of info to tell and they had to fit it in 25 minutes. I left with a hungry feeling for more because it was so interesting. You can see some of the mockups of this session.

My own session

My own session Design Workflows with Jeff Croft, Bryan Veloso and Kelsey Ruger went pretty well. Didn’t prepare myself really, except for a few notes in the green room. I think if you speak in a panel you just need to have a few bullet points just as a guidance. For the first time I wasn’t nervous and I felt rather comfortable on stage. The only little downside maybe is that I hoped to have talked a bit more about design, meaning more hands-on practical stuff. All in all I guess we all did fine and it was an honor to talk with these panel members. There is a mini site about the panel that contains some resource and interviews with other people about their routines.

My 3 favorite sessions

A Field Guide To Finding Inspiration

On Saturday the session that I enjoyed the most was the one with Jason Santa Maria and Rob Weychert about A Field Guide To Finding Inspiration. Rob and Stan are a good match and I can’t believe how much fun those guys have with all their special costume parties. If you see the slides you’ll know what I mean. Rob also showed Virtual Stan who still makes me laugh every time I see it. You can already listen to the podcast, download the slides or watch a videoclip.

Ajax Kung Fu Meets Accessibility Feng Shui

I already missed Jeremy’s session with Andy Budd called How to bluff your way in to Web 2.0 (video and slides), so I was glad I could attend Jeremy Keith’s other session about Ajax Kung Fu Meets Accessibility Feng Shui with Derek. The conferences before there was always this coincidence that our sessions were at the same time as well. So I was really looking forward to this one all the more because Derek Featherstone is a guy who makes accessibility sound sexy, and I tell you, he keeps you focused. I loved the practical examples they were showing. You actually learn something and even though the subject is rather technical for a designer like me, all of what they were talking about made sense to me. Jeremy has a way of doing that, making something complex sound easy, he does that very well in his book DOM Scripting too.

Web Typography Sucks

On the last day Richard Rutter and Marc Boutlon talked about typography. The title was Web Typography Sucks. The session covered the use of proper characters, vertical rhythm & browser defaults on margins, layout of lists, font stacks & choice of type faces, the relationship between type and grids, and discussion of where typography is in the design, development and production process. To me personally this was the best one of the whole conference with interesting examples. I left with the feeling that I really learned something. Can’t believe it was Richard’s first one as he handled it like a real pro. You can download the slides and see some resources on webtypography.net.

Tip for next year parties

To everyone I talked with, people love going to these parties, but they all find them much too loud. I wonder why they always have to turn up the volume so loud that you can hardly talk to each other. It is rather ridiculous since these events are just about meeting new people and making new friends. Buzzing ears before you go to sleep and loosing your voice because of the shouting is the result you have instead. Somebody should setup a lounge area with comfy bean bags, or like Shaun said, mattresses and ask Miguel Migs to play some San Franciscan chill/lounge tunes. Man I would be SO THERE! Not going into the drinking part and the headaches, this is something you have (or have not) under control πŸ™‚ Oh and this year the people from MediaTemple though it was a splendid idea to create a VIP area where only so called “A list bloggers“, or whatever their criteria was as Important People could enter. Yep, you got it right, with ribbons to close off the area. Plus, you needed a stamp to get in. They offered and I refused, just out of principle because I HATE the fact that it makes me more important or cool than any other person. I’m just Veerle dammit! I wonder what they were thinking here? It got me and Geert annoyed and it left me with the thought that this is just the kind of thing what SXSW is not. It’s about the people and the possibility to talk to everyone, celebrity or not. If this makes me uncool so be it.

Helvetica movie

On the last day I had the opportunity to see the world premiere of the Helvetica movie. Never thought a film about a typeface could be so interesting and inspiring. An immediate urge to play with fonts and sketches was a direct result. If you ever get a chance to see this movie, I highly recommend it.

Podcasts and video

Eventually all sessions that were recorded will end up as a podcast here. The video page is also up now. I will add them to the articles when they become available.

Making your business cards dynamic in Illustrator

Do you often have to create a page filled with the same business cards, stickers etc. nicely arranged ready to go to the printer? You know you don’t have to copy and drag them “manually” on the page. There is a much smarter way of doing this…

Step 1 – Create your business card and group all objects

First create your business card with crop marks and everything all set. When finished group all objects.

Create the business card and group the objects

Step 2 – Apply a Transform Effect

Select your business card and go to the Effects menu. Go to Distort & Transform and choose Transform. Check the Preview option so you see the effect live. Enter 3 in the copies field, -65 mm in the vertical field under the Move option. So we’re duplicating the card 2 times under each other.

Apply the Transform Effect on the card

Enter the data in the Transform Effect's box

Step 3 – Apply a 2nd Transform Effect on top

Now, we’re going to add a 2nd effect on top of this one to have this column duplicated to the right. With the original card still selected, go to the Transform effect again and ignore the alert message box, because normally you don’t go to the same effect twice. You use the Appearance Palette instead and edit from there. In this case however, we ignore the warning and click “Apply New Effect”. Enter 1 in the copies field and make sure Preview is checked again so you see what happens. Enter 92 mm in the horizontal field under the Move option. Woohoo! Look at that! A whole page of cards! But wait, it’s not done yet πŸ™‚

Step 4 – Watch the magic

Now, just to show it’s magic and power, edit the name of the business card or any other data. All cards are updated automatically! Cool isn’t it? If you want to move the cards. It’ll move all duplicates as well, that’s also very handy.

Step 5 – Create a Graphic Style for later reuse

There is more magic to show. Select the card again and drag it into the Graphic Styles palette. You’ve now created a style that you can apply to any other business card with the same dimensions. If you create a new card, group all objects, select the new card and select this new style you’ve just created in the Graphic Styles palette, it’ll automatically duplicate your new card and create a full sheet of cards! What a time safer that is! πŸ™‚

I’ve used this technique a lot for stickers and business cards and it has saved me a lot of time instead of duplicating them “manually”.

All credits of this article go to Collin Smith from Adobe. To my knowledge he invented this technique a few years back. This technique works in version CS or later.

Choosing color combinations

All important but often elusive: tips on creating your next color palette

Color is a subjective experience, it is a mental sensation, a reaction of our brain. We say that an orange is ‘orange’. But is it really orange? How do we know? We cannot get outside of our eyes or brain to find out, but we do know that when the sun or light disappears; color vanishes. We take colors for granted. It’s only when we are actually drawing or painting that we realize how much value color brings to our daily life.

Color theory in a wrap

cover image of Design of Flight magazineTo learn about color, you first need to understand the structure of color. A color wheel shows us how color is structured. We start with the three primary hues: yellow, red and blue. These are the basic building blocks of color. Next we have the three secondary hues: orange, violet and green. Then follows the third generation or third level: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.

The color wheel (See Figure 1) shows us which colors are opposite to each other on the wheel. Blue is the opposite of orange, red is the opposite of green, yellow-green is the opposite of red-violet. These are called complements. Furthermore, we can divide colors into warm or cold colors. The colors on the bottom right, derived from blue are cold colors, those derived from red are warm colors.

Which color is suitable for which purpose?

Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect. And with style comes typefaces and colors. Color plays a major part in all this. It symbolizes a certain mood. Does your house-style need cold or warm colors?

Colors reflect a certain personality. They also have several meanings, most of which are closely connected to each other. For example, blue stands for sky, heaven and water. It reflects freedom and peace, but it can also mean cold, protective, authoritative or technical. Red is the color of blood, it reflects courage, romance, but it also means hot, dynamic, vital, commanding or alert. All these symbolic connotations are perfectly visualized by Claudia Cortes in her Color in Motion, a real treat for the eye (the eye has its claims too).

You may not be superstitious or believe that colors have actual meanings, but you ought to consider them. Whether consciously or unconsciously, we consider those meanings when we judge an artwork or design. These generally accepted meanings often play a role in determining whether we like or dislike what we are looking at. Darkness will always suggest danger and mystery.

Colors effect us psychologically regardless of any symbolism, because in some cases they don’t apply; it all depends on the circumstances. For example, black may signify mourning, but a tuxedo is also black and it signifies elegance. We all prefer bright vibrant colors over dull grey, but sometimes grey can be stylish too; it all depends on how we apply it in our design, it depends on the circumstances. But we should also be aware of the fact the meanings of color are different depending on the culture. For example, in most Western cultures, white symbolizes purity and elegance, cleanliness. However, in many Asian countries, white is also a color for death and mourning, and used for funerals. As with any design endeavor, make sure that you don’t only understand the psychological effects of colors but that you also know the nuances of the culture and audience you are designing for! This way you’ll have a better chance of success in achieving the emotional impact you want.

What makes a nice well-balanced color combination?

To define the colors for your project, choose a set of colors that fits with your client’s logo. This color set should be limited. This way, you get a stronger brand or identity. The overall use of too many colors could result in chaotic and unintended effects. It can get your design totally out of balance. In other words, it will loose its style and personality.

fig.1 color wheel illustration - fig. 2 examples of complimentary color schemes that are pleasing to the eye - fig. 3 examples of complimentary color schemes that don't work; they feel out of balance and inharmonious

When you choose your shades, there are a few things you should keep in mind. First, there should be enough contrast, and secondly, it might be advisable to have one complementary color. For instance, if you have a set of three colors, Color One should be in contrast with the Color Two and Color Three. Alternatively, Color One could be a complement of Color Two or Color Three. Using complements is not exactly necessary but it can help you achieve nice results. (See Figure 2) Using contrasting colors is important to achieve an interesting well-balanced design. For example, try to have two light colors and one darker color. Or you can have a light color, medium light color and a dark color.

Too much contrast can result in a restless or even aggressive design. (See Figure 3) It might of course be your intention to achieve this effect, but if so, make sure that the eye has some resting place in your layout. A rest-point is (I believe) necessary to keep it all in balance. You see, besides using the right color combinations, you should also think on how you dose these colors. Try using them in the right proportions. For example, use the lighter color for the bigger areas like the background and the most vibrant color on the items where you want to attract the attention to, like the logo or title. The middle colors can be used for the text and other items.

Using one complementary color can even increase the ultimate effect, but there’s a bit of a catch to this method. You have to be sure to apply them in a subtle way. If you excagerate and get it out of proportion things will get too overwhelming (See Figure 5). If colors are wrong applied or don’t go nicely together, they can make your design rather unharmonious. It’s up you to find out what is suitable or not, after all, colors are a subjective experience. One might like the combination while another doesn’t. So what makes you have ‘good taste’ in colors? Tastes differ, we all have different meanings of what is attractive and what isn’t. Yet still, the world would be unbearable if there wasn’t some general agreement. Luckily, by following these simple guidelines, you’ll have a better chance of achieving the optimal result. If you get stuck, you might find Adam Polselli’s Get The Look a nice source of inspiration on the latest color trends and styles.

fig. 4 examples of color schemes that use the right amount of contrast - fig. 5 examples of color schemes that are too high-contrast  - fig. 6 examples of color schemes that are too low-contrast

Color inspiration

It’s been said before, but bears repeating: inspiration can come from anywhere. Always keep your eyes open for color combinations that you like. Examine photographs, pay attention to the vibrant colors of nature, and most importantly, keep experimenting!

fig. 7 color extracted/derived from the photo

More color resources at my link list.

Since Design in Flight isn’t available anymore, I thought I publish the article I’ve written about color combinations for the magazine in April 2005. Many of you probably missed that one and I thought it couldn’t hurt to publish this on my blog here for you to read and hopefully to learn as well.

Web Directions North, the story

Web Directions North is over and I am still sick, but at least I now had the doctor coming over and he prescribed me some medication. When we arrived in Canada we hang out with Jeremy Keith and Dave Shea and enjoyed the local coffee art as you’ll see when I upload my pictures. It’s really cool what they do with the milk. You got to see them doing it to better grasp it but they wouldn’t let us film it.

The conference and my session.

One big disadvantage of having to speak on the last day is that you don’t get to see the sessions because you use the extra time to prepare and rehearse. It’s in my nature to try to make things as perfect as possible. From what I saw and from what Geert told me the conference was very well organized and everything started on time. John, Maxine, Derek and Dave did a great job in making this a success. One of the more fascinating things that Geert told me is a new way of embedding Flash into a webpage via CSS. It’s something that Aaron Gustafson came up with and I’m sure we will hear about it a lot in the coming weeks. I’ve always known Aaron was a really smart guy πŸ™‚

Before it was our turn I felt that my energy level was way too low and I felt tired. I had this feeling the day before too. I had trouble concentrating and such, a headache, trouble sleeping etc. I thought OK, this is just a jetlag. So at lunch before I got to speak I forced myself to eat something more then just a salad and hoped that this would do the trick. I kept saying to myself, “you’re gonna do fine”. The first part of our talking worried me since I had to speak for a while and I had trouble remembering all the sentences while I was rehearsing. I though OK, if I have my notes with me I’ll be fine. That was such stupid mistake. I should have just kept keywords and bullet lists with me not the full notes. The first part didn’t go well at all, the 2nd part did and I enjoyed that part. I didn’t rehearse any of that, for me this was easy and it was entertaining I think. There was some laughter now and then. Guess I learned my lesson not to try too hard or it blows up in your face. The 3rd part was also OK and the 4th part…we’ll we never got to the 4th part. People were asking questions in between and that broke our schedule totally. I got the feeling I only said 50% of what I prepared. I’m still not sure how I feel about it all to be honest. Lots of people came to me they really enjoyed our session so I’m happy to hear this. I’m hard on myself, I’m a perfectionist πŸ™‚ I try to remember part 2, the Geeky Chix part which was fun. Dave being the client and I the designer. I hope to launch the site pretty soon (before I leave for SXSW).

The final session of Jared Spool was the only session I saw and it was really unbelievable. Man is he an entertaining speaker and even when I was already half sick I still managed to hear all of it.

Skiing

On Friday Geert and I did a half day of skiing so that was nice and I was glad that I still had it in me after all those years. I had a terribly headache but I forgot about it when I was at the very top of Whistler mountain, skiing down with the iPod earplugs in. Geert waited for me in the mid station so I was on my own skiing my own speed. I was following signs but then it appeared I wasn’t following the right ones and I had to ask directions. A couple handed me a map since they could miss one. I was going in the wrong direction but thanks to the map I made it back just fine. I just skied a bit faster to make sure Geert wasn’t worried. It’s really a long way up to the very top and a long trip down, which is wonderful. Geert did pretty well too for his second time. Whistler is nice but just too bad it was foggy and grey. I really would have liked to see some blue skies and sun. After the skiing we went to the Microsoft lounge to eat and talk. They did a great job in making us feel comfortable and supply us with everything we needed. That’s when I started to feel that my voice was going completely away and my throat was really soar. I did loose my voice for a bit already at the party the evening before but I thought that was just because of the music and trying to talk above it. I also had this terribly headache that wouldn’t go away. I just thought it was because I was tired but apparently there was more going on. I stayed in the lounge the rest of the afternoon since I wasn’t up for anymore skiing. It just took all my energy already.

Being sick in foreign country

The next day was the worst day in my life so far. My head and throat did hurt so much that even moving on another side in the bed was too much. I couldn’t get out of bed, I cried because of the pain and also because Geert needed to wake up at 6 am to return the ski boots. He was already starting to feel the same thing only he thought he could make it through the day and didn’t want to bother someone else with all the returning hassle. Since then the story is that we both stayed in bed as much as possible to get better for our long trip back home. It’s on those occasions you suddenly realize that all those other countries may be bigger but that they could learn a lot from our healthcare system. In Belgium the Doctor is only a phone call away no matter if you stay in a hotel or not and that’s what is really missing here. I feel for so many other friends who are now suffering from the same thing too. It’s like a virus that invaded the conference in one hard swoop.

The journey home and another British Airways delay

On our last day we tried to rest as much as possible to store enough energy for the long journey home. I felt a little bit better. After a hectic taxi ride during rush hour we arrived at the airport ready to drop our bags off. Only minutes later we learned that our flight was delayed from 20.30 till 21.45. Another delay that screws up our connecting flight from Heathrow to Brussels. So the same horror story as before when we finally arrived in London.

British Airways commercials on the plane shows an air hostess picking up a little doll dropped by a child telling you they care about you the passenger. Too bad reality is more like an air hostess with an attitude that says “nothing mush we can do about it” when I told her in a friendly way that it was like a horror story repeating itself. Or a person behind flight connections that does sigh everytime she needs to get up or promises us that they will let the airport taxi know we are not coming. We finally arrived at home at 22.15 because you already guessed it BA didn’t let the airport taxi know. Now we are still both sick as a dog and the doctor just said we have the flue. Now I am going back to bed so that I’ll be my old self as soon as possible.

Stuck in London

So after the big rush to get ready for trip I was so glad that we made in time. To make everything go as smooth as butter I checked in online at the British Airways website so we didn’t have anymore unnecessary delays. The airport taxi picked us up at noon and we arrived at Brussels Airport at 12.45pm. Plenty of time to relax a bit and wait for the information board to show the right gate.

The horror story of British Airways

Only 40 minutes before the departure time the gate showed up and we proceeded to the boarding area. 20 min before we should take off they all of a sudden announce that because of the fog in the morning on Heathrow our flight would be delayed by one hour. Now you have to tell me how they manage to react so slowly when the trouble was going on since this morning. We checked in online at 11am so you would assume that they already know that the rest of the day would suck ass and there would be cancelled flights and delays. No, they didn’t or they just don’t care. The lady at the boarding gate doesn’t know any information because she is employed by Aviapartner and they are hired by British Airways and have no access to the system to make any changes.

SN Brussels Airlines ROCKS!

So what to do next? They don’t tell us anything. We don’t know if we would make it, we don’t have any certainty that we would get a hotel etc. So Geert and I went to the service desk of SN Brussels Airlines instead to tell our story because there is nobody else in that terminal. The super friendly lady did everything she could for us and made some calls to insure us that we would be looked after in London. So it’s true THEY CARE about the customer at SN, even if you are not traveling with them. I’m a glad my trip to SXSW, Texas is with SN Brussels Airlines.

Can it get any worse?

YES it can πŸ™‚ So we went on finally and would touchdown in London with approximately 25 minutes to get our Vancouver flight in the same terminal 4. Almost 15 minutes before landing they announce on the plane that all passengers to Vancouver and Cape Town need to move to the front of the plane because somebody of ground personnel would meet us. This sounded promising and we got our hopes up again that we would still make our flight. If you think about it why else would they go through the trouble? Once out the door we saw a guy waiting there with a sign just to tells us our flight is gone and we missed it!!! Can you believe that? It’s like putting in the knife in a little deeper and turning it around a bit. He is standing there just to say we need to talk to connecting flights that’s it. What a waste of resources! To make matters worse we needed to go through security just to talk to some REALLY unfriendly guy that only says “well your flight will be tomorrow and we will put you up in a hotel.

That’s the least they can do right? I don’t know about you but you would expect a bit of comfort and some friendliness to ease the pain. The only other explanation from him was that we would need to take the hotel bus to get to it. What he forgot to mention is that we first needed to go from terminal 4 to terminal 1, 2 or 3 and then try to figure out where the bus stops exactly. After some running around finally somebody told us we needed to take to Heathrow Express to the other terminals.

The Hotel

The Renaissance Heathrow is not that bad room wise but the rest pretty much sucks. We got a dinner and a breakfast that was ok but if you would like to inform family you needed to pay 2.5 Pound per minute to call to Belgium. No Wifi in the room, at least not free. You need to pay 17 Pound for high speed internet to be precise. So you would expect that in the Lobby you’ll have access, well guess again because you need to pay too, 5 Pounds to be exact. That’s unbelievable and a complete rip off.

My conclusion

When we got our flight the next day the guy checking us in was friendly and he tried to do an effort to give us seats next to Jeremy Keith but the system didn’t allow that. A wasted opportunity to correct a bad situation to something better. It was my first time with British Airways and my last time or they have to convince me this was a one off. Otherwise I don’t recommend them to anybody because what they did is unacceptable. No trained or friendly staff and nowhere to turn to, late information and go on. British Airways if you are reading this your employees need an attitude update and I suggest you come look at the staff of SN Brussels Airlines soon to be Brussels Airlines how it is done.

Web Directions North, not packed yet!

Sunday morning here in Belgium and I still have to pack our bags for the trip to Canada for Web Directions North. They pick us up in 3 hours πŸ™‚ That’s an example of how hectic things can get when you are trying to please clients by doing as much as humanly possible and tying up loose ends.

Preparations and working, a challenge

It has been a challenge coordinating the two things to be honest. On the other hand it has been fun working with Dave preparing our talk about “The Design Process”. It’s all about workflows and design processes and I think we have some interesting material to present. It will give people a good idea of how Dave and I approach things. From what I seen so far John, Maxine, Derek and Dave have managed to get a stellar conference of the ground.

First time to Canada

It will also be my first time to Canada, a country that I always wanted to go to. I’m excited to get to know Vancouver a little better and to get the camera back out to snap some shots. Luckily I’m gonna take a little breather after the conference to hang with the Paris gang and reload the batteries. Much needed to get the creative juices flowing πŸ™‚ The trip will be even more awesome since I just learned we are on the same flight as the one and only Mr. Malarkey, that should make those 9,5 hours more interesting I hope πŸ˜€

Don’t worry I’ll keep you guys in the loop and be sure the tutorials will return too when I am back. I have some interesting ones in the pipeline for when I find time to actually do them πŸ˜‰

If you now excuse me I’m off finishing packing: underwear check, toothbrush check, ski pants … I’m so excited! πŸ™‚

Implementing titles in ExpressionEngine

Implementing the title element in your ExpressionEngine templates is easy once you’re getting more familiar with the EE tags. For those still learning the first steps in EE, this will help you creating nice dynamic titles. I also share a tip on how to avoid a messy title bar in case the URL is broken. Learn and enjoy! πŸ˜‰

Assign a variable

First thing you need to do is assigning a variable to your weblog’s name. This will make things easy if you want to (re)use this name in your template.

Implementing titles in Expression Engine - Assign a variable

The name of my (main) blog is “veerle_blog”. So I assign the variable “my_weblog” to this name. Everywhere I use the variable “my_weblog” in the EE tags, EE will know that I’m referring to my main blog, “veerle_blog”.

Implementing the EE title element

Between the opening and ending tag I’ve placed the following EE tags:

Implementing the EE title element

Let me clarify this. If you look at the titles of my pages, you’ll see it’s divided into 2 parts: the name of the blog and the title of the article separated by a pipe. In the first part I call the “weblog:info” tag where I use the variable “blog_title” which will display the “Full Weblog Name” name. In the second part I call the “weblog:entries” tag where I use the “title” variable which refers to the title of the article.

Avoiding messy title bars

A while ago I added an extra parameter to solve the layout errors when someone doesn’t enter the full URL or if the URL got broken. This was simply done by adding require_entry=”yes” in each EE exp weblogs:entries tag.

Implementing titles in ExpressionEngine - Avoiding messy title bars

If you don’t use this parameter, things will get messy in the title bar of the browser if the URL is broken. Adding this parameter solves the issue.

Float by Max Longin

Sometimes I am surprised what is out there and one item that qualifies nicely into this category is a custom made bed called “Float”. I think it’s fair to call this bed design innovative.

Float my boat

In fact I only am aware of one other bed that raises an eyebrow or two. That bed is designed by a neighbor from Holland called Janjaap Ruijssenaars. It’s a magnetic floating bed with enough magnets to keep 900 kilograms (1,984 pounds) floating in the air. The price will put you right down to earth since it costs a whooping 1.2 million euros ($1.53 million).

Magnetic bed by Janjaap Ruijssenaars

Float by Max Longin

The German designer Max Longin based the idea of this bed on a suspended bridge. He explained it as follows:

I sat in the middle of a suspension bridge and perceived its smooth movements—it seemed perfect for relaxation and sleeping.

Handcrafted and hand-finished

It’s held in place by four stainless steel cords attached to a frame of wood rods connected by steel bows. That way the Float’s mattress platform rests free of the floor just like a suspension bridge. It is able to absorb shocks as well as a weight of 1,200 kg (2,645 lbs).

Float by Max Longin

You can choose from the following hardwoods: ash, beech, cherry, elm, maple, oak or walnut.

Transportation case and patented connectors

Its components can be configured to become a compact transport case when the piece is dismantled. I always say, the perfection is in the details.

Float transportation box

Float by Max Longin

For the connection between the wooden rods and the steel bows simple and effective elements have been developed.

Float by Max Longin

Since this is completely hand made the price is in the higher regions. It starts from 3,960 Euro/$6,200, included are taxes, freight, freight-insurance and fees. When you bought one I think it’s safe to assume it will impress visitors. More info at the Max Longin website.

WDN Scholarships

Maxine of Web Directions North just brought something really unique to my attention, a first timer in our industry. If you are a full time student in the field related to the web industry you better listen up!

30 lucky students

As conference organizers, speakers and attendees, Dave, Derek, Maxine and John have long been aware that while a good conference can be an unbeatable benefit for your career, they are definitely out of the price range of those in our industry who might benefit most – students. That’s why they introduced scholarship pricing for students. 30 lucky students are able to buy conference seats at $195 (CDN) each.

Web Directions North - Vancouver, BC, Canada - Feb 6-10 2007

To qualify you must be a full-time student in a related field (design, computer science, or a specific web development course, for example) and not currently in professional employment. I can image that these babies will be hot so hurry and go to the registration page and enter the following code to receive your special discount: WDNSCH.

Looking forward to meet some new people and old friends in less than a month.

No more lurking! ItÒ€ℒs De-Lurking time again :)

I know that you are there so don’t try to deny it. I’ve seen you hiding all this time but no more πŸ™‚ It’s De-Lurking time again, that time of the year to leave that safe place and come say hi to all of us.

What exactly is De-Lurking?

The term is used for people that read blogs or join chat rooms or newsgroups and don’t participate in commenting. The readers that just look around because they don’t have anything to add to the discussion or because it’s already been said. Does this sounds like someone you know? It’s something that got orginally started by Sheryl from Papernapkin.

Don't be shy and hit that keyboard NOW!

You can do it…

Last year 370 brave souls overcame their fear and left a comment, so that should be the target πŸ™‚ A lot can change in a year and I’m sure many newbies have arrived since then. This is your opportunity to let me know who you are (newbie or not, it doesn’t matter), what you do and where you are from. I always wonder if all of you are graphic designers, web designers or coders etc. Crossing my fingers that there are some geek girls out there too, female power you know πŸ˜€ It’s also the perfect opportunity to pitch some ideas for future postings. I always listen and try to incorporate some of the ideas.

2007 will be an interesting year for this blog too because I have some exciting things planned that will be revealed soon. I’m still working out a few things but it looks very promising so far. If all goes through I’ll be able to give away a few things on a regular basis πŸ™‚ I also can’t believe that I will be in Canada arround this time next month for Web Directions North. If you’ve not signed up already please hury because the extended deadline is January 14th for the $895 early price.

So don’t be shy and hit that keyboard NOW!

Swirly curls in Adobe Illustrator

Let me start by wishing you all a very happy new year! May 2007 be a year full of inspiration and creativity! Today I’ve picked another topic from my list of requests that readers of my blog send in: swirly curls. Lets add some trendy elegance to your illustrations! Here we go…

Step 1 – Draw a spiral

Swirly curls in Adobe Illustrator - step 1

Go to the Toolbox and hold down the mouse on the Line Tool so the other tools are revealed. Select the Spiral Tool. Now click and drag a line from the center point outwards. Instead of click dragging you can just click to get the Spiral Options box and enter the spiral radius, decay and spiral segments and click OK. I’ve used 80% of decay and 10 segments. If you click drag the spiral, remember that you can move the spiral while dragging if you hold down the spacebar. Give the spiral a stroke and no filling. Copy the spiral and paste it in front: go to the Edit menu and choose Paste in Front or hit command/control + f. Now select the Rotate Tool and click the center point of the spiral and drag the spiral to the right to rotate it a bit.

Step 2 – Transform the spiral into a nice curl

Swirly curls in Adobe Illustrator - step 2

Select the Selection Tool (black arrow) or hold down the command/control key so you get the transform handles. Scale the spiral as shown in the image so you add thickness to the spiral from the center point out and you’ll get a nice curl in the end. Select the center points of the 2 spirals. Use the Direct Selection Tool and drag a rectangle over the anchor points, make sure no other points of the spirals are selected. Go to Object > Path > Join (or hit command/control + j) to join both paths. Now do the same for the 2 ending points of the spirals.

Step 3 – Add a fill and put the curl in place

Swirly curls in Adobe Illustrator - step 3

Click the double arrows right above the colors in the Toolbox to swap the stroke to a fill. Change the fill to your preferred color. Now drag the curl in place. Rotate the curl if needed so it forms a fluent line with the object you attach it too. You can select both and choose the Add to shape option in the Pathfinder palette if needed so they become 1 object.

I hope you enjoyed this tutorial. Maybe this can be done in another way by using a special brush instead of copying the path, transform it and join the points, not sure. I haven’t experimented with that. I just get perfect curls when I use this technique.

Swirly curls in Adobe Illustrator

For those who missed the final result of this illustration, check it out & download a desktop πŸ˜‰

The new Adobe icons and branding

So many voices have expressed their thoughts on Adobe’s new icons so far and one of the more noticeable one from users is that they all thought it was some temporary place holder art. When I first saw the splash screen and application icon of Adobe Photoshop CS3 my thinking pattern was that Macromedia had its influence in the branding process: the idea of using different colors for each application and the way the splash screen is organized.

Adobe chooses to go with a two-letter mnemonic

The color association that is carried throughout the product’s desktop brand and primary imagery makes total sense to me. The absence of illustrative elements as we saw in previous versions needs really getting use to. If you look in the Dock, most icons are like pictures and visually very detailed so it’s like they are all shouting “choose me, me”. Adobe’s new icons are so basic and stand out instantly even in a crowded Dock. That’s a thing Macromedia always had with their icons, you could immediately tell they belong together. Jason Santa Maria said:

“Plus, baking in the action of having to read the icon just to decipher it adds an unnecessary step.”

As much as I respect Jason I’m not agreeing with him, because it’s only two letters and I personally immediately see the “Ai” just by looking and not by a literal read. It was much harder to differentiate the previous ones, in fact I more than once confused ImageReady with Photoshop. The natural look didn’t have any meaning other then being pretty to use as marketing collateral.

Talking about typography, the font used in the icons was created by Robert Slimbach, known from typefaces like Adobe Garamond, Adobe Jenson, Myriad (co-designed with Carol Twombly) …

Some of the new Icons of the CS3 suite

You might wonder why Acrobat Reader hasn’t “Ar” as icon or “Pd” or something, just to take the same line with the rest of the products. The curvy triangle is so well known that it’s obvious they kept using it for the icon. I think if the other applications had a similar icon over the years, they would have done the same. Since there are none they decided to use a two-letter mnemonic ‘nickname’ system as their primary identifier.

Why the re-branding was such a big challenge

While this color-wheel beautifully presents the approach in the entire re-branding, I think it fails in bringing the message across on how it will tie together as a whole. The idea is great though but the color-wheel is very overwhelming, taking away all the attention and the icons are scattered over the place. People seems to fail to grasp the bigger picture. It seems that most just want to make it look pretty because the app is giving these possibilities, but it’s more than that, it’s about problem-solving too. It’s a major undertaking to revamp and re-brand both Adobe’s and Macromedia’s apps as one brand, we’re talking thousands of icons.

All Adobe's new product icons

Thanks to John Nack I had the opportunity of asking a few questions about the new direction to Ryan Hicks, Sr. Experience Designer at Adobe.

1) Did you had any idea in what direction the response to the new icon would go?

The debate that has risen up around iconography and the merits of what we’ve done taken in a broader context is impressive. The new direction is a bigger change than I think anyone in the public would have expected from us, change on that scale is going to be hard and of course there are those who will rise up and scream heresy. Honestly, we have been living with the icon system internally on our own machines for so long now that it’s a bit hard to remember what the big deal is. We’re as varied and hardcore a user group as will be found anywhere, we’ve found the stuff just works. Done.

2) The horizontal folders is that a hint of what is coming in Leopard :D, or what was the thinking behind that?

Hints of Leopard? Not exactly. The “flat” folder is reflexive of the overall approach we’ve taken in the iconography throughout the desktop (document icons, module icons, etc), which is driven by the work in our application UI’s (check out Acrobat 8 in particular). Simple and clear, though you can definitely see that approach in Apple’s UI work as well. It’s a focus on function, but executed with an exquisite elegance

What we had in the CS2 days were elaborate 3d-rendered icons for documents and things which looked nice at really huge views but reduced to little puddles of pixel mud at the small sizes. Arguably it’s the 16px and maybe 32px icon view that are the most prevalent, so it’s those sizes that we focused on in creating our technique for rendering the figures. The new bits look simple, and in contrast to the 3d-style work out there they are, but there’s a lot of nuance to give them richness that scales to the larger sizes.

3) Not sure if you can reveal this yet but I wonder if the minimal look will also be reflected in the package design?

Yeah, I can’t give anything away here. The desktop icons are tiny extractions – you could call them “pixels” if you like – from the much larger packaging art.

Well I hope Adobe will let me show packaging for the suite when the time is right because I strongly believe it will help people understand. So I’m going against what most people think here, Adobe’s design team has created a concise and coherent unified language. The new style is very contemporary and it’s more solid and refined in my opinion.

In the end major changes always takes getting used to, it’s so different from previous versions. There will always be people thinking “what have they done now?”. I didn’t have a “whoa!” reaction myself the first time but it grows on you.

I just learned that my thinking was right, the design was done by the design team of the former Macromedia. I knew it :p

Light switches

Light switches and sockets, they aren’t exactly the first things you have in mind when thinking about decorating your home. You should, because they enhance the beauty of a décor. Switches are no longer just plain white, square or invisible. They can provide an impeccably sleek surface to the walls of your home. You can now get decorative plates in a wide range of materials.

Bticino

Bticino is an Italian brand with a product line called “Axolute“. It exist in all kind of shapes and in more than 41 different materials. Same examples are aluminum, slate and leather, wenge and Carrara marble. As you would expect the price is up to par. The cheapest cover plate starts from 8,22 Euro and it goes all the way up to 44 Euro. My problem with the Bticino brand is that most of the light switches have a kitschy perception.

Examples of Bticino light switches

I didn’t have to search in other countries if it comes to innovative usage of materials, design and possibilities. I quickly discovered some nice Belgian brands too

Lithos

The website and downloadable brochure didn’t had much to discover but from what I figured out is that Lithos has prices that are way out of our budget. The high quality bushed stainless steel with up to 8 push buttons, in bronze, brass, charcoal, nickel or RAL colour finishes, can be wall or flush mounted. New is the SB1LT Alu Grey (from 60 Euro) and SBQLB with white or blue LED lightning (from 75 Euro). Don’t forget you need lots of them so the amount quickly rises.

Examples of Lithos light switches

Niko

Niko recently launched two new product lines: Intense with soft lines and Pure for a more luxurious finish like bamboo or stainless steel. On their site you can test the switches against the colors of your interior to see if it is a match. After some deliberation we opted for Niko switches in aluminum for downstairs and black ones for upstairs. Those black ones have like a rubber feeling to them.

Examples of Niko light switches

Examples of Niko light switches

Creating a page curl in Photoshop

Today’s tutorial was a request by Kirk from Smallest Photo. As you all know, the way I do or show it isn’t the ‘only’ way, it’s just my way and I’m open for any other tips or suggestions. As always I had fun doing this and I’m always happy to share stuff like this. So here it goes…

Image with page curl

Step 1 – Selecting the corner and warp transform it to a curl

Creating a page curl in Photoshop - Step 1

Select the Rectangle Selection tool from the Toolbox and drag a squared selection starting from the bottom right corner of the image (holding down shift) going diagonally left, till you have a big part selected of the bottom right corner of your image. Go to the Edit menu and select Transform > Warp. Drag the bottom right point of the mesh up left till you get some curly effect. Drag the bezier handles to get the right curl effect and hit the return key if you’re pleased with the result.

Step 2 – Create the curl

Creating a page curl in Photoshop - Step 2

Since this curl doesn’t show the back of our photo, it doesn’t really look realistic. The only way I’m aware of to achieve this effect is that we draw it ourself. Select the Pen tool from the Toolbox and draw a path on top of the picture. Follow the borders of the curl you just transformed as guidance. Fill the Shape layer with a white color (double click the layer icon).

Step 3 – Add shading effect to the curl

Creating a page curl in Photoshop - Step 3

Double click on the right of the Shape layer to active the Layer Styles. Check the Gradient Overlay option. Set the Angle of the gradient to 152° and click in the gradient to adjust the colors. Drag the stop swatches to the position shown in the image above and choose a grey for the left stop swatch (click once on the stop swatch and then once in the Color field). You can play around with the effect till you get the result you want. These numbers and info are just as a guidance and what I’ve used to achieve my result.

Step 4 – Add shading effect to the image

Creating a page curl in Photoshop - Step 4

To achieve an even more realistic effect, we add a depth/shading effect on the picture itself as well. Double click on the right of the layer that holds your picture to get to the Layer Styles options. Again, check the Gradient Overlay option. Set the Angle of the gradient to 152°, choose Multiply as Blend Mode (to filter out all the white) and click in the gradient to adjust the colors. Drag the stop swatches again as before to the position shown in the image above. As an extra you can check the Drop Shadow effect in the Layers Styles options as sort of realistic finishing touch.

WDN Affiliates

The good folks of Web Directions North have just created an opportunity for you to get yourself a free ticket, as well as hotel accomodation and places on the ski trip. So if you want to come to Web Directions but feeling a bit nervous about the money, here’s your chance.

Web Directions North

In case you didn’t knew about WDN yet, it’s a conference this February in Vancouver, Canada. There is a list of amazing speakers, including me (don’t know about the amazing part though), a fantastic location, and after hours events. There is also more info on the schedule, workshops, topics and of-course pricing.

Get yourself a free ticket

So if you want to get a good deal, join the affiliate program and get 4 people to sign up for the conference and you have a free ticket for yourself. Either use the unique URL on your site or start probing your friends to join you.

Web Directions North - Vancouver, BC, Canada - Feb 6-10 2007

If more people sign up it goes even further but you can read that on the affiliate program page. It’s a unique way and you never know what happens and it can’t hurt to try. All you need to do is get your unique URL, and then you can spread the word in whatever way you think is right for you.

Interview with the creator of CSSEdit 2

One of the reasons I was attracted to CSSEdit was its gorgeous interface. Jan Van Boghout isn’t only a talented developer but a great designer as well. I’m sure many people don’t realize, but Jan designs every element himself. Just look at MacRabbit’s new website, the icons etc. and I think you’ll agree it’s topnotch. High time we sat down with Jan to ask him a few questions about this new release…

1) Let’s start by talking about the very clean and slick new interface of CSSEdit 2. I’m sure many readers are wondering how you come up with the ideas and how you tackle the task of creating them. What I am wondering is, if you create them in Photoshop or Illustrator and if you start by sketching them? If you sketch, any examples left that shows the progress?

I always carry around an “analog” notebook. Whenever I think of something cool, I sketch it out or describe how it works. Usually it goes from “think about cool idea X” to more elaborate UI sketches and behaviors over time.

Channeling my ideas into that notebook allows me to focus on what I *should* be doing. I often get random ideas while I’m working on something completely unrelated, so I can just write it down and continue working. Later, I can look at it again and flesh it out.

2) Would be great if you could share a trick or two in how you handle the creation in Photoshop or Illustrator since they are some of the best in the industry.

I’m probably a terrible person to ask this to! I live entirely in Photoshop for my graphics work, mainly because it was the first thing I really used. I took a stab at Illustrator once, but I was too impatient to make the mental switch from my (mostly) pixel based workflow to vector-only. I use Photoshop vectors a lot, but I don’t think I could live without those little pixel tweaks. Leopard’s 512×512 icons will probably help me change my mind πŸ™‚

At the risk of sounding like a total newbie, one thing that really helped me is a way to change the opacity of a layer simply by typing a number. I used to click and drag that irritating little slider all the time, now it’s usually just a single keystroke that does the trick.

3) How did you come up with the new features? Is that based on user feedback only?

User feedback can be tricky, but it’s very useful to detect general trends. If tons of people request something particular, I don’t rush into a coding frenzy to implement a particular feature (unless it’s just an awesome idea). Instead, I try to dig deeper and find out what the basic problem is.

CSSEdit 2’s Overriding is a great example of that. Everyone who codes dynamic sites has their favorite language or system, so I used to get all kinds of requests to handle Ruby on Rails, PHP, …. In the end though, the objective is to test your sites so they work in a browser. So I made anything that displays in a browser work, without having to worry about everyone’s favorite languages.

I have a deep fear of bloating my apps, and it’s incredibly hard to remove a feature once you’ve added it. If you’ve ever asked me for a feature that still hasn’t popped up, I may just be waiting for the way to do it “right” πŸ™‚

4) You seem to have a pretty rare mix of talent. How does a programmer become such a good designer? Or should I reverse the question?

Haha, thanks for the compliment! I guess I was a designer first, programmer second. I’ve always appreciated pretty things, but it wasn’t until Mac OS X that I started thinking about designing anything of my own. Aqua was a “wow, sweeeeeet!” experience for me, and I wanted to duplicate that awesomeness. Of course I sucked at first, but I got better over the years. I’d show you just how bad I used to be, but when I searched my backups, it turned out I skillfully removed all traces of the horrible artwork I remember.

I tumbled into programming mainly by accident. A few years back, I felt I needed something to hide the mess of icons on my desktop, so I wrote DeskShade with great effort. I took Aaron Hillegass’s Cocoa book and spent 2 months learning about Cocoa and programming in general. Since then I’ve gone through a few app revisions and started studying Computer Sciences. Looking at CSSEdit 2, I would say I’ve improved πŸ˜‰

5) How has MacOS X changed your life as a programmer? Can you shed some light on the differences in creating CSSEdit 1.0 and 2.0 done on Tiger for example?

It has started my life as a programmer πŸ™‚ Developing CSSEdit 1 and 2 was a world of difference. The first version was written in the Jaguar (10.2) days, and Apple’s frameworks have really improved a ton between now and then. Even WebKit didn’t exist when I wrote CSSEdit 1.0, whereas vital parts of the app build on top of it now. Developing for Tiger is quite nice, and Leopard looks like it will be even better.

6) As a developer did you ever go to the World Wide developers conference or did you ever receive a sign of life from Apple? Personally I think this 2.0 makes a great chance of winning an Apple design award.

I went my first time this year, it was a blast. It’s great to finally meet people in the flesh when they’re usually across a huge ocean. A sign from life, hmmm. Some people at Apple must like CSSEdit 2, because it recently got featured on the Mac OS X Downloads page. That was pretty damn awesome! Let’s hope even more Apple employees like it when I enter CSSEdit in the next Design Awards πŸ˜€

7) Do you plan to add HTML editing to CSSEdit?

I plan to keep CSSEdit true to its name, so I wouldn’t expect CSSEdit to edit HTML πŸ™‚ Currently the Preview senses changes to the HTML file in any editor, so you can use your favorite tool.

8) Are you going to do in the future?

With the exception of HTML editing, I prefer not to comment on my plans for future versions. They would surely come and bite me in the ass later! That said, I have a lot of improvements in mind for the future.

9) How have you applied your experiences from using Version 1 to make improvements in Version 2?

CSSEdit 2 is almost a complete rewrite thanks to version 1. I had a much more limited view on source editors and CSS development when I wrote 1.0. The new CSSEdit is the result of all the should-have-done-it-this-ways that popped up with version 1.

10) What kind of tools do you use? Why did testing take a long time and did it pay off?

I mainly use Xcode and Interface Builder, and Apple’s optimization tools. I have an iMac and a MacBook Pro, but I do 99% of my development on the laptop (or notebook, since it will turn your lap into super-heated plasma). The only thing ruining the experience is Photoshop in Rosetta.

The testing phase took a long time because it wasn’t a testing phase in the traditional sense. I was adding features till the last minute, which allowed me to build more incremental feedback. Once the basic stuff works, you can start worrying about the layer on top of that, and so on. I had a great bunch of testers with excellent feedback. I can’t say there were a whole lot of bugs (it was rock solid even in the early stages πŸ˜‰ ), but the testing phase exposed common problems with brand new features, such as Overriding.

11) Are you able to make a living off your independent software efforts?

It’s too early to tell for version 2, but the outlook is good. I will be a full time student for a while longer though, so I won’t be able to dedicate all my time to MacRabbit for a bit longer. I hope it’s feasible to go full time once I graduate πŸ™‚