Uguru Profile Tile
Profile tiles were designed to showcase a vast array of services student gurus could offer on their Uguru profiles, visually simlar yet distinct from profile cardlets. Jeselle and I created sample tiles that were considered "ideal" for the perfect profile - minimal and clean while still retaining ease of use.
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
The first draft that Jeselle presented. Covered the basic requirements for this tile. We decided not to use photos specifically for the academic tiles since they are considered default and would be added automatically instead of the guru customizing each one individually.
-
Draft 2
We decided to plan the parallax hover for this static iteration and Jeselle added a border to emphasize the parallax. We also added an icon for each course type.
-
Final HTML
I moved around some elements and changed colors to better fit with our evolving style guide. We decided to replace course icons with a single academic icon for simplicity.
Animation
Jeselle created the unique base animations for each tile. I took her work and created patterns of animation styles, then reapplied the final versions to the tiles. I also came up with the parallax hover effect, which is CSS-only and does not require Javascript.