Download Internet Tools

HTML Portfolio
Gathering Material
 Basic Design
 Effective Content
 Usability and Testing
 Ethics and Credibility

Requirements Gathering

Site Owner’s goals
 What

Site User’s goals
 What

do you want? A job
matters to that specific employer
Human and Technical Resources
 What
can you do?
 What can the host server do?
Requirements Gathering cont.

Possible content items
 Writing
samples (PDF)
 Audio/Video resume
 Projects
 Resume
 E-mail links to references
 Ect.
Basic Design

Sitemap

Information Architecture
 How
many pages?
 What goes on each page?
 How do you get from page to page?
Basic Design cont.

Wireframes

Sketch of the basic page layout
 Header
 Text
 Links
 Images
Basic Design cont.

Visual Design





Accessible
Useable
Relevant



Color
Layout
Shapes
Words
Images
Basic Design cont.
Attention and Focus
 Guide to content
 Show the context
 Show impact
 Sets tone and mood
 Define the audience

Basic Design cont.

Consistency

Simplicity

Color scheme
Page layout
Size and spacing
Basic geometric
forms

Minimalism

Content is the most
important thing!



Effective Portfolio Content










Focused and concise text
Strong verbs and active voice
Lists
Meaningful headings, sub, and summaries
Avoid hyped language
Highlight key words
Orient to context of each piece
Talk about purpose, goals, skills and tools used
Draw to the key elements
Emphasize problem solving
TEST…TEST…TEST
Plan
 Get people to look at it
 Make sure pieces are ready
 Ask for specific feedback
 Revise
 Test

Ethics and Credibility

Credibility is earned
Accurate info
 Convince visitors that you know what you
are talking about
 Focus on user’s needs

Web Design Software
With the expansion of the Internet, software
developers released products in
 What-You-See-is-What-You-Get
(WYSIWYG) environment
 Early web sites created by programmers
with little knowledge of graphic design
 Early sites text-based, little graphic content

HTML versus WYSIWYG

WYSIWYG Web Design programs simplified
web site development
 Web
design became as easy as page
layout in print
 WYSIWYG programs automatically generate
HTML code necessary to create a Web site

Late 1990s: introduction of Dreamweaver
 Create sites with dynamic and interactive content
 Designers not required to learn HTML code
Macromedia Dreamweaver
WYSIWYG interface
 Dual-window layout for code and design
 Apply hyperlinks (areas on page that
users click to display other information)
 Image Maps (areas of graphics act as
links)
 Create Rollover buttons (button changes
appearance when cursor moves over it)
 Cascading Style Sheets (consistent styles)

There Has to Be Content
Text and Graphics handled differently
on the Web than in print
 Type in HTML not as flexible as
PostScript
 Seven HTML-based type sizes
 CSS allows for some control over
leading
 HTML allows different type alignments

Text and Type
Basic HTML does not let you set line
length
 Limited type style choice
 Limited number of default font styles are
used on Web to accommodate both
Macintosh and Windows
 Web fonts fairly generic
 In order to have creative type, must first
convert it to a graphic

Photography on the Web
Photographic images need to be
optimized
 Concern for quality must be balanced
with need for image to download quickly
 Download speed: the time it takes for an
image to transfer
from a Web server to
be displaced on a
user’s computer

Graphics on the Web
Graphic images include branding elements
and navigational buttons
 Branding elements: graphics on a page
that identify a company, or organization
 Banner or Masthead: top of the page with
company name and logo
 Navigational buttons: combination of type
and graphics that link pages in site

Graphics on the Web
Web graphics can be interactive
 Many web graphics contain movement

Content Creation Software
Vector-draw and image-manipulation
software generally create and optimize
a wide variety of graphics for the Web
 Creating content is the core of Web
design

Start the Site Development
Process
Preliminary ideas before site development
 Ideas hand-sketched or via computer
 Need site layout to show number of
pages, how pages are inter-connected
 Having page layouts before starting
Dreamweaver speed up production
dramatically
