1

I'm currently trying to create an SVG image for my GitHub readme's top. This image would include a profile for the user, a few links for social networks or similar sites to post(pinned), and some current todo list for the user(todo). This is the current demo that i made:

enter image description here

But I found some issues about the image. This is the problem of the profile demo.

  1. The profile box is white-themed, but the user contents(pinned) and to-do list are black-themed, making it visually uncomfortable to view. Even changing the user contents-todo section to white(Those white boxes) seems to be weird.
  2. The pinned section boxes and to-do list boxes are too small, making it hard to read. I thought about changing the layout, but I can't think of anything better than the current one.
  3. I want the working schedule box to link to the relevant content when clicked, but the profile image itself is an SVG type photo, so users may not recognize that the elements inside the image are clickable buttons.

So I want to ask these questions.

  1. What would be a better layout for the Todo and Pinned section? Would two-tab box layout using currently would be the best?
  2. How to induce user to recognize that the boxes are clickible buttons?
2
  • Does this answer your question? How to make sure the user knows interactivity of this widget
    – Danielillo
    Apr 8, 2023 at 8:23
  • @Danielillo Yes! But still, I have no idea about question 1.. I tried to explore Figma for a social network layout and other to-do lists, but I could not find a better one. The 1-tab grouped section looks too big and uses unnecessary space, while the 2-tab grouped list section (the current to-do-pinned tabs) looks too small for mobile users. What would be the solution? Apr 8, 2023 at 12:01

1 Answer 1

1

The answer is still the same as posted as a duplicate: use margins.

This is the Envato Graphicriver Portfolio:

  • All elements have little information and wide margins, making them perceptually clickable.
  • There is a top button to toggle between grid view to list view with expanded info

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.