SlideShare a Scribd company logo
1 of 12
Download to read offline
AR340 WEB-BASED DESIGN




The Online Portfolio
Tips and Guidelines




            Bruce Clary, McPherson College, McPherson, Kansas
AR340 WEB-BASED DESIGN




The assignment

• Home page (index.html)
• About Me page
• Contact information
• Résumé – both HTML and PDF
• Galleries organized by type of work
AR340 WEB-BASED DESIGN




The home page

• It’s every user’s first impression. Make sure
    both content and design communicate your
    best qualities.

• Avoid the “splash page” approach. Clearly
    communicate…

   • Who you are
   • What you can do
AR340 WEB-BASED DESIGN



Your About Me Page
• Your chance to say what you’re trying to
   communicate visually in your design
• Keep it clear, clean, and brief – but it’s OK to let
   your style shine through
• Summary of skills and experience OK, but…
• This is the place you can be a person –
   hobbies, activities, family all OK –but…
• This isn’t Facebook
AR340 WEB-BASED DESIGN




Résumé
• Same content as your paper résumé
• HTML version – that is, a regular Web page
 • Typographical control is the key
• PDF of your paper résumé for downloading, or,
   alternatively…

• A print stylesheet for your HTML résumé
AR340 WEB-BASED DESIGN




Galleries
• Make ease of use the priority
• Show best work only – three examples of each
   type of skill probably enough

• Make images large enough for user to
   appreciate skill

• Explain what you did
AR340 WEB-BASED DESIGN




Contact Info
• One HTML form with fields for name, address,
   e-mail, and message required

• Probably best as separate contact page but
   might work well on resumé page
AR340 WEB-BASED DESIGN



Miscellaneous Tips

• Keep it clean, comm majors
• Don’t use technology (animation, for example)
    that you can’t duplicate

• Plan, plan, plan
   •   Site maps
   •   Wireframes

• Show your ideas, graphic designs and early
    pages to lots of people
Online Portfolio Guide

More Related Content

Similar to Online Portfolio Guide

E-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians MeetupE-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians Meetup
Lisa Chow
 
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and SkillsSLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
Lisa Chow
 

Similar to Online Portfolio Guide (20)

Projecting Yourself
Projecting YourselfProjecting Yourself
Projecting Yourself
 
Projecting Yourself through Your Portfolio Design
Projecting Yourself through Your Portfolio DesignProjecting Yourself through Your Portfolio Design
Projecting Yourself through Your Portfolio Design
 
Web Service Creation in HTML5
Web Service Creation in HTML5Web Service Creation in HTML5
Web Service Creation in HTML5
 
SOFLUX Meetup - Landing on your dream job
SOFLUX Meetup - Landing on your dream jobSOFLUX Meetup - Landing on your dream job
SOFLUX Meetup - Landing on your dream job
 
Using E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and SkillsUsing E-portfolios to Showcase Your Work, Experience, and Skills
Using E-portfolios to Showcase Your Work, Experience, and Skills
 
Barcelona Digital Designers: Portfolio Workshop Deck
Barcelona Digital Designers: Portfolio Workshop DeckBarcelona Digital Designers: Portfolio Workshop Deck
Barcelona Digital Designers: Portfolio Workshop Deck
 
E-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians MeetupE-Portfolio Presentation - NY Librarians Meetup
E-Portfolio Presentation - NY Librarians Meetup
 
Levering Your Portfolio(s)
Levering Your Portfolio(s)Levering Your Portfolio(s)
Levering Your Portfolio(s)
 
You Should Really Have an Online Portfolio
You Should Really Have an Online PortfolioYou Should Really Have an Online Portfolio
You Should Really Have an Online Portfolio
 
CV Writing Tips
CV Writing TipsCV Writing Tips
CV Writing Tips
 
LinkedIn Hacks
LinkedIn HacksLinkedIn Hacks
LinkedIn Hacks
 
LinkedIn Hacks
LinkedIn HacksLinkedIn Hacks
LinkedIn Hacks
 
404 Pages are inevitable so make the most out of it.
404 Pages are inevitable so make the most out of it.404 Pages are inevitable so make the most out of it.
404 Pages are inevitable so make the most out of it.
 
IA Summit Career Workshop 2015
IA Summit Career Workshop 2015IA Summit Career Workshop 2015
IA Summit Career Workshop 2015
 
Coloring Outside The LInes: Creative Thinking in a Sourcer's World
Coloring Outside The LInes: Creative Thinking in a Sourcer's WorldColoring Outside The LInes: Creative Thinking in a Sourcer's World
Coloring Outside The LInes: Creative Thinking in a Sourcer's World
 
English 335 Project 3 overview
English 335 Project 3 overviewEnglish 335 Project 3 overview
English 335 Project 3 overview
 
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and SkillsSLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
SLA Webinar: Using E-Portfolios to Showcase Your Work, Experience, and Skills
 
guide_linkedin.pdf
guide_linkedin.pdfguide_linkedin.pdf
guide_linkedin.pdf
 
J105 Web Design
J105 Web DesignJ105 Web Design
J105 Web Design
 
The art of using the web to find the unfindable
The art of using the web to find the unfindableThe art of using the web to find the unfindable
The art of using the web to find the unfindable
 

More from Bruce Clary

African Americans in the Civil War
African Americans in the Civil WarAfrican Americans in the Civil War
African Americans in the Civil War
Bruce Clary
 
The Civil War in the Age of Civil Rights
The Civil War in the Age of Civil RightsThe Civil War in the Age of Civil Rights
The Civil War in the Age of Civil Rights
Bruce Clary
 
Gone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost CauseGone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost Cause
Bruce Clary
 
Four Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil WarFour Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil War
Bruce Clary
 
Puritan Essentials
Puritan EssentialsPuritan Essentials
Puritan Essentials
Bruce Clary
 
Elements of Journalism, Chap 1
Elements of Journalism, Chap 1Elements of Journalism, Chap 1
Elements of Journalism, Chap 1
Bruce Clary
 

More from Bruce Clary (20)

Athletic Orientation-2015
Athletic Orientation-2015Athletic Orientation-2015
Athletic Orientation-2015
 
WPD Training
WPD TrainingWPD Training
WPD Training
 
The Design Consultation
The Design ConsultationThe Design Consultation
The Design Consultation
 
Writing the Self-Study Report
Writing the Self-Study ReportWriting the Self-Study Report
Writing the Self-Study Report
 
Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1Understanding the English Sentence: Lesson 1
Understanding the English Sentence: Lesson 1
 
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and DoubtThe Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
The Pierless Bridge: Emily Dickinson's Poems of Faith and Doubt
 
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
"You didn't build that": Copyright, Fair Use, and the Creative Commons Movement
 
African Americans in the Civil War
African Americans in the Civil WarAfrican Americans in the Civil War
African Americans in the Civil War
 
The Civil War in the Age of Civil Rights
The Civil War in the Age of Civil RightsThe Civil War in the Age of Civil Rights
The Civil War in the Age of Civil Rights
 
Gone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost CauseGone with the Wind: High Water Mark of the Lost Cause
Gone with the Wind: High Water Mark of the Lost Cause
 
Southern Honor
Southern HonorSouthern Honor
Southern Honor
 
Journey to Gettysburg
Journey to GettysburgJourney to Gettysburg
Journey to Gettysburg
 
Four Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil WarFour Major Interpretive Tradition of the American Civil War
Four Major Interpretive Tradition of the American Civil War
 
Still Fighting the Civil War
Still Fighting the Civil WarStill Fighting the Civil War
Still Fighting the Civil War
 
Student Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to KnowStudent Use of Multimedia: What You Need to Know
Student Use of Multimedia: What You Need to Know
 
Editing stills
Editing stillsEditing stills
Editing stills
 
Presentation1
Presentation1Presentation1
Presentation1
 
Ex3
Ex3Ex3
Ex3
 
Puritan Essentials
Puritan EssentialsPuritan Essentials
Puritan Essentials
 
Elements of Journalism, Chap 1
Elements of Journalism, Chap 1Elements of Journalism, Chap 1
Elements of Journalism, Chap 1
 

Recently uploaded

The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringBasic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptxslides CapTechTalks Webinar May 2024 Alexander Perry.pptx
slides CapTechTalks Webinar May 2024 Alexander Perry.pptx
 
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
TỔNG HỢP HƠN 100 ĐỀ THI THỬ TỐT NGHIỆP THPT VẬT LÝ 2024 - TỪ CÁC TRƯỜNG, TRƯ...
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
 
Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).Dementia (Alzheimer & vasular dementia).
Dementia (Alzheimer & vasular dementia).
 
The basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptxThe basics of sentences session 4pptx.pptx
The basics of sentences session 4pptx.pptx
 
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.pptBasic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
 
B.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdfB.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdf
 
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptxMatatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
Word Stress rules esl .pptx
Word Stress rules esl               .pptxWord Stress rules esl               .pptx
Word Stress rules esl .pptx
 
Salient features of Environment protection Act 1986.pptx
Salient features of Environment protection Act 1986.pptxSalient features of Environment protection Act 1986.pptx
Salient features of Environment protection Act 1986.pptx
 
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdfPost Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
 
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 

Online Portfolio Guide

  • 1. AR340 WEB-BASED DESIGN The Online Portfolio Tips and Guidelines Bruce Clary, McPherson College, McPherson, Kansas
  • 2. AR340 WEB-BASED DESIGN The assignment • Home page (index.html) • About Me page • Contact information • Résumé – both HTML and PDF • Galleries organized by type of work
  • 3. AR340 WEB-BASED DESIGN The home page • It’s every user’s first impression. Make sure both content and design communicate your best qualities. • Avoid the “splash page” approach. Clearly communicate… • Who you are • What you can do
  • 4.
  • 5.
  • 6. AR340 WEB-BASED DESIGN Your About Me Page • Your chance to say what you’re trying to communicate visually in your design • Keep it clear, clean, and brief – but it’s OK to let your style shine through • Summary of skills and experience OK, but… • This is the place you can be a person – hobbies, activities, family all OK –but… • This isn’t Facebook
  • 7. AR340 WEB-BASED DESIGN Résumé • Same content as your paper résumé • HTML version – that is, a regular Web page • Typographical control is the key • PDF of your paper résumé for downloading, or, alternatively… • A print stylesheet for your HTML résumé
  • 8. AR340 WEB-BASED DESIGN Galleries • Make ease of use the priority • Show best work only – three examples of each type of skill probably enough • Make images large enough for user to appreciate skill • Explain what you did
  • 9.
  • 10. AR340 WEB-BASED DESIGN Contact Info • One HTML form with fields for name, address, e-mail, and message required • Probably best as separate contact page but might work well on resumé page
  • 11. AR340 WEB-BASED DESIGN Miscellaneous Tips • Keep it clean, comm majors • Don’t use technology (animation, for example) that you can’t duplicate • Plan, plan, plan • Site maps • Wireframes • Show your ideas, graphic designs and early pages to lots of people