Let’s Design an Awesome Search Bar

1. Draw a rectangle, 278px width, 72 pixels height and 25 pixels corner radius.
2. Import your search icon, and add your text. Leave a space between the margin and the icon around 25 pixels, and between the icon and the text around 16px.
3. Now, reduce the color intensity of the icon and the text to prioritize hierarchy.
4. You can use stroke for the main rectangle instead of solid color, depending on the project.
5. Now add a search settings button, voice search icon, or a filter button to suit your needs. And Voila!

Here’s your super search bar!

Web design
Be the first to comment