DEV Community

Cover image for Weekly UI Challenge Week 3 Day 1: Design a Results Page
Geoff Davis
Geoff Davis

Posted on

Weekly UI Challenge Week 3 Day 1: Design a Results Page

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

Design the component

I personally used Sketch to design this week's component, but you can use Sketch, a similar UX/UI design program like Adobe XD, or really any other program (or just paper and pen/pencil!) to design your component.

If you decide you would rather not design your own component, you are more than welcome to follow along using my designs, but I think you'd really get the most of it if you designed your own. (plus I'd love to see what you all come up with!)

Here is what my results component will look like, including a number of the component's states:

A result page component, with a list view and ancillary buttons present

This is what the grid view of the component looks like:

A result page component, with a grid view and ancillary buttons present

Now it's your turn

Hop on those design programs (or get out that pen and paper pad) and design your own results page! Below is a calendar of what features I will be implementing on which day, as well as a few resources that may help you.

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 designing! πŸŽ‰

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

Resources

Top comments (2)

Collapse
 
iwilsonq profile image
Ian Wilson

For my UI I decided to try and base it off of my personal site at ianwilson.io. Shameless plug. All it has are a few articles but there are two things I've been wanting to do recently:

  • make my site better
  • practice designing some UI with Sketch in preparation for an upcoming project

I'm gonna go off the script a bit and start with the pristine search bar I didn't do last week!

pristine

In addition to the search input, there are some buttons corresponding to tags of articles that already exist. There aren't many, so for my use case having search input is a bit overkill, so they can click one of those maybe.

results

There we go! No grid view or pagination established yet. I'm also wondering how to handle fairly long titles. I'd like to have the excerpt/preview but in that first result it wouldn't match the layout very well.

Collapse
 
ben profile image
Ben Halpern

Awesome