Updating the visual style of the Coppermind

[Firesong she/her]

Something I came to notice about the Coppermind is the fact that it is rather minimalist in design, and I feel there are a few small changes that can make it appear much sleeker and better looking, that I wish to suggest to staff, these are changes that I feel could be easily done by simply changing a few values in templates, rather than being more fundamental to the wiki:

1. I always had some issues with the appearance of quotes, which only look separate from the rest of the text in the formatting, but ultimately look too much like everything else. I feel a way to improve it could be to like, make the quote box have a grey background with like, black borders. To make the box far more distinguished from the rest of the page. I feel that would not only make it distinguished, but ultimately improve the visuals of our pages. As it just looks somewhat bad with how minimalist it currently is. 
2. I feel it would be helpful to change the colour of infoboxes slightly. If you look at things such as Wikipedia or the One Piece Wiki or other things, you would be able to notice that the infobox colouration is noticeably different from the rest of the page in a way that makes it stick out. Look at this page for instance, https://en.wikipedia.org/wiki/Earth, I feel it would greatly improve the visuals of the wiki if we did the same thing with our infoboxes. Like, to the colour of the padding around images, or the contents section.
3. I feel it would be an improvement if, instead of there just being a blank space between elements/rows of an infobox, which looks somewhat sloppy and mild anxiety-inducing as it is it is just a very visible disruption to the background colour of the element-title portion of the row,. We can instead make it so that there is a grey line which stretches over the horizontal extent of the box, which both solves the issue, and makes a rather good looking (in my opinion) line of demarcation between the rows in general. I am thinking of it looking a bit like the lines between expressions on the Desmos Graphing Calculator. 

I hope you consider these changes, as I feel they would be very helpful in improving the visual design of the wiki. 

Edited August 21, 2023 by Firesong

[Chaos he/him]

Hi, design changes are... quite a long process, and there are things we want to do. I'll put these on the list. A responsive design skin like Pivot seems ideal, which you can enable in settings that have some different things, in particular quotes I like a lot better.

There is no ETA to this stuff; I feel like we don't have a lot of bandwidth, so in no way can I promise anything any time soon. I'll be honest, 2023 is "survive Secret Project" year.

[Firesong she/her]

8 minutes ago, Chaos said:

Hi, design changes are... quite a long process, and there are things we want to do. I'll put these on the list. A responsive design skin like Pivot seems ideal, which you can enable in settings that have some different things, in particular quotes I like a lot better.

There is no ETA to this stuff; I feel like we don't have a lot of bandwidth, so in no way can I promise anything any time soon. I'll be honest, 2023 is "survive Secret Project" year.

Understandable, I get that they can take a while. That is why I suggested some of the simpler ones, which would mostly deal with changing templates. Instead of things that changed fundamental structure of the wiki. And yeah, there is a lot that we have to deal with this year due to the five entire novels (SPs and Defiant). So I understand if that pushes it off. 

But hope that these smaller changes can be implemented in a reasonable timeframe (as in just, not take years, mostly). As I feel that a few smaller-scale (relatively) changes would make quite an improvement overall. 

Thanks for your response! 

[Chaos he/him]

26 minutes ago, Firesong said:

Understandable, I get that they can take a while. That is why I suggested some of the simpler ones, which would mostly deal with changing templates. Instead of things that changed fundamental structure of the wiki. And yeah, there is a lot that we have to deal with this year due to the five entire novels (SPs and Defiant). So I understand if that pushes it off. 

But hope that these smaller changes can be implemented in a reasonable timeframe (as in just, not take years, mostly). As I feel that a few smaller-scale (relatively) changes would make quite an improvement overall. 

Thanks for your response! 

I appreciate that, but do realize design changes are not likely to be taken lightly. Also, frankly, I disagree with some of your comments, but not all; I think the lines on infoboxes would look very busy. Wikipedia doesn't do that either. These are definitely things to trial and see.

[Starwatcher]

2 hours ago, Firesong said:

Understandable, I get that they can take a while. That is why I suggested some of the simpler ones, which would mostly deal with changing templates. Instead of things that changed fundamental structure of the wiki. And yeah, there is a lot that we have to deal with this year due to the five entire novels (SPs and Defiant). So I understand if that pushes it off. 

But hope that these smaller changes can be implemented in a reasonable timeframe (as in just, not take years, mostly). As I feel that a few smaller-scale (relatively) changes would make quite an improvement overall. 

Thanks for your response! 

To maybe bring a little bit more clarity, the part of a design change (or any big change, really) that requires the most work and bandwidth from staff is by far all of the discussion about an idea, and further suggestions, and responding to feedback, and generally getting to a place where we feel good about a change, not the technical work to make it actually happen. As a somewhat extreme example, there are comments about how we wanted to replace our old logo at least as far back as 2012; that didn't actually happen until 2021 and when it finally got developed we had 11 different options just for the exact colors of the version of the logo used for the Coppermind Discord server to vote on (and that was after the broader 17S staff had already been working with the designer for some time!).

[Firesong she/her]

19 hours ago, Chaos said:

I appreciate that, but do realize design changes are not likely to be taken lightly. Also, frankly, I disagree with some of your comments, but not all; I think the lines on infoboxes would look very busy. Wikipedia doesn't do that either. These are definitely things to trial and see.

I actually do have one update on your objection. Can we at least do it in the title portion of the elements (the coloured part), as it just looks really bad for them to be blue like that, but be separated by a "line" that is just the background. Makes them look more like things slapped on then an actual part of the box due to that. Same with the background visible at the left side of the boxes. I have a big problem with it. I am fine if it isn't done for the horizontal extent, I see your point there, but I will continue to stand firm on finding a way to get rid of the gaps as a manner of separating element titles.

And a suggestion to add to infoboxes, I feel it would be good to add elements for the planet size and gravity. As that is something communicated in the text itself, and it feels logical to include it. 

 

https://coppermind.net/wiki/User:Firesong/PlanetTempUpdateIdea

 

Template update concept on a user page. We could use the values for that, as well, as we can find the exact values as we know what the Cosmere standard is. 

Edited August 22, 2023 by Firesong

[Treamayne]

2 hours ago, Firesong said:

 Makes them look more like things slapped on then an actual part of the box due to that. Same with the background visible at the left side of the boxes. I have a big problem with it.

Can you please clarify? I'm having a hard time understanding exactly what it is that is bothering you. I don't see a significant difference between your link and the normal infobox. Please see attached:

Spoiler

Mayby edit the attached image or screenshot how you think it should look?

Comparing the other wiki, they seem to use just bold font to seprate row names from content with no background color (assuming that was the item with which you disagree).

Edited August 22, 2023 by Treamayne
SPAG

[Firesong she/her]

6 minutes ago, Treamayne said:

Can you please clarify? I'm having a hard time understanding exactly what it is that is bothering you. I don;t see a significant difference between you link and the normal infobox. Please see attached:

  Hide contents

Mayby edit the attched image or screenshot how you think it should look?

Comparing the other wiki, they seem to use just bold font to seprate row names from content with no background color (assuming that was the item with which you disagree).

The background part is completely irrelevant to the link. The link was about adding size and gravity to the infobox, which I mentioned right before the link, and talked about in the text under the link. I have no clue how to do more fundamental changes to it such as the annoying background between elements. 

What I mean is that I think there should be a grey line or something between the blue part of the elements. It would look nicer and more sleek as it would make them look less like boxes randomly slapped onto a background. Because you can see the background between them and it looks dreadful. I have actually been wanting to bring this up for a while. 

And I don't feel comfortable sending edited images as I am extremely paranoid about being tracked (yes, I do have a disorder, but lets not get into that), and don't want to risk any trackable metadata entering a image when I edit it. 

Edited August 22, 2023 by Firesong

[Treamayne]

18 minutes ago, Firesong said:

The background part is completely irrelevant to the link. The link was about adding size and gravity to the infobox. I have no clue how to do more fundamental changes to it such as the annoying background between elements. 

My apologies. Then, do you mean something like this?

Spoiler

 

[Firesong she/her]

5 minutes ago, Treamayne said:

My apologies. Then, do you mean something like this?

  Hide contents

 

Not at all, I mean having the blue parts, but having an actually separator between them that isn't just the background of the infobox, as I said, something like a grey line. I don't want it looking more like wikipedia infoboxes, as that is one of the worst parts of wikipedia's visual design.  The different colour from the rest of the wiki part works, but everything else about their infoboxes is quite bad. 

It can be hard to communicate things like this without images, but easy communication of this isn't worth doxxing myself. The tradeoff isn't worth it.

Edited August 22, 2023 by Firesong

[Treamayne]

11 minutes ago, Firesong said:

Not at all, I mean having the blue parts, but having an actually separator between them that isn't just the background of the infobox, as I said, something like a grey line. I don't want it looking more like wikipedia infoboxes, as that is one of the worst parts of wikipedia's visual design.  The different colour from the rest of the wiki part works, but everything else about their infoboxes is quite bad. 

My apologies.

I will say, however, that I strongly disagree. Adding lines would be much more difficult to read and parse (except, maybe, if they were very very faint), unless it's the heading/sub style such as is used on taxonomy pages as a color bar with alternate font color just sets off each H1, H2, H3, etc.

Edited August 22, 2023 by Treamayne
SPAG

[Firesong she/her]

8 minutes ago, Treamayne said:

My apologies.

I will say, however, that I strongly disagree. Adding lines would be much more difficult to read and parse (except, maybe, if they were very very faint), unless it's the heading/sub style such as is used on taxonomy pages and a color bar with alternate font color just sets off each H1, H2, H3, etc.

I am not exactly sure how it would effect readability in the slightest, I don't see how it would increase or decrease it by even an infinitesimal degree. Can you explain why you think it would decrease readability to sightly darken the idea around the coloured padding? I am not trying to be judgmental, I am just genuinely extremely confused. My suggestion is actively due to the fact it would not effect readability at all. It would be purely aesthetic. I don't get how seeing the background magically improves readability over the gap (which is relatively far from the text) being a little darker and thinner. 

And yes, I do mean faint and thin. It would be thinner than the current borders. In how I envision it. 

PS: No need to be sorry, I apologize if I am coming across aggressively, I'm not angry at all right now. Just anxious.

Edited August 22, 2023 by Firesong

[Treamayne]

37 minutes ago, Firesong said:

I am not exactly sure how it would effect readability in the slightest, I don't see how it would increase or decrease it by even an infinitesimal degree. Can you explain why you think it would decrease readability to sightly darken the idea around the coloured padding? I am not trying to be judgmental, I am just genuinely extremely confused. My suggestion is actively due to the fact it would not effect readability at all. It would be purely aesthetic. I don't get how seeing the background magically improves readability over the gap (which is relatively far from the text) being a little darker and thinner. 

And yes, I do mean faint and thin. It would be thinner than the current borders. In how I envision it. 

PS: No need to be sorry, I apologize if I am coming across aggressively, I'm not angry at all right now. Just anxious.

Maybe I'm not envisioning what you mean then. In my experience with layout and design there are four primary basic methods for formatting small tables (of course the options can spin out  of control - I only meant the basic protoypes - please see attached examples):

• A: Borders for everything - this is generally the most difficult to parse on the large scale as different users will have widely varying experience (UX) based on device, browser, settings, etc. (platforms).The lines will tend to crowd the text as scale changes unless you so heavily pad the separations that you nearly double your used space
• B: No lines - This is generally the most intuitive and scales best on differing platforms, but is dependant upon how much data is being conveyed and can feel crowded with multiple rows all being multi-line
• C: Cycled background shading - this tends to have most of the benefits of B, but handles the multi-line rows better, with the possible expense that if the differening shades are not distinct enough, you lose the benefit with differing platforms
• D: Faint Horizontal Ruled - this can gain the benefit of single background color throughout, while still separting data, but has many of the problems associated with "A" - if you don't pad the HR properly, it can be lost in the text on some platforms and if you don't differ the shade enough, it can also be lost through color homogenization on some platforms.

Spoiler

Does that help? Are any of those examples similar to what you were envisioning?

Edited August 22, 2023 by Treamayne
SPAG

[Firesong she/her]

Just now, Treamayne said:

Maybe I'm not envisioning what you mean then. In my experience with layout and design there are four primary basic methods for formatting small tables (of course the options can spin out  of control - I only meant the basic protoypes - please see attached examples):

• A: Borders for everything - this is generally the most difficult to parse on the large scale as different users will have widely varying experience (UX) based on device, browser, settings, etc. (platforms).The lines will tend to crowd the text as scale changes unless you so heavily pad the separations that you nearly double your used space
• B: No lines - This is generally the most intuitive and scales best on differing platforms, but is dependant upon how much data is being conveyed and can feel crowded with multiple rows all being multi-line
• C: Cycled background shading - this tends to have most of the benefits of B, but handles the multi-line rows better, with the possible expense that if the differening shades are not distinct enough, you lose the benefit with differing platforms
• D: Faint Horizontal Ruled - this can gain the benefit of single background color throughout, while still separting data, but has nmany of the problems associated with "A" - if you don't pad the HR properly, it can be lost in the text on some platforms and if you don;t differ the shade enough, it can also be lost through color homogenization on some platforms.

  Hide contents

Does that help? Are any of those examples similar to what you were envisioning?

My first suggestion was like 1. But afterwards shifted it to be like that, but without the lines crossing the full horizontal extent, and to not separate individual entries in one element like that, I am fine with them as they are. That or 4 with the same modification. And also add in the padding colour used on Coppermind. 

 

1, 2

3, 4 

is how I am referring to them. 

[Treamayne]

2 minutes ago, Firesong said:

is how I am referring to them.

Copy that - but I did label them A, B, C, D for that purpose. . .

Granted those were just a quick example mocked up in Excel.

Edited August 22, 2023 by Treamayne

[Firesong she/her]

Just now, Treamayne said:

Copy that - but I did label them A, B, C, D for that purpose. . .

Oh, I wasn't paying attention to that, my bad. Mind blanked on that. 

[Chaos he/him]

4 hours ago, Firesong said:

I actually do have one update on your objection. Can we at least do it in the title portion of the elements (the coloured part), as it just looks really bad for them to be blue like that, but be separated by a "line" that is just the background.

Pivot has this change. You can go use it now if it bothers you (which is fair). I think you'll like that.