Lo-fi web mockups
olingern opened this issue · comments
Description
I thought it could be interesting to throw together some low-fi, mostly grayscale mockups to get an idea of what's required for someone to start on #107
Questions:
- Do people find these helpful for talking points?
- What pages do we actually need? Just a handful off the top of my head.
- Home
- Search
- Search results
- Package page
- User page
- Move this to discourse?
DISCLAIMER: I am by no means a designer!
Homepage
Kind of tricky because anyone can run their own instance. Maybe this isn't really applicable and their needs to be a "meta" site that actually tells people what entropic is. Maybe what Arch does is more applicable than what npm does.
A bit hard to see here on Github. Illustration is just placeholder from Zabombey on Dribble
Package page
Missing a lot of metrics, namespace, etc. Just to kind of get things started.
Kind of tricky because anyone can run their own instance. Maybe this isn't really applicable and their needs to be a "meta" site that actually tells people what entropic is. Maybe what Arch does is more applicable than what npm does.
As I see it, there needs to be two sites: one for Entropic as an application that tells the story and serves as a landing page and another one for registry instance (doesn't really matter whether official or local or however the language goes).
Your first mockup is an example of the Entropic as application. It tells a story, it has a call for action, it's here to capture attention and answer basic questions for the newcomer. This website needs to have a link to documentation (or it being a part of this site), a link to discourse, to github. It should provide an information of what Entropic is, give clear instructions of how to use, how to setup your own repo, where to ask questions and how to contribute.
The second mockup is an example of the page users will likely see most often when they stumble upon Entropic by accident while looking for a particular library to solve their problem. This page on the other hand, should be a part of repository UI. This website should give you a view into what particular repo contains (a list, a search, a top, however you cut it). It should also give you ability to authenticate, manage your packages and settings (which right now is only auth tokens, as far as I'm aware).
Both pages should link to each other when reasonable. The Entropic page should link to official repo (once again I'm not clear on whether "official" is even the right term here) and repo page should link to Entropic for basic information on how to use it.
And also, I'm not affiliated with them in any way, but back on my previous job we had pretty decent experience using InVision for rapid back and forth on UI/UX so if you ever feel constrained by mocks in github issues, I suggest giving it a shot.
As I see it, there needs to be two sites: one for Entropic as an application that tells the story and serves as a landing page and another one for registry instance
👍 This is exactly what I was thinking
experience using InVision for rapid back and forth on UI/UX
I'm a very light user of Figma, but am open to whatever will help us reason about building things out. Also, if there are any other designers wanting to jump in, please do!
An unexpected request to be sure, but could we not use left-pad as our example? To my understanding the left-pad event was quite a stressful event for those who work (and still work) at npm, some of those are contributing to this repo in earnest or have the desire to. Let's use a different package in our mockups 🧡
Excited to see this get going!
I can do that. I wasn't really privy to the internals of how this went at npm, but I can see how it was stressful. Because it's so infamous, I just kind of see left-pad for packages as foo bar baz is for variables.
Maybe what Arch does is more applicable than what npm does.
Seems like npm suddenly decided to do something else between original post and now. Just wanna make sure the sentence still means what it meant yesterday.
edit: or is it just me not being logged in on this machine and this is what you meant all along? =)
Definitely need a getting started tldr in the GitHub readme or the site to come. The idea is exciting but hard to grasp when all you know is npm
