Welcome to Week 3, Day 4 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 four, our goal is to…
Add sorting
The sorting of search results are an important part of a useful results page. Whether it is for an ecommerce platform– sorting by price or customer review, or a search engine– sorting by date or relevance, or some other type of app/site, proper sorting methods help users get the best of your search implementation.
Following the original design I created, this is what I've got for Day 4:
The design is a little different due to the fact that I am using the native HTML select element, but the functionality is all there. The design continues to emulate the results of a mock soccer blog, so the sorting methods reflect that of a blog, i.e. sorting by date. If you were using a more robust search platform and flexible API, you could also sort by relevance (like Google and Amazon do, for example) or by price or customer rating, as previously mentioned.
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
- (Sunday 4/22) Design component ✅
- Result entry, sponsored/best seller indicators ✅
- Grid/list view toggles ✅
- Sorting 🎯
- Pagination/load more
- 100% a11y score
- Tweaks, refactors, fixes
Top comments (0)