I joined Jamie Ashbrook and Ben Briggs to talk about SVG and tooling and whatnot.

Direct Link to Article — Permalink

CDNify Podcast is a post from CSS-Tricks

Whenever I’m working with a new client, the first question I ask them is what they want their website to do for them.

Often, they don’t know. They just think a website is something they should probably have. Because other businesses have them.

But a website is an investment, of both time and money, and from a business perspective, it won’t be a smart one unless you know exactly what to expect out of your investment.

Knowing what we need a website to achieve right from the start is crucially important to the entire project.

It helps us maximize our conversion rates.

It helps us develop a unified design direction.

It helps us make good, logical decisions throughout the entire process.

It helps us communicate our message more clearly with our teammates, our clients and our site users.

In this article, we will talk about objectives-driven design.

Types of Website Objectives

We could classify site objectives into two types:

1. High-level objectives
2. User-interaction objectives

These objectives must be identified at the start of website projects.

Identifying High-level Objectives

High-level objectives are the things you want to get out of having a site. How will the website contribute to the bottom line of the business?

Examples of high-level objectives can be:

• Selling a product or set of products either on-site or a third-party marketplace
• Generating ad revenue through great content that people want to read
• Convincing people to subscribe or sign up for a web service or membership
• Getting people to donate to your non-profit organization
• Increasing people’s awareness of the business
• Persuading people to contact the site owner via phone, email and/or a web form

High-level objectives will drive the entire website production process.

Identifying User-interaction Objectives

After we identify high-level objectives of a site, we are ready to develop specific user-interaction objectives.

User-interaction objectives are specific things we would like people to do on our site.

Our user-interaction objectives should be purposeful. They should, directly or indirectly, lead to the achievement of our high-level objectives.

We can categorize user-interaction objectives into two types:

• Primary user-interaction objective
• Supportive user-interaction objective

Primary User-interaction Objective

A primary user-interaction objective is any interaction that will almost always count towards achieving our high-level objectives.

For example, a user clicking on a "sign up" button is a primary user-interaction objective because it is a direct action towards our high-level objective of acquiring more users.

Supportive User-interaction Objectives

Some people might not be ready to perform primary user-interaction objectives. They might need to see more persuasive content in order to get them to sign up, for example.

That’s where supportive user-interaction objectives come into play.

They are like a safety net for us: If the person isn’t ready to take the primary user-interaction user-flow, then we provide them with alternative options that may eventually lead to it.

An example of a supportive user-interaction objective is a person to clicking on a "learn more" link where they can read about the features of the product, key benefits, see a demo video and other persuasive material that may eventually lead to them clicking on the "sign up" button.

Examples of User-interaction Objectives

Here are a few examples of user-interaction objectives:

How It All Ties Together

Here is how all the types of website objectives work together:

Objectives-driven Design in Action

Let us look at some objectives-driven designs to gain a better understanding of the concept.

In each example, see how specific design techniques like color choices, object sizing, visual hierarchy, groupings, and so forth inform us clearly what the objectives are.

Example 1: Dropbox

Example 2: Barack Obama

Barack Obama’s site is another example of an objectives-driven design.

Example 3: Treehouse

Treehouse is a site that provides online web design courses. Let’s see how objectives-based design is achieved in this example.

Example 4: Invision

We can see the same design pattern we saw on Treehouse’s site on Invision’s home page.

Example 5: Keep SA Real

Keep SA Real is an online store that sells apparel.

Implementing Objectives-driven Design

We have gone over the basics of objectives-driven design as well as a few examples where we can see the idea in action.

Now, let’s go over some of the things you can do in order to use the concept in your projects.

Integrate an Objectives Identification Phase in Your Design Process

A good project workflow should always start by identifying key objectives. And when doing so, give it the time it deserves.

Make the identification phase an official part of the process and have guidelines that will help you tease out objectives.

Then get sign-off from all the people involved so that everyone’s on the same page.

Write down the key objectives and regularly refer to them. Use them to back up your design and development decisions.

If you need some ideas for this, read the following:

• A 6-Step General Process for Producing a Website
• The Secret to Building Large Websites: Website Architecture
• How to Create Content Maps for Planning Your Website’s Content
• Planning Your E-Commerce Website

Use Objectives-driven Design Methods to Your Advantage

There are many tricks-of-the-trade techniques you can use to help you design with objectives in mind.

Most of them will help you better arrange your layouts in order to emphasize on your key objectives.

Here are some design techniques and concepts that help with objectives-driven design:

• Creating focal points
• The art of distinction
• Visual weight
• Visual hierarchy
• Fitts’s law
• Reductionism
• Gestalt psychology

Keep It Simple

A basic principle that should be followed throughout the process of objectives-based design is to keep it simple.

Simplicity ensures that we don’t clutter our layouts with things that can derail our users from our key objectives.

In addition, too many options can lead to decision-paralysis. Look back to the examples we discussed to see how keeping it simple works for objectives-driven design. They all have a limited set of actions you can take.

These articles on the topic will help you keep things simple:

• Minimalism in Web Design: A Guide
• Deconstructing Minimalist Landing Pages
• "Undesign" Your Portfolio Website
• Minimalist Web Design: How Minimal is Too Minimal?

Conclusion

Having clear objectives of what you want a website to do for you is a critical step towards its success.

Once you know what your objectives are, you can design the entire site in a way that helps fulfill them.

Related Content

• Human Behavior Theories That Can be Applied to Web Design
• 5 Web Files That Will Improve Your Website
• An Exploration of Website Redesigns
• Related categories: User Interface and User Experience

About the Author

Rachel McCollin is a freelance web designer specializing in WordPress and responsive design. She’s written three books on WordPress. Connect with her on Twitter @rachelmccollin and visit her site at rachelmccollin.co.uk.

The post Designing for Your Objectives appeared first on Six Revisions.

New projects are released all the time that get us excited about the industry we work in. Each month we bring you a list of the very best free resources for the month ahead.

This month’s huge new list of diverse elements for designers and developers includes some fantastic freebies for mobile, web and print work; it includes cool scripts, awesome fonts, great ideas, and must-see experiments.

Whether you’re a designer, developer, or enthusiast we’re sure you’ll find something here to kick-start April with a bang!

Atom.io

Highly customizable text editor.

Campton

A modern and neutral type family.

jQuery TableNav

A jQuery plugin to navigate cells with arrow keys.

Bushwick

Lightweight theme for personal blogs.

Type-finder

An online tool to find an appropriate and reputable typeface for all your projects.

Shadowpainter

A tool to make animations using box-shadows.

Durandal

An SPA framework to create all kinds of apps.

RRSSB

A package of highly responsive social buttons.

Farray

An all caps font with strong characters for display.

iOS7 icons

A pack of 100 icons iOS app style icons.

Tiff

Web tool that helps you spot the differences between 2 Google fonts.

Glyphr Studio

HTML5 based font editor.

Lupercalia

Simple customized theme for WordPress.

jQuery.checkradios

Lightweight plugin to create checkboxes and radio buttons with no images.

Simple stack effects

Simple stack effects for inspiration and tutorial.

Disclaimer

A monospace display font in 2 styles.

isInViewport.js

Light plugin that detects if an element is within the viewport.

Sheetrock

jQuery plugin to retrieve and display data from Google spreadsheets.

Onetone

Simple onepage theme aimed at creatives and businesses.

Codemagic.gr

A web tool to create code experiments.

Plunker

An online community to create and collaborate in development projects.

YourBrowser.Is

A web tool that gives you a very complete report about your browser.

Novito Nova

A nice all caps font with Latin and Cyrillic character support.

Glitchy 404 Page

An original 404 template with a static screen background.

Flat preloaders

A set of colorful flat preloaders in various formats.

Radial menu

Nicely animated CSS radial menu.

Clear Sans

Modern and versatile font with good legibility.

Metalsmith.io

Pluggable static site generator.

MVCSS

Sass based CSS architecture to create maintainable application styles.

HTML5 banner

An animated interactive banner made in HTML5 and CSS3.

Csspinner

CSS loading animations with very little effort required.

ScrollMagic

A very complete jQuery plugin for cool scrolling animations.

F7

A powerful HTML framework for iOS 7.

Identity mockup

A realistic 3D mockup to show off your branding with style.

Fruithealth

A 2 column WordPress theme for health and nutrition sites.

Tabbar menu

An iOS7-like menu with nice animations.

Govpress

WordPress theme for government sites.

Linia

Modern theme for blogs.

Rotation & background experiment

An amazing experiment using only CSS and JS.

RegExr

Write and test regular expressions.

Vibration API

API for web pages to allow mobile devices vibrate.

Luzern

A modern sans serif typeface in 2 styles.

Movie app UI

A responsive interface best suited to showcase movies and similar.

Embed

A PHP service to embed any webpage or service.

Clip path carousel

Using clip-path to transition between carousel items.

Pikabu

A framework for flyout canvas panels.

Fait Main 1

Vintage handwriting font for headlines and badges.

McKinley

One column theme for bloggers.

Stickynavbar.js

A plugin to stick your navigation bars to the top of the browser.

Vintage badges

100 fully editable badges with a colorful retro style.

Learn from Usability Masters with Everyday UX – only $9!