💻 1UP web design contribution

 

About

1UP will be a fun was to gamify Utopian contributions. Each Steem user with high enough reputation and Steem-plus extension installed will be able to give 1UP vote to the post he thinks will win each round. By upvoting you will front-run both Utopian bot and 1UP bot if you pick the right project - hence you will get a lot of curation rewards.

 

My goal

Creating a simple, yet catchy website that will show top posts which received 1UP votes. Top post had to be more visible, because thats the one receiving 1UP upvote.
Users should be able to see the current voting period countdown and historical results.

 

Colors

Already established 1UP / Utopian color palette.

 

 

Typography

I have chosen Roboto Mono to match the pixel-art style of logo. It's a good all-round typeface and it's free to use for commercial purposes.
Roboto Mono
 

 

Wireframeing and ideas

I have decided to use narrow (960px) content in order to help users quickly scan the posts.

 

Layouts

I have tried several versions, consulting them with @flauwy in order to find the best one.

 

Desktop layout

Most recent version. Currently being developed by @stoodkev and me.

 

Mobile layout

Its not a priority, but we will optimize for mobile too. You won't be able to vote, but you can use it to quickly check the order of posts.

 

Buttons

Links to Steemit, Utopian and Busy pop out if you hover over post's image. 1UP button rises up and glows. These effects might be changed before release.

 

Tools

All work was done in Adobe Illustrator CS6 and Adobe Photoshop CS6.

 

Project files

All versions, exports and preview images here.

Project files

---

Posted on Utopian.io - Rewarding Open Source Contributors

---