logo

drewdevault.com

[mirror] blog and personal website of Drew DeVault git clone https://hacktivis.me/git/mirror/drewdevault.com.git

sourcehut-design.md (4312B)

    

  1. ---
  2. date: 2019-03-04
  3. layout: post
  4. title: Sourcehut's spartan approach to web design
  5. tags: ["sourcehut", "philosophy"]
  6. ---
  8. [Sourcehut](https://sourcehut.org) is known for its brutalist design, with its
  9. mostly shades-of-gray appearance, conservative color usage, and minimal
  10. distractions throughout. This article aims to share some insights into the
  11. philosophy that guides this design, both for the curious reader and for the
  12. new contributor to the open-source project.
  14. The most important principle is that sr.ht is an engineering tool first and
  15. foremost, and when you're there it's probably because you're in engineering
  16. mode. Therefore, it's important to bring the information you're there for to the
  17. forefront, and minimize distractions. In practice, this means that the first
  18. thing on any page to grab your attention should be the thing that brought you
  19. there. Consider [the source file view on git.sr.ht][gitsrht-blob]. For
  20. reference, here are similar pages on [GitHub][github-blob] and
  21. [Gitlab][gitlab-blob].
  23. [gitsrht-blob]: https://git.sr.ht/~sircmpwn/git.sr.ht/tree/master/gitsrht/service.py
  24. [github-blob]: https://github.com/torvalds/linux/blob/master/init/main.c
  25. [gitlab-blob]: https://gitlab.freedesktop.org/libinput/libinput/blob/master/src/evdev.c
  27. [![Screenshot of git.sr.ht](https://sr.ht/kkJm.png)][gitsrht-blob]
  29. <style>
  30. img {
  31.   box-shadow: 0 0 2px 2px #888;
  32.   max-width: 90%;
  33. }
  34. </style>
  36. The vast majority of the git.sr.ht page is dedicated to the source code we're
  37. reading here, and it's also where most of the colors are. Your eye is drawn
  38. straight to the content. Any additional information we show on this page is
  39. directly relevant to the content: breadcrumbs to other parts of the tree, file
  40. mode & size, links to other views on this repository. The nav can take you away
  41. from this page, but it's colored a light grey to avoid being distracting and
  42. each link is another engineering tool - no marketing material or fluff. Contrast
  43. with GitHub: a large, dark, attention grabbing navbar with links to direct you
  44. away from the content and towards marketing pages. If you're logged out, you get
  45. a giant sign-up box which pushes the content halfway off the page. Colors here
  46. are also distracting: note the large line of colorful avatars that catches your
  47. eye despite almost certainly being unrelated to your purpose on this page.
  49. ![Screenshot of builds.sr.ht](https://sr.ht/1qdZ.png)
  51. Colors are used much more conservatively on sourcehut. If you log into
  52. builds.sr.ht and visit the index page, you're greeted with a large blue "submit
  53. manifest" button, and very little color besides. This is probably why you were
  54. here - so it's made obvious and colorful so your eyes can quickly find it and
  55. get on with your work. Other pages are similar: the todo.sr.ht tracker page has
  56. a large form with a blue "submit" button for creating a new ticket, email views
  57. on lists.sr.ht have a large blue "reply to thread" button, and
  58. [man.sr.ht](https://man.sr.ht) has a large green button enticing new users
  59. towards the tutorials. Red is also used throughout for dangerous actions, like
  60. deleting things.  Each button also is unambiguous and relies on the text within
  61. itself rather than the text nearby: the git.sr.ht repository deletion page uses
  62. "Delete $reponame", rather than "Continue".
  64. ![Screenshot of repo deletion UI](https://sr.ht/d6Vx.png)
  66. The last important point in sourcehut's design is the use of icons, or rather
  67. the lack thereof. Icons are used extremely conservatively on sr.ht. Interactive
  68. icons (things you are expected to click) are never shown without text that
  69. clarifies what happens when you click them. Informational icons usually have a
  70. tooltip which explains their meaning, and are quite rare - only used in cases
  71. where real estate limits the use of text. Assigning an icon to every action or
  72. detail is not necessary and would add more distractions to the screen.
  74. I'm not a particularly skilled UI designer, so keeping it simple like this also
  75. helps to make a reasonably nice UI attainable for an engineer-oriented developer
  76. like me. Adding new pages is generally easy and requires little thought by
  77. applying these basic principles throughout, and the simple design doesn't take
  78. long to execute on. It's not perfect, but I like it and I've received positive
  79. feedback from my users.