ScoreOS is an app that lets you operate and display virtualized scoreboards for various kinds of sports. I designed and partly developed multiple styles of scoreboards and other things for ScoreOS.
My client for this project is Sportable Scoreboards. Traditionally they’ve manufactured only physical scoreboards, but now with the introduction of ScoreOS, they’re getting into purely digital ones too. The company chose to hire me because I have the combination of skills in graphic design and front-end web development that are needed for this type of job.
Design of the Scoreboards
The client requested me to design basketball scoreboards in three distinct visual styles which ScoreOS users would be able to select to their preference. We decided I’d make these styles:
- Classic: Emulates the look of a typical physical scoreboard as seen in most basketball arenas. (Screenshot shown above.) Uses mock LED panels and glowing and shading effects.
- Wood: Mostly similar to the classic style, except the board of the scoreboard has a wood paneling texture, mimicking the surface of a basketball court.
- Virtual: An abstract, non-skeuomorphic style using simple geometric shapes.
In addition to all the scoreboard styles, I also had to make the scoreboards adaptable to three differently sized views. This means I ended up creating for ScoreOS a total of nine separate basketball scoreboards, one in each style and in each view.
The three scoreboard views are as follows:
Uses a full HD resolution (1920×1080 pixels) and shows all the scoreboard components which include:
- Game clock
- Home/guest team scores
- Game period
- Poss (possession) indicators
- Home/guest T.O.L. (time-outs left)
- Home/guest bonus indicators
A shorter scoreboard view that’s the same width as the full view but one-fourth its height (1920×270 px). Due to the ribbon view’s more compact space compared to the full view, the T.O.L. and bonus indicator components are removed.
Originally, the ribbon view was intended to be one-third of the full size scoreboards’ height, but later we realized it was a little too tall, so I redesigned it to be one-fourth height instead.
A tiny scoreboard view (360×203 px) that has only the game clock and home/guest score components.
The scoreboards in the ribbon and bug views are constantly visible in a portion of the screen while other tasks can be done on the rest of the screen simultaneously.
I created all the scoreboard mockup images mainly in the image-editing software Adobe Photoshop. For certain scoreboards elements (particularly the ones that would be SVGs), I also used the vector graphic-editing software Adobe Illustrator.
Development of the Scoreboards
Once the client approved my mockup images, the next stage of the job was for me to develop the actual basketball scoreboards to work in the ScoreOS app.
As directed by the client, I coded the scoreboards with HTML in PHP files for their structure, and with CSS compiled from SCSS for their styling.
When the client originally described the project to me, he said he expected these elements to be PNG images that would be black masks with transparency overlapping a brightly colored background, emulating the lights of an LED panel. (The black would’ve been the back part of the LED panels.) However, I recommended that these elements would be better as SVGs rather than PNGs for the following reasons:
- SVGs are scalable, so they can be enlarged to any size without looking blurry, including on high-resolution displays.
- SVGs can have CSS filters applied directly to their shapes. This can be seen on the classic- and wood-style scoreboards, where the LEDs have a glowing light effect which I achieved using CSS drop-shadow filters in a bright color. Because SVGs wouldn’t use the masking technique, the SVGs don’t need a solid background color (that is, they have transparent backgrounds), which is good for applying a subtle gradient shading effect on the board.
The client was convinced by my arguments, so we ditched the plan to use PNGs in favor of SVGs.
For the “virtual” style scoreboard, the digits appear from special web fonts rather than SVGs.
Making the Controller
In addition to the basketball scoreboards, I was also partly involved in the making of the controller to the basketball scoreboards.
The client had sent me a rudimentary wireframe image showing the placement of all the controller’s buttons. His original wireframe was meant for display on a smartphone. However, it turned out to be a little too wide for that, so I partly redesigned it so that the controller’s layout would fit better on phone-size screens. We used the client’s original wireframe of the controller for tablet-size screens, which I made the controller automatically adapt to based on the device it’s being displayed on.
To make the controller, I developed a web page from HTML and CSS to match the button layout as outlined in the wireframe images. To arrange the layout of the controller elements, I used the native CSS grid system (a fairly new feature added to CSS that recently got widespread cross-browser support).
I gave the controller a more stylized appearance too, with three-dimensional-looking buttons and subtle shading and lighting effects. The client wanted to be sure that the controller’s buttons to have noticeable feedback when pressed, so I made the buttons glow brightly in their active state.
The controller uses a custom accent color which can be chosen by the user. The custom color appears in the buttons’ labels and glowing effects. The controller also has the option of appearing in either a light color scheme or a dark one.
Redesigning the Settings Page
ScoreOS also has a page for creating and modifying presets of custom style settings for scoreboards. This page was already made by the Sportable Scoreboard developers, but its appearance was originally a little messy and bland. I was tasked to spruce up the appearance of the page and give it a more uniform style with the other settings pages of the program.
Currently (as of September 2019), ScoreOS is still in the midst of development and testing, so it’s not available for download yet, though it should be eventually.
To learn more about the company behind ScoreOS, visit the website of Sportable Scoreboards.
To read about other projects where I designed an app’s graphical user interface, see Winter Warland or Darkness.
To read about another sports-related graphic design job I worked on, see EON Sports VR.