Team list sidebar - UI design & JSON

UI Design

I had mocked up the sidebar in the wireframe and coded it in the app but wanted it to look a bit more polished. So take this piece of work to be mainly about UI design, my design thought processes and implementing the said design in code.

I always have my eye out looking for design inspiration, particularly when watching Match of the Day as they always have nice eye-catching graphics and I spotted this graphic they used to display a team with subs list down the side.

It was perfect for what I was after so thought I'd use it as inspiration for my own app.

JSON

A side note here, I had noticed that all similar team picker apps just list the player surname and not their full name. I think I will do something similar with my app. The question is, is do I change the JSON file so the forename and surname are in separate elements or manipulate the variable string containing the player name, using JavaScript, to extract the surname?

The latter can be done but will probably be a bit fiddly. Also, with expanding the app to be used by any other football team in the future, it may be prudent to split the forename and surname into their own variables, rather than in a single variable as is currently the case.

A further consideration is, if I am to roll the app out for other teams, I plan to pull the player squad lists from an API and the JSON format needs to be the same as mine. I need to do some investigation into this and pull some data down from a suitable API to check the JSON format and if I can customise it to my needs.

I will make an issue/task reminder in the Github repo I have created for the app so I won't forget to do this! I only found out recently that you can add "issues" on Github and I've put the word in quotes as I'm not really using it for issues with the app, more as a feature to-do list, but:

What-eva, I'll do what I want!

This is how my JSON is currently formatted:

And this is the JS function I wrote to render the players onto the pitch from the JSON file as the data source:

As you can see from the code, I have the player's full name data in a single variable, it will probably be best to change course and change the JSON file and to add an additional pair for the surname. And then change the JS code to reflect this change. But CBA for now and I'll just delete the first name in the JSON file and come back to this later when I get to the stage of making other teams available in the app. I have this feature logged in Github anyway, so we move on for now.

And here it is

And here we have the final design and fully coded, I'm pretty pleased with the way it has come out. NB - A nice little side effect of ~ripping off~ using the BBC team picker using for inspiration, is that their UI elements were tight and concise, my had too much white space, which is at a premium when trying to list lots of players. So I decided to put the 'club' and 'formation' drop down menus sidebyside which I did using CSS grid's wondery. Anway, enough waffle that no-one will read, here's the screen shot 🤓