Develop a simple but attractive webpage using css

Assignment Help Computer Engineering
Reference no: EM131309223

Assignment OBJECTIVE: To develop a simple but attractive webpage using CSS and following HCI criteria.

CASE STUDY - A new profile website for academics at the School of Computer Science and Electronic Engineering, University of Essex

Each academic in CSEE has their own profile page, detailing things such as research interests, industry connections, published papers etc. The Head of School would like all academic profile pages to be presented in a uniform website that highlights the skills of academic staff and to allow students to easily decide which member of staff would be most appropriate for post-graduate research. The website needs to follow the general branding of the University but should look sufficiently different from the existing online presence to make it stand out.

The Head of School would like to see an example academic profile page which should show contain all the sections of information about the member of staff. He would also like to understand the reasons for your design decisions, as well as some evidence that you have improved the design from your original draft before submitting to him.

TASK 1:  User requirements and site specification

Read the design brief to get a good understanding of the requirements of the client (Head of School). Search the web for webpages that display similar information to offer you inspiration (and also show what the competition are doing). List these website URLs and your thoughts in a document called task1_research.doc and save in the docs subfolder (see Assignment Rules at the beginning of this document for how and where to save your files).

Based on this research you need to specify how the information on an academic profile will be structured, including its relative importance. In task1_research.doc, define the sections of content, what they are used for and what name you will give them in the CSS implementation.

You will have been allocated an academic member of staff for whom you will build an example webpage. Look on Moodle for the allocation list. Search the Web for this member of staff and compile content that fills in the sections you have created above and save it in task1_research.doc. If you cannot find any information on your allocated academic then select another.

You should now have a document called task1_research.doc that contains the user requirements, site specification and content for the academic profile page.

TASK 2:  Website design

Now your site has a specification, search around the web for websites that will offer you design inspiration (they don't have to be profile websites). List these website URLs and your thoughts in a document called task2_research.doc and save in the docs subfolder (see Assignment Rules at the beginning of this document for how and where to save your files).

Based on this research you need to design the look and feel for your website, including navigation, layout, colours, imagery, choice of fonts, etc, using a storyboard. This can be done in PowerPoint and saved as task1_sitedesign.ppt or graphically as task1_sitedesign.jpg. In this document you must also indicate why you have designed the page the way you have.

TASK 3: A CSS-based webpage

For this task, you will implement your design for the profile page (save it as index.html in the "root" level folder, i.e., /CE206/assignment1/) using an external CSS file (called assigment1.css and saved in the CSS subfolder) and content for your allocated academic you researched from Task 1.

The page must take the following aspects into account from an HCI point of view:

  • the correct type of graphics files for the images you want to show
  • suitable font types and sizes
  • appropriate use of colour and contrast
  • easy yet functional navigation based on a linked unordered list
  • external links to other web resources that are not at the University of Essex
  • avoid text in graphics
  • add suitable text tags to hyperlinks and embedded images
  • include copyright and updating information

You may use images and branding from the current CSEE website, as well as other suitable imagery from the web but you MUST credit the source (do this by adding an HTML/CSS comment next to where you add the image).

Your HTML and CSS code MUST contain comments explaining what the major parts of your code do. The code should also be properly indented and not contain any "junk code" (this is commonly produced by Visual Studio for example). 

Your design should work for Firefox 49.0.1 however do check it in other browsers such as Internet Explorer or Safari.

TASK 4: Website review

When you have completed building your CSS-based website from your original design, you now need to test it in a number of ways.  

Firstly, using Fitts's law, calculate how to minimize the delay between a user's intention and clicking on a desired object (be it a menu item or a hyperlink).  To this end, do the following:

4.1. Start with your index.html page and the associated assignment1.css file. Calculate the average Mt to go from the centre of the screen to all the links and/or menu items.  State all your assumptions (e.g., assumed screen size, dpi, etc.) and all your calculations in a file called task4_fitts.doc (saved in the docs subfolder).  You will need to use the following values for a and b in Fitts's equation: a=0.25s and b=0.125s (strictly speaking, the units for b are seconds per bit and b depends on the number of choices, but we will ignore this for the purposes of the assignment).

4.2. Create an new layout (save it as task4_redesign.ppt or task4_redesign.jpg in the docs subfolder) that would reduce the average Mt without damaging the page's functionality and quality of appearance (e.g., do not untidily clump everything together just to reduce D or S).  You will need to be creative here.

4.3. Calculate the new Mt.  Again, show all your work and assumptions and add them to the task4_fitts.doc file, including your thoughts on the impact of these changes if implemented.

Secondly, you need to gather some opinions of potential users of the website. Design a simple questionnaire of at least 3 questions that may include:

  • what do they like about the design?
  • what's missing that they would like to see?
  • what else would they suggest, e.g., particular colours, layout, etc.?

Show your original design and present your questionnaire to at least five students. Record the participants' age and course of study, but do not record their names (you must tell them that the survey is anonymous). Do some interpretation of the findings and save this file as task4_usersurvey.doc in the docs subfolder.

Finally, consider how you would like to change your design, what limitations are you facing, what CSS techniques do you need to learn, etc. Be honest with your appraisal of your own work. Include these thoughts in the Task 4.

TASK 5: Website redesign

Based on your finding from the Fitts's law analysis and from the website user assessment, detail sensible suggestions and modifications to your original design. All suggestions should be reasonable and be inclusive as possible (i.e. the more constructive comments you make the better). This should be outlined in a document named task5_redesign.doc (saved in the docs subfolder).

Select the suggestions for improvement you feel will have the biggest impact on improving the site and implement them in your design. Only make the changes using a new CSS file entitled assignment1_redesign.css (save in the CSS subfolder) and only change the CSS reference link in the HTML files. You may use new images however these can only be added in the CSS file, not in the HTML files.  

The HTML for the original and redesigned website MUST be identical other than the reference to the CSS file in the document head.

Attachment:- Assignment.rar

Reference no: EM131309223

Questions Cloud

Write letter to business owner or companys customer service : Think about a negative customer service experience you had recently. Write a letter to the business owner or the company's customer service department explaining what happened.
Present an analysis of a change effort : After studying the various OD interventions and theories, present an analysis of a change effort that you experienced (that succeeded). Identify one presented theory or intervention that most closely relates to why the change effort succeeded. The..
Create a complete program that uses classes to store data : CS1026: Assignment- In this assignment you will create a complete program that uses classes to store, search, sort, remove, and filter country data. The two major tasks are outlined below.
Discuss that statement and its relevance to economy today : The unemployment is part of the natural rate and need not concern policy makers. Discuss that statement and its relevance to the economy today.
Develop a simple but attractive webpage using css : CE206 - Assignment 1. OBJECTIVE: To develop a simple but attractive webpage using CSS and following HCI criteria. Read the design brief to get a good understanding of the requirements of the client (Head of School). Search the web for webpages that ..
Discuss starbucks need for a new strategy : Discuss Starbucks' need for a new strategy in the late 2000s. Based on the analysis, what are the strengths and weaknesses of Starbuck's current strategy?
New product and strengthen the product portfolio : Selected Organizational Goal: Offering the world a portfolio of drinks brands that anticipate and satisfy people's desires and needs Team: Research and development -New product and strengthen the product portfolio
Northouse text-challenging work space : 1. What similarities and differences can you identify between North American and Japanese working styles? 2. In what way did this company reflect the characteristics of other Confucian Asia countries?
Design a random testing scheme for the method function : Design a random testing scheme for the method function. Provide either a verbal explanation of your scheme (250 words or less) or pseudocode.

Reviews

len1309223

12/12/2016 5:41:08 AM

In Task 1, you will capture the REQUIREMENTS for the profile page and create the site specification. In Task 2, you will DESIGN a new profile page for an allocated academic. You will design the look and feel for the page and produce a storyboard illustrating design decisions. In Task 3, you will IMPLEMENT in HTML and CSS the page which you designed. You may use images and branding from the academics’ other online resources, as well as the University website. You may also use suitable imagery from the web so long as you credit the source in a separate file or in HTML comments. In Task 4, you will REVIEW AND ASSESS your website using Fitts's Law and a user survey. In Task 5, you will IMPLEMENT CHANGES to your original design, only by amending the CSS file.

len1309223

12/12/2016 5:41:00 AM

The assignment is to be done individually. This is not a group assignment. Be sure to put your name and registration number as a comment at the top of all code and other files. Please use the filenames as indicated in the task descriptions below otherwise your work may not be marked. You are free to use any software you like for this assignment, we cannot provide support for packages other than Notepad++, Firefox and Web Development tools (Firefox add-on) on a Windows PC. Also, be sure to test your pages on the computers in CSEE Lab 1 as this is the platform that will be used to test your assignment.

Write a Review

 

Computer Engineering Questions & Answers

  Convert from hexadecimal form to binary form

Convert from hexadecimal form (base 16) to binary form (base 2): 7A base 16 - 1111010 base 2 I used the table to work out (7 x 16^1) + (10 x 16^0) =  7 base 16= 7 base 10 = 111 base 2 A base 16 = 1010 base 2

  Include a cover page containing the title of the

you have been tasked with building a payroll program for a large organization with offices spread across the united

  Design to perform data entry for the organization

Design to perform data entry for the organization. The UI will need to provide the required input and output to characterize the type of data collected by the organization.

  Identify the independent and dependent variables

Assignment: Explain whether you chose to use an independent-samples t test or a matched-samples t test. Provide a rationale for your choice. Identify the independent and dependent variables

  Use at least three quality resources in this assignment

write a two to four page paper in which youdescribe the reasons for disneys adoption of itil. nbspexamine the results

  Understanding rms values and peak values of voltage current

Understanding rms values and peak values of voltage/current, A personal computer that has a built in monitor and keyboard requires 40W at 115V(RMS).

  What is the average number of bits necessary

suppose that symbols are compressed using Huffman Coding and that the most likely symbol is encoded as a 0, what is the decompressed value of the following compressed string of bits?

  How to create program that performs arithmetic function

How to create program that performs arithmetic function Prompt a user for values for the variables. Pass both variables to methods named sum() and difference().

  Why are computer networks so tough to secure

define Why are computer networks so tough to secure.

  Conduct a comparison of three uml modeling tools of your

conduct a comparison of three uml modeling tools of your choice.your paper should include the following headers and

  Find an app that uses device capabilities to provide product

Find an app that uses device capabilities to provide a product that previously couldn't exist. Explain what makes this app important or innovative.

  What is the dissimilatries between rfp and rfq

What is the dissimilatries between an RFP and an RFQ? Are they different, or the same? How does RFI associated to them

Free Assignment Quote

Assured A++ Grade

Get guaranteed satisfaction & time on delivery in every assignment order you paid with us! We ensure premium quality solution document along with free turntin report!

All rights reserved! Copyrights ©2019-2020 ExpertsMind IT Educational Pvt Ltd