Closed caycefischer closed 10 years ago
em
unitsBefore:
After:
I like helvetica :\
On Monday, March 4, 2013 at 8:49 PM, Rudd Fawcett wrote:
to your Helvetia comment @zakkain (https://github.com/zakkain)
— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-14419008).
@switz I have nothing against helvetica intrinsically, but it's become so genericized in design and especially thanks to bootstrap, it's like the times new roman of the web now. It's not really a serious option anymore, in this kind of minimal application—regrettable, but true. Lato might not be the right option, I'm open to suggestions.
Apple actually uses Myriad Pro for its own branding, but you're absolutely right—in the era of OSX Helvetica came bundled with the system and became one of the default sans-serif fonts on desktops (and the web). But the popularity of Helvetica as the standard "good design" font has been strong for at least a few decades more than the internet age. It was originally a heading/signage/poster font, and more recently, as you say, has been popularized as a body font due to the digital ubiquity.
On Mon, Mar 4, 2013 at 9:44 PM, Rudd Fawcett notifications@github.comwrote:
@zakkain https://github.com/zakkain @switz https://github.com/switzThis may just be me, but I feel like Apple popularized Helvetica, and more people started to use it... Might just be me, though...
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14420454 .
– Zachary Kain
Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public
Looks nice! Personally, I rather like Trebuchet (even if it was designed for Microsoft), but I'm not sure how well it would serve for this purpose.
Some thoughts:
Let's not go too crazy gutting Bootstrap until we're rich. Here's why. The files come in heavy, but they're the least of our optimization concerns in Habit - trust me. We use tons of their styles, so it's gonna be a major overhaul and extra project to maintain replacing them. It's not as simple as replacing the styles, as we saw with the progress-bars scare. Also, we use almost all of their javascript components, which depend on the styles anyway - so we'd be sending the css to the client regardless (we're definitely not rewriting their JS components). Add & alter as necessary, but let's not gut - not till we have $$.
Re fonts: I trust Zach's opinion here because he does this professionally, but we just heard 4 font opinions, in which case I'm inclined to go with the opinion of Twitter (Bootstrap - aka, Helvetica). But let's give Zach's commits a shot and see what people think.
Side note - let's make all non-hotfix commits as pull requests, it makes merge-sets much easier to track. I'm gonna start doing this myself as well.
Hope this doesn't sound like a combo-breaker. You truly are the man, Zach!
@lefnire Really good point re: bootstrap—I won't gut anything, I'll just layer new CSS on top. It gets compressed anyway so like you said, it isn't an optimization concern.
You're going to get pushback whenever you make changes, and people are used to the Bootstrap look. I'm certainly open to font changes but I'm campaigning pretty hard for ditching helvetica. Let's see if there's mass complaining or not.
OK, good point as well. So, how should I do this? How do you pull request commits from the same repo? Or should I maintain my fork, and just PR stuff in from zakkain/habitrpg and merge it?
Fair, I'll keep take complaints with a grain of salt (you're absolutely right, the push back has already begun now we have established users). I'll support you on the font change then my friend.
Don't worry abou this merge set, keep in mind for next batch. Branches. You can do it either zakkain/habitrpg, you can even push to lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing it). Whatever's easiest.
Oh OK! I'll make a ui-tweaks branch or something and PR across branches.
On Tue, Mar 5, 2013 at 8:34 AM, Tyler Renelle notifications@github.comwrote:
Fair, I'll keep take complaints with a grain of salt (you're absolutely right, the push back has already begun now we have established users). I'll support you on the font change then my friend.
Don't worry abou this merge set, keep in mind for next batch. Branches. You can do it either zakkain/habitrpg, you can even push to lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing it). Whatever's easiest.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440010 .
– Zachary Kain
Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public
Just to reiterate Tyler for cleanliness' sake, fork the repo (button at top right) and make changes on a new branch in your repo. Then send a pull request from your repo to the develop branch on tyler's repo. This makes life much easier when working with a team.
On Tuesday, March 5, 2013 at 8:40 AM, Zachary Kain wrote:
Oh OK! I'll make a ui-tweaks branch or something and PR across branches.
On Tue, Mar 5, 2013 at 8:34 AM, Tyler Renelle <notifications@github.com (mailto:notifications@github.com)>wrote:
Fair, I'll keep take complaints with a grain of salt (you're absolutely
right, the push back has already begun now we have established users). I'll
support you on the font change then my friend.Don't worry abou this merge set, keep in mind for next batch. Branches.
You can do it either zakkain/habitrpg, you can even push to
lefnire/habitrpg#new-branch and PR it against develop (that's how I'm doing
it). Whatever's easiest.—
Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440010
.– Zachary Kain
Designer, Creative Technologist
416-712-8895
zakkain@gmail.com (mailto:zakkain@gmail.com)
→ view my resume/profile http://zerply.com/zakkain/public— Reply to this email directly or view it on GitHub (https://github.com/lefnire/habitrpg/issues/585#issuecomment-14440233).
@lefnire Thanks Tyler—Lato might not be right in the end, but the helvetica non-choice is no better :P
@switz aha OK. Yes, that does make it clearer. Wilco.
@lefnire And to be clear just so I don't muck this process up, d'you want to be the guy managing PRs or should I merge them myself?
Me please :) Just so I can do quick-scan checks pre-merge
On Tuesday, March 5, 2013, Zachary Kain wrote:
@lefnire https://github.com/lefnire Thanks Tyler—Lato might not be right in the end, but the helvetica non-choice is no better :P
@switz https://github.com/switz aha OK. Yes, that does make it clearer. Wilco.
@lefnire https://github.com/lefnire And to be clear just so I don't muck this process up, d'you want to be the guy managing PRs or should I merge them myself?
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14440775 .
Woo! I haven't gotten a zakkain special in a while, forgot how awesome those are!
I'm working on better checkboxes and buttons, for a few reasons:
So, here they are so far:
\ I want feedback on the faded-out checkmark on uncompleted tasks. When that area is blank it looks really weird, and I think this lets users know you can interact with it. Are they not subtle enough? Too subtle? Maybe replace them with an "X"?**
Secondly, I've been extending this style to the other buttons, currently the Habit column. Things are a little different here, as the PLUS and MINUS buttons currently have a green/red colour to help show what they do, but that can clash with the color of the actual task. See two options below:
I want feedback on which of the two techniques you think works better, or if you have suggestions for a better way. Personally, I like the buttons when they're the same color as the task, it looks a lot more harmonious, and I don't think you need the green/red to help you figure out which is better.
First of all, I like this style! But it does change the general UI a lot I guess? We should see how users react to this as well. Give it a while on the test server maybe ?
On Tue, Mar 5, 2013 at 7:56 PM, Zachary Kain notifications@github.comwrote:
I'm working on better checkboxes and buttons, for a few reasons:
- moves us from the default browser UI and makes the app more unique, something that's identifiable as "our style"
- that will be useful in the mobile app too, to get a nice "native" feel
- improve accessibility and visual aesthetics
So, here they are so far:
[image: Screen Shot 2013-03-05 at 12 53 32 PM]https://f.cloud.github.com/assets/546495/223907/8e9ce84e-85c5-11e2-840c-82dee98fbf8e.png
\ I want feedback on the faded-out checkmark on uncompleted tasks. When that area is blank it looks really weird, and I think this lets users know you can interact with it. Are they not subtle enough? Too subtle? Maybe
replace them with an "X"?**
Secondly, I've been extending this style to the other buttons, currently the Habit column. Things are a little different here, as the PLUS and MINUS buttons currently have a green/red colour to help show what they do, but that can clash with the color of the actual task. See two options below:
[image: Screen Shot 2013-03-05 at 1 43 41 PM]https://f.cloud.github.com/assets/546495/223921/19c48a1c-85c6-11e2-9bc8-8253dad1eeff.png[image: Screen Shot 2013-03-05 at 1 44 57 PM]https://f.cloud.github.com/assets/546495/223922/1e58bf26-85c6-11e2-99a8-3fc114736118.png
I want feedback on which of the two techniques you think works better, or if you have suggestions for a better way. Personally, I like the buttons when they're the same color as the task, it looks a lot more harmonious, and I don't think you need the green/red to help you figure out which is better.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14458062 .
I like the big shaded checkboxes.
@Pandoro good points!
Definitely won't push this live right away, there's a lot of UI left to go over so yes—a testing server would be great to get some opinions.
Glad you agree on point 2. I'll try with some different symbols, an empty circle/square might be really nice. :D
Stunning, I love this! I don't have too much advice, but I really like where this is going
Btw, regarding the rounded edges, we might also go with the trend of sharp edges :p Like android and windows x)
On Tue, Mar 5, 2013 at 8:13 PM, Tyler Renelle notifications@github.comwrote:
Stunning, I love this! I don't have too much advice, but I really like where this is going
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14459031 .
I like the empty/checked checkboxes and the same colour of all the task boxes of the current version a lot - better than the two-tone version of the mockup. Though there is more choice for strong colours when one can fade it for the text background... and that is nice, too. (Proper angry red for those languishing tasks!) How about adding an outline to each task, in the stronger colour? Like so:
And yes, I also thought that the light checkmark was a sign for "done" at first.
For the +/- habits, I like the right-side column better - the darker shading of the button part sort of overrides the shading of the habit itself, so it looks like they are just red or just green. Especially if the todo lists and dailies will have the two-tone shading with the darker version of the task colour in front.
Edit: Now that I've looked at these nice strong solid colours while meddling with the mockup, on returning to the UI as is it seemed awfully pale. So :+1: for the new, more solid stuff!
@wildcate that looks pretty chunky, I dunno. To me that UI feels heavier without really needing it.
@Pandoro I'm a big fan of sharp corners, but I think in this case it's a minor aesthetic thing. Your thoughts on these variations?
Rounded:
Square:
Square with subtle border:
Sharp corners are really in this season!
Actually getting very excited for this!
Hokay folks, switching tacks for a second to talk about responsive design! Currently the responsive breakpoints are based off of bootstrap's defaults, which for our four-column layout is pretty bad and makes screen sizes just above the breakpoint impossible to use.
Here's my first crack and new responsive styles (excuse the low quality gif):
I made breakpoints based on the content, so that when things get too cramped, we switch to the best layout. What do people think of the two-column layout at smaller screen sizes? Do you like the scrolling inside a section when it gets too long (so there aren't big empty spaces), or do you find that confusing?
drool
OK, so Tyler and I have decided to throw up a live preview server for these new UI changes. What you see here is 100% bleeding-edge, it will be broken, there will be bugs, designs will be half-baked. Code gets pushed here more or less as I write it.
Feel free to check it out, post bug reports and suggestions in this thread.
Hey wow! Sleeping makes one miss things!
Oh, and regarding the chunky borders I drew in... my tasks are solid, chunky tasks or want to seem like that ;)
Edit: Forgot to mention that the font did not work for me - too irregular/thick-and-thin looking on my screen.
I like the look overall. I personally think the sharp corners make a nice contrast with the circle, but that's a minor detail.
Perhaps already planned, but could the box design be expanded to the rewards section for consistency? Maybe the gold cost can be centered in a box matching the checkmarks/plus buttons.
Usability wise, the checkmark on mouseover is a good touch for helping the user know what that box will do. :+1: The plus and minus buttons are not as clear, but that's something that can be taken care of by tooltips perhaps, and ultimately comes from knowing how HabitRPG works. Idea: moused-over habit button to change color based on its effect for a visual cue: the - button turn red and the + button turn green.
Awkwardnesses:
See my comments in the image. Overall it looks nice, but after seeing it, I am longing back a little to the good old habitrpg feeling. But well I guess that is something you get during every change ^^;
I have looked a bit more at the old vs. the new version - the new design takes up a lot of space with the buttons/checkpoint area; having just the little box is using much less space. I also still get the impression that the button/checking area is the main item with its darker colour and the lighter-shaded actual task sort of fades into the background. Even if you did not like my chunky borders ; ) I think they made it very clearly one item visually. Now my eye gets drawn away from the task text and toward the button area.
There's also some light grey box-like thingies around the daily and to-do list items that are missing for the others. They appear when an item is checked.
My circles do not look like @Pandoro's. Mine are a nice ratio to the box size. Perhaps a browser/OS difference?
I'm on Ubuntu 12.04 FF 16.0.2
I hate to say it @zakkain and I really like you as a person, but giving it a little more thought and especially comparison, I like the traditional view better :x
I think by itself, your design looks really awesome, it looks clean and stylish, it would fit any current system. The problem I have with it though, is that Habitrpg, for me, has a kind of nostalgic feeling. I am not sure what makes the real difference, but if I look at the current design, I get a feeling of a 90s RPG. Rounded corners + pixel art. Simple UI structures, because they did not have anything fancy back then. Now if I look at your design, it just SCREAMS modern in my face. And while I seriously respect that someone can just pull that of in a day or two, it does not feel right in habitrpg for me. With the original version, you see the header and you look down and the general style continues and you get the idea that it fits. With the new version, the header seems nice and all, then you look down and you have the idea you are looking at some other website, it simply doesn't fit the pixelish style so well.
Now if it is just me, please go ahead, push it onto the live server once the bugs are fixed, but honestly I would be cautious here. Many people play this because it brings them back part of their childhood feelings I think. If you start taking that away from them... not so good I think :x I would fix it up a little and then do a poll, see what people like. Or... the other option, which I would right now really feel for, redesign the header as well. Tear out everything into "theme" files and make it selectable in the menu.
Just to say it again :x Please don't hate me for this @zakkain, I just want to get my honest opinion out here.
(circles are kinda different in every browser, it's a weird line-height thing. It'll get changed to a more reliable method)
@Pandoro I certainly take your point, there is something fast-talking and modern about the new interface that perhaps lacks some of the original... innocence. But I think the larger point (which I feel too) is that we have some nostalgia for the the original interface, and the whole app is kind of built on nostalgia in a way. Any progress we make is going to have resistance, from ourselves and others, that's just how it goes.
Now, the old UI had a lot of problems and we do need to move forward—but it is still very much a work in progress, and I'll certainly try my best to bring back some of that '90s vibe for ya :)
PS: @Pandoro holy crap that's a lot of XP! :sob:
Strangely (since I like user customizations), I'm not a fan of the theming idea at this stage. It seems like HabitRPG should stay uniform for awhile to develop its own character.
Maybe to emphasize Habit+RPG, the buttons/checkboxes should be even more game-like than the original ones? Or perhaps just the checkmarks and circles within the new theme could get a facelift? Game-style buttons? Bars of gold with coin amounts on the reward button?
Just my 2¢ brainstorming. Looking forward to see what comes next.
@wc8 I agree.
There's actually a parallel UI in the pipe that's exactly what you're talking about—an optional "skin" you'll be able to toggle to take the app from the basic clean interface to a retro-style game interface. Some talk about it sprinkled in the Interface & Aesthetics thread.
Our goal for the basic design is to keep it as clean and simple as possible, the vast majority of people who've chimed in seem to want a beautiful utilitarian interface to GTD, at least to start with.
Just in case, my button suggestions were for just a small hint of game quality; and that was just brainstorming. I agree that utilitarian is really important for HabitRPG. Fun shouldn't come at the cost of clarity or performance.
[P.S. Catching up on that Interface thread. Thanks for pointing it out. I can see myself switching back & forth between a Clean-Modern basic skin and a future Enhanced Skin in different circumstances.]
One really good benefit of the new design: I often zoom out to see more tasks at once (I have long lists). The large areas for clicking work better on zoom out than the old version. With the old version it's hard to get the right spot for that tiny checkbox to be clicked. With the new version, I have no trouble. Although when very zoomed-out there are alignment/visual issues with the circles and checkmarks, I can still click anywhere in the shaded version and register the completion. I really appreciate that.
This has also just become free
aaactually, they're currently embroiled in a DCMA dispute! O_o Their original repo got taken down, looks like the just moved it.
On Fri, Mar 8, 2013 at 5:36 AM, Philip How notifications@github.com wrote:
This has also just become free
http://designmodo.com/flat-free/
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14613250 .
– Zachary Kain
Designer, Creative Technologist 416-712-8895 zakkain@gmail.com → view my resume/profile http://zerply.com/zakkain/public
Indeed, all the more reason to use them.
@zakkain make sure to do a merge of develop, lotta changes in there. Also we're going to have a beta server in the near future with @alanthing's migration to aws. we'll debut your redesign on the beta server, which will track develop
(while habitrpg.com tracks master
) and use the production database. Twill fulfilling the KS beta promise, shard the server load, and allow the "dangerous livers" to kick the redesign tires in production while harbinging it's arrival to prod.
So we are going to use circles instead of checkmarks now? On Mar 8, 2013 8:46 AM, "Tyler Renelle" notifications@github.com wrote:
@zakkain https://github.com/zakkain make sure to do a merge of develop, lotta changes in there. Also we're going to have a beta server in the near future with @alanthing https://github.com/alanthing's migration to aws. we'll debut your redesign on the beta server, which will track develop(while habitrpg.com tracks master) and use the production database. Twill fulfilling the KS beta promise, shard the server load, and allow the "dangerous livers" to kick the redesign tires in production while harbinging it's arrival to prod.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14623697 .
@lefnire Wilco, I keep forgetting to pull that in. Planning on finishing the Rewards column and doing the PR tomorrow.
That beta server is a rad idea!
@Neohuman circles just indicate a task requires completion. It might change to an outlined square, still figuring this stuff out.
I've brought the rewards and pets over to the new design. Several points:
My money is on squares. Not sure if I like it when the square is still visible when checked off, or not.
I've started digging into the jqueryUI stuff and it's a pain in the ass. Here's some sexy better drag interactions (sorry for the bad gif):
I personally didn't like the opacity, this makes more sense. Upcoming on my agenda is figuring out how to get touch events working and setting up sortable task lists for touch screens, not just desktop. That probably means not using the jQueryUI sortable module. We'll see. If it isn't easy or convenient I won't rock the boat.
Fantastic! Pushing to Heroku now, should be up in a few minutes. I vote boxes too.
On Sat, Mar 9, 2013 at 2:02 AM, Zachary Kain notifications@github.comwrote:
Update before the hangout tomorrow. 1. Rewards
[image: Screen Shot 2013-03-09 at 1 37 38 AM]https://f.cloud.github.com/assets/546495/239371/64a89a74-8886-11e2-95f3-e5797f7d307c.png[image: rewards min]https://f.cloud.github.com/assets/546495/239372/6c8d3538-8886-11e2-82e2-6662e6f428d4.gif
I've brought the rewards and pets over to the new design. Several points:
- this layout for Pets is only temporary, pending the major re-design and implementation of the Pet/Mount system currently underway
[image: Screen Shot 2013-03-09 at 1 37 56 AM]https://f.cloud.github.com/assets/546495/239369/57401c2c-8886-11e2-9f8d-50932edbf8ef.png
- the same goes for the Store, which at some point will become actual Store and Inventory screens
- we need to solve the "shit isn't centered in our sprites" problem, so this doesn't happen: [image: Screen Shot 2013-03-09 at 1 37 46 AM]https://f.cloud.github.com/assets/546495/239370/60e5a616-8886-11e2-92bc-10eb90563da1.pngbecause that's ugly as sin. Maybe we solve it by having a sprite for the avatar where items are in their proper position, and a separate one for the store? Maybe we just write better store CSS positioning? I dunno.
- What do y'all prefer: circle or shaded square for Uncompleted Task?
My money is on squares. All the squares. [image: Screen Shot 2013-03-09 at 1 37 26 AM]https://f.cloud.github.com/assets/546495/239374/d0b1e37e-8886-11e2-8dd4-648e1f2e7c0b.png[image: Screen Shot 2013-03-09 at 1 37 20 AM]https://f.cloud.github.com/assets/546495/239375/d61e9abe-8886-11e2-9e3e-65fbc40c5eb0.png
- Interactions
I've started digging into the jqueryUI stuff and it's a pain in the ass. Here's some sexy better drag interactions (sorry for the bad gif): [image: newdrag min]https://f.cloud.github.com/assets/546495/239376/eb656df8-8886-11e2-80b3-3546d70e363a.gif I personally didn't like the opacity, this makes more sense. Upcoming on my agenda is figuring out how to get touch events working and setting up sortable task lists for touch screens, not just desktop. That probably means not using the jQueryUI sortable module. We'll see. If it isn't easy or convenient I won't rock the boat.
— Reply to this email directly or view it on GitHubhttps://github.com/lefnire/habitrpg/issues/585#issuecomment-14659243 .
Just decided, on a whim, you know, to test on Firefox (durp) and found huge bugs with the checkboxes and all the outline
s I'm using:
also "cost" input on rewards: screenshot
Similar to above for Custom Day Start field. Screenshot
Also I noticed all progress/history is missing. Sorry if I missed the memo but is this by design?
Just a log for me to record before/after screencaps of my random interface tweaks. Anyone is welcome to suggest further changes or critique.
This is probably only of interest to UI nerds and members of the dev team.