Design mockups

[Oliver-Akins]

Old Colour Palette: https://coolors.co/0466c8-0353a4-023e7d-002855-001845-001233-33415c-5c677d-7d8597-979dac

Interactive Design Protoype Here Note: This is not functioning (things like the cards won't change when discarding, etc.), this is merely just a way of switching between the views when the corresponding buttons are pressed, it does not contain any either.

[Ramenhotep]

Generally looks great! Spring is getting you some assets. I have 2 main comments:

• Please call the Ghosts/Spectres "Spirit"
• I'm a bit concerned about how the past questions are displayed for 3 reasons:

1. They're visually very similar to the answers, and can be confused with the answers at a glance
2. They look like they line up with the answers, but because of guesses, this often won't actually be the case
3. Their presence makes the game board look very unlike what it will in real life

What do you think about having them temporarily replace the opponents' answers when toggled? With a slightly different treatment, like darker blue on the lighter blue background or something? And potentially on slightly larger bubbles so they don't line up 1:1 with the answers?

[Oliver-Akins]

• Please call the Ghosts/Spectres "Spirit"

Will do, that's a super easy change.

1. They're visually very similar to the answers, and can be confused with the answers at a glance

We can work something out to make this better.

2. They look like they line up with the answers, but because of guesses, this often won't actually be the case

Yeah, they are lined up exactly, this was the key ease of design and cleanliness of the site.

3. Their presence makes the game board look very unlike what it will in real life

Yeah, I was thinking of this while designing and just thought I'd try it to see how it flows as a webpage, because when I was looking at it the way I had it initially it just didn't feel quite right. (The way I had it initially was both team's answers in the top row right hand side of the site, and the past answers in the smaller top row left hand side of the site, which was definitely more in-line with how the board was layed out, but there felt like such a disconnect between answer and question.) But yeah, I knew it was a bit of a different approach when I tried it and that it may not work, that's just the reasoning behind my thoughts when I did it.

What do you think about having them temporarily replace the opponents' answers when toggled? With a slightly different treatment, like darker blue on the lighter blue background or something? And potentially on slightly larger bubbles so they don't line up 1:1 with the answers?

This could definitely work, so what you're imagining is instead of having two boxes in the upper row, it would just be the one box with the sun/moon answers in it, and the questions would replace the other team's answers in favour of differently styled boxes for the questions? The one thing I'm thinking with this solution is it would either end up pushing one team's answers over when it shown if we're always putting it on one side of the answers (with the teams being the same order on both parties screen), or it could result in the questions being put on the right side of the answers for one team, or we could keep the questions on one side of the answers with the team sides switching.

[springtime197]

SVG files for the moon, sun, and eye icons here ghost_writer_icons.zip

[Oliver-Akins]

Perfect, thank you very much Spring.

[Ramenhotep]

Yes, that's what I'm imagining.

Basically, my thought here is to make it so the players can't keep their questions up all the time. They'll have to toggle them off in order to see the other team's answers. Even without changing the style of the question list, this should help clarify when you're seeing the questions and when you're seeing the opponents' answers. (Although making the question height a little taller than the answer height, and maybe giving them sharp corners could help to differentiate and make the answers and questions not line up)

[Oliver-Akins]

Okay, cool. I'll put together a couple different options when I'm next working on them and we can go from there.

[springtime197]

Here's a lil color scheme thing that I think will give some more contrast for reading + make the "game pieces" feel more like the physical components. Ofc can be changed.

Using this palette: https://coolors.co/4a5081-24356e-000f3d-e1d098-ece3bb-aca885 (#000F3D used for the text on light colored backgrounds, #ECE3BB used for text on dark colored backgrounds)

[Oliver-Akins]

@Ramenhotep - I've updated the interactive demo with the feedback you gave and the colour scheme + icons that Spring sent over, if you can take a look tomorrow (Thursday) and let me know what you think.

I opted to try a toggle like you suggested, but instead of just having it use the same colour scheme as the answers, I tried inverting the two colours so the darker one is on top of the lighter instead of vice-versa, this should make it extraordinarily obvious when the questions are visible instead of the other team's answers.

[Ramenhotep]

Revision looks great. I love the toggle. My only remaining comment is to try to find a way that the questions don't appear to line up with the answers

[springtime197]

I think it looks pretty good! The only tiny edit, which you probably weren't focusing on, would be to change the game setup screens to have the same light yellow font color as your "Made By" line :)

[Oliver-Akins]

@Ramenhotep -> Sounds good, I'll fiddle around and see if I can get anything decent for that.

@springtime197 -> Oh right! Thank you for catching that! I missed those screens. >_<

[Oliver-Akins]

I've adjusted the prototype from the inline method to a 2 by 4 grid for the questions as can seen below.

For this grid, I can either assign questions to a slot in order, or I can randomize the question order when the view is opened (but keeping them within the same boxes, just the order would be shuffled, not positions that are filled with questions). I personally think just keeping them in the order in the boxes they are played would be best (and easiest to implement), but I'll leave that up to discussion as both options are quite easy.

[Ramenhotep]

I think this solution looks great. Ordered cards is perfect. That way you can match them up yourself, but it doesn't look like they correspond

[Oliver-Akins]

Perfect, in this case, I'll start working on the actual code since it seems we've finalized the web designs.

[Oliver-Akins]

@springtime197 -> Do you have a sort of icon for the game that can be used as the site favicon? (in the .ico format)

If not that's fine, it will just appear as a local file would in the browser tab, which doesn't affect anything except making it a tad nicer if someone has a lot of browser tabs open at the same time.

[springtime197]

Lmk if this works

(github doesnt like .ico files which is why its a zip) moon_blue.zip

[Oliver-Akins]

That works excellently. Thanks!

[Oliver-Akins]

Note: There are some minor design changes relating to the first few screens just because doing it exactly as the designs in figma lead to it feeling very large and clunky in the site, everything is following the same general design, but the scale of the UI elements has been adjusted to make it feel better. If you want the sizing to be exactly to the designs, I can change it easily once you use the site. The main game page with the board, hands, and all of that stuff, will remain how it is in the design, it is purely just the Create/Join game and the Lobby screens that are having the size adjustments made to them.

[Oliver-Akins]

@Ramenhotep -> I've modified the game board design slightly taking it from the stacked eyes to be a single symbol and a numerical value if the number of eyes on that spot is > 1, this is the more ideal way of doing it as the positioning of the eyes with the stacking just lead to them looking like a giant blob of random lines.

---

The numbers it pulls for the amount of eyes is easily configurable in this file at these two regions (I'll be making a better how-to-configure once I've gotten the config data and format closer to finalized) https://github.com/Oliver-Akins/Ghost-Writer-Online/blob/dev/web/src/store/index.js#L11-L16 https://github.com/Oliver-Akins/Ghost-Writer-Online/blob/dev/web/src/store/index.js#L21-L26

[Ramenhotep]

Looks good to me, although now I am convinced that it's either going to be 0, 1, or 2 eyes. Never more

[Oliver-Akins]

Okay, I'll probably leave it how it is in that screenshot though as even with only 2 eyes it was a mess to look at.