1 / 49

Designing e-Portfolio Website ( Part 3 )

Designing e-Portfolio Website ( Part 3 ). Lan Vu. Overview. Some techniques in web design Demo on creating & designing website What make a good website Practicing with your own site. Some techniques in designing your web page. Design Techniques. Design Layout For Webpage

oren
Télécharger la présentation

Designing e-Portfolio Website ( Part 3 )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Design Layout For Webpage • Use tables for easy laying out your pages • Make the table borders invisible • Example: a layout with 2x2 table Header Menu Content

  8. Examples

  9. Examples IMAGE HEADER MENU CONTENT http://www.eecs.berkeley.edu/~smm/

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

  11. Examples

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

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

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

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

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

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

  18. Examples • Some more tables insidesub tables http://www.gdgib.com/

  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. Design Theme For Website • 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 contact.html research.html publications.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. GOOD COLORS BAD COLORS http://www.huntgraphic.com/moto.htm http://www.catanzaro.name/

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

  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. Long pages, too much scrolling, boring text No structure No navigation Overwhelmed with multimedia big images too many images and/or video clips obnoxious noise, background music boring or aggressive animation Bad images (poor quality) Using too many colors, fonts, blink Some Design Mistakes

  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 • http://ls.berkeley.edu/lscr/advice/web/design • http://www.successdesigns.net/articles/entry/characteristics-of-a-good-website/ • ttp://www.coastline.edu/departments/webservices/cis111/week2/html.pdf • Riyadh, How to create better departmental and researchers websites, Workshop Best Practices in Content Management and Scientific Social Networks, 1 – 3 November 2008

More Related