3 ms·
Hey, since the author is that responsive to feedback here is mine: Minimal design is great, but my projects work a bit better since I moved away from having tha
by onli 8y ago
Hey, since the author is that responsive to feedback here is mine: Minimal design is great, but my projects work a bit better since I moved away from having that as a goal. I still like to keep it simple, but there are elements not fitting to a minimal design that help to make a page more usable.
For example, it should be useful to move the top navigation bar into a big colored menu bar, like on github or on HN. That way the central content element of the page is no longer just separated by whitespace or placement from the navigation. I found that to be incredibly useful, I discovered that pattern for Pipes when as an in-joke re-using the Yahoo pure CSS framework (https://www.pipes.digital/ https://www.pipes.digital/, I guess having a look makes it clearer) and then had to adopt that pattern for my other projects. Also a place where using a drop shadow to put the navigation visually on a different height level can work out well.
There recently was a discussion of two github redesigns proposals on HN. The first redesign removed parts of the file area (at first, in a later step completely iirc?) from the summary page. Sourcehut is missing that area as well and I think it's a mistake, as was convincingly argued in the comments there: A part of what made github great compared to other code hosting pages was to not just show a list of commits or meta information on the central project page, but to have the files tree as the central element. It helps so much to give a clear understanding to visitors about what actually is in the repo. Imho the summary tab should show the files in the repo, as Github does.
A useful rule for links is that all links should be colored as long as they are not in a navigation area, those are understood without needing that. Ofc even good designs don't always do that, the links to commits in the file area of github for example, which is good as it puts focus on the file links instead. And sometimes links are buttons and that's usually hard to put into rules as well.
But with regards to links: It's a bit strange that the top navigation has a highlight on link hover, the second one does not (summary, tree, log, ...)
Your css applies `font-size: .9rem;`, it shouldn't. That's often ignored and who am I to preach design, but I have the absolute conviction that body text should not be messed with. Trust in the browser, keep it as is, just make headings bigger and detail elements a little bit smaller, the latter only when absolutely needed. Fits to your design philosophy anyway.
"Design for Hackers" is a nice book that could be added to the book recommendation you got already, at the very least it is nice to read.
PS: It might be that even for a project as big as this a CSS framework like Skeleton could be useful to get the basics of the design in a better shape (without saying it's awful now, it evidently works already), though of course there would still be lots of custom design work to be done.
- Sir_Cmpwn 8y agoThanks for the feedback! >For example, it should be useful to move the top navigation bar into a big colored menu bar, like on github or on HN. I tried this but I really dislike it: https://sr.ht/QhUN.png https://sr.ht/QhUN.png It's just sooo distracting to me, and it plays up sourcehut as being more important to the visitor than the content they came for, imo. >Imho the summary tab should show the files in the repo, as Github does I disagree here as well, just as a matter of taste. >A useful rule for links is that all links should be colored as long as they are not in a navigation area >It's a bit strange that the top navigation has a highlight on link hover, the second one does not (summary, tree, log, ...) Aye, I'm going to revisit this. >Your css applies `font-size: .9rem;`, it shouldn't. That's often ignored and who am I to preach design, but I have the absolute conviction that body text should not be messed with. Trust in the browser, keep it as is, just make headings bigger and detail elements a little bit smaller, the latter only when absolutely needed. Fits to your design philosophy anyway. >Your css applies `font-size: .9rem;`, it shouldn't. That's often ignored and who am I to preach design, but I have the absolute conviction that body text should not be messed with. Trust in the browser, keep it as is, just make headings bigger and detail elements a little bit smaller, the latter only when absolutely needed. Fits to your design philosophy anyway. I'll think about this. Thanks for sharing your thoughts!
- onli 8y agoThe coloured top navigation will not take the focus away, people are too used to navigation areas for that. It will help them however to separate the areas of the page. It's just very strange for you as you are too used to the existing design :) However, the contrast between the inactive menu elements and the background might be a bit low. And sure, there is a visual branding part in play here as well that you might want to think about a bit longer. Something else than a black bar could work better in that regard, maybe white with a small border and a shadow below? Something a bit more in line with the current design will ease the transition. But I think it absolutely works a lot better than the current whitespacy solution. Maybe ask a few people more for their impression? I'd be very surprised if it does not work better for most.
- onli 8y ago