Project DesignProject Design

Vision for DesignVision for Design

Your client has a motivation, a vision, a Your client has a motivation, a vision, a passion and has requested you build a passion and has requested you build a website to assist in fulfilling their vision.website to assist in fulfilling their vision.

You have to get on board with the client’s You have to get on board with the client’s motivation, vision, and passion or nothing motivation, vision, and passion or nothing great is going to happen.great is going to happen.

What is the Design Phase?What is the Design Phase?

Three components of website design:Three components of website design: Functional designFunctional design – what function/tasks will – what function/tasks will

the user perform at the website?the user perform at the website? Technical designTechnical design – what computers, browsers, – what computers, browsers,

bandwidth, plug-ins will users have or need?bandwidth, plug-ins will users have or need? User interface and visual designUser interface and visual design – how will – how will

the user navigate the site and what will be their the user navigate the site and what will be their impression of the company?impression of the company?

Designing with Marketing in MindDesigning with Marketing in Mind

The internet audience has a The internet audience has a problem.problem.

Your site offers ideas and Your site offers ideas and information that promises a information that promises a desired solution to their desired solution to their problems.problems.

Seeking answers to problemsSeeking answers to problems

What our prospects are What our prospects are looking for is the promise looking for is the promise of a solution to a nagging of a solution to a nagging problem or predicament. problem or predicament.

What they want What they want information about is how information about is how that problem or that problem or predicament can be predicament can be resolved.resolved.

Marketing: It’s not about YOU!Marketing: It’s not about YOU!

The ME oriented website is always focused on The ME oriented website is always focused on what YOU have to offer to their clients.what YOU have to offer to their clients.

Focus instead on a solution for your Focus instead on a solution for your

customer’s problems, needs or wants. customer’s problems, needs or wants.

People seek service for themselves!People seek service for themselves!

People who visit a website SEEK SERVICE People who visit a website SEEK SERVICE FOR THEMSELVES (SOLUTIONS AND FOR THEMSELVES (SOLUTIONS AND BENEFITS). BENEFITS).

The best websites are based on service – they The best websites are based on service – they offer wanted information – offer wanted information – approach approach everything from the audiences’ point of view.everything from the audiences’ point of view.

How do you hit a home run?How do you hit a home run?

What is the Most Wanted Response of your What is the Most Wanted Response of your client for his/her websiteclient for his/her website? ?

First Base – Get Attention and generate First Base – Get Attention and generate interest. interest.

Tell people what they’ll get.Tell people what they’ll get. Focus on their problems, your results, Focus on their problems, your results,

product benefits, and problem/solution product benefits, and problem/solution stories.stories.

Features vs Benefits for Skin CareFeatures vs Benefits for Skin Care

Reduces wrinklesReduces wrinkles Comes in an easy to use Comes in an easy to use

home care kithome care kit pH balancedpH balanced

Makes you look Makes you look youngeryounger

Easy to use at home,Easy to use at home, Gentle on your skin,Gentle on your skin,

Benefits within the benefit - If it makes you look younger, then it means you’ll be more attractive, you’ll get that promotion at work, you’ll feel more confident, nobody will guess your age, you’ll fall in love all over again or you’ll be able to attract that person that you want.

Second Base ObjectiveSecond Base Objective

You want to build a case for your solution. You want to build a case for your solution. BUILD CREDIBILITY AND TRUST.BUILD CREDIBILITY AND TRUST.

Testimonials – question and answers section Testimonials – question and answers section of a website can help build credibility and of a website can help build credibility and trust.trust.

Third Base ObjectivesThird Base Objectives

You present ideas and solutions to You present ideas and solutions to customers with persuasive copywriting.customers with persuasive copywriting.

Getting from the third base to home plate Getting from the third base to home plate involves negotiation and wrapping up the involves negotiation and wrapping up the deal.deal.

Home PlateHome Plate

Win-win contract or agreement, purchase Win-win contract or agreement, purchase or donation. or donation.

Don’t skip bases. Don’t skip bases. Dugout Objectives - perform great for the Dugout Objectives - perform great for the

client.client.

Design PhaseDesign Phase Topics/ tactics are Topics/ tactics are

determined by building determined by building on the information on the information gained in the analysis gained in the analysis phase. phase.

During the design During the design phase, detailed content phase, detailed content is identified, chunked is identified, chunked and sequenced. and sequenced.

Usability Testing Usability Testing strategies are planned. strategies are planned.

Perception or BrandingPerception or Branding

Use a few adjectives to Use a few adjectives to describe how the user should describe how the user should perceive the new site. (Ex: perceive the new site. (Ex: prestigious, friendly, prestigious, friendly, corporate, fun, forward-corporate, fun, forward-thinking, innovative, cutting thinking, innovative, cutting edge, etc.) edge, etc.)

List any URLs of sites you List any URLs of sites you find compelling. What find compelling. What specifically do you like about specifically do you like about these sites?these sites?

Branding?Branding?

Remember branding includes:Remember branding includes: Strong impression of the user.Strong impression of the user. Logo.Logo. Company Name.Company Name. Product Benefits, customer service, and price.Product Benefits, customer service, and price.

Emotional Satisfaction!Emotional Satisfaction!

http://www.uie.com/articles/branding_usability/ - - Branding Branding means creating an emotional association (such means creating an emotional association (such as the feeling of success, happiness, or relief) as the feeling of success, happiness, or relief) that customers forms with the product, service, that customers forms with the product, service, or company. or company.

eBay's most important aspect was the fact that eBay's most important aspect was the fact that users consistently found interesting stuff users consistently found interesting stuff quickly and easily. Its presentation is far less quickly and easily. Its presentation is far less important to user success.important to user success.

Branding or PerceptionBranding or Perception

How is the company currently perceived How is the company currently perceived offline? Do your client wish to carry through offline? Do your client wish to carry through the same kind of message through the web the same kind of message through the web site?site?

Branding or Perception Branding or Perception

How does your company differentiate itself How does your company differentiate itself from competitors? from competitors?

Does the current audience differentiates the Does the current audience differentiates the site from the competition? site from the competition?

Design Projects:Design Projects:

Develop Develop interface/screen design interface/screen design (color, text, navigation)(color, text, navigation)

Create Design Comps of Create Design Comps of Navigational Structure, Navigational Structure, etc.etc.

Build Prototype.Build Prototype.

Types of PrototypingTypes of Prototyping

Paper Prototypes (paper-based rendering of Paper Prototypes (paper-based rendering of the screens)the screens)

Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder

Pseudoprogram or "shell": First version of Pseudoprogram or "shell": First version of the presentation with rough graphics in place the presentation with rough graphics in place or a demonstration version in an authoring or a demonstration version in an authoring system.system.

Prototype Advantage: VisualizingPrototype Advantage: Visualizing

Visualizing: with a prototype (only by creating Visualizing: with a prototype (only by creating a scale model of the application), you can get a a scale model of the application), you can get a mental image of how it will look and work on mental image of how it will look and work on screen what has been designed on paper.screen what has been designed on paper.

Usability TestingUsability Testing

User feedback: prototype is User feedback: prototype is invaluable tool to put in front invaluable tool to put in front of potential users focus of potential users focus groups and individual groups and individual interviews for interviews for usability usability testing.testing.

Based on user feedback Based on user feedback generated by prototype, it generated by prototype, it becomes apparent that the becomes apparent that the application is not as useful or application is not as useful or salable as expected and that salable as expected and that perhaps the project should be perhaps the project should be canceled.canceled.

Changes of Prototype?Changes of Prototype?

You can change the prototype because it's a You can change the prototype because it's a good way to validate the design of the good way to validate the design of the system. system.

Prototypes also allow you to identify Prototypes also allow you to identify problems that were not though of during the problems that were not though of during the analysis phase and new solutions can be analysis phase and new solutions can be chosen to address those issues. chosen to address those issues.

Assignment: Design CompsAssignment: Design Comps

Create Design Comps– Each person in each Create Design Comps– Each person in each team will create 2 totally different designs for team will create 2 totally different designs for the group’s home page and a sub page.the group’s home page and a sub page.

Create the Design Comps in Photoshop with a Create the Design Comps in Photoshop with a file size of 955 by 600. This is equal to the file size of 955 by 600. This is equal to the current web page size of 1024 by 768.current web page size of 1024 by 768.

Due by Friday, March 7Due by Friday, March 7ndnd..

Design CompsDesign Comps Use Photoshop to create one homepage and one subpage for each design layoutUse Photoshop to create one homepage and one subpage for each design layout

Introduce a color scheme for site; include a logoIntroduce a color scheme for site; include a logo

Include a slogan if one is neededInclude a slogan if one is needed

Composition should include buttons or navigational elementsComposition should include buttons or navigational elements

Use greeking for text, placeholders for images Use greeking for text, placeholders for images

Create a webpage with link on the team website for comps - add all team member Create a webpage with link on the team website for comps - add all team member images to comps webpage as .jpg images. Can use web gallery in Photshop instead images to comps webpage as .jpg images. Can use web gallery in Photshop instead of webpage, if images are altered to a larger size for better viewing by the client. of webpage, if images are altered to a larger size for better viewing by the client.

Comp Sites on Website

Design CompsDesign Comps

Design comps for the home page will show the Design comps for the home page will show the design, text, and colors, company name, logo, design, text, and colors, company name, logo, slogan or tagline and navigation.slogan or tagline and navigation.

To Complete Design PhaseTo Complete Design Phase Drawing up the Project Plan for the Design Drawing up the Project Plan for the Design

PhasePhase Specify web site structure and content – Specify web site structure and content –

marketing plan, comps, prototype.marketing plan, comps, prototype. Define technologies - xhtml, css, Flash, Define technologies - xhtml, css, Flash,

Video, Audio - to be used Video, Audio - to be used Tweak time frame for completion of the Tweak time frame for completion of the

project project Submit Project Plan to the client for approval Submit Project Plan to the client for approval

and finalization. Formal agreement is then and finalization. Formal agreement is then signed with the client signed with the client

  

Now to Discovery…Now to Discovery…

Working through the phases of analysis and Working through the phases of analysis and design (or Discovery, Exploration & design (or Discovery, Exploration & Refinement ) is a vitally important part of the Refinement ) is a vitally important part of the web design and development.web design and development.