Restyled section content with a lot of items to add another level of hierarchy (in addition to existing columns).
Here's before vs after. I'd say it's better now, but I might be somewhat biased...
about 1 year ago
The headlines help in separating the content out for sure. But the distance between the label dilutes their relationship a bit wouldn't you say? The dashed line as well as the typography already separate the title from the content, I think the distance only makes it harder to understand that the list is related to the title. I suppose that you are matching the space between the grouped pairs of links, however its distance from the title seems less readable, maybe if the separating line was in the exact middle of the vertical space between the list and the title that might tie it together better? Not sure.
On the topic of the lists, I see that you are trying to group related items in these lists, however without the bullet points they seem like they could just be one link that is wrapping to another line.
In both mocks, the items in these lists do not look like links. The byline (click on individual features for details) should be obvious and not need to be explained. If you need to explain it, than it must not be user-friendly :). This is especially true for a user clicking a link, which is a very common user interaction and not something out of the ordinary. Maybe colored links? dotted-underline at least?
I applaud you for trying to go clean and minimal in a world of dripping-with-design overly complicated sites (which I have been guilty of for sure), but if you make it minmal to the point that you need to explain things, that's when it's no longer minimal and you lose utility. Instead of being refreshingly simple as you would hope with a minimal layout, it ends up being more complicated than a conventional layout IMO.
@Chris, first of all, thanks for the comment.
With regards to the header spacing, I'll play with it a bit more, but I have already killed on this several hours (including things similar to what you suggested). I also tried dropping the separator line altogether, but that took away the implicit column framing and made for generally messier layout.
With regards to the links - I agree with what you said about links needing to be obvious, but here you are missing the context. This is a quick one-page teaser / holding page for the product (to replace far more amorphous this). The list is meant to be a summary, and the slide-outs with details are for those who are looking to dig deeper. In other words these links are camouflaged on purpose, they are for those who are looking for them. For the released product, the links will be removed and another (larger) section will be added to go over each feature in detail.
I also totally hear you on over-simplification angle. I will test for that. I have a couple of thousand people on the mailing list and I am planning to poll them for the feedback before deploying the redesign.
Thanks again for the comments, good stuff.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.