desktop app layout

[okdistribute]

how will the desktop app behave? and other goodies.

a note that might affect this: we'll likely want to have the user be able to preview the contents of a dat on the desktop app, because files can be really big and you don't necessarily want to download all of it, or might only want to download one or two files directly, sort of like a google drive/dropbox style selective sync

[Kriesse]

Some wireframes and a video for the desktop app, please discuss:

Empty List, no dats:

First dat created:

Full List:

Video: Adding dats:

http://cl.ly/2g163O2b0r1g

Questions:

• Does the concept of a dat and the list of dats make sense?
• Are things prioritized and emphasized correctly? Or is the hierarchy off?
• Is everything we want to have in version one in there?
• Are the main actions clear, or could the wording/icons be improved? ("Create" vs. "Import" vs. other options like "Add", "Download" …)

Note: This is a mockup, transitions/animations are still missing, also everything visual (colors, fonts…) might still change a lot, let's iterate on that later.

[juliangruber]

• i really like the direction the logos are going, with the hexacon being the base. i think they can be made a bit more obvious though
  • the star in the "create" logo looks too much like a feature to "star" something. i propose turning the star into an asterisk or + sign
  • the up arrow from the "import" logo looks more like an "upload" action. if we stick with the arrow, it should point down instead
• the "(my own)" label is hard to parse. although we'll likely have user names associated with dats in the future, for now all the difference the owner of a dat makes to you is whether it's read-only (or vice versa, wheter it's writable) or not. So I propose adding a lock icon to mark a dat as read-only, or adding a pencil type icon to mark one as writable

Does the concept of a dat and the list of dats make sense?

I do think so, but would be curious what others think.

Are things prioritized and emphasized correctly? Or is the hierarchy off?

the hirarchy makes sense to me :)

Is everything we want to have in version one in there?

I think so.

Are the main actions clear, or could the wording/icons be improved? ("Create" vs. "Import" vs. other options like "Add", "Download" …)

I'm not sure about "Import", but I also couldn't come up with something better yet.

[Kriesse]

@juliangruber update:

[juliangruber]

to me the + looks great, i don't think though the sideways arrow makes sense. but also i don't want to micro design, as a developer, so if you feel that makes most sense i'd say go with it

[Kriesse]

👍 I'm also not too sure about the import metaphor in general, maybe using a clipboard or link would be more intuitive. See ideas below. But yeah, agreed, getting icons right is design detail work, let's focus on the overall layout first.

[okdistribute]

• Does the concept of a dat and the list of dats make sense?

Yes, it makes sense but I'm not sure how it will be used. Some people might use a dat as a project, others might represent a single dataset in a dat. For now it's probably fine to be as minimal and unopinionated as possible about this and take a queue from dropbox, where its just a list of folders.

• Are things prioritized and emphasized correctly? Or is the hierarchy off?

Perhaps 'network' isn't necessarily needed so prominently in that column -- it could be represented in the download progress bar.

• Is everything we want to have in version one in there?

Do I have multiple dats that are 'my own'? Is there another way to represent this that isn't (my own) at the end? When I create a new dat, I'm creating another that's my own, right? What we really mean here is that I am allowed to edit/update the ones that are 'my own' (for now dats only have one writer, but in the future that might change). Maybe it would make sense to have it instead focus on surfacing my ability to edit and update those dats.

• Are the main actions clear, or could the wording/icons be improved? ("Create" vs. "Import" vs. other options like "Add", "Download" …)

I wouldn't focus too much on icons, they seem fine for now and I like the link and trash icons. I think the 'finder' button might be unnecessary if in version one you can just click it to open it in finder, maybe?

Good job on these mocks. Let's try to get V1 out soon! @juliangruber i'd be happy to help build some parts of it if you want to assign some issues to me

[juliangruber]

For now it's probably fine to be as minimal and unopinionated as possible about this

+9000, until we know more. and this way we don't oppose any use cases

Perhaps 'network' isn't necessarily needed so prominently in that column -- it could be represented in the download progress bar.

network is mostly about uploading. the idea was to have a number that tells you if it's safe to shut off your computer while others are seeding data, and you know they need it. maybe that's premature though.

Do I have multiple dats that are 'my own'?

we think it's even simpler for now to have multiple own dats.

Maybe it would make sense to have it instead focus on surfacing my ability to edit and update those dats.

+1, that's why i proposed the writable / read-only icons

[juliangruber]

@Kriesse i think it's the most efficient for me to code up the initial design components and figure out how css needs to be managed etc. I won't be pixel aligning things, just rough layout and styles.

Also I think the design we have now is not going to change drastically, so if you give me your Go I'd like to code it up today.

[juliangruber]

wip:

[Kriesse]

@juliangruber Nice! Thanks for the feedback everyone.

Update:

[waldoj]

:+1: Looks nice!

[laurengarcia]

Hey @juliangruber: You can re-use the fonts, colors and other base stylings directly from the dat-design repo now if you use node-sass with node-sass-magic-importer in your package.json: https://github.com/datproject/dat.land/blob/master/package.json#L8

Then you can do something like this to import is via scss: https://github.com/datproject/dat.land/blob/master/src/scss/main.scss#L1-L11

... and more options for importing here: https://github.com/maoberlehner/node-sass-magic-importer

[laurengarcia]

Cool mocks! The only thing I find confusing is the "Enter Dat Link" field. Maybe its just the wording.

[Kriesse]

Closing, this is roughly implemented and all improvements and polishing are being tracked here: https://github.com/juliangruber/dat-desktop/milestone/2