HTML Portfolio

1
HTML Portfolio

• Gathering Material
• Basic Design
• Effective Content
• Usability and Testing
• Ethics and Credibility

2
Requirements Gathering

• Site Owners goals
• What do you want? A job
• Site Users goals
• What matters to that specific employer
• Human and Technical Resources
• What can you do?
• What can the host server do?

3
Requirements Gathering cont.

• Possible content items
• Writing samples (PDF)
• Audio/Video resume
• Projects
• Resume
• E-mail links to references
• Ect.

4
Basic Design

• Sitemap
• Information Architecture
• How many pages?
• What goes on each page?
• How do you get from page to page?

5
Basic Design cont.

• Wireframes
• Sketch of the basic page layout
• Header
• Text
• Links
• Images

6
Basic Design cont.

• Visual Design
• Accessible
• Useable
• Relevant

• Color
• Layout
• Shapes
• Words
• Images

7
Basic Design cont.

• Attention and Focus
• Guide to content
• Show the context
• Show impact
• Sets tone and mood
• Define the audience

8
Basic Design cont.

• Consistency
• Color scheme
• Page layout
• Size and spacing
• Basic geometric forms

• Simplicity
• Minimalism
• Content is the most important thing!

9
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

10
TESTTESTTEST

• Plan
• Get people to look at it
• Make sure pieces are ready
• Ask for specific feedback
• Revise
• Test

11
Ethics and Credibility

• Credibility is earned
• Accurate info
• Convince visitors that you know what you are
  talking about
• Focus on users needs

12
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

13
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

14
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)

15
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

16
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

17
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
  users computer

18
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

19
Graphics on the Web

• Web graphics can be interactive
• Many web graphics contain movement

20
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

21
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