DailyUI #027 - Dropdown

Yassou Dribbblers 👋

This is my #027 #DailyUI design.

Design Hint 💻 - Design a dropdown element. Is it a menu dropdown? Or a tip that's dropped down during a tutorial?

The Idea 💡 - The idea for today’s UI design follows up from my #24 DailyUI design which was the "Boarding Pass". I have decided to go down the route of designing the entire "search" page UI for this theoretical "flight" app. The design theory will follow that of the last (#24) with flat, sharp edges and a monochromatic colour palette. Again, just like my "Boarding Pass" UI, there will be everything a passenger would need to search for a potential flight.

Final Thoughts 🧠 - I like it! It follows the same design direction as my previous DailyUI and it has all the functionality a passenger would need for a "search" of this nature; and they were the two main features I wanted to get right for this design. I decided to make this app feel like it has a more concrete navigation, so I added in a bottom "navbar" to make all the features within the app feel more connected in harmony. The actual layout of the input elements ("From", "To", "Depart" etc) had got changed around and iterated upon a few times before I had a layout I liked and thought the best possible UX was achieved. Obviously, the emphasis is on the "Dropdown" box feature with todays UI, so I spent some time trying to come up with a simple yet elegant design for it, that could also fit the screen with the "dynamic adjustment" of other elements, too. It has an arrow indicating that it is indeed a dropdown menu, once the user has "dropped" the menu down, a list of locations will appear when typing the desired location in. The list has a faint shadow on both the top and bottom sides, with the bottom shadow indicating that the list is scrollable. This dropdown was another element that had its fair share of changes iterated upon it, again I thought I found the best possible solution with what is shown; simple, elegant and easy to understand/use. Overall, it's been a chillful morning/afternoon of designing and I do quite like my end product.

Share the love, press "L" if you ❤️ my work!

As always, I welcome any feedback! 😄

- Elliot