loading...
Cover image for Weekly UI Challenge Week 3 Day 2: Add result entry, sponsored/best seller indicators

Weekly UI Challenge Week 3 Day 2: Add result entry, sponsored/best seller indicators

geoff profile image Geoff Davis ・2 min read

Welcome to Week 3, Day 2 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 two, our goal is to…

Add result entry, sponsored/best seller indicators

Back to basics again! The first thing any results page needs is an entry/entries to populate the page, because without them this would just be a bunch of whitespace. Like the rest of the UI projects we have worked on, these results should be easily traversable, have good color contrast, and have relevant content displaying, in order to be of most use to the searcher.

Additionally, the original search query is display atop the page, so users are able to see what they searched; this could easily be replaced by a secondary search bar, similar to how Google's main search functions.

Also like Google's search, our results should have some sort of indicator if there is paid content and/or a well-regarded result displaying. In my case, I am basing my design off of a would-be sports blog, so I have a special background color indicating the link goes to content that is sponsored by someone to appear first.

Following the original design I created, this is what I've got for Day 2:

A results page component, with one result entry highlighted to indicate it is sponsored

My implementation is fairly simple, and uses a list view (for now); if you wanted to, and for EXTRA points, you could use the ecommerce listing you made from Week 1, if that fits your design.

I chose a faded green color to act as the sponsored content indicator, alongside a complementing, darker shade for the label. Lastly, a simple custom focus state gives a bit of character to the otherwise straightforward page.

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

Posted on by:

geoff profile

Geoff Davis

@geoff

Senior UI Developer @ ALSAC/St. Jude // All opinions, articles, and comments convey my views alone.

Discussion

markdown guide
 

Day 2 here we go, I changed my design a bit to look like this:

day2

My featured search result is represented by an elevated card, whereas the rest of the results remain flat. I removed the excerpts because they felt useless, the image and the headline are a writers greatest weapons.

Alas, I have an implementation done and deployed here with now.

Day 2 Build

 
[deleted]