Need Help with a Design Decision
I have a sequence of items on a page and i've added a search field and some filter options to filter through what will be an endless feed. Please advice on what i should do different on the picture attached as it feels empty to me.
#ui-ux #ui-ux-questions #layout
12 Replies
are you going to add image/thumbnail?
this suitcase thing is kinda weird, if it's unnecessary then remove it
might want to stretch this out so it align correctly
add padding to this box too so you can have a little bit of comfortable whitespace
take a look at this example
This helps a lot but the issue is the client is one of those who insists on following his plans.... i had insisted on adding a thumbnail but it was refused, i insisted on padding and adding more breathing room on the cards but rejected again...... that's why i came here for help, hoping for something that might convince him but i sincerely appreciate your comments
I feel your pain not being able to add breathing room to the design, but I'm sure it'll look better once fully populated. Usually on large screens there's a sidebar with categories or recent activity etc. But since there's little chance of that lol, you could maybe try darkening the background of the body a bit more to bring the card off the page a little? Or any other little details you can get away with, like in this example...
Thnk you so much @al_pol . In one of my drafts, i had this same design and i sent it to him, he said he doesnt want the filters out like that and not all cards will have an image. So you'll have some images with cards and others without cards.
I did this last night and sent to him and he was finally happy because I did what he wanted..... Why does it have to be this way with Business Owners?
Putting that search bar on the same line with filter is kinda confusing but why does All categories have color?
I know right! In an ideal world, a little breathing room with padding would be nice but if the customer is happy, it's time to relax... After they just have oneeee more thing to change ha
If your client is happy with the design, the best thing you can do is stop. But, if you are still looking for improvements:
1. What is the function of the 'get started' button in relation to this page? By placing it all alone at the top of the page in a high visibility blue bar, you are telling the user that pressing this button is the most important / first thing they should do here, but it seems like that should be on the front page and not after they have already navigated into this search page.
Possible solution: replace this area with a standard primary navigation element. Push the get started CTA down into the body along with some text that further explains what it does like "Ready to take this job" or "ready to offer work?"
2. Card Layouts. You have a whole lot of wasted space in the center of the cards where human eyes naturally gravitate, while also having too little white space on the edges. The visual hierarchy of the text also suffers due to the inconsistent colors and icon sizes. This section is extra challenging because some cards will have images and some won't and the cards don't match in size which makes the whole grid out of alignment.
Possible solution: make the vertical card with the image always equal in height to 2 of the text only cards + the gap, so that they line up perfectly on the page. Make all the icons the same color and size. Only use 1 or 2 colors for the content. Rearrange the text to fill the space better and add info tags for visual interest.
3. Color Palette. I count 4 blues, 2 grays, black, white, orange, and purple. Too many and they are not complimenting each other. Just on your text, I count 6 different colors being used. The end result, is there is no feeling of consistency.
Possible solution: Remove the purple and orange entirely, they don't match anything else. Define a standard text color and use it across all the words, with maybe one accent. Use font weight to differentiate text that is more important rather than color. Either change the bg color on the search bar so there is enough contrast to actually see it, or remove it entirely and use the same bg color as the body
4. Your alignments are off (*the search bar should be as wide as the column below it, the 4 filters should be as wide as the 3 columns below. The top bar should align with the body content etc.
even if you don't use these changes in this design, you'll want to keep them in mind for future work, good luck with your client