1. Designing e-Portfolio Website ( Part 3 ) Lan Vu

2. Overview Some techniques in web design Demo on creating & designing website What make a good website Practicing with your own site

3. Some techniques in designing your web page

4. Design Techniques Design Layout For Webpage Design Theme For Website

5. Design Layout For Webpage Layout of web pages is very important Poor layout makes for - ▫ Difficult navigation ▫ Hard to locate information on page ▫ Visually unappealing

6. Design Layout For Webpage

7. Use tables for easy laying out your pages Make the table borders invisible Example: a layout with 2x2 table Menu Header Content

8. Examples

9. http://www.eecs.berkeley.edu/~smm/ IMAGEHEADER MENUCONTENT

10. Examples http://www.eecs.berkeley.edu/~smm/ Use 2x3 table One column is used as divider

11. Examples

12. Header Content http://www.cs.berkeley.edu/~acarle/

13. Examples http://www.cs.berkeley.edu/~acarle/

14. Examples http://www.cs.berkeley.edu/~acarle/ Sub table Main table

15. Examples Complex layout http://www.gdgib.com/

16. Examples http://www.gdgib.com/ One main table

17. Examples http://www.gdgib.com/ Some sub tables inside main table

18. Examples http://www.gdgib.com/ Some more tables inside sub tables

19. Design Layout For Webpage Steps of designing layout webpage with table ▫ Add table ▫ Adjust the width of table and cells ▫ Format the table  Table borders (invisible/visible)  Table background (transparent/color/image)  Using Style in Properties box in Visual Studio ▫ Add content to cells

20. Design Techniques Design Layout For Webpage Design Theme For Website

21. Create a consistent look throughout your website Let visitors know they are still in your website while browsing different pages How? ▫ Use a common layout for all pages ▫ Use color of texts, links, buttons and graphics… reflecting that color theme

22. Design Theme For Website http://www.cs.colorado.edu/~hughesal/ Index.html research.html publications.html contact.html

23. Demo on creating & designing website

24. What make a good website

25. What make a good website? Good website design is NOT just about pretty colors, groovy graphics, and knocking out code. BUT a terrible look can certainly kill a site. Good website design requires a good planning

26. What make a good website? Content Well-organized Easy to navigate Attractive Up-to-date

27. Content of a Personal Website Who is my website for? What do they want from the website? What do I want from the website?

28. Content of a Personal Website Who is my website for? ▫ To your target audiences  Prospective employers  Your advisers and professors  The news media and the general public ▫ Avoid making your reach too broad or too narrow What do they want from the website? What do I want from the website?

29. Content of a Personal Website Who is my website for? What do they want from the website? ▫ Ask some of your target audiences for the answers ▫ Do the references on similar sites  Example: http://www.eecs.berkeley.edu/GradAffairs/gradhomepages.shtml ▫ People visit your website for the information about yourself, so make sure you provide enough What do I want from the website?

30. Content of a Personal Website Who is my website for? What do they want from the website? What do I want from the website? ▫ Your own goals for the site are important  Employment  Scholarships  Internships  Publish course work to professors ▫ Content allows you to establish yourself as an expert in your field

31. What make a good website? Content Well-organized Easy to navigate Attractive Up-to-date

32. Organizing the content ▫ Listing most of content in the homepage http://www.eecs.berkeley.edu/~jemins/ http://www.cs.berkeley.edu/~stauffer/

33. Organizing the content ▫ Homepage features highlight information and sub pages give more details. http://www.eecs.berkeley.edu/~mjohnson/ http://www.cs.berkeley.edu/~yurym/

34. Organizing the content ▫ Homepage is introduce page and details are on sub pages which is accessible from menu

35. Sample of bad content organization http://www.havenworks.com/

36. What make a good website? Content Well-organized Easy to navigate Attractive Up-to-date

37. Easy to navigate A well-organized generally drives the ease of navigation. Keep scrolling down to a minimum by keeping individual Web pages short. Always have links back to your home or major sections. Use color to identify for users where they are in your site.

38. Information is grouped clearly for easy navigating http://www.cs.berkeley.edu/~acarle/

39. Using menu for easy navigating http://www.catanzaro.name/

40. Using menu for easy navigating http://www.cs.colorado.edu/~hughesal/

41. What make a good website? Content Well-organized Easy to navigate Attractive Up-to-date

42. Make your site attractive Choose simple colors that compliment each other & work on most web browsers. http://www.huntgraphic.com/moto.htm BAD COLORS http://www.catanzaro.name/ GOOD COLORS

43. Make your site attractive Avoid backgrounds that wash out your text. http://home.comcast.net/~dmaneyapanda/zugorific/personal2.html BAD USE OF BACKGROUND

44. What make a good website? Content Well-organized Easy to navigate Attractive Up-to-date

45. Keep your site up-to-date Have your site completed before public it ▫ You may keep it simple but NOT under construction Update your site continuously with new artifacts, evens and achievements

46. Some Design Mistakes 1.Long pages, too much scrolling, boring text 2.No structure 3.No navigation 4.Overwhelmed with multimedia ▫ big images ▫ too many images and/or video clips ▫ obnoxious noise, background music ▫ boring or aggressive animation 5.Bad images (poor quality) 6.Using too many colors, fonts, blink

47. Practicing with your own site

48. Decide layout for your WebPages Decide an theme for your website Complete your website with many pages ▫ Add links ▫ Add graphics

49. References 1)http://ls.berkeley.edu/lscr/advice/web/designhttp://ls.berkeley.edu/lscr/advice/web/design 2)http://www.successdesigns.net/articles/entry/characteristics-of-a-good- website/http://www.successdesigns.net/articles/entry/characteristics-of-a-good- website/ 3)ttp://www.coastline.edu/departments/webservices/cis111/week2/html.pdf 4)Riyadh, How to create better departmental and researchers websites, Workshop Best Practices in Content Management and Scientific Social Networks, 1 – 3 November 2008