Archive: February, 2012

Weekend Illustrator Exercise Continued

Cartoon Boy Illustration

Last weekend I followed this Adobe Illustrator tutorial closely and you can see the resulting illustration of a cartoon alien in one of my previous posts, here.

This weekend I step up the game and created my very own cartoon boy illustration, sketch and all, using the same techniques as described in the tutorial. Despite a few flaws I am terribly proud of my creation. This shouldn’t stop you from commenting and criticizing – this is still an exercise, done to learn.

The shoes took a bit of time and I’m not 100% satisfied with the shape but it’s the hand that was the trickiest part. For the longest time it looked like an alien claw but I think I finally got it right.

 

Day 25: CSShortcomings: the equal height columns debacle.

I am currently coding a website I designed and by in large it goes well but there this little annoying detail.

Generally when I design a website I do not thing about how easy it will be to code it. I strongly believe that I design for the presentation of the content and not for the code. This time as well I did not think about the little quirk of CSS, namely the total lack of markup that allows for creating equal height columns independent of the content.

Equal Height Columns layout

Equal Height Columns layout

One would think it can’t be that difficult but sadly there is no actual CSS rule or property that does that. Therefore one is limited to tricks (at best), hacks or improper markup (at worst).

Assuming that one feels using tables for non-tabular data is a capital offence, one is limited to 4 possible methods.

1. Nested Columns by Mathew James Taylor

This is the cleanest code method and would work in any kind of browsers. Sadly it will not work  if you wish to have space between the columns or borders around each of them.

This problem is a result of how this method works. The columns are nested and each of them extends all the way to the left of the page. Content is than placed separately on top of the background. Column most to the right is at the bottom of the stack and stretches to the left side of the page. And the next column is placed inside and on top and moved x% to the left and again stretches to the left side of the page etc.

2. Display: table

This is an ok solution. It uses CSS3 display:table and display:table-cell properties. It will require a small hack (extra empty column in the middle) if you want to have space between columns or borders around them. Unfortunately, the solution falls flat in IE7 or below. It breaks down the layout and the columns are places under each other. The remedy to this problem could be an alternative CSS for older browsers.

3. Faux columns

Faux columns is a solution devised by my CSS guru, Dan Cederholm. It includes making a slice of background and repeating it vertically in the parent div to simulate the columns. It does not work for liquid or % based layouts and it also means adding empty divs to the markup if one wants borders or rounded corners.

4. Jquery

This method obviously uses an interaction tool to build layout so it is a hack. However it does not upset the markup of the actual website and works in all browsers. Of course some people may not have JavaScript enabled but, let’s face it, that is incredibly rare. And even if they did they would still see a valid website, just that the columns won’t be equal in height.

As you can see there are ways to deal with the problem (as there are methods for nearly everything in css) but none of them is really clean and error-proof.

It sure would be nice if there was a simple CSS3 property to do the job… 

Day 21 and 22: HTML5 and CSS3

HTML5 logo

HTML5 logo

For the last few days (and for a few days to come) I had the joy of playing with the new (ok, not so new) shiny toys for web designers: CSS3 and HTML5. And let me tell you, joy it is. The simplicity of embedding video and audio alone makes me smile like a lunatic but when you add the smooth transitions and transformations, I am sold.

Of course Internet Explorer (8 and below) is as usual a damn party pooper and doesn’t support almost any of the new features (that are otherwise supported by all the other major browsers). There are many hacks and fallbacks one can use to deal with this spoil-sport but the whole idea of html5 and css3 being simple goes to pieces. IE9 is a little bit better and supports the bare basics so maybe by the version 25 we can expect support for today’s standards (of course by then we would have moved on and IE is as always behind, or even better, it doesn’t exist anymore).

I will not write about the particulars of either HTML5 or CSS3 because this could take a book or two but I will point you in the direction of some resources I found useful.

Books:

Both books mentioned below are great introductions to the topic of HTML5 and CSS3. They are written with a light language and explain everything in detail. They also give some background as to how these standards came to be. To better explain the new features, both authors use extensive code examples. The only potential drawback is that the books are only useful for someone who already knows HTML and CSS.

A Book Apart: HTML5 for Web Designers by Jeremy Keith

A Book Apart: CSS3 for Web Designers by Dan Cederholm

Web-resources:

Comprehensive table of browser support for HTML5 and CSS3: http://www.findmebyip.com/litmus/

JavaScript library that detects browser support for the technologies: http://www.modernizr.com

Example site using CSS3 features from Dan Cederholm: http://css3exp.com/code/view/

And lastly an answer to a very important question: Do browsers need to be experienced exactly the same way in all browsers? (also from Dan C.) 

Weekend Illustrator Exercise

This lovely alien character was a product of this Adobe Illustrator CS5 tutorial I worked on this weekend. The tutorial makes a lot of use of lines and paths. I recommend the tutorial for a bit more advanced users as some steps are skipped over or described in just one sentence. Nevertheless a very nice project to practice ones AI skills.Alien illustration

Alien cartoon-style illustration

 

Day 20: Simplicity Sells

I watched Ted Talk with David Pogue recently and I wanted to share some thoughts about it:

It seems to me that while it’s obvious what he is saying, it is also a little bit more complicated than he makes it.

His premise is that the simpler the design, the better the user experience. At a first glance that makes sense but I think that to really be able to use this statement in practical design tasks, one has to define “simple”. As stupid as it might seem, this little word needs to be defined in design terms because it can mean  many several different things.

Does “simple” interface means interface with limited amount of options? Or does it mean an interface that has all options shown by default? Or maybe one that uses words instead of icons? You can ask several hundred of these questions before you come up with what a simple interface is. Especially if you take cultural differences into consideration. Should the most used options be on the right or the left? After all a large chunk of our world reads from right to left.

What I suspect David Pogue means by “simple” is “intuitive”. He hints at that meaning of the word, when he mentions breaking the rules for the sake of intelligent design. And while this is a great idea, it is also not very specific. For me standard-based website is intuitive and I don’t have to wonder what in the text will take me to the next page, if one word changes color when hovered over. But it is not the case for my parents. They might have learned that by now, but it is not an intuitive behavior. And there is also the story of my friends’ kid, who comes to the screen of the TV and tries to “swipe” to change the channel. Damn, every now and then even I try to “swipe” on my Kindle.

What’s intuitive? That changes. What’s simple? That isn’t clearly defined. So how to design something that sells? By clearly defining your user group and catering to their needs. And by testing, testing and testing again.

And for desert, this video of Windows 8 design that, I believe is not simple and yet intuitive and has a chance to become a success.

 

Day 16: On wireframes

My regular posting slipped up a bit but partly I blamed WordPress that lost my post saved as draft and now I have to begin all over again.

So today I want to write about wireframes.

website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.

This from Wikipedia. Why Wikipedia you might ask? Because every other website has a much more complicated and subjective view of what wireframes are. What got me really interested is how many different ways there are to use the wireframes in. I always used it as a rough draft for my designs and a html box structure. To be honest, I never really treated wireframes seriously. Well, I won’t make this mistake again. After having read the articles I mention in this post, I’ve learned that wireframes can become a quite powerful tool. So let’s take it one by one, shall we?

Wireframes as design tool.

This is the most obvious use for wireframes. They are used by designers to plan the layout of webpages. A simple sketch from which to work. While this is definitely a valid use, it is not the only one. A special sub-set of designers, the UI designers can also use wireframes to conceptualize user interfaces and the information flow on the website. Simple use of post-it notes can do wonders to interaction planning.

Wireframe as information architecture tool.

Wireframes can be used to organize the content. And this is both valid for single pages and for relations between pages. This helps to establish menu structure and generally organize information hierarchy.

Wireframes as thinking devices.

As this brilliant article from Semantic Foundry explains wireframes can be used to formulate the design problem and, by sketching many concepts, finding the right solution to the problem. I have to say that this particular use of wireframes is especially appealing to me. I tried it in my recent work and it really is a great tool I will keep using. I will never again underestimate wireframes.

Wireframes as communication tool.

Wireframes can also be used to communicate with your stakeholders in the early stages of the design process. Instead of talking away about your communication strategy, you can visualize it to your client using the rough sketches.

Wireframes as SEO tool.

Now this was a bit of a surprise to me. I wouldn’t have expected it but it seems that SEO efforts can also be helped with wireframes. Using wireframes you can plan for keywords’ use and optimizing each page.

http://www.seomoz.org/ugc/seo-wireframing

 

Resources:

Introduction to wireframes: http://gluue.com/2009/01/content-wireframing-ducks-meet-row/

Online tools: http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-design-and-9-tools-to-create-wireframes/

The boxing glove technique: http://www.90percentofeverything.com/2008/01/02/the-boxing-glove-wireframing-technique/

All about wireframes: http://wireframes.linowski.ca/ 

Day 13: B2B marketing

I was looking into how B2B marketing varies from the regular one and here are my notes:

  1. Businesses have more complex buying procedures - it is not just one or two people deciding on spending some money. The company might have several departments involved in preparing the specifications and reviewing options, experts might be employed to provide expertise etc. This means that it’s much harder to establish who your target group really is: a certain department, a person in that department, an expert or the CEO?
  2. B2B buyers are more rationale – decisions are made more on the basis of what is needed vs. what is desired. If you are able to  identify what a given company/department objectively need, you can target your customer well. You do not need to guess what a person might want.
  3. B2B products are more complex
  4. B2B target audience is usually smaller – your product is likely targeted at a limited amount of companies. The product is likely to be more complex and more expensive but you will make much less sale than an H&M store does. That also means that more effort can and should go into each sell. That also means that there are less need-based segments.
  5. B2B is based on personal relationships – this results in part from the complexity of products, buying process and the small number of buyers. Because the sale takes more time and is a more complex process a personal relationship and trust are developed. Personal customer service is therefore extra important.
  6. B2B markets have less segments than consumer ones – on average 3 or 4 segments. It is a result of a smaller target audience but also of  less variations in particular needs of this audience. These segments typically are (according to B2B International):
  • A price-focused segment, which has a transactional outlook to doing business and does not seek any ‘extras’. Companies in this segment are often small, working to low margins and regard the product/service in question as of low strategic importance to their business.
  • A quality and brand-focused segment, which wants the best possible product and is prepared to pay for it. Companies in this segment often work to high margins, are medium-sized or large, and regard the product/service as of high strategic importance.
  • A service-focused segment, which has high requirements in terms of product quality and range, but also in terms of aftersales, delivery, etc. These companies tend to work in time-critical industries and can be small, medium or large. They are usually purchasing relatively high volumes.
  • A partnership-focused segment, usually consisting of key accounts, which seeks trust and reliability and regards the supplier as a strategic partner. Such companies tend to be large, operate on relatively high margins, and regard the product or service in question as strategically important.

This is just part one of my notes on the topic of B2B marketing and communication. More will come shortly.

Day 9: Issuu: Online publishing.

Issuu logoThis week I looked into an interesting online service, Issuu.com.  According to the website:

 

 

“Issuu is the leading digital publishing platform delivering exceptional reading experiences of magazines, catalogs, and newspapers.”

The service allows for quick, easy and free online publishing of most common document formats such as .pdf, .doc, .ppt or .odt. All you need to do is register and upload your file. You can choose to keep your publications private and available only under the URL or you can make it searchable through Issuu and Google.  There is also an option to embed publications on your website.

Let’s quickly look at a few good and weak points of the service:

Weak points

  • free version has adds
  • PRO version is pricey and doesn’t have many benefits
  • the reader for the publications is based on Flash. According to Issuu, if you don’t have Flash installed the reader should simply show you images of the document (a bit like PDF reader) but that wasn’t my experience.
  • there is no app for Iphones
  • it’s not easy to find detailed information on the website
  • not every font in your document will translate correctly so consider using the most common ones

Strong points

  • publishing with Issuu is really easy
  • there is a free version that has basically the same functionalities as the PRO version
  • the publications look professional
  • you can easily embed the documents on your website
  • there is a free app for Android phones
  • you can easily add buttons and links to your publications once online
  • you can use SmartLook code from Issuu to automatically convert all the documents on your page into Issuu publications

So all in all, the service is a really good way to achieve professional look for your online documents.

And as a tasty treat here is an expert from Issuu’s cheeky customer service:

Our service is always very reliable. If you experience problems with upload the problem is most likely on your end. In general, you should always try a differentbrowser / internet connection / computer whenever possible. Often the problem can be solved with a little patience and experimentation.