Designing And Developing A Website For Tribute Ltd
Design documentation
This report discusses the design of the proposed Tribute Website which is intended to help promote the business by creating an online presence. The website will provide users with all the information about the business including various albums and extended playlists that are available for purchase by the customers. It will also have information regarding the service policy and contact information which can be used to reach the business.
Design documentation
The website will be designed using a combination of HTML, CSS and JavaScript. Based on the requirements the requirements of the website, the following core website design principles should be followed in order to achieve a good design. These principles are;
- Purpose- The design of the website should be able to meet the purpose of the website. The design should be simple enough while maintaining a high level of usability to make it easy users to use the website to achieve a certain goal (MahMood, 2012).
- Communication- The language and the symbols used to communicate with the user should be implemented to make it easy for the user to understand everything in the website. The design should not assume that the user knows everything.
- Colors- The selection of colors used in the website should be able to achieve an aesthetic look for the website (Strickler, 2016). Color selection for backgrounds and fonts should be implemented in such a way that the text is visible in all the backgrounds used. Whitespaces should also be used to help minimize the clutter effect that occurs when too many colors are used as background colors.
- Typefaces- The typefaces used in the website should be readable across all devices whether it’s a small screen device or a large screen device. Any text in the website should be displayed using F pattern design that specifies that text should flow from the right to the left direction of the website. This is the standard pattern that is recommended for all websites as many users are used to reading in that pattern.
- Grid based layout- The layout of the pages making up the website should be grid based. Using a grid based layout enables the pages making up the website to be divided into sections thus improving the usability of the website. For example; dividing a page into header, content and footer section improves the readability of the website.
- Responsiveness- The end design of the website should be responsive across all devices to make it usable especially for small screen devices like mobile phones. The design of the website should be mobile oriented and should consider designing for mobile in every aspect of the website. This is because mobile phones are finding a very large audience thus it’s important for the design to consider mobile devices (Vitaly, 2008).
Based on these core website design principles and the requirements of the website, an annotated wireframe can be used to illustrate the design that will be used for the website. The figure below shows the annotated wireframe of the proposed design.
Development
Based on the wireframe shown in figure 1 above, the design achieved for the proposed website can be shown using screenshots of the website running in a browser. The website will be made of the following pages;
- Home page
The home page is the landing page of the website and is the first page that the visitor will see when the access the website. The landing page has been designed with the intention of creating an appealing design that is able to catch the interest of the user while also giving information about what the website is about.
The following screenshot shows the design achieved for the home page;
The code for each of the pages can is shown below;
- Home page
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta content=”text/html;charset=utf-8″ http-equiv=”Content-Type”>
<meta content=”utf-8″ http-equiv=”encoding”>
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
<title>Tribute Limited</title>
</head>
<body>
<div class=”main”>
<div class=”header”>
<div class=”logo”><img data-src=”images/Logo.png” alt=”LOGO” /></div>
<div class=”hmenu”>
<ul>
<li><a href=”contact.html”>Contact us</a></li>
<li><a href=”policy.html”>Service Policy</a></li>
<li><a href=”albums.html”>Albums</a></li>
<li class=”active”><a href=”index.html”>Home</a></li>
</ul>
</div>
</div>
<div class=”row”>
<div class=”container”>
<img data-src=”images/banner/banner.2.jpg” alt=”Tribute Limited” class=”image”>
<div class=”overlay”>
<div class=”text”>Welcome to Tribute Ltd. Entertainment is our passion</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-12 col-s-12″>
<h2>About Tribute Ltd</h2><hr>
<p>At Tribute limited we specialise in keeping our clients entertained. We specalise in music production through promotion of music albums for various types of artsits. The promotion of the albums is for both extend play albums (EP) and officially released albums. Through our strategic partnerships in the industry, our clients are assured of a consistent supply of music albums and for the artists there is a ready market for their content giving them an opportunity to focus on making music</p>
Core Website Design Principles
<p><h2>Music</h2><hr>
<h4>Albums</h4>
<p>Recently released albums</p>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image8.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Rocket Summer</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image7.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Fist</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image6.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Cross point worship</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image5.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Many Faces</a></p>
</div>
</div>
<h4>EP</h4>
<p>Recently EP</p>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image8.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Rocket Summer</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image7.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Fist</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image6.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Cross point worship</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image5.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Many Faces</a></p>
</div>
</div> class=”footer”>
<p>Tribute Ltd © 2018</p>
<p>Reach us through our social meida</p>
<a href=”https://www.facebook.com”><img data-src=”images/social/facebook.png” height=”50px” width=”50px” class=”social”></a><br><br><br><br>
<a href=”https://www.twitter.com”><img data-src=”images/social/twitter.png” height=”50px” width=”50px” class=”social”></a>
</div>
</div>
</body>
</html>
- Album page
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta content=”text/html;charset=utf-8″ http-equiv=”Content-Type”>
<meta content=”utf-8″ http-equiv=”encoding”>
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
<title>Tribute Limited</title>
</head>
<body>
<div class=”main”>
<div class=”header”>
<div class=”logo”><img data-src=”images/Logo.png” alt=”LOGO” /></div>
<div class=”hmenu”>
<ul>
<li><a href=”contact.html”>Contact us</a></li>
<li><a href=”policy.html”>Service Policy</a></li>
<li><a href=”albums.html”>Albums</a></li>
<li class=”active”><a href=”index.html”>Home</a></li>
</ul>
</div>
</div>
<div class=”row”>
<div class=”container”>
<img data-src=”images/banner/banner.2.jpg” alt=”Tribute Limited” class=”image”>
<div class=”overlay”>
<div class=”text”>Welcome to Tribute Ltd. Entertainment is our passion</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-12 col-s-12″>
<h2>About Tribute Ltd</h2><hr>
<p>At Tribute limited we specialise in keeping our clients entertained. We specalise in music production through promotion of music albums for various types of artsits. The promotion of the albums is for both extend play albums (EP) and officially released albums. Through our strategic partnerships in the industry, our clients are assured of a consistent supply of music albums and for the artists there is a ready market for their content giving them an opportunity to focus on making music</p>
<p><h2>Music</h2><hr>
<h4>Albums</h4>
<p>Recently released albums</p>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image8.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Rocket Summer</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image7.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Fist</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image6.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Cross point worship</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/album/image5.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Many Faces</a></p>
</div>
</div>
<h4>EP</h4>
<p>Recently EP</p>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image8.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Rocket Summer</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image7.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>The Fist</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image6.jpg” alt=”Album” height=”300px”>
Annotated Wireframe
<p><a href=”current.html”>Cross point worship</a></p>
</div>
</div>
<div class=”col-3″>
<div class=”aside”>
<img data-src=”images/ep/image5.jpg” alt=”Album” height=”300px”>
<p><a href=”current.html”>Many Faces</a></p>
</div>
</div>
</div>
</div>
<div class=”footer”>
<p>Tribute Ltd © 2018</p>
<p>Reach us through our social meida</p>
<a href=”https://www.facebook.com”><img data-src=”images/social/facebook.png” height=”50px” width=”50px” class=”social”></a><br><br><br><br>
<a href=”https://www.twitter.com”><img data-src=”images/social/twitter.png” height=”50px” width=”50px” class=”social”></a>
</div>
</div
</body>
</html>
- Policy page
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta content=”text/html;charset=utf-8″ http-equiv=”Content-Type”>
<meta content=”utf-8″ http-equiv=”encoding”>
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
<title>Tribute Limited</title>
</head>
<body>
<div class=”main”>
<div class=”header”>
<div class=”logo”><img data-src=”images/Logo.png” alt=”LOGO” /></div>
<div class=”hmenu”>
<ul>
<li><a href=”contact.html”>Contact us</a></li>
<li class=”active”><a href=”policy.html”>Service Policy</a></li>
<li><a href=”albums.html”>Albums</a></li>
<li><a href=”index.html”>Home</a></li>
</ul>
</div>
</div>
<div class=”row”>
<div class=”container”>
<img data-src=”images/banner/service.jpg” alt=”Tribute Limited” class=”image”>
<div class=”overlay”>
<div class=”text”>Service policy</div>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-12 col-s-12″>
<h2>Service policy</h2><hr>
<h4>Customers</h4>
<p>We have partnered with many artists to maintain a constant supply of music albums and extended play albums. Our artists are the best thus the customer is ensured of quality music that is controlled by our experts</p>
<h4>Artist</h4>
<p>As an artist, you should use minimum efforts to reach out as many audiences as possible. All your effort should be put in ensuring you are constantly releasing quality music to our audience. At Tribute limited, we take this burden from the artist to make it easy for the artist to concentrate on what matters the most. We promote the content to make sure it reaches as many people as possible.</p>
<h4>Service Policy</h4>
<p>We ensure quality service to all our clients who are artists and all our customers. </p>
</div>
</div>
<div class=”footer”>
<p>Tribute Ltd © 2018</p>
<p>Reach us through our social media</p>
<a href=”https://www.facebook.com”><img data-src=”images/social/facebook.png” height=”50px” width=”50px” class=”social”></a><br><br><br><br>
<a href=”https://www.twitter.com”><img data-src=”images/social/twitter.png” height=”50px” width=”50px” class=”social”></a>
</div>
</div>
</body>
</html>
- Contact page
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>
<title>Tribute Limited</title>
</head>
<body>
<div class=”main”>
<div class=”header”>
<div class=”logo”><img data-src=”images/Logo.png” alt=”LOGO” /></div>
<div class=”hmenu”>
<ul>
<li class=”active”><a href=”contact.html”>Contact us</a></li>
<li><a href=”policy.html”>Service Policy</a></li>
<li><a href=”albums.html”>Albums</a></li>
<li><a href=”index.html”>Home</a></li>
</ul>
</div>
</div>
<h2>Contact us</h2>
<div class=”row”>
<div class=”col-6″>
<form>
<input type=”text” placeholder=”Full names” required name=”name” ><br>
<input type=”email” placeholder=”Email” required name=”email” ><br>
<input type=”tel” placeholder=”Phone Number” required name=”phone” ><br>
<textarea name=”message”>
message
</textarea><br>
<button name=”sendButton” type=”submit”>Send</button>
</form>
</div>
<div class=”col-6″>
<div class=”mapouter”><div class=”gmap_canvas”><iframe width=”600″ height=”300″ id=”gmap_canvas” data-src=”https://maps.google.com/maps?q=Australia%20of%20Au&t=&z=13&ie=UTF8&iwloc=&output=embed” frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″></iframe><a href=”https://www.pureblack.de”>pureblack.de</a></div><style>.mapouter{text-align:right;height:300px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:600px;}</style></div>
</div>
</div>
<div class=”row”>
<div class=”col-6″>
<h4>Contact information</h4>
Email:[email protected]<br>
Phone: +23342423432323<br>
Website: www.tributeltd.com<br>
Address: 1st avenue
</div>
<div class=”col-6″>
<h4>Opening Hours</h4>
<table class=”table”>
<tr>
<th>Day</th>
<th>Opening Hours</th>
</tr>
<tr>
<td>Monday</td>
<td>08:00AM to 04:00PM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>08:00AM to 04:00PM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>08:00AM to 04:00PM</td>
</tr>
<tr>
<td>THursday</td>
<td>08:00AM to 04:00PM</td>
</tr>
<tr>
<td>Friday</td>
<td>08:00AM to 04:00PM</td>
</tr>
<tr>
<td>Saturday</td>
<td>10:00AM to 0:00PM</td>
</tr>
<tr>
<td>Sunday</td>
<td>Closed</td>
</tr>
<tr>
<td>Public Holidays</td>
<td>Closed</td>
</tr>
</table>
</div>
</div><!– end of row –>
<div class=”footer”>
<p>Tribute Ltd © 2018</p>
<p>Reach us through our social media</p>
<a href=”https://www.facebook.com”><img data-src=”images/social/facebook.png” height=”50px” width=”50px” class=”social”></a><br><br><br><br>
<a href=”https://www.twitter.com”><img data-src=”images/social/twitter.png” height=”50px” width=”50px” class=”social”></a>
</div>
</body>
</div>
</html>
Testing and validation
Testing and validation of the website will be done by cross checking all links, testing the website using two browsers to make sure everything is working right across different browsers and using w3.org to do HTML and CSS validation.
Conclusion
The final design achieved for the proposed website meets all the requirements and was designed by following all core website design principles to make sure that the website meets both functional and non-functional requirements.
References
Mahmood, A., 2012. Features of the Perfect Responsive Web Design. DesignModo. Available at: https://designmodo.com/prefect-responsive-web-design/ [Accessed December 4, 2018].
Strickler, K., 2016. WHAT MAKES A GREAT WEBSITE? 10 WEBSITE TRENDS FOR 2016. Common places. Available at: https://www.commonplaces.com/blog/10-website-trends-for-2016 [Accessed December 5, 2018].
Vitaly.F., 2008. 10 Principles of Effective Web Design. Smashing magazine. Available at: https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/ [Accessed December 3, 2018].