-1

I'm working on a web page design, I have the content as a list view of upcoming events with some details about each event (time/location/description....etc) with 2 links at the top of the list to change between upcoming and past events. That's pretty much all what the page contains beside the menu and the logo at the top and a tiny footer. Can anyone suggest a trendy and simple style for the page layout?

This's what I have at the moment, the white rectangle is where the logo goes (obviously), and I can only use those colors since it's the theme of the website. Does this look any good? I'm open for suggestions.

enter image description here

closed as primarily opinion-based by DA01, KMSTR, Scott, Mᴏɴᴋᴇʏ Oct 28 '14 at 12:44

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • Maybe show us what you have and we can give you some suggestions? I'm not sure there is really a way to tell you exactly what to do, without seeing anything. I know my design workflow involves a lot of tweaking/trial and error, until I find what looks best. – Manly Oct 22 '14 at 18:12
2

Suggestions

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?

  • Thank you so much for your useful thorough answer. - As for the profile pictures, actually they are not profile pictures, they are pictures of the host of each event. - Regarding the font, it's not Arial Narrow, I'm using Helvetica, but I see your point. - This website is the web version of a phone app we're making, so if you're navigating the website on your phone browser, that label will take you to App Store to download the app. – Odor Of Jasmine Oct 22 '14 at 22:11
1

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).

layout

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.

  • Thank you so much! and yes the touch you've made just made it a bit more compelling. I can relate to the 10 pixel thing since I fall in the same obsession :) – Odor Of Jasmine Oct 22 '14 at 19:20
  • 5, 10, 15, 20...Everything has to be like that for me haha my effect values, distances, etc. I don't know why. – Manly Oct 22 '14 at 19:24
  • I'm coding this website and it's my first time coding and I understand that feeling.. what upsets me most is values with 9 or 1, like 49/49/31/39/ really annoying, I should start paying attention to those values in my design as well :D – Odor Of Jasmine Oct 22 '14 at 19:38
  • Yea, I can't live with myself, doing something like that! haha – Manly Oct 22 '14 at 19:45

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