Weekly UI Challenge Week 3 Day 3: Add grid/list view toggles
Geoff Davis Apr 25
Welcome to Week 3, Day 3 of my Weekly UI challenge! Week 3 will focus on a results page UI component; each day throughout this following week, I will pick one or two (usually related) subelements of the design to implement. For day three, our goal is to…
Add grid/list view toggles
The ability to control the display of UI is not a very oft-included feature, but one that can enhance the experience and/or utility of an app/web site. Such a feature is included in such user interfaces as Instagram (user profile views) and Google Drive; they can certainly aid in the scannability of a design, by removing excess– yet perhaps at times useful– information.
While design is an all-important decision in implementing the vision of one's app or site, handing over some control of the display can show your users that you care for their needs.
Following the original design I created, this is what I've got for Day 3:
Like some of the features we've created on this challenge, this view toggle may work best when preferences are saved using cookies or some other mechanism to save user state. But, I've skipped this step so far. This feature is a simple toggle that utilizes React's internal component state and dynamic styling via Styled Components.
One thing I would suggest is trying out the new(ish)
grid CSS API to style the grid view; it's not as scary as you may imagine, and it's incredibly powerful.
Here's an animation of the feature in action:
You can check out my coded implementation on my Github pages site for this project.
Now it's your turn
I used React.js and Storybook to develop my implementation, but you can use whatever technology stack you would like! (hint: if you use Vue.js or Angular.js, you can still use Storybook for those libraries)
Also, please add your repos and/or images of your designs in the comments for inspiration! I would love to see what designs you all create.
Happy coding! 🎉
Week 3 Calendar
- (Sunday 4/22) Design component ✅
- Result entry, sponsored/best seller indicators ✅
- Grid/list view toggles 🎯
- Pagination/load more
- 100% a11y score
- Tweaks, refactors, fixes