The Utopian.io New Design

2년 전

Utopian.io has just shifted into our new design! This includes a complete revamp of a lot of features and interfaces from the top navigation bar to the format of all contributions.

Below, I'll cover the most essential features from this.

Navigation Bar

image.png

Here's a screenshot of the new top navigation bar! Notice the black overlay as opposed to the old white one! I've gotten rid of unnecessary lines to make the entire bar look more seamless.

I've also changed the contribution button to make it much more pretty and "clickable." Next, the profile picture icon has been changed from a rounded square to a full circle.

image.png

A highly requested feature was to make the "selection bar" for the search category much bigger so there wouldn't be any ...s in any of the categories. I've implemented this solely on the desktop version, to make it fit much better.

Contributions and Stories

image.png

Above is an example contribution in the all-new view! The first thing to notice is that the odd rectangular background has been changed to a colored bar at the top of the post, making it look much cleaner!

Next, the entire font has been changed to the beautiful Lato, as per @nelsonm's request. This works well with the new Material Design icons at the bottom for upvoting/commenting.

The user icon has been changed from a rounded square to a circle, as per @elear's request, and I've added tags for every story! Lastly, stories when viewed on a laptop or desktop computer will now show previews (right under the title) involving the first few words or sentences of the body.

Short Links

Many websites don't permit you to share really long links, and the long links Steemit/Busy/Utopian generates for posts sometimes can get extremely long. The Utopian Short Link feature I built in helps alleviate this by creating shorter links for every post.

To access a post's short link, simply open the post in its full view, and click Copy Short Link underneath the title:

image.png

After clicking, a pop-up will open allowing you to copy or drag the short link:

image.png

If you're on a Mac, you can press command + C here. On Windows and other platforms, ctrl + C should work. Otherwise, you can simply copy the link from there.

Sharing to other Platforms

Another requested feature was the ability to quickly share contributions to social media like Facebook, Twitter, LinkedIn, and more.

You can now do so by going to the same place as the Copy Short Link button, but instead: click the Share button:

image.png

This opens a modal with many different share buttons you can click to instantly share to many platforms:


image.png

Of course, we're planning to support many more platforms soon, so many more buttons will be appearing there!

Icon Changes

Throughout the platform, along with the fonts and overlay colors, the categorical icons for posts have been altered:

image.png

We'll be using Google's Material Design icons as a theme for Utopian from now on, and these category icons are all sourced straight from there!

Full Changelog

Here's a bullet pointed list of most of the notable changes. In the sections above, I went over the most "major" changes in more detail.

  • Navigation Bar
    • Changed background color from white to black
    • Added much bigger bar for the search selector (Projects dropdown)
    • Changed Contribution button color and style
    • Changed dropdown color to black on white
    • Changed Utopian logo to the new logo
  • Github Connection
    • Fixed bug where on the first sync, Github wouldn't connect
    • Changed button style/color
    • Added Last Synced tooltip when you hover over button
  • Contributions & Blogs
    • Changed icons to fit Google's Material Design
    • Changed the entire placement/color of the top of every contribution
    • Added previews of the story/text
    • Changed position of the username/author
    • Changed reputation tag color
    • Added story tags to every post
    • Changed upvote/comment icons
    • Changed moderation panel look and UI
    • Added short link options at the top of stories
    • Added share buttons at the top of stories
  • Sponsors
    • Changed modal path for delegation
    • Added @jesta's Vessel as a possible delegation method
  • Misc
    • Changed announcements UI to check for witness vote + new announcements
    • Changed overall accent color from Busy's purple to darker blue
    • Changed chat color to be translucent
  • Mobile Friendliness
    • Made the Chat Button much, much, smaller on mobile ;)
    • Made search bar bigger on mobile
    • Disabled nonessential features (e.g. story previews) on mobile for a better experience
    • Fixed paddings so that mobile posts appear bigger and more readable

As usual...

If you find an urgent bug or security issue, contact @mooncryption on Discord or the rest of the Utopian Dev Team immediately. For everything else, use Utopian's Bug Report Contributions to find new bugs!

I really hope you like the new design, and I've had a lot of fun developing it! If you have any questions or suggestions, ask in the Utopian Discord Server.


Thank you for reading,
@mooncryption

github branch: new-design



Posted on Utopian.io - Rewarding Open Source Contributors

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

Thank you for the contribution. It has been approved.

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

Hello, you received a boost courtesy of @steemdunk! Steem Dunk is an automated curation platform that is easy and free for use by everyone. Need a boost? Click me

Upvote this comment to support the bot and increase your future rewards!

It is a pleasure to work with you @mooncryption!

·

:) It's been very fun working with you @elear, and obviously you, @samrg472, @nelsonm, and @espoem's feedback and designs basically carved the way for this new design!

This dev really has changed the look of the utopian website interface from amazing to Marvelous, i have read lots of your contributions can't lie about that cause they come in handy, very useful to the project, like you said you had fun creating this, we had fun reading this also,
Keep up the good works, and the man above is your guild always/

·

Thank you so much @marshalllife!

nicely done @mooncryption. Thanks for all the great work you're putting into this ;)

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