💻 1UP web design contribution by andrejcibik

View this thread on: hive.blog | peakd.com | ecency.com

utopian-io · @andrejcibik · Jan 20 '18 (edited)

$67.83

💻 1UP web design contribution

![mobile01.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516452772/tv1u1u4lgngsvaethnnn.jpg)

&nbsp;

## 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. 

&nbsp;
## 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. 

&nbsp;
## Colors

Already established 1UP / Utopian color palette. 

&nbsp;
![1UP-Case study-07.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516453999/r4epbb69ychbkgoasjch.jpg)

&nbsp;
## 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](https://fonts.google.com/specimen/Roboto+Mono)**
&nbsp;

![1UP-Case study-06.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516454008/zkyldfw4qjvi4ciq6wav.jpg)

&nbsp;
## 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](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516452904/mav0nfm5nmzhmqffcj4b.jpg)

&nbsp;
## Layouts

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

![1UP-Case study-01.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516452998/ujzk9rwvleabk3kycbai.jpg)

&nbsp;
## Desktop layout

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

![1UP-Case study-03.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516453014/v80snorqhjcvaps4vf9v.jpg)

&nbsp;
## 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](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516453307/qjw3urptgr06v6hsxqbr.jpg)

&nbsp;
## 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](https://res.cloudinary.com/hpiynhbhq/image/upload/v1516453008/zl8jie8piqy0wf3vafye.png)


&nbsp;
## Tools
All work was done in Adobe Illustrator CS6 and Adobe Photoshop CS6. 

&nbsp;
## Project files

All versions, exports and preview images here. 
### [Project files](https://drive.google.com/drive/folders/1j3Ryrwhsl37uSz6rLaB5gyJi1gdsUvOk?usp=sharing)


<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@andrejcibik/1up-web-design-contribution">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>

👍 utopian-io, noisy, flauwy, simnrodrguez, mahdiyari, marty-arts, dunsky, espoem, mooncryption, slider2990, andrejcibik, stoodkev, zoltarian, utopian-1up, orelmely, ansonoxy, idlebright, simonluisi, thillustrator, t-fir, realitycheck, tiagopaixao, kenmelendez, ni7n3k, oups, coquiunlimited, bewise, nilfanif, mydul, lewiesmartty, novadamanik, snackaholic, shohagkhan, mohdmohsin, chicoou, buayadarat, jrmiller87, subhanhf, goblin88, monoarc, steemission, bustami83, maphics, lovemenow, needavote, murad06, sachcorps, stomatolog2, roundbeargames, hakankok, muhammadjuanda, reus30bc, arslanmustafa, oldjumper, quino2706, arbenbeni, fasan, gamerkampreto59, siddukadi1, helmyfahrizalino, end42, aaditunio, moliza007, auliya, and 3 others

properties (23)vote details (67)

voter	rshares	pct
noisy	2,024,134,670,507	100%
stomatolog2	63,627,636	100%
slider2990	28,500,831,856	100%
brobear1995	0	100%
orelmely	11,323,654,938	100%
tiagopaixao	1,250,125,997	100%
realitycheck	1,341,168,178	100%
ni7n3k	890,465,543	100%
flauwy	188,453,068,042	50%
coquiunlimited	671,727,957	6%
mahdiyari	92,842,751,045	20%
simnrodrguez	136,054,098,764	100%
simonluisi	2,147,301,690	100%
andrejcibik	28,237,667,784	100%
marty-arts	44,373,383,569	100%
dunsky	41,609,846,653	100%
stoodkev	16,588,284,526	10%
mooncryption	34,701,848,520	100%
ansonoxy	3,225,988,955	100%
espoem	38,900,519,807	80%
idlebright	3,107,124,950	50%
utopian-io	4,600,733,108,609	2.79%
t-fir	1,374,544,581	100%
zoltarian	14,723,060,574	25%
bewise	664,881,078	100%
needavote	95,203,454	20%
murad06	83,068,200	100%
steemission	215,075,000	100%
bustami83	213,087,802	100%
maphics	106,304,356	100%
adfizz	0	100%
utopian-1up	13,758,496,166	100%
kenmelendez	909,904,736	100%
roundbeargames	61,675,350	6%
mohdmohsin	505,837,425	100%
oups	765,062,771	100%
thillustrator	1,807,274,150	100%
jrmiller87	295,612,077	100%
lewiesmartty	556,344,878	100%
cryptokeeperz	0	100%
nilfanif	616,877,524	100%
monoarc	239,529,375	100%
snackaholic	546,598,903	100%
auliya	0	100%
chicoou	488,269,271	100%
moliza007	0	100%
goblin88	258,079,493	100%
novadamanik	549,954,300	100%
buayadarat	380,973,899	100%
mydul	592,967,246	100%
shohagkhan	516,157,459	100%
lovemenow	101,388,022	100%
aaditunio	0	100%
sachcorps	79,881,312	100%
subhanhf	285,729,150	100%
end42	0	0%
helmyfahrizalino	0	100%
siddukadi1	0	100%
gamerkampreto59	0	100%
fasan	0	100%
arbenbeni	0	100%
quino2706	0	100%
oldjumper	0	100%
arslanmustafa	0	100%
reus30bc	0	100%
muhammadjuanda	0	100%
hakankok	0	100%

@aballarde53 · Jan 21 '18

excellent design very useful tools ...

properties (22)

`author`	aballarde53
`permlink`	re-andrejcibik-1up-web-design-contribution-20180121t042641745z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-21 04:26:45
`last_update`	2018-01-21 04:26:45
`depth`	1
`children`	0
`last_payout`	2018-01-28 04:26:45
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	38
`author_reputation`	993,199,434,539
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,017,038
`net_rshares`	0

@azizulhassan · Jan 21 '18

nice i like this

properties (22)

`author`	azizulhassan
`permlink`	re-andrejcibik-1up-web-design-contribution-20180121t124620960z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-21 12:46:30
`last_update`	2018-01-21 12:46:30
`depth`	1
`children`	0
`last_payout`	2018-01-28 12:46:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	16
`author_reputation`	858,685,273,941
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,097,972
`net_rshares`	0

@coquiunlimited · Jan 24 '18

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

properties (22)

`author`	coquiunlimited
`permlink`	re-andrejcibik-1up-web-design-contribution-20180124t025751034z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"busy","app":"busy/2.3.0"}
`created`	2018-01-24 02:57:51
`last_update`	2018-01-24 02:57:51
`depth`	1
`children`	1
`last_payout`	2018-01-31 02:57:51
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	94
`author_reputation`	5,815,829,253,052
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,805,475
`net_rshares`	0

@andrejcibik · Jan 24 '18

Thumbs up for Utopian designer :D not me.

properties (22)

`author`	andrejcibik
`permlink`	re-coquiunlimited-re-andrejcibik-1up-web-design-contribution-20180124t071402240z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"busy","app":"busy/2.3.0"}
`created`	2018-01-24 07:14:06
`last_update`	2018-01-24 07:14:06
`depth`	2
`children`	0
`last_payout`	2018-01-31 07:14:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	42
`author_reputation`	30,106,021,348,653
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,851,372
`net_rshares`	0

@flauwy · Jan 20 '18

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

properties (22)

`author`	flauwy
`permlink`	re-andrejcibik-1up-web-design-contribution-20180120t165949713z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-20 16:59:51
`last_update`	2018-01-20 16:59:51
`depth`	1
`children`	1
`last_payout`	2018-01-27 16:59:51
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	113
`author_reputation`	296,259,911,900,510
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	30,906,773
`net_rshares`	0

@andrejcibik · Jan 20 '18

$0.05

done. Didnt know about that one.

👍 flauwy

`author`	andrejcibik
`permlink`	re-flauwy-re-andrejcibik-1up-web-design-contribution-20180120t172540922z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"busy","app":"busy/2.2.0"}
`created`	2018-01-20 17:25:42
`last_update`	2018-01-20 17:25:42
`depth`	2
`children`	0
`last_payout`	2018-01-27 17:25:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.048 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	32
`author_reputation`	30,106,021,348,653
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	30,912,129
`net_rshares`	5,313,135,494
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
flauwy	0 B		5,313,135,494	1%

@flauwy · Jan 21 '18

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

properties (22)

`author`	flauwy
`permlink`	re-andrejcibik-1up-web-design-contribution-20180121t040457707z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-21 04:05:00
`last_update`	2018-01-21 04:05:00
`depth`	1
`children`	0
`last_payout`	2018-01-28 04:05:00
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	123
`author_reputation`	296,259,911,900,510
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,013,786
`net_rshares`	0

@healthinfact · Jan 20 '18

I really like your design

properties (22)

`author`	healthinfact
`permlink`	re-andrejcibik-1up-web-design-contribution-20180120t152313914z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-20 15:23:36
`last_update`	2018-01-20 15:23:36
`depth`	1
`children`	0
`last_payout`	2018-01-27 15:23:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	25
`author_reputation`	1,075,776,728,664
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	30,886,854
`net_rshares`	0

@karthikix · Jan 30 '18

Good Work @andrejcibik!
My post got approved. check this.  https://utopian.io/utopian-io/@karthikix/revamp-of-utopian-io-website. 
But being moderator, I wanted to clarify my doubts. I wanted to know that does a user with repuation of more than 50 will only get upvoted by uotpian? Because I see that utopian upvotes post of user who has reputation above 50.
I wanted to clarify about this. Thank you.

properties (22)

`author`	karthikix
`permlink`	re-andrejcibik-1up-web-design-contribution-20180130t164146030z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-30 16:41:54
`last_update`	2018-01-30 16:41:54
`depth`	1
`children`	0
`last_payout`	2018-02-06 16:41:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	401
`author_reputation`	118,635,082,718
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	33,611,501
`net_rshares`	0

@mslifesteem · Jan 24 '18

Wonderful design, Did you design all of them in Adobe Illustrator or Just the illustration?
Because Most of the Designer Design their website in Photoshop and sketch app and illustration and logo in Adobe Illustrator.
it's great that you shared all the process of your design, from color to wireframing than vishual design.
Take at look at this post, This might help you a bit.
[Web Designer Must have skills](https://steemit.com/design/@mslifesteem/8-must-have-skills-for-becoming-a-master-web-designer)

properties (22)

`author`	mslifesteem
`permlink`	re-andrejcibik-1up-web-design-contribution-20180125t094921470z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"links":["https://steemit.com/design/@mslifesteem/8-must-have-skills-for-becoming-a-master-web-designer"],"app":"steemit/0.1"}
`created`	2018-01-24 20:41:36
`last_update`	2018-01-24 20:41:36
`depth`	1
`children`	2
`last_payout`	2018-01-31 20:41:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	504
`author_reputation`	1,658,185,046,990
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,014,598
`net_rshares`	0

@andrejcibik · Jan 25 '18

Most of todays web design is done in Sketch or Illustrator, Photoshop is quite bad for web design. 
I did all of it in Illustrator, Photoshop was used just for firt image oif this presentation :)

properties (22)

`author`	andrejcibik
`permlink`	re-mslifesteem-re-andrejcibik-1up-web-design-contribution-20180125t071754547z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-25 07:17:54
`last_update`	2018-01-25 07:17:54
`depth`	2
`children`	1
`last_payout`	2018-02-01 07:17:54
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	195
`author_reputation`	30,106,021,348,653
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,129,855
`net_rshares`	0

@mslifesteem · Jan 25 '18

Oh great! keep it up.
Actually the design looks wonderful.

properties (22)

`author`	mslifesteem
`permlink`	re-andrejcibik-re-mslifesteem-re-andrejcibik-1up-web-design-contribution-20180126t082501284z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-25 19:17:15
`last_update`	2018-01-25 19:17:15
`depth`	3
`children`	0
`last_payout`	2018-02-01 19:17:15
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	58
`author_reputation`	1,658,185,046,990
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	32,274,782
`net_rshares`	0

@orelmely · Jan 20 '18

Very nice contribution !! 
Congratulations

properties (22)

`author`	orelmely
`permlink`	re-andrejcibik-1up-web-design-contribution-20180120t171804545z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-20 17:18:09
`last_update`	2018-01-20 17:18:09
`depth`	1
`children`	0
`last_payout`	2018-01-27 17:18:09
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	42
`author_reputation`	12,063,153,366,906
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	30,910,553
`net_rshares`	0

@revilationer · Jan 20 '18

Cool

properties (22)

`author`	revilationer
`permlink`	re-andrejcibik-1up-web-design-contribution-20180120t151303114z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
`created`	2018-01-20 15:13:06
`last_update`	2018-01-20 15:13:06
`depth`	1
`children`	0
`last_payout`	2018-01-27 15:13:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	4
`author_reputation`	4,041,633,926,987
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	30,884,753
`net_rshares`	0

@streetz314 · Jan 22 '18

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

👍 streetz314

`author`	streetz314
`permlink`	re-andrejcibik-1up-web-design-contribution-20180122t001812783z
`category`	utopian-io
`json_metadata`	{"tags":["utopian-io"],"app":"steemit/0.1"}
`created`	2018-01-22 00:18:18
`last_update`	2018-01-22 00:18:18
`depth`	1
`children`	0
`last_payout`	2018-01-29 00:18:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	107
`author_reputation`	24,245,744,551
`root_title`	"💻 1UP web design contribution"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	31,234,597
`net_rshares`	301,090,613
`author_curate_reward`	""

properties (23)vote details (1)

voter	weight	wgt%	rshares	pct	time
streetz314	0 B		301,090,613	100%

@utopian-io · Jan 20 '18

### 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. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**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**

properties (22)