design a pbbg interface

How to design a PBBG layout for a war game

I love to design a PBBG layout, back in 2008 I was a quite renamed game designer with some classic tittles under my hood: Prison Struggle, Music Battle, Rescreatu, Silent Vendetta and many others web based games . Unfortunately most of them are dead, idle or my designs were so badly modified that are barely recognisable.

Good news is that retro gaming is back! So a very good chance to give some love to the gaming industry and bring modern web trends to retro MMORPG web based games.

I got hired to design an indie War themed PBBG named Elite-Forces and I’m going to give you a few tips to design a PBBG layout 🙂

1.- Sketching a PPBG layout

My job is to design a pbbg layout for login and inner game page. To compose a quick layout sketch that I can submit to the client for approval, I used several images from previous works and from Google. Of course, at the end of the process I will replace every image place holder for custom game interface elements and graphics.

Login Page
Login Page
Inner game page
Inner game page

In this step of the process I don’t focus too much in the details, I just get the ball rolling to get client’s feedback. I don’t even know how it will look at the end… what matters is getting closer and closer to the final layout spending not much time. I spent 2 hours on this step.

After several iterations we are ready for next step.

2.- Defining the Game Avatars Style

Once the mascot characters sketches are approved I have a fixed composition that works for inner and login page. I designed the characters so they can be used as in game avatars. So after a 3  hours of work we are ready for the final illustration.

Initial Sketch
Initial Sketch
Client's Corrections
Client's Corrections
Final Sketch
Final Sketch
Character Development
Character Development

3.- Final Lineart for 1st Avatar

I spent around 7 hours from a rough character design sketch to the final lineart… the gear was too detailed, on next character I will draw the main shapes and add all details in the color step, it will be quite faster.

Notice I drew the mask and helmet on different layers, so I offer some grade of customisation to my client.

Feel free to click to view the details.

Basic Character
Basic Character
Helmet on
Helmet on
Mask & Helmet
Mask & Helmet
Mask on
Mask on

4.- Final Color for 1st Avatar

So I have the lineart and basic shading drawn, applying color is quite straight forward, I only spent 2 hours. I went ahead with a warm color scheme, dark brown lineart define the mood and give me values for the rest of the shading. I used a 2 source light scheme, warm light source from the left and cold from the right.

Feel free to click to view the details.

Basic Character
Basic Character
Helmet on
Helmet on
Mask on
Mask on
Mask & Helmet
Mask & Helmet

5.- Lineart & Color for 2nd avatar

Around 7 hours of work later, I went from the character sketch to the final lineart and color. It was faster as I already had the color palette defined. I also reused some parts of the first mascot character.

Final character design
Final character design

6.- Background for Game Illustration

Most time consuming task, and what will make the game stand out, is already completed, today I have worked in the illustrative background for around 3 hours more. Notice how I used just a few flat silhouettes so it adds the mood for the characters not taking away too much attention from them.

Game Illustration
Game Illustration

7.- Creating a Killer Cartoon Logo

Elite-Forces Logo
Elite-Forces Logo

While I love cartoon logo, this one will be text based only so we don’t overload the interface. Logo is finished, I spent around 4 hours more.

I chose a warm color scheme that fits perfectly with the game interface.

8.- Design a PBBG layout

And this is the final step of the design process, I created a light interface, tactical style. Warm color scheme that fits with the illustration. Eye catchy but not too hard on the eyes. I spent around 8 hours for both screens, including all client’s corrections.

I won’t disclose all the design process but if you are interested I have created a tutorial to learn how to create a game interface.

My estimation for the whole project is around 40 hours. 

Pbbg Login Page

And good news! I got hired for a second PBBG game, this time an Old School Mafia game. Stay tuned!

Sergio Ordoñez Suanez
[email protected]

Hi there, I'm webmaster, designer and digital content creator of everything you see at SOSFactory. I love sharing my limited knowledge as more experienced designers did when I was a newbie.

2 Comments
  • Demm
    Posted at 01:41h, 18 August Reply

    Increible! As ussual!! I love to see your process; I learn a lot from that, always. Thanks for sharing!
    (…and I want to see the logo!!!!) XD

    • sergio ordonez
      Posted at 08:30h, 18 August Reply

      You are welcome Demm 🙂 Logo coming soon!

Post A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.