Demonstrate the functionality of your web page design

Reference no: EM131468130

Responsive Web Design

- Portfolio 1

Background

Global Toys, is a sole proprietor business, specialising in selling toys. Their shop lot occupies approximately one acre of floor space and is located in a metropolitan city. By most standards, the shop is huge and customers have difficulty in finding their way around. The owner of the business has contracted you to develop a website providing information about the shop. The website is not an online ordering system. Instead, it is a website to provide more information about the shop layout and the selection of toys it sells. You have been provided with the following initial and technical specifications:

Memo: Website Requirements
From: Flying Hobbies, Senior Management
To : WIMP Engineering R&D Consultants

Specification
Design and develop a website. The idea is to provide information to potential customers visiting Global Toys premises. The goal is to allow potential customers to obtain an overview of the shop layout and to obtain details of the selection of toys offered by the shop.

Resources
Resources such as images and details of opening hours can be found in ProResource.zip. The content of the ZIP file is:

1. Three folders named Board_Games, Lego_Models and RC_Toys. Each folder contains images relating to the different type of toys as indicated by the folder names.

2. A text file Toy_List.txt lists the proper names of the specific toys corresponding to each of the image within each folder. You need to use the proper names as the formal description of the toys on your website.

3. A text file Shop_Hours.txt containing the business and opening hours of the shop.

4. Logo.png - an image of the logo of the shop.

5. Floor_Plan.jpg - an image of the shop's floor plan.

General Requirements

The owner of Global Toys insists that the following requirements must be adhered to:

1. Each webpage of the website must display the shop logo. You can edit this image, but the font style, type and colour must remain as in the original image.

2. Do not change the proper names of the toys. Do not rename the filenames of any of the images.

3. All images of each toy must be presented to potential customers. This can be done within one webpage or distributed across several web pages. The idea is to ensure that potential customers are made aware of the complete selection of toys the shop carries.

4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g. re-colour, touch up, sharpen, etc.) or rename the images in any way.

5. Generate a separate page providing the opening and business hours. The details are found in the Shop_Hours.txt file.

6. Text description for each item is not provided. You can provide your own ‘dummy' text (i.e. lorem ipsum) to demonstrate the functionality of your web page design.

details for: Portfolio 1.

What You Need to Do

At the end of each week, you will complete a different section of the given project as specified in Background section above. Each of the weekly Individual Case Project, found at the end of each chapter, will contribute progressively toward the completion of the given website project. Each weekly Individual Case Project corresponds with the textbook chapters from each week's lesson plan. You are to document and report on each of these weekly Individual Case Project, cumulating in a final portfolio (i.e. Portfolio 1). Portfolio 1 should be submitted along with Practical Assessment 1.

Portfolio 1.1

Write up the following project proposal :
- Site title-Specify the working title for the site.
- Developer-Identify yourself.
- Rationale or focus-Explain the content and goals of the site.
Planning the Site:
- Main elements outline-Describe the main features of the site.
- Content-Estimate the number of individual web pages.
- Target audience-Describe the typical audience for the site.
- Design considerations-List the design goals for the site.
- Limiting factors-Identify the technical or audience factors that could
limit the design goals of the site.
*At this stage, your proposal and planning is primarily a draft. You will have
a chance to modify the proposal and supplement the design details at
different phases of the project.

Portfolio 1.2
Visualize the page design for your site by sketching a number of page layouts for different information levels of the site. For example, sketch the main page, a secondary page, and a content page. You do not have to be concerned with the exact look of the elements, but be prepared to indicate the main components of the pages, such as headings, navigation cues, link sets, text areas, and so on.

Start to organize your site. Create a visual diagram that indicates the main page, section pages, content pages, and so on. Indicate the links between the pages. Indicate whether you will provide alternate navigation choices such as a table of contents and site map.

* Your figures and sketches can be hand drawn on paper or created using a drawing application. To submit hand drawn sketches, please scan or use a digital camera to capture the originals.

Portfolio 1.3

Write a site specification for the website project. Include as much information as possible from the project proposal you completed at the end of Portfolio 1.1. Make sure to include a mission statement. Determine how you will measure the site's success in meeting its goals. Include a description of the intended audience. Describe how you will assess user satisfaction with the site. Include technological issues that may influence the site's development or function.

Prepare a detailed flowchart for your site using the preliminary flowchart you created at the end of Portfolio 1.2. Create a filename for each page, using a consistent naming standard. Indicate all links between pages. Write a short summary that describes the flowchart. Describe why you chose the particular structure, how it suits your content, and how it benefits the user. Use the page layouts you sketched in Portfolio 1.2 to create the wireframes.

Portfolio 1.4

Revisit your project proposal and the site specifications you created in Portfolio 1.1. How will you implement Cascading Style Sheets (CSS3) into your project web site? In the next few weeks, you will learn how to control typography, white space, borders, colors, and backgrounds with CSS3. Think about each of these style characteristics and how you will apply them to your page designs. In addition, make a list of possible class names you might use to identify your content.

For example, consider using class names for the following page characteristics, as well as creating some of your own:

- Body copy
- Header (possibly different levels)
- Footer

Portfolio 1.5

Design the type hierarchy for your web site. Create a type specification HTML5 page that shows examples of the different typefaces and sizes and how they will be used. This can be a mock-up page that uses generic content but demonstrates the overall typographic scheme. Consider the following questions:

- What will be the typefaces and styles for the body type and headings?
- How many levels of headings are necessary?
- What are the different weights and sizes of the headings?
- How will text be emphasized?
- Will hypertext links be standard or custom colors?
- How will you ensure the legibility and readability of your text?
- What will your line length be?

Portfolio 1.6

Create the box model conventions for your web site. Build on the typographic classes you created in Portfolio 1.5 . Think about the different spacing requirements for your content, and decide how the legibility can be enhanced using the box properties. Add this information to the type

specification HTML page that shows examples of the different typefaces and sizes and how they will be used. Decide on margins, padding, and borders, and select the elements that will benefit from their use. Create before-and-after sample HTML5 pages that reflect the enhanced design.

Design your website to fit a desktop computer display for an approximate screen resolution between 1024x768 to 1280x1024.

Portfolio 1 Summary

Consolidate and compile all your previous efforts from Portfolio 1.1 to 1.6 into a DOC or DOCX report. Present this as a formal report to the client that contracted you for this project. For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report.

All sketches, diagrams and figures should be embedded as part of the report. Do not submit external files. For webpage renderings of HTML5 or CSS3, please include screen captures of example of your web pages. Do not submit HTML5 or CSS3 script files with your Portfoilio.

The format of your report should be as follows: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format.

Attachment:- ProResource.zip

Reference no: EM131468130

Questions Cloud

What cross cultural communication problems : discuss in a short essay what cross cultural communication problems you might face within a business context

Write mips assembly language program that search for number : Linear Search: Write a MIPS assembly language program that can search for a number that entered by user in an array with 20 integer numbers and prints the index

What types of countertransference might you have : Given your experiences of power, privilege and oppression, what types of countertransference might you have when working with Nikki?

Describe ethernet wireless and dial-up modem architectures : Network architecture is the rules for building a local area network. Included are speeds of transmission, distance, number of repeating devices.

Demonstrate the functionality of your web page design : Design and develop a website. The idea is to provide information to potential customers visiting Global Toys premises.

How should the counselor approach discussing the clients : Discuss why or why not this is this something that the counselor may want to address with the parents?

Human resource management process align human capital : In what ways does human resource management process align human capital with organizational strategies?

Explain the application development methods : Application Development Methods - IT Capstone 1 There are various System Development Methodologies. These include but not limited to.

What the counselor is learning about lilianas environment : How, if at all, does the ethnic, racial, linguistic, or economic background of the counselor matter to Liliana's orientation to the counseling situation?

Reviews

len1468130

4/20/2017 1:14:15 AM

Criteria Marks • Overall functionality. Web pages function as intended. 5 • The prototype sufficiently demonstrates the main features of 5 the initial design and its intended purpose. • Quality of HTML5 and CSS3 coding techniques. Demonstrates 5 proficiency in HTML5 and CSS3. • Website and associated webpage design corresponds closely 3 to the work reported in Portfolio 1. Conversely, the details presented in Portfolio 1 should be supportive of the prototype implementation as demonstrated in Practical Assessment 1. • Inline comments, filename convention and overall file and 2 folder structure. Total marks: 20

4/20/2017 1:13:59 AM

• To obtain 26-50% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a sound level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • To obtain 1-25% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a limited level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • 0 marks will be allocated for a specific section of the assessment, where an erroneous or no attempt has been made by the student.

4/20/2017 1:13:49 AM

Marker’s Guideline • To obtain 76-100% of the marks allocated for a specific section of the assessment, the student’s work is expected to demonstrate a very high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course. • To obtain 51-75% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course.

Write a Review

Required(*) Message

User Account

All Pages