RFC: Visual Design #2
Comments
|
Only thought would be PWM is too dark colored in Dark Mode so it blends in a bit (GND is GND though so not much you can do there). It looks awesome otherwise! |
|
Looking good, like the icons! |
Great minds, I have an updated local copy that does just this and it works well! Colours are something I might have to work on 😬 3v3 and 5v are supposed to be yellow and red respectively! (And on my WIP the 5v icon has changed to further avoid…. Incidents) |
|
I’m fond of this palette - https://lospec.com/palette-list/12-bit-rainbow |
|
This is the current very sorry state of things as of 1:30am last night (or this morning, I suppose) 🫠 
I like the way things are going, but it's still very, very rough and missing some features. I will probably drop the colour borders on the outside edge of the pinout, they serve no real purpose other than looking pretty and make it difficult to move the pinout away from the very top/left edges of the layout. It's so condensed compared to the original Pinout.xyz that it should be given room to "breathe." I don't like the borders either, I'll probably pick an alternate background colour for the main content section - or pinout - so things are nice solid, clean blocks. |
|
Better, I think? 
|
|
Looking good! I feel the function labels on the left hand side are a bit far away though. How do you feel about right aligning them and swapping the icon to the right hand side? |
You’re not the first to ask, and my sensibilities would tend to agree- but I have some inkling that left-alignment constitutes an accessibility accommodation. I should probably look into whether it does! |
|
I agree with the function label comment from @MichaelBell above, it'd be nice if they were closer to the pin numbers so they were easier to read. I've been working with the Pi Pico recently, and the official pinout for that has some good ideas: https://www.raspberrypi.com/documentation/microcontrollers/raspberry-pi-pico.html For instance, the peripheral blocks are grouped together and the pin name text has the peripheral colour as the background colour. Graphically, they're lozenges which give the eye something to follow. |
|
I leaned heavily into that classic style for my interactive Pico Pinout - https://pico.pinout.xyz/ It’s quite a significant leap from the existing Pinout.xyz style, however, so I’m looking at giving the current layout a visual overhaul without upsetting frequent existing users too much 🤣 I’m also pretty sure that colour for encoding information, and colour for backgrounds are two common non-accessible pitfalls that “looks pretty and works for me” graphic design trends fall into. I’m trying hard to avoid these same traps, which might mean some compromises. The Pico Pinout solves this- at least somewhat- by allowing the user to show/hide interfaces and hone in on the ones relevant to them. I’m definitely interested in bringing something similar to the Pi pinouts, but one step at a time 🤣 I wonder if the classic alternating, light/dark, background colours of yore and old might help here. They’re a classic trope for tables and spreadsheets for the very “guide your eyes” reasons you note. Edit: I should acknowledge that these are very valid and welcome points, thank you. If I'm having to explain a design choice and it's not self-evident, it might not be a good choice. |
|
I wish this hadn't come with a painful relayout of the HTML table using CSS grids to fix a very small issue with the borders... but: 
|
|
Looks good. More clean and modern. I like the glyphs for the different pin features. |
|
IMHO one of the "killer features" of the original Pinout.xyz was the way that it also showed the board-PCB (with rounded corners and mounting holes) which made it super-easy to match up the orientation of the Pi in front of you with the orientation displayed on the website. IMHO it would be a shame to lose that feature - perhaps it could be hidden behind a tick-to-enable checkbox? Oh, although having just had a fresh look at https://pinout.xyz/ perhaps I'm just remembering how an older version of the pinout website worked! 🤣 🤦♂️ |
That was dropped around August 2020 in our march away from skeuomorphism 😆 and a board image showing positioning for A+, Zero and B+ was added, along with a Legend. Before: https://web.archive.org/web/20200806102711/https://pinout.xyz/ Fun fact, the first version - December 2015 - to ever live on pinout.xyz did not have the mounting holes - https://web.archive.org/web/20151211090104/http://pinout.xyz/ But it did have a 26/40 pin header dual view for those transitioning from old to new Pi's. I plan to reintroduce a 26-pin pinout, since it should just generate all but automatically from the board json files. And for a super throwback- I kinda like this OG design - here's the May 2013 snapshot of Pinout back when it was just a subfolder on a subdomain for my little Pi blog 😆 https://web.archive.org/web/20130505194305/pi.gadgetoid.com/pinout There was also a Pinout with fly-out menus for boards and interfaces 😆 https://web.archive.org/web/20160223043914/http://pinout.xyz/ And final fun fact. This will be the first major design overhaul of Pinout since the change that dropped the mounting holes!! That's almost four years. |
|
Going back to the topic of this issue: does it make sense to have the 3.3V and 5V pins a different colour? EDIT: Also, it looks like you forgot to add the clock icon to the legend. |
I actually was quite fond of the rainbow borders that matched the pins but maybe that's just me 😅 |
They live on in the mouseover effect, but yeah... I'm very partial to rainbows all over the place, but I couldn't make it work. Maybe I can sneak them back in mobile view 😆 |
Light mode:
Dark mode:
No CSS:
Why does it look like this?
If you fancy arting up a better set of icons we can use as plain svg or a font...
The text was updated successfully, but these errors were encountered: