Website Design and Development for Hill Top Lavender Fields

Objectives of the Website

On the successful completion of this module students will be able to:

1.Gain knowledge and understanding of state-of-the-art web design technologies.

2.Demonstrate the ability to design, develop, test and evaluate interactive websites.  

3.Demonstrate the ability to deploy web application online by building a local server and uploading files to the internet.

4.Understand and apply interface design principles to develop usable and accessible websites.  

You are progressing well as a junior web designer for a leading communications firm Pioneer Tech Ltd. An opportunity has arisen for you to work for a small client company called Hill Top Lavender Fields.

Hill Top Lavender Fields manage acres of green land where they harvest lavender. They provide a pick-your-own facility once a year, and run a small farm shop nearby where they sell handmade lavender soaps, lotions and other lavender-based products. Also seasonally, the general public are invited to visit the farm for a small fee.

As a result of their business growing and for further promotion, they are now looking to put their business online.

They have two main objectives:

a)To promote their business through a website.

b)To promote awareness of the importance of green spaces and the protection of the environment.

The client (Hill Top Lavender Fields) will use the website to project their presence and the services they offer. The client will also use the website as a contact tool with their customers.

The website should be simple to use and must consider customer experience when designing and developing this website. You will design a front-end website using suitable design tools and technologies such as Adobe brackets or sublime text-2, HTML, CSS and JavaScript.

Deliverables

You should submit this assignment as a word document (500 words) via Moodle and must include the following:

•Design documentation:  This should include annotated sketch diagrams/wire-frames; colour schemes and style patterns etc. Your report will show how you have addressed accessibility in your design e.g. checks on user input, and different colour patterns for the visually impaired.  

•Development: This should include screen shots of the website and the original code for the site in plain text with code comments.

•Testing and validation: Your work should include the following evidence for cross browser compatibility: link checking, a HTML & CSS validation check and steps taken to remove errors;

i)Screen shots of the website running on at least two web browsers e.g. Internet Explorer or Google Chrome or any other browser for cross browser compatibility.

ii)Screen shots of all website with working links.

iii)Screen shots of HTML & CSS validation including steps taken to remove any errors.

•Deployment:  Setting up a WAMP/XAMPP server or any free hosting to demonstrate understanding of how to upload files on the internet. Screenshot evidence is required to demonstrate successful installation of a WAMP/XAMPP server for web hosting.

·All figures, graphs and tables must be numbered and labelled with short explanations.

·Material from external sources must be properly refereed and cited within the text using the Harvard referencing system.

·All components of the assignment (text, diagrams. code etc.) must be submitted in one word file, any other accompanied materials such as HTML, CSS and JavaScript code, etc. should be attached in appendices.

·The report should be logically structured, the core of the report may start by defining the problem / requirements, followed by the proposed solution including a detailed discussion, analysis and evaluation, leading to the implementation and testing stage, finally a conclusion and a personal reflection on learning.

·Screenshots without description / discussion are not suitable as they do not express your understanding or support your work adequately.

·Plagiarism: is when presenting somebody else’s work as your own, whether that work be an idea, graphs, figure, illustration or a pure text, be it available in web, textbooks reports or otherwise.

·Collusion: is when copying another student report (text, Figures, Illustration etc..) and submitting as your own.

·Plagiarism will be dealt with seriously and can lead to serious consequences and disciplinary procedure.

·Wholesale use of text and diagrams from websites considered plagiarism.