Web Design and Development (Part 1)


Task Title: Web Design and Development (Part 1)

Subject Code: SET11112

Objective: Objective of this task is to design static web pages for a flower delivery website. This task must also produce a word document (Size 1000 word) to describe the development processes. 


Overview: The target web-site prototype must address the requirement of a Flower selling website. The design prototype must have landing page, product details page and interface for login and sign up. The prototype of the website must be designed using HTML and CSS components only.             


University: Edinburg Napier

Tool requirement:

  • Notepad++: This word editor is required for the editing of the HTML and CSS files.
  • Web Browser: Web-browser software like Mozilla Firefox is required for testing of the web-pages in the local system.

Development Procedure:

  • Initiall, a Page mockup was created in the pen and paper format.
  • A common template of the webpage was created using the HTML code.
  • Design Style extracted in the separate CSS file and attached the CSS as an external style sheet.
  • Main pages of the prototype ware derived from the common template. These must include pages for Index page, Product page, Login and Signup page.

Sample Outputs:





Evaluation Criteria:

  1. Straightforward design view: Design of the website must follow a straightforward view. Overcomplicated design is not suitable for most of the users. The design must convey every information to its user in a concise and compact way to its audience.
  2. Less memory footprint: Web pages must use the optimal amount of memory footprint. Use of irrelevant content in the webpage or in the style-sheet may incise the size of the website and slows down the loading processes. Slow loading is not suitable for any website.  
  3. Page consistency: All the pages of the same website must follow the same structure and coloring scheme. Without page consistency, a domain looks unprofessional.  
  4. Proper coloring scheme: A prominent color scheme is very essential for a web domain. The color scheme should be attractive and professional also. 
  5. External Style-sheet: WebPages must use external style-sheets, for the view design. It gives isolation between data and view. It is useful for preserving page consistency. External style-sheet also helps to change the design quickly which out making any change in the HTML file.
  6. High-Resolution Graphics: In web designing, we must use high-resolution graphics content. Low-quality graphic reduces the quality of the design. 
SET11112 Web Design and Development Spring (tr 2) 201 9 Coursework Specification 1. Schedule Coursework handed out January 201 9 Submit coursework 1 (zipped) to Moodle by 15:00 on: Fri day March 1st (week 7) Coursework demonstrations In the practical sessions, Wednesd ay 3rdApril and Wednes day 10thApril Submit coursework 2 (zipped) to Moodle by 15:00 on: Fri day 12 thApril (week 1 3) 2. Scenario Your web design company is bidding for the contract foran online ordering and door -to-door flower delivery service . The customer creates an account and logs into the site to order one or more products. The products are delivered by motorcycle within the hour to the customer's door. The customer pays the delivery person . Your first task, and the only one to fall within the remit of this module, is to produce a working prototype to show the cu stomer. Should the customer accept your convincing proposal, the y will award the contract to complete the site. The completion of the site is not within the scope of this module – you don't have to do it. In your design you will certainly consider the customer's user interface and make it usable and professional -looking. Do not forget that the delivery company also needs a separate user interface, equally professionally designed, with adequate security to prevent casual vandalism. 3. Submission Requireme nts 3.1 Part One (40% of the module marks, submitted half way through the trimester) The decision to pass or fail a student depends on the total marks for both courseworks . It is not possible to predict a pass or a fail , based solely on the marks for part o ne. Part one involves the submission, to Moodle , of a written report and a simple prototype site , all in a zipped file with the name of nnnn.zip, where “nnnn” is your matriculation number 3.1.1 Write, in 25 -50 words, a mission statement for your web site. A mis sion statement will help you to visualise what you and your client want from the site, and ways to achieve this. Mission statements are often the decision of higher management. However, if the client is not forthcoming, the web designer can make suggesti ons as a basis for negotiation. In this section you will be marked on clarity of vision and whether you are able to keep to the word limits . (25 -50 words, 3 marks) 3.1.2 One of the labs you did at the start of the module was to research similar web sites. Eventually you will need a way of comparing the quality of your prototype with that of its competitors. Compile a list of ten criteria which could be used to measure the quality of a site such as yours. Try to select criteria on which independent assesso rs might agree. For example “nice” is too open to individual interpretation; “generous use of white space” is better; “the page height lies within the average browser window so scrolling is not necessary” is very precise, though not necessarily applicab le. For each criterion, give a short description of why you decided that it was important in this context. In this section you will be marked on the clarity and feasibilityof your criteria and explanations . (10 criteria, 10 marks) 3.1.3 Courseworks one and tw o only cover the production of a prototype web site. If your proposal and initial prototypes are approved, you will be awarded the contract for the complete web site. Write out a set of requirements for the complete web site A good test of quality for a set of requirements is, "Can you hand these to a professional developer and get a good working site in return?" Requirements are decisions. No marks will be given for general principles. Thus, "A pale background" will not attract marks, whereas "A pal e yellow background" will. You will be marked on the detail and clarity of your requirements. (500 words max. , 12 marks) 3.1.4 Submit a zipped file containing a simple horizontal prototype for the site, containing three linked web pages. "Horizontal prototype" means that it looks real, but it doesn't actually work. The pages are to be of HTML, CSS and images only, i.e. no PHP or other server languages. The pages are to be as follows: • The application's landing page (home page) • A page containing an HTML form. • Another page for the web -site. Marks will be given for appearance, uniformity, correct use of the technologies and an appropriate file structure. As with all coursework, higher marks will be awarded for work of a higher standard. (15 marks) 3.2 Part Two (60% of the module marks, submitted near the end of the trimester) Part two involves the creation of a working interactive web site. It also involves the submission, to Moodle , of a written report and a copy of the files of the site in a zipped file. The file name is to be nnnn.zip, where nnnn is your matriculation number .In addition to the files from the server, please include an exported file of your database (use PhpMyAdmin to export the file). Please add to your written work any log -in name s, URLs or passwords or other instructions needed to access the site. As with all coursework, higher marks will be awarded for work of a higher standard. 3.2.1 You are to create a web site which runs on a server and is visible on the internet. You may use the WDD virtual server, or upload your work to another server of your own choosing. Your web site should be interactive and contain the following features: • At least three web pages • Client -side form validation • User account creation • Login and password authenti cation • PHP sessions and session storage • CRUD (create, read, update, delete) database functionality. • Your code is to validate against the W3C HTML5 document type definition and CSS definition. • Your written report is to contain details of URLs , login names and passwords needed to access your site. (40 marks) 3.2.2 For this coursework you have produced an interactive prototype, designed to help show the client what the site could be like. Nevertheless, there will be more work to do before the site goes live and st arts accepting real orders. Your written report must now outline t hatextra work needed to make your current interactive prototype into a working professional web site. You will be marked on the quantity, detail and clarity of your requirements. (500 words max. , 10 marks) 3.2.3 Your written report must contain a reflection on your work for this module, outlining what you have learned about web design. Mark will be awarded for the number and quality of insights (500 words max. , 10 marks) 3.2.4 Demonstrate your web -bas ed work to the lecturer prior to handing it in. This is to ensure that you understand your code and can explain it and thus demonstrate authorship. There will be 32 marks for the demonstration itself. There will also be a further 8 marks for the correct ness of your code. Also, the demonstration is a condition for getting ANY marks in coursework two. Said another way: if you don’t demonstrate your work, you won’t get any marks for coursework two. During the demonstration you will be assessed on the sp ecification for the application (see section 3.2.1). I.e. the ability to create an account, log in, read -write -update -delete database entries. You will be assessed on form checking, uniformity of style and professionalism of appearance. You will also re ceive marks for the professional appearance and uniformity of your pages, and the syntactic correctness of your code. 4. Notes Plan to spend a total of 55 hours on your coursework, apportioning your effort according to the marks available for each section. Reflection after Part One may lead you to modify your design or evaluation criteria. This is encouraged. Part Two will be marked without reference to Part One. Normal School of Computing regulations apply to your submission. They are published separat ely in your student handbook. Try to avoid accusations of plagiarism: • Do not copy and paste text from the Internet. • If you use code from the internet, please acknowledge it in comments in the code and also in the report. • After reading reference materia l, lay it down where you cannot see it and write your own interpretation in your own words. • Credit will be given for good referencing. • In preparing your application, do not copy material from other web sites at all. Check that both your web applications are completely visible to someone who is not logged in as you. (Ask a friend to check.) 5. Relationship to the module learning outcomes This module has the following learning outcomes: LO1: Critically evaluate the current standards & technologies used to develop WWW systems (Maps onto the report of coursework 2.) LO2: Critically analyse the motivation behind trends in modern web technologies and identify emerging issues. (Maps onto the repo rt sections of both courseworks.) LO3: Design, develop and evaluate a suite of web pages using appropriate web technologies (Maps onto the web site construction of both courseworks.) Assessment Brief Proforma 1. Module number SET11112 2. Module title Web Design and Development 3. Module leader M J Rutter 4. Tutor with responsibility for this Assessment Student’s first point of contact M J Rutter 5. Assessment Practical assessment with report 6. Weighting 100% of module assessment 7. Size and/or time limits for assessment Reports: Report 1 max 1000 words. Report 2 max 1000 words. Expect to spend 55 hours on this assessment 8. Deadline of submission See coursework specification attached 9. Arrangements for submission Upload your completed work in a zipped file to Moodle . You are advised to keep your own copy of the assessment, as student work will not be returned. 10. Assessment Regulations All assessments are subject to the University Regulations 11. The requirements for the assessment See coursework specification attached 12. Special instructions None 13. Return of work and feedback Feedback will be supplied within 3 working weeks of a submission. Student work will not be returned. 14. Assessment criteria See coursework specification attached