TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Sourcehut's spartan approach to web design

68 pointsby kragnizabout 6 years ago

13 comments

smt88about 6 years ago
The philosophy described in this article sounds like a naive guess at what makes things usable instead of reading the mountains of actual research on the topic.<p>For example, it seems like one tactic for &quot;simplicity&quot; or &quot;minimalism&quot; is that nearly all the text is in the same font (same size, same font face, and mostly the same color).<p>That tells my brain that everything is of equal importance. It&#x27;s confusing and actually has the opposite effect of &quot;bring the information you’re there for to the forefront&quot; (the goal the article describes).<p>Many buttons don&#x27;t look clickable, many links don&#x27;t look like links (because they&#x27;re black or gray, like the rest of the text), and the whitespace is a disaster on my screen (line spacing is very condensed, margins are all over the place).
评论 #19302156 未加载
评论 #19302148 未加载
folkravabout 6 years ago
&gt; In practice, this means that the first thing on any page to grab your attention should be the thing that brought you there. Consider the source file view on git.sr.ht. For reference, here are similar pages on GitHub and Gitlab.<p>I don&#x27;t even consider this a good example of good UI&#x2F;UX. Sourcehut&#x27;s page gives way less information and has less QOL tools like straight edit or dedicated git blame. I have to dive into submenus and close the file to get last commit information.<p>On example : making visual note of the currently selected tab, &quot;Tree&quot;, I then click on &quot;Log&quot; to get this information. I then instinctively click on &quot;Tree&quot; again to come back, only to be greeted by the whole file tree. I have to manually press the browser&#x27;s back button twice.
评论 #19301973 未加载
voidhorseabout 6 years ago
I agree with the general sentiment in the thread thus far: the goal of minimalism and focus is a nice one, but at the moment it seems like a bit <i>less</i> sparseness in the design could actually help facilitate that goal, rather than hinder it.<p>Sir_Cmpwn, if you&#x27;re looking to up your UX game while keeping things stripped down I would recommend taking a look at Josef Müller Brockmann&#x27;s book <i>Grid Systems</i>. It&#x27;s written in the context of print layouts, but many of the principles can be extrapolated to web design. It covers some excellent techniques for managing information density and prominence with base visual elements such as a well composed grid and some simple variations on fonts (size and weight).
评论 #19302482 未加载
niftichabout 6 years ago
Sourcehut&#x27;s design seems inspired by terminals and line-oriented interfaces more so than early 2000&#x27;s boxy HTML, so some choices are head-scratchers.<p>The lack of visible bounding boxes or (&quot;old-style&quot;) underlining around the core navigation links draws inspiration both tab-oriented keyboard navigation and very modern, ~201x UI design, but lifts only their outward look without incorporating strengths from each: it neither has strong indicators of a series of menu items that can be stepped through (like a right-facing triangle to the left of the menu item&#x27;s text), nor does it evoke the Metro-style UI, where UX-meaningful text is king on a sparse field. Underlining each link in the top bar would immediately communicate that many of the words are clickable but not all; as would the use of background shading and color to set the static top bar apart from the rest of the page content. Or even just a 1px bottom border.<p>Similarly, visual suggestion of tabs for &#x27;summary&#x27;, &#x27;tree&#x27;, etc, is not very convincing in a browser. Desaturated borders around the inactive tabs would clearly communicate that there&#x27;s a tabbed interface here. Bolding of the text of the active tab would reinforce that further.<p>EDIT: When I think about minimalism on the web, I&#x27;m inspired by the box model and by occasionally-visible borders, which help translate the tree structure of the page into a coherent interface. Borders have gone out of fashion in mainstream design, and so has the use of text decoration for links, so it&#x27;s harder now to distinguish between interactive and static elements in an interface. Sourcehut&#x27;s &#x27;spartan&#x27; take on this misses an opportunity to clarify a distinction that&#x27;s been lost in other schools of design.
oftenwrongabout 6 years ago
I appreciate the mention and use of breadcrumbs. I think breadcrumbs are one of the most under-rated UI elements. Breadcrumbs make one&#x27;s position in the navigation hierarchy instantly obvious. It is a shame that they have fallen out of fashion.<p>Also, +1 for not using icons. Instead of having a link with some undecipherable symbol that requires a tool-tip to translate it for the user, just put a damn word there!
rossdavidhabout 6 years ago
My only quibble is that this: &quot;Therefore, it’s important to bring the information you’re there for to the forefront, and minimize distractions. In practice, this means that the first thing on any page to grab your attention should be the thing that brought you there.&quot; ...is just as true for any restaurant, store, or even social network webpage as well. But that appears sometimes to be a lost battle, at least for the moment, so I appreciate that there are at least a few corners of the internet still styling things in the way that helps you to use the page, rather than the way that makes it look more impressive in design meetings with executives or clients.
评论 #19301915 未加载
评论 #19301919 未加载
rrhyneabout 6 years ago
The philosophy is good, but IMO, the lack of attention to margins and the weight of key content elements is hurting the readability of the designs.
评论 #19301914 未加载
krzkaczorabout 6 years ago
Offtop: I was wondering for a long time what the heck sr.ht was supposed to mean. Sourcehut is a great move forward regarding naming ;)
rglullisabout 6 years ago
OT, but since the author is here: please take a look at your pep8 validation, your imports in the screenshot are all over the place. <a href="https:&#x2F;&#x2F;www.python.org&#x2F;dev&#x2F;peps&#x2F;pep-0008&#x2F;#imports" rel="nofollow">https:&#x2F;&#x2F;www.python.org&#x2F;dev&#x2F;peps&#x2F;pep-0008&#x2F;#imports</a> is your friend.
评论 #19302466 未加载
iziettoabout 6 years ago
Suggestion: add a way to reset the lines anchors. When I click on a line link I can&#x27;t see any way to reset it, except removing it in the browser&#x27;s address bar. Maybe making the filename in the breadcrumb clickable could be a good fix (at least, that&#x27;s the first point where I looked to when I wanted to reset the anchors)
评论 #19302092 未加载
hitekkerabout 6 years ago
This piece reads as a rationalization for ignoring UX research. I mean, by all means, forget the fads of web design but at least consider the pitfalls of others who&#x27;ve tried (and failed)<p>It strikes such a weird and defensive tone.
onion2kabout 6 years ago
<i>minimal distractions throughout</i><p>I find the compact design incredibly distracting. If elements like the .header-extension bar had more vertical padding I&#x27;d find it much easier to scan for important details.
评论 #19302063 未加载
onliabout 6 years 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.<p>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 (<a href="https:&#x2F;&#x2F;www.pipes.digital&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.pipes.digital&#x2F;</a>, 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.<p>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&#x27;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.<p>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&#x27;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&#x27;s usually hard to put into rules as well.<p>But with regards to links: It&#x27;s a bit strange that the top navigation has a highlight on link hover, the second one does not (summary, tree, log, ...)<p>Your css applies `font-size: .9rem;`, it shouldn&#x27;t. That&#x27;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.<p>&quot;Design for Hackers&quot; is a nice book that could be added to the book recommendation you got already, at the very least it is nice to read.<p>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&#x27;s awful now, it evidently works already), though of course there would still be lots of custom design work to be done.
评论 #19303060 未加载