# My thoughts for a GUI 1.0 | looking for a frontend developer :)
**URL:** https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002
**Category:** UX
**Created:** [June 10, 2015, 1:53pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002 "2015-06-10T13:53:59Z")
**Posts on this page:** 20
**Page:** 3
### Author:  [@canton7](https://forum.syncthing.net/u/canton7)
#### Post date: [July 6, 2015, 11:28am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/42 "2015-07-06T11:28:45Z")
Also, how does it scale to small screens? Will it work on my phone?
---
### Author:  [@sgilani](https://forum.syncthing.net/u/sgilani)
#### Post date: [July 6, 2015, 11:43am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/43 "2015-07-06T11:43:48Z")
Hi Eddy2909,
i would like to see, that you get in touch with one of my bootstrap GUI developers to change the GUI, but please at first prepare also some design for Bootstrap XS SM MD LG (LG you had already) đ
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 11:45am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/44 "2015-07-06T11:45:30Z")
sure - it should!
---
### Author:  [@canton7](https://forum.syncthing.net/u/canton7)
#### Post date: [July 6, 2015, 11:46am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/45 "2015-07-06T11:46:28Z")
> [@Eddy2909](#):
>
> sure - it should!
What will that look like?
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 12:05pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/46 "2015-07-06T12:05:43Z")
give me some days đ
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 12:14pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/47 "2015-07-06T12:14:10Z")
> [@canton7](#):
>
> I donât like the drop-downs for adding new folders/devices. Since there are only 2 options available, why not have 2 buttons?
there are no dropdowns for adding devices & folders
> [@canton7](#):
>
> The network graph takes up a huge area of the screen, by comparison with everything else
yes but its beautiful đ
> [@canton7](#):
>
> The âAction -\> copy to clipboardâ on the Device ID seems a bit pointless. Why not just have a button to copy straight to clipboard?
this would be probably to long on little devices
> [@canton7](#):
>
> The Reused/Copied from original/Downloading/etc colours on the âSync-Detailsâ page are too similar. People with forms of color blindness especially are going to hate you here, but as a color-seeing person I have to keep cross-referencing the colors against the key.
agree
> [@canton7](#):
>
> The ârestart needed!â dialog is going to get annoying. Fast. What if you want to change a bunch of settings, then restart once afterwards? Youâre going to have to click âlaterâ a bunch of times, and itâs going to piss you off.
agree
> [@canton7](#):
>
> Why is there a âGUI Authentication Userâ under âFolder-Settingsâ?
good question đ will fix it!
> [@canton7](#):
>
> Some numeric boxes have little \< and \> arrows, but others donât.
tnx
> [@canton7](#):
>
> The icon youâve used for the Syncthing version means âforkâ, not âversionâ
agree - couldnât find the icon syncthing uses.
> [@canton7](#):
>
> The options to shut down / reboot Syncthing are really hidden.
let me think about it⌠đ
> [@canton7](#):
>
> Iâm not a fan of the toggle buttons
ok
---
### Author:  [@canton7](https://forum.syncthing.net/u/canton7)
#### Post date: [July 6, 2015, 2:05pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/48 "2015-07-06T14:05:26Z")
> [@Eddy2909](#):
>
> there are no dropdowns for adding devices & folders
This image:
[https://forum-uploads.syncthingcdn.net/original/2X/b/bc26a3f65a0016bb881e954a92c60c17248a7320.jpg](https://forum-uploads.syncthingcdn.net/original/2X/b/bc26a3f65a0016bb881e954a92c60c17248a7320.jpg)
> [@Eddy2909](#):
>
> this would be probably to long on little devices
Iâm not sure what you mean by that. See for example GitHubâs little âcopy to clipboardâ icon next to every commit it displays.
> [@Eddy2909](#):
>
> agree - couldnât find the icon syncthing uses.
Itâs the `icon-tag` icon here: [Bootstrap Glyphicons](http://marcoceppi.github.io/bootstrap-glyphicons/)
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 3:04pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/49 "2015-07-06T15:04:33Z")
> [@canton7](#):
>
> This image:
I see. youâre right - itâs not clear enough. There would be some combinations possible, that wouldnât make sense: âblacklistâ & âadd deviceâ but by changeing the button text to âokâ, it would make sense and would give following combinations: âwhitelistâ & âokâ âblacklistâ & âokâ âjust addâ & âokâ âlaterâ & âokâ only to give white- and blacklist as options, it would be difficult to explain what it means / the button text would be too long or what do you think? any other ideas on that?
> [@canton7](#):
>
> Iâm not sure what you mean by that. See for example GitHubâs little âcopy to clipboardâ icon next to every commit it displays.
> [@canton7](#):
>
> This image:
I tried not to use hover blobs because smartphones wonât display them.
> [@canton7](#):
>
> Itâs the icon-tag icon here: [Bootstrap Glyphicons](http://marcoceppi.github.io/bootstrap-glyphicons/)
tnx đ
---
### Author:  [@canton7](https://forum.syncthing.net/u/canton7)
#### Post date: [July 6, 2015, 3:07pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/50 "2015-07-06T15:07:32Z")
> [@Eddy2909](#):
>
> I see. youâre right - itâs not clear enough.There would be some combinations possible, that wouldnât make sense:âblacklistâ & "add device"but by changeing the button text to âokâ, it would make sense and would give following combinations:âwhitelistâ & âokââblacklistâ & âokââjust addâ & "ok"only to give white- and blacklist as options, it would be difficult to explain what it means / the button text would be too long or what do you think?any other ideas on that?
I think you misunderstand. I mean have buttons saying âLaterâ, âJust This Folderâ, âWhitelistâ, âBlacklistâ.
> [@Eddy2909](#):
>
> I tried not to use hover blobs because smartphones wonât display them.
This thing!
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 3:23pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/51 "2015-07-06T15:23:05Z")
> [@canton7](#):
>
> I think you misunderstand. I mean have buttons saying âLaterâ, âJust This Folderâ, âWhitelistâ, âBlacklistâ.
Iâll try it with the next update đ
> [@canton7](#):
>
> This thing!
Iâll try this too đ
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 6, 2015, 10:41pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/52 "2015-07-06T22:41:54Z")
all mockups are designed to be coded with bootstrap and a good grid âpolicyâ đbut give me some days⌠Iâll make some responsive mockups.
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 7, 2015, 2:53pm UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/53 "2015-07-07T14:53:20Z")
update 07.07. added S & M Version 0.1
used display sizes: S: 540x960 M: 1024x768 L: 1920x1080
ToDoâs:
- add advanced settings âboxâ (cxl for grandmoms [https://github.com/syncthing/syncthing/issues/1381#issuecomment-119741323](https://github.com/syncthing/syncthing/issues/1381#issuecomment-119741323))
- add copy to clipboard icon (done)
- rethink add folder & add device (done)
- delete all not yet developed features (done)
- rethink restart prompt (& delete white- &b lacklist feature) (cxl not developed)
- change filesync indicator color (done)
- add arrow boxes to numeric fields (done)
- fork \> version icon (done)
- use one(!) icon âframeworkâ for consistency
- add anddroid like identicons to filesync view (cxl [My thoughts for a GUI 1.0 | looking for a frontend developer :)](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/70))
- add colored identicons (done)
- change order devices \>\< folders on small devs (done)
---
### Author:  [@calmh](https://forum.syncthing.net/u/calmh)
#### Post date: [July 8, 2015, 5:11am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/54 "2015-07-08T05:11:11Z")
Iâd actually suggest switching the position of everything across the center:
The reasoning being that the most important stuff should be at the top and left (I know the left-right part is cultural, but still). The most important thing to me is the status of the various folders, then that of devices, then lastly discovery details and resource usage of various kindsâŚ
It still feels a bit cramped to meâŚ
---
### Author:  [@eyeson](https://forum.syncthing.net/u/eyeson)
#### Post date: [July 8, 2015, 6:23am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/55 "2015-07-08T06:23:14Z")
I agree with the cramped - I would prefer a space between the left and right, like there is between top and bottom. I also feel the network graph is too prominent. Just by 2 cents.
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 8, 2015, 8:15am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/56 "2015-07-08T08:15:45Z")
hey guys,
I choosed this layout out of several reasons:
- it should feel a little bit like a âadmin panel / dashoardâ⌠I have not seen any dashboard with a âmenuâ on the left side so far oO (and most of clicks will be on the right side (folderview) / best for the right handers
- the part above shows where you are / the local machine info (for orientation)
- the part below shows what is happening in the network
- the important thing: the part below linkes the folders and devices - thatsâs why I wouldnât add spaces between the âboxesâ
- this part is the only one who could get longer and longer depending on your devices and folder list. If we change the order and you add letâs say 10-15 devices and 20 folders you couldnât see the local info at all đł
- I will rethink the part above - itâs indeed to big.
---
### Author:  [@bigbear2nd](https://forum.syncthing.net/u/bigbear2nd)
#### Post date: [July 8, 2015, 8:23am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/57 "2015-07-08T08:23:09Z")
Please do not throw away the device icons.
It is a very quick way to recognise a device when you are working on serveral different computers.
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 8, 2015, 8:48am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/58 "2015-07-08T08:48:12Z")
Humans may better recognise âwhereâ they are by colors than with formsâŚ
lets test it - try to remember the devices: 
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 8, 2015, 8:49am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/59 "2015-07-08T08:49:52Z")
so now: which icon stands for which device? whithout cheating đ 
a second and a third reason is:
- recognising by colors works unconsciously - you wont need to use your brain đ
- using colors for designs is much easier because I can use the color in any form I need to
---
### Author:  [@bigbear2nd](https://forum.syncthing.net/u/bigbear2nd)
#### Post date: [July 8, 2015, 9:09am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/60 "2015-07-08T09:09:58Z")
For me, these icons look like: The Mask, the Animal and the King. They are calculated by the IDs, so they are on all webinterfaces the same.
I can change the name of the device freely (and I do, âMoms PCâ on my PC has a different name on my girlfriends pc)
If the color can different on all pcs, too⌠Difficult. đ
---
### Author:  [@Eddy2909](https://forum.syncthing.net/u/Eddy2909)
#### Post date: [July 8, 2015, 9:47am UTC](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002/61 "2015-07-08T09:47:55Z")
> [@bigbear2nd](#):
>
> If the color can different on all pcs, too
maybe we could generate a color out of the identicon data - better: we would change identification to colors / rbg or hex data. (@calmh) otherwise you have to setup a color on every device.
[Previous page](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002.md?page=2)
[Next page](https://forum.syncthing.net/t/my-thoughts-for-a-gui-1-0-looking-for-a-frontend-developer/3002.md?page=4)