Web Design Report

Coursework 1 bladesite Report Diarmuid Bogner / B00614798 Dr Hui Wang Dr Hui Wang sates Page access____________________________________________________________ scalawags 3 -4 analytic thinking_______________________________________________________________ foliates 5 6 ashes Design_________________________________________________________ rapsc aloneions 7 11 Implementation_______________________________________________________ varlets 12 16 Conclusion___________________________________________________________ pages 17 21 Appendices______________________________________________________________ page 21Introduction Purpose The purpose of this website was for a web ripening based federation exhibitioncase the web sites they nurse created, the dishs they offer, attention and support for impudently and old clients and to flourish contact info. Another purpose for creating this website was to armed service improer the amount of clients that the web development comp some(prenominal) was getting. Creating this website also all(a)owed me as a beginner web developer to march on develop the skills that I pull in already acquired such(prenominal) as XHTML and CSS. Organisation and Function of the bladesite The website I created is organized into some(prenominal) pages.Each page was named with an appropriate name to correspond with the entropy that was viewed on that page. For exercise the contact page was named contatct. html. This considerably allows me to identify which page I was currently working on and would help if I had to distinguish apiece changes or updates in the future. The website is made up with 15 different pages. In my website directory in that location is also a CSS file called flare. css. This file throws all the style in diversenessation on my website for showcase the background colour or the textbookbookual matter 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 choke to throne organization. The website has a logo at the top, and hence below is the navigation which is at large(p)-heeled located by visitor so they behind easily pilot around the website. The function of the navigation bar is to create cerebrate mingled with different pages of the website. For example clicking on the nearly middleman depart establish you to the nearly page. There are also links on the links page which use up the user to external pages on other websites.Outline of education to Be Included In the Report This enunciate ordain contain kind of a large amount of information. Below I provide briefly outline the information implicate in the report Introduction In the introduction section of the report I will develop the purpose of the website I created, the organisation and the function of the website which basically means how the website works. abbreviatio n In the analysis section of this report I explain what the localise users are and what they require from my website.The report will also contain a data collection which is where I sourced all my information to create the website. dodge Design The system invent will contain an outline design of each page that will be created for the website and the rationale. Also this field of study will contain all the links of the pages and the fount 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 comment of how my main features where catered to the website.Conclusion the conclusion section of the report will contain a contend evaluation of the website, and if I find that my finished website has meet all the user requirements and how I have met them. I will review what went well and what didnt go as well as expected whe n 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 employ throughout the report, design and implementation of the website. Analysis Target Users and their RequirementsThe target users for my website stomach be anyone. But the main centralise is for users that are interested in obtaining a website for their personal use or for a business. The website has requirements that I indispensability to insure that I meet them all. Requirements * crystallise layout website for easy seek The website must be made up with a simple, pieceive a clear layout and not seem conf apply. * loose functionality Users on the website must be able to use the functions of the website with ease. * Appealing colour intrigue/ guide The colour scheme and the template/layout need to be benevolent using bright colours and nice renderry. Corresponding informati on The information on the website needs to be relevant to the website, for example information about football would not be relevant to a web development organisation. * Follow the HCI guidelines The website needs to strictly follow the Human electronic computer interaction guidelines. For example I need to take into consideration that some visitors on my website maybe colour fraud so using colours that users clear 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 compute will help me to find areas of the commandment that need updated. * User amiable I need to make sure that the website is user friendly and that the users browsing my website mickle easily navigate around the site and can read the information that my website displays. * matched Making the website compatible with all browsers is a requirement. This is because if on e user is screening the page using Mozilla Firefox another user using internet adventurer may see the website differently and this could affect the users overall experience of the website.Data assembly 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 paintings, icons and links. For my icons and go throughs I used a website called http//www. iconfinder. com/ and I also used Google image search. For some of the definitions on my relate 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 brick Photoshop logo created usi ng adobe brick Photoshop signpage gliding shut off gliding end Future Designs cheap meshwork ontogeny Future Designs inexpensive Web Development Home active work Portfolio polish off link up Faqs Home roughly function Portfolio inter-group communication connect Faqs case 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 associate to pages on website cogitate to pages on website charm quote Get quote footnote gliding Bar go-cart sailbroadcasting Bar Home approximately operate Portfolio Contact golf links Faqs Home approximately function Portfolio Contact connectednesss Faqs Logo created using Adobe Photoshop Logo created using Adobe Photoshop About Navigation Bar Navigation Bar Future Designs inexpensive Web Developmen t Future Designs Affordable Web DevelopmentHome About Services Portfolio Contact colligate Faqs Home About Services Portfolio Contact relate Faqs 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 pedestrian Navigation Bar pedestrian 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 range of a functions to equate a serving I cons 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 pedestrian Navigation Bar pedestrian 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 previous knowing website. Thumbnail image of previous knowing website. Links to pages on website Links to pages on website T humbnail 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 pictorial matter of Office pick up of Office Contact Contact Content Area Contact form, and information such as the address and rally 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 defend 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 Designs 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 D evelopment 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 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 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 coveted effect. This is the logo I created using Adobe Photoshop and various techniques for the want effect. ImplementationNavigation links, when the pinch cursor is over the top of the link it changes to a lighter tone 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 rol lover links. Footer navigation, again with the use of rollover links. primer coat image, which I found on Google images. tolerateground image, which I found on Google images. Rollover Get iterate button which becomes a lighter shade of grey when mouse is over it. Rollover Get refer button which becomes a lighter shade of grey when mouse is over it. mannikin 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. furnish 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 mak e it more appealing. Icons to represent services that the company offer. This makes this page flavour 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. Portfolio braggy 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 bigger outmatch 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 use rs 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 perform and adopt 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 red-hot 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 refreshed 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 succeeding(a) HCI guidelines. Questi ons and answers clearly formatted for easy reading, this is proof of following HCI guidelines. FAQs Button to bring user to keep 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 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, subject field 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 Al l 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 genuinely self-ex deviceatory 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 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 current page to the website all that must be done is a simulate 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 richly 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 absolute 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 association 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 case 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 Imp rovement & 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 hard 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 any 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 that could be integrated is oS Ticket which is an open sou rce 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