Zydar.Net/Portfolio

The Foliotek Website

Foliotek is a powerful and highly flexible online software system that allows educational institutions to assess students and faculty based on work that they store in an electronic portfolio. Go check it out at www.foliotek.com.

There were two main goals I needed to accomplish with the design. Create a look and feel that exemplified the high quality of the Foliotek product, and to aid in learning what Foliotek is and how to use it.

COMPS

For the comps, I used Photoshop, Illustrator, and Cinema 4D. As with every design, I like to explore different concepts and ideas to see what the client likes and dislikes. Its best to take risks and go on a path you know probably won't work because you'll discover something that will be useful for the final design. Here are some comps that didn't make it:

Comp A Comp B Comp C

THE FOLIOTEK SYSTEM DIAGRAM

Foliotek can be a complex system that is hard to understand with words. In order to facilitate comprehension of the system, I worked together with the Foliotek team to create a diagram that would also serve as a navigation tool when learning. These are the different diagrams that I experimented with. Diagram A and Diagram B were way too complex, so we simplified by reducing the number of parts and going with implied relationships between those parts.

Diagram A Diagram B Diagram C

Diagram C is the result of that effort and was rendered in Cinema4D. After we put the diagram into the learn more section of the site. The question of the ability of someone to understand how to use the diagram came into question. So, I came up with some flash mockups of how someone could interact with it. These may take a while to load, so please be patient.

Flash Animation Version 5 Flash Animation Version 3

We didn't go with either of these ideas and instead, used a visual aid to notify the user that the diagram is clickable.

VIDEO & MUSIC

For the video, everything was shot against a green screen. I used Final Cut Pro to edit and key, and Motion for any motion graphics work that needed to be done. I created all of the backdrops for the videos so that they could have an artistic and unique look to them.

For the background music, I used Digital Performer 5 along with various software and hardware instruments.