elitepvpers, the largest German gaming forum, offers many forums for discussion and a marketplace to buy & sell virtual game items. The users trade with each other via the platform that elitepvpers offers. As a further additional offer for the users, a so-called "Case-Opening" website should be created, which makes it possible to obtain items from various games by opening boxes. The most popular game is Counter Strike: Global Offensive. The partner site elitecases (also the name was chosen according to elitepvpers) should be similar to the design, but should rely on Flat 2.0 - because the design of elitepvpers is still from 2009 and therefore no longer up to date.
elitecases should offer a fast, intuitive and pleasant entry and guarantee a disturbance-free and distraction-free stay. In addition, the design should be as neutral as possible so that a wide range of games can be offered in the future.
This project first focused on the logo and the choice of colour. The logo should be reminiscent of elitepvpers, but independent enough - and at the same time neutral enough not to commit to a particular game. In the course of the iterations, the choice became a combination of "Karambit" knife (from CS:GO) and the iconic elitepvpers axe. elitepvpers carries gold and shades of grey as primary colours, while elitecases has gold gradients and (bluish) shades of grey including blue secondary colour.
After the logo and color scheme were finalized, first low fidelity, then high fidelity prototypes were created, the latter with the help of InVision. With InVision, you can quickly turn static images into prototypes, share them and get direct feedback. Prototypes are an important tool in the design process to get an early feel for the design and the user experience. The final prototype went through several revisions, but in the end provided a solid foundation to begin front-end work.
Due to the wide range of features, good customizability and documentation, Bootstrap v4 was chosen as the front-end framework, Django for the back-end.
elitecases solves the problems with a modern Flat 2.0 design, restrained background colors and an immediate possibility to try out the platform on the start page. For the items and buttons, bright colors and gradients were used to give the otherwise minimalist design a bit of "fresh" look. In order to make the boxes (which are arranged to match the item colors) more uniform, headings, tooltips and buttons are all colored in the same colors as the box - so together they form a unit. Thanks to Bootstrap, the website is displayed in a proper way on all end devices without losing any of its functionality.