datdot project landing page #2

serapath · 2020-01-10T20:55:50Z

`@todo`

DIFFERENCE

OLD WORLD:
1. Big Operating System Installation (e.g. 1 GB)
2. Settings (ENABLE/INSTALL/DISABLE/UNINSTALL)
3. App Store
  - App
  - Settings
NEW WORLD: ("Datdot Apps")
2. Website Sized Operating System Installation (e.g. 1-2 MB)
- offline first websites/apps
* APPS: (Pac man, CodingGame, Cabal, Mapeo, DatExplorer)

The text was updated successfully, but these errors were encountered:

fionataeyang · 2020-03-09T08:55:23Z

Update 5.20.2020

Wireframe v8

Update 5.6.2020
Wireframe v7

Update: 4.25.2020
Wireframe v6

Update: 4.14.2020
Wireframev 5

change task bar to bottom
add sign in, adjust sign out for user profile
add launch menu
adjust icon direction
add clock
change dropdown menu to dropup menu
make welcome
add .exe, .html for the icon's name to better recognize
make show desktop button
make quick launch bar
adjust prototype links

Update: 4.5.2020
Wireframe v4

add avatar
add notification
add avatar dropdown
delete other icons on the desktop, only Doc, Installer, Misc, Chat.
add download button in the document
add release notes in document

Wireframe v3 (3.26.2020)
Wireframe v2 (3.17.2020)
Wireframe v1
Wireframe (3.4.2020)

fionataeyang · 2020-03-09T13:32:54Z

Design soucres

fionataeyang · 2020-03-10T16:57:45Z

Update: 4.8.2020

new Mockups

demo4

Update: 4.1.2020
demo3
Update: 3.18.2020

old Mockups for home

demo2
demo1

ninabreznik · 2020-04-08T13:22:34Z

Inspiration:

serapath · 2020-04-15T17:23:29Z

`@todo`

see here

https://xd.adobe.com/view/e7a505be-1e7e-4b5e-4d18-866825368100-9194/screen/0d565c1a-9c5d-4771-923e-473fb4a70e04/landing-page-wireframe-desktop

"START MENU"

* [APPEARANCE](datdot://softwaremanager/datdotOS#settings/theme)
* [MISC] >
    * Coding Game
    * Pacman
* --------------------------------------------
* SOFTWARE MANAGER
* RUN (**input field**) > 
   * Pacman
   * Coding Game
   * File Explorer
   * Datdot Docs

SOFTWARE MANAGER

List of all installed Programs
- Option to Uninstall Programs
- e.g. Pacman, Coding Game
List of available Installers
- e.g. Datdot
Click on single program it opens the .install (e.g. datdot.install)
=> opens it e.g. as part of the SOFTWAR MANAGER

RUN (concept brainstorming)

typing: e.g.

      [ Pacm..  ]        >  Pacman Application
                            Pacman Documentation
                            Pacman Settings

      [ Pacm  Set.. ]    >  Pacman Settings

EXAMPLE - `DATDOT Desktop.install`

Welcome Splash Screen
- Title
- Description
- Download/Install/Uninstall/Update Button
  - Select Version
Documentation (select Version)
Settings (only active after installation) (select Version)
News (e.g. see VScode welcome screen) (via NOTIFICATIONS)
- e.g. Updates/Releases/Changelog
- e.g. Blog Posts
About
- repository
- license
Support Chat

Implementation of landingpage (datdot OS) idea

<!doctype html>
<html>
  <head><meta charset="utf-8"></head>
  <body><script>
if (localStorage.softwaremanager) {
  const installed = JSON.parse(localStorage.softwaremanager).installed
  START(installed)
} else {
  const installed = [
    'CodingGame',
    'Pacman',
    'DATDOT Desktop',
  ]
  localStorage.softwaremanager = JSON.stringify({
    installed: installed,
    available: [
      'DATDOT'
    ]
  })
  START(installed)
}
function START (installed) {
  installed.forEach(software => {
    if (localStorage[software]) {
      execute(localStorage[software])
    } else {
      const data = fetch(software)
      localStorage[software] = data
      execute(data)
    }
  })
}
  </script></body>
</html>

fionataeyang · 2020-05-08T11:17:18Z

Workflow/Userflow reference

https://cbalmes2.files.wordpress.com/2014/08/baldor-online-fulfillment-process-11-4-2014.pdf
https://dribbble.com/shots/2616274-Information-Architecture-for-Zyksa-com/attachments/522373
https://chrisbalmes.work/portfolio/baldor-foods/
https://cbalmes2.files.wordpress.com/2014/08/new_page_1.png
https://dribbble.com/shots/9368926-IA-Flow-Chart/attachments/1397876?mode=media
https://dribbble.com/shots/3438926-Nest-Redesign-User-Flow-Diagram

serapath · 2020-05-09T14:55:59Z

Idea about "system manager" vs. "package manager":

package manager works how the wireframes currently show it
datdot-org system manager is something we have to decide about
it cannot be uninstalled or removed
it has all the features and information like a normal "package installer"
* e.g. intro, docs, news, about, support chat, supply tree, ...
to click supply tree it shows: e.g. clock, appearance, package manager, ...
* "supply tree items" cannot be uninstalled or removed
* to click e.g. "clock" item, will open "package installer view" for clock package
* if you click "back" from a "supply tree item" you return to parent item (e.g. datdot-org system)

fionataeyang · 2020-05-16T14:04:58Z

`@issue`

DatDot.org owns about, documentation, settings, news, support chat, supply tree
It is only removed information, becoz information is should be in the documentation, and it is not able to install or download, so this one is not exist. Thus, I feel DatDot.org can click from DatDot logo.
I never feel it should be as same as package manager, becoz DatDot is the core of the whole system, so it is not part of package manager. Package manager is part of DatDot.org. It must to be easy to recognize for the user to see the different interface between package manager.
Add other package from link

This is a not confirm behavior, becoz it is only fit for one link for each time to add package.
Here is the scenario via npm.
When I wanna use npm install and use the multiple way to install the different packages.
I can use npm install bel csjs-inject --save to execute and automatically install the packages.
The problem I feel that search input to switch to paste the link, but only add one card into the below, and the user needs to click install to download it for sure.

I feel it is not intuitive and unfriendly for the user to use this input.

Is it possible to edit like an array instead of not just paste a link.
For example:

[ { dat://xxxxxxxxxxxxxxxxxxx, true}, {dat://xxxxxxxxxxxxxxxxxxx, false}]

Here's true means allow to auto directly download when add, false is opposite about not auto download, just only add a new card.
This is a feeling I have the issue when I reinstall VSCode, and lost every plugins, I have to search again, and manually install them all via each.

ninabreznik · 2020-05-16T15:09:02Z

I feel the same about the datdot.org as a package. I wonder what do you think if datdot.org package would open directly when you click the datdot logo? And the software manager would open all the other apps.
So, the datdot logo opens directly the datdot.org package. Software manager icon opens the preview of other apps and when you click on one it opens that particular package.

Then we don't need a system manager, because all the dependencies of the datdot.org package are listed in the supply tree and can be opened from there.

I actually like the idea of adding and installing in one step since this is most typical need. And if people don't want to have it installed, they can still manually uninstall it after it is installed, they can cancel it (this would probably stop the instal & remove the whole package), plus, we can maybe somewhere in datdot.org settings or software manager settings add an option uncheck the autoinstall.

fionataeyang · 2020-05-16T15:41:35Z

This is how I feel when click DatDot logo

I think there is no system manager, the package manager's icon can be appearance in the settings(not sure the correct name), also appearance icon too.

This was I've thinking to move the appearance to settings, but I think can change the interface to put the icons to here. (The icons include appearance and package manager)

So, I will change the interface of DatDot.org settings. It is a settings for the whole system.

ninabreznik · 2020-05-16T15:57:07Z

I am thinking like this. We have a datdot.org package. It has dependencies, listed in the supply tree.
The dependencies are: clock, software manager, appearance etc.

If you go under datdot.org package / settings, you find settings for datdot.org + settings for each dependency, all together. BUT you can also go to the supply tree and click for example appearence which opens appearance package. There you also have the settings, but only for the appearance.

This means, you can change appearance directly from the datdot.org package settings & from the appearance package settings.

Both are always synchronized.

fionataeyang · 2020-05-16T16:01:57Z

Oh..I have no idea about the supply tree for DatDot.org. Would you give me the correct list of it?
And this is settings in DatDog.org that I've just updated.

ninabreznik · 2020-05-16T16:14:01Z

I think it's these 3 yes, can't think of any other now. Is clock and language part of task bar?

I like this approach, but just want to ask. If you click here for example appearance, it opens appearance package directly on the settings tab?

serapath · 2020-05-16T16:14:37Z

Thank you @fionataeyang for the issue and nice description.

my thoughts are:
First - regarding the maybe easier one => (2.):
I agree with you. Your suggestion to solve it sounds great.
I remember for smartcontract codes, we also had a more sophesticated input field that allowed to write a single word or link, but also to write multiple links - not to forget the sophesticated generated input form that smartcontract-ui was or is. Let's try it :-)

Second - regarding (1.):
I think it all boils down to misunderstandings rather then real differences in perception.

We have the UI/UX side of things.
We also have the repos & developer & maintainance side of things and both need to work to give the best possible UI/UX but not forget what it means in terms of building and maintaining it on the implementation side.

If you think nina's proposal above makes sense - I think I can agree with that.

Additionally: Regarding the supply tree (e.g. of datdot-os)
We need the implementation and logic in place so that it auto-changes what shows in the supply tree every time we update the supply tree / dependencies.
That is the whole point, so that we don't need to know at this moment what will be exactly shown there. If we list a few items as examples (e.g. clock, pacman, appearance, ...) that's ok to get the idea and when we come to the final implementation, whatever we figured out then, will be automatically displayed there, no matter if it is 2 or 10 items.
I perceive this to be the goal so we don't need to now already know for all future :-)

fionataeyang · 2020-05-19T12:00:38Z

@Issue2

I changed the search and add button behavior. I hope to avoid the user to click dropdown to find the options. This was an inspiration from other website. Plus we don't have much settings to do with auto download. Therefore, I think put it under add input field to make a checkbox, the user doesn't need to go to settings page to decide auto or not auto download. This for me is more convenient and easier to notice.

Search

Add new

Question1:
I make 3 ways to add the new address. Which one do you prefer the most?

Demo1

Add multiple address like search selector input field. It can add many address for one time when click the add button. The heavy color is the behavior when the user hover it to present all characters. Without background color is current typing. They are all separate when the user type , and use space keyboard like write a email address in Gmail or others.

Demo2

Add multiple address but keep the address length to display

Demo3

Add one address, and the package can display the picture and the information. This idea came from twitter and facebook's post. I wonder is it possible to make?
This idea is more like the user can check download the right package before add. To recognize logo and team's name.

fionataeyang · 2020-05-19T12:09:07Z

@ninabreznik
Clock and Language would be the icons in Settings page as well. I will add them into there that I forgot.

I update Settings.

Appearance would be displaying in Settings page. :) I've already changed the behavior, and let the user learning how to find the appearance as well. I also keep Appearance icon on the task bar.

fionataeyang · 2020-05-19T12:16:10Z

@serapath
For supply tree, I think I would only make the template which means no matter how much items inside, they will be following the style to display.
When you both confirmed it then I won't change too much there.

For your previous question with second,

I don't know which part should be maintain, I just do my best way to think about UIUX and also make it possible to maintain as well, for example package list and package information.
I've already some experiences with smartcontract.codes and smartcontract-UI to make themes, and those are already enough to you and Nina understand how to maintain the styles as well.

This was a landing page...not a platform, but it is now.
Every platform has a rule to define to require everyone follow it as well.

@issue

I have feeling that supply tree cannot customize to design, it should be using d3.js to make the tree. There would be more and more packages in our supply tree or others. I'm not sure the design would be fit in the future. And I realize it is really difficult to make a tree responsive for fitting the different screen size. This is why I think it should be using d3.js or other tools.
This is an issue when the width space is not enough to display.

D3.js demo

https://bl.ocks.org/d3noob/8326869

serapath · 2020-05-20T11:53:12Z

issue

playproject-io.github.io#14 package manager input field & related

serapath assigned ninabreznik, serapath and fionataeyang Jan 10, 2020

This was referenced Jan 10, 2020

milestone1: 2019.08.23 - 13.07.2020 #1

Closed

2020.01.14-05:00pm UTC-0 | weekly partner meeting #3

Closed

2020.01.21-08:00pm UTC-0 | weekly partner meeting #25

Closed

This was referenced Jan 29, 2020

2020.02.04-08:00pm UTC-0 | next datdot sync #27

Closed

2020.02.11-08:00pm UTC-0 | datdot sync #28

Closed

This was referenced Feb 11, 2020

2020.02.18-08:00pm UTC-0 | datdot sync #30

Closed

2020.02.25-08:00pm UTC-0 | datdot sync #31

Closed

serapath mentioned this issue Feb 26, 2020

2020.03.03-06:00am UTC-0 | datdot sync #35

Closed

serapath unassigned ninabreznik and serapath Feb 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

datdot project landing page #2

datdot project landing page #2

serapath commented Jan 10, 2020 •

edited

Loading

fionataeyang commented Mar 9, 2020 •

edited

Loading

fionataeyang commented Mar 9, 2020 •

edited

Loading

fionataeyang commented Mar 10, 2020 •

edited

Loading

ninabreznik commented Apr 8, 2020 •

edited by serapath

Loading

serapath commented Apr 15, 2020 •

edited

Loading

fionataeyang commented May 8, 2020

serapath commented May 9, 2020 •

edited

Loading

fionataeyang commented May 16, 2020 •

edited

Loading

ninabreznik commented May 16, 2020 •

edited

Loading

fionataeyang commented May 16, 2020

ninabreznik commented May 16, 2020

fionataeyang commented May 16, 2020

ninabreznik commented May 16, 2020 •

edited

Loading

serapath commented May 16, 2020

fionataeyang commented May 19, 2020 •

edited

Loading

fionataeyang commented May 19, 2020 •

edited

Loading

fionataeyang commented May 19, 2020 •

edited

Loading

serapath commented May 20, 2020 •

edited

Loading

datdot project landing page #2

datdot project landing page #2

Comments

serapath commented Jan 10, 2020 • edited Loading

@todo

fionataeyang commented Mar 9, 2020 • edited Loading

Wireframe v8

fionataeyang commented Mar 9, 2020 • edited Loading

Design soucres

Animated gif

Images

Icons

fionataeyang commented Mar 10, 2020 • edited Loading

new Mockups

old Mockups for home

ninabreznik commented Apr 8, 2020 • edited by serapath Loading

serapath commented Apr 15, 2020 • edited Loading

@todo

"START MENU"

SOFTWARE MANAGER

RUN (concept brainstorming)

EXAMPLE - DATDOT Desktop.install

Implementation of landingpage (datdot OS) idea

fionataeyang commented May 8, 2020

Workflow/Userflow reference

serapath commented May 9, 2020 • edited Loading

fionataeyang commented May 16, 2020 • edited Loading

@issue

ninabreznik commented May 16, 2020 • edited Loading

fionataeyang commented May 16, 2020

ninabreznik commented May 16, 2020

fionataeyang commented May 16, 2020

ninabreznik commented May 16, 2020 • edited Loading

serapath commented May 16, 2020

fionataeyang commented May 19, 2020 • edited Loading

@Issue2

Search

Add new

Demo1

Demo2

Demo3

fionataeyang commented May 19, 2020 • edited Loading

fionataeyang commented May 19, 2020 • edited Loading

@issue

D3.js demo

serapath commented May 20, 2020 • edited Loading

serapath commented Jan 10, 2020 •

edited

Loading

`@todo`

fionataeyang commented Mar 9, 2020 •

edited

Loading

fionataeyang commented Mar 9, 2020 •

edited

Loading

fionataeyang commented Mar 10, 2020 •

edited

Loading

ninabreznik commented Apr 8, 2020 •

edited by serapath

Loading

serapath commented Apr 15, 2020 •

edited

Loading

`@todo`

EXAMPLE - `DATDOT Desktop.install`

serapath commented May 9, 2020 •

edited

Loading

fionataeyang commented May 16, 2020 •

edited

Loading

`@issue`

ninabreznik commented May 16, 2020 •

edited

Loading

ninabreznik commented May 16, 2020 •

edited

Loading

fionataeyang commented May 19, 2020 •

edited

Loading

fionataeyang commented May 19, 2020 •

edited

Loading

fionataeyang commented May 19, 2020 •

edited

Loading

serapath commented May 20, 2020 •

edited

Loading