Array Studio Reading List - a list of useful books

Free Web based color scheme creator February 3, 2007

I simply enjoy this kind of stuff. Specially if client doesn’t have any specific color scheme request. This color cycle is easy to use and you can generate great color schemes, if you know where to click.

First, click on the buttons below the cycle and choose from (Mono, Contrast, Triad, Tetrad and Analogic). Then, play around with colors and see what you’ll get. Use variations to set the colors perfectly. There is also a simple preview where you’ll be able to see how colors fit. I prefer dark and light pastels myself.

Here is the link to Color Scheme Creator. Enjoy.

6 Web Designer Health Tips January 14, 2007

It is silly to complain about a Web Designer’s job. You sit in your favorite chair with a laptop in your lap or in the office behind your custom made table. However, when you lack inspiration - you’re in trouble. Specially if the deadline is tomorrow morning. That is the time your mind and body overheat. In every possible way.

I have some weird mind flow with deadlines. Even though I have weeks to complete a design, in 90% of cases I work through Sunday night, completely stressed and freaked out with a bunch of cold energy drinks. Don’t even want to talk about how I look next morning.

Here are some health tips based on my experience.

Health tips

• Don’t rely on deadlines. Start soon. If you expect you’ll need 2 hours to complete the project and have a clear vision of what you need to do – do it right away. In most cases, it will take you at least 1 day to polish your creation. If you have 2 weeks, leave the second week for small adjustments. Don’t wait last day to start! It is much better to spend last day playing PES6 with your colleagues.
• Don’t smoke next to your computer. Well, don’t smoke at all! I do, and I’ll start a new blog once I try to quit. If you smoke, don’t smoke next to your PC. When I did that, I stopped counting packs. To be honest, new tip is just born. Don’t smoke while you write your blog entry. Just don’t.
• Change your everyday routine. Go to places you’ve never been before. I read some study regarding F5 neuron syndrome (refresh for non geeks). Anyway, when you are stuck in your every day routine, you refresh only part of your brain which leads you to a sort of depression and inspiration deadlock. So, change your behavior. If you have your 9-5 work, you have 16 hours a day for trips, nature, off topic books, movies, friends, PES6, your loved ones… Combine these the way you like.
• Follow common trends. You don’t need to invent your design. The worst nightmare for Web Designer is to look at empty white sheet for 30 minutes. This is a best way to get stuck. Browse through some successful websites and see what they do. Compare your projects with them and see what is working best. Start from there and everything will go smoother. Even though I don’t visit microsoft.com often, now I do since they did a great job with their new website.
• Use Red Rabbit Technique. If your mental health is in bad shape because of clients, use this technique I explained in one of my previous posts.
• Try to find some personal space. When you work in your office, you are usually disturbed by your colleagues and pulled out of your creative flow. If you are a nervous guy (some say I am, damn it), buy some studio headphones as your #1 office sanctuary. Fill your PC, iPod, iPhone (bless it), or Zune (God forbid) with a music you find inspiring. Off-site solution is working in your home studio (usually part of your room) or wherever it is where you find your peace.

Blog design tips September 5, 2006

Today I want to talk about blog design. As I browse the Web, I stumble on many different blogs, most of them ugly. It’s understandable that people can’t design web pages, but with many free descent templates available, there’s no excuse for ugly looking pages. All I can say - if you don’t know how, get a free or buy a template, or hire a professional.

However, if you still want to design your own blog template, here are some tips that could be helpful:

1. Keep it simple
   The master advice. Don’t use many different fonts and colors. Pick few fonts and a color scheme, and stick to it.
2. White background
   Except if you’re in some unusual industry where colored backgrounds are in, forget about it. Most of the third-party images you will insert in your blog posts are made for the white background, making their appearance on some other-than-white background, well… ugly.
3. Clear navigation
   Usability is important in blogs, as it is in regular websites. Don’t complicate too much. There are dozens of plugins available which tempt you to install them and add some additional elements to your navigation. Resist the temptation and leave the navigation alone.
4. Don’t let the social bookmarking ruin your design
   I’ve seen many sites that add social bookmarking (del.icio.us, digg, etc) buttons to their design even if it looks awful. If it can’t look good - forget about it. Use text links instead (as we use on AS Workshop).
5. Make sure that user knows what’s a title
   This seem too obvius, right? However, I’ve seen blogs where it’s hard to know what is the title and what is the content. They put the title in some heading boxes and one can not determine where post begins and where it ends.

At the end I want to mention two good-looking blogs from a friend of mine. One is Japanese Cars Watch and the other is Symbian Watch. Take a look at them and analyze them thoroughly - you can see a great blog design and even better information structure there.

Make OL list start from number different than 1 using CSS August 31, 2006

If you need to create an OL list that starts from number different than 1, here is an elegant solution. This is very useful if you need to display a listing on more pages (eg. there are 100 search results, and you want to display 10 results per page). In this case, if you are using OL list, it will start from number 1 on every page, and that is not a good solution because it will look like this:

In order not to use deprecated < ol start=”6″ > parameter in my second list, we’ve searched the Web for an adequate solution which complies with W3C standards - and we found it.

You need to write the following in your CSS:

	OL#page_one { counter-reset: item }
	OL#page_two { counter-reset: item 5 }
	LI { display: block }
	LI:before {
		content: counter(item) ". ";
		counter-increment: item;
		display:block;
		}

And, this is how your lists should be defined:

<ol id="page_one">
	<li>Division Bell</li>
	<li>Atom Hearth Mother</li>
	<li>Relics</li>
	<li>Dark Side of the Moon</li>
	<li>Wish You Were Here</li>
</ol>

<ol id="page_two">
	<li>The Wall</li>
	<li>More</li>
	<li>Piper at the gates of Dawn</li>
	<li>Final Cut</li>
	<li>Meddle</li>
</ol>

These fieldsets represent separate pages, of course. Now, our lists look as we wanted them to look in the first place:

(more…)

Coolest CSS Zen Garden solution ever! August 26, 2006

I couldn’t stop laughing once I saw this solution. As you probably know, CSS Zen Garden website is all about one singe XHTML page that designers can dress up using their external CSS. Well, this theme is called Geocites 1996, and it’s a real time machine!

I congratulate Bruce Lawson on this one, he really tried to make every detail in the same way as archdesigners done in those ages - and all that by using standard CSS! Great job!! This reminds me of Andy Warhol work from some reason. Anyway, thumbs up!

You can read more about this masterpiece here.

How to deal with picky clients – Red Rabbit Technique July 28, 2006

Here is a secret I would like to share with you. I bet that anyone who ever seriously worked as a web designer encountered a client (or clients) who always needed to change at least a pixel of your design. It can be a masterpiece - no matter what you create - but they’ll always find something to change. Don’t know why, but they just do.

If you are constantly receiving responses like these listed below, you’ll need to learn this simple Red Rabbit Technique:

• That looks great, but can you please make that line a bit thinner
• Why did you choose 24px Verdana for headline? I think 25px will do much better
• That green you picked is too green. Is there a way you can change it to something more yellow?
• I love those icons very much. Can you move them 2px up? And make them 2% brighter

Here is what you should do. I know it sounds silly, but it freaking works - it is more than fun and it requires very small amount of time!

Red Rabbit Technique

First you need do create the design in the way you think is the best. Move it around, polish it, use the fonts you like… Create whatever you think the final design should look like. Save your masterpiece and backup it.

It’s time for Red Rabbit! Basically, what you need to do now is to decrease the quality of your design. Create one simple eye catching mistake everyone will notice. Something like the sample I’ve provided above. You can do practically everything you wouldn’t do for real. Here are some ideas:

• Destroy your color scheme. Add a strong color that is out of any harmony from your layout
• Change your headline font to some old-school one like Times New Roman (this might be to obvious)
• Replace your cool photo you’ve spent 3 days to find with something you found on Google Image Search
• Anything else you can think off.

To keep the story short, don’t go too far. Key issue here is to create a minor, eye catching mistake. If you ruin it completely, your client will request re-do of an entire design. The goal is to hear: “That’s great! One thing I dislike is that red color you picked. Please change it to something different.” Than, you show them your original work – and they love it.

Extended Red Rabbit Technique

This one requires a bit more time, but the principle is the same. You should use it when the client requires more than a single design from you so they can pick one of them. Again, you create what you think is the best. Than, downgrade it in various ways. Align it to the left, change colors, use different font, etc. Bare in mind you’ll need to place a winner as the final version. Downgraded versions should be presented first. This technique works even more than the first one.

One way or another, you have nothing to lose, your work will be done faster, and you’ll have a lot of fun during the process of downgrading your design. Guaranteed! Also, no harm is done and your client will receive the best solution anyway.

Why is it called Red Rabbit?

Well, this was my first association when I’ve started implementing this technique. If you see a red rabbit while you’re walking through the forest, you’ll notice it. That’s exactly what your picky client will do.

In one of my next posts, I’ll provide you with some real life samples of correct Red Rabbit Technique usage.

How to use lorem ipsum July 10, 2006

Few days ago I read this article on Signal vs Noise Blog. Even though I respect their work and oppinions (after all, we are using their products), this particular article I coundn’t completelly agree on.

As you’ll be able to read - they are strongly suggesting you shouldn’t use Lorem Ipsum as your “content-here” text.

Well, why not? Specially when you are working on some client’s project where material is always late at least for few days or even months.

You can always try to guess which text would client like to place, but 95% of the time, you’ll be wrong — and more importantly, you’ll spend few hours explaining WHY you placed that text there - instead of using the meeting time discussing usability and design issues.

So, my idea is to create a mockup layout with Lorem Ipsum text in place of paragraphs only. I always use regular text for headlines, navigation buttons, etc in order to present true website functionality. However, when you know there should be a paragraph of text explaining your client’s marketing strategy, mission statement, or some other blah-blah — put Lorem Ipsum paragraph there. You can check provided sample so you can see what I had in mind.

As you can see, I used Lorem Ipsum as paragraphs in places that are not much important for site functionality - (not in headlines, navigation, links…). Additionally, I used some bold and red elements - things that client will most certanly use in real life.

It cuts your working time, it works, it doesn’t create confusion - just use it properly.

However, when you are creating your own application, then forget about Lorem Ipsum.

Best lorem ipsum generator I stumbled upon in the past you can find on Lipsum.com.

Predefined CSS rules in most browsers June 26, 2006

Each and every time I start working on a new (X)HTML / CSS project - same problems turn up. As you probably know, every browser has some predifined CSS rules that you might need to override in order for your page to appear correctly on most of them. I say most of them because some of them I consider as waste of time (IEs older than 5, Netscape 4, etc. and their long lost relatives). While reading one cool and very useful article about prototype coding, led by few clicks I got this W3C page in my favorite browser (use Firefox!) I found very useful. It explains what rules most of browsers apply as they default CSS. Even the page states that the list is informative, not normative, I found points where should I focus my attention while overriding defaults.

As you can see below, I dig through that W3C page and copy pasted most used (X)HTML elements (I skipped some I never heard before) in more organized way - so I can print them out on single piece of paper I’ll keep on my desk in the future. Here is the list:

These are only the most used. Apart from this, you should always kill predifined FORM margin and padding values since IE iapplies them (and ruins my page). I’m sure there are some IE margins for BODY too, so pay attention on them. body {margin:0} won’t kill you.

For complete list of suggested predefined values visit http://www.w3.org/TR/REC-CSS2/sample.html.

Banner ads with HTML elements – banners that actually work June 19, 2006

Banners are one of the most used marketing tools on the Web for ages – you can see them on almost every commercial site. Some of them are successful, some are not. Some of them are truly annoying, some interesting.

No matter how they look and feel, people are still using them. One thing that’s important for any web designer is – there is still need for them and you’ll be creating them for a long time.

Key point you need to understand when you are creating a banner ad is – it doesn’t have to be good looking. Over-animated, shiny banners won’t do you any good if they are not clickable.
(more…)

Control your color gradient tool! June 12, 2006

There is one thing you should know about gradients no matter what application you use – it is a tricky business. You can create nice color harmony or ruin your layout in 3 mouse clicks.

Back in 2002 I was avoiding it wherever possible from various reasons:

• Page load was longer
• It looked unprofessional and lame
• 2 of 3 gradients throughout the Web were followed with some horror looking headline, 3D rotating logo and/or heavy JPEG compression

Of course, those days CSS was used for changing colors in anchor tags - rarely for something more. Now it’s different – we use style like background-image, background-repeat, background-position and whoohoo – with a 0.1KB GIF image of 50×1 pixels in gradient, we have a cool looking header background. If we use some cool font, sometimes it’s more than enough for good start in our design.

So, now we know what we need and I am more than sure you know how to create gradient in your favorite application. You pick two colors, you draw a direction line and that’s it! Gradient is here. We just need to learn how to control it.

Here are some ideas how to refresh your current web sites…
(more…)