Cleaning Up

• Spellchecking and ensuring that there is font continuity
• Writing in the 3rd person: Not always possible as i talked about my interests for the 'see it my way concept', athough i went through all my writing and edited out all 1st person text elsewhere
• All i have left to do is the powerpoint presentation
• I am considering doing an animated loading page where the layout grows and is eventually filled in, but users might find this irritating so i wi have to brainstorm and sketch this out.

Work in progress (2)

Inputting the zoom interaction for the embedded site was a litte tricky as i had to use frames for navigation rather than scenes between different instances to keep it clean, but it was finally completed yesterday afternoon. I didnt actually have a finished interactive section on my website when the brief was first submitted, and it is nice to provide an example of how users would interact with the 3D world.

I am actually going to add another section to this part of my portfolio, named 'the 3D world' in which i explain the program i used, reiterate why 3D was appropriate and explain how the symbols on a map which someone uses are translated into tower-buiding sized colour blocks in the 3d word so that they are instanty recognisable. This section woud be different to the 'concept' as it explain technical things in more detail, and would be accessible only if a user is interested in it, rather than lumping it all together on one page and having too much wording on each page.

I have also completed my research pages. Essentially it is a pinboard of the majority of my sketchbook work for each project, with 'hit' sections applying to various areas, so when you hover over various different pages, a litte note comes up saying things like 'participant observation' or 'museum visit'. I chose to display it this way to show off my detailed book work and to give a quick insight to my process work. I realise that a. you cannot see the work in detail and b. each page doesnt have its own tag', but i made these decisions as i realised that one of my two main target users (potential employers) probably isnt interested in combing through my sketchbooks within a portfolio, and would instead be interested in getting and overview and seeing that i do use multiple medium and methods to get where i'm going. My other target user (examiners) would have my sketchbooks with them and reading through them virtually is much more of a strain than having a real hard copy. My research virtual pinboard is just to show that i do have a process, and my blog is available (which sums up most of my process work) to view in the blog section.

I have shown the flash stage behind this screenshot to show how i constructed this page. Essentially i had to take lots of photos of my sketchbook manually, cut them to size, arrange them in photoshop, add hit areas with rectangles and the 'shear tool', and then add a title at the end.

I did have the idea of having thumbnails which enlarged when hovered over and had titles of their own, and perhaps if i am targeting different users i woud do so, but since it is very time consuming and inappropriate for my target users i am not doing so.

A New Solution

I've come across a barrier in my work, one that i had anticipated and tried to get around. I don't like the previous .swf projects popping out, and neither do they fit correctly into the dimensions of my project so i can't cal them to a movie ater. I've decided to rebuid my projects into the portfolio so that they are all entirely sef-contained. This also allows me to revealuate the projects as i will be buiding them from scratch. Luckily none of my projects are more than 10-12 frames long, and i will take this as an opportunity to rework my ideas.

More process work

I've almost finished putting together the mapping section.

'Safe Way Home' Mapping brief title & description

It has gotten to the point now where i am adding brief titles and descriptions to my portfolio. I would like to make some changes to the originals (written about in the blog here). I am also making the conscious decision to show original brief solutions as well as my final work within my portfolio project to show how i have responded to criticism and developed my solutions.

Although not the first project, I am going to insert my solution to the mapping brief first as it is the one that i enjoyed the most and also the one that i feel could really work in the real world. I had considered possibly prioritising the favourite projects within my brief (by making them more noticeable, placing them higher in the page hierarchy) but i decided against it to give the user back the control and allow them to make decisions about where they want to go.

(i have had to mention the appropriate brief title i.e. 'mapping' in this description to make it easier for anyone marking the work to identify it quickly) without having to look up my notes that would be provided on the disc in notepad or. I have decided not to publish my website as I'd like it to be seen only by those looking for it or for people i seek out to share it with.

My working portfolio description is:

Ever wanted to find a safe route home? Whether it be for safety, speed or for the scenery, 'Safe Way Home' provides users with all the information they need to make informed decisions about their route choices.

Aimed at encouraging a healthy lifestyle as well as improving safety and confidence in the vulnerable and less-able, this idea takes user information about their local area and inputs it into a 3D environment to allow users to easily identify trouble spots and avoid them. With three criteria: Lighting, Anti-Social Behaviour, and poor lighting, users will be able to spot these within the 3D environment. Why 3D? Because it allows the users to visualise the space more effectively and even avoid busy roads and seek out scenic routes.

Currently, Safe Way Home is in it's developmental stages and available only for people living in walthamstow, but with funding from the MET or Local Council, users might one day be able to draw directly into a 3D environment, safe routes virtually and contact other members for advice. At the moment, safe way home asks users to download a map, mark it up with symbols and submit it via email for submission to the 3D environment, but hopefully this idea will grow.

'Safe Way Home' is a working solution to my first year CID 'Mapping' brief.

finally putting it all together

after coming to my final design, i am putting it together in flash. Unfortunately it did take me a long time with research and sketching out my ideas, so i'm a bit short on time but luckily i know exactly what i'm doing so putting it together will be quicker.

I found it useful in the past to document the literal design process of the final work as it helped me realise how long it takes to do certain things and to streamline the process and also see where i've made changes to the design whilst its being made.

Already, i am going to highlight the titles as they arent standing out enough, and i've changed the thumbnail masks to lighter instead of darker.

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.

Portfolio Analysis Write-Up

The decisions on whether a portfolio was successful or not were made according to these criteria:

-Colourscheme
-Layout
-Navigation
-Signposting
-Description
-Detail level

The successful portfolios were designed in a way that reflected their content, and had a clean layout that was well signposted and easy to navigate. There were different levels of detail, but they were successful where all required information was easy to access and it was easy to access more information i.e. zoom into a photo or see a description if desired.

The layout would have been well balanced and even, and there wouldn't be any unnecessary 'clutter'

Corporate Portfolio: Bad

http://www.ripe.co.uk/

On opening the homepage, a video loaded and music started playing which was distracting. It would have been much less intrusive if the video was set to 'pause' with the option to play it if desired.

To get to the portfolio, there is a small 'our work' icon at the top left of the page. Once the page opens, there is a 3X2 grid which is slightly misaligned. The the top left spacing is a short description with the strapline 'Our ultimate goal is to produce work that works'.

The work is divided up into five headings: Branding&Print, Web Design, Exhibition&InStore, New Media&TV, Property. Next to each heading is a logo which seem pointless as they add nothing to the design, and de-balance the layout. Some of the category descriptions seem to be written by someone that is trying to sound impressive i.e. 'More and more, people are moved by moving image. That's why we've become specialists at...' but the grammar doesn't seem quite right and they seem to be more interested in creating some sort of pun by using the same word twice. The site uses the word 'move' quite a lot probably to suggest being progressive and influential.

The main problem with the layout is the lack of signposting: to navigate through each category, there is a number to click but there is no way to find out what each number represents until it has been clicked. If a potential client wants to find a specific piece of work they would have to hunt for it. The designer could have gotten around this by creating a rollover on the numbers i.e. where you hover over the number and it changes to a heading. This would keep the layout neat, and make it easy enough to access places quickly.

With most of the pages, a video and music track greets the viewer without prompting. The video isnt a problem, but the music is distracing. It just seems unnecessary as it is essentially a slideshow of words surrounded by vector animations and clips of helicopter shots of big cities and people. It is meant to look impressive with lines like 'life enriched' and 'a kaleidescope of firsts for a city aiming to be number one', but they don't really mean anything and don't make much sense.

In the 'client list' tab, there is a grid of company icons, but a potential viewer can't click through to view the work by clicking on an icon of a brand that they are interested in. There are far too many icons for one page so it fades through to different sets every 10 seconds. There is no way to get back to the previous list; you just have to wait until it cycles round.

Corporate Portfolio: Great

http://www.jkr.co.uk/

I chose this porfolio as i did some work experience there and i remember spending ages on the site looking at the work despite not having that much interest in packaging design. It has since been updated, but i still think it's fantastic. It seems to be effective in interesting all possible audiences

It shows how dark colours can be implemented well, and i love the off-centre navigation. The navigation headings are also fantastic. The juxtaposition of the peacock with the b&w pidgeons works very well. Something also crossed my mind: the tone of the black is probably about 90% and i remember a graphic design tutor telling me that you should never use 100% black in graphic design as it looks too stark and i'd agree.

The jkr logo has vivid colours running behind it which creates a nice effect, and the transitions between the different pages of navigation is smooths and animated. The list of works is animated and the rollover is a different colour. When you move your mouse off the navigation, it gradually blanks out.

When you click through to a project, the navigation bar moved, and it takes you to an animated backround with the product in the foreground.It just looks clean and professional. It isn't overly complicated and the flash work doesn't take long to load.

Alternate Portfolio: Raimo. Great

http://picasaweb.google.com/RaimoLK

This porfolio is well organised with standard picasa thumbnails. They are titled up, and clickable, arranged by recency (which you can change in the options).

What i found fascinating is how the images in this album http://picasaweb.google.com/RaimoLK/PhotoDiary2010OnePhotoEveryDayProject2010# are tagged by temperature AND date. I have never seen that information before on a portfolio, and it made me think that there is non-standard information that you can put in a portfolio to make it different. Not only the design of it, but the content.

Alternate Portfolio: Melvin. Bad

http://picasaweb.google.com/melrichardsonmbe/BridePhoto/#

I got to this porfolio via http://www.cicibridal.com/bridal-dresses.html

They do not host any of their images themselves, instead when you click the gallery link, it takes you to picasa. Then you select the dress you like and email the reference number. There is no information about the dress, and the filenames themselves are simple i.e. 1a, 1b, 2a, 2b... etc.

I can see how flickr would be useful for small portfolios, but there are 328 images not arranged into albums or organised in any way, and after 2 seconds of scrolling everything looks the same. This wedding portfolio is much better http://www.foxglovegowns.com/portfolio/portfolio.htm although there are uneven spaces and image sizes.

I decided to look for good examples of portfolios on picasa and i will blog my findings soon...

Alternate Portfolio: Aris Roskam. Bad

http://www.absolutearts.com/portfolios/a/arisroskam/

This independent Artist Website is a sales platform, but the users can create porfolios which you can then buy via paypal. It's called a 'porfolio' but it looks like a standard shopping site layout but when you click through to the item description you get more information than you would get on a regular painting e-shop i.e. http://www.numasters.com/artists/view_artwork.asp?item_id=1076. The artist bio is on the left and you can get exhibition, member details and contact info.

I dislike this portfolio mainly because it looks like a shop. However, it is easy to navigate and images load up quickly. The site itself looks unprofessional with an outdated design, simplicity and colouscheme. This to me is counterproductive as i'sd never buy anything from there as i wouldn't want to put my card details into it. It just looks outdated.

Further personal portfolio links

http://marykuper.com/portfolio/

I like this because it has a thumbnail browser to the left and the full sized images are on the right (no popup portfolio links)

http://siobhanmcguire.com/index.html

I didn't mind the dark colourscheme as it seemed to go pretty well with the quirky animation on her site. However, if i created a portfolio for one piece of work, i'd title it with the name of the piece of work rather than calling it 'my porfolio' as it makes you look slightly limited. i'd say it was 'by me', and then create contact and about me links.

http://www.ndesign-studio.com/portfolio

I love this porfolio although the wordpress publishing tool has been it somewhat into a blog in certain places. The design of the site means that you'd guess it is for an illustrator even if the work itsef was blanked out and i like this. Since my work is interactive and in flash, i'd like to have the design of it reflect this. However, i am aware of it affecting page loading times and flash animations can be a bit laggy. See the image viewer on ASOS here: http://www.asos.com/Asos/Asos-Floral-Culottes/Prod/pgeproduct.aspx?iid=917199&cid=10256&sh=0&pge=0&pgesize=20&sort=-1&clr=Print I'd love to use a flash based image viewer with smooth navigation, but it is laggy on my netbook (it is better on my desktop but it shudders a little and the transition isn't always smooth when i have other programs running!).

The designers work is tiled, with a description below the titles, but once you click through to the full size page, the work is allowed to speak for itself.