D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Testra.com's Homepage Telstra homepage has.

Slides:



Advertisements
Similar presentations
Site Critique Fidelity.com By Brooke Baldwin November 2007.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
Page Design Scroll zone Data Tables Screen Readers
Cascading Style Sheets
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
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.
Scientific Communication CITS7200 Lecture 11 Designing and Writing Web Pages.
Project: Sample Deliverables October 21, 2008 Version 3.0 Prepared by: Noreen Y. Whysel Contact: 1 Information Architecture.
Chapter 4 Planning Site Navigation. 2 Principles of Web Design Chapter 4 Objectives Understand navigation principles Build navigation schemes that meet.
A Proposed Model for GV Express October 2008 RED version.
Slide/page 1 Telstra © 2001 Telstra in confidence Home Page Design, Monday, 18 June 2001 Telstra.com®
Web design criteria University of Stellenbosch. What is on a web page? Navigational elements Text Graphics.
A Proposed Model for GV Express October 2008 BLUE version.
Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Lecture 5: Design and Prototype.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Mobile Application Report Mohammed Nasser
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
In the Sandbox Playing with SkillPort 7 for the first time.
Chapter 5 Creating Page Templates
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
BBS CONTACT CAPABILITY REVIEW: WEB WIREFRAMES PROPOSAL VERSION.
Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.
Mastering the Internet, XHTML, and JavaScript Web Design.
What’s New in SkillPort 7 Presenter Name Title. SkillPort 7 – a whole new look and feel! Complete redesign of the SkillPort User Interface –Both Student.
Cipro.co.za content pages look & feel | usability | navigation redesign © Copyright Rob Cowie 2009 live demo | home page:
 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.
Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.
DESIGN ELEMENTS: IDEAS May 25, Template Examples 2 Navigation is organized by topic and by audience. Global navigation is horizontal. “Stories”
Chapter 6: NavigationCopyright © 2004 by Prentice Hall 6. Navigation Design Site-level navigation: making it easy for the user to get around the site Page-level.
Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in.
Introduction to PowerPoint Curriculum Implementation Day Friday, November 3, 2006 K.J. Benoy.
Introduction to Web Page Design. General Design Tips.
Group 3: Art Gallery Monica Almendarez Content/Project Manager Willliam Egle Technology Manager Christina Pié Usability/ADA Compliance Manager Mirjana.
A Case Study of Interaction Design. “Most people think it is a ludicrous idea to view Web pages on mobile phones because of the small screen and slow.
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.
CSS BEST PRACTICES.
CHAPTER 5 Working with Data Tables and Inline Frames.
Planning Layouts. Layouts ✦ Arrange page items into a logical, consistent scheme ✦ Site & Page purpose is starting point ✦ Determines space allocations.

Chapter 5 Creating Page Templates. Principles of Web Design 2nd Ed. Chapter 5 2 Principles of Web Design Chapter 5 Objectives Understand table basics.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
Presented by: Rashedul Chowdhury Contributors: Anthony Ritrivi, Hegde Mahabaleshwa and Long Pham GES DISC UWG May 11, 2011 GES DISC Homepage Redesign.
Introduction to Web Site Design. Rest of this semester Wednesday Nov 26th, the last lecture. Friday, Nov 28th, Thanksgiving. Monday Dec 1st, review session.
?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
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.
Problem Statement Goal & Objective Background Procedure Literature Reviewed Data Collection KML File and Arcmap Creation, Arc IMS Setup Design of Website.
MARK3030 Navigational Testing Navigation Design Basics all of the ways that users can move around a site and understand where to go revealed in the appearance.
New Features in Release 5.0 (August 1, 2005). 2 Release 5.0 New Features Redesigned Navigation Experience Header Bar Updates My Profile Link Added Logout.
Adware and Browser Hijacker – Symptoms and Preventions /killmalware /u/2/b/ /alexwaston14/viru s-removal/ /channel/UC90JNmv0 nAvomcLim5bUmnA.
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.
Web Design Principles. Designing a Website Choice of a site color scheme. Choice of text font and size. Placeholder text. Use of white space. Location.
Structuring and Managing Online Learning Environments.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
UCDW2 - Site Design. Lazar’s Development Lifecycle Define the mission & target users Collect user requirements Create and Modify Conceptual design Create.
Section 6.1 Section 6.2 Write Web text Use a mission statement
CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design.
Chapter A - Getting Started with Dreamweaver MX 2004
BOLD 2.0 Navigation Help Guide.
Changes coming soon to our portal
Web Design Principles.
Sample Reports Robin Marsh.
PowerPoint is for making high quality presentations
Presentation transcript:

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Testra.com's Homepage Telstra homepage has gone though a number of iterations over the last two years. A number of factors mean that there should be another redesign.

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Three Years of Home pages

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Time for another change Two factors make another change to the homepage necessary.  The rest of the site is taking on a new visual identity.  The system of modules on the home page has broken down.

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Version 6.01 templates redesign The Telstra.com site is about to undergo a design change. The implementation of version 6.01 redesign means that the homepage will be out of step with the new templates. There is a new systems of headers on every page. Navigation, content and promotional elements have taken on a distinctive look. New ways of presenting links and fly-out menus. Change in scope (not supporting level 3 browsers)

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Home page out of control The original design principles for homepage modules has eroded over time. Original design for modules, small and concise. Example of a current module, cluttered and wordy.

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Proposals for new homepage We will provide design proposals that aim to: Reflect version 6.01 template design: To promote consistency between homepage and site To help user learn to use the site Speed up the apparent download time of the homepage Reduce the visual space needed for each module Allow for new elements (e.g. tower ads) Attempt to set limits on the amount of content that can go into each module We will need Kevlar body amour before meeting any stake- holders

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Tasks that are out of scope Heavy load of menu items on the header homepage will slow performance Requirement to fit tower advertisements mean that table based coding will not work Rationalization of content on the homepage »To make the homepage load more quickly »To give the customers what they want »To achieve Telstra's business goals How the homepage should be coded and served Provision of a text-only homepage for Version 3 browsers, PDA's and text-readers What to do with the Welcome module

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 1  Pros Accurately reflects the Version 6.01 templates Allows for the inclusion of two distinct types of content in the left and middle panels  Cons Module panels are not associated with each other very well (does the page read up and down or left to right) Quite cluttered

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 2  Pros Less Cluttered Retains module icons More room for promotional items by widening the panel  Cons Less content displayed Load slightly faster Less faithful to version 6.01 templates

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 3  Pros Combines iconography with extra menu in each modules' left hand panel  Cons More cluttered Extra to download Less faithful to version 6.01 templates Key-line panels very hard to code

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 4  Pros Simpler overall shape so less cluttered Better relationship between the panels of each module  Cons More cluttered Extra to download Not well connected to version 6.01 templates No extra content in left hand column

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 1 Modules use design elements from new template. Overall look is simpler, but more severe Promotion can be visually louder. But Tower ads will not fit because of "table based" Coding. New header is tidier. But 60K download needs to be managed carefully. Limits must be placed on amount of content in modules. Content must fit within 5 lines at 800px screen width. No more long-copy menus. Module icons removed, faster download but page looses personality. Personalization controls now on each module for easy access. Should work with a cookie without registration Header block smaller. Less branding confusion with Qantas Logo. Only allowing level 4 and above browsers presents problem for people with old browsers. Login may be hard to find in My Tools menu. Subsection Navigation links allow two types of navigation. Can do fly-outs, but at a heavy download cost. Corporate colour scheme

D E S I G N O F H O M E P A G E P R E S E N T A T I O N Tuesday, 22 May 2001Prepared by Those Meddling Kids Design Proposal 2 Modules use some design elements from new template. But left hand panel only used for navigation. Promotional space wider. Ads can be visually louder. But Tower ads will not fit because of "table based" Coding. New header is tidier. But download needs to be managed carefully. Limits must be placed on amount of content in modules. Content must fit within 5 lines at 800px screen width. No more long-copy menus. Module icons retained but reduced in size. More page personality and easier to navigate, but reduced content space Personalization controls Accessible though "My Tools" menu only Header block smaller. Less branding confusion with Qantas Logo. Only allowing level 4 and above browsers presents problem for old browsers. Corporate colour scheme