Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Web Design Harold Waterman Associate Professor Design Topics • • • • • • • • • Internet Usage Stats Web 2.0 Web Design Process Planning Site Goals and Objectives Knowing your Audience Building your Site Working with Images Publishing your Site Usage Although the internet is an increasingly global phenomenon, many parts of the world still have less that 1% of their population online. More Stats Population Web Stats “Contentious problems are best solved not by Imposing a single point of view at the expense of all others, but by striving for a higher-order solution that integrates the diverse perspectives of all relevant constituents” -Mary Parker Follett Web 2.0 • Embraces an architecture of participation—a design that encourages user interaction and community contributions. You, the user, are the most important aspect of Web 2.0—so important, in fact, that in 2006, TIME Magazine’s “Person of the Year” was “you.” Source:www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html Web 2.0 Continued… O'Reilly's philosophy of Web 2.0 included these ideas: • Using the Web as an applications platform • Democratizing the Web • Employing new methods to distribute information Web 2.0 Continued… The example O'Reilly used in his blog entry was Google. He said that Google's value comes from several factors: • It's a multi-platform service. You can access Google on a PC or Mac (using a Web browser) or on a mobile device like a cell phone. • It avoids the business model established by the software industry. You don't need to buy a particular software package to use the service. • It includes a specialized database of information -search results -- that seamlessly works with its search engine software. Without the database, the search application is worthless. On the other hand, without the search application, the database is too large to navigate. Web Design Process • THE FIRST STEP in designing any Web site is to define your goals. Without a clearly stated mission and objectives the project will drift, bog down, or continue past an appropriate endpoint. Careful planning and a clear purpose are the keys to success in building Web sites, particularly when you are working as part of a development team. Web Design Process Planning • Web sites are developed by groups of people to meet the needs of other groups of people. Unfortunately, Web projects are often approached as a "technology problem," and projects are colored from the beginning by enthusiasms for particular Web techniques or browser plug-ins (Flash, digital media, XML, databases, etc.), not by real human or business needs. People are the key to successful Web projects. Web Design Process Planning • To create a substantial site you'll need content experts, writers, information architects, graphic designers, technical experts, and a producer or committee chair responsible for seeing the project to completion. If your site is successful it will have to be genuinely useful to your target audience, meeting their needs and expectations without being too hard to use. Web Design Process Planning • Although the people who will actually use your site will determine whether the project is a success, ironically, those very users are the people least likely to be present and involved when your site is designed and built. Remember that the site development team should always function as an active, committed advocate for the users and their needs. What are your goals? • A short statement identifying two or three goals should be the foundation of your Web site design. The statement should include specific strategies around which the Web site will be designed, how long the site design, construction, and evaluation periods will be, and specific quantitative and qualitative measures of how the success of the site will be evaluated. Know your audience • The next step is to identify the potential readers of your Web site so that you can structure the site design to meet their needs and expectations. The knowledge, background, interests, and needs of users will vary from tentative novices who need a carefully structured introduction to expert "power users" who may chafe at anything that seems to patronize them or delay their access to information. Know your audience Continued… • A well-designed system should be able to accommodate a range of users' skills and interests. For example, if the goal of your Web site is to deliver internal corporate information, human resources documents, or other information formerly published in paper manuals, your audience will range from those who will visit the site many times every day to those who refer only occasionally to the site. Site Design • The fundamental organizing principle in Web site design is meeting users' needs. Ask yourself what your audience wants, and center your site design on their needs. Many organizations and businesses make the mistake of using their Web sites primarily to describe their administrative organization, and only secondarily do they offer the services, products, and information the average user is seeking. Site Design • Most readers won't care how your company or department is organized and will be put off if such inside information is all your site appears to offer. Talk to the people who make up your target audience, put yourself in their shoes, and make the items and services they want the most prominent items on the home page. Design Strategies • Why do we like certain pages? • Navigation • Content • Text • Contrast Home Design Elements Site Map The Reader Web Design Process • A wireframe is a non-graphical layout of a web page. It is a simple drawing of the chunks of information and functionality for each page in your site. Dynamite create a wireframe for the home page, each unique second level page and any other significantly different page on the site. • Wireframes include the containers for all the major elements of the page. Elements include navigation, images, content, functional elements (like search) and footer Source: www.webstyleguide.com Final Content Outline • Final content outline will help to create a sitemap or site diagram. A site diagram is just a visual representation of your content outline and site structure. Professional Sites Professional Sites Continued… Global Structure elements <HTML> Opening Tag The HTML element: Identifies a file as being an HTML document. Usually found at the start and end of code. </HTML> Closing Tag Global Structure elements (cont.) <HTML> <HEAD> Opening Tag </HEAD> Closing Tag </HTML> The head element: Contains information about the document, such as the title, indexing information, and style rules. Global Structure elements (cont.) <HTML> <HEAD> <TITLE>Document Title</TITLE> </HEAD> Opening Tag Closing Tag The title element: Displays its contents in the title bar of the document window. The title is used as the reference when a page is used as a bookmark(favorite). </HTML> Global Structure elements (cont.) <HTML> <HEAD> <TITLE>Document Title</TITLE> </HEAD> <BODY> Opening Tag The body element: Holds the contents of a Web page. Any attributes applied to this element affect document-wide properties. </BODY> </HTML> Closing Tag Adobe Dreamweaver Dreamweaver Starter Pages Quick Design Adobe Dreamweaver http://www.youtube.com/watch?v=yxqErPjuq80 http://www.youtube.com/watch?v=Ltq6GnP6qoQ Split View Microsoft Expression Web http://www.youtube.com/watch?v=2ETY4IVmTes Microsoft Expression Web http://www.youtube.com/watch?v=CXDCy8_HWEE Web Graphics • Although electronic publishing frees you from the cost and limitations of color reproduction on paper, you will still need to make careful calculations (and a few compromises) if you wish to optimize your graphics and photographs for various display monitors and Internet access speeds. Web Resource for Educators Blogging your students • http://rogers.edublogs.org/. • http://futureofmath.misterteacher.com/blogs2.html . • To get started go to the following site: • www.wordpress.com • https://www.blogger.com/start • http://www.flickr.com Free Web Page Stuff • • • • • • • www.w3schools.com/ www.pagebreeze.com/download.htm www.thefreecountry.com/webmaster/freeftpclients.shtml http://files.uberdownloads.com/software/ftp-clients/filezilla.html www.merlot.org http://www.freetwitterdesigner.com/ http://www.templateworld.com/free_templates.html • • Accepting Credit Cards http://www.thesitewizard.com/archive/creditcards.shtml Questions