Ein Computermonitor zeigt ein pixeliges Spiel mit einem Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar.
Ein Computermonitor zeigt ein pixeliges Spiel mit einem Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar.
Ein Computermonitor zeigt ein pixeliges Spiel mit einem Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar.

Battleship

Classic strategy and timeless pixel aesthetics bring Battleship to life in a new way.

Objective

Our goal was to redesign the classic game of Battleship in a modern and engaging format. Working in a two-person team, we developed a digital version that stands out through its timeless pixel-art style, intuitive user experience, and immersive gameplay.

My Role

I was responsible for the game’s entire visual and audio design. I independently designed and illustrated all graphics and UI elements. I also researched, selected, and edited sound effects and background music to create a cohesive and atmospheric experience. The in-game animations were implemented by the developer based on my designs.

My Role

I was responsible for the game’s entire visual and audio design. I independently designed and illustrated all graphics and UI elements. I also researched, selected, and edited sound effects and background music to create a cohesive and atmospheric experience. The in-game animations were implemented by the developer based on my designs.

My Role

I was responsible for the game’s entire visual and audio design. I independently designed and illustrated all graphics and UI elements. I also researched, selected, and edited sound effects and background music to create a cohesive and atmospheric experience. The in-game animations were implemented by the developer based on my designs.

User Guidance and Interaction

Players connect via a server and can start a game together. Core settings such as the number of ships or grid size can be easily customized. Visual cues—like grayed-out elements for the second player—enhance usability and orientation during gameplay.

generiere alt text auf deutsch für blinde mit max 50 wörtern Ein Computermonitor zeigt ein pixeliges Spiel zur Schiffsplatzierung. Oben links ein Spielerprofil, daneben "Playing against Maria2". Die Feldgröße ist 12x12. Vier Schiffe unterschiedlicher Größe sind unten auf blauem Wasser platziert, nummeriert von 1 bis 4. Rechts unten ein "Ready"-Button.

User Guidance and Interaction

Players connect via a server and can start a game together. Core settings such as the number of ships or grid size can be easily customized. Visual cues—like grayed-out elements for the second player—enhance usability and orientation during gameplay.

generiere alt text auf deutsch für blinde mit max 50 wörtern Ein Computermonitor zeigt ein pixeliges Spiel zur Schiffsplatzierung. Oben links ein Spielerprofil, daneben "Playing against Maria2". Die Feldgröße ist 12x12. Vier Schiffe unterschiedlicher Größe sind unten auf blauem Wasser platziert, nummeriert von 1 bis 4. Rechts unten ein "Ready"-Button.

User Guidance and Interaction

Players connect via a server and can start a game together. Core settings such as the number of ships or grid size can be easily customized. Visual cues—like grayed-out elements for the second player—enhance usability and orientation during gameplay.

generiere alt text auf deutsch für blinde mit max 50 wörtern Ein Computermonitor zeigt ein pixeliges Spiel zur Schiffsplatzierung. Oben links ein Spielerprofil, daneben "Playing against Maria2". Die Feldgröße ist 12x12. Vier Schiffe unterschiedlicher Größe sind unten auf blauem Wasser platziert, nummeriert von 1 bis 4. Rechts unten ein "Ready"-Button.

Visual and Auditory Feedback

To create an immersive experience, I integrated a range of animations and sound effects: hits and misses are marked visually (fire or splashing water) and audibly (explosions or splashes). Hover animations on buttons provide instant feedback and improve responsiveness.

Ein Computermonitor zeigt ein pixeliges Schiffversenkenspiel. Links und rechts sind Raster auf blauem Wasser mit Schiffen und Treffermarkierungen zu sehen, die Spieler "Maria" mit 8/18 bzw. 14/24 Treffern anzeigen. In der Mitte steht "Your turn.".

Visual and Auditory Feedback

To create an immersive experience, I integrated a range of animations and sound effects: hits and misses are marked visually (fire or splashing water) and audibly (explosions or splashes). Hover animations on buttons provide instant feedback and improve responsiveness.

Ein Computermonitor zeigt ein pixeliges Schiffversenkenspiel. Links und rechts sind Raster auf blauem Wasser mit Schiffen und Treffermarkierungen zu sehen, die Spieler "Maria" mit 8/18 bzw. 14/24 Treffern anzeigen. In der Mitte steht "Your turn.".

Visual and Auditory Feedback

To create an immersive experience, I integrated a range of animations and sound effects: hits and misses are marked visually (fire or splashing water) and audibly (explosions or splashes). Hover animations on buttons provide instant feedback and improve responsiveness.

Ein Computermonitor zeigt ein pixeliges Schiffversenkenspiel. Links und rechts sind Raster auf blauem Wasser mit Schiffen und Treffermarkierungen zu sehen, die Spieler "Maria" mit 8/18 bzw. 14/24 Treffern anzeigen. In der Mitte steht "Your turn.".
Ein pixeliger, grauer Button mit der schwarzen Aufschrift "Create" vor einem hellblauen, ebenfalls pixeligen Hintergrund mit weißen Wolken.
Ein pixeliger, grauer Button mit der schwarzen Aufschrift "Create" vor einem hellblauen, ebenfalls pixeligen Hintergrund mit weißen Wolken.

Design Decisions

The deliberately chosen pixel style lends the game a timeless and charming look. Differently designed ships make it easier to distinguish lengths at a glance, supporting intuitive understanding of the game mechanics.

Ein Computermonitor zeigt ein pixeliges Spiel mit einem grauen Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar. Rechts oben befindet sich ein Zahnrad-Symbol.

Design Decisions

The deliberately chosen pixel style lends the game a timeless and charming look. Differently designed ships make it easier to distinguish lengths at a glance, supporting intuitive understanding of the game mechanics.

Ein Computermonitor zeigt ein pixeliges Spiel mit einem grauen Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar. Rechts oben befindet sich ein Zahnrad-Symbol.

Design Decisions

The deliberately chosen pixel style lends the game a timeless and charming look. Differently designed ships make it easier to distinguish lengths at a glance, supporting intuitive understanding of the game mechanics.

Ein Computermonitor zeigt ein pixeliges Spiel mit einem grauen Schiff auf blauem Wasser unter einem hellblauen Himmel mit weißen Wolken. Links sind vertikal angeordnete Menüpunkte wie "Start", "Create", "Connect", "Queue" und "Server" sichtbar. Rechts oben befindet sich ein Zahnrad-Symbol.

Conclusion

With Battleship, we succeeded in reimagining a familiar game concept in a modern and user-friendly way. Thanks to close collaboration and a clear division of responsibilities, we created a coherent and polished final product that is both visually and functionally compelling. The project highlights how thoughtful UX/UI design, combined with purposeful visual and audio feedback, can significantly enhance the user experience.

© Maria Theresia Alves Hengstl. 2025

Impressum

© Maria T. A. Hengstl. 2025

Impressum

© Maria Theresia Alves Hengstl. 2025

Impressum