Web design and development ms801

MS801
NUI Galway
MS801
Web Design and Development
Group Members:
Colum Coughlan ********
Diarmaid Ó Fátharta ********
Séamus Keating ********
Paul Molloy ********

1
Contents
Introduction................................................................................................................................ 3
Project Objective .................................................................................................................... 3
Initial Assessment ................................................................................................................... 3
Client...................................................................................................................................... 3
Team capabilities .................................................................................................................... 4
Project Plan................................................................................................................................ 5
ProjectMethodology............................................................................................................... 5
Projectschedule ...................................................................................................................... 6
ProjectManagement Tools ..................................................................................................... 7
Requirements Analysis ............................................................................................................... 8
User Analysis .......................................................................................................................... 8
Market Analysis...................................................................................................................... 12
Summary of User and Market Analysis ................................................................................ 13
Competitor Analysis.............................................................................................................. 13
Desktop Top Browser Share Trend....................................................................................... 15
Summary of Findings .............................................................................................................. 17
Design....................................................................................................................................... 18
Introduction.......................................................................................................................... 18
Relevance of User Demographics .......................................................................................... 18
Layout................................................................................................................................... 18
Content................................................................................................................................. 19
Colour Behaviour.................................................................................................................. 21
Object Creation..................................................................................................................... 22
Logo .................................................................................................................................. 22
Banner................................................................................................................................ 26
Technology Utilised............................................................................................................... 28
JavaScript ......................................................................................................................... 28
Photoshop.......................................................................................................................... 29
Bootstrap Grid System...................................................................................................... 29
Dreamweaver.................................................................................................................... 29
Fireworks .......................................................................................................................... 29
Search Engine Optimisation.................................................................................................. 29
Evaluation of Design............................................................................................................. 30
Visibility ofsystem status................................................................................................... 30
Match betweensystem and the real world......................................................................... 30
User Control and Freedom................................................................................................ 31

2
Recognition rather than recall........................................................................................... 31
Aesthetic and Minimalist design........................................................................................ 31
Testing...................................................................................................................................... 32
Browser Testing.................................................................................................................... 32
Alpha Testing........................................................................................................................ 34
User Testing........................................................................................................................... 36
Analysis of the user feedback................................................................................................ 39
Conclusion................................................................................................................................. 40
Credits...................................................................................................................................... 40
Artists Images....................................................................................................................... 40
Other Images used:............................................................................................................... 41
References................................................................................................................................. 41
Appendix A - Wireframe Diagrams .......................................................................................... 43

3
Introduction
Project Objective
The objective of this project is to develop a responsive website consisting of a minimum of ten
pages for the Island Gallery. The client requires that the website:
 advertise an upcoming exhibition featuring famous Irish painters,
 present the works of three well-known Irish painters in such a way as to generate
interest in the exhibition and
 to provide information about the artists and
 to provide links to other useful resources
The key deliverables include:
 a website that highlights the works of three well-known Irish painters,
 a website that appeals to the target audience of the Island Gallery,
 a website that generates interest in the featured artist’s works,
 a website that provides links to social media and partner businesses.
Initial Assessment
A proposal was submitted to the client, which outlined the following elements of the design
and development of the website:
 Market and User Analysis
 Website Structure
 Content Sample
 Design prototypes of the desktop and mobile pages
 Project Management methods to be utilised
 Project Schedule
Client
The Island Gallery is an artist-run gallery founded on artistic autonomy with a commitment to
excellence in contemporary art. In addition to promoting the works of the artists the Island
Gallery runs exhibitions and events that reflect and address developments in contemporary art
in order to promote dialogue amongst local, regional, and international arts communities. The

4
gallery has three resident artists in addition to exhibiting artists, Colin Carruthers, John
O’Grady and Carol Ann Carrigan.
The gallery is located in Nun’s Island Galway, an artistic community and an area that has
attracted a number of galleries including the Galway Arts Centre.
Traditionally the customer base of the gallery has been local and national with a significant
number of tourists. However, the client wishes to market the gallery to the international market,
with a redesigned website a key component of this strategy.
Team capabilities
The project team comprises four members. Skills in the group are suitable for the completion
of this project. The skills portfolio available include:
 Bootstrap
 CSS
 Photoshop
 Fireworks
 Dreamweaver
 JavaScript
 Project Management
The project team are engaged in concurrent projects consequently; project management plays
a crucial role.

5
Project Plan
Project Methodology
In considering a methodology for this project a number of issues were considered.
 The level of understanding of the work required was high
 The inputs and outputs were well defined
 The activities required to complete the project were repeatable and predictable,
 The risk of a loss of control was assessed to be low.
Agile would be suitable for projects with a high risk of failure as a result of sudden changes in
underlying factors, or where a new application was being developed. In light of these
consideration, the Waterfall methodology was adopted for this project.
The Waterfall methodology relies on organisational maturity where processes are
repeatable. Humphrey developed the theory of the Capability Maturity Model (CMM),
essentially where processes are well defined an organisation can be described as mature and
formal, rigid approach to software design can be applied (Humphrey, 1988). In this context,
the waterfall model for software development represents a structured methodology. The project
team have a well-defined set of goals and requirements. As a result, the risk of project failure
due to scope creep is low. In applying the Waterfall model, the stages in development are
relatively static.
Figure 8 Application ofWaterfall Methodology
The model set out above is reflected in the Gantt Chart, Network Diagram and Critical Path
diagram set out above.

6
Project schedule
The schedule for the project was documented on MS Project. Figure 3 illustrates the project
schedule.
Figure 3 Project Schedule
Scheduling conflicts arose during the project, mainly due to task allocation issues with certain
tasks exceeding their proposed end date. Through the use of the reports function on MS Project,
the risk of project failure was mitigated. Figure 4 (below) illustrates the overview function on
MS Project which provided a dashboard overview of the project timeline and tasks.
The critical path and slack for tasks in the project was also monitored. In figure 6 (below) the
network diagram illustrated provide a guide to the order in which tasks were required to be
completed. In Figure 6 (below) the slack and critical path were reviewed.
Figure 4 Project Schedule

7
Figure 5 Network Diagram
Figure 6: Critical Path and Slack
The project management tools utilised enabled the project tasks to be assigned and completed
in an efficient manner while reducing the risk of project failure
Project Management Tools
The project team utilised a number of tools during this project. For the communication in
respect of meetings a WhatsApp group was used. For times where a physical meeting was not
feasible, a Skype meeting was held.
We used Google Drive to share documentation for the project. This allowed team members to
work on various parts of the report concurrently, make edits where needed and to get feedback
on any new idea. Gmail was also used to update the project team.
MS Project was utilised to monitor the project schedule in order to keep the project scope and
time managed. A network diagram and the Gantt chart allowed us to identify crucial tasks and
milestones that were to be reached.

8
Requirements Analysis
User Analysis
Data on current users of the Gallery does not exist in a statistical from. Consequently, the
analysis of users is based on the subjective views of the Gallery. The client has provided the
following guidance on the elements required
Many images
 Users will want many images of the artworks and per artwork, with higher quality and
zoom options to see the details.
Differing Levels of Knowledge
 Users with a high art knowledge and expertise require very detailed information about
art while other users with a more general knowledge, require more guidance to find
things they may be interested in and want information that is easy for them to read.
Differing Reasons for Visiting
 Visitors to the site will have various motivations from intellectual, (a learning or
research objective) to a more visual and aesthetic experience (users looking for
inspiration or images to browse).
 In the context of the first category a search or browse by subject’s function will be
required
Visitors
 Users may be planning to visit Gallery. If so, they will require information on the
location of the Gallery and of suitable accommodation nearby.
Data exists on visitor motivations to the website of large art galleries. The website of the Tate
Modern in London receives approximate 500-600k visitor per month. (Tate Modern, 2014) An
analysis of the visitor motivation is provided in figure 7.

9
Figure 7: Tate Modern Website Usage Categories
Source: Tate Modern. (2014). Art & Artists: Digital Audience Research Report
According to a report compiled in 2013 by Unity, a marketing consultancy those who are
purchasing art are very educated and often have higher positions at work. These individuals
also tend to be men and women under the age of 44 and they tend to shop alone. In addition,
the purchase of art is transitioning from gallery-driven business to an online and direct-to-artist
industry with 30 percent of affluent consumers purchasing online. High educational attainment
is a key demographic variable for appreciation and interest in art. (Buckley, 2016)
Research by Barclays Private Capital has researched the main occupations of those who
purchase art. In figure 8 the greater proportion of art buyers are senior managers, professionals
and entrepreneurs.

10
Figure 8: Occupations ofArt Buyers
Source: Barclays, 2016
In the US market between 2010 and 2014 the report found that the number of physical art
galleries decreased from 6500 to 4000 while the number of highly-educated affluent consumers
who can both afford and appreciate art has grown significantly. (PRWeb, 2015).
Audience demographics affects typography, content, layout, colour scheme and navigation.
Research on demographics to Irish Art websites is limited due to limited rankings. Alexa offers
an analysis of commercial web traffic data and analytics. However, data on Irish sites are
limited. In order to make some initial conclusions regarding the demographics of visitors to an
Irish art website, the demographics of two leading sites is reviewed below.
davidzwirner.com
This site is highly rated by Alexa and art periodicals. An excerpt from Alexa illustrates that
that education status of a visitor is above average, more likely to be female and more likely to
be browsing from home.
Figure 9: Audience Demographics for davidzwirner.com

11
lehmannmaupin.com
This site is the most highly rated art gallery site on Alexa. The visitor is more likely to be
female accessing from home and educated.
Figure 10: Audience Demographics for lehmannmaupin.com

12
Market Analysis
The art market has a number of striking features. Globally in 2015 sales for all forms of art was
$63 billion. The market for Irish produced art has been estimated at $600 million. The art
market by sales comprises three main art markets: the US (43%); China (21%); and the UK
(19%). The main market for art is the United States which unlike other markets has not
undergone a slowdown. Modern art is the most popular art category with 30% of sales by value
in 2015.
Figure 11: Global Art Market Share by Country
The Irish art market is buoyant, sales at auction during 2015 included:
 €220,000 for Yeats’ Man in a Train Thinking (de Vere’s)
 €175,000 for Orpen’s Gladys Cooper (Whyte’s)
 €135,000 for John Lavery’s A Bacchante (Whyte’s)
 €210,000 for Yeats’ Business (Morgan O’Driscoll)
These sales at the higher end of the market represent a recovery in the Irish market which was
affected by the recession 2008-2012.
Figure 16 below illustrates the art market within Europe, by sales in 2015. The United Kingdom
dominates the European market with Irish sales at less than 1%.

13
Figure 12: European Art Market by Sales
As illustrated by figure 12 the international art market is significant with Ireland a relatively
small participant. However, the market is dominated by buyers from the United Kingdom and
the United States of America.
Summary of User and Market Analysis
The market for art is international and growing. The typical consumer of art, one who is likely
to purchase art online is
 educated to a tertiary level
 35-65 years’ old
 from or living in the United States or the United Kingdom
 searches for a specific topic (e.g. Irish Art)
 be a senior manager, entrepreneur or professional
The coming sections will focus on how the design of the website will meet the functional
requirements and appeal to the typical consumer of art.
Competitor Analysis
A review of competitors was undertaken during the preliminary website design phase. The sites
reviewed were the main websites that would be viewed as competitors to the Island Gallery for
in gallery sales.

14
The sites were chosen as they represent competitors in a regional and local context. In addition,
these galleries have developed online businesses. The assessments took the form of a structured
comparison based on subjective criteria.
Site A: Kenny’s Art Gallery - http://www.thekennygallery.ie/
Site B: Lavelle Art Gallery - http://lavelleartgallery.ie/
Site C: 126 Gallery - http://126.ie/
Site D: The Whitethorn Gallery - http://thewhitethorngallery.ie/
Site E: Gormleys - http://www.gormleys.ie/
Figure 13: Alexa Ranking for Irish Competitors
Figure 14: Comparison ofCompetitors Websites
Site
A
Site
B
Site
C
Site
D
Site
E
Is the purpose of the site clear? Yes Yes No Yes Yes
Does the site clearly address a particular audience? No Yes Yes Yes Yes
Is the site interesting and engaging? No Yes Yes Yes Yes
Does the site enable users to accomplish all the tasks
they want or need to accomplish?
Yes No No Yes Yes

15
Can users accomplish their task easily? Yes Yes No Yes Yes
Does the information and the order in which it is
presented suit the purpose?
Yes Yes No Yes Yes
Is the important information easy to find? No Yes No Yes Yes
Is all the information clear, easy to understand, and
easy to read?
Yes Yes No Yes Yes
Do you always know where you are, or how to get to
where you want to go?
No Yes No Yes Yes
Is the presentation attractive? Yes Yes Yes Yes Yes
Do the page’s load quickly enough? No Yes Yes Yes Yes
Number of ‘Yes’ 6 10 4 11 11
A review of the table above in conjunction with the Alexa rating indicates that well-structured
sites do not necessarily have high Alexa rankings. However, the Alexa ranking is based on
visits by users who have an Alexa toolbar on their browser.
In summary, a subjective analysis of competitor's sites has been conducted using functional
criteria as a measure. The finding that those sites who successfully met the assessment criteria
did not have better website rankings is not surprising.
Desktop Top Browser Share Trend
Google Chrome is the dominant web browser with over 50% market share (Applications,
2006). Figure 1 illustrates the decline of internet explorer and related rise of Chrome as a
desktop browser. Similarly, in the mobile/phablet/tablet format, Google Chrome is dominant.
Figure 2 illustrates that Chrome, Safari and Android browsers are the most significant.

16
Figure 1: Desktop Browser Trends
Source (ComScore, 2016)
Figure 2: Mobile and Tablet Browsers by Market Share
Source (ComScore, 2016)
The effect of the trends outlined above is the final design must display content in an equally
professional and attractive manner on mobile and desktop devices.
As of March 2015, the number of mobile-only users overtook desktop users (ComScore 2016).
This trend is likely to increase in the coming years. As a result, the client will require a website
that allows users to access content, in particular images as easily from a mobile device as from
a desktop.

17
Summary of Findings
In order to determine the user profile and the optimal characteristics for the website the project team
 interviewed the client
 researched the global art market
 reviewed the leading Irish art websites
 assessed the typical demographics
Our findings are that the persona of the typical user is likely to be educated to a tertiary level,
35-65 years old and will live in the United Kingdom or the United States.
This translates to following design specifications
 Make effective use of images to make the website attractive as users of art galleries
want to see the range of photos. In general, internet users like to see an attractive
interface with attractive images.
 Due to the target demographic identified (US/UK based, upper-middle, upper class) we
will have information on how to buy art pieces, prices and shipping information as users
are likely.
 By researching other well-known galleries based locally that provides service on o
global scale, we will also design our website to be efficient (pages fast to load), easy to
navigate and make it easy too easy to accomplish tasks
 The website must be compatible with all major web browsers like all well-known and
reputable galleries have and that are compatible with a range of devices, from desktop
to mobiles.

18
Design
Introduction
The design of the Island Gallery website must meet the functional requirements while
appealing to the typical consumer of art. The design of the website follows from the analysis
of the target market and an analysis of the functioning requirements. The layout and colour
behaviour must be aimed at the target audience.
Relevance of User Demographics
Significant differences exist between the genders in respect of the perception of a
site. Research has found that while the genders are equally likely to use the internet (Moss,
Gunn, and Heller, 2006), research has found that gender exerts a great influence on behaviour.
In a 2004 study at Cornell University found that males were found to have a longer duration of
fixation than females and were found to react differently to images, which affected memory
performance (Pan et al. 2004). Females tend to be more likely to review an entire page, while
males focus on fewer areas. A study conducted on differences in gender preferences found that
23 aesthetic factors significantly affected perception. (University of Glamorgan, 2005).
This study of 60 websites found that males favour the use of straight lines (as opposed to
rounded forms), fewer colours in the typeface and background, and formal typography. There
are statistically significant tendencies for each gender to depict images of their own gender and
that females are more likely to use informal language, abbreviations, specific colours (such as
white yellow and pink when males prefer blue and black), and curved lines to avoid a horizontal
layout (Moss, Gunn, and Heller, 2006).
Layout
The standard format of layout of the website was planned as below:
 Banner
 featuring an art image and the gallery’s logo
 Navigation Bar
 The navigation bar will include the options of Home, Exhibition, About,
Contact, Location, Staying in Galway, How to Buy.
 When you highlight the exhibition section, it will lower down to provide the
option of navigating to the page of an individual artist.

19
 The same navigation applies to the other buttons on the menu bar.
 Main body
 Footer – including general contact details and icons leading to social media pages.
The following is a wireframe prototype of the website layout. Further wireframes are available
at Appendix A.
Content
The content and how a website is displayed is very important for both a user accessibility and
user focus. The website will consist of ten pages. The hierarchical structure below shows the
main pages of the website and the subpages.
Figure 15: Website Structure

20
Figure 16: Table ofContents
Home The home page will give customers a general introduction to the business.
There will be a photo of the gallery above the text area where it will explain
the mission of the gallery.
Exhibition The Island is a small venue and can accommodate only one exhibition at a
time. Therefore, the exhibition page will always have details of the current
exhibition including the theme, artist involved, opening event and event
dates.
Artist - Carol
Ann Carrigan
Biography of the artist and link to artist's personal website.
Artist - John O
Grady
Artist - Colin
Carruthers
About Us This page will give users further information in regards to the founding of
the gallery, previous exhibitions and the current patrons.
Contact Us Details are address, email, phone, social media (Facebook, YouTube,
Instagram, Twitter)
Location Directions will be provided for both those travelling into Galway City to
visit the gallery and for those walking to the venue. A google map is
embedded on the page.
Staying in
Galway
In order to attract art collectors and enthusiasts from abroad, this section
will provide information on accommodation in Galway, distance from
airports, other events in Galway, etc.
How to Buy As all artists have different methods of selling, details will be updated on
this page for each exhibition.

21
Colour Behaviour
The information gathered from the user analysis allowed the design team to decide upon the
colour palette of the website. Great consideration was given to this and from research we
identified these important facts outlined by Smith (2014) that would be pivotal in our colour
decisions:
 35% of women said blue was their favourite colour with green coming in at third place
with a 14% approval rate.
 Almost the same result applied to men as they have blue as their favourite colour and
green as their second.
Source: Kissmetrics, 2016
It was important that we addressed these points because according to Singh (2006) “people
make up their minds within 90 seconds of their initial interactions with either people or
products … (and) about 62‐ 90 percent of the assessment is based on colors alone.”
This research translated into our design as shades of the colours Blue and Green play an
important role of our colour scheme. Our logo uses shades based on Blue (#00b8ea) and Green
(#9ec26a).

22
The text colour was also adjusted to fit the colour profile from black to a dark shade of purple
(#15143e).
A conscious decision was taken to strategically use the whitespace of the web pages. In order
to “guide (the) user's attention to certain elements, as stated by Muller (2012) we will use the
whitespace to guide the user’s attention to the main content, primarily the artwork and secondly
the relevant text. We decided to opt for a white background in for the background for our final
design as it created a design that was more clean and modern.
Object Creation
Logo
A brainstorming session was held to explore potential designs for the logo. The following shows the
elements that we found were relevant to the gallery.
 Contemporary
 The gallery is a contemporary and modern in style and the logo should reflect
this also as it is an extension of the business and displays the gallery's aesthetic
online.
 Island
 While the island is completely integrated in the City of Galway. It is still a
unique location to have a gallery. Due to it being on a river, there is a sense it is

23
closer to nature as opposed to other areas of the city. To the east there is the
river Corrib and the canal to the west. There is a sense of spirituality and religion
associated with the island as well, hence the name Nun’s Island. There is a
convent located on the island for the past few centuries.
 People
 The artist and the clients are very important to the gallery as they are the life
and blood, providing the gallery not only with inspiration with their art but also
with the income needed to keep the gallery open and successful.
After much consideration, we decided to use the theme of water, due to the adjacent canal and
river to the gallery. We wanted to keep the design simple, yet elegant. We decided on creating
a logo consisted of two waves. To stay with our chosen colour scheme, we chose to have a blue
and a green wave. The name of the gallery would appear to the foreground of the two waves.
The following is the method used to create the waves.
1. Two rectangles were created and were filled in with the chosen colours.

24
2. The form the curved figures of the waves, you go to Edit>Transform Path>Warp.
3. Segmented parts of the rectangle appear and you choose the segment of where you want
to transform the rectangle.

25
We then used the Text function in Photoshop and typed Island Gallery and selected the font
Glanchló. Glanchló is a relatively new designed font, which has influences from fonts of Petrie
that were used in the 19th century and from Colm Cille’s font, that was created in the 20th
century (Gaelchló, 2016). This font, which reflects the writing by the Irish in bygone eras,
portrays a sense history and Irishness. We thought this to be relevant to an Irish gallery such
as Island Gallery.
Logo Prototype 1
Logo Prototype 2.0
Logo Prototype 2.1

26
Banner
We created the website banner using Photoshop. The following steps were taken to produce
the banner:
1. Using the Marquee tool with a setting of 30px Feather, the desired area of the image
was selected and Ctrl+ X and CTRL + Y was selected in order to create a new layer.
2. The initial layer was deleted with the faded layer remaining.

27
3. A new window was opened and the banner image was placed on the canvas.
4. To place the logo onto the canvas, we first had to open the Photoshop file of the logo
we opened the two windows side by side by going to Windows>Arrange>2-Up Horizontal.
5. The logo layer is grouped layer that was done by going to Layer>New>Group. The
grouped layers were then dragged on the banner screen.

28
6. Once the logo was placed in the desired location, we trimmed the canvas and saved the
object.
Technology Utilised
JavaScript
The simplicity and versatility of JavaScript are the main reasons for adopting JavaScript. The
client requires a responsive website that can be accessed on mobile devices. JavaScript allows
the appearance of a webpages defined using CSS which has the ability to specify which media
the specific commands are to apply to. As a result, the content is formatted appropriately for
whatever device the page is being accessed with. Specific examples of the utilisation of
JavaScript include:
 the expansion of icons when hovering over an icon, an example being the social media
icons,
 the menu bar when the hovering over the artist icon, the menu expands to show more
options,
 on the artist’s pages when a user clicks on a thumbnail painting the larger version of
the painting appears.

29
The coding for the project was done using HTML and CSS in Dreamweaver. In addition, the
jQuery, fluid grid layouts and flexboxes were used to create a responsive website.
Photoshop
Photoshop was utilised to manipulate images including the resizing, cropping of paintings and
the creation of the logo for the Island Gallery.
Bootstrap Grid System
The bootstrap grid system was used to create a more dynamic layout for the paintings on
display. Bootstrap provides templates for forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions. In this project the Bootstrap carousel
plugin was utilised to cycle through paintings in the homepage.
Dreamweaver
Dreamweaver was utilised to edit the HTML, JavaScript and create new webpages.
Fireworks
Fireworks manipulated objects; the social media icons were edited to become transparent.
Search Engine Optimisation
In general search engine optimisation (SEO) requires small modifications to parts of a website
in order to have a positive impact on the site's user experience and performance in organic
search results. In general SEO is an integral part of good design as the focus is not on improving
the performance of the site in online search but to improve the overall user experience. Specific
steps have been undertaken to improve the SEO.
Section Steps Rationale
Header -
Tags
Each page has a title tag
linked to the topic of the
page
A title tag tells both users and search engines
what the topic of a particular page is.
Header –
Tags - Meta
Name
Provides a description of
the page
The meta name appears under the title tag the
contents of the title tag will usually appear in
the first line of the results
URL Each page is logically
named using words, the
directory structure is
logical
URLs containing relevant words provide users
and search engines with more information
about the page than an oddly named parameter
would

30
Content Each page has relevant, up
to date content
Organised useful and up-to-date content can
influence search engine performance if social
media sources direct users.
Evaluation of Design
For the purpose of evaluating the website's design, we used the Nielsen's Usability Heuristics
that was relevant to a website such this one.
Visibility of system status
This is achieved by displaying the name if the page in the well positioned beneath the
navigation. It allows users to know where they are located on the website.
Match between system and the real world
The website is laid out to the users need by displaying the main areas of interest in the
navigation bar for them to navigate to. This allows the user to find more information about the
exhibition, artists, gallery, location, staying in Galway and how to buy art, all of which are
areas of interest for art enthusiasts and collectors.

31
User Control and Freedom
From our tests we can confirm that there aren’t any unwanted states included in the website
that won’t allow the user to exit, or at least without further dialogue. The home button in the
navigation bar will allow the user to go back to the main page.
Recognition rather than recall
The users found the website to be very easy to use as it has a design familiar to other websites.
Even though one of the users stated the art thumbnails in each artist's gallery could benefit from
a behaviour when hovering over it with a mouse, they still knew by clicking on the image that
it would display a larger image below. All other users reached the same consensus.
Aesthetic and Minimalist design
A minimalist design was achieved by the use of white space and less saturated colours. Users
reported the website to look very attractive and had a “gentle feel” to it.

32
Testing
Browser Testing
Prior to release to the client the website was tested on multiple browsers and devices. The
website was either downloaded to each device via Google Drive or GitHub where the master
file of the project was stored or accessed via a USB key. The following are the results of our
browser testing.
Safari IE Chrome Firefox Opera
Navigation Bar functioning Yes* Yes Yes
Carousel Working Yes* Yes Yes
Social Media Icons Responsive Yes Yes Yes
Graphics adjusting Yes Yes Yes
Embedded Google Maps is functioning properly. Yes Yes Yes
Pages responsive to resizing Yes Yes Yes

33
Form allows user to input information. Yes Yes Yes
*In IE, the drop down list and carousel does not work unless the user accepts the browser to
run scripts. This is done by pressing Allow Blocked Content in the pop-up message at the
bottom of the screen.
To test how the browser would use on mobile devices such as smartphones, we used the
Multiscreen option on Dreamweaver. The webpages effectively adjust to the screen size. For
example, the navigation changes to a vertical list as opposed to a horizontal list. Images and
text rearrange themselves also in order to create a clean, sleek interface. Below are examples
of the web pages in mobile view.
Alpha Testing
During development, a log was kept on various bugs that needed to be resolved.Below is the Change
Log.
Figure 15 Version Log File
CHANGE LOG

34
v0.1.1
Updated footer - all pages
-Added an Address tag to first column
-Added Contact Us to second column
Edited custom.css
-Added a min height restriction to #mainbodycontainer
—Resolved a bug where image sizes would jump page around
Edited index.html
-Fixed carousel width and height so images would stop resizing.
-Added captions to carousel pictures
-Added links from carousel captions to Artist page
Edited exhibition-carol.html
-Fixed a bug where the paintings and descriptions did not match
Edited exhibition-colin.html
-Fixed a bug where the paintings and descriptions did not match
v0.1.2
Updated location.html
-Missing </a> next to Driving section
-Added Google map Embedded
Updated custom.css
-Altered #mainbodycontainer
- Added Min and Max height
Updated stayingingalway.html
-Added links to individual hotels
-Added links to open in new tab
Updated navigation bar
-Added Contact Page
-Altered Nav bar brand from <a> to <p>

35
Created contact.html
-Created page for a contact form
Altered aboutus.html
-Added address tag to address
-Altered Social Media icons to display correct order as footer
v0.1.3
Altered custom.css
-Updated font for the website
-Added hover on social media icons
-Altered #maincaontainer height
Altered locations.html
-Added Locations well under Nav bar
v0.1.4
Altered buy.html
-Added stock photos
Altered custom.css
-Removed #mainbodycontainer
Altered exhibition.html
-Added Well class
Altered contact.html
-Aligned well text to centre
Once the Alpha testing was completed by the development team user acceptance testing(UAT)
was undertaken.

36
User Testing
Users were given the main tasks that are assumed users will conduct on the website.
Task: Find the page with information regarding the current exhibition.
Expected Result: Go to Exhibition Page from Navigation Bar
Task
Successful
Comments
User
1
Yes No comment.
User
2
Yes No comment.
User
3
Yes No comment.
User
4
Yes There was a slight a pause before selecting exhibitions. The user
was looking at both About Us and Exhibitions.
Task: Show me how you would get more information about the artists.
Expected Result: Select an artist from the expanding Artist menu button.
Task
Successful
Comments
User
1
Yes User asked if the task was to choose just one artist, or if there was
another page with a general page for artists. Not clear once you click

37
into the Artist page to see clearly which artist it is, no large lettering
for example.
User
2
another page with a general page for artists.
User
3
User
4
*Note: each user wasn’t sure to choose one artist or if there was another page with a general
overview of the artists.
Task: Show me how you would use the Gallery.
Expected Result: go to the artist page
Task
Successful
Comments
User
1
Yes Easy to use
User
2
Yes Would be better if there was some response when the mouse
hovers over the thumbnail to show that it does something.
User
3
Yes No comment
User
4
Yes No comment.
Task: If you were living abroad and planning to visit this Gallery on Galway, where on the
website would you be tempted to go?
Expected Result: Go to Staying in Galway Page primarily and/or Location page.
Task
Successful
Comments

38
User
1
Yes User went to Staying in Galway page first and then to Location.
User
2
User
3
User
4
Yes User went to Location page first and then to Staying in Galway
for accommodation details.
Task: How would you go back to the home page?
Expected Result: Click on the Home button on the navigation bar.
Task Successful Comments
User 1 Yes No comment.
Task: Can you find any links to social media on the page?
Expected Result: Find the social media icons in the footer or in the About Page.
Task
Successful
Comments
User
1
Yes Found social media icons in footer. Suggested it would be better to
have more visible when the page opens, such near the top of the
page.
User
2
Yes No comment.

39
User
3
Yes No comment.
User
4
Yes Found icons by clicking on About Page.
Analysis of the user feedback
There were various improvements that were identified during the user testing that will be
implemented in the next upgrade of the website. They are the following:
Navigation
Bar
Make the navigation bar slightly larger in order to accommodate the mature
demographic.
Artists Have a more prominent header for each of the artist's page in order to make
the user aware which artists page they are on.
Social Media
Icons
Have the social media icons visible when page is open, either located near
the top or the sides of the webpage.
Gallery
thumbnails
Make the art imagery thumbnails more responsive such as zoom or highlight
when hovered over to suggest they are interactive. This could be addressed
in a further upgrade.

40
Conclusion
Overall, the team are satisfied with the end result. All the project objectives outlined in the
Introduction section has been achieved and the design fits the criteria of Nielsen’s Design
Heuristics’ which is considered to be an industry standard when it comes to design.
The Waterfall method used in project management allowed us to set the requirements at the
early stages with little interruption throughout the design stage. However, we do acknowledge
that elements of agile project management are necessary at times. For our testing phase, we
performed tests in iterations. After each iteration, we applied the changes to the code and
updated the website. The team also underestimated the amount of time needed for certain tasks
as we ran over the time in a few tasks. This resulted in having less time at the end for user
testing. We would have preferred to have allocated more time earlier on in the process to user
testing in order to get feedback and allow the development team to apply suggestions by users.
Credits
Artists Images
All content and resources displayed on the website submitted have been developed for this
project other than the images that represent paintings on exhibition.
The images of paintings on exhibition are copyright of the artists but can be used under the fair
dealing to copyright. This provides that a work may be used by anyone for the purposes of
research or private study without the permission of the author provided that an
acknowledgement identifying the artist is provided. In the case of this project, the true names
of the artist have been acknowledged on the website.
The websites of the artists are as follows:
 http://www.colincarruthers.com/
 http://www.johnogradypaintings.com/
 http://carolanncarrigan.com/

41
Other Images used:
 Banner - http://www.johnogradypaintings.com/category/landscape-paintings-
ireland/page/8/
 Social Media Icons - https://www.iconfinder.com/iconsets/social-media-free-8
 About Us Page - https://josephraffael.com/exhibitions/
 How to buy page -
http://www.kenmarecoastalholidaycottages.com/index.php/out_about/,
http://www.hallofframes.com/store-services/artwork-packaging-shipping.php
References
Applications, N. (2006) Browser market share. Available at:
http://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomd=0 (Accessed:20
November 2016).
Buckley, N. (2016) Luxury daily.Available at: https://www.luxurydaily.com/demand-and-spending-
for-art-declines-report/ (Accessed:22 November 2016).
Gaelchló. (2016). Clónna ó Ġaelċló. Available: http://www.gaelchlo.com/clonna.html. Last accessed
20th November 2016.
Humphrey, W.S. (1988) ‘Characterizing the software process:A maturity framework’, IEEE
Software,5(2),pp. 73–79. doi: 10.1109/52.2014.

42
ComScore Numberof mobile-only Internet users now exceedsdesktop-only in the U.S (2016)
Available at: https://www.comscore.com/Insights/Blog/Number-of-Mobile-Only-Internet-Users-Now-
Exceeds-Desktop-Only-in-the-U.S (Accessed:20 November 2016).
Kissmetrics (2016) How colors affect conversions - Infographic. Available at:
https://blog.kissmetrics.com/how-colors-affect-conversions/?wide=1 (Accessed:22 November 2016).
Muller, Gisele. (2012). Whitespace in Web Design: What It Is and Why You Should Use It. Available:
http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it. Last
accessed 19th November 2016.
Moss, G., Gunn, R. and Heller, J. (2006) ‘Some men like it black, some women like it pink:
Consumer implications of differences in male and female website design’, Journal of Consumer
Behaviour,5(4),pp. 328–341. doi: 10.1002/cb.184.
Pan,B., Granka, L., Hembrooke, H., Feusner, M., Gay, G., and Newman. J.,(2004). ‘The
determinants of web page viewing behavior: An eye-tracking study’ Available at:
https://pdfs.semanticscholar.org/8578/565b9171eaa829a0635e6c7c15366bffe863.pdf (Accessed:24
November 2016).
PRWeb (2015) Art Gallery’s guide to marketing art in new luxury style, reveals how to confront
disruption in art retailing. Available at: http://www.prweb.com/releases/2015/01/prweb12478177.htm
(Accessed:23 November 2016).
Singh, Satyendra. (2006) "Impact of color on marketing", Management Decision, Vol. 44 Iss: 6,
pp.783 - 789
Smith, Jeremy. (2014). How to Use the Psychology of Color to Increase Website Conversions.
Available: https://blog.kissmetrics.com/psychology-of-color-and-conversions/. Last accessed 18th
November 2016.
Tate Modern. (2014). Art & Artists: Digital Audience Research Report. [ONLINE] Available at:
http://www.tate.org.uk/download/file/fid/37523. [Accessed 26 October 2016].

43
University of Glamorgan (2005) Key Website research highlights gender bias, news centre
(2005) Available at: http://news.glam.ac.uk/news/en/2005/aug/17/key-website-research-
highlights-gender-bias/ (Accessed: 24 November 2016).
Appendix A - Wireframe Diagrams
The content and how a website is displayed is very important for both a user accessibility and user
focus.

Web design and development ms801

Recommended

Recommended

More Related Content

Similar to Web design and development ms801

Similar to Web design and development ms801 (20)

Recently uploaded

Recently uploaded (20)

Web design and development ms801