Proposal for QMK Configurator redesign #920
Comments
|
I like what I'm seeing so far. I'll let @jackhumbert and @noroadsleft weigh in with their own feedback. Thanks for contributing, design work is difficult, yet rewarding when done well, so I appreciate the effort. We've long wanted to redesign the layer control to support reordering and copying, so this is a good first step. |
I didn't even think of that, very good idea. Hopefully I'll have learned enough by the end of this ordeal to code that myself. For now though I know nothing about Vue or JS so I'm going to start with just tidying things up, rearranging things and changing colors. |
|
Similar to what I wrote on Discord about dimming the Upload JSON button once it's been used and highlighting the Compile button, I think something similar should happen here once the compile job completes. I'm thinking highlight the Download button here (which IMO should say |
|
Love what I'm seeing so far. One thing to keep in mind is that we'll want a light mode too for better accessibility. |
What the hell is a light mode |
It's in the settings menu. The UI autodetects your OS settings and selects dark mode if that's what you have set. Otherwise it defaults to light mode. |
Bless your heart |
|
This redesign looks good. If you need help implementing this I am willing to help @yanfali I saw issues and I will try to implement reordering and cloning layers as a separate PR |
|
@mateossh Oh man I am definitely in need of some help here, at the very least navigating this avalanche so I'm very grateful for the offer. I know my way around HTML and CSS but this is a whole different universe. If you're down for it we could work together to figure out where to start and do it piece by piece. I'm hoping we can eventually finish the whole redesign and make it one big pull request |
|
My preference is you work in a branch and either make small merges or track
the main branch and merge your changes into there.
I'm in the process of upgrading to vue3 which should provide some other
benefits longer term.
Yan
…On Mon, May 10, 2021, 01:52 NAX LAB ***@***.***> wrote:
@mateossh <https://github.com/mateossh> Oh man I am definitely in need of
some help here, at the very least navigating this avalanche so I'm very
grateful for the offer. I know my way around HTML and CSS but this is a
whole different universe. If you're down for it we could work together to
figure out where to start and do it piece by piece. I'm hoping we can
eventually finish the whole redesign and make it one big pull request
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#920 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AARLSU6XWQ7ECFJSX4QOBSLTM6NFHANCNFSM44OGNOOA>
.
|
For the love of everything that is good in the world... DO NOT DO THIS. Small, isolated changes are much easier to review and test than major overhauls. |
|
@noroadsleft I suspected that was the case, but I wasn't sure what would be more hassle for you guys |
One big PR runs the risk of it never getting reviewed in the first place. Simple manageable chunks are more likely to get merged. |
|
@NAXLAB I would love to help the implementation. Is the work being tracked some place where I can jump in? |
At the moment we have not really started because I have so much other stuff on my plate, but soon I hope to at least make a fork and start experimenting with rearranging buttons and stuff to at least get it close to the concept. When that happens I'll take all the help I can get tbh cuz I am a designer but I'm no coder. @mateossh also offered to help, so once I set up something we can all collaborate on I'll let you both know. |
I'm about to have more free time. Want to link up and start figuring out what to do first lol |
Vue3 update is on hold while I wait for some plugins to make the jump. |
I'm kind of working on something in a branch. Some refactoring going on too. https://github.com/qmk/qmk_configurator/tree/yanfali-layers |
The QMK Configurator needs a refresh:
The Configurator is a powerful tool for quickly and efficiently getting your build loaded up with firmware or modifying existing firmware. Its target audience is generally new users, or anyone who doesn't want to deal with setting things up and importing and learning code. Because of this, simplicity and accessibility should be priorities. New users, myself included, are more than likely to get stuck not seeing the compile function, then show up in discord looking for help because they don't know why the download button is greyed out. The configurator is in need of a UI refresh to become more accessible, efficient, and pleasing to use.
Here is what I propose:
I have designed a mockup for a new version of the configurator that achieves the following goals:
Update the layout to improve accessibility and clarity, and to make everything fit on the screen so you don't have to scroll all the time.
Update visuals and aesthetics to make workflow easier. Good UI design will guide the viewer in the right direction to make the experience intuitive.
Establish a consistent but flexible visual identity for QMK. Making the identity recognizable will attract more people to the community.
Keep things simple and effortless. Configurator should be quick to use if you need it to be, while still offering the same powerful functionality in a user friendly format.
Combine related UI elements such as the compile and download buttons to reduce clutter and avoid confusion.
Display a high fidelity 3d simulation of a potato drifting across the cosmos. I'm not kidding.
Full screen mockup and notable details
Keyboard selector and viewer
The selector and viewer now have their own box with other directly relevant features so new users can see the connection easily and figure out how to select a keyboard and layout. It's all in the top right so it's what new users will notice first. It also has extra room left in for longer layouts. I just used a GK64 Layout because it is scientifically the most superior keyboard.
Layer Selector
The layers panel is cleaned up to be easier on the eyes, and rests next to the layout view. It gets its own box to show that its not part of the layout view, rather a separate interaction that controls the layout view.
File management
Most of the buttons formerly scattered around the site arbitrarily have been reorganized to show users the order of operations. At the top left, the upload .JSON (and URL import) button is highlighted blue to show users where to start. Next, there might be a readme to check, or some troubleshooting to be done, or there might be some need to read the JSON data from the layout you selected, so there's a button to view the JSON contents in-browser, and a console that can be revealed upon request.
Next, you can compile and download the source code or hex file. They are built into their own window that open when the user presses the "Compile/download Firmware" so users can understand the process visually. If needed, there's also a helpful link to download toolbox.
Keycode picker
As far as I saw, the keycode picker was pretty good already, so I just changed it to match the visuals of the rest of the design.
What do you think?
This design will probably change quite a bit as things go on, but this should reflect the overall aesthetic. If you have any questions of recommendations, you can message me on discord:
N A X#1454The text was updated successfully, but these errors were encountered: