Geeky Dog

While looking into my personal illustration work, the client thought my Geeky Dog would be prefect for a T-shirt. A few years ago I created this fun, imaginative dog character, which I used a couple of times in my personal creations. One of them was for a dribbble rebound game, and before that also for a Christmas card.

While digging into my old illustrations, I found the sketches from a few years ago when I was trying out different poses and ideas for this Christmas card. I thought maybe one of these would be perfect to use.

My preference was the face of the dog at the bottom. The client also liked the one I created on dribbble, so I thought I'll try something out with these two versions.

Maximum 3 colors

Since these T-shirts are all screen-printed, they can only contain just a few colors to make sure the costs don't blow out of proportion. Using only a few colors can also make the design stronger. To me this was a bit challenging because the illustrations of the dog all use more than 4 colors. This took a bit of experimenting.

In the end the dog's face won, and I chose to go for these 3 colors:

• White
• Pantone 631 U (light blue)
• Pantone 7469 U (darker blue)

There was also the question whether I chose the right colors of the T-shirt, since I could choose a different color for the girls version than for the boys. I initially chose red because that was also a color that I used (for the socks) in my initial illustration of the dog.

Then I figured maybe pink could also work well for the girls. So I tried putting the illustration on a photo of a girl wearing the pink tee. After some consideration we decided pink worked really well.

The only thing left for me to do was to making sure the position of the dog was perfect. Just some tweaking of the scarf was needed.

The final design & result

After showing the design to the printer the only change was to move up the face just a little as I could only have one color at the last 1.5 cm from the bottom of the tee due to the technical challenge of having to print to the end of the T-shirt.

Pre-order now!

Pre-order your T-shirt(s) now, and get two beautiful limited edition Geeky Dog post cards (offer while stocks last)! Buy now!

Sketches & ideas

My basic idea for the cover design was to do something in combination with the logo and use the shape of the letter 'S' as my starting point. I thought I try out some kind of a geometrical pattern overlaying the logo. When I described this basic concept to the client, I already received a positive reaction. They were really intrigued by the idea and couldn't wait to see what I would came up with. Another idea I had in mind was an "Escher-like" surrealistic 3D effect. Once I sketched both ideas, I was less convinced of this 3D idea as the 'S' would be too obvious, while the initial concept was to hide the 'S'. What I wanted to achieve was some kind of a blend between some sort of pattern and the logo, making the logo a bit less obvious but still there at the same time.

At first I tried to stick to only very minimal shapes like circles and straight lines etc. Keeping it all strictly geometrical, but the problem was that the 'S' shape of the logo did not allow me to do this. As soon as I tried to overlay this on top of the logo, things got messy, because the 'S' doesn't follow the straight lines and perfect circles… I was afraid this would be the case, but I thought I just have to try anyway to see if it could work. Sometimes the clear vision I have in my mind is wrong and I only know for sure if I do a quick test. So I decided to start from the 'S' shape instead and go from there, which resulted in a more organic form, but still rather minimal.

The 1st design proposal

While covering the entire 'S' with the pattern, I realized I was facing a problem: where do I put the title? So then the idea came to mind of using the wavy line (which crosses the 'S') that is part of the logo, and trying to create some white space in the lower part. I also removed a bit of the pattern outside the 'S' shape to avoid busyness, and create a bit of rest. In a way I was thinking of creating some sort of transition between the logo and a new design. Some sort of blend, or mix if you like, between the 2 if you know what I mean. As an extra touch, I decided to add these white dashed lines. I thought it gave the design this extra detail. Though, later on I changed my mind, which isn't uncommon. My client wasn't much fond of it either, so we decided to leave them out.

Choosing & applying the colors

As for colors I decided to keep the palette "warm", making the link again with the logo. I was mostly inspired by this particular image from my Inspiration Stream. I find it really hard to explain in a practical way on how I apply colors. To me it has a lot to do with intuition; a feeling that certain colors go well together and others don't. It's a very subjective matter, and who am I to say that for example a certain type of soft brown in combo with a flashy red doesn't work well.

When I applied the colors to this design, I kept in mind that the segments would contrast well with each other. So I tried to apply them in a way that next to a dark brown segment, there would be a lighter segment, like yellow or orange. I also tried to make sure to apply the same color again with a bit of space in beween. Especially the darker and lighter ones, as they stand out the most. Same for the blue version, since the blue contrasts a lot with the warm colors, I made sure the blue was applied on separate locations, and also in proportion. To see if the colors are well applied —in this case with enough contrast— I usually do the test by looking at it from a distance. I enlarge the design, making it as big as possible on my screen, and I step away to look at it from a 3 meters distance. After this test I decided to adjust the segment at the top that uses a gradient of yellow and pink, as to me this one felt out of place. I felt that pink didn't really fit in the color palette. I changed that segment into a yellow gradient which is in harmony with the rest. In my first experiments I had some magenta and pink into the mix, and this was a "leftover". It was only after this test that I felt I needed to change it. It would have made sense to keep it if there would still be magenta and other segments of pink in the design, but since this was the only segment it felt out of place.

Adjusting the design

The client really liked what I was proposing, especially the geometrical forms, and so it seems I was on the right track. One of the remarks was that the design might become a bit too complex at some point. There was also the suggestion to add more bright colors such as blue to match the new Smashing branding. Plus, there was the concern whether the large white area at the bottom didn't distract too much, making it a bit difficult to recognize the 'S' logo icon.

Keeping this feedback in mind, I tried to find a balance between the original design, and a light weight version in terms of complexity, while also trying to find the balance between recognizing the 'S' and maintaining the original design. I decided to reduce the segments, and going from 4 divisions to 3 instead. In this phase of the design I also received an empty Illustrator template for me to start to compose the entire cover, including the back and spine.

Change of plans

Right before I finished and showed my client the 2 designs shown here above, Smashing Magazine published the article to announce the preorder of the book. They were showing the initial cover design, eager to get the buzz starting for the new edition of the book. They also made the decision (that I wasn't aware of) to publish a 2nd, smaller book. To announce this book called "Smashing Book #3⅓ — The Extension", they decided to create a blue version (themselves) based on my initial design. In a way I found this good news, because apart from changing a few small details, I really liked my initial version. So I thought it might have a chance after all :)

Dealing with client feedback

In my humble opinion, I believe you make a great designer if you always try to find the middle ground in what the client likes and what you like. After all, you design for the client, not for yourself. The client has to be 100% satisfied. But don't get me wrong here, it's not a one-way communication where the designer blindly follows what the client dictates you to do. Sometimes the client's feedback doesn't have any valuable points. Then it's up to you to explain to the client why you think his or her direction is a bad idea. Though, if it's a matter of suggestion to try things out, or personal preference, like in this situation, than it's up to you to make sure the design gets better. So the "middle ground" I just referred to doesn't mean you end up with a lesser design. It's our job to always try to top our initial design. Sometimes it works out and sometimes it doesn't, and sometimes the client will also agree with you. Usually that happens to be the case for me, especially with clients who actually choose "you" because they like "your design style". What I try to say is, you just have to try to push yourself to the limit to be as creative as possible to make it better, taking the feedback into account. In a lot of cases you'll succeed and it's always very fulfilling when that actually happens.

Final design

I had much hesitation when I started working on the previous designs. Based on the feedback, I was almost 100% convinced that it wouldn't improved the design. I was afraid if I reduce the amount of divisions it wouldn't be that strong anymore, that the effect would be lost, but I believe I was wrong. Even though I still liked the initial design a lot, I had a hard time choosing which design I really preferred most. The new ones seem strong too, especially with the blue added to the mix. The client had the same feeling.

Since there would be 2 books now instead of 1, the client decided to go for one of the new designs for the 2nd book, and keep the initial design for the original #3 edition.

These designs are 99% final as the spine will most likely change (at least if we stick to our initial plan). There is some idea for the spine that still has to be worked out here, and so this part could just be temporary. A final item needs to be delivered to me first to create what we have in mind. It all sounds rather abstract I know, but I thought I show you the cover in its entirety so you get a better idea of how things will look.

The briefing

For this project, we were assigned the task to redesign both logo and website (CSS/HTML has been done in-house). Jolena sells special toys, backpacks, treats & party favors for kids. Just like their old one, the client preferred to have a logo consisting of a symbol; something playful, hip and special. The old Jolena logo used to be a woodpecker, referring to the wooden toys, one of Jolena's major products. For the new logo the client preferred something totally different as symbol or icon. In terms of colors, we had total freedom.

The logo design

Sketches

First we did a lot of sketches and doodles of some basic ideas. The subject for the creation of this logo is rather fun and we could think of many different cute little icons that would suit well. As usual, we decided to show most of my doodles to the client first as that has helped us saving time and misunderstandings in the past. One of the ideas we had was to create an icon that could also serve as a mascot, something that people would relate to toys. So we tried out a few funny little characters that looked iconic and abstract at the same time.

Colors

At the same time we also started experimenting with some color combinations, where we tried to find 4 colors that would suit as a color palette for the site consisting of 2 primary colors and 2 secondary ones. For each of the combinations we made sure there was enough contrast to play with. At first we were a bit afraid we would present too many choices to our client. In our face-to-face meeting here at the office, we felt the client really knew what she was looking for, and we had good faith that we weren't dealing with the kind of client that couldn't make up his or her mind when being offered a lot of choices. The colors at this stage were of course just presented as possible ideas, and it wasn't my intention to let them choose the final colors at this stage. In fact it would be rather hard to do so without seeing a actual logo design.

Typography

Another element besides, the icon and the colors is choosing a typeface. Here we also had a couple of ideas. We were looking to find a solid typeface, but script styled. Kevlar seem to fit the bill for us. The other typefaces had a few good qualities that we liked as well, but Kevlar felt more solid.

Feedback

The client liked the sketches numbers 7, 8 and 25 a lot. They also found number 5 interesting, though it made them of a little robot or something space like, which wasn't so good. A lot of the sketches reminded them too much of baby stuff, like 17, 33, 34, 35 and 36.

First design proposals

First we worked further on sketches numbers 7 and 8. One of the ideas we had in mind here was to try to make the spring of the icon the letter 'e' of the name and have the icon in a central position of the name. We thought of using a script typeface of our own creation.

Number 25 of the sketches was a bit of a special one as the client saw 2 different things in the 2 circles of the icon: feet or wheels. Other people however, saw something else… :) Not sure if you see it? My client didn't see it at first either, and so it was only when we posted a modified version based on our client's feedback on dribbble that we found out we had to alter the design. As for the typography of this logo, we decided to use Kevlar as typeface but with the alternation of connecting all the letters, and change the capital J and the letter l.

Second design proposals

Since the global idea and the typography was already approved, the only thing left was to find a way to create a new icon. In other words we had to go back to the drawing board and try to come up with another little character.

This time we found it most useful to just experiment directly in Illustrator with a few basic ideas that we had in mind. One thing we tried out, but didn't seem to be successful, was to just change the shape of the feet so they looked more like real teddybear feet. For some reason that didn't do the trick. Then we thought we should try to see if we could start from some other kind of toy such as a car, or maybe a ring toy that has the look of a cute animal. While my fantasy was on a role, I drew a ton of funny looking fantasy creatures, some with horns, and some with 3 legs. I don't know exactly how many were drewn, but a lot of them for sure. Only a few are shown here.

Final design

When we looked back at all the experimentations of toys and creatures, the ring toy's rabbit ears gave me the instant idea to create a cute rabbit. It's the kind of toy that a kid usually remembers from his childhood, and we felt strongly that this type of icon, which was our initial idea, would create the effect that fits Jolena perfectly. After a few iterations, the final logo was born. The experimentations image shows some of the steps we made to get to the final version of this logo (last 3 icons with the rabbit ears on the 2nd row).

In the end we all felt that the final result was way better than the first design.

The web site design

The color palette

The initial preferred color palette for Jolena was the very first color palette proposal, the one that had yellow included, but once we've started with the design for the site, it was clear that the yellow would cause trouble for readability in case we would use this color for buttons or text links. We decided to change the palette a little and we added some sort of pink, that has a lot of brightness and that deviates a little from the typical pink, as that color contrasts well with the other colors in our palette and it would be suitable for text links and highlights.

The look & feel

From the briefing it was clear that the site should feel very inviting and evoke a certain feeling of cozy and cuteness, but in a well-balanced way. Small ornaments and subtle textures would definitely play an important role to set the right mood. The site should appeal to both young mothers, and have this inviting kids feeling, without resorting into a typical pastel colored baby website. That's also why we felt a bright and bold color palette would suit perfectly. Together with an eye for details, it would give the site that extra bit of a punch that we hope would set it apart.

Homepage design

Since the client already gave us the basic wireframe documents combined with an extended description of the content and functionalities for each page, we could easily jump right into the design, starting with the homepage.

As for the typography, we thought Proxima Nova would be suitable for body copy and main text, and Bree for titles and a few other smaller elements, like action buttons and sidebar menu items.

Product category page design

Once the homepage was all set and approved we worked out the other template pages. We designed a whole bunch of pages, such as the check-out and shopping cart pages, but also general ones like FAQ and the about page. Two major important ones were the product category page and the product detail page.

The challenge in this page was to make sure the visitor would get a good overview of what's available within this category, and which are the new products. To spark that little extra confidence and interest we decided to add a curator who explains why he or she loves these toys or other items.

Product detail page design

For the product detail page it was important that the visitor could easily add the product to their shopping cart to buy the item. Price and other detailed info would be there in a logical and clean way, plus the user should still get a good overview of where he is in the site and which products he already had a look at. Easy access to the shopping cart at all times and knowing how many items there are in the cart was also important, plus the social aspect.

On a final note

This project has been a joy to work on from a designers point of view. Not only was the subject fun and challenging, also the fact that the client really understood what makes a good online shop experience, and that he understood perfectly that design matters to make the circle complete for an optimal customer experience. We truly hope our design didn't miss its effect. So make sure to check out Jolena.be to see the design in action.

Meanwhile...

Apart from Jolena, there is another website managed by our client, called Suikerdraakje, which is currently still in process. Suikerdraakje (translated to English Sugardragon) is an online shop, where you can buy presents, and other baby goods for when friends or family bring mom and the baby a visit in the hospital. Here in Belgium it's the tradition to go to the hospital to visit the newborn, and the parents give their guests sugar beans or what we call baptism sugar. Some sneak peeks of the logo and web site creation can be viewed on dribble.

What is Acturent?

Acturent is an online property management software used by landlords and property managers to store and work with all information related to their rental properties. This includes property/unit information, tenant details and lease information. It also allows the tenants to view their maintenance issues, payment history, and pay rent online.

The briefing

The briefing for the logo was to aim for simplicity, clean and ease of use for the software. My client also added:

Ideally, the logo should invoke confidence and security in the product. If the logo can represent properties or rent, that would be nice as well.

Thinking process & sketches

This pretty straightforward briefing made me think in these two directions:

• Try something pure typographically
• Try out a design for an icon to use as a favicon or to add in the logotype

Typographically we thought we could try to split up the look of the name into 'actu' and 'rent' by using different shades of colors, or a different thickness. Another idea was to try out all caps using a light and elegant typeface, and a special wavy curve in tale of the letter R. As for the icon we were thinking to use the letters A and R of the name, or use just the letter A. We thought maybe we could somehow try to have the letter A refer to a rooftop, or just create an icon that can be related to a house. So I ended up with a bunch of sketches that we presented to our client.

For a long time I never showed any sketches to my clients, but only final designs. I was afraid it would create this indecisiveness, or that it wouldn't really give them the right impression of what I had in mind. Afraid it would be totally misjudged and seen as me doing a rather sloppy unfinished job, and that it would lead to wrong decisions or choices. At a certain moment, I don't remember when exactly, I did get the request from a client if he could see some sketches first. After having worked like that a couple of times, each time with great success, I started to use this as my default way of working. The chances that you spend endless hours on a creation that seems to be totally in the wrong direction is more cut to a minimum, as sketches do give a perfect sense of direction.

Sometimes I get the idea of a logo design purely from sketching, but sometimes the ideas are born on the computer in Illustrator purely by experimenting, using more complex actions such as multiple rotations in combination with copying a single item, or overlapping elements etc. Certain things are way harder to come up with by only using pencil and paper. However, in most cases the basic idea is born on paper, and made perfect on the computer. The sketch is often just a starting point that evolves to a final design in Illustrator. From this basic idea that you've created on paper, you play and experiment, and sometimes you even end up with a surprise.

Feedback

The client really enjoyed number 20 of the sketches. The abbreviation in the circle reminded him of a (copyright) ® symbol and he liked how the letters a and c flowed together. He loved the idea of doing something typographical in combination with a small icon. He was also concerned about the usage of the letters AR as an icon, because the actu part in the name, doesn't have a meaning on its own:

While I did intentionally end the name of the software with "rent," I do have a slight concern of having the icon portion be AR since Actu doesn't really mean anything. I would rather that the icon part just be an A, if that works. Regarding just the typography, though, I think it would be fine to have rent differ slightly from the Actu portion of the name.

My client also liked number 22 and 24. Though for number 22 the link to real estate was missing, compared to the A in 24 which reminded him of a roof for a house.

The proposals

First we tried to work out a proposal based on version 20. In this proposal I tried to connect the first letters of the name and then use the letter a as an icon that resembles a copyright symbol.

In the second proposal we worked out something purely typographical by using this 3D effect as if the letters are made of ribbons that are curled in a rather interesting way.

In the third proposal I worked with the letter A that resembles the shape of a roof. It was the only proposal that had an actual visible link with real estate and my gut feeling told me this one got the best chances to be chosen.

At first the client was in doubt and couldn't choose between version 2 and 3. Version 1 was definitely a no, and we also felt this was the weaker one among the 3 proposals. As for version 2, the colors and overall design intrigued him. In version 3, the letter A is perfect as an icon. Giving it a bit more time, the client decided to go with version 3. He proposed to use the design style of version 2 for the logo design of his company, Bia Creations. The letters of the name would definitely make a good fit to try it out.

The final design

As for the chosen version for the Acturent logo, we decided to use the special A in the name itself instead as a separate icon. The letter a that I was using wasn't very clear and could also be confused with the letter c. It also seemed that the color combination wasn't exactly right, and so we tweaked that as well. We decided to go with one color, and use the secondary colors for the design of the web site, going in the direction of some lighter blues with a bit of teal mixed into it, in combination with some orange accents.

The logo design for Bia Creations

The job to create this logo was pretty straightforward as the design style was already decided upon. The only question left was the choice between using a capital B and C or go for complete lowercase. After trying out both versions, we both decided that the lowercase version looked more elegant and suitable.

Once the logos were decided on, we also designed the Bia Creations homepage, the Acturent web site and backend interface of the Acturent system. It's always greatly satisfying when the end result pleases both client and designer. Nobody likes those kind of jobs where you end up just doing what the client is saying. We aren't here just to design, but also to ask questions why he or she wants it a certain way. When the middle ground between client & designer is reached that is the ignition point to the magic that follows.

The briefing

During a Skype meeting Aaron explained what his book is about. At that time the title of the book wasn't final yet, but there were already a few ideas circulating. One of the titles with the most potential was 'Adaptive Web Design, Creating Rich Experiences with Progressive Enhancement'. I was already familiar with the term 'Progressive Enhancement' so it didn't take too long to start discussing ideas. The book's cover needed to be a colorful eye-catcher, and we both agreed on trying to find some kind of a metaphor or analogy as illustrative subject.

For those that aren't familiar with the term 'Progressive Enhancement', it's a way of designing for the web with the emphasis on accessibility using semantic markup in a layered fashion that allows everyone to access the raw content and functionality of a web page, using any browser, while also providing those with a more capable modern browser an enhanced version of the webpage.

Some of the analogies Aaron had in mind were: a peanut M&M, a trifle, a layer cake or earth. He especially liked the peanut M&M because as he stated:

"Each layer adds something that makes the experience more pleasant, but not all layers are necessary for it to be edible. It doesn’t really work in a literal sense because there are more than three layers, but I still think it’s a valuable metaphor."

Even though it is a good analogy, and the result would definitely be colorful, the idea of using peanut M&M's for the cover of this book didn't really appeal to me. So I suggested to visualize the layered method in a more abstract way, using geometric forms. Aaron liked the idea as well, but of course it all depends on the outcome. It was totally up to me to make the idea work, and to have it speak for itself. We decided to follow this route, so I got started…

The design process

Browsing for inspiration

The first thing I did was browsing around to get inspired for form, colors, typography… Luckily, I didn't have to look very far as I have my own arsenal to start with, my Inspiration Stream. People often ask me if I have a typical design method that I usually stick to. I don't think I have really, as with every project it's a bit different. Of course I always start with the obvious, finding inspiration, but once it's starting to brew in my head it can differ what I'll do next. In most cases, for a project like this, I'll do some sketching and I start thinking about colors. This time I decided to try to find the right color palette first, combined with the typography plus trying to shape the idea of an abstract form that would be suitable.

Creation of a mood board

After gathering a few images that inspired me, I decided it would be a good idea to create some kind of a mood board in combination with a few suggestions on color combinations and typefaces.

After browsing the Inspiration Stream, I found these images that inspired me because of their color usage: number 5, 6, 10, 11 and 12. From these images I tried to derive a color palette of usable color combinations. Next I tried out a few color and typeface combinations for the main and subtitle, by creating these basic covers as seen in 1, 2, 3 and 4.

Images number 7 and 8 I liked because of the geometrical shapes. As for number 7 I thought the idea of overlapping shapes could be something to look into. As the center of all overlapping shapes would represent the users with the richest experience, and each separate shape would be a different experience. Though I wasn't sure if this thinking was actually representative enough, plus that it would translate that message. The idea fascinated me for a while, but then it faded away and didn't result in any concrete concept. Number 9 on the other hand was a special one, because of the concept. I thought it would work well if I could do something similar as how the dog was presented: going from outline, to flat fill and to a colored fill. It reflects the metaphor of progressive enhancement very well. That illustration got me thinking…

Aaron and his team liked the colors used on image number 11. So I decided to work with colors in the same palette of that illustration. Plus they also liked the typeface used in the main title of numbers 3 and 4.

The first design proposal

For the initial proposal I thought of using the shape of a cube and trying out the same idea as the dog illustration, using a color palette that is close to the colors used in image number 11. Below you see some of the process of the first design proposal, trying out a few different compositions. At that time I also didn't know the exact dimensions of the book. As you'll notice further below, the final proportion of the book is a bit taller.

Even though the client's preference was version 2, they weren't 100% convinced on how well the two concepts 'building up & abstract shapes' worked together. They did like some elements of the design, but they also thought of a more sophisticated illustrative style.

The second design proposal

After some brainstorming (via Skype), we came to the conclusion of trying out the concept of using a chameleon, which was also one of the ideas I mentioned in our first meeting. When thinking about the term 'adaptive', I couldn't help thinking about a chameleon. After all it is an animal that adapt itself to its environment around him, and I thought it could make an appealing look if I could create a stylized version. It would make a perfect subject because in terms of colors it gives me enough options, and because it's a very fascinated animal to draw, plus I totally love the shape of his tail. At first I dropped the whole idea, because I was convinced it had been used before on one of the O'Reilly books. Though, I'm now doubting if I don't confuse it with one of their other animals (the lemur?) as I couldn't find anything on the web… While thinking about this in more detail I knew that I would create something totally different from O'Reilly anyway as their animals are always in a black & white pen drawing style.

Second design proposal

After gathering a ton of photos of chameleons I made a small sketch of how I would position him on the cover. One thing was for sure, his tail needed to be on the cover as I totally love the curly shape. Aaron and his team also loved the color palette I used before, so it was my intention to try to adapt the same color palette into this new design. While studying the animal and his position, I tried to draw the animal using only basic shapes limiting into a horizontal, vertical or diagonal structure, with a minimal of deviations.

Second proposal, now with adjusted background leaves and toes

Aaron and his team really loved the direction of this illustration, and based on feedback I ended up with a second version where I gave the animal toes, and a leafy environment. I looked at many photos and compared them with each other. Some of the photos were too blurry for me to make things up. So for a moment the toes drove me a little bit crazy and I wished I could watch this animal in real life. That's why I made a mistake in how his toes are positioned in my first design.

The final and approved design

One of the final remarks was that the ribbon-like effect of the tail did feel a little awkward as it didn't feel like a tail but rather more as a detached ribbon. So I applied this surreal 3D effect to the tail, which gave it more depth and the illusion of thickness, while keeping the different color segments. Another request was if I could curve the crest of his head a little bit more. I initially thought this would ruin it, but after trying this out, it seemed to result in a more elegant look. I also corrected his toes on the front leg and changed the word 'Creating' into 'Crafting'.

Typefaces used for the cover are Trade Gothic Bold Condensed Twenty and Trade Gothic Condensed Eighteen. The book is now off to the printers and I can't wait to have a copy in my hands. That's something that web design will never replace, the tactile response of something you created. The book is now available for pre-order at http://easy-readers.net/ with a discount. Will do a review of the book itself too.

About Designcollectors

Designcollectors is a Belgian webshop that sells high quality design furniture from the Vitra Home collection. Their target audience are people who love timeless, durable design furniture. Design furniture is expense, but that's because they are more than just functional items. It's something we can admire in our interior for our entire life. It doesn't loose its value. The pieces are created by great designers, icons like Charles & Ray Eames, George Nelson, Frank Gehry, Verner Panton, Maarten Van Severen… Design lovers, design collectors. We at Duoh! were of course keen to be part of this project as it is something we are also passionate about.

The Briefing

The briefing we got from the client was mostly based on a face-to-face communication between the different parties involved in the project: the client, the back-end developer and us. The client didn't have a concrete plan to follow in place, instead there was the request of building 'such' website from scratch and so the whole briefing was based on the brainstorming session we had about the look and feel, the general approach of the site, and the technical aspects that would impact the back-end. For this project we were responsible for the IA and general concept, the design, and all XHTML/CSS front-end coding.

The Wireframes

We started by defining the wireframes for the site, including the main pages such as the homepage, the product category overview page and product detail page, and all the shopping cart and check-out process pages.

The wireframe of the homepage

The wireframe of the product pages: product category page and product detail page:

The wireframes of the shopping cart pages: step 1 showing the shopping cart, and step 2 the login of members, or option to register:

The wireframes of the shopping cart pages: step3 showing secure payment via credit card, and step 4 the check-out page:

The Design

The logo and color palette

Once the wireframes were approved we started with the design of the web shop logo and the homepage. Our idea was to keep the general look and feel in the same direction of Vitra, since the shop is selling Vitra furniture.

It was clear from the start that the color red would be used as highlight color, in combination with a blueish black as primary colors. The site's design should feel light but yet colorful. So our intend was to use a lot of white to make sure the product photos pop. As secondary colors we chose a bright light blue, beige and a light sand color.

The typography

As for the choice of typefaces, we opted for Futura Bold in combination with Futura Book for the name of the logo, and Futura Bold for the big headings. For smaller headings which are HTML text-based, we chose Century Gothic as first option, Helvetica for second and Arial as third. Body copy and the rest of the text would be in Helvetica as first and Arial as a second option.

The homepage

From the start we had the idea to combine the shop with a blog. This way the site would live and people would be informed about what's going on in the world of design furniture. Which new products come to market, finding out a bit of background info on how the products are built, or about their creator, info about expositions, new deals on the site etc. That's why the announcement of the blog is at the most prominent position of the homepage. It's a message telling the visitor that the shop is driven by people who are passionate about interior design and design furniture. Saying, this is not just another static shop.

Considering the people who would likely buy design furniture, we thought it was important to be able to look for products not only by category, but also by designer.

Another detail, if you can call it that, was giving special attention to the way the product is shipped. After all, you are buying something very precious and expensive. That's why we thought it should have its permanent place on the site somewhere visual, reassuring people that their product is shipped and delivered with extreme care combined with great service.

I need some help…

We've also spent some work on the help page. This way people really see how the site works, and they see how easy it is to shop and buy online from the site. People also get to see how the gift list feature works.

A visual heading for each category

When we were creating the wireframes I reserved extra space at the top of each page for a big visual. We had these great photos at our disposal to work with so we opted to give them a prominent placing in the design. Great photos help lift the design in general. They're ideal to sell your product —definitely if your product is design furniture. It's a must. These big visuals set a mood and atmosphere telling the visitor what the furniture is all about.

A visual shopping cart

One of the ideas we had was to try out something fun with the shopping cart. Once a product was added to the cart, it would appear in a vertical list at the top right in the header with a small thumbnail. At the bottom we used the shopping cart icon, in such a way as if the items literally fall into the cart.

Another thing on our 'special attention list' was the 'add to cart' link with cart icon, that it was placed on the detail page of the product and not on the category page. On some sites you see a cart icon already on the overview page, giving the user the impression that once he clicks the icon, he adds it to his cart, while instead he or she is just transferred to the detail page first. This is bad usability as the user expects a different action. Another reason is that most of the items are customizable, so the user also needs to define things like color, fabrics or something else.

A gift list

One of the features added in a later stage was the ability to create a gift list. We tried to approach this in a way that the user could create such list in less time and with minimal steps involved. We though this page should be extra appealing, by using something light and colorful in combination with simple language, highlighting the key words: 'Find', 'Create' and 'Edit'. It was based on the same idea on how we try to invite people on the homepage to shop. Using the 1, 2, 3… steps approach.

The Front-end coding

We were also responsible for all the front-end coding of the web site, meaning all the HTML/CSS coding, including jQuery scripting. The site has been up for a while, and uses XHTML Strict. In case you want to explore the pages we've created, you can view the list here. Just keep in mind that not all links within a page will work and that all data is fictive, as these are just templates we handed over to the developer.

Along with these wishes, we would like to pass our gratitude to all our clients. For believing in our work, for your patience, the cool opportunities and the creative challenges. We would also like to thank the web community, colleagues, and friends, who have been a great source of inspiration with all the things that have been shared in order to make us all smarter and wiser. 2010 has been another great year for Duoh!. We've worked on some great projects. Here are some a few highlights that we would like to share with you.

Some 2010 highlights

• Fab.com - Logo & website design, iPhone app design, and e-mail newsletter template design.
• Designcollectors.com - Logo & website design, and front-end coding.

• CampaignMonitor - A set of e-mail newsletter template designs.
• MailChimp - A set of e-mail newsletter template designs.

What Does RapidWeaver 5 do?

RapidWeaver 5 is a Mac application that lets you create a web site by hiding away the technical aspect for you. An app really geared towards beginners or people that have no interest in learning how to code. It isn't a HTML editor as you can't open HTML files directly and look at the code, however you can create a page with your own code by inserting a HTML page from one of the 11 built-in page types. By using this type of page you can use HTML, XHTML or PHP to create virtually anything. Most people will use the predefined pages such as Blog, Contact Form, File sharing, iFrame, Movie Album, Offsite page (Redirect the user to an external URL), Photo Album (works with your iPhoto Library and you either use a CSS based gallery or a interactive flash slideshow), QuickTime, Sitemap, or Styled Text.

Add-ons

If you want something that isn't included it is highly likely you'll find it in the add-ons section. You can extend the application with Themes, Plug-ins, and Stacks.

Stacks

Like I mentioned above, Realmac Software added a special section specifically for Stacks. As I understand it, Stacks is some kind of extension that is created by YourHead Software. With Stacks you get powerful, visual page layout features right in RapidWeaver. Stacks features its own third-party plugin system that allows designers and developers to add new layout tools, also called “stacks.” These stacks can add everything from multi-columned pages, to animated image galleries, and file upload tools for clients. I've downloaded Stacks and had a little play with the demo and it sure is a fun and fast way to create a page. It takes out all the complexity that CSS usually brings and tucks it away from the user. Via the Inspector you control items like color, border, margin, padding, etc.

Web standards

According to the site all code generated by RapidWeaver adheres to published web standards, ensuring that sites look great in all popular browsers - and RapidWeaver themes are built using CSS, making it easy for code-savvy users to completely customize their sites. From the little amount of time that I played with the application that statement seems to be true. Much better code than iWeb for example.

What else is new?

• Projects Window: The all-new Projects Window keeps your recently-opened projects along with handy links in one convenient place
• Bookmarks Manager: The all-new Bookmarks Manager allows you to easily save and quickly re-use publishing details across multiple projects.
• Site Resources: Adding resources to your site (such as PDFs) has never been easier: just drag in resources and organise them from within the RapidWeaver sidebar
• …more new features on the RapidWeaver features page

I didn't have time to test every new feature and go deeper into the application to test out how far you can go with custom styling or what is possible if you start from scratch. As with any new big update there are a few rough spots left that will be solved with a future point update. I've had the beach ball of dead two times when I've tried to change things in the Page inspector and had to force quit the application to get out of it.

My Theme

For the design of this theme I was thinking of creating something that looks colorful with a touch of cuteness. I thought if I use one of my typical illustration styles for the header it would give the site a nice eye-catcher. And so I came to the idea of drawing some kind of suburban landscape with a few houses, roads, a bridge and a city skyline in the distance to the right.

As I was working on the design gradually, starting with the header, I was using a rather neutral blue for the sky, but after I was adding in the footer which uses this taupe color, I figured to experiment a bit more and see how things would look if I turn the blue sky more into a more teal blue. The combination of these 2 together with the dark top navigation bar made it more interesting and stronger. I added more cuteness by adding my own tiny icons for things like tags, icon for the author, comments, tiny tree icons for list of archive items in the footer etc.

RapidWeaver 5 is available now with a free demo that requires Mac OS X 10.5 Leopard or later (it’s also been submitted to Apple for its upcoming Mac App Store). A single user license costs $79, and existing owners can upgrade for $39. If you just bought RapidWeaver 4 after November 1, you qualify for a free upgrade to version 5.

Mailchimp asked myself and a bunch of other talented designers to create a NEWSLETTER, PRODUCT, and EVENT template for them so that they could release a set of premium designer templates for their clients. Sending your content in one of these designs is a bit like sporting an Armani suit. MailChimp users with a paid account will get to try each and every template on for size in the Premium section of the campaign designer at no extra cost. You’re going to look sharp!

Test drive them today

You don't need to know a thing about design or programming to use them. Just plug in your content and you're all set. And the best part? They're completely free for all MailChimp customers with paid accounts. Go look and be prepared to loose a bit of time in deciding which one you are going to use as there is much beauty to behold.