Jill Allden created an interactive digital portfolio using Flash for university interviews. She conducted research and decided a digital portfolio would be better than a physical one. Jill created a test gallery with sliding navigation and included features like rollovers. While the project was challenging, it provided experience with Flash and portfolio design that will be useful for future projects and interviews.
2. Original Ideas
O I planned to do a portfolio from the beginning
of the project.
O I didn’t know whether or not I wanted to make
a physical portfolio or a virtual one.
4. Domenic Lippa - www.pentagram.com --
"you have to decide what work
is important to you, what you are proud
of and more importantly what you can
talk about with enthusiasm.“
Brett Phillips - www.3deep.com.au --
"understand what to present to
[the interviewer] and why. [...] it takes
commitment, visibility and passion to be
considered or noticed."
5. Primary Research
Still aiming to
create a physical
portfolio, I
passed this
questionnaire
around to see
what my peers
thought.
6. O The results of the questionnaire were
somewhat mixed.
1.
3.
Art Journal - 4
By Date - 2
Website - 2
By Style - 4
Art Journal with CD - 3
By Method - 2
2.
4. Most results pointed toward
Art Journal -
having a single portfolio
Shows talent at traditional art /
practice
5.
is more personal
Illustration - 8
Website -
Digital Illustration - 3
Easier to use / navigate
Writing - 5
most employers would prefer a
Web Design - 2
website
Digital Design - 5
Shows digital ability
Craft – 6
Journal with CD -
More work types can be included
7. Deciding on an Idea
O From the research I decided to go on and do a
digital portfolio, instead of the physical one I
had planned to do.
O I chose to not do a website because I felt that
carrying a whole website around to interviews
would look messy on a memory stick.
O => I decided to make an interactive Flash
gallery
8. Test Gallery
O I already had an idea of the basic mechanics
of the gallery, so I made a three-slide test
where the blue bars move the slides forward
or backward.
9.
10.
11.
12.
13. Evaluation
O My brief was to create a portfolio for use at
university interviews.
O To use Flash
O ActionScript
O The software as a whole
14. Evaluation
O Creating rollovers
O Deciding what things to include
O Making a book front cover after everything
else had already been made
15. Evaluation
O If I was doing this project again, I would
O Plan.
O This project will help me in the future because
O Flash
O Experience in Portfolio creation
O Overall…
Editor's Notes
I planned to do a portfolio from the beginning of the project, because I knew I would need to make one for university interviews, and that it would be better to start as early as I could and make something memorable.I didn’t know whether or not I wanted to make a physical portfolio or a virtual one. When I started the project, I planned to make a physical portfolio, however this changed to wanting to create a virtual portfolio during the research stage.
I researched art journals and sketchbooks for a way to present my portfolio.
I also researched into interviews and essays by people in the design industries on what they recommended for a good portfolio.
The majority of the people I asked thought I should create a physical portfolio, and after that they thought I should include a CD of digital work.However, the justification for these choices mostly supported the creation of a website.From these results, I determined that most would prefer a portfolio in the form of an Art Journal, ordered by style of work. They also preferred me to include Illustration, Craft, Writing and Digital Design work in the portfolio.After doing all of my research and from the comments made in the answers to question two, I preferred to make a website or interactive gallery to showcase my work. My work doesn't often, if at all, include use of paper or material texture, so I did not think I’d lose anything by producing it digitally. I thought that I could always have a couple of my best pieces printed and mounted to show physically if I needed to.
From the research I decided to go on and do a digital portfolio, instead of the physical one I had planned to do.This was because I felt that a lot of my digital work, like websites, were better viewed in their intended environment, where the user could take advantage of hyperlinks and see things like hotspots and animations working.I chose to not do a website because I felt that carrying a whole website around to interviews would look messy on a memory stick. It would look much neater and more professional if all of the work was contained in a single file, like for interactive flash galleries. I decided to do one of these because I had, at that point, only a limited knowledge of adobe flash, and I wanted to become more competent at it.
I already had an idea of the basic mechanics of the gallery, so I made a three-slide test where the blue bars move the slides forward or backward.I set it up so that you would revert to the beginning slide when you came to the end one, which is something that I was thinking about leaving out of the final piece.In the end, I did remove the function that moved the slides back to the beginning after you reached the end, and I decided instead to use a link or similar to do this because books do not automatically restart when you finish them.
I decided to lay the pages of the portfolio out as if it were a comic book; I would use panels as rollover hotspots that, when clicked, bring up the full size version of the image.I also started to think about what I should put where and what headings I should put them under.
This is the first page I made.I started by scanning in a page from a sketchbook at a high resolution.I then edited it in Photoshop to create the double page. I then gave the white space a pattern that mimics Photoshop’s transparency. I did these things because I wanted my portfolio to link together traditional and digital in the way that my actual practice does.I then started to put the images on. I gave them all an outline that vaguely resembles tools like pencils and brushes, and made it so that the images light up when you roll the mouse over them. As you can see, they bring up bigger versions of the thumbnailed images when clicked, and you click again to go back.When making this page I had a lot of trouble with figuring out how to make the images roll over and then also function as buttons, but I got there eventually and I’m really pleased with how it turned out.Here are three more of the flash pages that I made after the first one. I made the outlines look different depending on the type of media: for instance, I made the photography ones look like they are held in place by album corners.These two pages function a bit differently to the others because they show a project of work and how I progressed during those projects. When you click on the thumbnail image of the one on the left, another timeline of slides is brought up which shows you the work for that unit chronologically, instead of just showing you the final image.When you click on the thumbnail image of the one on the right, you are shown three digital versions of things I made for this company. When you click on the digital versions you are shown a photograph of the final product.
I used another program, Flash Catalyst, to make a container file for all of these flash pages.I made an index page and then the six discipline pages followed on. There are left and right arrows that navigate between the pages.In order, the six pages are:Illustration / AbstractIllustration / CharactersDesign / Brief 1Design / Brief 2Photography / FilmPhotography / DigitalI chose these six areas because they are loosely based on the same principals - composition, colour theory and creativity, to name a few - and as such, they work well together. Additionally, the reason that each discipline appears in two different forms is that the skills required from one to the other are vastly different.'Brief 1' and 'Brief 2' are both creative design projects I have undertaken in response to clients, and I felt definitely needed to be included. The other four disciplines are important because they show my ability in drawing and in vision.The main feedback comment I received was that I should make a cover page that opens up like a book cover.
Like for the pages, I scanned in the cover of a sketchbook and put it onto the same 'Photoshop transparency' background. I also added a paragraph explaining the project to the right, which disappears when the page is 'turned'.To give the page its motion effect, I went through a few different methods before I found one that worked.Firstly, I tried making it as a .swf file, similarly to how I had made the content pages. This worked in terms of animation, but did not work inside Flash Catalyst, because I could not get the .swf to play and then transition to the index page.In the end, I made a dynamic transition effect in Flash Catalyst itself to get the page to turn. It is not perfectly seamless, but unfortunately I could not find any other way of doing it.I made a few final edits to the smoothness of the project, such as adding little "home" links to the top of each discipline page, and the project was finished on the 25th January 2012 and edited in response to feedback in February 2012.
My brief was to create a portfolio for use at university interviews.I decided to make this portfolio as a Flash application so that I could learn how to use ActionScript – the coding language that is used for Flash applications – and so that I could learn, to a greater extent, how to use Flash as a program.I feel that my knowledge of Flash has improved a great deal. My understanding of the software before this project was very minimal, whereas now I am comfortable in creating short animations and interactive projects, as well as manipulating the code behind some objects.
Difficulties that I faced included;#Creating rollovers that could then be used as buttons and could be clicked to progress to a specific slide. I overcame this with a lot of technical savvy and fiddling with code and timelines so that the rollover is a button itself whereas the original image is just a hotspot.#I spent a lot of time worrying over what to put in and where, and whether or not some of the work was good or appropriate enough for the courses I was applying for. I overcame this by going through everything I had and sorting it into piles. I also took into account everything I had read in the magazine articles I had researched and the things that I saw online, and decided to include a range of works from highly polished things to sketches.#I feel that I would have had a much easier time creating a front cover if I had thought to do it from the beginning, but I’m pleased with how my final cover came out. It was very difficult to get working; first I tried making a separate flash animation file, which I couldn’t get to play and then go to the next page, so it didn’t work. I ended up having the cover imported as an object in Flash Catalyst, in which I created a transition which plays as the page changes.
#If I was doing this project again, I would #plan everything right down to every pixel before I even got near creating the actual backgrounds and assets. Everything that I struggled with was down to lack of detailed planning, which is due entirely to my own creative process.#This project will help me in the future because;#Most interactive web applications are made in Flash#I have experience in making a portfolio now, and all of the things it entails such as structure and self-evaluation#Overall, I really enjoyed this project. I like all of the areas I explored – coding, graphic design, interactive media – and I would gladly take on a similar project in the future.