Archived

This topic is now archived and is closed to further replies.

Chimichanga

Fixing the UI

Recommended Posts

Those look awesome, Dustin! It's great to see you following through :)

There are only only two little things I'd fix, which are the Completed icon and the shadow on the Downloading / Active icons. The Completed icon seems to be lacking contrast (I'm sure you know what I mean), and the Downloading / Active icons have strange looking shadows. The shadow on the Active icon seems a bit too strong too.

I know you made these really quickly and know you'd fix those issues if you had more time :)

Share this post


Link to post
Share on other sites

@Connor Cimowsky: For the record, the Finder sidebar icons are 512x512px not 16x16px. Look in /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources. They're named Toolbar*FolderIcon.icns.

You can argue they should be using .icns. I wouldn't disagree with that. However, they're using .png's. This means there could be compression (with PNGCrush and the like) going on with them. The blurriness is most likely due to that, not an intentional choice by whoever designed them.

Share this post


Link to post
Share on other sites

@noOnebutme Yeh there made at 512,128,48,32,16 specially made for those sizes so they look pixel perfect ;) and im pretty sure thats not the reason as i have changed app sidebar icons and they end looking clean and sharp...

Share this post


Link to post
Share on other sites

@Chimichanga: Have you ever made an icon and exported it as a .icns file? All the icon making programs for OS X (Icon Composer in the Developer Tools, Pic2Icon, IconBuilder, and so on) allow people to create one big icon and then it shrinks them down as needed. If you open the .icns in Preview, you can see this for yourself. It's the same thing shrunken down, not a custom icon every time. Vector icons would be even nicer, but for now, we're on bitmapped icons still.

If you want, you can set the icon to be used as a folder on the desktop then zoom in and out to an arbitrary value. It will still display fine even though there's no real icon size associated with this. This is because OS X supports Resolution Independence.

Share this post


Link to post
Share on other sites

lol yes i have. If you knew anything about icon design you would know you have to make a icon for each size so it looks good at all sizes. Some of my work:http://Reaze.deviantart.com/art/Evernote-103893776

Share this post


Link to post
Share on other sites

Look at the icons Apple has. Look at Evernote's icon or Colloquy's icon or any other app that you consider well designed. Open the icon file up in preview and examine the different sizes. They're all the same thing scaled down in size. Not a custom icon every time.

I'd like to point out your comment saying "I really hate how Da makes pngs look when not viewed all the way" <-- thats the same thing going here with uTorrent's icons. Only, they really are .png's instead of .icns. Which causes the problems you dont like oh so much.

But we're getting way off topic, so I'm going to go back to lurking and letting you folks discuss this. Since I apparently know nothing whatsoever about design according to you.

Share this post


Link to post
Share on other sites

Look at the folder icons for leopard! each icon has a different look. Yes not every icons follows this but if you look at the the movie sidebar icons: http://dznr.org/vx75 see each size looks sharp! If you scale a icon down it wont look nice and sharp it will have blurry edges. Evernote and Colloquy default icon is ugly btw, And thats not what i meant, i meant the black edges around the preview that i made for evernote. http://reaze.deviantart.com/ look at how evernote has a black border around it. They only scale it if only the size is the wrong size for example a 128 png being replaced with the 16px png will look like crap! Thats why designers make the icon at 16px so it looks crisp and sharp.

Share this post


Link to post
Share on other sites
You can argue they should be using .icns. I wouldn't disagree with that. However, they're using .png's. This means there could be compression (with PNGCrush and the like) going on with them. The blurriness is most likely due to that, not an intentional choice by whoever designed them.

PNG is a lossless format, so they're not blurry because of that.

Share this post


Link to post
Share on other sites

I think it looks fine, now transmission may have looked a little better but the reason i wanted utorrent for mac is for the DL speed. I did 3 back to back tests, on each of these Transmission was getting about 150kb/s DL where on the same torrent UTorrent was getting 800-1000kb/s. Need i say more.....

Share this post


Link to post
Share on other sites

@Dustin:

Nice icons, definitely better than the uT ones. I'd just point out one small thing having to do with consistency.

do45

The 'download' icon is a green downwards arrow, whereas when you look at the icon for 'active,' you have a green arrow for upload and a blue arrow for download. How about changing the 'download' arrow to blue and the 'completed' tick to green? Or something like that, after all, having a blue down arrow and green up arrow would make sense in the context of Transmission, not really uT, since uT's download bars are green all the time. :D

@NoOneButMe

Well, sure you can make a big icon which the system then scales down for you, but if you want them to look good and crisp in all sizes you do not do that. Look at the 16x16 Mac OS X Leopard 'Downloads' icon, where you've completely lost the computer glyph and only the arrow remains.

pwk7

3s2u

See the differences? If it were just the big icon downsized, where would have the accented edges come from? The things is, you need to change proportions of shadows and accented edges vs. the object as a whole when changing size if you want to attain the same effect.

Share this post


Link to post
Share on other sites

Damn there are some nice suggestions here! I put my 2 cents in that it 'felt' different then the uTorrent experience on the windows. I guess it more because of the less features than the UI. The UI is a bit different from the Apple guide but it's the best experience on the Mac for torrent apps. Hope you are open to suggestions and do your best for the first official release!

Share this post


Link to post
Share on other sites

Connor Cimowsky "My final point - there is not even a need for all of these sidebar items!"

I totally agree with that. Well, these days many apps have useless sidebars and I dont want utorrent to be one of em. A sidebar for just 5 or so items? That doesnt make sense. Xtorrent/Transmission's ideas are good ones to take, "Filtering" is rather good idea than "Sidebar". Because it is (filtering torrents by their status). And also it wastes less space.

Yeah original version of utorrent (I mean Windoze) has sidebar, but it might be good to make Mac version unique too. It doesnt have to be same.

Cheers developers! It's working well, no crash/bug so far!

Share this post


Link to post
Share on other sites

Hey guys,

I'd like to clear up the confusion about icon design. Icon designers don't just make an icon at 512px and then drag it into Icon Composer to take care of the small sizes. This method causes the icons to lack definition at these small sizes. Instead, icon designers redraw the icons for each small size in order to keep the icons crisp as they scale down.

For example,

Leopard's movies sidebar icon. Here's the 16px (redrawn) state as it's seen in the sidebar:

4gb9

As you can see, it's crisp and still detailed at its small size.

However, here's what it would look like if I simply took the 512px size and scaled it down to 16px without any redrawing:

nwb4

Can you see the difference? I sure can, here they are side by side:

Redrawn 4gb9 Scaled Down nwb4

I hope this clears up the confusion and lets you know that icon designers redraw icons at smaller sizes as opposed to just scaling down multiple-sized copies.

Share this post


Link to post
Share on other sites

I'd just like to clear my point as well: I was talking about a single vector as the original root image, not a rasterized image. Then its scaled up and down as needed without having the blurriness that's coming into question here.

Share this post


Link to post
Share on other sites

Will there be a "zoom" version? Like iTunes for example (⌃⌘Z). It would be nice to have a minimal version without the general/files/peers section. Just torrent list and togglable toolbar.

Share this post


Link to post
Share on other sites

I don't know if I agree that the sidebar is such a bad idea. It all depends what plans they've got for it, RSS could take up some space depending on how they implement it (if they do). Somebody suggested groups, maybe smart groups etc. I do agree that filter bars are very effective. Transmission is evidence of exactly this.

@NoOneButMe

What you described, using one big source for all sizes of the icon, is as people already pointed out a misconception. Even if it looks like they are all the same, what you have to do is change border, highlights etc for the icon to work (and look the same) in all sizes. It's actually quite a lot of work involved there. I'm exaggerating, but creating the source is the easy part! Like Connor and Paul accurately illustrated before me, you'll end up with a messy, inconsistent result if you just resize your source. I'm sure there are exceptions though, maybe someone has found the perfect icon form that translates perfectly down to 16x16. ;)

You could take a look at this article if you're still unsure what most of us mean regarding the sidebar icons. There's absolutely no reason that they need to be as blurry as they are. And while I'm on the subject, I've noticed this too when you are downloading:

listview-icons.png

The icons needs more defined edges to work in "all" cases (see the linked article).

I've also noticed that the app goes "fullscreen" when clicking zoom. Ew.

I decided to put something together to illustrate a few other points, some of them I've mentioned in my last post. It's very rough and uneven, as I'm sure you understand I haven't invested too much time on this, but I'm sure you'll get the general idea of things. I "borrowed" your icons too, Dustin, I hope that is OK:

utorrentheh.png

The number badges in the sidebar has bold type, and the type is centered inside the badge. The badge have been moved a bit from the edge of the sidebar to prevent it looking cramped. I've moved the up/download speeds to the bottom of the sidebar (I know the icons sucks), I think that is a more logical place for them. In any case, the bottom border of the app is not the right place.

The green/red network light is gone, I see no real reason for it being present at all times. I forgot about the ratio, but that could live alongside the up/down speeds at the bottom of the sidebar. I stole the bottom border from iTunes, since I found the original one too dark. It's slightly thicker too, to give the app a more balanced look, and prevent the buttons from being cramped and too small. The option to change speeds live in a menu accessed by the gear icon.

The details panel is flatter, and has a indicator at the top (to communicate the ability to change its size, the original lacked that.) The tabs at the top match the rest of the panel, and looks more integrated. The Reveal in Finder-button has more contrast, as have all the text. The preview icon is bigger, and the bars have a more fitting style (I realize that they should be colour coded, and match the rest of the icons and progress bars, but as I said this was done pretty fast). The whitespace and widths of the elements here are of course just illustrative. The reason the "open" toolbar icons are gone, well, that's just personal preference. ;)

Share this post


Link to post
Share on other sites

That's the best mockup so far!

suggestion:

• Change the 'Completed' icon to something clearer(it's hard to see the actually check-mark within the circle), maybe something like this 3074708615_c523339d79.jpg?v=0

Share this post


Link to post
Share on other sites

I like this mockup, needs work though. But i was thinking and looking at every torrent and they all have the same interface almost. Which got me thinking maybe one of should try coming up with some thing different then the usual? idk that might be lots of work for a whole different ui. The recent mockup is good though just needs some fixing ;)

Share this post


Link to post
Share on other sites

@zenh

I really like this mockup. It seems to be quite original and usable, while still being aesthetically pleasing. Of course, as always, there would be some things I would change. First and foremost, I have to say that you've gotten closer with the info pane, yet I still don't think you nailed it.

1) The inner shadow (or drop shadow) at the top of the info pane has to be lessened or removed entirely. In addition, is that bar (that adjusts the size of the window) really the best thing to use? I really don't see what could be gained by enlarging the vertical space, as it seems like there is already not much info to display (meaning the space is used efficiently as is). In addition, most programs that do offer some sort of info pane (i.e. XTorrent) don't adjust it, and you don't feel like you're losing any info because of it.

2) Still not loving the buttons, although you did improve them. While I do like your info pane colors better than Manuels, I like his tab layout a little better.

3) I'm sure you did this pretty quickly (as you mentioned I think) but the downloaded and available progress bars aren't really "Apple-standard." They look decent, granted, but it's not something I think Apple would make.

4) I love how you implemented the download/upload speeds. Granted, I think I'd still prefer something like a transfers window in that space, but if everyone is against that I really think your solution is quite elegant.

5) I'm assuming you just didn't feel like mocking up the extra toolbar buttons? As it is, the toolbar looks quite empty and the space is not being utilized, but I'm assuming you just didn't include them :P

@yoshimura

I agree. The completed icon was really only something temporary (as were all the sidebar icons I made). I'd really love to redo them and perfect them, hopefully I'll have some time soon. For the time being, I came up with this. If you're wondering why I didn't use green for the completed (I'd have loved to) it's that if I do there is way too much green in the sidebar. The downloads, active, and then completed would all have used green. Not good ;)

xp42

@noonebutme

I'm sorry man, but you're kinda wrong. Any professional graphic designer will tell you that NO ONE would ever use a single vector graphic (yes, vector) for all the sizes. Everyone I know redraws every single size, and this is especially important at 16px. I hope this clears it up for you.

Share this post


Link to post
Share on other sites

The problem with uTorrent is that it's trying to blend in so the little things stick out like a sore thumb. These are the main problems I see with it in its current state:

1. Sidebar icons aren't optimized for 16px.

2. Toolbar shouldn't have an Open button in it. You wont find an Open toolbar button on any Apple developed app.

3. The Close Sidebar button is completely the wrong style.

4. The gradient on the Info pane is wrong. It should be just like the one iTunes uses.

5. The segmented control in the Info pane lacks padding and doesn't fit in well.

6. The recessed buttons in the status bar are right justified.

7. The status bar is too slim.

8. The badges in the sidebar are incorrect.

Here is what I propose it should look like:

utorrentnw4.png

The sidebar icons are just temporary, but they are optimized so they look crisp in the sidebar. I also corrected the badges in the sidebar.

I removed the Open button from the toolbar. I also changed the glyphs for Info and Delete to make them more consistent. The Open URL button uses the compass from the Safari icon. The Stop and Start buttons have been combined, they switch depending on the state of the torrent you have selected.

The Close Sidebar button now uses the correct style and correct glyph.

The gradient of the info pane matches that of iTunes. I've layed the details out so that it looks less cluttered and I've used the iTunes capacity bar to represent how complete the download is. I feel a capacity bar better represents a torrent than a progress bar does.

I moved the segmented control to the status bar to give more room in the Info pane. I then moved the download and upload speeds to a Scope Bar (which uses the correct size found in Safari's find bar). I've also increased the size of the status bar to that of iTunes. The gradient is now lighter which doesn't make the app feel as heavy.

I've also used the padding found in the Downloads section of iTunes to make the listed torrents feel less crowded. You can also see this is Safari's download window.

Share this post


Link to post
Share on other sites

@osirisX

Overall, I love it.

However, the one thing that makes no sense at all is the bottom tabs. The fact that they're active all the time and the info panel isn't open all the time isn't good. To be a viable alternative, you need to find a different place for those buttons.

But like I said, I quite like it.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.