Unit 14 Website Design Sample Assignment

Concept of Key design concepts and factors considered in developing a website

The planning and creation of HTML driven web pages to be displayed over World Wide Web is called website designing.

From the time a user enters the website, till the time he leaves, website design leaves a great impression on his mind. Everything else, like content, images, videos etc. come later. Design tells us ‘how’ and ‘why’ to use the site. Web designing consists of some key elements as such:

• Website Layout – The way in which graphics, text and advertisements are arranged over the web page is called layout. The purpose is to provide information at a glance by maintaining integrity, balance and consistency all over.
• Colour – The colour across the web page depends upon the organization and client for whom the website is being prepared. It may range from simple to classy, from black and white to multi coloured design.
• Graphics – The arrangement of images, clipart and icons, logos to enhance the creativity are called graphics. These are needed to be placed appropriately to increase user-friendliness, in line with the colour and content of the website and keeping the load time minimal.
• Fonts – Proper use of fonts and styles must be done which are of readable size and attract user attention.
• Content – Usage of relevant content which may together with graphics can enhance the overall appeal of website, must be done. The text of website must always be useful and illustrative so that users may understand the underlying objective of the website. It must be keyword rich and search engine friendly to get higher franking in search results.

Some of the fundamental factors to be considered while designing a website are:

• We need to know about our target audience, their likes and dislikes and what they really want to read about
• We must know what is the purpose of our website, why exactly we need to develop it
• The objective of our website, what we want our website to convey
• While designing our website, we must sketch often. Sketches are easy to do, fast and cheap. They help us in getting new ideas which is not possible on working electronically.
• We must also generously make use of white space. These help users give a break and helps in readability. The white space must be in sync with the font size, the colour and the content to be displayed.
• Use of grids must be done, which is in-fact proper alignment of text.
• On a webpage, only one single thing must be emphasized.
• It must be considered what are competitive websites are displaying
• Website must be easily navigable and accessible
• Choose backend program, like content management system with care
• Website must be compatible with various browsers
• Website must be protected against online threats like virus attacks and online transactions, for this they need to add SSL certifications. Regular security checks need to be performed.
• It is important to integrate with social media, which is more or less like word of mouth advertising. Customers get to know about the brand, and get in touch with the latest updates.
• With increasing use of mobile phones, people have started using internet with variety of tablets and smart phones along with computers and laptops, these days. Therefore, website must be such that it can be viewed any kind of devices whether on mobile or on web.
• Users must be able to surf the website quickly and easily. They must be able to grasp all the functions of the website and must be able to find out what they are looking for quickly.
• Website must not take long time to load, it must have images that are not bulky and makes website structure smooth.
• During website planning stage, needs of target audience must be considered.

In order to run an online business help, there are certain legal requirements which must be considered. Our website must comply to :

• The data protection act 1998
• The privacy and online communications regulations
• E-Commerce regulations 2002 (In case of ecommerce portals)
• The Companies Act 2008
• The Disability discrimination act 1995.   

The purpose of website, its users, their needs and requirements

This is an ecommerce website which targets young men and women. This website, megashop, showcases  various categories including movies, music, games, mobiles, cameras, computers, healthcare and personal products, home appliances and electronics, stationery, perfumes, toys, apparels, shoes and much more.
This is a simple website with great features. It provides us with some awesome services like cash on delivery, 30 days replacement policy, EMI options, free shipping, free reverse pickup along with the great prices that they offer.
Megashop website has modules like register, login, blog, FAQ, About Us, Contact Us, My wishlist, checkout, search, sign up for our newsletter.
In today’s swiftly speeding scenario, young adults often do not have enough time to spend on one activity continuously. They try to handle multiple tasks at same time. Because of this, they prefer online shopping rather than traditional methods of going to market for every single purchase. Hence, this website is very useful for such people which offer wide variety of products ranging from daily use products to lifestyle products at one place.
These days people want quick results in every field. With online shopping they can save fuel cost, get the facility of free home delivery of their products, pick and select from wide range of products, while sitting at their home. They just require internet connectivity from their computers or smart phones to get through the process.
People can select products according to price, relevance, popularity, colour, size and varieties. We are given option to quickly view the product via ‘quick view’, to compare two similar products, add favourite products to your account wish list etc. which can be accessed later.

Proposal to meet the above user requirement

It was proposed to create an ecommerce business platform, targeting young adults and teenagers, where they can come up and discover accessories, apparels, footwear and electronics items, personal and healthcare products. Therefore, megashop was developed and designed to meet these requirements.
Megashop is an online store providing all necessary items for men and women. Products have been kept at low prices and there is provision of discounts. Navigation is easy which makes user experience fruitful.

Feedback from the client and potential users

People, teenagers and adults have started realizing the benefits of ecommerce industry and shopping online like savings, earning reward points, redeeming reward points etc and have accepted it along with traditional shopping methods. Ecommerce websites are in general, easy to use and any person who has access to internet can access such sites from anyplace.
Users of megashop illustrate benefits of online shopping as feedback. Many more benefits of using ecommerce websites, such as:

• Working on these ecommerce sites saves time, energy and money as people do not have to go out to market every time they require something.
• People get detailed information about what competitors are selling.
• Ecommerce websites are available online for 24 hours, 7 days a week and for 365 days a year. So people can also buy on holidays without having to worry about crowd or weekend rush.
• Customers can see online, which product is trending and which product is old fashioned. Buying decision is based on availability of product, choice, quality, colour, and price.
• Ease of availability accompanied by ease of replacement, instant query redressal via online chat, phone call and email have brightened prospects of online shopping even more.
• Payment methods are very secure on such websites. Technologies such as secure socket layer (SSL) and digital certificates have come into existence to provide secure payment gateways. People may make the payment via debit card, credit card, net banking or as cash on delivery.

The structure of the website, page layout and navigation

The megashop website is created in a hierarchical structure. A hierarchical representation of the website structure will give an idea and understanding of how the entire website functions and how various modules are interrelated. Home page is connected with a number of sub pages.

Figure : Website structure

On every page, text and images are arranged in form of grid. Page is divided into three section. Header, footer, body.  Page body is divided into two parts, left and right column. Content is neatly arranged in between columns.
The navigation of website is very smooth. Home page can be accessed from any of the sub pages the menu. There are forward and backward arrows to flip between the images.

Here are some of the screenshots from the website :

Figure: Home Page

Interactive features over the website like contact and enquiry forms, checkout options

Megashop, has two interfaces that require user interaction. These are contact us form and checkout. User is required to enter his personal details like name, phone number and address and write his query in the space provided and submit it. Megashop customer care team will contact him, with the required solution at earliest.
Another interface that requires customer input is the checkout screen. When user selects an item, it goes to the shopping cart. User has the facility to update the quantity in cart, add and remove items from cart, continue shopping or checkout. At checkout option, user has to enter his correspondence details, and then enter payment details. Payment can be done via credit card, net banking or debit card and is secured via SSL. User may also apply various discount coupon codes at checkout.

Utility of  html, CSS, javascript and any other languages in implementation

No matter how small our business is, it will need a web presence sooner or later. If you have slightest of idea, it can be built up into well flourished website by the use of simple web tools available across the market these days. You will find plenty of options for synching your website with social media tools like Facebook pages, twitter profiles, you tube channels and PayPal accounts.
These days it’s very easy to build your own website, by making use of web design tools without skimping on quality.
There are softwares available in market these days which allows us to make websites in desktop publishing format, called web authoring tools.
There are various scripting languages available these days, which are used to add functionality to our websites. These help us in placing dynamic advertisements, graphic displays, menu items etc. We have client side and server side scripting languages which are helpful in validating our forms. Javascript, PHP, Python, PERL etc are examples of scripting languages. They have come up largely due to the evolution of internet as a communication medium. In megashop, I have applied javascript to validate the forms.
A combination of Web Authoring Tools, Scripting Language and Markup language is essential in completion of a fully interactive website, which is appealing and user friendly. Google sites are an example of web authoring tool, which has been used here.
Web authoring tools and scripting languages not only make the task of web developers easy but also save lot of time and effort of developers. The use of such tools gives a good appearance to the website and makes it look professional. Most commonly used Markup languages are HTML, XML, XHTML etc.
In development of this website, I have made use of HTML, Javascript, CSS, PHP and MYSQL.

Comparison of megashop website with existing commercial websites available on internet

Internet these days has empowered people to realize their entrepreneurial dreams. To start with an online business, all that you need is an idea, some investment and your computer. There are numerous ecommerce websites these days which provide services like door step delivery, selection of wide variety of products under one roof, 30 days replacement policy, cash on delivery in addition to various discount offers, great prices and hassle free shopping experience.
Megashop is a combination of all the latest techniques that are in use by popular ecommerce portals these days along with great graphics and smooth navigation facility, which makes user experience rewarding.

References:

1. What is web design [Online]. [Accessed on 12 November 2014]. Available on world wide web: <http://www.treefrog.ca/what-is-web-design>
2. Key factors for successful website [Online]. [Accessed on 11 November 2014]. Available on world wide web: <http://blog.shjones.com/4-key-factors-in-ensuring-a-successful-website.php>
3. Things to consider for website designing and developing [Online]. [Accessed on 12 November 2014]. Available on world wide web: <http://www.socialmediatoday.com/content/24-things-consider-when-designing-and-developing-website>
4. Top 10 things to consider for website designing [Online]. [Accessed on 7 November 2014]. Available on world wide web: <http://www.rightangleconsulting.com/Top10ThingstoConsiderWhenDesigningAWebsite.html>
5. Website Usability [Online]. [Accessed on 13 November 2014]. Available on world wide web: <https://www.webduckdesigns.com/pages/website-resources/usability.html>
6. Factors affecting website design and development [Online]. [Accessed on 13November 2014]. Available on world wide web: <http://cliffdwellerdigital.com/new-factors-affecting-web-design-and-development>