Project Design

Vision for Design Your client has a motivation, a vision, a passion and has requested you build a website to assist in fulfilling their vision. Your client has a motivation, a vision, a passion and has requested you build a website to assist in fulfilling their vision. You have to get on board with the client’s motivation, vision, and passion or nothing great is going to happen. You have to get on board with the client’s motivation, vision, and passion or nothing great is going to happen.

What is the Design Phase? Three components of website design: Functional design – what function/tasks will the user perform at the website? Functional design – what function/tasks will the user perform at the website? Technical design – what computers, browsers, bandwidth, plug-ins will users have or need? Technical design – what computers, browsers, bandwidth, plug-ins will users have or need? User interface and visual design – how will the user navigate the site and what will be their impression of the company? User interface and visual design – how will the user navigate the site and what will be their impression of the company?

Designing with Marketing in Mind The internet audience has a problem. The internet audience has a problem. Your site offers ideas and information that promises a desired solution to their problems. Your site offers ideas and information that promises a desired solution to their problems.

Seeking answers to problems What our prospects are looking for is the promise of a solution to a nagging problem or predicament. What our prospects are looking for is the promise of a solution to a nagging problem or predicament. What they want information about is how that problem or predicament can be resolved. What they want information about is how that problem or predicament can be resolved.

Marketing: It’s not about YOU! The ME oriented website is always focused on what YOU have to offer to their clients. The ME oriented website is always focused on what YOU have to offer to their clients. Focus instead on a solution for your customer’s problems, needs or wants. Focus instead on a solution for your customer’s problems, needs or wants.

People seek service for themselves! People who visit a website SEEK SERVICE FOR THEMSELVES (SOLUTIONS AND BENEFITS). People who visit a website SEEK SERVICE FOR THEMSELVES (SOLUTIONS AND BENEFITS). The best websites are based on service – they offer wanted information – approach everything from the audiences’ point of view. The best websites are based on service – they offer wanted information – approach everything from the audiences’ point of view.

How do you hit a home run? What is the Most Wanted Response of your client for his/her website? What is the Most Wanted Response of your client for his/her website? First Base – Get Attention and generate interest. First Base – Get Attention and generate interest. Tell people what they’ll get. Tell people what they’ll get. Focus on their problems, your results, product benefits, and problem/solution stories. Focus on their problems, your results, product benefits, and problem/solution stories.

Features vs Benefits for Skin Care Reduces wrinkles Reduces wrinkles Comes in an easy to use home care kit Comes in an easy to use home care kit pH balanced pH balanced Makes you look younger Makes you look younger 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 Objective You want to build a case for your solution. BUILD CREDIBILITY AND TRUST. You want to build a case for your solution. BUILD CREDIBILITY AND TRUST. Testimonials – question and answers section of a website can help build credibility and trust. Testimonials – question and answers section of a website can help build credibility and trust.

Third Base Objectives You present ideas and solutions to customers with persuasive copywriting. You present ideas and solutions to customers with persuasive copywriting. Getting from the third base to home plate involves negotiation and wrapping up the deal. Getting from the third base to home plate involves negotiation and wrapping up the deal.

Home Plate Win-win contract or agreement, purchase or donation. Win-win contract or agreement, purchase or donation. Don’t skip bases. Don’t skip bases. Dugout Objectives - perform great for the client. Dugout Objectives - perform great for the client.

Design Phase Topics/ tactics are determined by building on the information gained in the analysis phase. Topics/ tactics are determined by building on the information gained in the analysis phase. During the design phase, detailed content is identified, chunked and sequenced. Usability Testing strategies are planned. Usability Testing strategies are planned.

Perception or Branding Use a few adjectives to describe how the user should perceive the new site. (Ex: prestigious, friendly, corporate, fun, forward- thinking, innovative, cutting edge, etc.) List any URLs of sites you find compelling. What specifically do you like about these sites?

Branding? 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! - Branding means creating an emotional association (such as the feeling of success, happiness, or relief) that customers forms with the product, service, or company. - Branding means creating an emotional association (such as the feeling of success, happiness, or relief) that customers forms with the product, service, or company. eBay's most important aspect was the fact that users consistently found interesting stuff quickly and easily. Its presentation is far less important to user success. eBay's most important aspect was the fact that users consistently found interesting stuff quickly and easily. Its presentation is far less important to user success.

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

Branding or Perception How does your company differentiate itself from competitors? How does your company differentiate itself from competitors? Does the current audience differentiates the site from the competition? Does the current audience differentiates the site from the competition?

Design Projects: Develop interface/screen design (color, text, navigation) Develop interface/screen design (color, text, navigation) Create Design Comps of Navigational Structure, etc. Create Design Comps of Navigational Structure, etc. Build Prototype. Build Prototype.

Types of Prototyping Paper Prototypes (paper-based rendering of the screens) Paper Prototypes (paper-based rendering of the screens) Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder Streamlining the Design Process with Paper Prototyping: An Interview with Carolyn Snyder Pseudoprogram or "shell": First version of the presentation with rough graphics in place or a demonstration version in an authoring system. Pseudoprogram or "shell": First version of the presentation with rough graphics in place or a demonstration version in an authoring system.

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

Usability Testing User feedback: prototype is invaluable tool to put in front of potential users focus groups and individual interviews for usability testing. User feedback: prototype is invaluable tool to put in front of potential users focus groups and individual interviews for usability testing. Based on user feedback generated by prototype, it becomes apparent that the application is not as useful or salable as expected and that perhaps the project should be canceled. Based on user feedback generated by prototype, it becomes apparent that the application is not as useful or salable as expected and that perhaps the project should be canceled.

Changes of Prototype? You can change the prototype because it's a good way to validate the design of the system. Prototypes also allow you to identify problems that were not though of during the analysis phase and new solutions can be chosen to address those issues.

Assignment: Design Comps Create Design Comps– Each person in each team will create 2 totally different designs for the group’s home page and a sub page. Create Design Comps– Each person in each team will create 2 totally different designs for the group’s home page and a sub page. Create the Design Comps in Photoshop with a file size of 955 by 600. This is equal to the current web page size of 1024 by 768. Create the Design Comps in Photoshop with a file size of 955 by 600. This is equal to the current web page size of 1024 by 768. Due by Friday, March 7 nd. Due by Friday, March 7 nd.

Design Comps Use Photoshop to create one homepage and one subpage for each design layout Use Photoshop to create one homepage and one subpage for each design layout Introduce a color scheme for site; include a logo Introduce a color scheme for site; include a logo Include a slogan if one is needed Include a slogan if one is needed Composition should include buttons or navigational elements Composition 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 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. 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 of webpage, if images are altered to a larger size for better viewing by the client.

Comp Sites on Website Comp Sites on Website

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

To Complete Design Phase Drawing up the Project Plan for the Design Phase Drawing up the Project Plan for the Design Phase Specify web site structure and content – marketing plan, comps, prototype. Specify web site structure and content – marketing plan, comps, prototype. Define technologies - xhtml, css, Flash, Video, Audio - to be used Define technologies - xhtml, css, Flash, Video, Audio - to be used Tweak time frame for completion of the project Tweak time frame for completion of the project Submit Project Plan to the client for approval and finalization. Formal agreement is then signed with the client Submit Project Plan to the client for approval and finalization. Formal agreement is then signed with the client

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