designing e-portfolio website ( part 3 ) lan vu. overview some techniques in web design demo on...

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

Sample of bad content organization

http://www.havenworks.com/

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