Website Design & Development, Assignments of Web Design and Development

Create a design document for a branded, multipage website supported with medium fidelity wireframes and a full set of client and user requirements

Typology: Assignments

2019/2020

Uploaded on 09/09/2020

duongdat
duongdat 🇻🇳

3.8

(8)

2 documents

1 / 21

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
ASSIGNMENT 2 FRONT SHEET
Qualification
BTEC Level 5 HND Diploma in Computing
Unit number and title
10: Website Design & Development
Submission date
Date Received 1st submission
Re-submission Date
Date Received 2nd submission
Student Name
Tran Quang Duy
Student ID
GCD18704
Class
GCD0825
Assessor name
Duy
Student declaration
I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.
Student’s signature
duytran
Grading grid
P5
P6
P7
M4
M5
D2
D3
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15

Partial preview of the text

Download Website Design & Development and more Assignments Web Design and Development in PDF only on Docsity!

ASSIGNMENT 2 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing Unit number and title 10: Website Design & Development Submission date Date Received 1st submission Re-submission Date Date Received 2nd submission Student Name Tran Quang Duy Student ID GCD Class GCD0825 Assessor name Duy Student declaration I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that making a false declaration is a form of malpractice. Student’s signature duytran Grading grid P5 P6 P7 M4 M5 D2 D

 Summative Feedback:  Resubmission Feedback:

Grade: Assessor Signature: Date: Signature & Date:

[WEB DESIGN

AND

DEVELOPPER]

[Tiêu đề phụ của tài liệu]

ASSIGNMENT 2

[TRAN QUANG DUY

GCD18704]

[Teacher: THANH TRA]

I.Create a design document for a branded, multipage website supported with

medium fidelity wireframes and a full set of client and user requirements.

1.1 Site-map: A site map is a model of a website's content designed to help both users and search engines navigate the site. A site map can be a hierarchical list of pages (with links) organized by topic, an organization chart, or an XML document that provides instructions to search engine crawl bots. Site map may also be spelled sitemap. Không tì m thấ y mụ c nhậ p nà o củ a bả ng hì nh minh h ọa. Figure 1. Site-map

1.2 Wireframe: Wireframing is a way to design a website service at the structural level. A wireframe is commonly used to lay out content and functionality on a page which takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added. On the below, this is wireframe I made for my website, here wiredrame is basicly to know about our website: Figure 2. Wireframe 2

Figure 4. Wireframe 3 1.3 A full set of client and user requirements.

  • Advertise their products and services
  • Introducing new items and where they sell
  • Create a blog about detailed product information for advertising purposes
  • Create a page to help users get in touch with them 1.4 Features and Function: Features HOME CLOTHES PANTS ACCESSORIES MORE ICON Function The homepage or home page is the name of the main page of a website where visitors can find Byside homepage, clothes is where every t - shirt is displayed in store, when have new Pants is where every-pants is displayed in store, when have new products will be upload on And more accessories of brands in this when you click that, of course cause I made 3 part of products that mean help to people know where the To help customers solve problem about store, web, and order products, everything contact on The icon shopping cart, account, searching is the icon help you have find, manager your

hyperlinks to other pages on the site. By default, the homepage on all web servers is index.html, however, can also be index.htm, index.php, or whatever the developer decides. products will be upload on the top of page, easy to customer see and buy. the top of page, easy to customer see and buy. products want to buy. mobile phone and social media, and us gonna help you. account of store, and manager your products you choose.

II. Use your design document with appropriate principles, standards and

guidelines to produce a branded, multipage website supported with realistic

content.

The way users surf websites is easy and convenient because the easy control of buttons on each box allows users to read more or to other pages to display information, each button will have its properties on each box. Usability testing includes the following:

  • Simple website easy to use so users can search for information easily.
  • Detailed instructions from restaurant information, dishes, reservations, contacts, events are clearly listed.
  • The supply is clear enough for users to be assured of the best use.
  • It is also suitable and easy to use. Other user information for user help:
  • Sitemaps must be present with the links in the site for the appropriate view.
  • Optional items are clearly verified so website searches help them find it easily and conveniently. 3) Interface Testing: The main interfaces are:
  • Web server and application server interface.
  • Application server and Database server interface.
  • All interactions between the server are explicitly executed and errors are processed as soon as possible and in sequence.
  • If database or web server returns an error message for any query by application server then application server should catch and display these error messages appropriately to the users. 4) Compatibility Testing Browser compatibility: Web applications really depend on the browser, different browsers have different configurations and settings that your website must be compatible with.

Just like this website has tested applications on different browsers such as opera, Internet Explorer, Firefox, and Safari with different versions. OS compatibility: It can correspond to operating systems such as Windows, Unix, and MAC. Mobile browsing: The website that has been tested running on mobile browsers is still smooth without errors. Printing options: When making the font printing page, it is not too big and not too small to read, the page alignment with the page graphics and beautiful graphics is not too eye-catching but not simple, the alignment between the pages is even.

IV.Compare and contrast the multipage website created to the design

document:

Compare and contrast: EX1: How many times did you change your design document details when you actually started designing the website? I did change our design 4 or 5 times, because I set the plan to create a web is web for restaurant or news but, in my mind I think I can ceate web site for store for seller, user- friendly. After that I begin to made it. EX2: Example 2: Was your design document clear & did it produce expected results during actual coding? Actually, my web site is still working normal, something pieces I don’t made it and used internet for search it. EX 3 : What are the key things to consider in design document when actual website was created? + The first element must have a clear strategy.

  • The second element of the content.
  • The third element of promotion and communication. EX4: List down the advantages and disadvantages over the design document and actual website created. Advantages Disadvantages
V. REFERENCE:

techopedia.com/definition/5393/site-map https://www.experienceux.co.uk/faqs/what-is-wireframing/ https://www.computerhope.com/jargon/h/homepage.htm https://www.softwaretestinghelp.com/web-application-testing/ https://nibbler.silktide.com https://www.simplilearn.com/how-to-test-your-website-article https://www.softwaretestinghelp.com/how-to-write-test-plan-document-software-testing-training-day3/ https://www.treefrog.ca/how-to-qa-your-website https://www.webilize.com/Blog/Details/49/quality-assurance-checklist-for-website-design-and- development https://kruschecompany.com/quality-assurance-in-projects/

V.