Year 3 Portfolio Project

Sunday, 25 September 2011

Page constructs & Preloading

One problem with flash menus is the difficulty getting them to be the right size on all broswers. I've therefore had a look at a few flash websites source code to see how they have constructed their html pages to contain their flash movies.

zunejourney.net

<!-- saved from url=(0013)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ZUNE</title>
<script type="text/javascript" src="js/swfIN.js"></script>

<style type="text/css">  body, html {margin:0; padding:0; height:100%} </style>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body scroll="no">

<script type="text/javascript">

	var s = new swfIN("movie.swf", "movie", "100%", "100%");
	s.detect( [9,0,47] , "noFlash/update.html", true);
	s.addParam("menu", "false");
	s.write();

</script><noscript>Javascript must be enabled to view this site</noscript>

</body>
</html>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>

<script type="text/javascript"> _uacct = "UA-3156166-1"; urchinTracker();</script>

I noticed within this script the default message for browsers without javascript. I used my iphone to access this website to see how it displayed.

This is what i got:

https://mail.google.com/mail/?ui=2&ik=9d205eb2cf&view=att&th=1329fba79809bf31&attid=0.1&disp=inline&zw

When i build my flash project, i am going to see if it is possible to redirect the browser to a html based website using the noscript tag.

I also looked up fluid layouts for flash: http://active.tutsplus.com/tutorials/web-design/build-a-fluid-website-layout/

One other option is using javascript or jquery for interactivity, which would also display on mobile devices!

Saturday, 24 September 2011

Creation part1: Who am i?

I am obsessed with the concept of the individual and how we interpret things similiarily and differently and why. I love inkblot designs for this reason and i'd love to incorporate this into my portfolio. I think it could say a lot about me as a designer, as well as creating an exciting visual backdrop. However, this is just one idea and i will develop other concepts.

I am letting go of my logo for now, and instead creating my own design identity through the portfolio as a whole. I adore the spots of colour, and i want to experiment with creating my own. This is a great tutorial http://www.gomediazine.com/tutorials/ink-bleeding-effect-in-after-effects-like-gnarls/ which suggested a great way for filming inblots (a paper towel in water).

http://image.shutterstock.com/display_pic_with_logo/5880/5880,1265473850,11/stock-photo-rorschach-inkblot-test-illustration-random-abstract-design-46071232.jpg

http://www.instantshift.com/2009/06/17/77-ultimate-round-up-of-adobe-after-effects-tutorials/ is a great resource for flash after effects which i would use to do my animation for the website.

During both portfolio projects i have completed, i learnt a lot along the way. I want to demonstrate my skills through the presentation of the website itself.

I have also thought about CSS placement of the flash module, by placing it within the centre of a amatching background this would work out. I also need to think about cross browser/platform compatibility. By placing the flash within a HTML page that had options at the top, this would display in a mobile browser, and you'd be able to quickly switch to a more compatible

http://wordperhect.net/ an oldie but a goodie! Incredibly over 10 years old. I love the graphic design and complexity yet simplicity of this website.

I found this to be a great resource too: http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/ as is this: http://www.smashingmagazine.com/2008/04/02/39-creative-flash-designs/

After looking around at whats out there. i'd like mine to be quite simple. Rather than filming a blot (which i'd have no control over) i could paint my own in layers in photoshop using watercolour techniques , then animate them in aftereffects. There would then be a transparency to it, which i'd like, and layering.

Watercolor blob raster 3 - Stock Photo

http://depositphotos.com/3522630/stock-photo-Watercolor-blob-raster-3.html

http://img97.imageshack.us/img97/647/watercolour.jpg

My inkblot development: i devloped this from a sketch design in my sketchbook. It took about 10 minutes using an online image editor and layer masking. Using tools with varied opacity and layer masking, its possible to crate a bleeding effect I like the staggered layers, and the dash of colour in the centre. Using flash i could try to create a layered fade in effect.

It's really easy to create quick mockups and try out new ideas.

After tryng this idea i realised that the heading needed simplification. What will be interesting is transitioning between the two: root and body navigation. I am also considering removing the 'blog' section. The transition could be as simple as a fade out and then a fade in, or i could try some more complex animations.

-no singposting: corrected below

cv section with headers

Portfolio section with examples of how the different projects would display.

this could include a box which would allow you to email directly. however i am not sure if this is possible within flash.

On the right is a problem: the blog link. It might have to take you to a slightly different background/layout with a longer frame as i'd probably be using blogger to host it which doesnt work with flash. another opion would be to use tumblr.

I have decided to remove the blog section from the website, and instead to include this portfolio in the 'blog' section. It will link externally.

Something that is very important to this project is expandability. By minimising 'nesting', i can expand the portfolio more easily.

I now need to think about how to present the individual projects and what information i want to show. Also: navigation!

Creation: What do i want?

What do i want from this new portfolio? Beautiful and innovative design.

Content:

In my acompanying sketchbook i have mapped out four root headings: projects, contact, cv and blog. Within the project section are five projects: evolving communities, rereading the book, sound journeys (from my second year) and safe way home and one deadly sin from my second year. These are projects that i felt were conceptually strongest and demonstrated an array of skills.

What i realised whilst typing this was the necessity of expandability: i need to ensure that i can easily expand the projects within to at least double that amount without having to edit the CSS or rewrite the entire website. This is a problem with both of my previous websites, partly beause of the site frame and the nesting that i created. If all projects are available immediately from the same menu (which is possible as i dont have many), i can easily add to it.

Inspiration:

http://de-war.de/ Axel peemo's draggable menus inspire me. I love the idea of the user being able to redifine the way that the website is setup. However, for me it is taen a step too far with complete informational overload, and i dont know what i'm doing or how to revisit something i liked.

http://lucuma.com.ar/

This is stunning. The information is all on a roll, and the menu takes you to different sections. I love the rendering and rolling menus, as well as the beautiful artwork. I love the simplicity of this project.

http://mootools.net/ (a great javacript resource) was used in the interesting layout by http://melissahie.com/ I am very drawn to animated actionscript menus. What was also interesting about hers was the inclusion of a 'skills' section which i was unsure about including seperately to the CV section. HOwever, i will keep mine seperately as the CV will illustrate my skills, but i may create the CV in a different layout to my current CV which was educational history, qualifiations at the top with skills at the bottom.

http://www.thesecretlocation.com/ this website reminded me of the 'sound journey' project.

http://www.seymourpowell.com/ this website has choice between flash and HTML version which i think is great! it shows that non-browser detection can look fine. It aso has a custom loading menu and contact information on the home page (a great idea).

browser detetion: http://www.echoecho.com/jsbrowserdetection02.htm and http://www.echoecho.com/jsbrowserdetection02.htm are useful website resources

http://www.erwinbauer.com/ is a static portfolio website which rather than using sidebars to navigate content outside of the frame, it allows the user to drag it with the mouse. It is very involving, but i found it tedious after a while.

http://mukustudios.com/ again, out of frame navigation but with a left sidebar. I love the neutral grey background with vector art and colour.

http://www.smashingmagazine.com/2007/10/30/65-excellent-flash-designs/ i found this article very useful and it highlights some of the drawbacks of flash http://www.janholoubek.com/ is great and i love the smooth transitioning.

Day1: Reviewing previous portfolios & Goals

I started this project by reviewing the pros and cons of the two portfolios i have made in the past two years.

The first was full of minor issues which were addressed in the second portfolio, which itself brought forth areas of improvement. Although original signposting, navigation and analysis problems were addressed, my second portfolio was static and dull and it was difficult to understand my skillset.

In my third year portfolio, i want it be more of an online cv, ready for the professional workplace with exciting visuals and easy navigation. It should show off my skillset, and i want to reduce 'nesting' issues as well as the lack of visual signposting.

I also aim to create separate mobile and destop websites through either browser recognition or selection, which means that i could include flash and demonstrate my skills more.

From the index page there should be a welcoming with possibly selections for mobile/desktop as well as links for projects, my cv and contact information. My skills would be included in the CV section which would make it easy for users to get to what they want quickly. I recently read 'Undercover User Experience Design' which highlighted the importance of content editing. My curent portfolio has a bit of a content overload, and i feel that they should standalone more. This was because my primary user was my tutors and examiners, and i wanted to show my awareness of my own process and my ability to review my own work. This isn't as necessary going forward, and i could rework this to be much shorter and possibly categorise it in a 'what next' box to show what i would do moving forwards.

My goals for this project are quite steep: completion within 3 week. However, it is a revamp of design and an edit of content so i believe this to be fairly possible. I already roughly know what i want, and i am able to work faster having done it twice before.

I will be using some tutorials and resources with this project:

http://www.noupe.com/tutorial/30-hand-picked-flash-and-essential-actionscript-30-tutorials.html
http://www.flashtemplatesdesign.com/
http://www.maxdesign.com.au/articles/css-layouts/
http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/

I have also heard a lot about the wireframing and prototyping capacities of adobe fireworks: a program i havent actually used before, and i am going to teach myself how to use it in this process.

Next steps:

Design concept & prototyping
Content editing