Interface / navigation COM 366 Web Design & Production.

Slides:

Advertisements

Similar presentations

Chapter 3 – Web Design Tables & Page Layout

Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?

Page Design Scroll zone Data Tables Screen Readers

 Who Needs Planning! The Key to a Successful Web Site….

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.

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.

Web Site Design. Dorky Web Pages Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have.

 Steps how to design a web page using Microsoft Frontage Steps how to design a web page using Microsoft Frontage  Video related to the topic Video related.

1 of 5 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

NZSTA WEBSITE HELP GUIDE. REGISTRATION Easy registration to access members area.

Professional Website Portfolios Principles of Visual Design LCC 2720 Brian Schrank.

Navigation and Menus Hillary Funk. Agenda  Overview of Navigation and Menus  Types of Navigation  What good navigation includes  Navigation Stress.

Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.

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.

Macromedia Dreamweaver CS4 Tutorial. Example of the website1 folder & images folder inside Create a folder on your computer called website1 to hold all.

Planning a Web Site Unit Two Planning Steps 1. Determine the audience & objectives. 2. Sketch a storyboard or flowchart of the pages. 3. Create a folder.

Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.

Slide 1 Consider the page layouts for: Layout design – does it look balanced and even Size of box relative to its importance – the Heading (or title) of.

The Wonderful World of Weebly. Contents What is a Weebly? How to plan a Weebly Site Goals Task details Access Link Step by Step.

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.

Web-designWeb-design. Web design What is it? Web-design features Before…

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

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.

W eb D esign Concepts. The Web Design Process  Design Phase  Production Phase  Distribution Phase  Maintenance Phase.

Using Adobe ® Dreamweaver ® and Photoshop ® An Introduction PART ONE The design phase before launching Dreamweaver.

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.

Part 3: Page Structure. Activity: Table of Contents (TOC) Create a table of contents that links to each of your previously built pages. Follow the directions.

Introduction to Web Page Design. General Design Tips.

Basic Editing Lesson 2.

IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.

Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,

COM 205 Multimedia Applications St. Joseph’s College Fall 2003.

Slide 1-1 The Web Wizard’s Guide to Web Design by James Lengel.

7/8/04 1 Web Project Phase 3 - Sketches Use pencil and paper to sketch the layout of the pages in your web site Considerations – Placement of text? – Placement.

Chapter 20 Web Design. Copyright © Houghton Mifflin Company. All rights reserved.20 | 2 Chapter overview Gives an introduction to Web design Examines.

Elements of Website Design. Homepage ● first page of the website ● website title ● general introduction ● authors or creators information ● date updated.

Web Site Design Plan Checklist Web Design Presented by: Angelo Russo #10 11/22/2014Angelo Russo #101.

 Network  A _____ of computers that can _________ w/ each other  Examples of hardware  ______________ & communication lines  Internet  Hardware.

Lesson: 2 Common Features and Commands After completing this lesson, you will be able to: Identify the main components of the user interface. Identify.

Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.

?. When designing, you should analyze your target audience. Design you webpage around your target audience Target Audience.

Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.

Lesson 8: Navigation. Overview  The manner in which you display your web site’s navigation is crucial to its overall usability.  Users need a clear.

Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.

Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.

Inserting Hyperlinks  Purpose : Enables viewers to click the link and move directly to a slide  Directions : Make one link on slide one to move to each.

Web Site Development - Process of planning and creating a website.

Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.

Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.

CIS101 Introduction to Computing Week 07 Spring 2004.

Section 6.1 Section 6.2 Write Web text Use a mission statement

8/18/2016 Web Development and Interactive Media

Chapter A - Getting Started with Dreamweaver MX 2004

Web Site Design Plan Checklist

Web Design and Development

Layout - you need to understand that a simple navigation bar:

Chapter 17 Designing for the web

Objective % Explain concepts used to create websites.

Fixed Positioning.

Good and Bad Design Mandy Smetana.

Session I Chapter 18 - How to Design a Web Site

Website Design and Management Section 3 - Design

COM 205 Multimedia Applications

Tips on good web site Design

Designing Web Site Layout Using Fireworks

Presentation transcript:

Interface / navigation COM 366 Web Design & Production

Site plan List of info to be included on site Make an outline –Serves as basic structure of site Flowchart –Serves same purpose as outline

To-do list –List of who’s doing what Writing copy Keywords Design layout for main page Process images etc.

Format Monitor size –1024 x 768 pixels –Ideally home page should fit within that frame Initial visual impression of site Whatever you do, don’t make visitor scroll sideways

Navigation Make it easy to find way around site Get back to home page from anywhere Primary navigation should go to main sections –Across the top, off to the side

Horizontal navigation bars

More examples:

Vertical navigation bars:

Repetition Should use the same navigation system on every page –Home page can be a little different Use same words, graphics, fonts, etc.

Home page: Inside page:

Where are you? Need to let viewer know what page they are on –Page headings –Breadcrumbs –Fade out the graphic icon, use different color, have arrow point to icon (abcnews)

page headings changing menu items

breadcrumbs

page heading title nav bar

Index / site map Alphabetical listing of all pages in site

links Make sure all links work Make sure links are worth jumping to –Pages that say the page is coming soon –Larger image of photo with no new info Link should be relevant –Relate to content on page