Utopian new homepage design

in #utopian-io7 years ago

As you may know, Utopian.io is going to have a major restyle in order to have a better usability and also to help people understand how to use Utopian without being confused. And during the past weeks, I have been releasing the ideas and drafts to collect your feedback. So today I gonna share the design for the new homepage of Utopian.io
mock_thumbnail.png

Homepage

One major change in the homepage is focusing on discovery. The goal is to improve projects and contributions discovery by making it clearer for the user and at the same time giving more visibility to more projects and more contributions.

Part 1 - Slider with featured projects on Utopian

The main idea for this section below is to have a place where we could give more visibility to new and interesting projects inside Utopian. This is also a way to help new projects grow faster and stronger.
Screen Shot 2017-12-03 at 10.56.48.png

Section 2 - Most recent contributions

Contributions are an important part in Utopian, so for that reason, we decided to have it on the homepage because helps to give more exposure to everyone contributing to opensource projects through Utopian and the same time can help increase rewards for the contributor.
Screen Shot 2017-12-03 at 19.33.14.png

Section 3 - Popular projects

For this section our idea is to show the most popular/relevant projects on Utopian, bringing more awareness to the community that is possible to make amazing open-source projects with opensource contributions using rewards.
Screen Shot 2017-12-03 at 10.58.13.png

Project page

Since the projects will be the base for contributions, we also needed a clear and easy way to display the project and all the related information like task requests, images, contributions, etc...)

The Showcase

The first section is where we want to have a short description, video/images, metrics about the project, to help new people understand what the project is about.
Screen Shot 2017-12-03 at 12.16.53.png

Section 2: Contributions, Details, Updates, Tasks requests.

To organize all the information about the project we decided to go with tabs below the Showcase. The tabs will help organize the different types of information, such as contributions, updates, tasks requests.
Screen Shot 2017-12-03 at 12.39.47.png

Contributions

Here we will show all the contributions related to the project
Screen Shot 2017-12-03 at 13.06.46.png

Details

Here the project owner can have put all the details about the project.
Screen Shot 2017-12-03 at 12.51.25.png

Updates

The Updates tab is meant to be a place where the project can communicate new updates related to the project like milestones achieved
Screen Shot 2017-12-03 at 12.49.47.png

Task requests

This where the project owner publishes new tasks for the project. And where contributors can look for tasks to do.
Screen Shot 2017-12-03 at 12.47.37.png

Full pages:

Homepage

homepage.png

Project page

project page.png

Thanks for your attention! Stay tuned if you want to see more.


Who am I?

UX/UI designer based in Lisbon with 5 years of experience and a strong design background - User Experience design, Product design, Prototyping, UX Analysis, UX Audits, eCommerce, and Mobile Apps.*
Follow me on Steemit: https://steemit.com/@nelsonm
Follow me on Utopian: http://utopian.io/@nelsonm
Follow me on Dribbble: https://dribbble.com/nelsonmarteleria
Add me on LinkedIn: https://www.linkedin.com/in/nelson-marteleira-7434b648/
My portfolio: http://nelsonmarteleira.com/
Interested in working on a project https://nelson123.typeform.com/to/hPkfmp



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Great that look very cool design , thanks @nelsonm

wow very nice looking design and lot more user friendly. I think it will be much better then the current one which I also like.
Well done

Great work! Excited to see how this plays out. I would be happy to help out in development. Any suggestions on how to get started?

Sure! :)

Check out our Github at https://github.com/utopian-io. We use REACT for our frontend development, and REST/Node.js for backend. If you're comfortable with any of these languages or tools, we'd love to have you helping out.

Join our Discord Server at https://discord.gg/UCvqCsx and post in the #utopian-developers channel :)

1up-logo.png


You've got a 1UP from the @utopian-1up curation trail. 22 Utopians have upvoted your quality contribution to the open source community.

Follow the trail for profitable curation of quality content on SteemAuto.

@utopian-1up is neither organized nor endorsed by Utopian.io!

Your design work is really excellent, @nelsonm. I love the whole package. Can't wait to see it in action. :)

Thanks @flauwy in a future post I will share a prototype to be more real ;)

Good work @nelsonm , i'm happy to see a new unique design for utopian

Hey @nelsonm 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

Wow Superb design i must say,what about we use the utopian migraine colors for the blue colours/

To give the utopian site a utopian feel,

This is amazing ! I didn't like the current UI that much as it didn't feel that good for that kind of website, your design is just awesome. Loving the project page too, it's so clean. Congratulations for that awesome work !

Thanks @ragepeanut yep the idea is to create a friendly UI easy to understand and use.

Looks great! I'll enjoy working with the other frontend developers in making this a reality :)

@nelsonm bravo sir Thank you for building a better place for us Utopians.

Thanks @allowisticartist It's time to take @Utopian-io to the next level :)

it was a perfect narrative

thanks @hakanlama I'm not very good at writing but I try :)

i think you are pretty good

Very good post, greetings from me @steem467

Very good post, greetings from me @steem467

High quality CSS...I LOVE IT!

Congratulations @nelsonm, this post is the second most rewarded post (based on pending payouts) in the last 12 hours written by a User account holder (accounts that hold between 0.1 and 1.0 Mega Vests). The total number of posts by User account holders during this period was 2309 and the total pending payments to posts in this category was $2431.92. To see the full list of highest paid posts across all accounts categories, click here.

If you do not wish to receive these messages in future, please reply stop to this comment.

I like this! Great job @nelsonm!

Thanks for the feedback @deveerei

It is jast
Awesome side👍👍

Interesting!
I'm looking more into this project and I know I'm trying to catch up, but I am trying hard!

You have 'Detalis' rather than 'Details' on the image.

Sorry if I'm pointing out something that's already been dealt with. Keep up the good work :)

Thanks @michelle.gent I didn't notice. All the feedback is welcome ;) If you need any help to understand how Utopian works, just DM me on Discord or Steem.chat I will help you :)

That's some really work done. Kudos! Narrative was to the point mentioning all the features and every element was covered in terms design. Good work once again!

well done brother

viewed, voted, commented, and re-steemed ...

anyone follows me i'll follow back within a few days

if you have complaints please check the blog or i can link you the why ... a resteem is a resteem, atm to 117 people, thats 117 chances to have it re-resteemed,

if you consider this spam, then by all means, the mute button is on the top right side, feel free to do so and you'll never have to read me again :)

otherwise, good luck ... be wary of whales and stalkers, content dictators and bedroom nurrd fascists ... extortion bots and hatebots ...

75.png

STOP SPAM!