Portfolio ideas

Ok so for my portfolio I wanted to do something a bit flash, I’m not sure if this is a great plan as my skills are not exactly top notch.  So something flash, which isn’t incredibly hard 🙂

Technology to use

First lets have a look at some of the “Flash” things you can do with web sites and the various scripts and plugins that we can use to do them.

1. Jquery Parallax

I’ve used this before which is a bonus I suppose. Allows for a pretty nifty parallax effect where different page elements scroll at different speeds relative to the scroll bar. Last time I used lots of AP divs the size of the screen, stacked on top of each other with transparent PNG’s to make smaller elements. Worked ok but the AP divs shuffled around a lot on different screen sizes making layout pretty basic and a bit of a nightmare.

2. Scrollorama

Scrollarama is a Jquery plugin made by John Polacek. It allows for all sorts of transitions and effects to be linked to the position of the scrollbar. You set out your divs as a long vertical single page, and then using the plugin transform any CSS property you want as the scrollbar descends. Seems pretty intuitive to use and you can have fades and horizontal movement as well as parallax effects. One of the problems I had using the Ian Lunn Parallax method above was that on different size screens gaps might appear between the background divs and that the ap divs appeared in different places. This might help with that.

3. Jquery Scroll path

 Scroll path lets you make a path Using canvas that the browser then scrolls along when you move the scrollbar or link to different pages. Its pretty nifty and does all sorts of thing like rotating pages. The only problem is that I dont know how to use canvas – at all. So this might have some start up time involved 🙂 Would be great to use it in conjunction with parallax though.

4. Sequence

Getting back to Ian Lunn he’s recently come up with “Sequence” a jquery slider plugin that has no inherent styling and allows for parallax elements. Looks like you can make it pretty big so you could use it to fill up the whole top of the screen as Ian has done in some of his demos, doesn’t look like you can slide divs around with it though. It’s more of a straight up slider. Still its got some lovely effects and gradual scrolling.

Other possible Jquery goodness

1. Blur.js – Nice blurred effect for element backgrounds
2.  Turn.js – Page turning effect could be good for book layouts
3. Slabtext – For making and formatting large headers
4. Sliding panels for images

Styles and ideas

Now some possible graphic styles and perhaps some ideas about how to do them.

1. Woodcut/antique

So using woodcut sort of elements is a bit trendy but I personally quite like the style, it hooks into all sorts of current graphic designish ideas like gothic fonts like Bebas and those sort of retro banner/infographic ribbon/spiky rosette things. It also lends itself to paper texture backgrounds and neutral tones so it could work out quite nicely. I could have some sort of scrollable landscape with quirky flying machines and bits chuffing around, one thing would be sourcing all the diagrams and bits to make up all this stuff…could even animate some in a sort of “cutout” fashion as they move around (no idea how to actually do this)

2. Retro rainbows and ribbons

A sort of colourful retro thing might work. Ribbons spreading out and moving about as you scroll (a bit like an extended “Atari” logo) might be a nice alternative. Again this could be retro’ed up a little with some textures to have a sort of 70’s feel which could be reflected in the fonts. I could have moving elements perhaps scrolling elements like…erm…lines and swirls…hmm…dunno about this it might work really nicely with scroll path js if I could ever work out how to use it 😛

3. Big text

I’ve always liked the clean abstract look you get when you make something in illustrator then zoom right into it. Perhaps I could make something along these lines with parallax polygons moving past each other, perhaps obscuring and revealing content. One thing that might be nice would be to have sections that scrolled past and were made to look like the interiors of machines or engines, like theres a hole in the screen through which the arcane workings of the internet are revealed 🙂

4. Astrolabe

Another idea might be to try and make a site that has lots of crossed elements like from an old astrolabe, the various elements could rotate and reveal content as you scroll (could even use this as a sort of home page then have these bits break apart, leading to a woodcut horizontal scroll as mentioned above…