Thinking about displaying projects within the portfolio

Looking into flash, i've noticed some difficulties in displaying previous .swf projects within a swf porfolio. Flash is still my preferred program to create the portfolio as i find it a more malleable method of displaying my work without having to constrain it to tricky to control html table layouts and less animation and interaction possibilities. It is the preferred method for design web portfolios that i've seen and also my favourite web portfolios have all been flashed based. However, although it is technically possible to 'call' a previous project within a window of the portfolio, it is complicated, and there is also the problem of it looking strange. What i thought of doing is having it pop out, and instead having a screenshot. This would mean that the page loads faster (if published) and it would only call the popup data if clicked, but it would also mean that a user could keep the popup windows open to compare the final projects easily.

When using flash i did make considerations about web publishing and decided on my page dimensions this way. I decided on 800X400. The finished flash portfolio is meant to be one-page and not scrollable so essentially what you seee is what you get.

Continuing the design process

I am looking into instantly recognisable formats for navigation, and i realised that ringbindr folder navigation or tabbed navigation would be a useful means. It also creates a nice way of formatting and holding the images that is clean, easy to understand and navigate, and clear throughout.

The previous background format has now been anchored, and the tabbing navigation could actually be extended to having individual tabs for the projects on the top right hand side

Below is the second image ideation. It has a left navigation bar with headings for the project titles.

I much prefer this system as you can quickly access sections of the website by title without having to hover over the blocks, but whilst still leaving it as an option, you retain the aesthetic properties. I came to this decision whilst doing analysis of other websites; where navigation isnt easily signposted it is frustrating and sometimes difficult or impossible to 'direct' friends/associates to the right place

Design Development

After sketching up the first few frames in flash and trying to see how it would work, i realised that a. the portfolio was currently unsuitable for web publishing b. there are huge difficulties getting .swf files to work in flash and c. using liquid layouts in dreamweaver combined with a table structure would be useful. Having such a simple layout does make it look a little too basic, and although i like the general effect, i am making a few changes.

I am still in the process of designing the website, and i fid paint shop pro a useful tool in sketching it out. I have used my centre image in a more tabular layout.

I want pinstripes on the header and footer so i am ging to create a tile from this sourcefile: http://product.grahambrown.com/assets/tile/447x550/447x/grahambrown/prod/18169-pattern.jpg

it needs resizing and rotating though

I dont really think it goes very well with the background, and the pink headers make it look even stranger. Need to go back to sketching.

I've had to go back to the drawing board as i've realised my original design isnt working

It is too dark and it's been difficult to implement my cutout header design style so i've had to rethink my layout. I'm now quite comfortable with using flash so i feel i can play around with design.

I'd really like to use a photographic background and i've been looking up different flash portfolo sites such as:

http://www.warmforestflash.com/blog/2009/02/21-well-designed-flash-portfolios/

The only problem is that it's almost skewing my ideas and i'm quite worried about subconsciously copying them, so i am making sure that i am not looking at them when working on ideas in my sketchbook.

I've been working to my original 4 box ideal template, name header and footer and have come up with this rough image (i used PSP to very quickly and inaccurately model this):

I'm very happy with this layout as it is very crisp and clean.

The background image is another from my brothers photography work. I like the apple label as it makes the photograph seem less synthetic i.e. it has a flaw.

It is striking and modern and a nice setting for my work.

I will have insibble thumbnails until the mouse hovers over them. The contact button will pop up with contact information: There won't be a seperate page for it, and it will be in the bottom left right corner over all of the pages.

I added a right and left navigation. to the top, so that you can move left and right through the site without clicking on the thumbnail. It wil take you through left to right

On clicking on a thumbnail, the others will disappear, and the thumbnail will move to the left, eventually growing and moving to the project header page.

work in progress

I've put together the intro, homepage and contact pages so far but i'm still not 100% about the contrasting colourscheme. I'm considering having the headers in black unless you hover your mouse over them...


In the second screenshot, my mouse is hovering over the 'enter' icon. I created all of the icons in flash itself as opposed to creating them in painshop pro as .PNG files

In the third screenshot, my mouse is hovering over the 3rd icon.

Building the website

I used a stock image for the background website:

http://www.freestockimages.org/wp-content/uploads/2009/04/free-stock-images-metal-texture-03.jpg

I've decided to make it widescreen to make it fit a browser better and for the improved aesthetic properties.

I then changed the aspect ratio as it was a bit too square.

This allowed me to test my motion tweeing skills and see if i liked this modular layout. I didnt. I decided to go back to the drawing board and finally decided on using an urban photo from my brothers photography portfolio (credit: Marcel McKenzie) as it really encompassed and suggested the urban and social focuses of my project, and artistic features.

Designing My Layout

Aims:

Modular
Simple
Easy Access to Information
Easy navigation
Clean, Modern
Loads Quickly
Short Pages: Little need to scroll down. Speedier
Thematically reflects the content displayed

Designing the research section of the portfolio site

A question is posed: How to almagamate research which is composed of many different types?

My solution: A virtual pinboard.

What do i want?

• To illsutrate my process
  
• To show it chronologically: so you know what came where
• Possibly date stamped
• To hide/show different media types on my pinboard and to be able to 'zoom in' to sections.
  

Where did this idea come from?

Looking at different ways that creative websites display their 'previous work'

http://fashionproductphotography.com/fashion.html

In this example the items are placed into a sub menu scroller. Sometimes the photographs had smaller 'titles' at the bottom describing who the work was for.

http://lookbooks.com/
scrolling header at the top of the page. i like how you this shows variety without being intrusive
note: its little jerky and buggy

http://www.matthiasdittrich.com/

• really interesting porfolio of an interaction designer
• you cant use web browser navigation buttons: solely in-window navigation
• you scroll through tiles by clicking and dragging
• 'time' on an axis indication old>new
• link to 'cv' on the left

http://www.dustinkirk.com/portfolio/

an example of a virtual pinboard (combines photographic and video media). roughly 60& of the way down the page.
attempts to make it like a cord pinboard were made, with textures applied to the background and the photos misaligned intentionally.