Weekly UI Challenge Week 3 Day 3: Add grid/list view toggles

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)

You don't even have to use a view library if you don't want to; HTML and CSS-only (and non-view JavaScript library) components are more than possible, especially for this step.

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

1. (Sunday 4/22) Design component ✅
2. Result entry, sponsored/best seller indicators ✅
3. Grid/list view toggles 🎯
4. Sorting
5. Pagination/load more
6. 100% a11y score
7. Tweaks, refactors, fixes

Comments

[Ian Wilson]

I've implemented a grid view toggle, though for my blog entries I think it is not as strong without having to crop images. I've been looking at how medium does it and I must say, trying to design it from a couple different angles gives some insight into their thought process.

I guess by confining myself to 700px, while a good width for writing copy and displaying lists, I'm losing the potential of my grid view. Notes for next time, take up more real estate.

Check out here live

[lalalandgs]

hi do you mind sharing me the react code with me? :) been trying to find this UI solution (please email me at [e-mail] if you don't mind sharing it with me.

[singhaishwarya]

yes please share with me too