0

I am not really happy with the way I've designed these tiles . And I'm short of ideas. Can anybody have ideas on how I could make the section look better? In general with the presentation of the tiles, color, shape and background.

Background of the image:

  1. This is a homepage of an application that shows the reports and dashboard (Pdf ) of their department. Divided in 2 sections. selecting a tile on the top changes the set of files in the bottom part.
  2. The create new allows the user to create a folder/ tile for themselves by selecting appropriate filter options.

  3. The folders are added horizontally as and when they are created.

    enter image description here

Improve this question
0
1

To save space as new categories/folders are created, you might consider a layout similar to Amazon Drive's current interface. The file categories (All files, Shared files, Deleted) are placed in a left sidebar. The horizontal band above the file directory displays the path to the files/folders. The file/folder tools are placed at the foot of the screen.
enter image description here

When you hover over the left sidebar, the icons expand to reveal a description.
enter image description here

Improve this answer
1
  • Thank you for your response. Although I like your idea, I'm here looking for more visual cues to improve the tile look. The look of the boxes have not be really appreciated and I wonder what I could do to improve them
    – Nodnin
    Sep 14 '16 at 19:10
1

I think one of the main issues with the boxes are that they look like 'zero states', and look really similar to the add button right next to them. I find it strange that you use square shapes for them. The groups' function remind me of 'tags' (like the ones used right here on stack exchange) and I think they might work well in more of a tag styling.. I would just do a horizontal button with "Category Name (3)" and an indicator for 'new'.

Improve this answer
2
  • Thank you for your response. I agree to your idea (tag), and have that in place. But I'd like to know more about the boxes. You said they look like zero states.. How can I improve them? What could I do make them visually more appealing ? I'd appreciate if you could talk more on the boxes part and suggest some ideas. Looking forward... Thanks
    – Nodnin
    Sep 14 '16 at 23:27
  • The square boxes are larger than other elements on the screen, so my attention is being drawn towards them. This is appropriate if the focus is on creating and organizing the folders (categories); however, once the folders are set up I would expect that your users are going to be focused on selecting the file(s) that they want to work on. In that everyday working situation, I think that @rebekajoye's recommendation for horizontal buttons would be more appropriate. To see what this looks like, just scroll this page back up to your screenshot until the top portion of the squares are masked out.
    – Dan Tabata
    Sep 15 '16 at 15:46
0

The tiles are taking up way to much room, you could either make them buttons or tabs.

I have created a codepen for you to check it out. Tiles to buttons. This would save a load of space, plus it looks nice :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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