Web Design Report

| Coursework 1 Website Abode | Diarmuid Bogner / B00614798| | Dr Hui Wang Dr Hui Wang Contents Folio Introduction____________________________________________________________ pages 3 -4 Analysis_______________________________________________________________ pages 5 - 6 Arrangement Design_________________________________________________________ pages 7 – 11 Implementation_______________________________________________________ pages 12 - 16 Conclusion___________________________________________________________ pages 17 - 21 Appendices______________________________________________________________ folio 21 Introduction Purpose The purpose of this website was for a web development based aggregation advertise the web sites they accept created, the casework they offer, advice and abutment for new and old audience and to affectation acquaintance information. Addition purpose for creating this website was to advice access the bulk of audience that the web development aggregation was getting. Creating this website additionally accustomed me as a abecedarian web developer to added advance the abilities that I accept already acquired such as XHTML and CSS. Organisation and Action of the Website The website I created is organized into several pages. Each folio was alleged with an adapted name to accord with the advice that was beheld on that page. For archetype the acquaintance folio was alleged “contatct. html”. This calmly allows me to analyze which folio I was currently alive on and would advice if I had to accomplish any changes or updates in the future. The website is fabricated up with 15 altered pages. In my website agenda there is additionally a CSS book alleged style. css. This book contains all the appearance advice on my website for archetype the accomplishments colour or the argument font, admeasurement and colour. Naming the . ss book “style” afresh would advice me or anyone abroad accepting to adapt the book knows what the purpose of the book is. The website blueprint follows the accepted top to basal organization. The website has a logo at the top, and afresh beneath is the aeronautics which is accessible amid by aggregation so they can calmly cross about the website. The action of the aeronautics bar is to actualize links amid altered pages of the website. For archetype beat on the “About” articulation will accompany you to the about page. There are additionally links on the links folio which accompany the user to alien pages on alternative websites. Outline of Advice to Be Included In the Abode This abode will accommodate absolutely a ample bulk of information. Beneath I will briefly outline the advice included in the report: Addition – In the addition breadth of the abode I will explain the purpose of the website I created, the organisation and the action of the website which basically agency how the website works. Assay – In the assay breadth of this abode I explain what the ambition users are and what they crave from my website. The abode will additionally accommodate a abstracts accumulating which is breadth I sourced all my advice to actualize the website. Arrangement Architecture – The arrangement architecture will accommodate an outline architecture of anniversary folio that will be created for the website and the rationale. Additionally this breadth will accommodate all the links of the pages and the blazon of advice that has to be included on anniversary of these pages. Accomplishing – In this breadth the abode there will be awning depression of anniversary folio and I will explain the capital appearance of anniversary page. Additionally I will accept a description of how my capital appearance breadth added to the website. Conclusion – the cessation breadth of the abode will accommodate a complete appraisal of the website, and if I feel that my accomplished website has accommodated all the user requirements and how I accept met them. I will analysis what went able-bodied and what didn’t go as able-bodied as accepted back designing and implementing my website. Additionally I will accommodate some account that I anticipate my accomplish an advance to my website. Appendices – The appendices breadth will accommodate any references that were acclimated throughout the report, architecture and accomplishing of the website. Assay Ambition Users and their Requirements The ambition users for my website can be anyone. But the capital focus is for users that are absorbed in accepting a website for their claimed use or for a business. The website has requirements that I charge to assure that I accommodated them all. Requirements * Ablaze blueprint website for accessible browsing – The website charge be fabricated up with a simple, able a ablaze blueprint and not assume confusing. * Accessible functionality – Users on the website charge be able to use the functions of the website with ease. * Ambrosial colour scheme/template – The colour arrangement and the template/layout charge to be ambrosial application ablaze colours and nice imagery. Corresponding advice – The advice on the website needs to be accordant to the website, for archetype advice about football would not be accordant to a web development organisation. * Chase the HCI guidelines – The website needs to carefully chase the Human Computer Interaction guidelines. For archetype I charge to booty into application that some visitors on my website maybe colour dark so application colours that users can see acutely atrophy colour dark or not. * Accessible to amend and advance – The website needs to acquiesce accessible advance and amend back needed. To accomplish this application able indenting and comments on the cipher will advice me to acquisition areas of the cipher that charge updated. * User affable – I charge to accomplish abiding that the website is user affable and that the users browsing my website can calmly cross about the armpit and can apprehend the advice that my website displays. * Accordant – Authoritative the website accordant with all browsers is a requirement. This is because if one user is examination the folio application Mozilla Firefox addition user application internet charlatan may see the website abnormally and this could affect the users all-embracing acquaintance of the website. Data Accumulating All of the advice I acclimated for my website was accounting by me, I did about use the internet for some advice such as my images, icons and links. For my icons and images I acclimated a website alleged http://www. iconfinder. com/ and I additionally acclimated Google angel search. For some of the definitions on my “Links” folio I searched Google, and at the top of the chase after-effects folio a analogue appeared. Throughout autograph my CSS cipher I acclimated http://www. w3schools. com/ as a advertence for assertive CSS techniques such as creating my website background. Outline of Folio Designs I begin that application argument boxes in Microsoft Word was a abundant way for me to architecture the blueprint of anniversary folio on my website. You can see beneath how I accomplished this. Logo created application Adobe Photoshop Logo created application Adobe Photoshop Homepage Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Agreeable Breadth (this breadth is acclimated to affectation the capital argument and images for the users to apprehend and view. Content Breadth (this breadth is acclimated to affectation the capital argument and images for the users to apprehend and view. Button acclimated for users to appeal adduce Button acclimated for users to appeal adduce Links to pages on website Links to pages on website “Get quote” “Get quote” Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop About Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s About Agreeable Breadth (this breadth is acclimated to affectation the capital argument and images for the users to apprehend and view. About Agreeable Breadth (this breadth is acclimated to affectation the capital argument and images for the users to apprehend and view. Accordant angel for page. Accordant angel for page. Links to pages on website Links to pages on website Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop Casework Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Casework Casework Icons to represent a account Icons to represent a account Icons to represent a account Icons to represent a account Icons to represent a account Icons to represent a account Links to pages on website Links to pages on website Icons to represent a account Icons to represent a service Icons to represent a account Icons to represent a account Icons to represent a account Icons to represent a account Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop Portfolio Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Portfolio Portfolio Thumbnail angel of antecedent advised website. Thumbnail angel of antecedent advised website. Links to pages on website Links to pages on website Thumbnail angel of antecedent advised website. Thumbnail angel of antecedent advised website. Thumbnail angel of antecedent advised website. Thumbnail angel of antecedent advised website. Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop Contact Navigation Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Angel of Appointment Angel of Appointment Acquaintance Acquaintance Agreeable Breadth Acquaintance form, and advice such as the abode and blast cardinal will be shown. Agreeable Breadth Acquaintance form, and advice such as the abode and blast cardinal will be shown. Links to pages on website Links to pages on website Google Map of Appointment Google Map of Appointment Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop Links Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Links Links Articulation description Articulation description Articulation Figure Articulation Figure Links to pages on website Links to pages on website Articulation description Link description Articulation Figure Articulation Figure Articulation description Articulation description Articulation Figure Articulation Figure Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s FAQ’s Logo created application Adobe Photoshop Logo created application Adobe Photoshop Aeronautics Bar Aeronautics Bar Approaching Designs Affordable Web Development Approaching Designs Affordable Web Development Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s FAQ’s FAQ’s Agreeable Area Frequent questions and answers to them will be arresting on this area. Agreeable Breadth Frequent questions and answers to them will be arresting on this area. Links to pages on website Links to pages on website Footer Aeronautics Bar Footer Aeronautics Bar Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Home | About | Casework |Portfolio | Acquaintance | Links | Faq’s Links of the Pages (Site Map) This is the logo I created application Adobe Photoshop and assorted techniques for the adapted effect. This is the logo I created application Adobe Photoshop and assorted techniques for the adapted effect. Implementation Navigation links, back the abrasion cursor is over the top of the articulation it changes to a lighter adumbration of grey. Aeronautics links, back the abrasion cursor is over the top of the articulation it changes to a lighter adumbration of grey. Home Footer navigation, afresh with the use of rollover links. Footer navigation, afresh with the use of rollover links. Accomplishments image, which I begin on Google images. Accomplishments image, which I begin on Google images. Rollover “Get Quote” button which becomes a lighter adumbration of blah back abrasion is over it. Rollover “Get Quote” button which becomes a lighter adumbration of blah back abrasion is over it. Form created with HTML to acquiesce user to accelerate an email for a quotation. Anatomy created with HTML to acquiesce user to accelerate an email for a quotation. Adduce Reset Button resets the abstracts that has been inputted into the form. Reset Button resets the abstracts that has been inputted into the form. Abide button sends the form. Abide button sends the form. About The argument on this folio has been formatted into ammo credibility to accomplish it added user affable and accessible to read. The argument on this folio has been formatted into ammo credibility to accomplish it added user affable and accessible to read. Image added to folio to accomplish it added appealing. Angel added to folio to accomplish it added appealing. Icons to represent casework that the aggregation offer. This makes this folio attending a lot added appealing. Icons to represent casework that the aggregation offer. This makes this folio attending a lot added appealing. Casework Thumbnails of web designs to add a arcade aftereffect to the portfolio page. Thumbnails of web designs to add a arcade aftereffect to the portfolio page. PortfolioLarge Angel apparent so users can acutely appearance the antecedent work. Ample Angel apparent so users can acutely appearance the antecedent work. Portfolio Angel Archetype Back button to acknowledgment the user to the antecedent page. Back button to acknowledgment the user to the antecedent page. After beat on any of the antecedent architecture images will amount a beyond calibration of the angel with the exact aforementioned blueprint and architecture as the screenshot above. After beat on any of the antecedent architecture images will amount a beyond calibration of the angel with the exact aforementioned blueprint and architecture as the screenshot above. Angel of appointment added to folio to accord users an acumen to what our offices is like. Angel of appointment added to folio to accord users an acumen to what our offices is like. Contact Acquaintance advice and a anatomy added for users to complete and abide to website admin email. Acquaintance advice and a anatomy added for users to complete and abide to website admin email. Google maps anchored to appearance users breadth the appointment is amid on Google maps. Google maps anchored to appearance users breadth the appointment is amid on Google maps. Links Advice about anniversary link. Advice about anniversary link. Icons added to represent the links, the icons are additionally clickable which brings you the new alien link. E. g. beat the YouTube figure brings user to youtube. om Icons added to represent the links, the icons are additionally clickable which brings you the new alien link. E. g. beat the YouTube figure brings user to youtube. com Questions and answers acutely formatted for accessible reading, this is affidavit of afterward HCI guidelines. Questions and answers acutely formatted for accessible reading, this is affidavit of afterward HCI guidelines. FAQ’s Button to accompany user to connected abutment page. Button to accompany user to connected abutment page. Advice & Abutment Anatomy to appeal approaching advice & support. Again this anatomy is emailed to the website administrator. Anatomy to appeal approaching advice & support. Afresh this anatomy is emailed to the website administrator. Cessation Appraisal of Website I feel that my website has met all the user’s requirements. You can see affirmation of anniversary of the users requirements from the screenshots above. Beneath are all the requirments and how I acquainted that I accept met them. * Ablaze blueprint website for accessible browsing – My website has been fabricated application a simple blueprint which alone contains a header, navigation, agreeable breadth and a footer navigation. The website is additionally accessible to browse as I asked associates of my ancestors and accompany to try and cross about and they could do this with affluence and no confusion. * Accessible functionality – All of the functions that my website uses are all accessible to use. For archetype the forms which the users complete to acquaintance the website ambassador are all actual accessible and users accept no botheration commutual the form. * Ambrosial colour scheme/template – The colour arrangement and the arrangement that I accept created is actual appealing. Afresh I accept got accompany and ancestors to try to use the website and they accept all commented that it is actual olourful. You can see affirmation of this with the use of the accomplishments angel and icons on altered pages of the website. * Corresponding advice – All of the advice on the website corresponds to the blazon of the website that I created. * Chase the HCI guidelines – I accept followed the HCI guidelines actual carefully back creating this website. An archetype of this would be that the website does not use any colours that colour dark users may acquisition adversity viewing. * Accessible to amend and advance – The blueprint created allows for accessible afterlight and maintenance. For archetype if I capital to add a new folio to the website all that charge be done is a archetype of the page, annul the advice that was copied, add new advice to the folio and add the folio into the aeronautics bar. * User affable – I acquisition that my website is absolutely user friendly. The website is accessible to use and the advice is ablaze and users would accept no botheration account and compassionate the information. * Accordant – I accept absolutely activated the website with a few of the best accepted web browsers. You can see affirmation of this below: Chrome Internet Charlatan Mozilla Firefox As you can see from the aloft screenshots that the website displays accurately in all browsers so I accept met the affinity requirement. Analysis of Successes and Problems I begin that my architecture was actual successful. Creating the plan of the architecture was acute in creating a absolutely anatomic website. I begin that authoritative a ablaze and an accessible to chase plan accustomed me to apparatus my website with actual few issues and it gave me an acumen to what the website would attending like back completed and what attending I was aiming for. Meeting the user requirements I anticipation would be a adamantine obstacle to overcome. I did a bore in a accretion advance which alone focused on Human Computer Interaction This gave me the ability of HCI guidelines and account on how to chase them and how to stop barriers. Along with my ability and a abounding plan I was able to accommodated all the user requirements whilst advantageous HCI difficulties. The alone affair that didn’t go to plan was the CSS cipher for my background. Back attempting to add the accomplishments application CSS I could not get the adapted look. The angel kept addition and as I added added agreeable to the folio the angel repeated. After researching some added CSS online application W3schools. om I came up with the abstraction that the accomplishments should break anchored and the blow of the folio should scroll. This fix absolutely anchored this issue. The cipher I acclimated is as follows: Account on Advance & Added Development After reviewing my website I accept came up with areas that I could advance on and areas of the website that could be added developed. I begin in my portfolio arcade back beat on the angel instead of accepting a argument button “[Back to antecedent page]” I could accept acclimated a rollover button which users would accept a lot beneath adversity aggravating to acquisition and additionally it would accomplish the folio added alternate for the user. Instead of accepting a argument button on this folio I could accept either added a button or bigger added a abutment articulation on the aeronautics bar. This advance additionally gave me an abstraction breadth I could added advance my “Continued Support” breadth by application a PHP advice board calligraphy which accustomed users to annals and they could address issues on tickets that are afresh beheld by administrators and abutment is given. Also abacus a advice babble allowance breadth audience can allege alive with abutment staff. An archetype of this blazon of software that could be chip is “oS Ticket” which is an accessible antecedent 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

Order a unique copy of this paper

550 words
We'll send you the first draft for approval by September 11, 2018 at 10:52 AM
Total price:
$26
Top Academic Writers Ready to Help
with Your Research Proposal
Order now and a get a 25% discount with the discount code: COURSEGUYOrder Now!
+ +