💻 1UP web design contributionsteemCreated with Sketch.

in #utopian-io7 years ago (edited)

mobile01.jpg

 

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.

 
1UP-Case study-07.jpg

 

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
 

1UP-Case study-06.jpg

 

Wireframeing and ideas

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

1UP-Case study-02.jpg

 

Layouts

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

1UP-Case study-01.jpg

 

Desktop layout

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

1UP-Case study-03.jpg

 

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.

1UP-Case study-05.jpg

 

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.

1UP-Case-study.png

 

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

Sort:  

The mobile layout is dope this thing is gonna take off very quickly the colors just pop just a great design

excellent design very useful tools ...

Your contribution was accepted. But please remove the banner on the bottom asap as that is against Utopian rules.

done. Didnt know about that one.

Very nice contribution !!
Congratulations

Hey @andrejcibik I am @utopian-io. I have just upvoted you!

Achievements

  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

I wanted to add that your way of presenting is absolutely marvelous! This post looks brilliant. Thank you for all the work.

I really like your design

nice i like this

About time someone gets creative and chooses great colors for a social website. Great job!

Thumbs up for Utopian designer :D not me.