Workshop Four - 4.6 Dropbox

Web Project Site Map And Design Layout

Introduction and Alignment

A site map is a diagram of the organization of a website. The site map will help you to determine how you will organize your pages that start at the home page. Creating this map, you will be showing how users will access the pages and information in your site.

Another facet of website creation is to create wireframes or layouts of your pages starting with your home page. The wireframe page layouts should all have a header that contains a logo, navigation system, a footer and styling that integrates the entire site.

Upon completion of this assignment you should be able to:

Follow recommended web design guidelines.

Resources

Textbook: Web Development and Design Foundations with HTML5

Background Information

A site that is well organized is not only user-friendly but is essential to allow for appropriate navigation and future maintenance. Flowcharts help a designer organize the site. A flowchart provides the developer with a visual representation of the site before the coding has begun.

Page layouts are another tool to plan out your site before you have started adding content. Since all of your pages need a common theme, a header with a logo, navigation, and a footer, use your flowchart to let you know how each page is to be structured.

Instructions

1. Web Project Site Map

a. Using Word or PowerPoint, draw a flowchart (storyboard) of your website that shows the hierarchy of pages and relationships between them.

b. Remember to label the flowchart with the working titles of the pages that you submitted in Workshop Three in your planning analysis sheet.

c. See section 5.2 Website Organization in Chapter 5 for examples of site flowcharts.

2. Web Project Page Layout Design

a. Look at Hands-On Practice Case 3, Web Project Page Layout Design, on p. 245 in Chapter 5 of your textbook.

b. Use the drawing feature of Word, a graphics application, or pencil and paper to create wireframe page layouts for the home page and content pages of your site. Note: if you elect to draw the page layouts, then you must scan them and put them into either a Word or pdf document.

c. Indicate where the logo, navigation, text, and images will be placed. You should include the graphic that you did for the logo assignment.

c. Save this file as Layout Design or a similar name and make sure that you have included all relevant information such as your name, the assignment number, etc.

d. Put your wireframe design document and your flowchart in a zip file.

Here are the criteria to follow...

Planning sheet

Home: Building the further Materials infrastructure--addressing the operations Careers----Consistently rated Image on sites

Login customer sign in/signup (top right side) Image of good customers

About Group: Bollyjay is Major Productions in all over the world for small scale and large scale suppliers. Our Key goal is to potential customer Can get whole construction materials cement, bricks, sand, tiles, lighting..all other materials.

Productions: -----------

Construction Quantity unit of measure cost shipping Location delivery date

Building materials Eg: Cement 10 pk ea:1000 xxxx xxx

Electrical & Automation

Services: ----------- Smart Products & Services Smart Manufacturing Services Industrial Products Medical Devices Process Industry Telecom Consumer Electronics & Semiconductor (TCES) Transportation Embedded System and Applications Engineering Process Services Mechanical Engineering Product Lifecycle Management (PLM) Consulting Services Engineering Analytics Internet of Things and Machine to Machine Power Electronics Semiconductor IP Solutions

A comment I need a Wireframes,Site Map or Page Layout or the Graphics? For this assignment, I attached this assessment criteria for clarity.

Site map/flowchart 5 points for each item A flowchart that represents all of the pages in your site Each piece of the flowchart is labeled with the working title of each page. The home page may be labeled as home. Using the information that you learned in section 5.2 Website Organization, identify the type of website organization you are using and put it on the chart or another page that you have added to the chart Hierarchical Linear Random or Web organization Yes, i am ok with only imges?	0-15
Layout Design 5 points for each item Wireframe layout for all of the pages in your site Indicate where the navigation, logo, text and images will be placed on your pages Remember one page in your site will be a form Indicate what types of colors and styling that you plan on using for the pages Styling would include fonts, text colors, classes, ids, etc. Indicate which page or pages would have some type of scripting or media added such as animation, validation scripts, etc. For example think about maybe using Flash or an audio file	0-20
Page titles for at least six pages including the home page, but not more than 10 pages.	0-10
Mechanics, well organized with complete sentences, correct grammar and spelling.