Ray Elder  »  Designer & Educator  »  @rayelder

Flash Portfolio

Let your personality, creativity and skill do the talking.

Assignment Brief

Design and program an Adobe Flash portfolio showcasing you and your work.

Objectives

  • To showcase your individuality, creativity and skill
  • To enhance good design with intelligent interactivity
  • To create an enjoyable experience with subtle animation

Specifications

  1. Must use ActionScript 3.0, TweenMax & TimelineMax
  2. Must be viewable online at your domain
  3. Must showcase at least 15 projects
  4. Required primary pages:
    Home, project category & project detail
  5. Required secondary pages:
    Contact, Biography & Resume

Deliverables

Always be ready to present or turn-in at the beginning of class.

Research & Thumbnails: Thumbnails and documentation of research should be saved to the AVC server in PDF format.

Wireframes: Rough and final versions of wireframes should be saved to the AVC server in PDF format.

Interface Design: Rough and final versions of interface design should be saved to the AVC server in PDF format.

Flash Portfolio: Final portfolio website should be uploaded and viewable at your domain. Website usability, experience and visuals should be refined to a 4000 level. All ActionScript code should be clean, error free and commented.

Timeline

Project hours: 36

Six weeks of the semester are assigned to complete this project. Late work will not be accepted or critiqued. See semester schedule for deadlines.

Week One

Research & Ideation: Research well-designed and innovative websites. Document proof of your research with links and/or printed screenshots. Thumbnail 3 unique layouts detailing all required page elements. Your thumbnails should clearly show concept (if applicable), consistent use of grid and the beginnings of visual hierarchy. Research and thumbnails should be saved to the AVC server.

Week Two

Wireframes & Interface Roughs: Choose the most appropriate and innovative layout. Using your thumbnails as reference design wireframes and roughs for 2 different visual styles. Export a PDF of each visual style for on-screen presentation and group critique. Roughs should be saved to the AVC server.

Week Three

Wireframes & Interface Finals: Based on critique feedback choose the most appropriate and innovative of your two visual styles. Further refine your wireframes and interface design. Export a PDF of the refined visual style for on-screen presentation and group critique. Finals should be saved to the AVC server.

Week Four

Beta Critique: Focus on the technical requirements of your website. Create a functional website based on the final wireframes and interface design. Ensure all ActionScript code is clean, error free and commented. Upload your website for on-screen presentation and group critique.

Week Five

Beta Launch: Focus on the aesthetics of your website. Refine both the functionality and aesthetics of your website. Refine website usability and performance. Ensure all ActionScript code is clean, error free and commented. Upload your website for on-screen presentation and group critique.

Week Six

Launch: Continue to refine both the functionality and aesthetics of your website. Ensure all ActionScript code is clean, error free and commented. Upload your website for on-screen presentation and final class critique.

Inspiration

Advice

  1. Think simple
  2. Think typographic
  3. Think unobtrusive
  4. No more than 2 typefaces
  5. No more than 2 or 3 colors
  6. Use deliberate hierarchy
    Scale, Color …
  7. Use shape
  8. Use line
  9. Use pattern

Questions to consider

  1. What do I want to communicate?
    Message and/or Impression
  2. Who is my audience?
  3. How will I promote my online portfolio?
  4. Should I include PDFs?
    resume & portfolio samples

Warnings

  1. Document your research
  2. Use an obvious grid
  3. Use thumbnail grid
  4. Use browser template

Adobe Illustrator Browser Templates

Adobe Illustrator Browser Template

Adobe Illustrator Browser Template

Download Browser Templates

Wireframe Samples

Wireframe Samples

Download Wireframe Samples