Uguru Profile Cardlet
Profile cardlets were designed as preview links to Powerpoint or Keynote-style presentations, created by student gurus for their Uguru profiles. Jeselle and I created sample cardlets that were considered "ideal" for the perfect profile. They needed to be visually distinct from profile tiles but still would share similar patterns and proportions so that they could be mixed together.
After receiving Jeselle’s drafts, I would work with her to normalize patterns across the categories to provide a sense of continuity.
Process
-
Draft 1
Jeselle’s first draft was originally for a universal cardlet, but we eventually branched out into six categories, including a default category for general tutorials and lessons. The double card format bears similarities to common slideshow icons; cardlets featured by the guru are highlighted with a star.
-
Draft 2
After branching into categories, Jeselle formatted the academic cardlet to look like a folder or binder divider with a tab for the date.
-
Final HTML
I changed the date format to match other dates around the app; I also added in an overlay so that text would be more readable. Jeselle came up with the concept of the ribbons for another cardlet so I incorporated it into the design.
Animation
Jeselle created the unique base animations for each cardlet. I took her work and created patterns of animation styles, then reapplied the final versions to the cardlets. I also came up with the parallax hover effect, which is CSS-only and does not require Javascript.