BlogmyQuery – BMQ

By Cameron Chapman

Wireframing is an important part of the design process, one that shouldn’t be overlooked by even the most experienced designers. Wireframes can save development time by outlining exactly how a site should look and function, in a manner that can be shown to and approved by your clients.

But wireframing can be confusing, especially to new designers. What’s the right way to create a wireframe? Is there even a right way? Should I use pen and paper or software? Which software? How long should it take? All these questions and more are answered in the resources below.

Wireframing Articles

The articles featured here discuss wireframing and prototyping both from a theoretical and a practical point of view. If you have questions about how to wireframe or why you should, one of the links below will likely answer your questions.

My Five Commandments for Wireframing
A podcast and article from Boagworld on good practices for wireframing, including why you should wireframe and the benefits of paper wireframing.

Wireframes for the Wicked
Here’s a slideshow that talks about the purpose of wireframes and the different types of wireframes.

Sometimes, the Best Wireframing Tool is a Pencil
A brief post on why wireframing with paper and a pencil sometimes works better than using computer-based tools.

Why Sketching and Wireframing Ideas Strengthens Designs
This post from SpyreStudios covers why sketching and wireframing your ideas leads to the evolution of good designs.

The Future of Wireframes?
A post on the evolution of wireframes from functional to visual from Made by Many.

Wireframing is Not a Religion
A short but impactful piece from 52 Weeks of UX on the different types of wireframes and why there’s no “right” way to wireframe.

UX 101: The Wireframe
A beginner’s guide to wireframing from Viget Advance.

The Wireframe: All You Need to Know
This is a very basic guide to wireframing, perfect for beginners.

Storyboards vs. Wireframes
This post talks about the benefits and drawbacks of using storyboards vs wireframes.

The Right Way to Wireframe
This is a fun video from Will Evans that shows the “right” way to wireframe (using OmniGraffle and stencils), as well as some commentary about wireframing. The background music is NSFW (nothing is lost if you just mute the video, though).

Guidelines, Tools and Resources for Web Wireframing
W3Avenue has put together this great resource roundup for wireframing.

The Power of Wireframes and Mockups
A short piece on the benefits of using wireframes and mockups in your design process. It also briefly discusses the differences between wireframes and mockups.

The Future of Wireframes
Here’s a great post from MIX that talks about how the web has changed and how wireframes will need to change with it.

Concerning Fidelity in Design
Here’s a post on UX Booth that talks about using the proper level of fidelity in different design deliverables (sketches, wireframes, mockups, and prototypes).

Where Wireframes Are Concerned
This post from UX Magazine talks about the pros and cons of wireframes, particularly focusing on the drawbakcs.

The Value of Wireframing
A post talking about the importance of wireframing and why it makes the design and development process go more smoothly.

Wireframing is Not Prototyping
A very short article on the differences between wireframing and prototyping.

Wireframes vs. Prototypes
Another longer article on the differences between wireframes and prototypes.

Wireframing and Mockup Tools

Once you have an idea of how you want to wireframe or prototype your designs, it’s time to decide which tools you want to use. The links below feature both software and analog tools for wireframing and prototyping.

Mockingbird
Mockingbird is a simple but powerful wireframing tool for Firefox, Safari and Chrome. There are a variety of paid plans available depending on your usage needs, and they don’t charge you for months where you don’t have any active projects.

FlairBuilder
FlairBuilder is a downloadable wireframing program that lets you build wireframes you can then share with clients (there are free online and desktop viewer clients that let them see the files). They offer a free fifteen-day trial, and then can bill monthly ($24/month) or yearly ($99/year). The program includes tools for prototyping websites as well as iPhone apps.

ProtoShare
ProtoShare lets you create interactive prototypes that can include CSS, JavaScript and HTML, and you can add Flash, images, and other files. It also offers real-time collaboration tools with browser-based access.

MockFlow
MockFlow lets you wireframe both online and offline, and offers a design library addon service with components and templates you can use. You can link pages using a sitemap, creating a clickable prototype.

Lovely Charts
Lovely Charts is free a wireframing and diagramming tool that lets you create all sorts of professional-looking wireframes, flowcharts, and other diagrams.

Cacoo
Cacoo is a free online drawing tool that can be used for creating wireframes or other diagrams. You can export images in PNG format, though in the FAQs they say they’re planning on allowing export to PDF and SVG in future versions.

SimpleDiagrams
SimpleDiagrams is an Adobe Air app that lets you build sketchy diagrams in minutes, and includes pre-made design elements. There are free and paid ($19) versions.

Lumzy
Lumzy is a free app that lets you quickly create interactive mockups. It includes live chat and real-time collaboration, as well as a built-in image editor.

Gliffy
Gliffy is a free wireframing tool that requires no signup and lets you share and collaborate on the wireframes you create. You can also use it to create diagrams and flowcharts.

Keynote Wireframe Toolkit
This $12 toolkit gives you various elements you need to create wireframes using Apple’s Keynote software. Included are things like form inputs, scroll bars, tabs, breadcrumbs, progress bars, iOS elements, modal windows, and more. The website also offers some tips and tricks for creating wireframes using Keynote.

A Wireframe Kit for Google Drawings
Google Drawings is a great tool for creating wireframes, in some ways superior to paid programs like Omnigraffle and Visio. But it was lacking stencils. Not anymore. Here’s a stencil kit that includes a variety of website elements you can include in your mockups.

Keynotopia Wireframing Set
Here’s another wireframing template set for Keynote, though this one is available for free. It includes controls, breadcrumbs, containers, dialogs, galleries, social elements, and more.

10 Free Printable Web Design Wireframing Templates
If drawing wireframes by hand is more your style, then the printable wireframing templates in this collection are for you. There’s everything from printable browser frames to iPhone mockups.

A Collection of Printable Web Browser Sketching and Wireframe Templates
Here’s another collection of printable wireframing tools, this time including UI stencils.

PowerPoint Wireframe Template for UI Design
We’ve already covered a couple of Keynote wireframing templates for Mac users out there, but there are also PowerPoint templates for PC users out there. These include sample screens with various design elements included.

Five Killer Wireframe Resources
Here’s a great little roundup from Fuel Your Interface that offers some fantastic wireframing resources, including UI stencils and other toolboxes.

Wireframe Showcase
Here’s an excellent source if you’re looking for wireframing examples and ideas. It shows not only the wireframe, but also the completed site.

Websites and Web applications have become progressively more complex as our industry’s technologies and methodologies advance. What used to be a one-way static medium has evolved into a very rich and interactive experience.

But regardless of how much has changed in the production process, a website’s success still hinges on just one thing: how users perceive it. “Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users.

User experience design is all about striving to make them answer “Yes” to all of those questions. This guide aims to familiarize you with the professional discipline of UX design in the context of Web-based systems such as websites and applications.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

What Is User Experience?

User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in modern contexts, is generally denoted by some form of human-computer interaction (HCI).

Those who work on UX (called UX designers) study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.

UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. They could delve deeper by studying components of the sub-system, such as seeing how efficient and pleasant is the experience of users filling out input fields in a Web form.

Compared to many other disciplines, particularly Web-based systems, UX is relatively new. The term “user experience” was coined by Dr. Donald Norman, a cognitive science researcher who was also the first to describe the importance of user-centered design (the notion that design decisions should be based on the needs and wants of users).

Why Is UX Important?

Nowadays, with so much emphasis on user-centered design, describing and justifying the importance of designing and enhancing the user experience seems almost unnecessary. We could simply say, “It’s important because it deals with our users’ needs — enough said,” and everyone would probably be satisfied with that.

However, those of us who worked in the Web design industry prior to the codification of user-centered design, usability and Web accessibility would know that we used to make websites differently. Before our clients (and we) understood the value of user-centered design, we made design decisions based on just two things: what we thought was awesome and what the client wanted to see.

We built interaction based on what we thought worked — we designed for ourselves. The focus was on aesthetics and the brand, with little to no thought of how the people who would use the website would feel about it.

There was no science behind what we did. We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted.

But this decade has witnessed a transformation of the Web. Not only has it become more ubiquitous — the Web had at least 1.5 billion users globally in 2008 — but websites have become so complex and feature-rich that, to be effective, they must have great user experience designs.

Additionally, users have been accessing websites in an increasing number of ways: mobile devices, a vast landscape of browsers, different types of Internet connections.

We’ve also become aware of the importance of accessibility — i.e. universal access to our Web-based products — not only for those who with special requirements, such as for screen readers and non-traditional input devices, but for those who don’t have broadband connections or who have older mobile devices and so forth.

With all of these sweeping changes, the websites that have consistently stood out were the ones that were pleasant to use. The driving factor of how we build websites today has become the experience we want to give the people who will use the websites.

What Situations Would Benefit From UX Design?

Saying that all Web systems would benefit from a solid evaluation and design of the user experience is easy; arguing against it is hard if you care about user-centered design at all. But we don’t live in a perfect world, and we don’t have unlimited resources. Thus, we must prioritize and identify the areas that stand to gain the most from UX design and UX designers.

Complex Systems

The more complex the system, the more involved will the planning and architecture have to be for it. While investing in a full-blown multi-member UX study for a simple static website seems excessive, multi-faceted websites, interaction-rich Web applications and e-commerce websites stand to benefit a lot from UX design.

Systems that involve a myriad of user tasks must be perceived as being valuable, pleasant and efficient. Designers risk big losses in revenue by neglecting the user experience.

Start-Ups

Start-ups and smaller companies generally do not have the resources to hire dedicated employees for this. For example, 37Signals, a lean start-up company that builds highly successful and robust Web applications, including Basecamp and Highrise, relies on well-rounded individuals, people who can “wear different hats.”

In this situation, training existing employees (specifically, the Web designer) in the principles and processes of UX, or contracting out the UX work as needed, might be more suitable than hiring a full-time employee. However, creating a solid user experience for users in the very first versions of a product or service can certainly make it stand out and attract users’ attention. But as the owner of a start-up, sometimes you may just not have enough resources for hiring a skilled UX designer.

Projects With “OK” Budgets

Smaller agencies that work for small and medium-sized businesses need to keep costs low for the customer base and prioritize deliverables in order to stay on the budget. The focus in these situations is more on the build process and less on planning, research and analysis. Projects with small budgets will be driven more by the launch of the final product. That doesn’t mean that these projects wouldn’t benefit from the good UX — of course they would — but in practice, small or medium-sized companies often do not feel compelled to invest resources into something that is not necessary for the launch of the site.

Projects With Longer Timeframes

By simple logic, adding a cog to the traditional website production process will extend the timeline. Time must be allotted for user experience design. UX designers could, in theory, shorten timelines by taking on some of the tasks traditionally assigned to Web designers and developers, thus potentially saving time and costs in revision phases by having addressed user issues.

Things To Know About UX Design

UX design is an amazing discipline, but it cannot, or will not, accomplish certain things.

UX Design Is Not One Size Fits All

User experience design won’t work in every situation for every user because, as human beings, we are all different. What works for one person might have the opposite effect on another. The best we can do is design for specific experiences and promote certain behaviors, but we can’t manufacture, impose or predict the actual experience itself.

And just as we can’t design a user experience, we can’t replicate the user experience for one website exactly on another website. User experiences will be different between websites. a design must be tailored to the goals, values, production process and products of its website.

Can’t Be Directly Assessed With Traditional Metrics

You can’t determine the effectiveness of a user experience design based solely on statistics such as page views, bounce rates and conversion rates. We can make assumptions, and we can ask users for anecdotal evidence, but we can’t install an app (at least not yet) that automatically records user experience statistics directly.

Not the Same Thing as Usability

User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface.

Usability is big part of the user experience and plays a major role in experiences that are effective and pleasant, but then human factors science, psychology, information architecture and user-centered design principles also play major roles.

Criticisms Of UX As A Profession

Not everyone sees the value of having a UX designer on the team. Arguments against hiring UX specialists revolve around the perceived associated costs, redundancy in skill set and fear of change.

Yet Another Thing to Worry About

The traditional website production process, especially at small agencies and start-ups, whose resources aren’t as deep as they’d like, consists of one Web designer and one Web developer. The Web designer might be the one who develops the user experience, along with other tasks such as designing a wireframe and functional prototype, while the developer builds the production website as specified by the designer. A UX specialist only complicates this process.

Too Far Removed From the Process

A few people in the business of building websites believe that UX designers are too far removed from the actual process. Ryan Carson, founder of Carsonified and a leading voice in the Web design industry, for example, has criticized UX professionals who aren’t “involved in the day-to-day process of designing, building, testing, marketing and updating a Web project.”

This view of the profession basically says that UX professionals with no background in the actual process of building websites can’t devise solutions as expertly as people who create the actual products.

However, many UX professionals do have a background in the build process; many were Web designers or developers who chose to specialize in this particular area of the production process.

Adds Expense

Simple logic dictates that hiring a UX person costs money (unless they’re willing to work for free, and none are).

A counter-argument is that we should look at UX design as an investment. Although the benefits of UX are not as readily apparent as those of other parts of the website or application, it can lead to higher returns later on. For example, a simple improvement in the user experience design of a checkout process could increase revenue by millions of dollars.

Results Are Not Directly Measurable

Evaluating the effectiveness and return on investment of a UX design using quantitative measures is difficult. This is because the field is subjective. UX deals with users’ emotions, and you can’t put a number on it the way you can with page views, loading speed or conversion.

Instead, we have to tease out the results indirectly by analyzing revenue levels, page views, before-and-after surveys of users and the like. However, saying that any positive effects are the result of a better user experience or aesthetics or some other factor, such as improved marketing or front-end performance optimization, would be inconclusive.

The difficulty is in trying to quantify effects that are subjective in nature. We have to rely on qualitative evidence.

Tasks And Techniques Of UX Designers

UX designers perform various tasks at various points in the process. Here are a few things that they deliver.

Evaluation of Current System

If a system already exists, a UX professional will holistically evaluate its current state. They will report issues and suggest fixes based on their analysis of research data.

A/B Testing

A UX specialist might devise a study to compare the effectiveness and quality of experience of different user interfaces.

This is done by stating a hypothesis (e.g. “A green button is more attractive than a red button.”), proposing or creating multiple versions of a design, defining what a “better experience” means (e.g. “The green button is better because users clicked it more.”) and then conducting the test.

User Surveys

A UX designer could interview existing and potential users of the system to gain insight into what would be the most effective design. Because the user’s experience is subjective, the best way to directly obtain information is by studying and interacting with users.

Wireframes and Prototypes

Based on their findings, UX specialists might develop wireframes of different layouts and perhaps also higher-fidelity prototypes.

User Flows

Designing how users should move through a system is another popular deliverable.

Storytelling

By engaging the emotions of users and drawing on familiar elements, UX designers tell stories and teach information. Learn more about the value of storytelling in the context of UX in the two-part post “Better User Experience With Storytelling.�

Design Patterns

Patterns provide consistency and a way of finding the most effective “tool” for the job. With user interface design patterns, for example, picking the right UI elements (e.g. module tabs, breadcrumbs, slideshows) for certain tasks based on their effectiveness leads to better and more familiar experiences. UX designers not only propose design patterns that are used on other websites, but develop custom patterns specifically for the current project.

User Profiles and Personas

Knowing your audience is the first step in UX design and enables you to develop experiences that reflect the voice and emotions of your users. Personas can be developed using website data.

Content Inventory

In the simplest of terms, content inventory is an organized list of pages on a website. Doing a content inventory is a step towards proposing changes in information architecture to enhance the user experience (e.g. user flow, findability and efficiency).

Content Style Guides

Consistency is critical to crafting a memorable user experience through your brand. Content style guides give writers and designers a framework in which to work when creating content and developing a design, and they also ensure that the brand and design elements align with the owner’s goals.

I Love New York’s branding guidelines.

There are plenty of other UX design deliverables; check out this more complete listing.

Tools Of The Trade

Here are a few popular and easily accessible tools for UX professionals. The tools aren’t exclusive to UX professionals; developers, designers and interaction designers, among others, use them as well.

Wireframing and Prototyping Applications

Wireframing and prototyping can be done simply with pen and paper. Paper prototyping, in particular, has many benefits, such as being inexpensive, conducive to group prototyping and quick and easy to produce.

Some software-based wireframing and prototyping tools are:

• OmniGraffle
• Balsamiq Mockups
• Mockingbird

A/B Testing Software

A/B testing (also known as split testing or multivariate testing) compares different versions of a page, and it can be conducted with any of several programs.

Basically, A/B testing software splits a website’s traffic into two equal segments. One group sees version A, and the other group sees version B. Statistics such as conversion rate and bounce rate are tracked for each version. Split testing determines which version is better based on these statistics. One of the most popular applications for A/B testing is Google’s Website Optimizer.

Content Inventory Software

There are plenty of methods of conducting a content inventory. Using an on-site server application (for which you’ll require access to the Web server) is best for production websites; being closer to the source than third-party software, these applications will naturally be more accurate and efficient. You can use as simple a tool as Excel to create and manage a content inventory (check out the GetUXIndex() template).

Websites built with content management systems such as WordPress and Drupal typically have built-in tools that show a map of the existing website.

User Testing and Feedback Software

Interviewing users is another popular UX design task. The most effective and cost-saving way to do this is with a surveying or feedback app and remote user testing.

User feedback tools are abundant. General survey tools such as PollDaddy are flexible solutions that can be used for other tasks, too. There are usability-specific feedback tools, such as Usabilla, and remote user-testing services, such as Feedback Army, which administer usability tests on reviewers.

Analytics Software

UX designers can analyze traffic statistics to hypothesize what types of experiences would be most effective for the audience of the website.

Let’s say the data indicates that the most popular browser for a website is Google Chrome. Google Chrome is regarded as a power user’s browser (as opposed to Internet Explorer, which is more mainstream). From that assumption, a UX designer can craft user experiences that appeal to power users and tech-savvy people.

A feature-packed and free analytics tool is Google Analytics.

Websites About UX

Plenty of websites cover the topic of UX. Here are a few of them.

UX Magazine
UX Magazine is a high-quality resource that publishes discussions on ways to enhance the user experience.

UX Booth
UX Booth is a multi-author blog catering to the user experience community. It also covers usability and interaction design.

User Interface: Stack Exchange
Still in beta, UI Stack Exchange (part of the Stack Overflow network) is a collaboratively edited question-and-answer website for user interface researchers and experts.

Stack Overflow
Stack Overflow, a popular programming Q&A website, has awesome question threads tagged with UX and Usability.

UX Exchange
UX Exchange is a community-driven website where members can ask about user experience and UX-related fields such as usability, accessibility and interaction design.

User Interface Engineering
UIE is the largest usability research organization in the world. It publishes articles and research findings on its website.

UXmatters
UXmatters is a Web magazine that publishes content on user experience strategies, information on the UX discipline and more.

52 Weeks of UX
This website by Joshua Porter and Joshua Brewer covers topics related to “the process of designing for real people.”

Boxes and Arrows
Though Boxes and Arrows describes itself as being “devoted to the practice, innovation and discussion of design,” the website regularly publishes top-notch articles about UX.

Semantics
Peter Morville, founder of Semantic Studios, a leading information architecture, user experience and findability consultancy, writes about user experience (and related topics) in this Web column.

UsabilityPost
This blog by Dmitry Fadeyev is about design in the context of function.

101 Things I Learned in Interaction Design School
Interaction design is intimately related to UX, and this blog offers short and “easily digestible” posts on the topic.

UX Quotes
This website provides quote snippets on the topic of UX.

Quotes From the User
User experience is all about the user (which is why personas are important). This Tumblr blog tells the story of UX from the perspective of the user by featuring quotes by users of various systems.

everydayUX
This blog by the head of product at FourSquare (a popular location-based social networking service), Alex Rainert, often covers his thoughts on information and interaction design.

Konigi
Konigi indexes news, resources and tools for UX designers (in a nice gallery layout that makes browsing the website easy).

90 percent of everything
This blog by user experience lead Harry Brignull covers information architecture, user experience and the nature of “good design.”

DarkPatterns.org
This design pattern library discusses common tactics for decieving users, which can help UX designers locate patterns to avoid if they want to create a positive user experience.

Johnny Holland Magazine
This Web magazine is about interaction and UX design. Be sure to check out the UX Tips section, which indexes tweets hashed with #uxtips.

UX Pond
UX Pond is a search engine dedicated to UX-related content.

Adaptive Path Blog
Adaptive Path, a leading user interface and user experience design firm, runs a blog with useful content on UX and UI design.

Putting People First
This portal provides links, articles, resources and news about UX and “people-centered innovation,” curated by the Italy-based experience design company Experientia.

nForm Blog
The blog of nForm (a consulting team focused on user experience) publishes great content relevant to UX designers.

Viget Advance
The UX-related blog of Viget Advance, a website production company.

useit.com
Highly-respected usability researcher and ground-breaking author, Jakob Nielsen, writes a column named Alertbox on the topic of usability and UX.

UX Array
Sara Summers, user experience evangelist for Microsoft, blogs about (you guessed it) UX on her blog.

UI and Us
UI and Us is “about user interface design, user experience design and the cognitive psychology behind design.”

UX Storytellers
UX Storytellers uses one of the profession’s methodologies (storytelling) to tell the stories of UX, UI and IA professionals.

Further Reading on UX Design (and Related Fields)

• 25 User Experience Videos That Are Worth Your Time
• Can Experience be Designed?
• Userfocus Articles and Resources
• UX Myths
• User Experience Publications (curated by Nick Finck)
• 10 Most Common Misconceptions About User Experience Design
• 8 Must-See UX Diagrams
• UX Professional Isn’t a Real Job

(al)

© Jacob Gube for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: usability, ux

The product is developed, the site is designed, it has content, it works, and it is ready to go! Well, many websites that are in this stage are not actually ready to go, but are closer to being ready for public release or launch.

As many of us, we tend to forget to perform many precautionary or pre-launch tests because either the project is quite large and many things are forgotten, or we become too excited to introduce our new flavor to the internet that we do not think about precautionary elements, but rather getting it out to the public and fast.

In order to help prevent precautionary methods or tests from being skipped, it is generally a good idea to make a nice laundry list on all the steps and tests you need to go through before deeming your website ready for launch as with any tangible products and goods. With that said, we cover five things that you generally need to do before launching your website in hope we are reminding you of that you may have forgotten to add to your pre-launch list.

Cross-Browser and Platform Checks

We all have a favorite browser that we tend to love, adore, and recommend to anyone who is not using it. What this means is, we generally tend to test our website design in our favorite browser the most than any other browser out there. In fact, this is one of the major issues we see with new launched websites that the design is sometimes messed up in the browser we use versus the browser it was mostly tested in. Therefore, visiting the homepage of your website in different browsers is not enough to deem it” alt=”" />

Not having the browsers installed onto your working environment is not a good excuse to not testing your website across multiple browsers. If you do not want to download each browser individually, there are a plethora of cross-browser testing suits and tools to fulfill the proper testing environment.

If you do not have a proper testing environment, it is a good time to get started on setting one up before coding your design as it is generally helpful to fix bugs along the way, rather than leave them to the end for fixing, which may lead to more troubles and bugs that you may have not seen or that may have been caused due to fixing other bugs.

Working Links

I admit, when I sometimes needed to link to dozens of tutorials or pages within my content I tended to get lazy on clicking every single link to assure they all work and lead to the correct location or page. However, I learned the hard way and faced having to spend more time going back and correcting the errors than just fixing them as I went along.

With that said, before launching your website, make sure you proofread your content and click on every link you provide within your website to assure they all link to the appropriate and intended locations as it will keep your website ranked higher, as well as you time in the long run.

Traffic Statistics

Before launching a website you need to make sure you get some sort of analytical program working to keep track of traffic and “hot spots” on your website. If marketed properly, we all know the most traffic we will get for a while would be on the first few days of launch, and not having any analytical program to keep track of how many visitors landed or where they are going on your websites good be a success or fail situation for your website as these few days are vital for improving your website to keep as many visitors as you possibly can.

Code Validation

I cannot stress enough on how valid code is just a key aspect that you cannot disregard when launching your website. There are so many benefits to valid code such as professionalism, better search engine optimization, and others, so do not disregard it, and spend the time needed to get all the tidbits fixed and to have that code ready.

To give you an example of accepting invalid code as a solution, let us say you are creating a tangible coffee mug that you plan to use every day. As you are creating this coffee mug, you notice that around the handle that you attached, there some holes and imperfections within the clay.

You know that if you do not fix the imperfections and holes that you will have a leak of coffee, making the mug unusable, so you decide to opt in to fix the imperfections to enjoy your cups of coffee in the long run. Similarly, these imperfections in the mug are like having invalid code, and you know that if you do not fix them, you may have troubles in the future with the many aspects discussed earlier. Therefore, try your best to get your code validated to future proof your website.

Printer Friendly

If your website is content based such as articles, tutorials, and the likes, make sure you create a style sheet specific for printing. The worst thing anyone comes across is printing out a website to only get the header and some bits of text rather than the full text, and less the header and advertisements. Therefore, in order to have open arms to the growth of your website and to not face this printing issue later on, create the style sheet and test it out in many different case scenarios, long or short, wide or not to make sure the desired printing result is what you get every time.

Overall, getting your website prepared for launch may be a long task, but it is worthwhile. While we covered only a few important things you need to make sure you get right before launch, we hope this encouraged you to whip up your own list, and to stick to it when you launch your next website.

There is no topic more currently relevant than designing a web site that is compatible with the iPhone (or, any other mobile device). With the popularity of smart-phones it is now a must for ALL web sites to be ‘mobile-friendly’. This was a topic that was recently brought up on Answers, discussing the best solution for supporting the iPhone. So, what do you think? Do you have a simple solution, tip or answer?

You can leave your thoughts, tips or solutions in the comment section below, or you can leave your answer on the original question on Answers here: What’s the Best Solution for Supporting iPhones?

This question was originally asked by Pablo G.

Here is the best answer, as voted by our users, so far:
From Devone:

From Andrew Miller:

So, what are your thoughts, tips or solutions for supporting the iPhone?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

Have you ever thought of what makes you remember a certain movie or TV show? Of course, it’s the story being told, you’ll say. But what about movies such as Goldfinger, Seven and Snatch? What’s the first thing that comes to mind? We are pretty sure their opening title sequences stick out for many of you.

Today we’ll take a closer look at that short space of time between the moment the lights go down and the first scene of a film, the part that so often sets our expectations of a movie, that sequence that speaks to our creative side: the art of the film title. We’ll look at the evolution of title design and some particularly interesting titles from various periods in the history of cinema and animation.

Film titles can be great fun. In them we see the bond between the art of filmmaking and graphic design — and perhaps visual culture as a whole. They have always served a greater purpose than themselves: to move the overarching story forward. Whether you are a motion graphic designer, a digital artist or a connoisseur of design, we hope you are inspired by these film titles and the ideas they suggest to your own creative endeavors. At the end of this post, you’ll find a listing of relevant typefaces and Web resources.

For this post, we reached out to David Peters, a San Francisco-based designer and media historian who, more than a decade ago, began a project called Design Films to research the subject. David generously contributed to this article.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Titles In Silent Film

Words and lettering played an enormous role in films of the silent era. Film titles made their appearance in the earliest silent films, along with letter cards (or inter-titles), which provided context. These cards were the responsibility of the lettering artist, who collaborated with the scriptwriter and director to create narrative continuity so that audiences could follow what they were seeing. Distinct from these inter-titles was the film’s main title, a vehicle of particular concern to film producers because of the legal, copyright and marketing information this footage had to bear.

Here is the main title from D.W. Griffith’s “Intolerance” (1916), which many reviewers and historians consider the greatest film of the silent era. Note that variations of the director’s name are featured in five ways:

Film titles and letter cards had to provide essential information to the viewer. For reasons such as ease of production and clarity, artists favored mono-stroke letterforms or characters with small serifs. White lettering on a black background is another characteristic of this era, because titles simply looked better this way when projected with live-action B&W film.

The following inter-titles are typical of silent movies. A shot from the comedy The New Janitor (1914) featuring Charlie Chaplin is on the right, and the silent western West of Hot Dog (1924) is on the left:

In addition to hiring lettering artists, the biggest film studios began to employ typesetters in the production of title cards. Among the fonts often adopted for titles and inter-title cards were Pastel (BB&S, 1892), National Old Style (ATF, 1916) and Photoplay (Samuel Welo’s Studio, 1927).

Regardless of the method followed, we see the emergence of typography that seeks to match letterforms with the subject matter and even the zeitgeist — including typefaces inspired by art movements such as art nouveau, art deco and expressionism — as well as the commercial vocabulary of packaging design and advertising.

The main title from the American release of “The Cabinet of Dr. Calligari� (1920) is much less expressive than the title from the influential original German film (restored original version):

The sans-serif title (for a later restored version) of the classic horror film “Nosferatu” contrasts with the art-nouveau treatment of the film’s promotional poster of the time. The font, Berthold Herold Reklameschrift BQ (digitized version) was created by German typesetter Heinz Hoffman in 1904. You can see the original German version of the title still from Nosferatu here.

Animation effects like the ones you see in rotoscopes actually pre-date film. But the power of filmmaking was enormous, and it tempted thousands, including many artists, to try their hand at this new medium. One of the earliest known title animations is seen in the work of J. Stuart Blackton.

“Humorous Phases of Funny Faces” (1906) — video on YouTube — was directed by J. Stuart Blackton, who many consider to be the father of American animation. Not only is it one of the first animated films, it is among the first to feature an animated opening title, making it a precursor of the modern title sequence:

Other important early filmmakers such as Emil Cohl and Winsor McCay were accomplished draftsmen who dedicated years of their lives to discovering the dramatic potential and practical techniques of animation. Their focus was more on character development and story visualization than on title animation per se. So, while we see innumerable novelties in main titles and inter-titles during this period, the big innovations of title animation and motion typography don’t really emerge until well after the Second World War.

The Silence Is Broken

As movies grew more popular, their titles evolved. Movie producers invested considerable sums in film production and sometimes resorted to fixing a dog of a film by rewriting the inter-titles. For a time, “film doctor” Ralph Spence (1890–1949) was the highest-paid title writer in the industry, earning $10,000 a picture for his one-liners.

During the 1920s and ’30s, European cinema was deeply influenced by modernism, and aspects of this visual sensibility were brought to the US by filmmakers who were fleeing the Nazis. Meanwhile, the studio systems operating in Europe and Hollywood also delighted in creating titles that featured vernacular graphic novelties. As much as possible, they liked to convey the tone of a movie through the “dressage” of its main title. Thus, blackletter fonts in the opening credits were used to evoke horror, ribbons and flowery lettering suggested love, and typography that would have been used on “Wanted” posters connoted a western flick.

Here is a title still from the oldest surviving feature-length animated film “The Adventures of Prince Achmed” (Die Abenteuer des Prinzen Achmed) by German animator Lotte Reiniger:

And here is the opening title in the talkie “B” Western Outlaws of Boulder Pass:

Hollywood animation studios, including Warner Brothers and MGM, did give some license to their artists to indulge in title antics. But one can also see that life for the titling crew at Disney was strained by the weight of its foreign-language versions and that film exports rarely encouraged innovation in titling.

The first Mickey Mouse cartoon, circa 1929, features both Mickey and Minnie, but its main title, “Plane Crazy,” is lackluster:

Over time, the very appearance of white-on-black title lettering became a visual trope, recurring as it does in practically every Woody Allen film. Allen relies on the device primarily to build a visual identity, although its economy is a practical advantage, too.

Allen uses the Windsor font for most of his films, as illustrated below in “Annie Hall” (1977). Read more about typography in Allen’s films and also an interesting story about how the renowned director chose this typeface:

The incorporation of audio into movies — making them “talkies” — didn’t revolutionize how film titles were handled, at least not immediately. However, we do see one avant-garde animator and painter of German origin, Oskar Fischinger, give serious thought to the relationship between visual effects and music. Fischinger’s practice of subordinating the visual rhythm to the audio was repeated often in motion graphics and title design.

The concept of score visualization first conceived by Oskar Fischinger in his film “Studies” anticipates the effects created by Saul Bass in “The Man With the Golden Armâ€� (1955) and later by Susan Bradley in “Monsters, Inc” (2001):

The (True) Birth Of The Title Sequence

Breakthrough ideas in titling, such as timing the typography to interact with metaphorical imagery or to create its own world, were largely innovations that came from outsiders to the Hollywood studio system. Figures such as Saul Bass, Pablo Ferro, Maurice Binder and Richard Williams arrived on the scene in the 1950s, at a time when the studios were starting to flounder in their fight with TV. At that time, independent filmmakers made commercial headway by doing things differently, spreading utterly fresh ideas about the possibilities of title sequences. This is the era in which the discipline of film title sequence design was actually born.

Maurice Binder worked on the title designs of 14 films about Agent 007, including the first episode, “Dr. No” (1962). Binder created the famous gun-barrel sequence, which became a signature for the Bond series:

If there were a hall of fame for film title design, Stephen Frankfurt’s sequence for the 1962 film “To Kill A Mocking Bird” (below, upper row) would have a seat of honor. Cameron Crowe referenced it in “Almost Famous” (lower row):

Experimentation on the fringes, where title sequences really thrive, have led to all kinds of innovation in what a title can be and how it can serve the story and the director’s intent. Perceptive directors like Otto Preminger, Alfred Hitchcock, Blake Edwards and Stanley Donen embraced these innovators and gave them the reign to surprise audiences from the opening shots. The Bond films, the Pink Panther series, Barbarella: the sequences for such films became enticing and often sexy popular amusements. By the mid-1960s the top title designers were celebrities in their own right, people who could be relied on to deal with the messy business of credits with playful panache.

Here is a still from the Saul Bass’ title sequence for “North by Northwest,” his first project with director Alfred Hitchcock:

A great draftsman and visual storyteller, Saul Bass ran the gamut of techniques for his title sequences: montage, live action, cut-out paper animation, typography in motion, to name a few. Whatever technique he used, Bass summarized the film as a metaphor that often shone with creativity. (In January 2010, David Peters, Kai Christmann and Dav Rauch, all of Design Films, gave two presentations on the work of Saul Bass at the 12th Future Film Festival in Bologna, Italy.)

In an interview, Kyle Cooper listed three opening sequences that made a big impression on him. Saul Bass’ title sequence for the 1962 film “Walk on the Wild Side” (watch on MySpace) was among them:

It could be argued that typography lost importance in this era of title design. The imagery behind the credits received a lot more attention. Still, the interplay of typography and images was by no means ignored. Popular trends of the 1950s were using three-dimensional lettering and embedding type in physical artifacts such as embroidery and signage. In contrast, Saul Bass often approached the lettering of a main title as he would a logo, making it function as the core element in a full marketing campaign. While the variety of solutions increased considerably, their anchor was always the relationship of on-screen typography to the movie itself.

The power of minimalism is shown in the opening sequence for Ridley Scott’s “Alien” (1979). Credit for this design goes to Richard Greenberg, with creative direction from Stephen Frankfurt:

The main title for the French film classic “Le Dernier Metro” (1980), directed by Francois Truffaut, is austere and modern but has a generic quality not so different from a Woody Allen title:

The Digital Era, And Modern Trends In Film Title Design

Every sphere of contemporary life — and especially the film business — has been affected by computers. For designers, creating film titles meant participating in the apprenticeship tradition — learning by doing, on the job; that continued unabated into the mid-1990s. At that time, dynamic openers by Kyle Cooper and others showed what the next generation of design-educated, film-literate, tech-savvy creatives could do. That apprenticeship tradition has largely been overshadowed by the rise of popular technology, the Internet-enabled archiving of everything and the plethora of schools that propagate countless design disciplines. Most significantly, we see designers working like filmmakers and filmmakers working like designers.

The revolutionary title sequence for “Se7en” (1995) by Kyle Cooper was named by New York Times Magazine as “one of the most important design innovations of the 1990sâ€�:

A consequence of this digital era seems to be that modern title design will forever rely on progressive technologies. Yet, in one of his interviews, Kyle Cooper states that while the power of computer graphics is obvious, he still likes experimenting with live action, because there is something special about the imperfection of making things by hand.

While Cooper was working on the sequence for “Darkness Falls” (2003), some glass he was using suddenly split, and the crack cut across the eyes of a girl in an old picture. The incident added suspense to the effect:

In his title sequence for the 2005 crime-comedy “Kiss Kiss Bang Bang” (watch on YouTube), designer Danny Yount made use of Saul Bass-style graphics to recreate the atmosphere of 1960s detective stories:

The potential of digital graphics and typography has attracted some of the most creative minds to motion design. Pixar and Disney have reserved crucial parts in the branding of their films for the title sequences. Using animated characters to introduce viewers to the story became a popular trend. Such talented graphic designers as Susan Bradley (Toy Story, Monsters, Inc., WALL-E, Ratatouille), Jaimi Caliri (Lemony Snicket’s A Series of Unfortunate Events), Dave Nalle (Corpse Bride), Michael Riley (The Back-Up Plan, Kung Fu Panda) and Michael Curtis (Brother Bear) use all manner of tools to test different approaches to designing titles. One thing these individuals have in common is a drive to find a strong metaphor and tell an exciting story with their sequences.

For the end sequence of “Ratatouille”, Susan Bradley (read an interview with her) drew the typography, inspired by the slab-serif typeface Rockwell. For the opening titles, she used a hand-drawn cursive intended to evoke Paris.

The title sequence for “Thank You for Smoking” (2005) is a modern manifesto on typographic style in title design. The idea for using cigarette packaging for the opening sequence was suggested by the film’s director, Jason Reitman, and implemented by Shadowplay Studios. Typographica goes through the trouble of pointing out the fonts in the sequence:

In the title sequence for “Up in the Air” (2009), the designers at Shadowplay Studios rely on aerial photography:

The title sequence for the 2009 adaptation of the comic book “Watchmen” drew a loud response from the public. It creates an alternate history, depicting the involvement of superheroes in all major events of post-World War II America. The sequence was shot by the film’s director Zach Snyder, while credit for the title’s integration goes to yU+Co:

Conclusion

Throughout the history of cinema, film titles has evolved with the film industry, as well as with social trends and fashion movements. But the measure of a title design’s quality is the same now as it was in the silent era. Whatever function they perform, titles remain an essential part of film.

Granted, in recent years the business of film titling has been terribly strained by the control of producers over commissions and their persistence in demanding speculative work as the price of admission. Creatively speaking, though, as filmmaking consolidates into the most powerful international cultural phenomenon of the 21st century, ingenuity in titling is a certainty. As designers have always known, the opening moments can make a deeply satisfying contribution to any film.

Typography Resources

Below you’ll find links to some downloadable typefaces that were used in or inspired by film titles from cinema history. Please read the legacy notes before downloading.

HPHLS Vintage Prop Fonts

An amazing collection of revived vintage fonts, many of which were used in early cinema. Among them are faces based on the National Old Style, Colwell Handletter and Post Monotone no. 2. Only some fonts can be downloaded for free, although the entire collection is available on CD at an affordable price.

Silentina

The Silentina font family is a great modern take on typography from silent film inter-titles. Designed by Ray Larabie in 2004.

Hitchcock

Hitchcock was created by designer Matt Terich as an homage to the lettering style of the iconic Saul Bass. The font is available as a free download, and you’ll find a selection of other typefaces in the same vein.

Movie/TV Related Fonts

Here is a collection of free fonts styled after the main titles of famous films and TV shows.

Waltograph

Waltograph was created by Justin Callaghan in an attempt to capture the spirit of the familiar Walt Disney signage.

The Disney Font List

On MickeyAvenue.com, Justin Callaghan shares a definitive list of typefaces seen in Walt Disney movies and places.

Meyer 2

Meyer 2, originally drawn in 1926 as one of the five fonts cut by linotype to Louis B. Meyer’s personal specifications, was revived in 1994 by type designer David Berlow.

ITC Korinna

The Korinna font family has an art nouveau heritage and looks similar to the Pastel font, which was often used for title cards in silent films.

Futura Extra Bold

Stanley Kubrick’s favorite typeface.

Gisele

This font looks similar to the one used by Winsor McCay for his 1914 animation Gertie the Dinosaur.

CCMR Mamoulian Blather

A font that recalls the typography in the title of the 1924 animated movie Felix Dopes It Out.

That’s All Folks

Here’s a cheerful Looney Tunes-inspired font family called That’s All Folks

Coolvetica

Coolvetica looks like the sans-serif typeface in the title sequence for Catch Me If You Can (2002).

Resources And Reference Material

The Art of the Title Sequence

A comprehensive and authoritative resource on film and television title design from around the world. Plenty of excellent designs and material available.

Forget the Film, Watch the Titles

One of the first online resources dedicated to film title design. You’ll find a lot of amazing examples, reviews and interviews with the experts.

Title Design Project

In this showcase gallery are title sequences from both classic and recent movies.

Movie Title Stills Collection

A large and diverse collection of film title stills from between 1920 to the present.

Taking Credit: Film Title Sequences, 1955–1965

An essay by a London-based writer and curator with an interest in graphic design, Emily King.

Letters of Introduction: Film Credits and City Scapes

This essay covers the textuality of film credit sequences and their relationship to the expressiveness of urban life.

Credits

I’d like to thank David Peters, who kindly agreed to contribute content as well as references to this article. David is the founder and director of DESIGN FILMS, a team of creatives committed to researching, collecting and presenting film programs about design, typography and film history. David is also a principal and design strategist at the communication design firm EXBROOK.

(al)

© Julia May for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: credits, film, movie, title