Refinement Production Implementation Design and Development Stages.

Slides:



Advertisements
Similar presentations
Usability Prepared by: The NYS Forum for Information Resource Management IT Accessibility Committee.
Advertisements

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Creating web content What types of content do you use on your websites? Websites use multimedia content – images (photos or graphics), text and video.
Usability Information Systems 337 Prof. Harry Plantinga.
Interface Design 2 Week 10. Interface Design 2 :: Week 10 :: Calendar.
Ten Guidelines for Improving Online Communications.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Assignment 1 Pointers ● Be sure to use all tags properly – Don't use a tag for something it wasn't designed for – Ex. Do not use heading tags... for regular.
Website: Best Practices. Sources: The World Wide Web Consortium the main international standards organization for the World Wide Web Research-Based Web.
HCI 201 Week 5 Loose Ends. Agenda Image stuff Image stuff File stuff File stuff Bandwidth Bandwidth UNIX UNIX HTML HTML Design elements Design elements.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Planning and Designing a Website Session 8. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
Creating a Web Site Back to Table of Contents. Creating a Web Site Conceiving a Web Site Planning a Web Site 2 Creating a Web Site Section 9-1 Section.
Accessible Word Document Training Microsoft Word 2010.
Welcome to Our Website Comments and Suggestions Welcomed! Presented by: Vicky Green.
Paper Prototyping Source:
Chapter 14 Web Design © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
Designing for the Web 7 Useful Design Principles.
Creating a Simple Page: HTML Overview
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
What Is the Internet? The Internet is a worldwide collection of computer networks that links together millions of computers used by businesses, the government,
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Week 2 Web Site Design Principles. 2 Design for the Computer Medium Craft the look and feel Make your design portable Design for low bandwidth Plan for.
Web Development Life Cycle from Beginning to End…and BEYOND!
Lecturer: Roxanne Bloomfield Chevanese Y. Campbell.
Chapter 18 Web Design April 16 th & 17 th. Content The most essential element of any Web page is the content Before you begin a Web page you want to know.
Web Technologies Website Development Trade & Industrial Education
Project Proposal Interface Design Website Coding Website Testing & Launching Website Maintenance.
Mastering the Internet, XHTML, and JavaScript Web Design.
What is Multimedia?. Today’s objectives Define multimedia Work with XHTML Work with CSS.
1. 2 OVERVIEW First Impressions Content Purpose Design Distinction Closing.
Website Publishing Guidelines How to write website content to optimise traffic.
Developing Content and Layout Lesson 6. Creating Web Site Content Online users scan a page, read key words of text, and check out graphics Reading from.
Website Development with Dreamweaver
CREATING AND SHAPING Web Page Design Chapter 2. Text Matters  Even though when thinking about building Web pages people think of design first, the heart.
An Introduction To Websites With a little of help from “WebPages That Suck.
Creating a Usable Web Site Royce Shin - Web Development University of Minnesota.
Good Web Design. The Four A’s of Good Design Accessible Accurate Appropriate Appealing.
Refine Produce Implement Design and Development Stages.
Lesson 8. Test 1 Topics Browser incompatibility Design Tips Site Navigation Browser- safe color Monitor resolution Content Copyright Use of tables vs.
Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.
{ Analyze Your Web Site for Feeling and Effectiveness.
Paper Prototyping Source: Paper Prototyping a method of brainstorming, designing, creating, testing, refining and communicating.
The Good, the Bad & the Ugly: Style and design in Website creation Chris Webster: Information Officer and Website Manager at the EARL Consortium for Public.
Accessible Word Document Creation Using Microsoft Word 2010.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Creating Reader-Centered Web pages and Websites. Designing Websites Design with same qualities as other workplace communications ▫Usability and Persuasiveness.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Web best practices. Basic needs of ALL websites Utility Usability.
Online Copywriting eMarketing: The Essential Guide to Online Marketing
Essential Elements to Keep in Mind While Designing a Website.
COMP 143 Web Development with Adobe Dreamweaver CC.
 Creating a functional website that would allow users to quickly and easily access information regardless of device types and browsers, is what web designers.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Pre-Production Meet with the client to create a project plan:
Designing Successful Web Sites
Define phase Interview the client to understand goals, audience, content, design, and delivery requirements. Organize and outline interview information.
Objective % Explain concepts used to create websites.
Session I Chapter 18 - How to Design a Web Site
Web Development Life Cycle from Beginning to End…and BEYOND!
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Writing for Communication on the Web
ICT Communications Lesson 4: Creating Content for the Web
Objective Explain concepts used to create websites.
Web Development Life Cycle from Beginning to End…and BEYOND!
Refine Produce Implement
WEB DESIGN Cross 11, Tapovan Enclave Nala pani Road, Dehradun : ,
Presentation transcript:

Refinement Production Implementation Design and Development Stages

Project Analysis & Design Phases Discover Exploration Refinement Production Implementation Launch Maintenance

Refinement Refinement – Polishing the navigation, layout, and flow of the selected design. By the end of the refinement phase, you will have a highly detailed design to present to your client.

Interactive Prototype Production – Developing the fully interactive prototype that embodies and represents the final design idea. The client will have a better feel for how the finished web site will look and perform.

Design Guidelines Fonts Color of links Color scheme Style guide for consistent writing (for example, do you use or )

Setting up your File Structure Organize your file structure and set naming conventions as established during the structuring phase.

Naming Convention Some prefer "aboutthecompany.html" vs. "about.html". Try to avoid falling into the trap of "AboutTheCompany.html". Using key caps will only be another convention to remember.

Version Control If you have 3 or more people working on the HTML of your site, you will want to have some kind of established method of version control in place to avoid writing over files or duplication of efforts.

Dynamics Sites For dynamic sites, HTML naming conventions don't apply directly, but discipline is still required. Pages are divided and individual sections can be called out as "header," "footer," "main," "navigation" and so on. Be descriptive, but keep it simple.

Usability Testing Make sure you have reached the goals - test to see if the web user can complete the task(s) you want them to accomplish.

Inverse Pyramid Writing Style Customers want web pages to download fast, be easy to use and fast to scan. Employ a common journalistic style called inverse-pyramid writing.

Headlines Blurb Less important background Info, supporting details, long quotes

Grab attention within 7 seconds! Place the most important information above the ‘fold’ or before they need to scroll. scratch.com/attention_map.cf mhttp:// scratch.com/attention_map.cf m

Screen Resolution Best Screen Resolution to design Websites 800x600? 1024x768? The oldest question in website design - 'What's the best monitor screen resolution to use when building your site? ps/25.htmhttp:// ps/25.htm

Headlines with Drawing Power Tell in Headlines and Blurbs why each page is important, unique, and valuable to visitors. Readers want to quickly determine whether this page is what they want.

Distinctive HTML Titles Write distinctive HTML title for every page – they are used as the page title in search results and sometimes search engines rank pages higher. Use keywords, those you would use most to describe the site’s purpose and offerings to customers.

Write a Concise, Descriptive Headline The best headlines indicate action – buy or sell anything here. It does not tell the whole story, so readers continue to read. Write short sentences with short paragraphs. (please use spell and grammar checkers!)

CNET Titles CNET.COM –News-E-Business-How to build that elusive customer loyalty. CNET Builder.com – Web Graphics – Conceptualize Your Site.

Use Bullets and Numbered Lists They are conductive to rapid skimming They highlight information quickly Limit bullets to seven

Writing Printable Pages If needed create a printable template for a printer-friendly version of a page.

Development Stage Implementation – Developing the code, content, and images for the web site.

Web Browser Compatibility Browser Compatibility SafariTest - Returns a screenshot of your page as viewed with Safari.SafariTest Browsershots - Screenshot of your page in many browsers. Up to 24 hour wait.Browsershots

Validators XHTML Validators W3C Markup Validation Service CSS Validtators W3C CSS Validator

Don’t Forget Accessibility Issues Accessibility WebXACT - test single pages of web content for quality, accessibility, and privacy issuesWebXACT

Optimization Web Page Analyzer

Client’s ISP During the Development Phase make sure your client provides you with the ISP information for uploading the site.

Go Impress Them! You can do it!