ScoreOS is an app that lets you operate and display virtualized scoreboards for various sports. I designed and partly developed multiple styles of scoreboards and user interfaces for ScoreOS.

Screenshot of scoreboard
A screenshot of the classic-style full-view basketball scoreboard. (Click image to enlarge.)

My client for this job was Sportable Scoreboards, a company that manufactures scoreboards for stadiums and other sports venues. Now with the introduction of their ScoreOS software, they’re making purely digital scoreboards too.

Sportable Scoreboards chose to hire me because I have the combination of skills in graphic design and coding in HTML and CSS that’s needed to work on a project like this.

Design of the Scoreboards

When I had begun this ScoreOS job, the client requested me to design scoreboards for only basketball at first. Designing scoreboards for more sports were planned afterward if I’d do well making the basketball ones.

Scoreboard Styles

The client wanted the scoreboards to come in multiple visual styles that users of ScoreOS can switch to as their preference. For the basketball scoreboards, we decided I’d design these three styles:

  • Classic”: Emulates the look of a traditional physical scoreboard as seen in basketball arenas. (Screenshot shown at the top.) Uses mock LED panels with glowing and shading effects.
  • Wood”: Similar to the classic style with a few differences, the most notable one being that 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.
The full-view basketball scoreboards in the wood and virtual styles.

I designed the scoreboards as mockup images that I created mainly in the image-editing software Adobe Photoshop. For some scoreboard elements (particularly the ones that would use SVG images), I used the vector graphic software Adobe Illustrator.

Scoreboard Views

Not only did I make scoreboards in different styles, but I also made them adaptable to a “full view,” a “ribbon view,” and a “bug view,” which are different sizes and shapes of scoreboard in ScoreOS.

Full View

This view has a full HD resolution (1920×1080 pixels) and displays the complete arrangement of scoreboard components.

(Screenshots of scoreboards in the full view are shown above.)

Ribbon View

Screenshot of scoreboard
The classic-style ribbon-view basketball scoreboard.

This is a more vertically compact view (1920×270 pixels), being equally as wide as the full view but a quarter its height. Due to the ribbon view’s reduced amount of space compared to the full view, some scoreboard components are removed.

Bug View

Screenshot of scoreboard
The classic-style bug-view basketball scoreboard.

This is the tiniest of the views (360×203 pixels). It has the minimum amount of scoreboard components, which is the game clock and both teams’ scores.

Scoreboards in the ribbon and bug views are meant to be constantly visible in a portion of the screen while other things are displayed on the rest of the screen simultaneously.

With each of the basketball scoreboards in one of three styles and in one of three views, I ended up creating a total of nine individual scoreboards for basketball in ScoreOS.

Development of the Scoreboards

Once the client approved my mockup images, the next step was for me to develop the actual basketball scoreboards to work in the ScoreOS app.

Screenshot of Visual Studio Code workspace
My code editor, Visual Studio Code, with a couple of the HTML and SCSS I did for the scoreboards.

Under the hood, ScoreOS is built almost exactly as if it were a website: It runs on an Apache web server (its own self-contained one) with a MySQL database, using PHP as the server-side language, and HTML, CSS, and JavaScript on the front end.

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. The other development areas such as the JavaScript and MySQL were handled by the software programmers at Sportable Scoreboards rather than me. I was more responsible for the visual side of the project, less so the inner mechanisms.

Each type of scoreboard component (the game clock, the team scores, etc.) and the “board” itself of the scoreboard (except in the wood style) use colors customizable by the user. For these elements, I used CSS variables (custom properties), which allow their colors to be dynamically changed via JavaScript manipulation.

Screenshot of scoreboard
The wood-style ribbon-view basketball scoreboard.

PNG vs. SVG Images

When the client originally described the project to me, he said he envisioned 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 appeared to be 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 with a bright color. The glowing effect can even extend beyond the outside of the image’s edges, which wouldn’t be possible with PNGs.
  • 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.

More Sports, More Boards

The client was happy with the set of basketball scoreboards I designed, so he then asked me to continue making scoreboards for five other sports: football, baseball, soccer, wrestling, and volleyball.

Like with the basketball scoreboards, I made each of these additional sports’ scoreboards in the classic and virtual styles and having components that allow user-customizable colors. (I wasn’t directed to make the wood style for the other sports, so the wood style turned out to be for basketball only.)

All the sports had at least the three standard scoreboard views (full, ribbon, and bug). Football and baseball each have a fourth view that is even smaller in size than the bug view.

Additionally, football, baseball, and wrestling each include special scoreboard formats that show other information not seen in their standard full-view format. For example, baseball has three formats: “timer,” “stats,” and “inning.”

Here are screenshots of just a few of the smorgasbords of scoreboards:

Screenshot of scoreboard
Baseball, inning format, classic style, full view
Screenshot of scoreboard
Baseball, stats format, virtual style, full view
Screenshot of scoreboard
Football, detailed format, classic style, full view
Screenshot of scoreboard
Volleyball, virtual style, full view
Screenshot of scoreboard
Wrestling, basic format, classic style, full view
Screenshot of scoreboard
Wrestling, bout time format, virtual style, full view
Screenshot of scoreboard
Baseball, classic style, ribbon view
Screenshot of scoreboard
Football, virtual style, ribbon view
Screenshot of scoreboard
Volleyball, virtual style, ribbon view
Screenshot of scoreboard
Wrestling, bout time format, classic style, ribbon view
Screenshot of scoreboard
Baseball, virtual style, bug view
Screenshot of scoreboard
Football/basketball/soccer, virtual style, bug view
Screenshot of scoreboard
Wrestling, bout time format, classic style, bug view
Screenshot of scoreboard
Soccer, grass style, full view. With the exception of basketball’s wood scoreboard, soccer is the only other sport that has an option for a special board background.

Counting each sport, in each style, in each view, as well as in special formats for some sports, I made 14 scoreboards for baseball, 10 for football, 9 for basketball, 8 for soccer, 8 for wrestling, and 6 for volleyball. In total, that’s 55 variations of scoreboards I’ve created that appear in ScoreOS. (ScoreOS has more ’board designs made by other designers too.)

Scoreboard Controllers

In addition to the scoreboards, I was also partly involved in the making of scoreboard controllers for each of the five sports in ScoreOS. The controllers can be operated by users to manage the live information output by the scoreboards.

Screenshot of scoreboard controller
The basketball scoreboard controller (upper portion shown) in the dark color scheme with a red accent color. The home team “+1” score button is being pressed.
Screenshot of scoreboard controller
The wrestling scoreboard controller (upper portion shown) in the light color scheme.

Starting with basketball, 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-sized screens. We used the client’s original wireframe as the basis for tablet-size screens, which I made the controller automatically adapt to based on the device it’s being displayed on.

I developed the controllers as a web page from HTML and CSS. 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 controllers 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 controllers appear in either light or dark color schemes according to the user’s choice. The particular color of the buttons’ labels and glowing effects is customizable by the user too—with the exception of the controller for wrestling, which is color-restricted by design.

The style settings page for basketball scoreboards, currently shown in light mode. (Appearance subject to change.)

Settings Page

ScoreOS 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.

Client's Testimonial

Damian was top notch. He was on time, on task, professional, knowledgeable, ect… He went above and beyond what we asked him to do, providing advice and direction when he saw a better way.

We hired several people to work in parallel on this project, and Damian was so much better than the other designers that we turned them all off and asked Damian to do the entire project. We fully intend to hire him again as soon as we have work for him.

— Micah Sugg

What's Next?

Do you need a designer or developer to make your own vision of an app? Maybe I can help with that!

Similar Projects

To read about other apps’ graphical user interfaces I designed, see: