Uguru Profile Widget
We needed a widget for user profiles that could work as a standalone component but would fit in and add interest to the profile sidebar. The profile widget would container basic information for the Uguru tutor - name, school, and rating based on user reviews.
Process
-
Draft 1
The first draft was a very basic layout that was meant purely for the sidebar - the background represents the sidebar. We laid the information out and decided hierarchy.
-
Draft 2
We added a background to visually separate the widget from the sidebar.
-
Draft 3
Jeselle added borders around the edges of the widget that merged with the icon and button. We removed the byword since it wasn’t vital to the widget (it shows up in a separate profile component).
-
Final HTML animate
The final version ended up being pretty similar to the previous draft, with thinner borders and less whitespace. The proportions differ in order to accommodate different container widths and heights.