2 months ago

53 369 vues 21 mai 2020 UI Design tutorials
In this UI design tutorial I'll show you how to use component states to create an animated hamburger menu in Adobe XD.
Subscribe - https://tinyurl.com/uxdsubscribe

The hamburger menu is a very common UI element that is typically used on mobile websites because at smaller screen sizes there isn't always the available space to include the word 'menu'. Also, and perhaps more importantly than the space saving, the hamburger icon has become a well known representation for the 'menu' and so it works universally, regardless of a users language.

In this design I've included the animation of the hamburger icon from it's first state as three horizontal lines to the close state where it transforms into a 'close' icon. You'll also spend time creating some simple hover states for the links in the menu, it's worth pointing out that the 'hover' state would only work on devices using a cursor.

Components and the states they allow you to create are really powerful because it means you no longer have to create multiple artboards to show how a specific element behaves.