"EOS Angels ~ WEBSITE DESIGN CONTEST #2" - My Entry

in #eos-projects7 years ago (edited)

The website design contest reached round #2 and @officialfuzzy provided feedback for my initial design.

I'm thankful for choosing my design and here's my approach to enhance it.

Design

Here's the new live design
Important: I use a free hosting provider which shuts down the website each day for 1 hour.

1.png

I added the following elements to the initial design:

  • Moving clouds background (that scales with the size of the browser) and transparent form
  • Countdown (read more below at 'Easy Customization')
  • Social buttons (read more below at 'E-Mail Security')
  • Text (What is...)

My goal was to enhance the clean and easy to use form with additional functionality and information without distracting the user too much.

As you can see in the mobile view the social buttons + "What is..." text moves below the form so the form has a more prominent place at the top of the page.

Easy Customization

You can easily move the heading and countdown from the left side to the top of the form:

21.png

Just change the destination in line 226 of the HTML.

  • Top of the form:
    3.png
  • Left side:
    4.png

You can also change the end date of the countdown in the exact same line.

Social Buttons and E-Mail Security

I added 2 social buttons to the left side and here's one little but important element: the E-Mail link.
7.png

Here's the thing:

  • There are bots that crawl websites for E-Mail addresses which will receive spam.
  • The E-Mail address inside the HTML file is encrypted with ROT13 and not useful for bots because it has the form of 'znvygb:[email protected]'.
    5.png
    (The E-Mail address can be updated in line 231)
  • The user can see and use the correct E-Mail address.

What is...

It was difficult for me to come up with a short + most simple text what EOS Angels actually is.

6.png

I hope it's spot on and helps people that apply as Block Producers who have no clear understanding about EOS Angels yet.

Feedback

Please let me know what you think.

When I read about the contest I wanted to add tons of gimmicks but I ended up with a (hopefully) better approach of helpful functionality and clean design.

ps. I'm thinking about changing the social buttons e.g. using a link to the EOSTalk Discord instead of an E-Mail address... but I'm not sure what's preferred.

ps. Download link comes tomorrow.

Sort:  

This is REALLY NICE!
Thank you for the explanation and options to go along with it. Your design has evolved beautifully.

Thank you I'm happy that you like it :)

Let us know when your updates are ready and the download link is back up :-) The dev team was really happy with your design. They will have a design credit to you at the bottom.

Nice job! I wish I had some of these skills, I have trouble building with Squarespace. lol

Thank you:)

It took some time to learn it and it still takes time to create designs but it's absolutely doable. And you can see your results which is satisfying if others like it.

For sure. keep up the good work!

Congratulations @whynot! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.

To support your work, I also upvoted your post!
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Congratulations @whynot! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

You got your First payout
Award for the total payout received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!

Congratulations @whynot! You have received a personal award!

1 Year on Steemit
Click on the badge to view your Board of Honor.

Do not miss the last post from @steemitboard!


Participate in the SteemitBoard World Cup Contest!
Collect World Cup badges and win free SBD
Support the Gold Sponsors of the contest: @good-karma and @lukestokes


Do you like SteemitBoard's project? Then Vote for its witness and get one more award!