DEV Community

Cover image for Weekly UI Challenge Week 2 Day 1: Design a Search Bar
Geoff Davis
Geoff Davis

Posted on

9 3

Weekly UI Challenge Week 2 Day 1: Design a Search Bar

Welcome to Week 2, Day 1 of my Weekly UI challenge! Week 2 will focus on a search bar UI component; each day throughout this following week, I will pick one subelement 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 search component will look like, including a number of the component's states:

A search bar component, with input text and a results dropdown with a possible search term highlighted

This is what the various states of pieces of the component look like:

A column of search bar components, with different states visible in respective search components

Now it's your turn

Hop on those design programs (or get out that pen and paper pad) and design your own search bar! 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 2 Calendar

  1. (Sunday 4/15) Design component 🎯
  2. Input field
  3. Submit button
  4. Integrate autocomplete functionality
  5. Past search term indicators
  6. 100% a11y score
  7. Tweaks, refactors, fixes

Resources

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (5)

Collapse
 
lucasromerodb profile image
Luke β€’

Videogames - Search UI. Done!!
I really like your weekly challenges.

Design: Gravit Designer designer.gravit.io (web-app design tool)
Development: React JS + CSS
Deploy: Github Pages

Videogames - Search UI

Collapse
 
iwilsonq profile image
Ian Wilson β€’

I like the format of your posts concise, images for the visually inclined, and helpful with links :)

Collapse
 
geoff profile image
Geoff Davis β€’

Thank you Ian! Glad you find some utility in my simplicity

Collapse
 
jlr7245 profile image
J Silverstein β€’

I am starting a couple of days behind but still excited to work on this! Such a great idea. Here's my initial writeup.

Collapse
 
lucasromerodb profile image
Luke β€’

Here is my design

Design

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay