search

datdotorg / website

website
https://datdot.org
Apache License 2.0
13 stars 2 forks source link

datdot project landing page #2

Open serapath opened 4 years ago

serapath commented 4 years ago

@todo

DIFFERENCE

fionataeyang commented 4 years ago

Update 5.20.2020

Wireframe v8

Update 5.6.2020 Wireframe v7

Update: 4.25.2020 Wireframe v6

Update: 4.14.2020 Wireframev 5

fionataeyang commented 4 years ago

Design soucres

Animated gif

https://www.animatedimages.org/ http://bestanimations.com/ https://www.fg-a.com/ http://www.free-web-animations.com/ https://gifer.com/en/

Images

http://clipartmag.com/ https://www.kindpng.com/ https://www.fg-a.com/ https://www.1001freedownloads.com/ https://teamcfadvance.org/ https://www.pngfuel.com/

Icons

https://findicons.com http://www.iconarchive.com/

fionataeyang commented 4 years ago

Update: 4.8.2020

new Mockups

demo4

Update: 4.1.2020 demo3 Update: 3.18.2020

old Mockups for home

demo2 demo1

ninabreznik commented 4 years ago

Inspiration:

serapath commented 4 years ago

@todo

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

  1. List of all installed Programs
    • Option to Uninstall Programs
    • e.g. Pacman, Coding Game
  2. List of available Installers
    • e.g. Datdot
  3. 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

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 commented 4 years ago

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 commented 4 years ago

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

  1. package manager works how the wireframes currently show it
  2. datdot-org system manager is something we have to decide about
    1. it cannot be uninstalled or removed
    2. it has all the features and information like a normal "package installer"
      • e.g. intro, docs, news, about, support chat, supply tree, ...
    3. 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 commented 4 years ago

@issue

  1. 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. image

  2. Add other package from link image

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. image

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}] image

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 commented 4 years ago
  1. 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.

  1. 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 commented 4 years ago
  1. This is how I feel when click DatDot logo image

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) image

  1. So, I will change the interface of DatDot.org settings. It is a settings for the whole system.
ninabreznik commented 4 years ago

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 commented 4 years ago

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. image

ninabreznik commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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

image

Add new

image

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. image

Demo2

Add multiple address but keep the address length to display image

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. image

fionataeyang commented 4 years ago

@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. image

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 commented 4 years ago

@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,

  1. 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.
  2. 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. image

D3.js demo

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

serapath commented 4 years ago

issue