Better UX

[ai]

Tools is awesome, but look and feel is just prototype. We should do it better:

1. Should we use PostCSS’s red color?
2. Initial @ 0ms, we don’t need time here.
3. We need some arrow to show that plugin links could be expanded. Of course, this arrows should have 2 states for normal and expanded view.
4. Maybe we should draw files as tabs? It will should hierarchy of content (that every file has own expanded links).
5. You should put time to right with different color. It will be much readable.
6. Also we could use different color for time to highlight slowest one.

[andywer]

Help from the community would be cool for this ticket, since redesigning the color palette for example can be done without much technical background.

[andywer]

Check out https://github.com/andywer/postcss-debug/tree/develop :) I addressed a good bunch of the mentioned suggestions.

[ai]

Nice work! Second step:

1. Change a header background. Red logo and blue background has bad contrast. Also, because this header is not useful for user, you could use white background.
2. Highlight file name in file paths in tabs. Paths are long and we should help user with reading.
3. We should group plugin button with its code example. Maybe with some space between plugins.
4. Maybe we should show only diffs with "full content" button.
5. We can remove "took" from time labels.
6. We could change footer background to white, because it is not useful for user too.

[andywer]

Thank you for the quick feedback! Some styling improvements can be done quickly, but I doubt that I will find the time to address all of this in the near future.

So to all visitors of the issues section: If you like what you see feel free to participate!

[ai]

Third step:

1. Make “Debugger” font smaller. It is not main content of the page.
2. Remove borders between header, footer and files section — because this borders is useful for user. He/she already see a separation between sections by space.
3. You could remove “Files” section too, because user will see that it is a files section by file names in tabs.
4. Border-radius in code example is out of style (all other elements has no border-radius)
5. We should show only real difference between files in tabs and hide common folders. For example, if we have /home/ai/dev/project/css/logo/logo.css and /home/ai/dev/project/css/header/header.css, we should show logo/logo.css and header/header.css (maybe in this case we could remove file name highlight)

[ai]

Also our design become better and better and now we have more complicated questions:

How many files user will have? If it will have more than 10 files, it will be hard to display them in tabs. We should go to left-side menu.

[andywer]

Yeah, good points indeed. But since it is still a beta version, I just released the current state of progress as version 0.2.0.

One additional question: 4. border-radius: There is no border-radius on any component...

Cheers

[ai]

@andywer yeap, improving is end-less process :). So we could make release on every step.

Hm, strange, I see a border-radius on screenshot. Maybe it goes from CSS highlight library? Or it is just screenshot artifact? (If you don't see it, we can forget about this point)

[andywer]

Ahh yeah, right. The <pre>'s border-radius comes from bootstrap. Should probably throw the damn dinosaur out of here...

[ai]

+1 to remove Bootstrap. Its CSS is so bad :).

[pgrekovich]

Hi! What do you think about the position of the panel? I think it is better, especially for long files. We can make a horizontal accordion. p.s. Sorry for my eng (:

[andywer]

Hey @pgrekovich! Thanks for sharing your idea. I can clearly see you motivation, but I fear it's only going to work if you only use very few PostCSS plugins.

The application of my current client uses CSS modules and some other PostCSS plugins for convenience features and that sums up to about 9 plugins in total. That would mean 10 snapshots side by side...

[andywer]

Btw: Just a quick note. Removing bootstrap has already been done in #5 by @Gaserd :)

[pgrekovich]

@andywer yeah, you'r right. I still think about it. How else can I help you?

[andywer]

@pgrekovich Documentation is an issue right now (#4). Maybe you have some ideas how to improve it?

[Gaserd]

@andywer See it.

[ai]

@Gaserd I think we should remove plugins from aside. Two plugins panels confuse users.

[andywer]

@Gaserd @ai Agree. The search functionality for the plugins seems a bit too much, too.

But I really like searchable files selector, though :)

[Gaserd]

@ai @andywer ok. Maybe this ?

(?) - link documentation on plugin

[ai]

I like it (links to plugin page is really useful)

[andywer]

Pretty cool! 👍

[ai]

Maybe we should make files bigger? Bigger button — less time to click (by Fitts's law)

[andywer]

Not sure, maybe. We should make the files sidebar and the content area stretch to the whole screen width minus some padding, though. But this is only a detail.

[Gaserd]

Increased "file button" and added flex area on "file list"

I think about hiding area on "file list", then open full window width "plugin files" area. What your think, need that function ?

[ai]

I think we have space to not hide file panel. Simple is better

[Gaserd]

@ai Ok 👍

[Gaserd]

@andywer how we generate link in documentation for plugin ?

[andywer]

@Gaserd I suggest we use this: https://raw.githubusercontent.com/himynameisdave/postcss-plugins/master/plugins.json :)

[ai]

We could provide links to npm — so we will need only plugin name

[ai]

And you can take plugin name from plugin.postcssPlugin

[andywer]

@ai Sure, that's even simpler!

[Gaserd]

@ai @andywer I think about mobile version this page. What your think ?

[ai]

Why not? 😊

It week be useful even in desktop to put debug page in small sidebar near a webpage.

[ai]

But also we can do better graphic design (we fixed only UX). Better fonts, more modern graphic language (material design?).

[Gaserd]

@ai Yeah. I think about this. 👍

[andywer]

Suggestion: I will close this issue for now and we can open a new one for the remaining design part.