WDD 230 - Web Frontend Development I

Chamber Project: Directory Page Examples

"[I]t would be easy to look for ways to help learners learn alone, using the wonders of technology. The same technology could give learners the experience of helping others they love, to learn with them."
—President Henry B. Eyring (The Temple and the College on the Hill, June 2009)

Overview

These screenshots are just for demonstration and visualization purposes. They are only examples. You should aim to do better than this in your design.

Directory Page

Screenshot Example
Figure 1: Screenshot of directory in the mobile view in grid as cards.
Screenshot Example
Figure 2: Screenshot of directory in the mobile view as line items.
Screenshot Example
Figure 3: Screenshot of directory in the wider view as a grid of cards.
Screenshot Example
Figure 4: Screenshot of directory in the wider view as line items with zebra striping.