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:

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

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

• Design a Perfect Search Box
• Button UX Design: Best Practices, Types and States
• 7 Rules for Creating Gorgeous UI
• a11y Project (great resources for creating accessible web sites/apps)
• Writing CSS with Accessibility in Mind