Monthly Archives: December, 2009

User experience is one of those new trendy terms that is becoming a valuable area of expertise as a web designer.Unfortunately it’s one of those things (like usability) that is so vague and covers so many aspects that it’s hard to define or pin down to just a few key points. In this post I’m just going to look at the user flow options of linear or mesh structure.

It’s important to note at the outset that each project needs to be evaluated individually to determine which structure is most appropriate, but I feel that this is one of the options that’s usually overlooked.

What’s the difference?

A mesh structured website is what makes up 99% of the web. A website that links to multiple pages and they generally all link back to each other. There is no set order and your experience ends when you are done. Going to a theme park would be an example of a mesh experience.

Similar to a hose, a linear structure guides the user through a direct (usually pre-determined) flow of pages, then directing them out the other end of the experience. Watching a movie is an example of a linear experience.

Within many online store sites there is an element of both structures. The main site and shopping gallery would use the mesh system while the checkout process would revert back to a linear experience.

Mesh structure pros and cons.

Pros

Web users are very familiar with the mesh system. It allows them to quickly find areas they need or want quickly. Lots of information can be provided, providing users the freedom to see what they want and move on. Sites can be expanded with growth quite easily.

Cons

Users can miss important content. Relies heavily on information layout and page structure to make sure the user understands the key areas. Only a few key areas can be emphasized.

Practical linear user flow.

The most common (although basic) form of linear flow used to be a splash “click here to enter” page, but currently, a linear flow is generally used for any systematical information gathering – such as the Amazon Checkout process shown here.

You start by signing in to verify the user, confirm the address you want the order shipped to, select the shipping type/cost you want, decide how you will pay for the item, enter your billing details, select any of the available options (like gift wrapping), confirm the order, see order confirmation.

Every order follows the same process. Prior to the payment you can bail back out to the shopping area and product gallery, but you always have to go back through the same process (in sequence) to complete the order. Why do they do that? Because each step is important and can’t be missed. Amazon need the information that is collected at each step.

Why would I use a linear flow for a website?

As a designer of interactive promotions, we have found that linear flow is the best way for both the client and the user to gain the benefit they need. The client gets some kind of brand or product placement in front of the user and the user ultimately has a chance to win something.

Here’s an example of an interactive promotion user flow.

But I hear you asking when it would ever be useful in a regular website? While I doubt many content-heavy websites would ever ‘work’ in a linear flow, you can consider adopting a linear flow for sections of your site.

This might be for sites where people are only coming for 1 purpose, or for sites that have some payoff to the user for staying within the flow.

Advantages of a linear experience

You can guide a user through the experience with very few distractions, buttons or options. You can get users to see something they wouldn’t otherwise have seen. It’s something different. It can provide a very fast user experience.

Warnings

If you’re going to attempt to lock people into a linear experience make sure there is a payoff for the user. If they get bored you may experience what is called ‘dropoff’, especially when you reach a barrier page like a form or a page where they need to read a lot of text. Always let the user see the pot of gold at the end of the tunnel, and it can be a good idea to show progress.

—

Have you ever used a linear process within a mess structured site? Let us know how it went for you.

Legally protecting yourself (as a freelancer or agency), is one of those things that sound good, but few people actually do anything about.

We place in the ‘it must be expensive’ or the ‘I’ve been fine without it so far’ basket, and it stays there and looks at you with geico-cash eyes – begging for your attention. It’s just one of those things we know we need, but it hasn’t made it high enough up the priority list to do something about it.

UNTIL… that day when a client from that ‘big job’ turns around and wants to take you to court for some kind of misunderstanding or wants ANOTHER set of revisions after you’ve already done 25. Once you’re in a hole with no back door there’s really no place to go and no way out – UNLESS you’ve covered yourself with some form of legal contract.

Disclaimer

Please note that I am not a lawyer, and I have no formal legal education o the comments and observations in this post are merely ideas and collections of knowledge from various people in my experience.

Contracts in a nutshell

Basically a contract is any agreement between 2 or more parties. The majority of the time contracts are printed documents with a few signatures on the bottom, but legally. Interestingly, even a verbal agreement is legally binding – however infinitely harder to prove if anything makes it to a courtroom.

Why use a contract?

A contract (although somewhat daunting) is a very professional way to start a professional relationship of work/service. A contract should clearly contain the expectations of the initiating party, and their expectations of the client. It will often include clauses covering instances where either party may want to terminate the contract and the consequences of that.

Most of the time, contracts we sign are locking us into a payment expectation and the period of time those payments will be required. Statement of work (SOW) contracts are similar, but detail the terms for a specific project.

What you CAN do in a contract?

You can actually include almost anything within the law. This may include (but not limited to);

• Payment outlines and dates
• Project expectations and deliverable dates
• Failure to meet payment or milestone results
• Expected behavior or appearances
• Expected confidentiality, disclosure or exposure
• Limitations of liability
• Outline of potential additional charges

What you CAN’T do in a contract?

No matter how committed you are to an agreement, any contract which includes breaking any law may be deemed null and void in whole or part regardless of the context or intent.

You also can’t deliberately confuse or mislead people. Any contract that is deemed to possibly have an alternate meaning may void something you have included. With the motto of Google – Don’t be evil.

Don’t include unrealistic expectations. You should always be writing an agreement that all parties should be able to comply with. There’s no benefit including a requirement that will cause unnecessary stress or worry. Like adding a line that would disconnect a service if a payment is 1 minute late.

Play nice

I have seen a few examples of work agreement contracts which heavily favor the agency. You don’t want a potential client to leave you because they’re uneasy about agreeing to your terms. On the flip side, you get clients who don’t read all of the fine print (how many people read all 40 pages of a mobile phone contract before they sign?), who may not comply with any unexpected inclusions – but will put up a fight if you try to enforce them.

My contract suggestions

1. Keep it short. For a freelance project, I would say no more than 1 page. People don’t want to sit and read 5 pages of garbage, they want to see what you’re locking them in to. You can do things like separating off documents like privacy policy to your website for people to read later.

2. Keep it easy to read. If you keep it simple, there’s no arguments later.

3. Number each point. That way you can reference clauses quickly when talking on the phone or over email.

4. Make sure you give a client adequate time to look over the document before signing. Maybe even allow them to get a third party to review it.

5. Play Nice (see above).

—

What inclusions do you have in your freelance contracts?

See also Brand A Brander 1

What Is Brand A Brander?

Brand A Brander is a way for logo designers to get an ‘outsiders look’ at their company. Given a short brief, logo designers attempt to re-brand each other. All participants are hand-selected in an attempt to retain a level of quality, but there are obviously going to be mis-matches due to the sheer awesomeness of some of the designers participating. Let us know how you would re-brand some of these great brand designers.

What are the questions for the brief?

1. What is the name of your business?
2. Any color preferences?
3. In a sentence, describe what you want to convey in your logo.
4. Briefly describe your target market.
5. What is your favorite logo (any company any designer).
6. Describe your business in 20 words or less.

The Questions Each Participant Answered

Thanks to those who participated for being part of this experiment. The results speak for themselves.

Let The Games Begin

David Holm (Squarelogo) – http://www.squarelogo.com/

Original: David Holm (Squarelogo)

1. Squarelogo or Squarelogo Design
2. Open
3. Professional brand design services.
4. Small to mid-sized businesses.
5.  It’s impossible to pick one favorite, but I guess I’d say the OLD Northwest Airlines logo. Extremely simple, yet meaningful design.
6. Squarelogo design puts high end graphic design and branding within the reach of small and mid-sized businesses.

RE-BRANDED: by JT Knight (Knights Creative)

Behind the re-brand: (by J.T. Knight – Knights Creative)

Square Logo’s portfolio has a great style. I wanted my re-brand to reflect the depth of what he can do for his clients. The name, obviously, lends itself well to a square of some sort. I wanted to add a little bit to the basic shape to come up with a mark that would do him justice. I started with a few box shapes and twisted and stretched them into something I liked, while keeping a square in center stage. I used a similar type to the original, but opted for sharp edges over rounded corners. I experimented with a few color combinations, but black and white ended up being the best option for this design. I hope David enjoys the design!

Toni Zova

Original: Toni Zova

1. Toni Zova
2. #272727
3. Modern, fresh, and a uniquely strong outlook on design in general.
4. Designers and none designers alike, people interested in Art/Design, people that want to get the latest on what’s going on in the design industry.
5. My own (maybe adidas).
6. modern, cutting edge, unique, friendly, international, bold.

RE-BRANDED: by Ricky Salsberry (The Donut Project)

Behind the re-brand: (by Ricky Salsberry – The Donut Project)

Based on Toni’s brief, I tried to create a mark that is modern, clean and bold. The icon is clean and monochromatic (#272727) to reflect the current look & feel of Toni’s site. Toni’s rebellious, no nonsense tone (which <censored>ing rocks) on his site is reflected in the mark with a reference to the common ‘no symbol,’ created typographically with a Z striking through a T. The mark translates well into a blog header (horizontally or vertically), and the icon by itself works well as an online avatar or favicon.

Chris Kaufman – http://www.christopherkaufman.com

Original: Chris Kaufman

1. The name should include either “Hi, I’m Chris”, or “Christopher Kaufman”
2. I’ve been attracted to vintage color combinations lately – Late 1950s through early 1970s. Here is a good article for inspiration: http://www.smashingmagazine.com/2008/04/21/celebration-of-vintage-and-retro-design/
3. Smart, elegant style with a leading-edge, dauntless mood.
4. Small to medium sized businesses, ranging from medical, to financial services to entertainment.
5. FedEx – Perhaps a “happy accident”, but clever nonetheless.
6. Brand and interaction design with user experience in mind.

RE-BRANDED: by John Mascarenhas (LogoGuppy)

Behind the re-brand: (by John Mascarenhas – Logo Guppy)

Design background yet to come

John Mascarenhas (Logo Guppy) – http://brandstack.com/users/profile/logoguppy

Original: John Mascarenhas (Logo Guppy)

1. LogoGuppy
2. well… am partial to blue n black…
3. fun, intelligent and agressive.
4. age – 28 – 45 and Yuppie, 75:25 – male:female ratio
5. LogoMotive (By Mike E) & ToadPrint (by Mike E) & Ant (by William)
6. Illustrations & Brand Identity

RE-BRANDED: By Toni Zova

Behind the re-brand (by Toni Zova)

At first I drifted away from the initial brief John had provided, but then realized that would be even more difficult given the nature of this logo. A Fish. There were so many ways one could represent that in a mark so I got off my high horse and took into consideration John’s requests and went with things he wanted to convey in his mark, baring in mind other logos he liked and why he might have been attracted to them. It seemed like the sensible thing to do, rather than force him to use a mark that bore no resemblance to his brand only because I thought it looked hot. This was the outcome, a fun, somewhat serious looking mark that could also translate his illustrative nature.

John has noted to me since that he designed this for himself.

Nadir Balcikli (Logorado) – http://www.logorado.com/

Original: Nadir Balcikli (Logorado)

1. Logorado
2. No
3. It should convey trustworthiness, quality service, reasonable rates. If the new logo includes western feeling that would be great.
4. New entrepreneurs, small businesses.
5. World Wildlife Fund Logo
6. Logorado provides minimalist, elegant and professional logo designs for small businesses.

RE-BRANDED: by Raja Sandhu (Raja Sandhu Media Corp.)

Behind the re-brand (by Raja Sandhu – Raja Sandhu Media Corp.)

I was inspired by the short brief and the name of which both had suggestions of a ‘western’ theme. The first two things that came to my mind were a lasso and a cowboy hat. The challenge was to create an image that captured the feel of those two elements (lasso and brim of a cowboy hat) with out being literal or more bluntly put, cheesy, all the while maintaining an ‘elegant and minimalistic’ look. It is, after all a logo for an iconic logo designer.

Ricky Salsberry (The Donut Project) – http://www.thedonutproject.com/

Original: Ricky Salsberry (The Donut Project)

RE-BRANDED: by David Holm (Squarelogo Design)

Behind the re-brand (by David Holm – Squarelogo)

The Donut Project is a very cool collaborative design and inspiration blog. The mark I created for TDP represents the convergence of all the various ideas, concepts, and inspirations that are posted by the group of designers that contribute to the TDP site. More obviously, the shape of the mark is donut-like. The type has been created using a modified form of the Titillium font family.

Von (Vonster) Glitschka (Glitschka Studios) – http://www.glitschka.com

Original: Von (Vonster) Glitschka (Glitschka Studios)

1. Glitschka Studios
2. No.
3. I deliver concept oriented illustrative design solutions.
4. Most often I’m a hired creative gun for other agencies, design firms, in-house art departments, as well as managing my own clients.
5. No specific favorites but I prefer bold simple solutions that are void of FX.
6. We’re able to deliver unique concept oriented design in a diverse range of styles to solve a clients needs creatively and appropriately.

RE-BRANDED: by Nadir Balcikli (Logorado)

Behind the re-brand: (by Nadir Balcikli – Logorado)

I just wanted to create simple but impressive logo for Glitschka Studios. The logo includes a human face with a “G” form. I didn’t have a lot of time to work on it but I hope Von likes it.

Sean Farrell (brandclay) – http://www.brandclay.com

Original: Sean Farrell (Brandclay)

1. brandclay™
2. nothing pastel
3. a unique representation of my christian roots and the word clay (no crosses)
4. start up companies to medium sized companies
5. If I have to choose just one, it would be Dana McCauley’s logo
6. A freelance design company set out to break the mold.

RE-BRANDED: By Jeff Pollard (POLLARDdesign)

Behind the re-brand (by Jeff Pollard – POLLARDdesign)

The goal was to create a brand image depicting Brandclay as a high-end, best-of-breed design studio in order to attract larger, global clients.

The concept behind the service mark/monogram was to convey the physical properties of clay; Flexible, Adaptable, Customizable, but do so in a way that indicated new thinking and to avoid traditional clay-type imagery so as to eliminate the possibility or confusion that Brandclay had anything to do with pottery or arts-and-crafts.

I also wanted to symbolically represent a broader reach by way of viral-type imagery which, again, reflects the physical properties of clay, but also represents the continuous evolution of Brandclay’s design vision.

The tagline helps tie the new brand together as well as extend it by functioning as a descriptor of Brandclay’s goals/services/area of expertise.

PS: Bonus points to viewers who see the leaping, celebratory figure within the service mark – ;-)

Jeff Pollard (POLLARDdesign) – http://www.pollarddesign.com

Original: Jeff Pollard (POLLARDdesign)

1. POLLARDdesign
2. No.
3. Serious yet approachable.
4. Everyone.
5. Mine is a Less Is More approach to design. I tend to dislike any overly cluttered, overly designed, overly complicated logo. I like clean and efficient visual imagery that has a relevant story to tell and isn’t merely decoration.
6. Maker of magical marks and cool, crispy icons.

RE-BRANDED: By Von Glitschka (Glitschka Studios)

Behind the re-brand (by Von (Vonster) Glitschka – Glitschka Studios)

A logo project for me is more than a singular mark, it’s a development of a brand system, so when ever I re-design a logo I first audit the existing mark and the context it lives in. Sometimes this reveals the need to completely throw out the current design and create a new one from scratch. But for this project I felt retaining equity from the previous mark was warranted so as to avoid a complete visual detachment with the clients audience.

I retained the eye element and incorporated it into a customized “pd” symbol. I like to provide both a horizontal and vertical format for all my clients logos, this helps them retain brand continuity moving forward across a broad range of media venues.

Grace Smith (Postscript5) – http://www.postscript5.co.uk

Original: Grace Smith (Postscript5)

1. Postscript5
2. I’m open to suggestions although I do love my green colour: #50a48d
3. Structure is important, i specifically used FF Din because of it’s beautiful structured qualities. I’m a female in a male dominated
industry, so creating something soft (yet not over the top feminine) is also important.
4. Entrepreneurs and small businesses, although I also work with other design companies & developers.
5. Anything by the brilliant Dache. My favorite would be his design for the MediaFactory.
6. Pure, functional and effective design, development and branding with incredible attention to detail.

RE-BRANDED: by Chris Kaufman

Behind the re-brand (by Chris Kaufman)

I created a logo for Grace at Postscript 5 that has an accent of her current green color, while simplifying the mark by incorporating the ‘5′ into the type. I set the type in Gotham Rounded for its stability, yet softened, rounded edges that gives the logo the effeminate (but not overbearing) hint that Grace is looking for to help her stand out in a male-dominated industry.

J.T. Knight (Knights Creative) – http://www.knightscreative.com

Original: J.T. Knight (Knights Creative)

1. Knight’s Creative
2. I like black and white, but wouldn’t be opposed to red or dark blue.
3. I like to project confidence and competence.
4. Small to medium sized business owners and entrepreneurs in various industries.
5. I love the WWF logo
6. I design logos and help create successful brands. My job is to help businesses create a consistent brand presence.

RE-BRANDED: By Sean Farrell (brandclay)

Behind the re-brand (by Sean Farrell – brandclay)

I had a lot of good ideas for this project but simplicity is the main thing I wanted to convey.  Taking an every day symbol that is often represented by a knight; his sword, and turning it into something that visualizes a creatives identity was a really fun task.  I drew about 10-15 swords (don’t think I’ll ever be happy with the sword) and combined a pencil tip or a pen tip to the end of the sword.  I ended up with this one because it was the one I was most satisfied with.  In his original logo he uses a serif font, so sticking with that I used Aviano Serif in all caps and modified the A. Hope he likes it

Nathan Sarlow (Cobaltcow) – http://www.cobaltcow.com

Original: Nathan Sarlow (Cobaltcow)

1. CobaltCow or Cobalt Cow (not necessarily case sensitive)
2. I guess a blue base
3. A memorable, clean mark. I want people to remember at least the “cow” aspect.
4. Mainly start-ups and rebrands in the mid to upper class.
5. Just a few that come to mind: Artfire Films, Michael Jackson, HSV (the round part)
6. I like to help a company set their brand where they want their business to be. Clean, and clutter-free.

RE-BRANDED: By Grace Smith (Postscript5)

Behind the re-brand (by Grace Smith – Postscript5)

It was quite daunting redesigning Nathan’s own logo! Especially as I already think it’s extremely well designed. I wanted to keep the new logo consistent with the original which is very strong, especially the color scheme.

Nathan wanted the brand to be clean and memorable with people ideally remembering the ‘cow’ aspect. I took this into consideration but I also felt the actual brand name could be ‘punchier’ and more to the fore. I felt the original logo was perhaps too elongated and I therefore designed a logo which is more compact and concise.

I chose a strong but fun typeface (Nilland) to perfectly compliment the fun business name. With the actual cow I created a simple but easily recognisable outline, which stands proudly looking at the brand name.

Hopefully I’ve been able to both do the original justice and create a worthy alternative.

Raja Sandhu (Raja Sandhu Media Corp.) – http://www.rajasandhu.com/

Original: Raja Sandhu (Raja Sandhu Media Corp.)

1. Raja Sandhu Media Corp.
2. Silver and Black
3. World Wide Arts and Entertainment
4. 20-50 somthings’ that are into arts and entertainment – think Warner Brothers
5. hmm non really – simple yet striking, good use of negative space, cleverly creative.
6. Umbrella corporation of several subsidiaries that scale universally from design, branding, music, music production, talent management, fashion , plus much more in the same parallels of creativity.

RE-BRANDED: by Nathan Sarlow (CobaltCow)

Behind the re-brand (by Nathan Sarlow – CobaltCow)

Unfortunately, Raja’s logo is one of my favorite marks, so rather than trying to improve on it, I tried to take a different approach. The only thing that concerned me about the current logo was that the mark was difficult to make out. After consideration I decided that the memorable mark was more important to the brand, since the text below it explained the mark adequately. In this mark, I played with the initials RSM, and integrated some feeling of communication – expressed through the curves which are more commonly related to RSS or Wi-Fi.