DesignByNumbers

This week, we presented a workshop “How to Make the Web Work for Your Business” for a group of 45 entrepreneurs. When we asked the group to rate their own knowledge of and comfort with the web on a scale of one to ten, they rated themselves from zero to eight. Crafting a message that appeals to a diverse audience is a challenge in any form of communication, but sharing a common vocabulary is critical.

We chose to use a number of commoncraft’s “Plain English” videos. They are know as fantastic tools for simplifying content, but I am even more impressed with how much they cover.  The shorts, which range from 90 seconds to three minutes, serve as fantastic checklists of “what should I remember if I’m ever trying to explain this to someone.

The “Plain English” videos are not only a good resource for the uninitiated, they are a fantastic resource for anyone who finds themselves in a position of  explaining web concepts to clients or colleagues. They are thorough, simple to understand, and amazingly succinct. If you’ve never seen one, go take a look. If you have seen them and dismissed them as “too basic”, take another look. If put on the spot, could you explain one of these concepts as clearly and quickly as Lee LeFever?

Recently we had a project where the design required growing vines, a popular analogy for growth.  I had used masks before to create the grow effect but was never really happy with the results or the lack of flexibility with that method.  I searched the internet and found a number of different ways to do it but still it didn’t have the look I wanted so I modified one of those techniques to get what I needed.

I’m using After Effects CS3 in this tutorial.

The most versatile solution I found comes from the stroke effect.  The stroke effect mimics a brush stroke following along a mask path.  You can animate the start and end points as well as the thickness.  This would have worked fine, but I didn’t like how the stroke maintained the same thickness along the length of the path.  I wanted the think point at the top of the vine, getting thicker as it grew upwards. Read the rest of this entry »

“Why do you need a website?”

In this second blog based on our Techalliance workshop on (re)designing corporate websites, we explore the first question we always ask our clients. It seems obvious, but you’d be surprised how many companies don’t have a clear answer prepared – which is interesting because the answer to this question is the foundation that informs every design, implementation and technology decision in the website creation process. Your website exists to help you achieve your goals, and defining what you want to accomplish is the first step in creating a site that works for you.

There are a lot of competing technologies and approaches in web design, and having a clear goal for your website is the best way to narrow the choices you’ll be making. Designing a website is a lot like reaching for a tool from a giant toolbox – you have to pick the right tool for the job. If you are trying to screw two pieces of wood together a hammer is a poor choice compared to a screwdriver. The requirements for a website that sells products are vastly different from an informational brochure site that simply serves to introduce the world to your company and brand.

Read the rest of this entry »

Recently we were invited by Techalliance to facilitate a public workshop on (re)designing corporate websites. Our approach was to provide business owners with practical advice on managing the process. A common theme throughout the presentation was the idea that clients can prepare themselves with a set of criteria for evaluating vendors, and the designs they provide, to ensure that they are selecting the best solution for their website.

For many clients one of the toughest parts of the web design process is evaluating and choosing the visual design, and discussing their response with their vendor in a clear and concise manner.

Luckily, the essence of good visual design can be understood using only three core concepts:
unity, consistency and hierarchy.

Read the rest of this entry »

The Web and Fonts

While fonts are a common and important element of design, translating that concept to the web can sometimes be a challenge. As the web has always had poor font support, there have been a number of ways to work around this. Common solutions are to generate an image using the font, such as with PHP’s GD library or rending a Flash shockwave movie with the font. The problem is that many of these solutions require a specific font format.

While the design world has moved on to the more flexible OpenType format, much of the programming world is using tools that rely on TrueType. Even graphics software giant Adobe has been slow to adopt OpenType in all of its applications, such as Flash CS3 which still only supports TrueType and Type 1.

Enter Font Conversion

Read the rest of this entry »

When creating a new website for a client a lot of effort goes into creating the visual look. Elements such as colour choice, photography and illustration, intuitive navigation and your company’s brand all play important roles in shaping your customers’ perception of your company. When it comes to your website’s search engine performance, however, none of these things really matter. To the search engines’ computers content is king.
Read the rest of this entry »

It’s hard to know – if we had a wider choice of fonts on the web, would it encourage better designs? Perhaps. It will also increase the ability for those users who loved the BLINK tag to create pages far more horribly designed than we have seen so far. Think of all those home made flyers & posters using the Comic Sans font. I don’t think that font can look good in anything other than comics.

But I have to concede that these atrocities should not result in the punishment of those designers who would use them wisely. There is still a long road ahead for font support on the web but as a web developer my vote is for more options than less.

Read about the history and state of web fonts here: CSS @ Ten: The next big thing

At some point in the design process there is one question you are always going to be asked:

“Can I have a copy of your logo?” Normally, there is a pause in the conversation and your response comes back, “What format should that be in?”

If you really want to make a designer happy, you’ll be able to supply the logo in VECTOR EPS format. With a VECTOR EPS file, (which is appropriate for any medium, digital or print), a designer can create any other file format that they require at the highest possible quality.

If your company logo was professionally designed then a VECTOR EPS file should be available from the original designer. If, however, your logo has been around for so long that no original file exists, it is worth every penny to have your logo professionally recreated as a VECTOR EPS file for future use.

Read the rest of this entry »

In web design there has been an ongoing argument about whether or not users actually scroll webpages to see content that isn’t initially visible when the page loads. The imaginary line that divides the webpage between the initially viewable content and what a user sees when they scroll is called the “fold”, and some people believe that only the content above it gets seen.

Until now the debate has largely been academic with one camp insisting that everything essential be crammed in the limited space above the fold, and the other camp saying it isn’t really an issue. While our opinion is that it is common sense for major information and client branding to be above the fold, recent research has finally brought some well-needed facts to the debate.

Bottom line: People almost always scroll right to the bottom of a webpage – no matter how long it is.

For an excellent in-depth discussion of the latest research click here.

Have you ever participated in or facilitated a brainstorming session? Did you find it hard to keep track of all the ideas and organize them after the fact into a clear document that you can share and review with your co-workers and clients? Enter Freemind – a free cross-platform mind-mapping application that can help you capture,organize and work with free-form information.

In any design project, there is a discovery process where you need to collect information and generate new ideas. The process of brainstorming is a free-form and often chaotic process. The flexibility that the brainstorming process provides as a collective creative tool can make it hard to capture all of the ideas and organize them into an effective document for review after the session.

Read the rest of this entry »