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!

Developers and designers are now building apps for Google’s smart watch platform.

The designers of the forthcoming Moto 360 hope they’ve passed a fashion test. In contrast to the often bulky and boxy smart watches released to date (see “Smart Watches Need a Makeover, and a Shrink Ray”), their device is sleek and perfectly round, evoking the style of a classic analog wristwatch.

It’s Tuesday, which means that the Treehouse Show is back! In episode 83 of The Treehouse Show, Nick and Jason (@jseifer) talk about a sweet new icon set, web shims for backporting functionality to previous browsers, and jQuery coding standards. They also bring out the usual bad puns and poor jokes.

This Week’s Links

• Iconic

• First Time User Experiences

• Webshim

• Wirefy

• jQuery Coding Standards and Best Practices

• Random User Generator | FREE Photoshop Extension

• ScrollMagic – Demo

• The Gamepad API ✩ Mozilla Hacks – the Web developer blog

The post Web Icons | Webshims | jQuery Coding Standards | The Treehouse Show Episode 83 appeared first on Treehouse Blog.

Through our PROMISE AGEP collaborations with the World Engineering Education Forum (WEEF), and the Student Platform for Engineering Education Development (World SPEED), you are being invited to apply for  MIT’s “Education DesignShop”  the sponsored by MIT’s Office of Digital Learning. The program is slated to employ “design thinking” and “user-centered design” to address three distinct topics:

1) Curriculum Re-Design for STE(A)M – Science, Technology, Engineering, (Arts), and Mathematics

2) Motivational Structures In & Out of the Classroom

3) Resources and Support Structures for Retention & Diversity

Slots are limited. This program is free. The leader of the program has asked that we encourage you to apply. They learned about PROMISE at the 2013 WEEF Conference in Cartagena, Colombia, and through meetings of the International Federation of Engineering Education Societies.

This is a unique opportunity to “think outside of the box” and have some, new, and different experiences. Please apply:

http://edudesignshop.mit.edu/apply.html.

_________________________________

Related: 

About WEEF 2014: http://weef2014.org/

Through our PROMISE AGEP collaborations with the World Engineering Education Forum (WEEF), and the Student Platform for Engineering Education Development (World SPEED), you are being invited to apply for  MIT’s “Education DesignShop”  the sponsored by MIT’s Office of Digital Learning. The program is slated to employ “design thinking” and “user-centered design” to address three distinct topics:

1) Curriculum Re-Design for STE(A)M – Science, Technology, Engineering, (Arts), and Mathematics

2) Motivational Structures In & Out of the Classroom

3) Resources and Support Structures for Retention & Diversity

Slots are limited. This program is free. The leader of the program has asked that we encourage you to apply. They learned about PROMISE at the 2013 WEEF Conference in Cartagena, Colombia, and through meetings of the International Federation of Engineering Education Societies.

This is a unique opportunity to “think outside of the box” and have some, new, and different experiences. Please apply:

http://edudesignshop.mit.edu/apply.html.

_________________________________

Related: 

About WEEF 2014: http://weef2014.org/

What’s more fun than photo-bombing?

How about learning to build a mobile app that displays your favorite forays into photography mischievousness?

Not into photo-bombing? How about cute puppy photos? Family vacation shots? Your vast collection of selfies?

If so, guest teacher Sam Soffes has a course for you: Learn to build an iOS photo browsing app from scratch. You’ll discover invaluable skills that’ll help you in all your mobile development and design work.

If you’re interested in building this app or learning more about collection views and control transitions, sign up for a Treehouse account today. We’ll teach you from start to finish.

Check out the course preview.

Sam spoke with Treehouse this week about the course and the skills students will use. He also has insights on the benefits of collaborating on iOS apps, whether you should write pure code or use Interface Builder, and other important strategies to consider when you’re building your own photo-browsing app.

Treehouse: What are some of the important top-level skills students will learn while taking this course?

Sam: You’ll learn about collection views and using physics, and you’ll control transitions and networking. All that is important stuff, especially networking and collection views. Those are key. Almost every mobile app is connected to the Internet some way or another. Learning how to do that and understanding how it works is important.

Can you address why you didn’t use Apple’s Interface Builder and why it’s all code?

I wrote a post on the Treehouse blog a while ago on why I don’t use Interface Builder. And there are a bunch more reasons than I listed in my post. I think it’s important to understand how everything works and not just being told to click checkboxes here and there. Understand how it works by seeing the code. I thought it was important to show the other side of how to do it. It comes down to preference. This is how I prefer to work so that’s how I decided to teach the course if I were to build it for real on my own. Hopefully, it’s useful to watch that.

Someone said, “Oh, should I redo everything I’ve done in code now?” No, there’s no sense in redoing for the sake of redoing it unless you want to redo it for the sake of learning. It was more to show another approach of how to do things.

Does your approach make students better at learning mobile app development?

I think so. Almost everyone I’ve worked in my career has done it without Interface Builder and storyboards. This is a pretty common pattern. Most people prefer to not use it. It’s easier to work with a team without using storyboards or Interface Builder because code is easier to collaborate on than a crazy file from Apple.

Seeing how more real-world applications are built is important. That was my goal all along: Make something that is as close to a real-world application as possible and make something useful.

One of the ideas behind the course is this: “Let’s make this app together.” When is collaboration a good thing when developing an app, and when should you strike out on your own?

It depends on what you’re making. The key to working with someone else is having a good way to separate what everyone is working on: “This person is going to do all the networking stuff. And this person is going to do all the visual stuff.”

Having a clear understanding of responsibilities and separation makes things work a lot more smoothly than having everyone dive in and fight over the fun tasks. Split it up in a way that makes sense. That has worked well for me in the past.

What are the benefits to working on your own on mobile apps?

If you have an idea, you can just try it instead of worrying, “Will this slow anyone down because I am going to try some crazy stuff and I may break something?” It’s nice to have that freedom sometimes.

But if you’re working with someone else, one of the biggest benefits is it keeps you motivated. If you’re just working on some app by yourself on the weekends, it’s easy to get distracted or lose interest. Learning how to work well with someone else on mobile apps is an important skill to have, especially if you want to take your Treehouse skills and get a job. Learning how to work with a team is essential.

We’ve all heard the cliché: There’s an app for that. But there can’t be an app for everything — just yet. What are some offbeat or practical uses for which you’ve thought: “There should be an app for this!” or something that has sparked your imagination?

Recently, coming up with something that is good at scoring board games is something I’ve been thinking about. It’s kind of an obscure thing. Surely there is something for that, but I haven’t found anything that I was like, “This is awesome.” I was trying to think of a calculator that is more abstract for counting and not necessarily for doing actual math.

I think it’s interesting to think about something you’re doing that is tedious — like trying to count things on a board game or figuring out what kind of food you can eat on a particular diet. If it’s something you have to think about for a while, maybe you can make something to make [the process] better.

That’s usually my thought-process around any product that I want to work on: What’s something I’m struggling with and how can I make something to solve that?

The post Q&A With Sam Soffes: Learning How to Make an iPhone Photo-Browsing App appeared first on Treehouse Blog.