WEBDESIGN

Learning outcome 1: Understand Website Design ConceptsWeb design depicts the affiliation among web skill and scheme impressions. Web design classifies the way of presentation and the way of presenting the web skill and scheme. It also distinguish the successions among web trappings and expertness.Generation of simple websites made by the practice of html attentions. Web scheme and Presentations are used for structuring web pages, along with HTML, CSS, SVG, expedient and tools for web applications.Web is a combination of processers in all over the earth. Web customers can access the web pages by using the web browser because all the information is kept in the web pages.LO1.1: Discuss the design concepts that have to be considered when designing a websiteWeb mechanisms are founded on the server architecture. Handling the certain category of the server and the consumer aptness are mutually accountable. And the aptness are formed as 3-tier presentation.Web browser establishes the first level, that is, a middleware device by means of certain lively web have contented skill.Example: Active Server Pages(ASP), Hypertext Preprocessor(PHP), Java Server Page (JSP), Common Gateway Interface(CGI) establish the mid-tier and the database server exits as the third level.

LO1.1.1 WEB SERVEROperations that are performed by the client-side refers to the client-server relationship in a computer network. Client-side operations may require access to information or functionality that are available on the client but not on the server, because the user needs to observe them or provide input or the server loss the processing power to do the operation in a timely manner.If operations can be performed by the client without sending the data through the network it may take less time, use less bandwidth, incur lesser security risk.Programmers may write their own server, client and communication rules in the case of specialized application that can only be used with one another.LO1.1.2: WEB SERVERA web server is simply a computer program that distributes web pages as per their request. The program that usually run on a machine is called server. If someone seats at the computer and input an address to an internet browser like IE or Firefox, the browser sends the request to the internet that requiring to see the web page found at the address.The program on the server deliver the data to the correct destination through the Internet protocol address (IP) address and this allows to communicate over the network.In addition every web page has unique address called as Uniform Resource Locator (URL). Example:www.examples.com/page2.htm. When the user types this address on the web browser the machine sends the request to the IP address of the machine that runs on the web server to send back all the contents based on the request.On the server-side it accept the request and send the content to IP address of the machine asking it. Then the browser converts it into text, video, pictures, links, etc.The First common web server software that usually accepting and answering the page request is Apache and the most common is Internet Information Services published by the Microsoft.LO1.13: Database ServerBased on the client-server model the database server in a computer that supplies the database services to other computer programs.To access the database on the client-server model the Data Base Management System allows database server functionality and few DBMSs Example: MySQL.This type of server is accessed either by the front-end of users pc or the back-end that runs on the server and perform task such as data analysis and storage.In a master-slave model, the master servers are central and primary location data and the database slave servers are synchronized supports of the master acting as proxies.

Learning Outcome 2: Be able to design interactive websitesTo design an interactive website one must have the skills in programming and some other create a website using the tool Dreamweaver from the scratch.And the second thing to consider is it should be attractive. Then decide what are the resources will be needed to build it.LO2.1: Design an interactive website to meet given requirementsThe major ones are: Goal Driven Design Interface as magic Usability Affordances LearnabilityLO2.1.1: Goal Driven DesignThe comprehensive results of user study are necessity to arousing the best design response and isnt strictly required by an interaction designer.While designing, the artist must acknowledge their constraints, then device the solution. Users generally have a number of goals in mind when using the website.LO2.1.2: Interface as magicFor the interest of transience, Ive contracted a number of interaction Design best practices into this phase Alan Cooper says that ideally, interfaces wouldnt exist at all in the mind of the user they should simply see the interface as an extension of the underlying system.To this effect, the best interaction designers dont exist they dont take a long time to load/respond; they dont give users cause for grief.Give the users just what they need to accomplish their goals and then over along.

LO2.1.3: UsabilityUsability release the relief with which people employ a tool in order to achieve a particular goal. Throughout the practice, the interaction designers must concern themselves with the inherent usability of the interfaces they design.Interfaces which make the state of the underlying system easy to understand and use are preferred.LO2.1.4: AffordancesAffordances represent the action possibilities available between an actor and their environment. Because affordances express a great deal about the underlying functionality behind a website or services, its essential that designers utilize this concept consistently throughout their designs.The best interaction designs are those speak for themselves in which, as the saying goes, form follows function.In other words, links should look like links, buttons should look like buttons, search boxes should look like search boxes.LO2.1.5: LearnabilityThe best interaction designers dont reinvent the wheel every time a similar design patterns. Many online interaction design patterns are documented in Yahoo1s design pattern library.In sum, if design problem at hand calls upon a truly unique interface learnable, or, easily learned. This, in and of itself, requires a strong knowledge of current design conventions, affordances, and overall web usability.A great deal of what comprises a usable interface is made up of familiar components. If users are used to submitting a form with a button, theyll look for a button when that time comes. This is an example of an interface idiom, or pattern.

LO2.2: Evaluate web design with other usersLO2.2.1: Website StoryboardDeveloping a website requires various stages like planning and design. Graphical representation of structures and the functionalities intended for the site are involved in the design process.The illustrated concept of the structure and the purpose of the website is provided by the storyboards is one of the object of the website developing and it is used in animation and film industry and it is powerful tool used in management.The fundamental process of the design phase in project management is storyboards. After developing the flowchart, which defines the appropriate structure of the website, it is essential to reproduce that information through the storyboard.It is important to maintain consistency as well as support of all the content that is being provided so that other project members are able to understand the purpose of each screen.LO2.2.2: Mood board for website designingA mood board not only gives you inspiration in going forward with a project, but also is an effective time-saver and necessary component in the creative process. By creating one, you can tackle many issues early on that you would otherwise encounter later on in the creative process.Mood boards can prevent unnecessary frustrations as the result of not having a clear creative direction and may cut the overall time spent on a project in half as a result of careful planning.A mood board helps: Translate a concept where words may fail Create a picture in the clients head early on and let them see exactly what youre planning and how their site is shaping up before you even start properly designing. Cut down on time spent revising due to miscommunication Establish the theme of the website that is soft or hard? Clean or grungy?

LO2.2.3: Inline containersSPAN caries no structural meaning itself, but it can be used to provide extra structure through its LANG, DIR, CLASS, and ID attributes and it is a generic inline container.Style sheets are often used to suggest a presentation for a given class or ID. Span should only be used where no other HTML inline element provides a suitable on visual browsers, authors may prefer to use an appropriate font style element.The following are the examples: La Revolution Tranquille shook Quebec in the early 1960s. La Revolution Tranquilleshook Quebec in the early 1960s.These examples are identical in meaning, but the second example uses the (l) element to suggest italic text.LO2.2.4: LayoutInclude:1. Wireframes2. Not too much detail 3. Black/White/Grayscale only4. Homepage5. One or two subsequent pagesLO2.2.4.1: ColorCreate a couple of color schemes based on client preferences or your own for creating color schemes based on themes is Kuler.LO2.2.4.4: InspirationInclude notes on why you like a particular website and how you feel it can be best integrated into the design of their website. Include reasons why the look will suit them.

LO2.2.4.3: TexturesFind some textures, real or hand-drawn, that you feel fit in with the overall theme of the site.LO2.2.4.4: PhotographyAt this stage you can either use photography the client has supplied, or use stock photography to portray the overall theme of the site.LO2.2.4.5: StyleA certain mood board can be designed around various adjectives such as:Dark, glossy, slick, modern, edgy, hard, aggressiveSoft, muted, round, layered, elegant, realisticColorful, rough, sketchy, bright, illustrationIn doing so, you create a wide variety of styles for the client to choose from.Learning Outcome 3: Be able to implement interactive websites.Implementing a website means passing from the design stage to the completion and the launch of the site.This involves: Gathering all the contents necessary to populate the pages of the site, and entering them into the pages (Content Management). Transferring the pages to a server, and testing those Technical Aspects. Launching the site by informing the public about its existence.LO3.1: Implement a fully-functional interactive website using a design specificationLO3.1.1: Using Skip Navigation LinksSkip Navigation helps Internet users with special needs. It refers to a link in a web page that lets users go directly to the main content of the page. Then we will take a look at the factors concerning skip navigation and how to do it properly in your pages. There are many internet users who have difficulties in using the keyboard or the mouse.There are also many Internet users with dexterity issues. If there is a block of content or a set of links on every single page, these people would need to tab or arrow down through all the links to get to the main content.To help these groups of Internet users, you need to provide a skip navigation link. A skip navigation is like a book mark on a page.Here is a sample code for the skip navigation link, skipnav link which goes on the top of the page:Skip to ContentAnd this code you insert at the beginning of the content where your block want to skip ends: LO3.1.2: Use of ColorWhen discussing the design of a new site, a question that consistently arises is How so I select the most effective colors? Choosing the right color palette for z site is essential to communicate your message, brand your product or services, and, if you are an online business, sell your products.Color communicates far more than most people realize. Choosing wrong colors can be a disaster for your website.The visitor demographics also can make a difference in how colors are perceived. Young people are drawn more too saturated colors than adults, who may find them garish or offensive.Text and background color choices also readability, which can be an issue for older visitors and those with visual impairments.LO3.1.3: Web AccessibilityDesigning an effective website requires a lot of techniques, skills and testing. Testing determines the usability of the website, which ties into accessibility. Thus the most important things to consider when creating a website is accessibility.Accessibility is about making your website accessible to all Internet users your website and access its content. Everyone should have equal opportunity to access the web, regardless of their limitations or browsing technology.

LO3.1.4: Keyboard AccessibilityKeyboard Accessibility is one of the most important aspect of disability access. Blind people generally cannot use a mouse because they cannot see where to click.They use their keyboard almost exclusively. Additionally, some individuals with low vision may use a keyboard for improved interactions if the page is enlarged and the contrast is high.Some people simply do not have hands, whether due to a birth defect, an accident, or amputation. There is an almost limitless list of conditions that could make mouse usage difficult or impossible.Those who cannot use a mouse may not be able to use a keyboard either. Some use puff and sip devices activated by airflow from the mouth. If a website is not keyboard-accessible, you will shut many people out.Others use single switch devices consisting of a piece of hardware with one button that can be pushed.LO3.1.5: Heading element to Heading information may be user agents, for eample, to construct a table of contents for a document automatically.The following code shows all the heading levels, in useHeading level1Heading level2Heading level3Heading level4Heading level5Heading level6Here is the result of the codeHeading level1Heading level2Heading level3Heading level4Heading level5Heading level6LO3.1.6: Cascading Style Sheet(CSS)LayoutsIt is the most flexible way to create attractive, standards-complimant websites. Even so, many web designers choose to stick to the original HTML elements that they are familiar with in order to implement their designs.For example, HTML tables are often used in order to create the seemingly complex layouts on some web pages. The article will simply address the drawbacks of relying too heavily on tables for layout as well as the benefits of Cascading Style Sheets. It will also demonstrate how to implement a couple of page layouts using HTML and Cascading Style Sheets as an alternative to HTML tables.LO3.1.7: Accessible FormsThe accessibility issue for forms is whether or not users with disabilities, especially those who are blind or visually impaired, can determine the purpose of a specific form control and interact with it.These are collected in a form element along with other content including images and text. Usually form elements contain at least one submit button (button or input type=submit).A screen reader try to guess which text corresponds to the on-screen prompt for a given control. Often they guess correctly, but sometimes they are wrong. That is the problem. Being correct most of the tie is not good enough for filling out forms on the web.Screen reader user will be aware that a text entry field has focus, or a text area or checkbox, but may not know what information to type there or what being agreed to with the check.Push buttons, input with type=button, and input with type=submit include the value attribute, which is the text that is placed on the button, like Submit, Search or go. That text is immediately available to associative technology.LEATN CENTER is dedicated to the provision of a first class learning experience that will equip you with the skills, ability and knowledge to successfully compete in your chosen discipline.We are located in the heart of London city in a beautiful borough Hammersmith and offer a wide range of full-time & part-time programs to Certificate, Diploma, Undergraduate & Postgraduate levels.And it has all the information that a students need to know when he/she is planning to enroll. This website has 6 pages that is index (home page), Courses, Programs, Teachers, Admission and Contact.The three CSS file are Layout, Reset and Style. Following are the codes for the website I designed.I COULDNT CAPTURE ALL THE CODING THROUGH PRINT SCREEN METHOD. I WILL ATTACH A COPY OF THE CODING WITH MY REST OF THE ASSIGNMENT.

Footer

Learning Outcome 4: Be able to test interactive websitesActually, website work never ends. When all the design is done, you have to test the site first before sending it to the World Wide Web for the world to see.There is a site Management software that can do this. These software can help reconnect Graphics that may have been accidently moved, change the name of a file and re-link it and so many other things.Some of the things that have to be checked for quality assurance are multiple browser compatibility download time of graphics, Flash components, or streaming media, hardware requirements, memory size requirements, connection speed of user, and load number of users your website can accommodate.There are many companies now that are developing software specifically for quality assurance. But this software is expensive. Usually, e-commerce sites are load tested as they have a great deal of software running on their sites.Sometimes the best way to test your sites is by having an actual person go through your site and let him tell you the problems he encountered.Site testing is essential so that every aspect of your website is functioning, especially software. Site testing ensures that there are no broken lines, no missing graphics, no misspelled words, no bugs in the software, and the download time is as specified.There are many software out there that do the site testing for you. I will tackle only a few here that were recommended by experts. This will give an insight on how the software works and how extensive the testing is.LO4.1: Critical review and test the websiteLO4.1.1: Content CheckingThe website has to be tested for accuracy, completeness, consistency, spelling and accessibility. These areas are the first things judged by the user.Users must have the best possible experience with your website. Even just a faculty image can create a bad impression on the user and may not visit your site again.Testing for this is very simple and as straightforward as they are. Tests for content may not be the first thing in the designers mind but it is the most important of all the tests.LO4.1.2: Configuration TestingThis test involves the operating systems platforms used, the type of network connection, the type of internet service provider; and the browser used. The development team must have these in mind so that there will be very title changes to be made if any.And also, the test environment must be properly configured for all these considerations.LO4.1.3: UsabilityDesigners should always remember that the experience of the user in the website must be pleasant as possible. There may be cases when the user is someone very familiar with website browsing but not necessarily a testing expert.There are standards and guidelines for tests for usability. However, designers and/or project manager should not rely on them too much since complying with these standards doesnt necessarily ensure that the site will meet the needs of the users, their tasks and their work environments.Design guidelines must be set and they must be measurable so that they can be easily incorporated into the tests.LO4.1.4: Browser CompatibilityA website has to be designed to be compatible for a majority of the browsers. This still leaves room for creativity. Even with Microsofts Internet Explorer and Netscapes Navigator this is an issue because of the different versions people are or still are using.Some of the things to check are centering of objects, table layouts, colors, monitor resolution, forms, and buttons. The code that executes from the browser also has to be tested. There are different versions of HTML.Some of the other codes to be tested are Java, JavaScript, ActiveX, VBScripts, CGI-Bin Scripts and Database access. CGI-Bin Scripts have to be checked for end-to-end. Operations and is most essential for e-commerce sites.The website has to be tested in each supported browser and must also be checked for multiple browsers renderings and responses. The purpose of this test is to find flaws in the navigation of the web pages. This include checking for broken links, faculty graphics, download speed of each page (over a variety of internet connections). The load time of all the objects must be within an acceptable time.The user must still be able to browse the site even if the images-load option is turned-off. Other components to check are the scripts and plug-ins.LO4.1.5: Transaction TestingThis is very critical in an e-business application. A website is utilizing has to be forced to invoke its various components and whether the direct and the indirect interfaces work correctly.The information entered by the user calls for information contained in the database, the proper data must be returned.LO.4.2:Analyse actual test results against expected results to identify discrepancies1. SCRUTINY: The substantial to be verified is inspected by exact plans to classify suitable trail cases. Examination methods that include organized relics for example style explanation dialects and user interface design can be automatic to decrease the trial capitals wanted for a plan.2. STRUCTURE: The relics wanted to perform the trials stated in the assessment strategy are made. These relics frequently contain assessment carters, test facts arrays, and the software that forms the definite assessments.3. IMPLEMENTATION AND VALUATION: the tests are led, and the outcomes are examined. The software is arbitrated to have approved or else botched both assessment. This info leads choices roughly whatever the following phase will be in the progress procedure.LO4.3: Evaluate independent feedback and made recommendation for improvement.Most web designers and developers avoid getting feedback on their work because it can be time consuming, frustrating and even scary. But it doesnt have to be that way.When done right, you can gather feedback that will inspire you, give you a fresh perspective and push your work to the next level.LO4.3.1: Start EarlyFeedback should be part of your production plan from the moment you start working on a new website. The earlier you start asking for feedback, the easier it will be to make a change. Dont wait until youre emotionally invested inyour design to start getting feedback.LO4.3.2: Use the right toolsPeople often avoid asking for feedback because of an unproductive past experience. Either the people asked didnt respond, or there was no good way of collecting the feedback.Example of tools include:-1. Concept Feedback- Concept Feedback is a free website feedback community for designers, developers and marketers. Members can upload a concept a website, specify an objective and start receiving constructive, actionable feedback from other members.

LO4.3.3: Ask the right questionsMake sure to classify your objective. By providing direction ahead of time, youre more likely to receive focused feedback that clearly addresses what you want to know. Instead of asking what do you think ask what elements of this design catch your attention right away? or what confuses you most about this website? Also, try to keep brief.LO4.3.4: Be OpenThis goes back to emotional investment. If youve already made up your mind about a website, and theres no changing it, no matter what anyone says, then dont waste your time or theirs. Seek feedback only when youre going to pay attention to it. Dont become so attached to a design or layout that you cant hear the constructive ideas being offered by those around you.LO4.3.5: Repeat the processFeedback is an ongoing process. Dont just stop after the first draft, continue to get feedback as you revise and improve your design. The more you times you repeat the process, the easier it will be to get in to the habit of asking for feedback and the better websites will be the result.LO4.4: Create onscreen help to assist the user1. Click any browser you using for accessing the internet. On the Google page type www.learncenter.co.uk2. The homepage of my website learn center will appear as shown below:-

3. Scroll all the way down to find details about the center.

4. To get info about the courses, admission and contact click on the tabs on the top of the homepage.5. To subscribe to our monthly newsletter just type in your email address and hit the subscribe button.6. On the programs tab contains the lineup with dates of the centers term activities.LO4.5: Create documentation for the support and maintenance for the websiteWebsite maintenance comprises all the activities needed to ensure the operational integrity of your website or intranet. In other words, it is about doing all the things needed to make your site runs smoothly and according to plan.Letting your information become outdated or not placing new products and services, and not striving to place new information and solutions, deteriorates your sites value for the internet community and for your business.When new developments occur in your industry or business, new product releases or events happen you should strongly consider updating your Site before your competitor does. Keeping regular website maintenance helps to: Continually improve your search engine ranking Increase the number of visitors to your site Meet your customers needs and expectations Keep your companys Internet presence strong.Website management consist of :-1. Website hosting2. Unlimited file storage3. Daily site back-up4. Link analysis, verification and repair5. Updating plugins, tools and databases6. Traffic analysis7. Updating content8. Optimizing keywords9. Uploading, compressing and optimization of new images.

Reference:

Create a website accessible at http://www.wikihow.com/Create-a-Nice-and-Simple-Flash-Website (Read : 07/03/2015)Defining the role accessible at http://www.diffily.com/articles/webteamroles.htm (Read: 07/03/2015)Design and Development using standard web tools accessible at http://www.google.com/webdesigner/ (Read : 07/03/2015)Study about the website design and implementation accessible at http://www.google.com/webdesigner/ (Read: 07/03/2015)Tutorials for php and CSS http://html.net/ (Read: 07/03/2015)