: What is the simplest and trendiest styles for a list layout on a website? I'm working on a web page design, I have the content as a list view of upcoming events with some details about each

@Nimeshi706

I absolutely think that you are on to something. My main suggestion is that you make most of the elements smaller - I think it's hard to keep track of what's going on when they are so big. I excluded the word "events" from the title descriptions because the users already know they are viewing events since they navigated to the page.

The current placement of the profile pictures is a bit too far away from the other information. I placed it so that it's earlier in the reading direction (left to right) and since it's the most unique element it will help to differentiate the events from eachother faster.

I can see that you didn't make any space to the left nor right on your preview image. I like to do this to get a better feeling of what it will look like when people have a greater resolution - which most people do if you design on e.g. 960 or 1100 pixels width. You can see a report that includes the most used resolutions here.

In the menu I think it's currently hard to tell the difference between links and text. I think this is fixed by making the color look more transparent on the text that is not links.

The icons on the event-section titles are currently redundant and serve little purpose. Using an icon on only one of them makes it more appealing. I think it seems that the "Upcoming" is the most relevant so I put it there.

The mini-profile or profile preview is currently a bit messy due to lack of sections. Splitting this with a line makes it more calm to look at imo.

Arial Narrow is a bit too... narrow - which makes it harder to read - I think you should use regular for the body text. Maybe you can use the narrow one for headlines.

If the user is able to host events I think this is the right place to make a create button as well.

Also I was a bit confused by the "App Store" label - what happens if you click on this?

Vote Up Vote Down

@Martha945

I don't think the design is bad at all! I don't like the color, but like you said, not much you can do about that. The only aspects that I would change are those rounded bars on the left of the events; I'm not big on rounded corners (that's just my own preference though, not really a right/wrong kind of thing).



Because I removed the rounded corners and increased the length of the bars, I added a tiny bit more space between each event, increasing the margin from 4px to 8px. If I were actually coding this, I would go with a margin of 10px though. I don't know why, but it drives me nuts, to be so close to 10 and not actually just make it 10.

Vote Up Vote Down