COIT Responsive Web Design Assignment 2

What You Need to Do

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

Portfolio 2.1

Use your design sketches from Portfolio 1 and start to build wireframe page mock-ups for the different page levels of your site. Your website should adopt a flexible design. Using the skills you learned in this chapter, build and submit page layouts for the different levels of information your site will contain. For example, you need to build a home page mock-up, an article page mock-up, and a section page mock-up. Remember to test your page mock-ups with some text content and at different browser sizes and screen resolutions as specified in the details for computer programming Assessment 2.  

Portfolio 2.2

Gather the graphics to use on the different pages of your site. This is provided in the RESOURCE.ZIP folder. For other graphics that are not included, please exercise your creativity to create graphics that you will use in the project. These include banner, navigation, section, or identifying graphics. Add these graphics to the test pages of your site. Test the images in multiple browsers to make sure they are displayed properly. Think about the different color requirements for your content, and decide how you can enhance the legibility of the content. Can color help communicate the structure of your information?

Determine the color choices for your web site. Pick the colors for text, table

Backgrounds, and page backgrounds. Establish graphics standards for your web site, including but not limited to the following:

• Decide whether you will use a standard amount of white space around each graphic. • Determine exactly which img attributes should be included in all <img> tags. • Formulate a standard for all alt and title attributes. • Formulate a basic set of image standards for your site. Use this as the display standard for testing your graphics. • Determine colors of links and visited links. • Write a short standards document that can be provided to anyone who contributes to the site. 

Portfolio 2.3

Examine the flowchart you created for your web site. Consider the requirements of both internal and external navigation. Create a revised flowchart that shows the variety of navigation options you are planning for the web site. Using your HTML editor, mark up examples of navigation bars for your content. Make sure your filenames are intact before you start coding. Save the various navigation bars as separate HTML5 files for later inclusion in your web pages. Plan the types of navigation graphics you want to create.  Use graphics from Portfolio 2.2 for your page banners, navigation buttons, and related graphics.  

* Do not include the HTML5 script files in your portfolio. Include only a selection of examples of the work you have carried out at this stage. It is assumed that the HTML5 script files will subsequently be improved and expanded and becomes part of your final project for Practical Assessment 2.  

Portfolio 2.4

Examine the content of TIME_FEES.TXT   BUSINESS_HOURS.TXT provided in the RESOURCE.ZIP. Design and implement the data contained in this file to be appropriately displayed as a table the project website.   

Portfolio 2.5

Design and include forms in the project website. The forms will be used to gather contact details of visitors to the website. Include the following fields:

• Name • Age • Gender • Country of Origin • Personal Interest • Comments

Portfolio 2.6

Finalize your project web site by testing the finished design in multiple browsers and devices (simulators) and making any necessary adjustments or changes to support compatibility. If possible, enlist three to five people to review your web site. Ask for their recommendation.  

Compile the feedback and analyse the results the test. What do the results indicate about the effectiveness of your design. Point out the areas that you feel could benefit from user recommendations. List any assumptions you made about the web site and how users either confirmed or denied these assumptions. 

Portfolio 2

Consolidate and combine all your previous efforts from Portfolio 2.1 to 2.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 in your Portfolio.  

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.   

Programming Assignments Help is the best assignment help provider in the United Kingdom. Our online assignment writing help UK is especially dedicated for the students studying in all UK colleges and universities. Submit assignment to get the best quality assignment help.

 

COIT Responsive Web Design Assignment

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 customers interested in visiting the store. The goal is to allow visitors to obtain an overview of the store layout and to find details of items they are interested in.

Resources

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

1. Three folders named Kites, Quad Copters, and Toy Planes. Each folder contains images relating to the different types of item indicated by the name of its folder.

2. A text file - Item_List.txt contains the names of the items corresponding to each of the image from each folder. You need to use these names as the formal description of the items on your web site.

3. A textfile - Business_Hours.txt containing the time-table of opening hours.

4. Logo.png – image of the business logo.

5. Floor_Plan.jpg – floor layout of the store.

General Requirements

The managers of Flying Hobbies insist that the following requirements must be adhered to:

1. Each webpage of the website must display the Flying Hobbies logo. 2

2. Do not change the description of the items. Do not rename the filenames of any of the images.

3. All images of each item must be presented to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that visitors are made aware of the complete selection of items available for them to visit.

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. recolour, touch up, sharpen, etc.) or rename the images in any way.

5. Generate a separate page providing the business hours. The details are found in the Business_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.

Example of Users Interacting with the Website

The visitor to the website will be greeted by a welcome message by computer programming and the following layout of the floor plan of the store. The visitor clicks on any of the display sections (circles). It should bring up details of the display sections with relevant categories with details of the items. The visitor clicks on any of the images of the items to obtain further information on that image. In addition, if the visitor selects an option to display business hours, a separate page should appear to provide this information. Note that this is the basic requirement, it is up to you to implement other details e.g. instructions, navigational control, etc.

What to Submit

On the specified due date, you are to submit two assessment items:

(1) Portfolio 2, and

(2) Practical Assessment 2.

Programming Assignments Help is the best assignment help provider in the United Kingdom. Our online assignment writing help UK is especially dedicated for the students studying in all UK colleges and universities. Submit assignment to get the best quality assignment help.

 

Website Designing Assignment Case Study

Assignment Guidelines – Online Quizzes and E-portfolio

Learning Outcomes supported by this assignment:

• Understand the principles and ethics associated with good design.
• Be aware of the different methodologies which underpin the design process.
• Apply the principles surrounding ‘usability’ and user-centered design to specific situations.
• Be able to create, design and manipulate high quality raster and vector based images and publish in the appropriate medium using industry standard software.
• Demonstrate the effective use of graphical images in relation to their various formats and their

Assignment 1:  Online Quizzes

There will be a series of five short quizzes located on the Moodle home page that take place fortnightly from week 3. Each quiz will assess knowledge based on lectures for those two weeks. The quiz will be available at the end of the lecture and a student will have 2 weeks to complete each quiz. Each quiz carries a 2% weighting to receive a maximum of 10 marks in total for the completion of all five quizzes. Marks for each quiz will be calculated and rounded up based on individual quiz scores.

Assignment 2: E-Portfolio

See moodle or the course booklet for submission date for this coursework.

1.         A web site to meet the attached design brief (see page 2)

2.         A 1000-word report submitted via Turning on the module’s Moodle site

Do NOT hand assignments to tutors, or put in staff mailboxes, or submit by email or fax as these cannot be accepted.

The main e-Portfolio should be view able on an external site with a link provided in the uploaded report. Failure to provide a working link to the site will result in a fail for this section as the website is a key element of this assessment.

E-Portfolio Design Brief

Designing a website consists of meeting web design principles explained to you during lectures. Content is also very key to a good site. Using an external web editor such as WordPress, Wix or Wesley, you are required to design and develop an e-portfolio about yourself to be used as a vehicle for you to gain further employment*. Therefore the main target audience is a) your tutors who are marking the work and b) a future employer. To ensure a good mark, you will need to demonstrate you have correctly understood key concepts discussed in lectures relating to design and methodology.

Your E-Portfolio should include the following:

1. An appropriate picture of yourself;
2. Basic information such as name, address, email;
3. Details of your relevant skills and educational achievements with links to work to show evidence of good design principles (such as use of links/images/thumbnails to preview graphics work, etc).
   

4. Two components listed below:
1. An original graphic designed in Photoshop converted to a suitable file type and optimized appropriately;
2. A logo designed in Adobe Illustrator converted to a suitable file type and optimized appropriately;

5. Link to your CV as a PDF document or a web page.

6. It can also include links to other published works or business projects you have worked on.

Design of web application assignment  with meaningful headings, content in the form of well-written paragraphs of text with good proximity and sensible images to add to content. All content must be proofread and spelled-checked.

*if you wish to use your site for another purpose (such as a business start-up) please discuss this option with your tutor.

Design Brief for each Component to be included in your E-Portfolio Photoshop Component Choose one of the two options: 1.       Create an image advertising a new electric/hybrid car on the market that boasts high green credentials. Target audience is young professionals. The image will appear on buses and billboards on the underground. It can be any car you want but keep to the brief. 2.       Create a composition that represents some other piece of coursework you have been doing on another marketing module to support a particular campaign/product. Illustrator Component Design a logo to put on your own E-Portfolio as a representation of who you are or a company you are developing.

THE REPORT – 1000 words

A 1000 word report that includes a discussion on the topics below.  It should not be a diary account of events, but should demonstrate that you approached the project using a standard website methodology and utilized the software tools effectively.

Link to Site: A working link to the site address (this is essential)

Introduction:  Explanation of the inspiration behind the creation of the e-portfolio, say which degree course you are doing and which career path you hope to go into.  You should identify who the target audience will be.

Methodological approach: Explain the process that went into creation of the e-portfolio.  Refer to any initial drawings, other web sites, apps etc, tutorials, reading material and earlier versions that aided you in the approach (which should be in appendices).

Critical Analysis: Explain the extent to which the work achieved what you wanted it to achieve.  Identify areas that did not go as planned and whether the work has achieved its goal.

Conclusion:  Identify what you have accomplished and learned from doing this task.

Bibliography: Use of reference citations to support design choices (Harvard system).

Word Count: The word count should be written at the end of the document.

Marking Criteria

The e-Portfolio will be judged on:

Quality of Work – Overall professional look of the e-portfolio design based on taught design principles.                        

Originality of the 2 components in the design brief – Have the pieces ‘been done before?’ Does it show a high level of thought and work to finally evolve or is it just a ‘copy’ of ideas?  All creativity is inspired by something or someone – by originality we mean measuring the process by which the idea evolved into something perceived as unique so evidence in your report will support this.

Correct use of Applications and File types – There are many tools available in the Adobe Creative Suite (eg Photoshop, Illustrator etc) It is impossible to teach all the tools or all the elements of each tool taught in all the one-hour workshops, and it is expected that high marks will be awarded to work that demonstrates the creator has undergone independent study to effectively master the applications.

Design, Content and Functionality - the e-portfolio adheres to good web standards, accessibility, file management and code quality

Quality of Report – This will be evidenced by relevant, informative report content that accurately explains the process you went through and what you achieved.  The report should be well-written and refer to other referenced material that has inspired you. Poor grammar, spelling or punctuation could result in loss of marks.

Programming Assignment Help provides plagiarism free assignments i.e. all our solutions are genuine and written by best technical assignment writers who have years of experience. Get a quote now.