The 4 Goals For Every Website Project

1. Produce a quality finished product that meets the project goals
2. Get the project done in an cost-effective way (spend where necessary)
3. Complete the project in a reasonable timeline
4. Maintain a good quality of life for all parties involved

In short, the 4 goals are: do it right, spend wisely, get it done quickly, and avoid reverting back to the fetal position every time you think of how the project is progressing.

Sound simple enough? Guess what, it’s not as easy to do to do in practice.

The 2 Questions Our Design Partners Instinctively Ask

Now that we know each of the 4 goals we are trying to achieve, we’ll see that the questions we instinctively ask are inadequate to meeting our goals. Time and again we see our design partners asking only 2 questions when it comes to developing a website solution.

1. How much does it cost?
2. How long will it take?

These are great questions, but the answers aren’t going to tell us if we are on the right track to achieving all of our goals. In fact, the most common complaint we hear from our design partners is about their previous website developers and the pain and suffering they had to endure to get the project completed. Why then do we focus so much on the cost and the timeline and completely over look the quality of life aspect?

We’re going to submit that it’s an issue of not anticipating the difficulties that may lie ahead and not knowing what questions to ask to address those.

The List of Questions You SHOULD Ask Your Website Development Team

So here it is! This list of questions will help you flesh out your next website project or feature.

1. How much will the initial development cost be?
2. Are there any licensing costs? Are they one-time fees or recurring fees?
3. How long will it take to get the project done?
4. Are there any maintenance needs that you can foresee?
5. Have you handled this type of solution in the past? Is it likely that this solution could “break down” on us? Have you ever had this solution fail on you?
6. Is there another solution that will still yield a quality finished product, but will save us money, time, or peace of mind?

Further tips:

• Your developer may not even realize they need to be thinking about all of these questions up front. Be patient with them as they explore the answers. Every developer has dealt with “nightmare” situations and it often boils down to one of the issues above not being addressed properly. Common developer headaches include: unforeseen maintenance, unreliable solutions breaking while on vacation, etc.
• A good site map helps everyone get on the same page.
• A happy developer generally correlates to a happy client. An unhappy developer generally correlates with an unhappy client. If your developer pushes back on an idea in the planning stages, find out why.

I recently bought a domain name for a client from GoDaddy. To sum the experience up in 2 words: Turd Sandwich. The experience was horrible!  All I wanted to buy was a single domain name for a single year, but I had to wade through page after page of offers and bright red text and buttons demanding I add other products or services to my order because of the amazing discounts they were offering.  On each new page I came to, I had to figure out what it was they were trying to sell me on and then search diligently for the “no thanks, please continue” button.  Even when I was finally able to get to the check out page, GoDaddy had automatically added the renewal of two domain names I already own to my cart.  No thanks!  By the time I clicked the final “submit” button, I was ready to pull my hair out!

The lesson learned?  User experience matters.

Here are 5 important lessons on how to improve your site’s usability and make your website a pleasant experience for your user. 

1. Start with a plan.  

Before you type a single line of code or put a pixel on the screen, plan out what you want that user experience to be like.  Get out a piece of paper or use a Word document to create wireframes of the experience.  Will your checkout process have 2 screens or 3?  Should your user have to register before they add to their cart or only when they go to check out? 

Drawing out the basic framework of your site can bring up user experience questions early on in the process and can help you make the best decisions for your site.  It also helps you stick with the vision and goals of your company. 

2. Just because you can, doesn’t mean you should.

Maybe the shopping cart solution you’re using allows you to display up pop-ups for related products and accessories, but that doesn’t mean you should do it.  Think about and research the type of marketing or experience you want to set up for your website and ask the important questions like: Does this feature add value to the experience?  Does this distract the user from the desired action I want from them?  Is this feature in-line with the rest of our business model and core values?

Offers are great on websites when they help your customers.  Everyone loves to save money and know they are getting a good deal.  But on GoDaddy’s site, I counted 18 different areas where they to cross-sell, over-sell, or up-sell me on some sort of additional service or feature that I absolutely had no intention of buying. 

3. Make it simple.

Make your site simple and intuitive.  A shopping cart experience shouldn’t be any longer than 3 of 4 screens once the user has the products in his cart.  Don’t drag out the experience by giving him too many hoops to jump through or he might give up entirely.

It’s a good idea to remind your customer of the related products you offer, but make sure to do these in a way that supplements the core task that is taking place.  Make these product links available to the user, but don’t slow down the check out process.  If the user is enticed, he will click.  Otherwise, let your customer buy the product and be on his way.

4. Make the next step the obvious one.

When your customer is going to make a purchase on your website, make the next step in the process visually the most obvious one.  On your product page, make your “Add to Cart” button the one that stands out the most.  On your shopping cart page, make the “Check Out” button red or some bright color to draw attention to it.   Don’t make the user hunt around for the right button to click, make it easy for them to buy your product. 

On GoDaddy’s website, I was inundated with orange buttons: search for another domain name, add another item to my cart, continue to registration, 6 buttons in total!  All I wanted to do was check out, but it took me a minute or so to figure out which orange button I was supposed to click that would get me out of their ordering screen hell.  

5. Feedback, feedback, feedback.

If you are designing a new site around a specific group of users, bring them into the conversation.  If you’re planning a new website, what features and functionality would provide value for them?  Show them your wireframes for the site and ask if they have any feedback on the flow of the site.  Does it make sense to consolidate some of the steps into a single step?  What is the best way to lay out the screen so that it’s obvious to the user where they need to go next? 

Even once your site is designed, solicit feedback from users.  How is the site working?  Are there areas that aren’t intuitive that might need to be re-worked?  Are there tools or resources that might make the site more valuable?  What frustrations are they running into when they go to make a purchase or interact with your website?

What has been your user experience on the web?  Which sites have frustrated you and which sites have gotten it right?  Share your thoughts below.

Pentagram.com has posed an interesting question: What Type Are You?  This interactive video walks you through 4 questions to determine which typeface really reflects your character. 

Click here to find out!  The password is “character”

A blog is a type of specialized website that displays a series of articles that contain text or images.  Blogs are generally specialized by topic, for example fashion, politics or graphic design.  Blogs can be maintained by companies, organizations or individuals and can contain news or commentary on a particular subject.  Users are often able to comment on the blog topics generating an on-going conversation.  Users can also set up “blog readers” that allow them to automatically track blog articles from multiple blogs in a single location.

 
Why do I need a blog?

The following are some good reasons why you, your company, or your clients might need a blog: 

Build credibility
One thing that a blog does is help build credibility.  In a recent study* it was shown that 36% of online users think more positively about companies that have blogs.  Your credibility grows if the entries you are posting are relevant and accurate.  With a blog, you have the opportunity to become an authority in your field. 

Engage and Understand Your Customer Better
A blog can help you get to know your customers better by interacting with them directly.  You can post an article on a specific topic about your product and gain instant feedback from your audience.  Also, you can reply directly to comments to create a personal relationship with them.  You can build an interactive community around a specific topic or brand. 

Keep Your Audience Informed
Most companies use their blogs to keep their customers informed about topics relating to their business or their products.  You can use a blog to generate buzz about your new product, provide resources and FAQ’s or to educate people on certain topics or concerns. 

 Build Up Your Company for Prospective Customers
When prospective customers visit your blog, they will be able to learn more about your company.  If your blog posts are relevant and are saying the right things, these prospects will have an easier time trusting you with their business.  If your articles are useful and of interest, there is a better chance that your readers will forward the articles on to their friends and business contacts.

Increase your Visibility in Search Engine Results
A large component of effective search engine optimization (SEO) is having your site updated regularly with new content.  By having a blog that is producing new content on a regular basis, your search engine rankings will increase and you will be more visible in search results. 

How do I get a blog setup?

There are several free hosted blog services available such as Blogger that are fairly easy to set up and get going. Ideally you want a blog that can reside on your own site (for SEO purposes) and you will want to customize the appearance to your liking.  So if you’re looking to customize your blog, one great solution is to the open source platform blogging platform, WordPress.   

WordPress allows you to take their blog code and customize the look and feel of it using HTML and CSS.  You just need a hosting account that supports PHP and MySQL.  This software allows you take a custom design and incorporate it into a fully functional blog. 

Getting started?
Interested in getting a blog set up for your company or one of your clients?  Flip Studios can help you get started!  We make it easy.  Give us a call at 949-748-6940. 

Already blogging?
We would love to hear about your blog adventures.  What have you learned that could be useful to others?  What are some of the benefits you have found with blogging?  Feel free to comment below!

 * “Power to the People – Wave3” from Universal McCann

Organize Your Information Well

When designing a website, think about the structure of the site first.  Create an outline of all of the pages and try to organize the information in the most logical way.  What will make the most sense to your website visitors? 

Get the Most out of Your Primary and Secondary Navigation

The primary navigation will help visitors drill down to the information they are looking for.  From within those main sections, display a list of secondary navigation items to help the user find the page that he is looking for within that section. 

 You can design these links however you want, but the important thing is to be consistent.  Keep your primary navigation in the same place on the page no matter what page the visitor is on.  This continuity on each page will allow the user to easily navigate through the rest of your site.  Here are some other helpful tips:

• Order your links in terms of the importance of each page.  If your website is selling books, make the links to the different book departments very prominent. 
•  Remind the user where they are.  When a user clicks on the About Us section, change the color of that navigation item to something different to show the user where they are.   
• Don’t overload your primary navigation with links to every page in your site.  Simple is better.  If you have too many primary navigation links, think about consolidating some of the pages or moving some information to sub-sections on your site.
• Keep the names of your site navigation meaningful.  Don’t use terms that are internal to your organization.  Someone who has never been to your site before should know immediately where the link will take them. 

Here are examples of effective primary and secondary navigation:

Create Your Footer Navigation Wisely

There are some links that need to be on every page, but don’t neccessarily need to be featured prominently on the site.  These links can be part of your footer navigation.  Here are some examples of links that can be linked from your footer:

• Privacy Policy
• Terms and Conditions
• Site Map
• Shipping Information
• Returns Policy

Use Progression Navigation

If your website contains a shopping cart or a multi-page registration form, it’s a good idea to display progression navigation.  You can do this at the top of the page by displaying where the user is at in the process, such as “Step 2 of 4 – Billing Information”.  This sets the expectation with the visitor how many screens he must go through in order to finish the process.  It also allows the visitor to click to one of the previous steps if they need to make changes. 

Create a Breadcrumb Trail

On sites that are large, it can be useful to implement breadcrumb navigation.  This provides the visitor some visual clues that tell them where they are and how they can navigate back to any previous section.  Breadcrumbs are extremely helpful if the website visitor is linked from an external site.  It gives them a sense of where this page fits in with the rest of the site structure.  Generally these breadcrumbs are displayed toward the top of the page, below the main navigation. 

Other Helpful Tips

• Try to minimize the number of clicks it takes to get to the relevant information as possible.
• Don’t open pages in new windows, unless they go to an external site.  This confuses users and disables their “Back” button.
• Make your “Contact Us” link prominent and obvious.
• Don’t change the position of design elements from page to page.  As a general rule, keep the header and footer of the site consistent on every page. 
• Use consistent names in your page headers.  If the user clicks on “About Us”, display “About Us” as the header on that page.
• Always have your logo link to your site’s home page.
• Use a site map of text links to provide structure of your site to provide direct access to your site’s content.  Make sure that your site map reinforces your site’s hierarchy.
• Unless your site is small, don’t put every link on every page.  This can be confusing and can overwhelm your visitor.  Create a logical organization of pages using sub-navigation and provide a link to your site map. 
• Above everything else, make your site’s navigation consistent!  Don’t make your visitors have to re-learn the navigation depending on what page they are on. 

 What tips do you have for creating effective site navigation?  What sites have you found that use effective navigation?  Share in the comments below!

Tonight the Orange County Chapter of AIGA and the Art Institute of Orange County will be offering a free special screening of the documentary film Art & Copy.  This documentary portrays the profound effects that advertising and creativity have on modern culture. The film intimately reveals the relatively unknown personalities and stories of some of the most influential advertising minds of our time.

Location: Art Institute of California, Orange County Campus (3601 W. Sunflower, Costa Mesa, California 92704 )
Date:  Friday, November 6th
Time: 5:00 – 8:00pm
Cost: Free, event is open to the public.  Click here to register. 

Event Schedule:
5:00pm – Film screens (in outside tent on campus of A.I.)
6:30pm – 30 minute break for refreshments (pizza & beverages provided)
7:00pm – Panel Discussion*
7:30pm – After-Party event at 8 Steers restaurant (3751 S. Harbor Blvd. at Sunflower)

*Panel speakers:
Jimmy Greenway, Film Maker of ‘Art & Copy’
Dan Wayland, Broadcom
Joseph Banuelos, Creative Director Extraordinaire
Jon Gothold, Creative Partner/Prinicpal of DGWB
Ron Leland, RealLife Branding
Kathleen Kaiser, PencilBox Studios

ART & COPY is a powerful new film about advertising and inspiration. Directed by Doug Pray, it reveals the work and wisdom of some of the most influential advertising creatives of our time — people who’ve profoundly impacted our culture, yet are virtually unknown outside their industry.

Exploding forth from advertising’s “creative revolution” of the 1960s, these artists and writers all brought a surprisingly rebellious spirit to their work in a business more often associated with mediocrity or manipulation: George Lois, Mary Wells, Dan Wieden, Lee Clow, Hal Riney and others featured in ART & COPY were responsible for “Just Do It,” “I Love NY,” “Where’s the Beef?,” “Got Milk,” “Think Different,” and brilliant campaigns for everything from cars to presidents.

They managed to grab the attention of millions and truly move them. Visually interwoven with their stories, TV satellites are launched, billboards are erected, and the social and cultural impact of their ads are brought to light in this dynamic exploration of art, commerce, and human emotion.

Read more at http://artandcopyfilm.org/synopsis/

The answer varies depending on who is going to be viewing the website and, more importantly, what size screen they are using.  As a general rule, your website should be as small as it has to be to fit comfortably in your viewer’s smallest screen resolution without creating a horizontal scroll bar.

As of today, the average website visitor (typically more than 90-95% of your visitors) is using a screen resolution that is at least 1024 x 768 (according to http://www.w3counter.com/globalstats.php).  This is the standard resolution for a 17^” monitor.  The larger the screen, the larger the resolution that can be displayed.

To find out what size screen resolutions your visitors are using, you can install Google Analytics on your website.  This code will also tell you what browsers they are using and other helpful information.  The following is a screenshot from the Google Analytics for FlipStudios.com.  You can see the break down of the various screen resolutions for our website visitors.

Rule of Thumb
A good rule of thumb is that you create your website design with a width of 960px. This will allow for some space on either side of your site design, which will give your website visitor a sense of balance to the design. This also allows you some additional benefits that we’ll cover in a future article.

The height of your site really depends on how much content you have and how much you want your website visitors to scroll up and down to view your website content.  Generally 1500px is a good standard height for your website content, but keep in mind that the less scrolling that has to take place, the more likely your website visitors are to see the content you are providing.

Display Important Info “Above the Fold”
As with print design, it’s a good idea to display the most important text or images “above the fold” or “above the scroll line”.  A website user at a resolution of 1024 x 768 will see about 550px of your design without having to scroll down to see more, so try to design the important elements of your design within the top 550px.

Design Templates
Click below to download a Photoshop or Illustrator design template to help structure your website design files:

Download Adobe Photoshop template
Download Adobe Illustrator template