Web Design Report

| Coursework 1 Website Report | Diarmuid Bogner / B00614798| | Dr Hui Wang Dr Hui Wang Contents Page Introduction____________________________________________________________ pages 3 -4 Analysis_______________________________________________________________ pages 5 – 6 System Design_________________________________________________________ pages 7 – 11 Implementation_______________________________________________________ pages 12 – 16 Conclusion___________________________________________________________ pages 17 – 21 Appendices______________________________________________________________ page 21Introduction Purpose The purpose of this website was for a web development based company showcase the web sites they have created, the services they offer, help and support for new and old clients and to display contact information. Another purpose for creating this website was to help increase the amount of clients that the web development company was getting. Creat ing this website also allowed me as a beginner web developer to further develop the skills that I have already acquired such as XHTML and CSS. Organisation and Function of the Website The website I created is organized into several pages.Each page was named with an appropriate name to correspond with the information that was viewed on that page. For example the contact page was named â€Å"contatct. html†. This easily allows me to identify which page I was currently working on and would help if I had to make any changes or updates in the future. The website is made up with 15 different pages. In my website directory there is also a CSS file called style. css. This file contains all the style information on my website for example the background colour or the text font, size and colour. Naming the . ss file â€Å"style† again would help me or anyone else having to edit the file knows what the purpose of the file is. The website layout follows the standard top to bottom o rganization. The website has a logo at the top, and then below is the navigation which is easy located by visitor so they can easily navigate around the website. The function of the navigation bar is to create links between different pages of the website. For example clicking on the â€Å"About† link will bring you to the about page. There are also links on the links page which bring the user to external pages on other websites.Outline of Information to Be Included In the Report This report will contain quite a large amount of information. Below I will briefly outline the information included in the report: Introduction – In the introduction section of the report I will explain the purpose of the website I created, the organisation and the function of the website which basically means how the website works. Analysis – In the analysis section of this report I explain what the target users are and what they require from my website.The report will also contain a da ta collection which is where I sourced all my information to create the website. System Design – The system design will contain an outline design of each page that will be created for the website and the rationale. Also this area will contain all the links of the pages and the type of information that has to be included on each of these pages. Implementation – In this section the report there will be screen dumps of each page and I will explain the main features of each page. Also I will have a description of how my main features where added to the website.Conclusion – the conclusion section of the report will contain a complete evaluation of the website, and if I feel that my finished website has meet all the user requirements and how I have met them. I will review what went well and what didn’t go as well as expected when designing and implementing my website. Also I will include some ideas that I think my make an improvement to my website. Appendices à ¢â‚¬â€œ The appendices section will contain any references that were used throughout the report, design and implementation of the website. Analysis Target Users and their RequirementsThe target users for my website can be anyone. But the main focus is for users that are interested in obtaining a website for their personal use or for a business. The website has requirements that I need to insure that I meet them all. Requirements * Clear layout website for easy browsing – The website must be made up with a simple, effective a clear layout and not seem confusing. * Easy functionality – Users on the website must be able to use the functions of the website with ease. * Appealing colour scheme/template – The colour scheme and the template/layout need to be appealing using bright colours and nice imagery. Corresponding information – The information on the website needs to be relevant to the website, for example information about football would not be relevant t o a web development organisation. * Follow the HCI guidelines – The website needs to strictly follow the Human Computer Interaction guidelines. For example I need to take into consideration that some visitors on my website maybe colour blind so using colours that users can see clearly wither colour blind or not. * Easy to update and maintain – The website needs to allow easy maintain and update when needed.To achieve this using proper indenting and comments on the code will help me to find areas of the code that need updated. * User friendly – I need to make sure that the website is user friendly and that the users browsing my website can easily navigate around the site and can read the information that my website displays. * Compatible – Making the website compatible with all browsers is a requirement. This is because if one user is viewing the page using Mozilla Firefox another user using internet explorer may see the website differently and this could affect the users overall experience of the website.Data Collection All of the information I used for my website was written by me, I did however use the internet for some information such as my images, icons and links. For my icons and images I used a website called http://www. iconfinder. com/ and I also used Google image search. For some of the definitions on my â€Å"Links† page I searched Google, and at the top of the search results page a definition appeared. Throughout writing my CSS code I used http://www. w3schools. com/ as a reference for certain CSS techniques such as creating my website background. Outline of Page DesignsI found that using text boxes in Microsoft Word was a great way for me to design the layout of each page on my website. You can see below how I achieved this. Logo created using Adobe Photoshop Logo created using Adobe Photoshop Homepage Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Developmen t Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Content Area (this area is used to display the main text and images for the users to read and view.Content Area (this area is used to display the main text and images for the users to read and view. Button used for users to request quote Button used for users to request quote Links to pages on website Links to pages on website â€Å"Get quote† â€Å"Get quote† Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Logo created using Adobe Photoshop Logo created using Adobe Photoshop About Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web DevelopmentHome | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s About Content Area (this area is used to display the main text and images for the users to read and view. About Content Area (this area is used to display the main text and images for the users to read and view. Relevant image for page. Relevant image for page. Links to pages on website Links to pages on website Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’sLogo created using Adobe Photoshop Logo created using Adobe Photoshop Services Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Development Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Services Services Icons to represent a service Icons to represent a service Icons to represent a service Icons to represent a service Icons to represent a service Icons to represent a service Links to pages on website Links to pages on website Icons to represent a service Icons to represent a serviceIcons to represent a service Icons to represent a service Icons to represent a service Icons to represent a service Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Logo created using Adobe Photoshop Logo created using Adobe Photoshop Portfolio Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Development Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’sPortfolio Portfolio Thumbnail image of previous designed website. Thumbnail image of previous designed website. Links to pages on website Links to pages on website Thumbnail image of previous designed website. Thumbnail ima ge of previous designed website. Thumbnail image of previous designed website. Thumbnail image of previous designed website. Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Logo created using Adobe Photoshop Logo created using Adobe Photoshop ContactNavigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Development Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Image of Office Image of Office Contact Contact Content Area Contact form, and information such as the address and telephone number will be shown. Content Area Contact form, and information such as the address and telephone number will be shown. Links to pages on website Links to pages on website Google Map of Office Google Map of Office Footer Navigation BarFoot er Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Logo created using Adobe Photoshop Logo created using Adobe Photoshop Links Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Development Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Links Links Link description Link description Link Icon Link Icon Links to pages on website Links to pages on website Link descriptionLink description Link Icon Link Icon Link description Link description Link Icon Link Icon Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s FAQ’s Logo created using Adobe Photoshop Logo created using Adobe Photoshop Navigation Bar Navigation Bar Future Designs Affordable Web Development Future Designs Affordable Web Development Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s FAQ’s FAQ’s Content AreaFrequent questions and answers to them will be viewable on this area. Content Area Frequent questions and answers to them will be viewable on this area. Links to pages on website Links to pages on website Footer Navigation Bar Footer Navigation Bar Home | About | Services |Portfolio | Contact | Links | Faq’s Home | About | Services |Portfolio | Contact | Links | Faq’s Links of the Pages (Site Map) This is the logo I created using Adobe Photoshop and various techniques for the desired effect. This is the logo I created using Adobe Photoshop and various techniques for the desired effect. ImplementationNavigation links, when the mouse cursor is over the top of the link it changes to a lighter shade of grey. Navigation links, when the mouse cursor is over the top of the link it changes to a lighter shade of grey. Home Footer navigation, again with the use of rollover links. Footer navigation, again with the use of rollover links. Background image, which I found on Google images. Background image, which I found on Google images. Rollover â€Å"Get Quote† button which becomes a lighter shade of grey when mouse is over it. Rollover â€Å"Get Quote† button which becomes a lighter shade of grey when mouse is over it.Form created with HTML to allow user to send an email for a quotation. Form created with HTML to allow user to send an email for a quotation. Quote Reset Button resets the data that has been inputted into the form. Reset Button resets the data that has been inputted into the form. Submit button sends the form. Submit button sends the form. About The text on this page has been formatted into bullet points to make it more user friendly and easy to read. The text on this page ha s been formatted into bullet points to make it more user friendly and easy to read.Image added to page to make it more appealing. Image added to page to make it more appealing. Icons to represent services that the company offer. This makes this page look a lot more appealing. Icons to represent services that the company offer. This makes this page look a lot more appealing. Services Thumbnails of web designs to add a gallery effect to the portfolio page. Thumbnails of web designs to add a gallery effect to the portfolio page. PortfolioLarge Image shown so users can clearly view the previous work. Large Image shown so users can clearly view the previous work.Portfolio Image Example Back button to return the user to the previous page. Back button to return the user to the previous page. After clicking on any of the previous design images will load a larger scale of the image with the exact same layout and format as the screenshot above. After clicking on any of the previous design ima ges will load a larger scale of the image with the exact same layout and format as the screenshot above. Image of office added to page to give users an insight to what our offices is like. Image of office added to page to give users an insight to what our offices is like.Contact Contact information and a form added for users to complete and submit to website admin email. Contact information and a form added for users to complete and submit to website admin email. Google maps embedded to show users where the office is located on Google maps. Google maps embedded to show users where the office is located on Google maps. Links Information about each link. Information about each link. Icons added to represent the links, the icons are also clickable which brings you the new external link. E. g. clicking the YouTube icon brings user to youtube. om Icons added to represent the links, the icons are also clickable which brings you the new external link. E. g. clicking the YouTube icon brings user to youtube. com Questions and answers clearly formatted for easy reading, this is proof of following HCI guidelines. Questions and answers clearly formatted for easy reading, this is proof of following HCI guidelines. FAQ’s Button to bring user to continued support page. Button to bring user to continued support page. Help & Support Form to request future help & support.Again this form is emailed to the website administrator. Form to request future help & support. Again this form is emailed to the website administrator. Conclusion Evaluation of Website I feel that my website has met all the user’s requirements. You can see evidence of each of the users requirements from the screenshots above. Below are all the requirments and how I felt that I have met them. * Clear layout website for easy browsing – My website has been made using a simple layout which only contains a header, navigation, content area and a footer navigation.The website is also easy to brow se as I asked members of my family and friends to try and navigate around and they could do this with ease and no confusion. * Easy functionality – All of the functions that my website uses are all easy to use. For example the forms which the users complete to contact the website administrator are all very self-explanatory and users have no problem completing the form. * Appealing colour scheme/template – The colour scheme and the template that I have created is very appealing. Again I have got friends and family to try to use the website and they have all commented that it is very olourful. You can see evidence of this with the use of the background image and icons on different pages of the website. * Corresponding information – All of the information on the website corresponds to the type of the website that I created. * Follow the HCI guidelines – I have followed the HCI guidelines very strictly when creating this website. An example of this would be t hat the website does not use any colours that colour blind users may find difficulty viewing. * Easy to update and maintain – The layout created allows for easy updating and maintenance.For example if I wanted to add a new page to the website all that must be done is a copy of the page, delete the information that was copied, add new information to the page and add the page into the navigation bar. * User friendly – I find that my website is quite user friendly. The website is easy to use and the information is clear and users would have no problem reading and understanding the information. * Compatible – I have fully tested the website with a few of the most popular web browsers. You can see evidence of this below: Chrome Internet Explorer Mozilla FirefoxAs you can see from the above screenshots that the website displays correctly in all browsers so I have met the compatibility requirement. Review of Successes and Problems I found that my design was very succes sful. Creating the plan of the design was crucial in creating a fully functional website. I found that making a clear and an easy to follow plan allowed me to implement my website with very few issues and it gave me an insight to what the website would look like when completed and what look I was aiming for. Meeting the user requirements I thought would be a hard obstacle to overcome.I did a module in a computing course which solely focused on Human Computer Interaction This gave me the knowledge of HCI guidelines and ideas on how to follow them and how to stop barriers. Along with my knowledge and a full plan I was able to meet all the user requirements whilst overcoming HCI difficulties. The only thing that didn’t go to plan was the CSS code for my background. When attempting to add the background using CSS I could not get the desired look. The image kept stretching and as I added more content to the page the image repeated. After researching some more CSS online using W3sc hools. om I came up with the idea that the background should stay fixed and the rest of the page should scroll. This fix completely fixed this issue. The code I used is as follows: Ideas on Improvement & Further Development After reviewing my website I have came up with areas that I could improve on and areas of the website that could be further developed. I found in my portfolio gallery when clicking on the image instead of having a text button â€Å"[Back to previous page]† I could have used a rollover button which users would have a lot less difficulty trying to find and also it would make the page more interactive for the user.Instead of having a text button on this page I could have either added a button or better added a support link on the navigation bar. This improvement also gave me an idea where I could further develop my â€Å"Continued Support† area by using a PHP help desk script which allowed users to register and they could write issues on tickets that a re then viewed by administrators and support is given.Also adding a help chat room where clients can speak live with support staff. An example of this type of software that could be integrated is â€Å"oS Ticket† which is an open source software. http://osticket. com/ References: www. google. com/images www. w3schools. com http://www. iconfinder. com/ http://stackoverflow. com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only