Our Blog - Design Concepts For Sri Lankan Temple Websites
1. Introduction
In now a days, websites that related to Buddhist religious places are growing up step by step in Sri Lankan web designing field. But most of them are in a low quality background. Those designers have not followed the steps or principles that designers must use for the designs such as design principles, colour schemes, typography, usability heuristics, HCI etc.

As a result of that, many of the Temple Websites have failed to provide 100% simple and clear information to the viewers. The main objective of this research is doing a successful research about "How to design a website that relates to Sinhala Buddhist Culture", using proper designing concepts and rules to provide 100% clear data and information.

For this research, analyst has selected only modern Buddhist Temples. It does not count the historical and ancient temples of Sri Lanka (Anuradhapura to Kandyan Era). From comparing the qualities of existing websites, analyst hopes to concern about these points.

Design Principles
Typography
Usability Heuristics
Symbols
Colour Schemes
Human computer interaction (HCI)
Selecting suitable content
Organizing the content
Sri Lankan Buddhist Cultural Background
Selecting the target audience etc.

Justification :
Most of the Sri Lankan Temple Websites are stereotyped
Most of the Sri Lankan Temple Websites are narrow of design concepts and usability heuristics
No data and information that linked designing concepts and Sri Lankan Buddhist culture straightly

Objectives :
To promote websites that relates to Buddhist Temples
To give some knowledge and tips for designers
To educate the students who studies web designing subjects
To introduce some modern designing trends

Methodology :
Secondary Data Collection - Related websites
Secondary Data Collection - Related books
Secondary Data Collection - Related articles
Secondary Data Collection - Lecture notes and slides
Primary Data Collection - Questionnaires (Open-Ended)
Primary Data Collection - Self-Experiences

Limitation :
No data and information that linked designing concepts and Sri Lankan Buddhist culture straightly

References :
Nielsen Norman Group. 1998. [ONLINE] Available at: https://www.nngroup.com/. [Accessed 10 November 15].
Wikipedia [ONLINE] Available at: https://www.wikipedia.org/. [Accessed 10 November 15].
Google Scholar [ONLINE] Available at: https://scholar.google.com/ [Accessed 10 November 15].
Creative Bloq [ONLINE] Available at: http://www.creativebloq.com/ [Accessed 10 November 15].
Sri Devram Maha Viharaya [ONLINE] Available at: http://www.sridevramvehera.org/ [Accessed 10 November 15].
Sri Sambodhi Vihara [ONLINE] Available at: http://www.thebuddhist.tv/home.php [Accessed 10 November 15].
Siri Vajiraramaya Temple [ONLINE] Available at: http://www.vajirarama.lk/ [Accessed 10 November 15].
Gangaramaya Temple [ONLINE] Available at: http://gangaramaya.com/ [Accessed 10 November 15].
Vijitharamaya [ONLINE] Available at: http://www.vijitharama.org/ [Accessed 10 November 15].

2.1 Secondary Data Collection - Sri Lankan Buddhist Culture
When looking at the Sri Lankan historical sources like Maha Vanshaya, it has been clear that ancient people in Sri Lanka have a strong culture and own arts, even before Prince Vijaya's arrival. However, there were significant increments of developing process in Sri Lankan paintings, models, crafts, constructions after the arrival of Theri Sangamiththa in 250 BC. Due to that reason Sri Lanka got a very unique and rare cultural background. Sri Lankan culture is always connects to Buddhism. Most of the ancient and modern paintings and crafts are religious works. Buddha Statues (Both crafts and models), Paintings that shows Lord Buddha's life stories are some great examples.

As a result of the Southern Indian invasions and the attacks of Jaffna Kingdom, the Sinhalese kingdom had been shifted to the South West parts in different periods. Such as; Polonnaruwa, Dambadeniya, Yapahuwa, Kurunegala, Gampola, Kotte, Kandy. In consequences Sri Lankan Buddhist arts and culture have various kinds of different features (Multiplicity). For an example, today (Colombo Period) artists draw realistic images with realistic colours. But in Kandyan period, artists have used many symbols to represent objects and stereotyped colour schemes.

After the passing away of The Lord Buddha, people were afraid to create Buddha Statues. For worshipping purposes people used Bo leaves, Lotus flowers, Footprint of Lord Buddha, Dhamma wheels (Dharmachakra), Bo Trees, Swastikas, Sthupas (Pagoda) to represent Lord Buddha. According to "Buddhist symbolism" article in "Wikipedia", the meanings of those symbols are as follows.

Lotus Flower - Purity and Enlightenment
Dhamma Wheel - Knowledge
Swasthik - Auspicious
Foot Print - Lord Buddha
Bo Leaf - Liberation
Sthupa - Noble Eightfold Path
Buddhist Flag (After 1885) - Buddhism
Mudras - Actions of Lord Buddha

Conversely in Sri Lanka, artists have used very unique symbols. Most of them are Sinhalese traditional designs (Flowers, decorations, and creatures) like Conch shell, Filled pot (Punkalasa), Stone pillars or Stone pillars with sthupas, Guardstones, Moonstones, Sun, Moon etc.

Moonstone - Nirvana (Enlightenment)
Guard Stone - Safety
Filled pot (Punkalasa) - Prosperity
Conch Shell - Auspicious
Sun - Perpetual
Moon - Perpetual
Sthupa with Stone Pillars - Historical
Liyawela (Sinhalese traditional decoration) - Identical

Colours can play a major role in designing. Colours can immediately attract the attention. Colours can express different types of meanings. Some colours have several meanings. Colours like red, green and blue are known as primary colours. The meaning of the colours can be change due to the countries, religions, nations, states, provinces, regions, zones, continents etc.

Zammitto concludes that, "It is possible to do a theoretical distinction of three backgrounds for meanings attached to colour. an innate, a personal, and a cultural background. We are born and bred in cultures. Meanings of colours are shared connotations of feelings, sensations, atmosphere, thoughts, and moods. It could happen that meanings could vary through historical timeline and different cultures." (p.03)

To discuss about the common meanings of the colours, the analyst have selected some of the major colours.

• Black - Death, unbearable, evil, criminality, hidden aspects, sinister, depression, grief, pain, repression, authority, style.
• Blue - Cold, peace, depression, sadness, relax, calm, piety, wisdom, introspection, solitude, loneliness, contemplation, distance, infinitude, water, sky, youth, teens, royalty, trust.
• Brown - Wood, comfort, ground, earth, substance, physical, worn.
• Green - Nature, fertility, fecundity, balance, freshness, growth.
• Red - Love, passion, excitement, appetite, health, courage, majesty, hot, danger, blood, weapons, aggressiveness, power, fire, hell, revolution.
• White - Light, purity, innocence, cleanness, spiritual, peace, surrender, completion, holiness.
• Yellow - Intelligence, logical thinking, innovation, spirituality, hope, joy, delicate, cowardice, ruin, shame, illness, decadence, rage, criticism.
• Orange - Vital force, strength, endurance, social behavior, warm, optimism.

Buddhists use white colour to represent simplicity, merit, enlightenment, devotion, spiritual, sacred, pure, good and Lord Buddha's relics. Buddhists use black colour to express unclean, sins, bad, evil etc. Sri Lankan Buddhists believes lot of Buddhist gods and demigods. Each god or demigod has an unique colour. The colour of the god Upulvan (Vishnu) is blue. The colour of the god Kataragama (Murugan) is red. The colour of the god Natha (Maitreya Bodhisathwa) is yellow.

In Anuradhapura and Polonnaruwa periods (377 BC - 1017 AD), Sri Lankan artists used orange, yellow, brown colours frequently. In Gampola and Kotte periods (1345 AD – 1597 AD), artists used yellow as a main colour. In Kandyan period (1593 AD – 1815 AD), artists used red as a main colour (Background colour). Furthermore Kandyan artists have used only white, green, brown, black and yellow as foreground colours.


2.2 Secondary Data Collection - Modern Designing Concepts
Usability Heuristics comes under Human Computer Interaction (HCI). World famous web usability consultant Mr.Jakob Nielsen states 10 general principles for interaction design (1995). He had listed 10 usability heuristics from using the main designing concepts (Design principles). This is the process to systematically inspect the interface for usability problems.

• Visibility of system status –
Web developers must continuously inform the user about "What is going on". Or else user will leave the website. To provide feedback about the current status of the website, developers can use,


• Match between system and the real world –
Always the system must speak the users' language. Developers must include simple language with meaningful common and simple words, mnemonics, abbreviations etc. System oriented languages will confused the user.

• User control and freedom –
Most of the users do not like to feel trapped by the computer. Developers must provide clearly marked exits like Cancel buttons, Undo buttons, Redo buttons, Interrupt options, Close buttons, Default options etc.

• Consistency and standards –
Designers must apply a same visual appearance across the website (E.g. – Same information controls in the same location on all windows)

• Error prevention –
Developers must avoid errors.

• Recognition rather than recall –
Developers should minimize the user's memory load. Hence people have a very small and low memory. As developers he or she should always promote recognition over recall. People consider recognizing something than recalling it from the memory is easier. Thus web developers must use GUI (Graphical User Interface) controls to facilitate users to recognize options (E.g. – Menus, list boxes, combo boxes, calendar controls etc.)


• Flexibility and efficiency of use –
A website can be viewed by three types of users.
i. Novice users
ii. Intermittent users
iii. Expert users (Power users, Experience users)

Developers must provide user friendly options for novice users (Allow history systems, navigational jumps etc.). But for the expert users, developers can provide key board and mouse shortcuts (To perform frequent operations quickly).

• Aesthetic and minimalist design –
Nielsen (1993) states that, "Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility". (p.20)

• Help users recognize, diagnose, and recover from errors –
Developers have to provide instructions to users directly to avoid from errors and mistakes.

E.g. -
If the user fills a contact form, developers have to inform his/her mistakes immediately. Think the user has forgotten to fill some of the details. As a result of that the system will remind that he/she should fill the details.

For these kind of mistake developers can use a red colored single line. It will appear with some instruction. Generally people use red colour to get the attraction or to symbolize something wrong. As a result of that, user will defiantly see the notice.


After the user submits the form, developers should inform the status of the submission (Successful or Fail). Because users do not know about the backend process.


The error messages and solutions must in plain and simple language (No codes or System oriented languages).

• Help and documentation –
All the information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Designers use "Design Principles" to make their designs attractive and successful. Lidwell, Holden and Butler (2003) conclude that, "The use of well-established design principles increases the probability that a design will be successful" (p.13).
Lidwell, Holden and Butler states a paraphrase of William Strunk's in "Universal Principles of Design".

"The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles."

It is better to discuss about "Main" designing principles.

• Proximity –
Proximity means the bond or relationship between elements on a page (Arrangement of elements that relate to one another).

• Proportion –
The feeling of unity created when all parts (Sizes, amounts, numbers) relate well with each other.

• Contrast –
It means the juxtaposition of opposing elements. Big and small elements, black and white texts, squares and circles can create contrast in a design.

• Balance –
It means the distribution of the visual weight of objects, colours and textures. Balance can be dividing into 5 parts.
i. Symmetrical Balance (Formal balance) – Equal weights and equal sides.
ii. Asymmetrical Balance (Informal balance) - Unbalance.
iii. Horizontal Symmetry - Mirror image; horizontal side.
iv. Approximate Horizontal Symmetry - Both sides looks same. But not a mirror image.
v. Radial Symmetry – Object is symmetrical around the center point.

The Rule of Third / Golden Ratio is also a balancing technique use by designers.

"The rule of thirds is a technique derived from the use of early grid systems in composition. It is applied by dividing a medium into thirds both vertically and horizontally, creating an invisible grid of nine rectangles and four intersections." (Lidwell, Holden and Butler 2003: p.208)

• Emphasis –
Determine the weights, spaces and perspective and where the eye dominance goes first in a design. It is the focal point or center of interest of a composition (First element of the visual hierarchy).

• Rhythm and Repetition –
The elements that used repeatedly are known as rhythms. Rhythms are well organized movements. Repetitive elements throughout a design can be used to enhance and clarify information.

• Unity –
Unity is the combination of all the design principles.

Butterick (2007) states that, "Typography is the visual component of the written word. Typography is for the benefit of the reader, not the writer." Typography plays a major role in web designing. Reader's attraction and attention is depending on the design and typography. In web typography, the analyst had founded many font typefaces (Serifs, Sans Serifs, Display, Monospace, Handwriting etc.). Among them Serif and Sans Serifs fonts are uses commonly.

• Serif fonts –
Brackets are the supportive curves which connect the serif to the stroke.
E.g. - Designing Concepts into a Temple Website

• Sans Serif Font –
Un-bracketed serifs are attached sharply and usually at 90 degree angles. Designers use "Sans Serif" fonts than "Serifs". Hence Sans Serifs are legible and readable than Serif fonts.
E.g. - Designing Concepts into a Temple Website

Designers use Capital fonts rarely. Usually capital fonts are used for titles or to get the attention of the reader. Before use capital fonts, designers must think twice. Hence capital fonts are hard to read quickly.

Nowadays web designers use Web Fonts. Web fonts are downloaded by the user's browser while rendering the webpage, and then applied to text. Developers can reduce the file sizes and add various kind of spectacular web fonts. The default size of a web font is 16px (1em, 12pts, 100%). The default colour is black.

Readers do not like to read lengthy texts. Readers want quick information. Developers and designers should apply the data and information short and sweet. Left aligning the texts and breaking the sentences into paragraphs are some of the tricks that designers can use. The main objective of a website is to provide 100% clear data and information (Readability and legibility). It is clear that typography is the main key to achieve this objective.


2.3 Secondary Data Collection - The Content
Most of the Sri Lankan Buddhist Temples are like institutes. Not only a religious place. Most of the social services, activities, programs and projects in villages and towns are conduct and organize by Buddhist Temples. Therefore temples are endowed with various kinds of organizations and foundations. Such as; Dhamma school, Laymen's Council, Laywomen's Society, Young Buddhist Society, Dhamma School Development Society etc. Strengthening of the town folk, strengthening of students, strengthening of women, the community health service, inculcating the doctrine are some of the examples for the social services. Some temples organize weekly activities (E.g - Dhamma sermons). Some temples organize monthly activities (E.g – 'Sil programmes').

It is clear that designing a website for a Sri Lankan Buddhist Temple is not an easy task. It is compulsory to do a brainstorm and mind mapping as an idea generation (Before developing). Some temples have long histories. Some temples were directed by several chief incumbents. Some temples have lot of spectacular sceneries like pagodas, bodhi trees, shrine rooms, demigod shrines, statues, paintings, halls, ponds, gardens etc. Because of these reasons, designers must do a proper research about the temple from A to Z.

After the research part the designers can organize the content in a proper and decent way. To explain the organizing scenario the analyst had created a sample.

• Home Page –
The reader's next step is depends on the creativity of the Home page (Main page). If the Home page is not arranged in a proper way, the user will leave the website. Most of the designers use a slideshow to give a better understand, what's the site is about.

• History –
History page contains the history of the temple as well as the history and importance of the village or town etc.

• Gallery –
Developer can store all the photos and videos in "Gallery Section". Designers can divide this section into sub sections (Sceneries, festivals, community services and projects). It is better to upload quality photos and videos. Designers must aware about the colour quality and sizes of the photos. Compressed photos help to load the web page quickly. Most of the designers use thumbnail galleries to display photos.

• Societies -
This section contains all the details and information about the societies, foundations and projects of the temple. The history of the society, objectives and visions, rules and regulations, memberships, social services can be added.

• News / Programs –
In this section designers can store all the upcoming and past news / programs of the temple. Nowadays this news section can be seen in the website Home page.

• Contact –
Contact section contains the contact numbers, addresses, social media links, E-Mail addresses etc. Some developers embed a "Google Map" iframe to give a better idea about the route. Today most of the designers put contact details in the footer section.

• Guest Book –
Readers can write their thoughts, ideas, suggestions, opinions, accuse in the "Guest Book" page.

3.1 Primary Data Collection - Site Comparison
This Section is not included due to some reasons !


3.2 Primary Data Collection - Questionnaires
The analyst have prepared a small Survey Form and analyzed some ideas and thoughts (Data and Information) of people who are engaging in Web Designing Field. The main objective of this survey is to get a better idea about "Important factors and points that we should concern in Web Designing". The survey form is given below.



According to their feedbacks, 75% have accessed a website that relates to Sri Lankan Buddhist temple within a week. 25% can not remember the last time they have visited a website of a Sri Lankan Buddhist temple. The official website of "Temple of the Tooth Relic" is the most popular website. More than 50% have selected "Structure" for the 3rd question.

According to their feedbacks, all of them believe the main objective of a Temple Website is "To provide Data and Information" such as; Temple's location, History, Cultural value etc. Furthermore all of the participants believe, we can promote religious websites rather than commercial websites.

According to their opinions, most of the web designers stick to a similar design for Buddhist temples in Sri Lanka because of the; Lack of experience, Lack of new samples, Lack of knowledge, Not examine existing websites, As a way of reducing the cost, Not aware about latest technologies and designs, The chief incumbent's guidance etc.

100% do not accept the usage of animated gifs. According to participants, usage of animated gifs can distract the users and limit the loading speed. 25% have proposed to use CSS3 technologies (Keyframes and Transitions).

If the chief incumbent proposes a bad design, 50% of the participants will try to change his mind. 25% will try to propose another design. Other 25% will do whatever he says. According to the participants, 75% of them have designed a website to a Buddhist Temple.

4. Conclusion
Most of the existing websites of Sri Lankan Buddhist Temples are designed in certain structure. Their main objective is to provide data and information. Designers have used lot of images, videos and texts around the web pages and designers didn't concern about usability of the website.

But designers can improve these kind of websites in a user friendly way. Everyday web designing trends are updating rapidly. Designers have to follow them. If designers stick into a same and old structure, the users will never visit the website. Most of the modern websites have many simple designs. It will help to refer the website without any physical issue. Readability and Legibility is also important. Designers should always concern about novice users. Designers should guide the visitor through the website. Designers should always inform users, what's going on and what should he or she must do next. Then user will definitely understand that this is a user friendly website and they might recommend the website to others.

According to the research in this report and data that analyst had gathered from the questionnaire, it is clear that designers have the opportunity to create a new trend for Sri Lankan Buddhist Temple Websites.


By : Danula Randika Wickramaarachchi
From : Sri Lanka
Published Date : 2016.09.02


5. References
o Zammitto, V. ( ) The Expressions of Colours [Online]
Available from: http://www.sfu.ca/~vzammitt/papers/zammitto-digra-TheExpressionsofColours.pdf [Accessed 28th May 2015]

o Unknown (2014) Understanding the Meaning of Colors in Color Psychology [Online]
Available from: http://www.empower-yourself-with-color-psychology.com/meaning-of-colors.html [Accessed 28th May 2015]

o Nielsen, J. (1993) Usability Engineering, AP Professional

o Nielsen, J (1995) 10 Usability Heuristics for User Interface Design [Online]
Available from: http://www.nngroup.com/articles/ten-usability-heuristics/ [Accessed 30th May 2015]

o Unknown ( ) HUMAN–COMPUTER INTERACTION [Online]
Available from: http://www.prenhall.com/behindthebook/0132240858/pdf/Kendall_Feature2_Human_Computer_Interface.pdf [Accessed 30th May 2015]

o Lidwell W, Holden K, Butler J (2003) Universal Principles of Design, Rockport Publishers

o Segalini, A. ( ) Typography basics [Online]
Available from: http://www.as8.it/handouts/typography-basics.pdf [Accessed 31st May 2015]

o Lupton, E ( ) thinking with type [Online]
Available from: http://www.thinkingwithtype.com/misc/Beautiful_Books.pdf [Accessed 31st May 2015]

o Butterick, M. (2010) Typography for Lawyers, Jones McClure Publishing

o Butterick, M. (2012) BUTTERICK'S PRACTICAL TYPOGRAPHY [Online]
Available from: http://practicaltypography.com/ [Accessed 31st May 2015]

o Bringhurst, R. (1992) The Elements of Typographic Style, Hartley & Marks Publishers

6. Comments
Thanks for reading. Leave a comment to let us know what you think...