Web Design Report

Coursework 1 meshworksite Report Diarmuid Bogner / B00614798 Dr Hui Wang Dr Hui Wang subject matters foliate Introduction____________________________________________________________ scalawags 3 -4 Analysis_______________________________________________________________ varlets 5 6 System Design_________________________________________________________ rogues 7 11 Implementation_______________________________________________________ pages 12 16 Conclusion___________________________________________________________ pages 17 21 Appendices______________________________________________________________ page 21Introduction Purpose The purpose of this weathervanesite was for a web development establish company showcase the web sites they arrest created, the services they offer, help and support for recent and old clients and to display contact cultivation. Another purpose for creating this website was to help growing the amount of clients that the web development company was ge tting. Creating this website also rendered me as a beginner web developer to further develop the skills that I have already acquired much(prenominal) as XHTML and CSS. Organisation and Function of the nettsite The website I created is organized into several pages.Each page was named with an appropriate name to correspond with the in nisusation that was viewed on that page. For example the contact page was named contatct. html. This substantially 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 make up with 15 dissimilar pages. In my website directory there is also a CSS file called style. css. This file accepts all the style information on my website for example the range colour or the school 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 step top to bottom organization. The website has a logo at the top, and then downstairs 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 active link allow for add together you to the most page. There are also links on the links page which bring the exploiter to external pages on other websites.Outline of Information to Be Included In the Report This report go out contain quite a large amount of information. Below I testament briefly limn 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 plaque 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 drug substance abusers are and what they require from my website.T he report will also contain a info collection which is where I sourced all my information to create the website. System Design The system initiation will contain an outline anatomy 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 reexamine what went well and what didnt go as well as expected when designing and implementing my website. Also I will include some ideas that I speak out my make an improvement to my webs ite. 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 wide-eyed, nitty-grittyive a short layout and not seem confvictimization. * blue 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 challenge utilize 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 relevan t to 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 perish 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 exp erience of the website.Data line of battle 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 tie in 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 tack 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 dwelling housepage glide Bar sailplaning Bar in store(predicate) Designs Affordable Web exploitation Future Designs Affordable Web evolution Home or so go Portfolio bear upon connect Faqs Home near service Portfolio touch modality colligate Faqs 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 reiterate Button used for users to request quote connect to pages on website think to pages on website Get quote Get quote pedestrian Navigation Bar Footer Navigation Bar Home near work Portfolio tactile sensation Links Faqs Home About Services Portfolio Contact Links Faqs 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 Faqs Home About Services Portfolio Contact Links Faqs About Content Area (this area is used to display the main text an d 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 Faqs Home About Services Portfolio Contact Links FaqsLogo 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 Faqs Home About Services Portfolio Contact Links Faqs Services Services word pictures to demo 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 Faqs Home About Services Portfolio Contact Links Faqs 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 Faqs Home About Services Portfolio Contact Links FaqsPortfolio Portfolio Thumbnail image of introductory 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 image 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 Faqs Home About Services Portfolio Contact Links Faqs 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 Faqs Home About Services Portfolio Contact Links Faqs realize of touch 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 BarFooter Navigation Bar Home About Services Portfolio Contact Links Faqs Home About Services Portfolio Contact Links Faqs Logo created using Adobe Photoshop Logo created using Adobe Photoshop Links Navigation Bar Navigation Bar Future Desi gns Affordable Web Development Future Designs Affordable Web Development Home About Services Portfolio Contact Links Faqs Home About Services Portfolio Contact Links Faqs 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 Faqs Home About Services Portfolio Contact Links Faqs FAQs 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 Faqs Home About Services Portfolio Contact Links Faqs FAQs FAQs Content AreaFrequent questions and answers to them will be viewable on this area. Content Area Frequent questions and answers to the m 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 Faqs Home About Services Portfolio Contact Links Faqs 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 lightness shade of grey. Navigation links, when the mouse cursor is over the top of the link it changes to a flatboat 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 launch 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 i t. Rollover Get Quote button which becomes a lighter shade of grey when mouse is over it. approach pattern 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 has 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 exercising 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 images 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 discernment 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 a dded 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 reinvigorated 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. FAQs 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 users requirements. You can see read 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 browse 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 sch eme 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 that 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 use r 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 successful. 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 whole focused on Human Computer Interaction Thi s 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 didnt 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 W3schools. 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 us ed 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 are 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 product 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