Peerunity Theme Version 2.0! Brighter Background & Other Changes!

Hey everyone, in our previous thread, we hit a roadblock while trying to design the new theme for Peerunity. We got something that looked pretty good, but the problem was people thought it was too dark of a design to implement. I took this comment to heart…

[quote=“learnmore, post:55, topic:2500”]While I personally gravitate toward dark themes when given a choice, I really don’t like applications that force it upon me. Most major operating systems rely upon standard white/light backgrounds for native GUIs and when applications veer from this they can appear a bit unrefined, adventurous, or even subversive.

I think about my banking/financial websites and they all adhere to white/light themes. I believe I would even be a little suspicious of a “dark” banking website theme. It conveys secrecy and risk. Peercoin is aiming to be a secure, long-term store of value - people may one day be counting their life savings in PPC - and I think the primary interface (the wallet) needs to appear trustworthy, if even bit conventional, in order to encourage wide adoption.[/quote]

Everything he said there makes sense. I’ve been guilty of relying too much on darker visuals without thinking about the effect it has on people’s perception of Peercoin. Even Cybnate has been trying to tell me this. I think dark gray is still an important part of Peercoin’s color pallete, but it needs to be limited. In the previous version, the main problem was that even the main background was too dark. Here is the old version…

[size=18pt]OLD VERSION[/size]

Last night I decided to try and fix the darkness issue. I literally spent all night recreating this design from scratch in MS Paint. I got done work, I started designing this, like 10 hours passed and it was morning already. Now I’m back at work without having gotten the chance to sleep! :omg: :stuck_out_tongue: Feeling kinda tired, but it hasn’t hit me hard yet.

The major changes in this version: The main background has been brightened up, the dark gray header is a tad thinner, there is more green text, the Peerunity icon in the top left corner has been reduced in size, (File, Settings, Help and the right window control buttons are now brighter) and the main navigation buttons are now rectangle, with space given for the “Mint” button.

[size=18pt]NEW VERSION[/size]

NOTE:
- Tool Tip Transparency & Shadowing: Due to the limitations of Paint, I couldn’t make the green tool tip window transparent like in the previous version. It’s supposed to be transparent in the final version, making it possible to read the heading “Recent Transactions” behind the window. It also doesn’t include the small shadow around the tool tip window. The final version should include both of these.
- Green Button Activation: The “overview” button is green because it is the one that is currently selected. The “Transactions” button is green because the mouse is currently hovering over it, allowing the tool tip window to expand as well. If the mouse is moved over another button, the transactions button will turn dark gray again and the new button will turn green. You can see an example of this in the navigation header of Peershares.net.
- Send & Receive Symbols: I didn’t include the send and receive symbols in the recent transactions section, but they should be included in the final version.
- Peerunity Watermark Size Increase: The only other thing I feel that needs to be improved is that the Peerunity watermark needs to be made a tad larger like in the previous version.

I personally feel this version is much nicer and should hopefully solve the darkness issues many of you were having with the previous design. If you all want to move forward with this, I would suggest contacting the designer of the Mastercoin wallet. I got a lot of inspiration from that wallet and lifted many things, including the same shade of dark gray, the same font (Segoe UI) and the merging of the top header bar with the main navigation. We’d just need to find the designer of that wallet and offer him a job. What do you guys think?

I think this much fresher and brighter look is great. Almost like a bank 8)
Still liked the old button styles better, but those are relatively minor issues. More a matter of style and taste.

BTW I know people who get slightly delusional after skipping sleep :omg:
So I hope you are still thinking straight in next 16-24 hours. Will vet any of your proposals with heightened scrutiny :wink:

The reason why I removed the curved buttons is because I felt they took up too much space. The rectangular shape allows me to fit more important controls in there.

I think this is much better. Do we need the “mine” button?

Not sure, but wouldn’t it make it easier for people? If not, we don’t have to include it.

Added to notes…

- Send & Receive Symbols: I didn’t include the send and receive symbols in the recent transactions section, but they should be included in the final version.

Not sure, but wouldn’t it make it easier for people? If not, we don’t have to include it.[/quote]
This would only be useful for the odd very well equipped solominer or for testnet use. So I wouldn’t add a specific button in the wallet for this. Can still be in the menu under advanced or something? It would only confuse people.
If anything a mining button should produce links to pools and howto for mining, but still think we can do without.

Looks much better!

Soooooooooooooooooooooo much better.

I’m glad everyone likes this version much better! :smiley:

How long should we wait for feedback before trying to get it into production? Also, I need to find out how to contact the designer of the Mastercoin wallet. Does anyone know how to contact him? I imagine the design was submitted on GitHub right? Could somebody please find out who submitted it?

Also, I removed the “Mine” button according to the feedback here. I think it looks much better now with the added space. The buttons aren’t so compacted looking anymore…

I can look into the Mastercoin code and see if we can figure out how the UI changes were implemented. I need to take a look at Qt’s .qss tools for another project, so this would be a good opportunity to see if I can provide a prospective designer with better documentation for how this could be put into use.

[quote=“Sentinelrv, post:10, topic:2582”]I’m glad everyone likes this version much better! :smiley:

How long should we wait for feedback before trying to get it into production?[/quote]

It’s such a massive improvement over what we have now, I say get it going ASAP. Minor changes can be in future versions.

That looks fantastic. :slight_smile: :omg: 8)

Edit: Crap that’s a lot of peer coin. Everybody must think I’m poor (and I am, but I’m not proud of it).

I just wanted to say that other than releasing new concept art for additional tabs on the client, I don’t think I can really contribute anything else here until we have a designer working on this thing. I’ll leave it up to you guys to get that process started. If you don’t go with the Mastercoin guy and need to find someone else to do it, let me know and I’ll advertise around so we can find somebody.

I’ve been reading around, and just thought I would add the Mastercoins’ wallet is made using XAML and a hell-a-lot of win32 libraries, and was probably made with Visual Studio. While it looks good, it looks good because it’s just following Microsoft’s design specs, using tools they provide.

I wanted to mention this because going this route would cause the same problem for you, as it did Mastercoin: the wallet only works on Windows platforms, alienating Mac and *nix users. Food for thought.

As for designing a new Qt layout. I would suggest going the multi-theme route. Crowdsource a “community theme”, and allow the default “system theme” (Windows/Mac Looking, or the default Qt/GTK theme on *nix computers) or other themes to be applied. QML can be themed (http://qt-project.org/doc/qt-5/qtquick-usecase-styling.html) using a language much like CSS, and even employ JS (http://qt-project.org/doc/qt-5/qtquick-usecase-integratingjs.html) for some cool effects like you would find on websites.

Changing the theme would be as easy as adding this to your “theme chooser” in C++, then using the variable themePath to import the QML theme file:

QDeclarativeContext::setContextProperty("themePath", &themePath);

Can Peerunity V0.2 be used for POW mining or it is for POS only?

You can use it to do CPU mining, but it’s very inefficient. If you want to mine, and have a mining ASIC, it’s better to use whatever the recommended mining software is.

Here is a chat conversation between me and SigmundAlpha about this theme…

SigmundAlpha: @Sentinelrv you still around?

Sentinelrv: Yes

SigmundAlpha: @Sentinel, I saw your peerunity client “theme”, but I have a question. If you had full artistic ability, and not contricted to menus, buttons, and standard forms, is that still how you would like to see the new wallet designed?

Sentinelrv: I would like it like that, yes. But Ben is the one that is currently implementing it. I linked him to your post after I saw it. He’s been preoccupied with NuBits though, so I’m not sure how he’s doing with it. I’ll have to get an update from him.

SigmundAlpha: Well, I’m playing around with rebuilding peercoin-qt from the ground up. Completely new UI system, and I’m playing around with rebuilding the backend too (peercoind).

SigmundAlpha: This new UI system can do anything, and I mean anything. Charts, graphs, custom widgets of any sort. I just need a direction. I’m not much of a designer.

Sentinelrv: So you changed how the program works so it displays things differently?

SigmundAlpha: Yeah, I moved the whole thing from Qt’s widget based UI design to their new QML based design. It’s allows for much more freedom.

Sentinelrv: So the qt UI design that Bitcoin is using is actually outdated and there’s a better version?

SigmundAlpha: Basically, yeah

Sentinelrv: And you converted it to that.

Sentinelrv: Would you be able to write me a PM explaining what you’ve done and then I’ll forward it to Ben so we can see what he thinks? Maybe he can use it to finish the theme up.

SigmundAlpha: It’s not connected to a backend yet, but that’s the idea

Sentinelrv: And maybe it will allow us to make better changes in the future.

SigmundAlpha: I’m writing it up now, images and documentation links included, just give me a few minutes.

Sentinelrv: For example charts or graphs like you mentioned. I know Ben had previously written down ideas about Peerunity features that included such things.

Sentinelrv: Question, I’m not really a technical guy. Would changes like this open up any kind of new attack vectors?

Sentinelrv: That you know of?

SigmundAlpha: My work on the backend might, I’m still just learning the ins-and-outs of blockchain networking, but the switch to QML shouldn’t effect that no. Were just talking looks here, not how it interacts with the system or the network with peercoind

SigmundAlpha: @Sentinelrv, sent.

Sentinelrv: Thanks, I’ll send this off to Ben to see what he thinks.

Sentinelrv: I’m not sure if I’m going to get a response right away though.

Sentinelrv: I think he’s the one of the ones helping to test NuBits and they’re heavily involved in that right now.

SigmundAlpha: I’m not expecting one, when I started this conversation, I was really just looking for your opinions on added functionality or design preferences.

Sentinelrv: I just want to make sure, you said you’re not done with it yet right? I’m going to copy over this chat log and send it to him as well.

SigmundAlpha: No, because I don’t know which direction the community wants to go. The standard look, but “themed”, or a new wallet design all together? What extras functionality is expected? Etc? Etc?

Sentinelrv: I beleive all the features for v0.2 have been set, so there shouldn’t be anymore extra functionality besides what’s in this post: http://www.peercointalk.org/index.php?topic=2740.msg28174#msg28174

SigmundAlpha: Er, as long as were on the topic. How do you feel about the splash screen that shows while the block index is loaded?

Sentinelrv: I think what we would do is go with the look everyone likes in my thread and then in future versions we would add to it.

peerchemist: sigmund you play with QML/qt quick?

SigmundAlpha: Well, there is the problem, what I’m suggesting would fundamentally break all the UI work that has been done so far.

SigmundAlpha: @peerchemist: I do now

Sentinelrv: You mean this? Tell me if it doesn’t load: https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10426635_652184921540622_6145386925275288127_n.png?oh=7c7a6493808320a5ffd3580b6dd3044d&oe=5447DC8B&gda=1413460738_5bee7d075f5a2178d795d51230b44b16

SigmundAlpha: Yup, thats it. I’m only asking if it’s something you think should be kept, because it’s something I can just do away with in my client.

Sentinelrv: How hard would it be to redo?

Sentinelrv: It’s the logo we’ve created for peerunity, so I think it should stay, but maybe a color change to go with the new theme.

Sentinelrv: So we implement this new version and it breaks all the UI work. How hard would it be to put back together the way it’s supposed to be?

SigmundAlpha: “Hard”, is relative. If all were doing is keeping the same controls, but colorizing them, I say don’t change at all, there would be no need. But if we were to flip the system so we could add dynamic charts and menus, or list-view style wallet suggest and multi-wallet support, then change would be easier than adapting.

SigmundAlpha: Err, that may have been harder to read then I meant. What I’m saying is if we want to add new controls that don’t already exist on the Qt Widget library, switching to Qt Quick would be easier than writing custom Qt Widgets.

Sentinelrv: Do you know if the design I made can be fitted to the existing qt version or if there are some things that won’t work?

SigmundAlpha: It can, using the Qt Style Sheet http://qt-project.org/doc/qt-5/stylesheet.html

SigmundAlpha: I don’t know about the window frame (the titlebar/window buttons), but everything is just padding and color.

Sentinelrv: I’ve been told that certain designs may be hard to fit because qt is limited in what it can do. I’m not sure if there is anything in my design that wouldn’t work.

SigmundAlpha: If you want the window frame edited like in your mockup, then you would need to redraw them and add window support to the base library, not the easiest thing to do.

Sentinelrv: Yeah, that top part is mainly what I was concerned about.

SigmundAlpha: Yeah, i don’t think that will make it in without a switch to Qt Quick. Everything else would though.

SigmundAlpha: Qt Quick actually has a support library built in for moving and resizing windows, so redrawing the borders with it isn’t as much of a problem.

Sentinelrv: Switching right now would require us to delay v0.2 to figure out what else we would want to change. I’m not sure what we should do. Maybe keeping the Peerunity client the way it is now without the design and then implementing the design changes in v0.3 with the upgrade to qt quick.

SigmundAlpha: I would like to say, however, that a unified look across all PeerUnity projects would greatly help branding. This would include the website, and any wallets.

SigmundAlpha: Your probably right, I’ll just keep doing my thing.

Sentinelrv: You mean you’re going to keep working on it?

SigmundAlpha: Yup, I’m actually working on it as a client-end while I work on my own peercoin backend implementation.

SigmundAlpha: So I can test both at the same time.

Sentinelrv: I’m going to send this chat and your post to Ben to see what he thinks is best. He knows more than me about it, since he’s been working with the client UI recently to implement these changes.

Sentinelrv: He has more experience with what’s possible and what’s not.

That’s the end of the chat, but here is what I asked him to PM me…

[quote=“SigmundAlpha”]QML vs the status quo
The current wallet system, a fork of the original bitcoin-qt, is built using the most basic of widget from Qt’s platform-dependent widget library [http://qt-project.org/doc/qt-5/qtwidgets-index.html]. While it works great for creating a quick interface that looks natural on all desktop environments, it doesn’t lend itself easily to branding, which I believe is the point of theming the existing client.

Instead, I submit that the client be changed over to the QML/JS engine used by Qt, called Qt Quick, which not only offers the controls used by Qt Widgets [http://qt-project.org/doc/qt-5/qtquickcontrols-overview.html], but allows for the creation of completely new controls using basic building blocks [http://qt-project.org/doc/qt-5/gettingstartedqml.html] and JavaScript for animation [http://qt-project.org/doc/qt-5/qtquick-usecase-integratingjs.html]. This allows us to create custom, interesting UIs in less time. For example, pie charts [http://doc.qt.digia.com/QtCharts/images/demos_qmlchart1.png] and line graphs [http://doc.qt.digia.com/QtCharts/images/demos_qmlchart2.png], or creating applications that look similar in style to Spotify [http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2013/12/spotify_windows.jpg].

Ideas, comments, concerns?[/quote]

I only just found this thread, but I wanted to say that I’ve played around with QSS styling of the Qt wallets, and would be willing to contribute a little on this project if a team is still being put together. I can’t take a lead on it (I have a few other crypto projects going on + RL) but could help with some ideas/troubleshooting possibly.

I like the new version’s header better, it’s more profetionnal. For the rest I prefer the old design.

The new version’s background is blue, which is not ok with the red and green font colors.
Proof:

Please choose a normal gray and a light gray.