Stop ignoring visual hierarchy in UI
Stop ignoring visual hierarchy in your UI
Let’s take your UI from a list of content to a polished interface by applying visual hierarchy. Here’s how:
1️⃣ Organize your content: Start by grouping and prioritizing your content. In this example, we have the user, activity, comment, and related actions.
2️⃣ Layout formation: Begin with the user - avatar, username, and timestamp. Instead of vertical alignment, set them horizontally and use size and colour for visual hierarchy.
3️⃣ Activity content: Experiment with layouts. Zoom in on metrics and apply colour and size hierarchy to labels. Align metrics to the right, keeping proximity tight.
4️⃣ Achievement banner: Use colour and size hierarchy, ensuring it’s close to the activity content.
5️⃣ Comments and actions: Stack comments below for longer text and float actions in the top right or at the bottom.
Watch how these steps form the overall layout of your UI and make your design visually engaging!
Смотрите видео Stop ignoring visual hierarchy in UI онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Memorisely 23 Июль 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 257 раз и оно понравилось 7 людям.