: Critique: How to make a better visual distinction between content and options in a post? I have a design that currently looks something like this: I feel that there should be some sort of
I have a design that currently looks something like this:
I feel that there should be some sort of visual split between the main content of the post and the options below it (the up and down arrows, etc.).
Note that the design isn't a block-styled design (like Facebook) where each post gets its own block. In this case, the next and previous post is immediately under the bottom border.
How can I make a visual distinction between the post options and the post content?
More posts by @Martha945
3 Comments
Sorted by latest first Latest Oldest Best
I would prefer "Grouping" before doing any layout. group the similar elements together according the the function and the main "element" you represent.
the post is the most important thing in that layout comes next the name and image then the helping tools like like share and comment, all are helpful tools for user participation, but they are not the main hero in the layout. I grouped them together.
so I did my preferred layout as shown below. as you can see I grouped the helpful user tools in the same block and keep the post the hero. and that layout reduced a little the white spaces.
as you can see I had aligned the post into two major columns one for the name and the author picture, the second for the post and its tools. the space between the two columns are for aligning what comes right alight it left and what come left align it right.
I hope I explained it well.
Personally, I agree with DA that whitespace is most useful here, and maybe just increasing that will be enough.
A few other possible options:
Use a thicker line between the posts, and then use a thin line like the existing one to separate the post content from options.
Use a background colour such as grey, or the other colour in your scheme, on the post options. If you chose a proper colour (not grey) I'd recommend "washing it out" as much as possible beforehand, because absolutely any colour is likely to create a strong contrast against white.
Use a simple faded background pattern, such as faint diagonal lines. It depends on your overall design, but a simple pattern could work.
It's pretty difficult to offer suggestions when we can't see the overall context we're suggesting it for (the whole page), so I've given options for you try.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.