designing e-portfolio website ( part 3 ) lan vu. overview some techniques in web design demo on...
TRANSCRIPT
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•Design Theme For Website
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
Design Layout For Webpage
Design Layout For Webpage•Use tables for easy laying out your pages•Make the table borders invisible•Example: a layout with 2x2 table
Menu
Header
Content
Examples
Examples
http://www.eecs.berkeley.edu/~smm/
IMAGE HEADER
MENU CONTENT
Examples
http://www.eecs.berkeley.edu/~smm/
Use 2x3 table
One column is used as divider
Examples
Examples
Header
Content
http://www.cs.berkeley.edu/~acarle/
Examples
http://www.cs.berkeley.edu/~acarle/
Examples
http://www.cs.berkeley.edu/~acarle/
Sub tableMain table
Examples
Complex layout
http://www.gdgib.com/
Examples
http://www.gdgib.com/
One main table
Examples
http://www.gdgib.com/
Some sub tables inside main table
Examples
http://www.gdgib.com/
Some more tables inside
sub tables
Design Layout For WebpageSteps 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
Design Techniques•Design Layout For Webpage•Design Theme For Website
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
Design Theme For Websitehttp://www.cs.colorado.edu/~hughesal/
Index.html
research.htmlpublications.html
contact.html
Demo on creating & designing website
What make a good website
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
What make a good website?
•Content•Well-organized•Easy to navigate•Attractive•Up-to-date
Content of a Personal Website•Who is my website for?•What do they want from the website?•What do I want from the website?
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?
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?
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
What make a good website?
•Content•Well-organized•Easy to navigate•Attractive•Up-to-date
Organizing the content ▫Listing most of content in the homepage
http://www.eecs.berkeley.edu/~jemins/ http://www.cs.berkeley.edu/~stauffer/
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/
Organizing the content ▫Homepage is introduce page and details are on sub
pages which is accessible from menu
What make a good website?
•Content•Well-organized•Easy to navigate•Attractive•Up-to-date
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.
Information is grouped clearly for easy navigating
http://www.cs.berkeley.edu/~acarle/
Using menu for easy navigating
http://www.catanzaro.name/
Using menu for easy navigating
http://www.cs.colorado.edu/~hughesal/
What make a good website?
•Content•Well-organized•Easy to navigate•Attractive•Up-to-date
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
Make your site attractive•Avoid backgrounds that wash out
your text.
http://home.comcast.net/~dmaneyapanda/zugorific/personal2.html
BAD USE OF BACKGROUND
What make a good website?
•Content•Well-organized•Easy to navigate•Attractive•Up-to-date
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
Some Design Mistakes1. Long pages, too much scrolling, boring text2. No structure3. No navigation4. 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
Practicing with your own site
•Decide layout for your WebPages•Decide an theme for your website•Complete your website with many pages▫Add links▫Add graphics
References1) http://ls.berkeley.edu/lscr/advice/web/design2) http://www.successdesigns.net/articles/entry/characteristics-of-a-good-web
site/
3) ttp://www.coastline.edu/departments/webservices/cis111/week2/html.pdf4) Riyadh, How to create better departmental and researchers websites,
Workshop Best Practices in Content Management and Scientific Social Networks, 1 – 3 November 2008