I’m thinking of putting in an animated .gif for a project in my portfolio. As much as I love the old 90s school of web design, it wouldn’t have anything like this, don’t worry:
But my question is if they have a place in a portfolio if they are done decently? I don’t really like videos, but sometimes a simple animation could show something better than several static images. I will make one this weekend as a test and post it for feedback!
Thanks!
The content is more important than the format, with that said GIF’s limit your quality to 256 colors, offer no feedback for playing/pausing, and tend to take much longer to load and play properly than a video which is designed to do so.
Why don’t you like videos? If you really wanted to do it correctly I would just use the HTML5 video tag, this way it will also work on iOS devices (rather than flash).
Hi Robbie_roy,
Like Mike said, I also think it really depends on the content / how good your gif will be - I’ve used a gif on my online portfolio, as i thought the ‘stop motion’ style worked well for the concept I was communicating.
Would love to see some of your gif development!
I think animated GIFs can be a nice, lightweight solution in many cases.
Here’s a couple I made for my site:
These work because they have few frames, and loop indefinitely.
GIFs can be especially effective for showing some sort of “open” → “closed” or “before” → “after” situation. Not so good for explanatory videos, etc.
I guess my point is you could also do that, and have full use of colors using HTML5. The lamp animation works well since it’s grayscale, but you can see the dithering on the images above that and it starts to look a bit 90’s. Not to mention the second GIF is over 2 megs in size. The same video file would probably be 1/10th the size since you can leverage compression.
If someone is scrolling through your folio and an image doesn’t load, they may just skip past it and not even notice it was an animation.
At the end of the day, you want to get hired based on the quality of your work, so whatever gets the job done is fine. But HTML5 as a skill doesn’t look bad on a resume 
Definitely right, HTML5 is way more bang for buck. Still, there’s a lot to be said about the low-tech simplicity of a good ol’ GIF. Plus the guarantee that it works in anyone’s browser, no matter how ancient, helps too. There is still a surprising number of people using HTML5 non-compliant browsers.
Either way you’re right, none of this matters if your content sucks.
Gifs have a ‘cool’ factor, though with a serious medical challenge that is maybe not factoring in
I think gifs could still work, though you do run the risk of A) the image quality looking degraded as Cyber pointed out B) making your presentation look more busy/complicated and C) require more effort to make it look good than it’s worth. Probably it just would take some finesse/time
For example, in the gif you showed above, I personally don’t see what the problem is exactly, even with the moving graphics. Can you make it dead clear?
Also the type and arrow take more away than the gif to me - it doesn’t look like what a graphic designer would do. Maybe it’s the fonts’?
Another thing to increase the theatre is that you could increase the frames and overlay a protractor vector to show the range of motion - with red showing the problem? Like Terminator vision overlays? Maybe the whole frame is tinted red where the problem is, on the frames it’s shown. There’s all kinds of cool possibilities.
My point is that it could be great, but would take some time to make sure it best shows exactly what you want to show… and in an entertaining, clear way
Thanks all for the help,
@Cyberdemon: I don’t dislike video, but I am guilty of being impatient. If I see a project that has a minute or longer video that needs to click to play, I might skip over it. I think if a GIF is there, it can convey the same information and be less commitment to the viewer if that makes any sense. I agree that the information should be really basic (and at that point, maybe a series of 3 or so images on a page might do the same job).
@hatts: I think it works great with the rendering! I think the constant frame makes it easier to look at than photos, where the camera location will change a certain amount between each GIF frame. I hear what Cyber is saying about the file size, but I did notice you placed it as an option (click to see animation), not as the main image. Maybe that’s the way to go.
@paulgibson: I checked out your prep kitchen set and think that it does work well … nice job.
@Travisimo: I like the terminator idea! My first idea for gifs was showing moving parts but showing layers of info like that does have some cool possibilities and maybe a little less intense to look at on loop than constantly changing images.
I use a handful of GIFs in my portfolio. I think they have a trendy retro feeling to them, but also a promise with the viewer that you’re only watching something a few seconds long, unlike embedded video.
Two examples:
1.Folding mechanism demonstration of a grill prototype
2.Wrapping and unwrapping action of a 3D printed cable wrap
Neither are perfect, but they fit within my style and communicate. Full projects can be seen here.
These are pretty cool and understandable. Now I’m thinking of appropriate ways to use in my own portfolio!
Nice job Eddie!
I ran into the pitfalls of trying to make a smooth animation (85 frames! and 700 Kb for something that is pretty iffy quality). It also doesn’t show the speed of what I would like (the wings snapping forward quickly). I think keeping it simple is the way to go, making every frame count, like Eddie’s grill open & close GIF, so I’ll have to have another try tomorrow
The GIF below goes with one of my toy concepts (http://www.coroflot.com/rlillq/Minx-Modular-Insects)
Something is strange in the formatting frame below, but it’s normal if you click on it:
I think Matthew and Eddie provided some nice examples of gifs. I think the key is for them to be short and simple. They are appropriate for process snapshots or to explain something on a fudge mental level. More polished and longer pieces are more suited for video.
I like how Berg used a combination of video and .GIFs in their recent post about the Connbox: Connbox: prototyping a physical product for video presence with Google Creative Lab, 2011 – Blog – BERG
Near the end of the (long but interesting) post, they have a full-length video that shows their prototype in action, but then they show snippets of that video in .GIF format to highlight certain interactions which they thought were worth calling out., like this one:
It’s a taste of what’s in the video. Like the .GIF? Watch the video for more.
This might not be the right approach for your situation, but thought it might be a good option to consider.