Museum Website Design Project

This document outlines a web design project for a Museum of Arts and Crafts. It details the design process, focusing on responsive design across various devices (phone, tablet, laptop). Each page type (home, Chinese artefacts, European artefacts, etc.) is described with mockups and considerations. User testing and feedback are also discussed as part of the final design iteration.

2017
RESPONSIVE WEB DESIGN
REPORT
SUDENT NAME

Contents
1 Introduction..............................................................................................................................................2
2 Design.......................................................................................................................................................2
2.1 Home page........................................................................................................................................2
2.1.1 Small display devices..................................................................................................................3
2.1.2 Medium display devices..............................................................................................................5
2.1.3 Large display devices..................................................................................................................7
2.2 Chinese artefacts page......................................................................................................................7
2.3 Eastern artefacts page.......................................................................................................................8
2.4 European artefacts page....................................................................................................................9
2.5 Opening hours page.........................................................................................................................10
2.6 Ticket price page..............................................................................................................................11
2.7 contact price page...........................................................................................................................12
3 Flow chart...............................................................................................................................................12
4 Testing....................................................................................................................................................13
5 Conclusion..............................................................................................................................................13
6 Bibliography............................................................................................................................................13

1 Introduction
The museum of art is a museum that deals with exhibition of arts and craft categorized into three
categories; Chinese, Eastern and European arts and crafts artefacts. The museum is in need of a website
that will be used to help visitors to get a conceptual view of the museum by just visiting the website. The
website will enable the visitors to see what they expect to see in the actual museum and where they
expect to see it. Different artefacts found in the museum will be displayed in the website by use of
colorful images. The website is designed with responsiveness as a major requirement. This means that
the website should be usable across a range of different devices with different screen sizes and different
resolutions. To achieve this, the website must use a responsive design structure that will enable the
website to be viewed across the different devices.
2 Design
A prototype or a mockup can be used to illustrate the design that will be adopted by the website. The
mockup should show all the sections that the page will contain and what is expected to be found in that
section. Images, hyperlinks and text should be shown in the mockup to help in design of the final
website. The concept of responsiveness should also be demonstrated in the mockup.
The museum of art and craft website will contain the following pages;
 Home page
 Chinese artefacts page
 Eastern artefacts page
 European artefacts page
 Opening hours page
 Ticket price page
 Contact page
2.1 Home page
The home page is the first see the visitor sees when the website is opened. The home page is the
landing page and will provide links to the other pages through a navigation menu. The design of the
home page should be very attractive and interesting to all visitors. This can be achieved by critically
analyzing the design so as to come up with a very good design that will create the urge to view other
pages for any visitor who visits the website. For the proposed museum of art and craft website, the
home page contains of a header, body and a footer. The header of the homepage contains the logo and
the navigation menu. The body of the home page is subdivided into sections. The first section shows the
floor plan of the museum. By looking at the floor plan, the visitor can be able to get an idea of how the
actual museum looks like. The next section after the floor plan is the opening hour’s section that shows
what times of the day the museum is open. This acts as a guide to visitors by providing information of
opening hours. The section that follows is the opening fees section which shows the fees that different
types of visitors are supposed to pay to enter the museum. The last section of the body part of the home
page is a quick links section that provides three links to the three section of the museum i.e. Chinese,
eastern and European sections. By clicking any of the quick links the visitor can be redirected to that
section of the website.

At the bottom of the home page, is a footer which contains the copyright information of the website and
the Museum of arts and crafts.
The mockups can be shown using three different types of devices;
 Small display devices
 Medium display devices
 Large display devices
2.1.1 Small display devices
Small display devices include mobile phones and other devices that have small screen displays and lower
resolutions. While comping up with a responsive website, it’s always advisable to design for small
devices first and then proceed to design for other devices. These devices have two viewing modes;
 Landscape orientation

 Portrait orientation

2.1.2 Medium display devices
Medium display devices are devices like tablets and IPads which have medium sized display as compared
to computers and mobile devices like smartphones. These devices also have two modes of viewing
 Landscape mode

 Portrait mode

2.1.3 Large display devices
Large display devices are devices with bigger screen size and larger resolutions. Large display devices
range from laptops to desktop computers and Smart Televisions some which have a very high
resolution. A responsive website should be able to adapt and respond to different devices. These type of
devices can be thought to have only one viewing mode which is portrait mode as they are not very
mobile thus use only one mode.
2.2 Chinese artefacts page
The Chinese artefacts page shows a display various Chinese art and crafts artefacts found in the
museum. The website uses the same structure as the home page whereby there is a header which
contains the logo of the museum and the navigation menu which contains links to all the other pages.
The content section of the page contains different artefacts which are displayed by use of pictures and
captioned with random generated text. The last section of the website contains the copyright
information of the website and the museum of arts and craft.
The Chinese artefacts page has been designed to responsive as the home page thus it responds and
adapts to different screen sizes. To show the mockup, the design has been viewed using a medium
display device like an iPad.

2.3 Eastern artefacts page
The eastern artefacts page is similar to the Chinese artefacts page except that the content section
contains eastern type of artefacts. The header section contains a logo and the navigation menu used to
navigate the whole website. The footer contains the copyright information. The following diagram
shows the astern artefacts as viewed from a small sized device like an iPhone.

2.4 European artefacts page
The European artefacts page is similar to the Chinese and the eastern artefacts page except that its
content section contains artefacts of European type. The following image shows the European artefacts
page as viewed from a large display device like a laptop.

2.5 Opening hours page
The opening hour’s page contains information about opening hours of the website. The page has a
similar structure with the other pages where by it contains a header which has a logo and navigation
menu and the content section the opening hour’s information and lastly the footer which has the
copyright information. The following image shows the view of the opening hour’s page as viewed from a
small size device like an iPhone in landscape mode

.
2.6 Ticket price page
The ticket price page contains information about the price of tickets for different types of visitors.

2.7 contact price page
The contact page contains information about the contacts of the museum of arts and crafts The
following image shows the design of the contacts page as viewed from a large display device like a
laptop.
3 Flow chart
The final flow chart of the navigation of the website achieved.

4 Testing
Website testing was done by opening the website using a simulator that can simulate different devices.
The simulator used can be accessed from the Google Chrome development tools and has over 20
devices through which the website was simulated some of which are shown in the design section above.
External review were also gathered from five subjects who were asked to view the website and give
their views on what changes should be done on the design of the website. Using this information, the
final design of the website was achieved.
5 Conclusion
The Museum of arts and crafts website has been designed to be a fully responsive website that will
enable any visitor using any type of device using the website to view it and to get a seamless flow as
they view it from one device to another.
6 Bibliography
Chen, E.Y., Tan, C.M., Kou, Y., Duan, Q., Wang, Z., Meirelles, G.V., Clark, N.R. and Ma’ayan, A., 2013.
Enrichr: interactive and collaborative HTML5 gene list enrichment analysis tool. BMC bioinformatics,
14(1), p.128.
Hague, M., Lin, A.W. and Ong, C.H.L., 2015, October. Detecting redundant CSS rules in HTML5
applications: a tree rewriting approach. In ACM SIGPLAN Notices (Vol. 50, No. 10, pp. 1-19). ACM.