BlogmyQuery – BMQ

Selling things online is something I think a lot of us have considered doing. And even if you haven’t considered selling things yourself, it’s likely that you’ve had clients who were interested in doing so. But getting an ecommerce site setup, even for designers and developers, can be a pain. It’s often time-consuming, frustrating, and requires a lot of administrative-type work that’s not very much fun. Instead, a service like IzzoNet can really make it simple to get your online store up and running in just a few easy steps.

IzzoNet: Few simple steps and you’re good to go

First, start with a theme for your site. IzzoNet has tons of themes you can use, to suit just about any type of storefront. You can make modifications and customizations to the CSS of any theme you choose, and you can even download the CSS file as a backup (which you’ll want to do before making revisions).

Once your theme is installed and customized to your liking, you’ll want to add content. You can start with things like an about page, add additional pages, or edit the system-generated content pages (which include things like order thank you pages and help pages).

Next up is adding products to your online store. It comes pre-populated with products so you can see exactly how the product listings work. The product list includes an image, SKU, product name, category, price, sale price, cost, revenue, quantity, the date of the last update, and options to edit, copy, or delete each item.

Adding a product is simple. You can include up to twelve images per product, as well as plenty of information about the product. IzzoNet even supports downloadable products (just check the box at the top and you’ll be able to upload a file). You can include as much or as little information as you like about each product; the only required fields are the product name, price, and category.

Products can include a lot of extra info, too, like shipping info, additional price info, product promotions, search engine optimization, Ebay information, Facebook info, and more.

You can also access the product category listings from the products section of the backend, where you can activate or deactivate categories, as well as add new product categories.

IzzoNet: Flexibility in payment methods, local taxes, your own domain. What else?

A number of payment processors are supported by IzzoNet, including:

• Authorize.net
• BeanStream
• CreditGuard
• DirecPay
• EBS
• eWay
• Google Checkout
• Moneybookers
• NetBilling
• Offline Payment
• PayLeap
• PayPal
• Secure Trading

Once your content, products, and payment types are set up, you can move on to set tax information. You can even set it so that tax is included in the product price, or disable taxes and VAT all together.

After everything is set up, you can set your store’s domain. You can keep the IzzoNet subdomain from the original setup, or you can use a custom domain. Options there include registering a new domain name through IzzoNet, transferring your domain name to IzzoNet, or using a domain that remains registered elsewhere.

That’s all there is to getting up and running with IzzoNet. It doesn’t get much easier.

But that’s not all IzzoNet can do for you. There are various sales reports you can generate from your site’s sales figures. That includes financial reports, products, suppliers, email addresses, and more.

One thing IzzoNet includes that isn’t included in a lot of ecommerce solutions is dropshipper management. IzzoNet includes supplier integration where your suppliers can actually log into your IzzoNet account and get updates about your products. You can create a supplier database, and even run an analysis on your suppliers to determine who’s best.

IzzoNet will also automatically send your customers tracking numbers for their orders, whether they’re sent from your or directly from a supplier. This greatly simplifies your order workflow.

In addition to managing your dropshippers, IzzoNet makes it easy to establish yourself as a dropshipper, too! You can manage everything right from the same control panel, provide your clients with their own unique logins, and even present special pricing to individual clients.

IzzoNet comes with full support for social shopping

IzzoNet also includes a number of social media tools that are sometimes lacking in other ecommerce solutions. While sharing your products to Facebook is pretty simple, IzzoNet goes a step further and makes it easy to set up a Facebook store. There’s also an online store mobile app, a store management mobile app, and even a “webcam social shopper”, which lets your customers see how a desired item will look on them.

Pricing for IzzoNet starts at less than $20 per month for their Gold plan, and with many more features available for just twice that amount. Certain features (including the ability to become a dropshipper) are only available in their top-level account, which is significantly more expensive at just under $300/month.

Conclusion: IzzoNet has some definite advantages over other hosted ecommerce platforms, making it a worthwhile service to check out. And their 15-day free trial (of the Diamond plan, which is $99.97/month) makes it easy to do just that. Feel encouraged, check out their plans and start the free trial…

[Disclaimer: This post is a sponsored review. The opinions expressed are the author's only.]

(dpe)

Usability and user experience testing is vital to creating a successful website, and only more so if it’s an e-commerce website, a complex app or another website for which there’s a definite ROI. And running your own user tests to find out how users are interacting with your website and where problems might arise is completely possible.

But using one of the many existing tools and services for user testing is a lot easier than creating your own. Free, freemium and premium tools are out there, with options for most budgets. The important thing is to find a tool or service that works for your website and then use it to gather real-world data on what works and what doesn’t, rather than relying purely on instinct or abstract theories.

Free And Freemium Tools

A ton of free and freemium tools are out there to test your website’s usability and user experience. Many of them get you to use your existing visitors as a testing base, which can give you a very accurate picture of what users are experiencing when they use you website.

Ethnio
Ethnio enables you to intercept visitors on your website and recruit them to help you with research (you can offer incentives to make participation more enticing). Ethnio acts as a hub for your various UX tools, including Usabilla, Optimal Workshop and UserTesting.com. It even works with GoToMeeting for screen-sharing. You’ll get detailed reports on the people who respond to your recruitment efforts. Ethnio has a free plan that allows for up to 10,000 page views per month and up to 250 responses. Paid packages start at $49 per month (for up to 100,000 page views and 500 responses) and go up to $299 per month (for over 1 million page views per month and unlimited responses plus other features).

Simple Mouse Tracking
Mouse tracking is a great way to see how visitors are actually interacting with your website. This plugin lets you record mouse activity on your Web pages and then replay that activity in real time. It works in virtually all modern and not-so-modern browsers, it works with static and liquid layouts, and it is customizable by the end user.

xSort
xSort is a card-sorting application for Mac OS X. It gives you full control over the exercise, supports sub-groups, gives statistical results in real time, and lets you create, read, print and export reports easily. The visual environment of the app resembles a table with cards (and you also get an outline view).

KISSinsights
KISSinsights lets you embed surveys directly on your website. The free plan offers an unlimited number of surveys, with up to 30 responses for each one. The premium plan, at $29 per month, allows you to customize the surveys and thank-you messages, removes KISSinsights’ branding, and allows for unlimited responses.

FiveSecondTest
FiveSecondTest helps you better design your landing pages and calls to action by analyzing which elements of your design are most prominent. Just upload a screenshot or mockup, set the questions that you want answered, and then wait for users to complete the test. FiveSecondTest collects the responses for you and analyzes them for common keywords, which it then represents visually. The free community plan lets you earn tests by participating in tests run by others. Paid plans start at $20 per month with more features, including private tests.

AddUse
AddUse enables you to conduct user surveys and user tests. You get one of each for free, and then can purchase additional surveys and tests from there. Signing up is quick and easy and doesn’t require a credit card. AddUse offers real-time results and analysis, and also includes ready-to-use usability questions that you can incorporate in your surveys for faster set-up.

UserEcho
UserEcho is a simple widget for collecting customer responses and ideas. Just copy and paste a few lines of code onto your website and then wait for visitors to respond. The free plan offers one forum and one official representative, as well as simple moderation, admin control, rich-content editing and YouTube embedding. Paid plans start at $15 per month and include more forums, more representatives and more features.

Usabilla
Usabilla lets you run micro-usability tests to get a better picture of how well your website performs with visitors. You can collect feedback, discover usability issues, measure how various tasks perform, and then get visual results. The free plan lets you run one public, active test at a time with up to 10 participants. Paid plans start at $49 per month, allowing you to create private tests with up to 50 participants, and go up to $199 a month (allowing up to 10 active tests at a time and up to 250 participants).

Google Website Optimizer
Google’s free Website Optimizer lets you run A/B and multivariate tests on your website. Just sign up with your Google account and create an experiment. You can specify which page you’d like to test and which sections of the page, and then identify your conversion and success targets. Setting up experiments is a straightforward process.

Userfly
Userfly lets you watch videos of users interacting with your website. Just install a single line of code, and it will record every mouse movement and click that users make. The free plan allows up to 10 captures per month and stores recordings for 30 days, while premium plans (ranging in price from $10 to $200 per month) allow for more captures and downloadable recordings.

Clickdensity
Clickdensity is a heat-map analytics tool that installs in under five minutes. It provides heat maps, click maps and hover maps and gives you real-time results. The trial version can be installed on a single page and stores up to 5,000 clicks. Premium plans start at £2.50 per month, and all include an unlimited number of pages.

Navflow
Navflow is a tool for analyzing the conversion paths for your mockups and wireframes. Just upload the designs that you would like to test, run a private or public test, and then view the results. The free plan allows you to earn public tests by participating in tests run by others. Paid plans start at $20 a month and allow you to run unlimited private and public tests.

User Plus
User Plus offers two tools for testing your website’s usability: Tester and Advisor. Tester lets you test the important tasks on your website with real people. Just create a test, invite users and then measure and see what they do. Advisor evaluates your website’s usability based on ISO standards and gives you a usability score. Tester is currently in private beta, and for a limited time you can try it for free. Advisor offers both free and paid plans.

Chalkmark
Chalkmark is for first-click testing, to see what visitors click on first on your website. It’s a simple concept, but vital to ensuring that your website is converting well. A free plan is available for running short surveys on a trial basis before you buy. The free plan lets you survey 10 people, with 3 tasks each. Paid plans include unlimited studies, unlimited tasks, unlimited questionnaires and unlimited participant responses.

4Q
4Q is an online survey tool for evaluating user experience and customer satisfaction. Setting it up takes less than five minutes, and the intuitive suite of online tools gives you valuable insight into how visitors are interacting with your website with only a few mouse clicks. A free plan is available that lets you collect responses from up to 100 participants. Paid plans start at $19 per month and include more features and more responses.

WebSort.net
WebSort.net is a remote card-sorting application. Just create a study, send the link to participants, and wait for the results. You can create a free study with up to 10 participants. Then upgrade whenever you want to include 100 participants or more (starting at $149 per test). You can also buy a three-pack of studies for $299; or buy an enterprise license, with unlimited tests in a 12-month period for $2,499.

Concept Feedback
Concept Feedback lets you get feedback on your website so that you can increase conversion rates. Just post your website, get expert feedback from experienced design, usability and strategy pros, and then share the evaluation with your team or client. You can pay to have experts review your website ($99 per expert), or just get feedback from the community for free.

Premium Tools

Vendors of premium testing tools generally recruit users specifically to offer feedback on your website. Many of the tools come with videos of users interacting with your website, and some offer both remote and local testing.

WhatUsersDo
WhatUsersDo lets you test the user experience of virtually any part of your website. Just set tasks for users to carry out on your website, and then watch and listen to recordings of everything they do and say. Setting up a test takes less than five minutes, and results are available within 48 hours. Pricing is a flat fee of £30 per user, and five users are recommended for each test.

TryMyUI
TryMyUI lets you test your website with real users and watch videos of them using your website. You get to see all of their mouse movements and keystrokes and hear everything they say about your website. Users also provide written answers to your questions. A free trial is available, and the regular price is $35 per test.

Userlytics
Userlytics is a full-featured testing service that guides you through the entire testing process, from designing the study to scheduling tests, managing logistics and incentivizing participation. Pricing starts as low as $59 per participant but goes lower with volume discounts. You’ll also get videos of participants interacting with your website for accurate results.

OpenHallway
With OpenHallway, you create test scenarios, record users either remotely or locally, and then watch video results from your browser. You can share videos with clients or team members, and an unlimited number of projects and test scenarios are allowed within your storage limit. You can try OpenHallway for free, with a test scenario and up to three 10-minute user videos. Regular plans start at $49 per month, which allows for up to 1 GB of storage (3 hours of video), and go up to $199 per month for 9 GB of storage (30 hours of video) and downloadable test results.

GazeHawk
GazeHawk runs eye-tracking studies on any image or website. It offers targeted or general user studies, depending on your needs. The starter plan, which includes a 10-participant study with heat maps and gaze replays, is $495. GazeHawk also offer A/B testing packages ($995 for two 10-participant studies), a professional package with 20 participants for $995, and enterprise solutions for bigger tests.

Silverback
Silverback is downloadable software for your Mac for running user tests. You can capture screen activity, record video of testers’ faces, record their voices, and control recording with the built-in remote. And it’s all exportable to Quicktime. The app is free for the first 30 days, and the full license is $69.95.

Verify
Verify, from Zurb, includes nine different test types: click, memory, mood, preference, annotate, label, multi-page click, and linked. New user tests can be set up in less than three minutes. You can share tests with team members or make them public, and visual reports are included to make decision-making easier. The “Plus� plan is $9 per month and includes unlimited tests, while the “Premium� plan includes demographics reports, linked tests and PDF export. A 30-day free trial is available on all accounts.

Feedback Army
Feedback Army offers cheap and simple usability testing for your website. You can set up a new test in two minutes, submit a question about your website, and get 10 responses from Feedback Army reviewers. And it all costs only $15.

UserTesting.com
For $39, UserTesting.com provides you with video of a visitor as they use your website, speaking their thoughts about their experience. You also get a written summary of the problems they encountered while on the website. Videos are generally about 15 minutes long and can be downloaded for archiving and editing (even embedded on a Web page).

IntuitionHQ
IntuitionHQ lets you sign up and start creating tests for free. Pay only once you start actually running tests (and then it’s only $9 per test). Creating a test simply requires that you upload screenshots and then write tasks for users to complete. Once the test is created and published, you get a URL to share with whoever you want to perform the tests.

Mechanical Turk
While not strictly a usability testing app, Amazon’s Mechanical Turk service can be used to gather usability data or feedback from real users. Just set up a “HIT� (human-intelligence task), and then set how much you’re willing to pay people to perform it. You pay only when you’re satisfied with the results.

UserFeel.com
UserFeel.com performs remote usability tests for you, providing videos of users testing your website. Just specify the website that you want to test, set the scenario and tasks, and then watch the videos. Pricing is $39 or less per test, with a 90-day money-back guarantee.

Loop11
Loop11 offers user testing for up to 1000 participants at a time, with an unlimited number of tasks and questions. There’s no time limit and no limit on the number of websites or wireframes you can test. Try Loop11 for free (with a maximum of five tasks and two questions, with data stored for only seven days); after that, tests are $350 each. Tests don’t require any code to be added to the website being tested, which means you can even test competitors’ websites.

ClickTale
ClickTale offers a number of usability testing services, including visitor recordings, click heat maps, mouse movement heat maps, and conversion funnel visualizations. Premium plans start at $99 per month, with full playback and a choice of three out of the four heat maps offered, while other plans (at $290 and $990 per month) include more features. A limited free plan is available to try out the service, as well as enterprise options.

CrazyEgg
CrazyEgg offers heat maps so that you can see exactly how users interact with your website and so increase your sales or leads. In addition to standard heat maps, CrazyEgg also offers scroll maps, confetti (which allows you to distinguish between all of the clicks your website gets, broken down by referral source, search term and other variables), and overlay reports. The basic plan is only $9 a month and includes 10,000 visits per month, up to 10 active pages, and daily reporting. Starting with the “Plus� plan, which is $49 a month, you get hourly reporting.

Webnographer
Webnographer provides remote usability testing services. You can test websites, Web apps, prototypes and intranets with a large number of users anywhere in the world. The tests are unmoderated, so you get honest feedback. And no downloads or website modifications are required to run tests. Pricing is available on request.

Regardless of which tool you choose, the important thing is to recognize the value of user testing. Getting real feedback is an invaluable way to determine which parts of your design work and which don’t. With that information, creating a more user-friendly website that converts better is possible. Usability and user experience testing should be a part of any website redesign project, to ensure that the changes being made will actually have a positive effect.

To streamline the selection process, below is a chart with the key features of each tool, as well as pricing information.

(al)

© Cameron Chapman for Smashing Magazine, 2011.

Considering how many designers are self-taught, either in whole or in part, the importance of a solid foundation in graphic design theory is often overlooked. New designers often want to jump right into creating websites, rather than learning the basics of why some designs work and some don’t. But they’re putting themselves at a disadvantage to designers who do have formal training or have taken the time to learn the principles behind good design.

Below are more than 45 recent lessons in graphic design theory. Included are general theories, theories about user experience and usability, typographic theory, layout and grid theory, and color theory.

General Design Theory

The Lost Principles of Design
Covers a number of basic graphic design principles, including balance, contrast, emphasis and subordination, directional forces, proportion, scale, repetition and rhythm, and unity, all with illustrations.

Principles of Good Design: Balance
Discusses how important balance is to creating an effective design. It covers symmetrical and asymmetrical balance, as well as off-balance designs.

Web Design Tips: The Use of Balance
This covers how to create balance in your website designs. It’s a simple overview article, with a lot of practical advice in addition to theoretical discussion.

The 5 Primary Principles of Potent Web Design, Part 5: Balance
This article from The Pro Designer covers the principle of balance and how to apply it to your designs. It’s short and to the point. Be sure to check out the links at the end for the other principles in the series.

3 Graphic Design Principles for Instructional Design Success
While dealing specifically with instructional design, this article covers three important principles that can be applied regardless of the purpose of your design: using layouts to convey meaning and relationship, using pattern and repetition to organize content, and using just the right images and no more.

Elements and Principles of Design
A great primer on the basic theories of visual design. If you’re not sure where to start, this might be a good place.

In Search of Ethics in Graphic Design
Ethical considerations are all too often overlooked in the world of graphic design. This article aims to change that by discussing a designer’s responsibility to their users.

Want to Know How to Design? Learn the Basics
This article provides a great overview of basic graphic design principles, including color, line, shape, space and more. Additional resources are provided for each concept.

Elements and Principles of Design
This page offers a basic but useful overview of the elements and principles of design, with basic illustrations of each concept. It’s a great starting point and incredibly easy to understand, because it’s aimed at young students.

11 Principles of Interaction Design Explained
Veering away from strictly graphic design, this useful article covers theories related to interactive design. Included are concepts such as matching experience and expectations, consistency, and functional minimalism. Some of the concepts could be carried over to non-interactive design (such as for print media).

The Modern, No-Nonsense Guide to the Principles of Design
This covers all of the basics: balance, emphasis, movement, pattern, repetition and more, as well as six “new� principles of eBook design that are just as relevant to website and graphic design.

Grid and Layout Theory

Grid-Based Web Design, Simplified
This covers the theory of grid-based design and gives practical advice on how to create your own grids, without over-complicating things.

Grids in Modern Web Design
A slideshow that explains the theory behind using a grid for a layout. It’s a quick introduction to grid theory, with a few practical examples.

Grids: Order Out of Chaos
A short article from About.com that discusses the basics of grid systems, why you should use them and what goes into designing them. Most of the information is geared to magazine and other print media, but many of the principles apply to all types of design.

Rule of Thirds, Visual Center, Grids
Another About.com article that discusses the theories of balance in page layout. The principles could be applied to either web or print design, but the article focuses on print design.

Gestalt Principles Applied in Design
This Six Revisions post covers the six basic principles of Gestalt theory — proximity, similarity, figure-ground, symmetry, “common fateâ€� and closure — and how to apply them to your designs.

Understanding Visual Hierarchy in Web Design
This Webdesign Tuts+ post covers the basics of visual hierarchy from a very practical standpoint. By the time you finish the article, you’ll have a grasp of not only what hierarchy is and why it’s important, but also how to effectively incorporate it in your designs.

How to Use Visual Hierarchy in Web Design
This article from Design Shack covers the principles of visual hierarchy and how to achieve it, accounting for size, color, position and visual complexity.

Grid Theory
This article covers grid theory in relation to Phi, the Rule of Thirds, and the 960 Grid system. It’s excerpted from Jason Beaird’s The Principles of Beautiful Web Design book.

Applying Divine Proportion to Your Web Designs
Discusses how to apply Phi (a ratio of roughly 1:1.618) in order to achieve more attractive and visually balanced designs. It also discusses the Rule of Thirds and has some practical advice for implementing each theory.

Usability and User Experience

5 Timeless Usability Principles for Website Designers
This post from 1st Web Designer covers five established principles of usability, including designing with a target in mind and focusing on conventions.

10 Usability Principles to Guide You Through the Web Design Maze
A quick overview of 10 usability principles. It’s short and to the point and a great place to start learning about usability.

How Cognitive Biases Shape User Experience
This slightly more advanced article covers the psychology behind why users react to design elements the way they do. It also covers the cognitive biases of those involved in crafting the user experience and how they can negatively affect the result.

Principles for Usable Design
A quick overview of some important usability principles, including consistency, simplicity and communication. It offers a handful of tips for effectively implementing each principle.

8 Design and Usability Principles You Can Apply to Your Website
This article offers some great tips that, if followed, could really improve the usability and user experience of your designs. Included are topics like designing to demographics and writing for a Web audience.

11 Quick Tips for More Usable Content
This UX Booth article has some excellent ideas on how to make your website’s content more user-friendly. Some are directly related to design, while others are more related to the content itself (which should always be considered in context of the design).

What You Need to Know About Usability
Some solid background information on website usability, including why it’s important, some information on Jakob Nielsen’s heuristics, and some best practices for usability.

Typography

A 20 Minute Intro to Typography Basics
A quick, simple guide to good typography. This is a high-level overview that covers things like typeface classifications, the anatomy of type, kerning and tracking, alignment, and ligatures, among other topics.

8 Simple Ways to Improve Typography in Your Designs
This not only teaches you the theories behind the tips, but gives you practical examples and code to get you started using the theories.

The Elements of Typographic Style Applied to the Web
One of the most thorough guides to Web typography theory out there. It covers horizontal motion, vertical motion, blocks and paragraphs, the etiquette of hyphenation and pagination, and harmony and counterpoint, all in detail.

Designing for Seniors
If you ever have to create designs for older demographics, then this is a must read. It explains numerous ways to make type more seniors-friendly, including guidelines for typographic style and size, text length, white space and more.

Typography for Children
There are also guidelines for designing typography for children. This article covers things like legibility, readability and more, all related to how children perceive and respond to designs.

Typography Is the Backbone of Good Web Design
Brian Hoff covers the techniques that he uses in his own Web typography, discussing both why they work well and how to get good results.

How to Create Great Web Typography in 10 Minutes
This article is a mix of theory and practical advice, and it covers vertical rhythm, font families, visual hierarchy and font colors, all of which are important in typography, regardless of medium.

“What Font Should I Use?�: Five Principles for Choosing and Using Typefaces
Includes some excellent guidelines for choosing fonts for your designs, including contrast, font families and appropriateness.

Eight Tips for Type on the Web
A short article from Fonts.com that covers basic guidelines for creating good Web typography. Included are things like avoiding justified text, using smart punctuation and creating a typographic hierarchy.

Type and Color
Explains how to choose the proper colors for your typography, and the rationale behind using different colors when designing type.

Typography Tuesday: Hierarchy
Hierarchy is one of the most important concepts in typographic design, because it reinforces the priority of elements. Creating a sense of hierarchy is as simple as differentiating between such elements as headlines, body copy, headings and so on. This article covers a variety of ways to do that.

Type Study: Typographic Hierarchy
Here is a great lesson in typographic theory, walking you through the principles, with a fantastic example that evolves throughout the article.

The Typographic Scale
This covers another vital part of typography design: sizing your typography based on a pre-defined scale. This gives the text more order and reinforces relationships between the various typographic elements.

Color Theory

Color Theory for Designers, Part 1: The Meaning of Color
The first part in my own three-part series on color theory for designers. This article covers the meanings of different colors, including cultural differences in color meaning. Parts two and three go deeper into the concepts and terminology of color theory and into creating your own color schemes.

Color Theory Quick Reference Poster
While not strictly a theory lesson, this poster includes all of the basics you need to know about color theory, in an easy-to-reference format. It’s available as a print-ready PDF or as desktop wallpaper.

Color Theory in Graphic Design
Covers the basics of creating color schemes, based on traditional patterns. Helpful illustrations accompany each pattern.

Understanding Color and Color Theory in Graphic Design, Part 1
Here’s another series that introduces you to color theory relative to graphic design. It starts out with some basic terminology and color schemes, and then progresses to color meanings in part 2.

A Look Into Color Theory in Web Design
This Six Revisions article offers a great overview of color theory, including the color wheel, terminologies, relationships between colors, types of color in design, and color meanings.

How to Get a Professional Look With Color
This post from Webdesigner Depot covers all of the basics of using color to achieve a professional design. It goes into more advanced techniques for creating color schemes.

Creating Consistently Colorful User Experiences: Part 1, Theory
This article on UX Booth discusses color theory in terms of user experience design. It talks about how color helps define how users perceive information in a design, as well as the subconscious impact of color on user experience.

(al)(rb)

It’s a pretty safe bet to say that the vast majority of people like movies. They’re usually entertaining and sometimes even informative or thought-provoking. But most designers probably don’t pay too much attention to how they might be able to offer inspiration for website or other designs.

But most movies, especially those with large budgets, have extensive art direction and production design happening to make sure the entire look of the movie is exactly the way the screenwriter and director have envisioned it. Whether it’s a fantasy film, a family movie, a historical drama, or anything in between, there’s a good chance that a team of dozens of people worked hard to make sure the visual design of the film was absolutely perfect.

Below are a number of popular films from the past few years. Many of these have won awards for their art direction and production design, but not all of them have. In addition to the stills included below, try to watch some or all of these films with an eye on the design of the sets and costumes, as well as how the characters interact with them.

Harry Potter and the Deathly Hallows: Part 1

Harry Potter and the Deathly Hallows: Part 1 (also referred to as Harry Potter 7) had some phenomenal art direction. It was nominated for an Academy Award for Best Art Direction in 2010.

In this image, there are a few different design principles going on. First of all, it’s a beautiful example of asymmetrical balance. The men in the image are considerably larger and darker than Dolores Umbridge in this shot. But the pink of Umbridge’s dress gives her more visual impact, balancing out the men in the image.

Speaking of the pink of Umbridge’s dress, that’s another great design element. Because of Umbridge’s undeniably evil nature, the pink is a surprising choice. These kinds of unexpected choices add interest and irony to the production design, and can be applied to any kind of design.

The last design element in this particular shot, and one that almost goes unnoticed, is the pattern in the floor. The circular nature of the flooring creates a natural flow and directs the viewer’s eye from right to left. Flow like this is an important element that indicates to your visitors where they should be looking on the page and helps control their interaction and user experience.

This still of the Weasley twins offers some ideas that aren’t often discussed in terms of web design, but can add a lot more visual interest to your designs. The main take-away from this image is the idea of repetition, but with subtle changes made. The twins are identical, visually the same, and yet there are subtle differences in their costumes and general appearance. The shift in color and pattern, while maintaining the same basic shape and size, adds a lot more visual interest while still maintaining the consistency that repetition provides.

The King’s Speech

Period films, by their very nature, have extra attention paid to the details of their production design, because anything that is out of place can ruin a viewer’s experience by pulling them out of the story. The King’s Speech is no different.

This still from the film is an excellent example of creating priority in an image without going over the top. The entire color palette consists of three basic hues in various shades: brown, gold, and black (with just a hint of white). So how do you make the King stand out in such a muted color scheme?

The answer is simple: you make him slightly lighter and brighter than his surroundings. This is an easy one to accomplish in web design, and goes to show that you don’t need something to be jarring in order to draw attention to it. Using a highlight color that still blends seamlessly into the rest of your palette for the most important element in your design sets it apart while still remaining elegant and understated.

Pride and Prejudice

There have been a number of adaptations of this novel by Jane Austen, but I’m going to focus on the one from 2005 with Keira Knightley and Donald Sutherland. This film had fantastic production value, perfectly capturing the mood of the novel.

The first thing Pride and Prejudice can teach us about is contrast. And particularly how contrast and color can contribute to our perception of things and the mood created. In this particular scene, Mr. Darcy is shown wearing almost entirely black, while Lizzy is in a white, flowing dress. It creates stark contrast between their characters, painting Darcy as the villain while Lizzy is pegged as the heroine. This example of color and contrast is a simple, yet effective, way of creating a positive/negative relationship.

By the end of the film, though, Darcy’s costumes have lightened considerably, while Lizzy’s have darkened. Basically, their characters have now arrived at the same place. Here, the lesson is that reducing the contrast creates harmony between potentially conflicting elements.

Alice in Wonderland

Tim Burton’s reimagining of Alice in Wonderland won the Academy Award for Art Direction in 2010, and rightfully so. It’s a masterpiece of visual design, and used a surprising number of practical set elements, rather than just CGI.

If there’s one thing that Alice in Wonderland can teach us about design, it’s not to be afraid to play with the scale and size of elements. Alice changes size numerous times throughout the film, often requiring interesting alterations to her costumes. Other characters, namely the Queen of Hearts, have disproportionately large body parts. The results in every case are stunning, and show the potential of unexpected scale. In your website designs, consider creating very large or very small elements that can surprise your visitors.

This still from the film has important lessons about working with complex, busy designs. The background elements in this particular shot are very busy, but through creative use of lighting, the focus is placed squarely on Alice and the direction in which she’s going. This makes it easy for viewers to know where they should direct their attention, and keeps the busy design from feeling overwhelming. Clear direction like this is invaluable in web design, and can be created by placement of elements, color choices, and scale.

Sweeney Todd: The Demon Barber of Fleet Street

Sweeney Todd is another Tim Burton film, and won the Academy Award for Best Art Direction in 2007.

The biggest lesson Sweeney Todd can teach us is the importance of mood in a design. Throughout the entire film, the mood is kept consistent through the use of various design elements. In this case, the mood is macabre and run-down, and is established through the use of dull, lifeless colors and dark lighting. There are very few flashes of color (and most of them are from blood). The result is a film that is completely immersive and draws the viewer in. It wouldn’t have been nearly as effective if the sets had been more typical of period pieces, or if brighter colors had been used throughout the set designs.

Regardless of what mood you want to establish with your site, making conscious choices throughout the design that establish and reinforce that mood will certainly result in a more immersive experience for your visitors. It also strongly influences how your audience will feel about the site, and whatever that site is offering, whether it’s selling a product or providing information.

There Will Be Blood

There Will Be Blood is another Academy Award nominated film for Best Art Direction, from 2007.

This particular shot from There Will Be Blood shows us a lot about the importance of what isn’t there, and how it reacts with what is. White or negative space in a design is just as important as any other design element, and yet it’s often overlooked or not used as well as it could be.

Note here how the character, Daniel, interacts with the negative space created by the blue sky. There’s no clear delineation between the occupied space and the negative space because of the way he bridges the two.

Another prominent feature here is the contrast created by the muted greens and browns of the main elements in the scene and the blue of the sky. But even though the blue contrasts the rest of the scene, there’s still a muted quality to it which ties everything together.

The Imaginarium of Doctor Parnassus

The Imaginarium of Doctor Parnassus is a whimsical, off-beat film with lots of set changes, costume changes, and even actor changes. It was also Heath Ledger’s final onscreen performance.

The biggest thing we can learn, as designers, from this film is not to disregard the importance of a sense of whimsy. The scenes from inside the Imaginarium are off-the-wall and unexpected (if not a bit creepy at times). They had no problem trying new things, and blending elements that might not normally be included together.

Water for Elephants

Water for Elephants is another period piece, this time set in the early part of the 20th century.

The main thing this image can show us is how to use different textures to create contrast between elements. Jacob’s costume and props are all rough materials: leather, burlap, and denim. In contrast, Marlena’s dress is satin, the opposite of everything Jacob is wearing. It reinforces the differences between them. Texture is relatively easy to incorporate into website designs, but is often only there to provide visual interest. Consider using it, instead, as an integral part of the page’s design, one that provides visual clues to the relationships between different elements.

The Chronicles of Narnia: The Voyage of the Dawn Treader

The third installment of The Chronicles of Narnia series, based on the books of the same name, was released in 2010.

This image is another great example of how to handle visually complex designs. There’s a lot going on here, between the background and foreground elements, the characters, and the lighting effects, but it’s all made less overwhelming by the use of a clear focal point. Lilliandil is cast in a circle of light, making her significantly brighter than her surroundings. The light orbs in the rest of the image reinforce her position as the focus of the scene.

Make sure that any complex design you create has a clear focal point. This provides grounding for your visitors: they know where they’re supposed to be looking. It gives clear purpose to your design, allowing you to create a design that is rich and visually complex without being cluttered.

Stardust

Stardust, based on the Neil Gaiman graphic novel and novel of the same name, was released in 2007.

This still from the film has a few lessons to teach us. First of all is the Golden Ratio (which is similar to the rule of thirds, but places important elements just a bit closer to the center than the rule of thirds does). Tristran and the gap in the stone wall are both positioned almost perfectly in regard to the Golden Ratio in this image. The right-hand side of the wall is also positioned along the Golden Ratio, which lends further balance to the composition. Using the Golden Ratio in your own layouts creates a more balanced and harmonious design.

Another element here is the angle of the stone wall. It leads our eye further into the image, creating a sense of depth and motion. The same can be done through the use of perspective and lines in your designs. It adds a more dynamic layer to your designs, giving a sense of energy that’s often missing.

Star Trek

The JJ Abrams reboot of the Star Trek franchise has been polarizing to say the least. But the set and costume designs used were undeniably well done.

This may sound a bit too simple, but one of the biggest things Star Trek can teach us is not to be afraid of a white background. Throughout the film, white sets on the Enterprise are prominent. What this does is allow the important elements—the characters and the action—stand out.

Now, that doesn’t mean that the backgrounds are just plain, stark white. There’s still a lot going on there. Take that as your cue to play with texture and pattern, while maintaining a light and neutral background color.

Monsters

Monsters was an indie movie set and filmed in Mexico. There are a couple of important things it can teach us about good design.

Designers tend to shy away from splitting their designs right down the middle, or putting the focal point of a design right in the middle, with little else on either side. This still from Monsters, though, shows us just how much impact that technique can have. When you want to make a statement with your design, creating a more symmetrical layout with your focal point right in the center can be a powerful way to do so.

Another thing that Monsters teaches us, that’s harder to capture from a movie still, is that hinting at things can be just as powerful as showing us something outright. Throughout the film, the Monsters are rarely seen or even heard from, which creates a sense of suspense—we know they’re out there, but we don’t know where or when they might attack. A similar sense of suspense and mystery can be applied to your designs in various ways.

Defiance

Defiance is set in Germany during WWII.

This still from Defiance shows us the impact that creating a sense of motion around a stationary focal point makes that focal point stand out more. At the same time, the motion keeps the design from feeling stagnant, as can happen when the focal point is too strong without much happening around it.

Conclusion

If there’s one thing film art direction can teach us, it’s that paying attention to all the little details in a design can have a big payoff in the end. Would Alice in Wonderland have won an Oscar for Best Art Direction if so much effort had not been put into the look and feel of the film? Certainly not. The same can be said of any of the others above.

The next time you watch a film, look carefully at the background sets, the costume choices, and even the lighting of each scene. Look at the mood it creates, and how sometimes unexpected elements can offer a lot of extra visual impact and irony to the overall production. Then think of ways to incorporate the same kinds of things into your own designs.

(rb)

Figuring out how a document has changed from one version to another isn’t always the simplest task. It’s further complicated when that document is longer or more complex, like source code.

The tools collected here can help you analyze and compare your documents and files, as well as merge them if necessary. There are tools to compare everything from Word docs to WAV files, and everything in between (including plenty that support syntax highlighting for code). Some are free and some are paid, and there are options available for Mac OS X, Windows, and Linux.

File and Document Comparison Tools

Beyond Compare Version 3

Beyond Compare lets you easily compare files and folders, including text files (with syntax highlighting for HTML), Word Docs, and PDF files, among others. Available for Windows and Linux for $30 (standard edition) to $50 (pro edition).

Kaleidoscope

Kaleidoscope lets you compare text documents (including source code) and images. It has built-in integration with other programs, and can read .psd, .txt, .png, .jpg, and .html files. Available for Mac OS X for €29.

Workshare Compare

Workshare Compare is an enterprise-level document comparison tool that lets you compare Word documents and text-based PDFs. You can compare one document to multiple others. It’s available for Windows for $145 for a one-year subscription. There’s also a Basic version for $99/year that only compares Word documents.

Docu-Proof Enterprise

Doc-Proof works to compare XML, Word, text, and PDF files. It makes it possible to quickly compare fonts, sizes, deletions, insertions, spelling, and location.

ExamDiff

ExamDiff is a freeware visual file comparison tool for Windows. It includes automatic change detection, one-click recompare, drag and drop support, and is fully customizable. There’s also a Pro version with more features for $34.99.

Diff Doc

Diff Doc can be used to compare Word, Excel, PowerPoint, PDF, RTF, text, HTML, XML, and other document types. It’s available for Windows.

Compare Suite

Compare Suite lets you compare by keyword, compare two folders, ignore certain words, and includes syntax highlighting to make it easier to compare code documents. Compare Suite is available for Windows for $70 for a single user license.

WinMerge

WinMerge is an open source differencing and merging tool for Windows. It shows comparisons visually, and makes it easy to merge documents.

Araxis Merge

Araxis Merge is a three-way document comparison, merging, and folder synchronization tool. It can be used to compare source code, web pages, XML, and other text files, as well as Word and Excel documents, PDFs, and RTF files. It’s available for both Windows and Mac OS X for $129 for the Standard version and $269 for the Professional version.

Changes

Changes lets you sync folders, compare both code and prose, and even compare right inside a variety of text and code editors (including Coda and TextWrangler). Changes is available for Mac OS X for $49.95 for a single license.

CodeCompare

CodeCompare is a source code comparison tool built on the .NET framework that includes support for syntax highlighting, Visual Studio integration, three-way merge, version control integration, and folder synchronization. Basic functionality is free, but there’s also a Pro version for $49.95.

Compare++

Compare++ has built-in analysis fuctions for C/C++, C#, Java, CSS3 and more. It’s available for Windows for $29.95 for a single user.

DiffMerge

DiffMerge is a free document comparison and merging tool for Windows, Mac OS X, and Linux. It includes full editing support for compared files, and merging for up to three files.

Pretty Diff

Pretty Diff is a free web app for comparing code, written entirely in JavaScript.

Kompare

Kompare is a graphical difference viewer that lets you compare two text files It’s included in the KDE Software Development Kit.

UltraCompare

UltraCompare is a file and folder compare utility that works for text files, Word documents, zip files, and jar archives. In addition to local/network directory compare, it also supports FTP compare. It’s available for Windows for $49.95.

Code Difference Comparison Tool

This is a free, bare-bones, web-based comparison tool. Just enter the master text and the second text and choose whether you want it compared inline or side-by-side.

Diffuse

Diffuse is a free Python text comparison and merge tool for Windows and Linux.

Compare & Merge

Compare & Merge is a file comparison and merging utility for source code, HTML, XML, and other text-based files. It’s available for Windows for $39.95.

Active File Compare

Active File Compare has syntax highlighting support for C++, C#, Java, Visual Basic, HTML, PHP, XML, and many other programming languages. It can also compare files that exist in Zip, Tar, and GZip archives. It’s available for Windows for $15.95 for a business license or $9.95 for a personal license.

Colored Diffs

Colored Diffs is a Thunderbird plugin for highlighting differences in CVS or SVN email notifications about changes made by other users.

Compare It! 4

Compare It! lets you compare not only text files, but also binary and image files, and includes an editing engine. It’s available for Windows for $29.

Compare PDF

Compare PDF has support for both PDF and text file comparisons. It can be integrated with other software products. Compare PDF is available for Windows for $35 for a single user license.

DiffPDF

DiffPDF is a free program that lets you compare two PDF files, with both text and appearance views (to check things like reformatting of a paragraph or if an image is changed). There are versions for Windows, Mac OS X and Linux.

Meld

Meld is a free visual comparison and merging tool for Linux. It allows for comparison of two or three documents, and in-place edits. It also allows folder comparisons.

Files Compare Tool

Files Compare Tool is a visual comparison app for files and directories. It offers color-coded side-by-side comparison and a powerful editing engine.

Quick Diff Online Tool

Quick Diff is a simple, free online comparison tool. Just copy and paste the two bits of text you want to compare, and indicate whether you want it to compare side-by-side or inline.

FourierRocks

FourierRocks is a graphical WAV file comparison tool. It’s open source, and works on the .NET framework.

Conclusion

The tools above can be a great way to compare documents and files. But don’t overlook the document comparison tools built into many programs developers and designers already use. Dreamweaver has built-in tools for comparing documents. So does Google Docs. Even WordPress has comparison tools for posts and pages. Leave us a comment and tell us what your favorite comparison tools are?

(rb)