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

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

Examples

IMAGEHEADER MENUCONTENT

Examples Use 2x3 table One column is used as divider

Examples

Header Content

Examples

Examples Sub table Main table

Examples Complex layout

Examples One main table

Examples Some sub tables inside main table

Examples Some more tables inside sub tables

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

Design Techniques Design Layout For Webpage 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 Website Index.html research.html publications.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: ▫ 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

Organizing the content ▫ Homepage features highlight information and sub pages give more details.

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

Sample of bad content organization

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

Using menu for easy navigating

Using menu for easy navigating

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. BAD COLORS GOOD COLORS

Make your site attractive Avoid backgrounds that wash out your text. 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 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

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

References 1) 2) website/ website/ 3)ttp:// 4)Riyadh, How to create better departmental and researchers websites, Workshop Best Practices in Content Management and Scientific Social Networks, 1 – 3 November 2008