WEB PORTFOLIOFINAL EXAM

OBJECTIVE: A personal portfolio website is all about promoting you. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you’re a Web designer, developer, writer, gamer or any other type of creative, then it’s essential that you have a good portfolio website.You may have a personal website for a number of reasons.

  • If you’re a student (or unemployed), then you’d need one to show prospective employers how good you are and what you can do, so that they might hire you.
  • If you’re a student looking to get College Credit or accepted into an Art School, then an online portfolio is pretty much mandatory.
  • If you’re a freelancer, then you need one to showcase your work and allow people to contact you.

In many instances, your portfolio will be looked at without you present, without any other information about you, and probably by a person who has never spoken to or seen you in person. If your portfolio has to stand alone in a critical situation like hiring, it’s worth spending some time making sure it’s going to get the job done!

ITEMS FOR WEB PORTFOLIO:

  1. Logo_____4 sketches & 1 FINAL DRAFT via Illustrator (16 pts)

TIP: “It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And ALWAYS link your logo to your home page. It’s a common convention that users expect online.”

  1. Your logo is usually the first thing a user sees: SIZE: 4x4 inches, 300 resolution
  2. Use as an expression of your art technique or your general interests: SIMPLE
  3. Make it memorable, timeless, scalable and appropriate(used on a business card too)
  4. An industry standard, logos are almost always placed at the top left of a web page
  5. The logo stands by itself, as a powerful identifier, but the design of the site adds colors that appeals to its viewers
  1. Tagline_____1 tagline (4 pts)

TIP:“Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline.”

  1. Your tagline should be short and snappy, summarizing what you do
  2. Things to ask yourself when writing your tagline:
  3. What are you? A designer? A writer? A developer?
  4. What do you do? Design websites? Work in photography?
  5. Example--
  6. Click>Company Slogan Samples>Read Thinking>View Solution
  1. Layout

TIP: “One common mistake new developers make is to overdo it when putting together a web site...but used sparingly it can add just the right seasoning. When spicing up your site, try to add things only when they complement what's already there, and not to overdo it when you find something you like.” Colin Mackenzie

  1. Design a layout that is simple, yet shows off your artistic ability
  2. Use NotePad, Dreamweaver, WordPress.com, or Wix.com - - 1024x768 pixels
  3. Examples--
  4. Search Google.com for sample web layouts, there are many to browse through!
  1. Navigation—Pages for your site

TIP:“When I used to look through job applications, for the most part I would open the email and look for a link to click. My first thought would be “is this portfolio downright ugly or horrible?” If it managed to pass that simple test then I’d go straight to work samples, and only if the work was good would I consider reading an about page, blog, or doing anything else.” Collis Ta’eed

  • MUST INCLUDE: For each page, have the Navigation Button a Different Color
  • EX.: All buttons are Black, but whatever page you are on, that tab would be Green
  • Example:
  • Use of Rollovers are a nice feature, but not a necessity
  • Home
  • You need to hook them right off the bat
  • Create a Splash Page or place a cool catchy animation on Home Page
  • Try to get to the point on the first page, or at least give people an idea of what your site is about. If people have to go hunting, they may move on.
  • “Welcome to the Portfolio of ______”
  • Add a few sentences about what you have done and hope to accomplish.
  • Work Examples—Show your best work 1st--if an item was tutorial project, then re-create it on your own so you can explain the design process before you use it
  • NEED 8 or more

TIP:“A portfolio that showed work that I could imagine handing over to a client was one I would bookmark.”

Use a Table with a sample image showing with Software & Explanation (table b/c all evenly spaced)

AE-Animations / FL-Animations created / PS-Images Manipulated / Ultra-Use of Green Screen knowledge
DW-Screenshots then link to website, if posted / AI-Drawing Created or Traced / PR-Videos/Commercials created / GameMaker-Screenshots of Game
FW-Images/Animations or Layouts created / ID-Page Layouts for a Magazine or Yearbook / SB-Before and After of Edited Recordings / 3dsMax-Images created

Samples from different areas are tobe used

Samples from different areas are tobe used

Animation / Audio Recordings (bfr/aftr edited) / Sketches, Drawings / Graphic Design or Illustrations / Music (GarageBand)
Photography or Paintings / Video/Trailers / Video Games / Web Design/Code / 3D Design
  1. Make your portfolio fast, accessible and simple. Make previews large, include links to websites, & avoid having to open dozens of new windows
  2. Example--
  3. Explain Your Work
  4. Giving information about a portfolio piece not only fills the viewer in on the job, but it gives you a chance to shine.
  5. Another question to answer is what part you played in the project—did you do everything? Layout, design, graphics, video, etc…

--For every piece of work, a short description is included

OPTION: Skills, Work History, Awards, & Letters of Recommendation—All on 1 page or Split all or part up?

  1. Skills
  2. Using your resume as a guide, list skills you can work on with a short explanation of what you can do in each area

--Example--

Animation, Web Design, Graphic Design, 3D, Drawing, etc…

  1. Work History (The ones that relate to this field; Label as In-Class Assignment or Outside Project)
  2. In-class Assignments
  3. Marketing Students Websites—Sr’s: March 2008 Jr’s: March 2009
  4. NASA Core Billboard—Sr’s: October 2007
  5. Yearbook (2008-2009)
  6. Outside Projects---List name of Company, Project, & web address(if posted)

Sr’s—List the month & year: October 2008 for example Jr’s: April 2009

  1. Awards
  2. List Name Contests (Month and Year) & Place Awarded
  3. Using your resume/portfolio as a reminder, list any awards you have received as it would relate to the Design Field (BPA, Drawing, Design an Ad, etc…)
  4. Letters of Recommendation
  5. Attach a copy or type a short paragraph, in quotes & list the name of the person who stated what you wrote, of a Letter of Recommendation
  6. Contact Information
  7. Your Name
  8. Email (Again, make sure the name is something employers could use to email you)
  9. If you do not have an email, go to Google.com and sign up for one
  10. Use your first & last name or first initial last name, etc…
  11. Use Text Fields so people can email you directly
  12. Search the web for code &Copy/Paste into DW>Code View
  13. Click this link, then on LEFT side> Use Form Tools to add your Options

--Example:

(Use DW for below or search Google for code & copy code into)**Be sure to use your email address**

  1. Insert>Form>Text Field(Box for name, email, phone number , etc…)
  2. Type in Name in top 2 boxes
  3. Insert>Form>Text Area (Larger Text Box for them to type in why they are getting in touch with you)
  4. Submit button to your email: Insert>Email Link

-- Example:

  1. Posting your Website
  2. Search Web for Free Hosting plus ftp capability
  3. Examples-- or

; ; ; ;

  1. Choose a name for your website—Your Full Name or First initial+last name
  2. Choose a username & password you will remember & write it down
  3. Use your email that you just signed up for or your most appropriate one
  4. Remember, you will be using this site for college entrance interviews/course credit and for future jobs
  5. Make it a site you are proud to show off to Family, Friends, & Employers
  1. BusinessCards

TIP:“The stylish side is very subjective, and everybody will have their own idea of what looks good. Just make sure that you don't minimize the importance of layout and design...first impressions are hard to erase.”

  1. Resolution is 300 dpi/ppi------Convert your graphics to CMYK colors
  2. Your business card size will be 3.5" x 2"
  3. Using yourlayout and/or color scheme, use it as a guide for your Business Card
  4. Front will include: Your Logo & Tagline, Your name, Email, & Phone number with color scheme and layout similar, or not, to your website (your layout is a high quality design) (optional: Address, City, State, Zip Code)
  5. Back Side: Thumbnails of sample work; Your Skills; ORCombo of both ideas
  6. Examples--
  7. PRINTING YOUR CARD
  8. Save your image as a GIF or JPEG
  9. Use Windows side, Open Microsoft Publisher>Business Cards>Blank 3.5” x 2”
  10. Click Create on bottom right side>Insert>Image from File
  11. Once your card appears>Print Preview & All 10 should appear
  12. Use Tray 1 to place your card, put the slider to letter
  13. Once you print side 1, Place your paper in again: Image Side Up with your text legible to you when standing at the Time Clock