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?

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.

To do this I used the stroke effect multiple times linked with some expressions for simple manipulation.

1. Create a new composition for your vine.
2. Next create a solid in the dimensions of your composition.
3. Using the pen tool, draw a mask on your solid.  If you don’t close your mask its mode should be set to none by default.  Otherwise, right click on your path and select Mask > Mode > None
4. Apply the stroke effect.  Effects > Generate > Stroke
5. Increase the size of the brush size on this stroke - it becomes more obvious without having to hide the mask.  Then play with the Start & End options on the effect control to see your vine grow and shrink. So far, it’s looking good but we don’t have that point of where the vine starts.  To do that we’re going to use multiple instances of the stroke effect.
6. Select the stroke effect you just added and duplicate it a number of times.  The more instances you use, the smoother the gradation from point to full size.  For the purposes of this demonstration we’ll use 5 instances.
7. For each instance of the Stroke effect make sure you have your Mask selected in the Path drop down.  I kept the default mask name of Mask 1.
8. For the top instance only, select On Transparent from the Paint Style drop down.  This ensures we can add any background we want.  Make sure all the other instances are set to “On Original Image” otherwise each succeeding instance will overwrite the last.
   We don’t want to have to modify every single effect if we need to modify width or how gradual the point is.  This is where expressions come to help out.  First we need to add the controls that we will use to control the expressions.

   

9. Add 3 sliders.  Effect >Expression Controls > Slider Control.
10. Rename these controls to stroke end, stroke offset, stroke width.The stroke end control will control the end point of all instances of the stroke effect.
    Stroke offset will control how far apart each instance will be from the next.  This will allow us to modify how gradual the vine goes to a point.
    Stroke width will control the overall width of our vine.

    The basic idea is to use multipliers of the slider control.

    

11. Expand out the effects of your vine solid in our composition timeline.  Expand the first stroke effect so you can see all it’s properties and then click on “Brush Size” to select it.
12. We need to add an expression to this property.  Use the shortcut ALT + Shift + = or go to the menu Animation > Add Expression.
13. Use the following expression: effect(“width”)(“Slider”) * 0.1This is basically saying  get the value of width custom slider we added and multiply it by 0.2.  Using a small decimal number gives us more control with the slider.  If the slider is set to 10 then our width will be 1 (10 * 1).
14. Repeat steps 12-13 for the remaining stroke effect instances.  However increase the multiplier as you go.  For example stroke effect 2 would be effect(“width”)(“Slider”) * 0.2.
15. Go back to our first stroke effect and select the property “End”.  Add an expression using ALT + Shift + =.
16. Add the following expression: effect(“end”)(“Slider”) - (effect(“offset”)(“Slider”) * 0.1)What we’re saying is to subtract our multiplier (0.1) from the end custom slider.  This will make each successive stroke be slightly less than our end custom slider.  In order to adjust the amount of the multiplier we muliply that by our offset custom slider.  That will uniformly increase or decrease that value.
17. Repeat this for each successive stroke effect, incrementing the multipler (0.2, 0.3, 0.4, etc…)
18. Take a moment to play with our custom sliders to see the effect.
19. Now we can animate our vine by using the “end custom slider”.

You can tell right away would should probably add more instances of our stroke effect to achieve a smoother transition.  With the way the expressions are set up you should be able to add more instances without having to reanimate.  Just add extra instances with appropriate multipliers (you may have noticed that I setup the multiplier to be a tenth of the instance number. eg. instance 1 was 0.1)

Have fun animating your new vine.

Checkout the finished video below - vine effect starts at about 30 seconds.

www.youtube.com/watch?v=ib0VH9TxLJo

About the author
Jeremy describes his favourite work moment with rtraction as the time the weekly team meetings were renamed to “Cake” to help improve morale. The initial “cake” was a resounding success with three employees contributing unsolicited desserts. Jeremy has a love hate relationship with computers , and in contemplative moments he has been known to muse on the fact that his life’s work is in reality a long string of 1’s and 0’s.

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.

Credibility / Brand Image

The number one reason companies need a website is simply to establish credibility with their audience. There is a general perception that a company without a website is not trustworthy or established. Consumers are becoming increasingly sophisticated in researching companies before purchasing goods or services, often using the internet as a tool to read user reviews, determine if a company’s values match their own, learn more about product specifications and if possible make the purchase online.

“If it isn’t on the internet then it doesn’t exist”. Similarly, if your company isn’t online then your company doesn’t exist in the eyes of your customer. If no one can find your company they can’t do business with you. When launching a new website or upgrading an existing one, be sure to ask your vendor about Search Engine Optimization (SEO) and allocate a portion of the budget to ensuring that your website ranks highly on search engines.

A non-traditional benefit of your internet presence is that a modest investment in online branding can create a perception of your company that is not tied to the physical reality of your business. It has been said that “90% of marketing is common sense” and a common maxim is that people like to do business with people who are like them. If your goal is to attract large companies as your clients, then your website design and branding should make you look like a big company. If you are a small business selling to individuals then your website design can be less corporate with a lot more personality and charm.

Leading through the message.

The purpose of your website defines how the navigation should be arranged and how it will “flow”. For business-to-business websites, a well-designed brochure site can be highly effective. Knowing what you want to achieve will help you to refine the messaging on your website and create a hierarchy that “leads” the reader through the message and content one step at a time to ensure that they hit every key point. A homepage designed in this way is a lot like a magazine ad: it requires a strong hook at the top, an engaging subhead halfway down that highlights key features and benefits, and supporting material below which links to information pages that allow the customer to explore the specific details that are important to them.

Strategy: Are you push or pull? or are you both?

How do you expect people to find your website? Are you investing in traditional print advertising or online banner ads and targeted email to drive traffic to your site, or are you relying solely on search engine traffic to send customers your way? Are you mixing your approach? It’s important to consider how your customers are going to find your website. Websites that rely on search engine traffic need targeted Search Engine Optimization (SEO)to rank high on queries and get noticed, whereas sites that are for familiar brands or are supported by traditional advertising need little or no SEO. Knowing how you plan to advertise the site will impact how the site is designed and the technology that is used, and will help you to allocate your budget accordingly. “If a website is online but no one ever sees it does it still exist?”

eCommerce / eBusiness

Are you planning to sell products on your website? Can you convert current business practices into an online workflow to realize savings in time and money? Do you require a secure login for your customers or a corporate intranet that integrates with your website? How do you want people to pay for your products / services online? Do you have legacy computer and software systems that you would like to interface with your website?

Every aspect of ecommerce requires a different set of technologies, and each technology has different time requirements to develop and implement. Often clients need their website in a hurry, and request functionality which is feasible but not within the time frame for launching the site.

Knowing what components are absolutely necessary for the launch date of your website, and which ones can rolled into a Phase II not only helps manage budgetary and timeline constraints, but creates unique marketing opportunities to drive traffic back to your site as the new features are rolled out.

Gathering Data

What do you need to know? Your specific business goals for your website will determine the kind of data to collect to measure the success of the website. Is the business model for your website based on advertising revenue? If this is the case you will want to collect more detailed statistics on the number of users and their specific activity on the site. Are you collecting and storing detailed user information and profiles? If so give some thought to what information you need, and what you might need in the future, and ensure that you are collecting the correct data. Also, you will want to ensure that you are compliant with federal privacy legislation, and that you are implementing a robust security model to protect your business and your clients.

Opportunistic Sites

While your corporate website is an important ongoing component of your brand, you might want to create a micro-site for a specific purpose such as a contest, product launch or event support that is separate from your main website. Occasionally, a product or event brand may need to have a stronger presence than the company brand, and it is appropriate to create a micro-site to reflect that.

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.

Unity

Unity refers to how well integrated all the elements of a design appear. When you are evaluating design concepts look for designs in which all the pieces appear to have a logical place. Good design strives for a sense of harmony between all of the components.

For example, if the homepage has a single main area that spans across the page and a secondary area with three columns below it (e.g. http://www.rtraction.com) here are some questions to ask: Does the styling of the columns match the main area above or do they seem to clash? Are the columns the same length? Does the content seem crammed into the page or is there enough negative space around it to make it easy to read?

One important thing to keep in mind when requesting changes to a design is how well the change will integrate with the design. A common client request is to “mix and match” elements from multiple concepts into one design. A good designer can normally accommodate such requests, but sometimes the style of elements may need to be changed to ensure that the resulting design maintains a sense of unity. Realistically, sometimes combining two concepts will simply not work and you should be prepared to make a definite choice between the options.

Consistency

A hallmark of good design is how consistent the elements of a layout are. Has the designer used the same font for equivalent type elements such as headlines and body copy? Are the colours of logos and links used consistently across the website or do they change? Do all the buttons on the site have similar styling? Do buttons look like buttons? Do common links such as “Home” or “Contact Us” appear in a consistent place on the website?

Consistency is synonymous to quality in web design. When elements are styled consistently it enhances the website by providing unconscious visual cues that actually make a website easier to use.

Hierarchy

Every website fulfills a purpose. A good design considers the site’s purpose and creates a clear hierarchy of information which leads the reader through the information or process. A well thought out hierarchy ensures that key information is conveyed clearly and that the experience of interacting with the website is a positive one.

The hierarchy should clearly separate headlines and key messaging from the bulk of the page content in such a way that the website can be understood “at a glance”. A good metaphor is to consider the front page of a newspaper. A newspaper identifies itself with a masthead, then provides a visually striking and concise headline that contains enough information to let the reader know the content of the article and pique interest, followed by an introductory paragraph that contains a short summary of the article and lastly the full story containing all the details. The hierarchy of information on a webpage operates in exactly the same way by identifying a key message (informational or branding) and then follows up with the details.

The hierarchy of information guides a designer by identifying how much visual impact each element on the webpage requires and determines the appropriate placement of the content for maximum effectiveness. The concept of hierarchy also operates on the larger structure of the website and by providing a logical framework which organizes what information appears in which sections and on what pages.

The technique of leading a viewer through the content in a design is called “eye flow”. When evaluating a design pay attention to the order in which you read the content. Does your eye seem to flow easily from one element to another or does it seem to jump around in confusion? Do you know where to look or do you struggle to find information? Do elements appear where you expect them too, or do you have to hunt for them? Simply put, does reading the page seem effortless or does it seem like work?

In summary

Good design can often seem like “magic” to a non-designer. When a layout is well designed the design feels seamless and will often subconciously “fade into the background”. Good design enhances the experience and should never “get in the way” of interacting with the information. Issues of personal taste aside, most people have an innate feeling of when design is working when it doesn’t but they often have trouble articulating why, making the process of choosing between concept layouts difficult.

By taking the time to learn a handful of basic design concepts discussing and choosing between the designs presented by your vendor can be made easier, resulting in a better final product and a more enjoyable experience.

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

There are a number of font creation and conversion products on the market. Twelve years ago, Macromedia had a program called Fontographer which did a great job while it was under active development. That was essentially what we were looking for: a basic program that could edit fonts and export them in a large variety of formats, preferably open-source.

FontForge is a pretty close match to what we wanted. The problem is that it is built to run under unix. They have a package that can run under Windows but requires the Cygwin emulation layer. This is large and overly-complex install with many options – not really suitable for one occasional use tool.

We decided to install it on a Ubuntu virtual machine that we run using VMWare Player. In addition to saving the overhead of running this on our Windows-based production machines, it is a much easier install on Ubuntu. It was as easy as choosing System->Synaptic Package Manager, searching for fontforge, and marking it for installation. All the prerequisites get installed automatically. The application itself can be found under Applications->Graphics->FontForge.

Converting The Font

Converting the font was pretty simple. It was just a matter of opening a known font type, selecting File->Generate Font, and saving the font in the desired format, in our case, TrueType. Each member of the font family has to be converted separately, so it’s not a good application for batch conversion. However, our needs were very specific and we just needed the one font.

The goal of SEO is to make your website appear as close to the top as possible in search results.

Although there are techniques that we utilize when we create your website, SEO is an important topic to keep in mind as you are creating the content for your website because how you write the content will affect how well your website performs in web searches. Here are three important considerations to keep in mind when creating the content of your site:

Keywords – What are people looking for?

Search engines use programs called “Crawlers” or “Spiders” that automatically work their way through every page on the Internet reading the content and ranking it based on the keywords that they find. As you write your content, it’s important to ensure that the keywords people will use to perform their searches actually appear in the content of your webpages.

Taking the time to think like your customer and compiling a list of relevant keywords they might use to look for your website is time well spent.

Links – It’s who you know.

Some search engines place a high importance on who is linking to your website, and who you link to. They rank websites by giving them a “Page Rank” score which is essentially a measure of how trustworthy and relevant they believe your website is. If sites with a high “Page Rank” link to you (eg. “.gov”, or “.edu’) then you inherit their trustworthiness and will appear higher in search engine results.

Essentially, if your website is seen to be authoritative on a subject because other trusted sites link to yours for reference, you will perform better on the search engines.

Keep it fresh – update your homepage.

Current websites are favoured in search engines over sites that have “gone stale”. By placing a News Section or a Blog on your homepage you can help your website appear fresh to search engines encouraging them to “crawl” it more often to ensure your most recent changes are indexed.

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

“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.

So, what is a VECTOR EPS file? First of all, EPS stands for “Encapsulated Postscript”. Postscript is the programming language that most high-end printers use to describe printed pages, and this data, when written to a digital file instead of a physical printer, is said to be “Encapsulated” in the file. The VECTOR refers to the fact that the graphic is composed of a set of instructions that detail how the image is created as a series of lines and points, (vectors) instead of being a bitmap image which is merely a grid of pixels that represent the finished graphic. The vector file may look the same on screen, but it isn’t just an image – it’s a set of instructions for redrawing the image. The benefit to the designer of having the VECTOR EPS is that they can create any artwork they want at any resolution and the image will still look crisp and clean, whereas with a bitmap image there are definite limits on how much the image can be scaled or manipulated without losing the original quality.

For an in-depth discussion of differences between vecotr and bitmap/raster images and why vector graphics are so excellent for logos click here.

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.

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.

Mind maps are an approach to organizing free-form information that places a single concept or word in the center of a diagram. Related ideas and information branch-off from the central point, and in turn these can branch off to other ideas or information. Unlike more traditional linear or hierarchical ways of presenting information, mind maps simulate the associative way that people think about and store ideas.

Freemind has many features, including the ability to easily collapse and expand the branches on the diagram, create hyperlinks to files and URLs, import images into your mind maps, and embed long-form notes that expand the content in each branch of your diagram.