fabiyamada avatar

Design for website - SPAMPIG (wearecodex gamehub)

fabiyamada

Published: 09 May 2018 › Updated: 09 May 2018Design for website - SPAMPIG (wearecodex gamehub)

Design for website - SPAMPIG (wearecodex gamehub)

Repository: https://github.com/wearecodexx/crypto-gamehub
Link to task request: does not apply. I am project owner.


SPAMPIG is the first minigame created by wearecodex@wearecodex team as part of the GameHUB. This game approach is to fight spammers by flagging them in a fun way.

Final result, complete page:

single game site editable.png

Important details:

The first mistake spammers do is to leave short insignificant comments like: great post! That is why the top banner is filled with a buble with that text, as you can see below.

topsection.gif

Directors section:

We want to make sure the people who took the main responsabilities of the game are well credited, so there is a section with details to find them in other social media (if they have profiles there), a little description, and of course, their avatars and a link to support them they way they want.

Final section:

final.png

A bit information about the game and an invitatation to stay connected because much more is to come.


Benefits / improvements

Now the website for spampig is completely formal and looks more professional, also it adds information to credit authors and to keep the gamers more engaged.

Old web design

old-design.png

It only had gray divisions and the logo, as well as the favicon based in the logo icon.

Proof of authorship

greatpostbubbles.gif

greatpostbubbles2.gif

greatpostbubbles3.gif

Layers:

Tools

I used Adobe Photoshop CS6.

Workspace:

Font used: Lato. Open font.

Original files:

GOOGLE DRIVE FOLDER Find PSD, PDF, and image files.

Images for immediate use:

Logo:

spampig_logo.png

Top background:

top_bg.png
Note: It HAS to be like this, not cropped to fit the exact area, because in the CSS it needs to be background-attachment: fixedand background-size: coverto get the effect showed in the gif above. So, for immediate use it MUST be like shown here.

Avatars:
avatar_alpacachino.png avatar_fabiyamada.png
Note: The images are squared also because they are rounded by CSS using: border-radius:50%; ; in this way, in case the developer wants to make them square again or just a bit rounded corners it is way easier to modify than having a rounded image.

Social media:
socialmedia_steem.png socialmedia_yt.png socialmedia_inst.png socialmedia_tw.png

Support logo:

wallet_steem.png

If you can't see some images just turn on "night mode".


Proof of Work Done

https://github.com/fabiyamada
https://github.com/wearecodexx/crypto-gamehub/issues/10

PLAY THE GAME

  • There you can verify the web design has been implemented, note that I am project owner of this game and leader of wearecodex@wearecodex team.


Licensed under a [Creative Commons Attribution-NonCommercial 4.0 International](http://creativecommons.org/licenses/by-nc/4.0/).

Leave Design for website - SPAMPIG (wearecodex gamehub) to:

Written by

I want to be an artist when I grow up.

Read more #utopian-io posts


Best Posts From fabiyamada

We have not curated any of fabiyamada's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From fabiyamada