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
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.
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
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:
After clicking, a pop-up will open allowing you to copy or drag the short link:
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:
This opens a modal with many different share buttons you can click to instantly share to many platforms:
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:
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 (
Projectsdropdown) - 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 Syncedtooltip 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