« To the past
Page 1 of 6
May 10, 2011
Quick icons replacement job for the app and some of the resources for the menubar.
You’ll need to put the “menu1-2-3” PNG files inside the app’s resources folder.
For the people who asked, the default app icon is this one (and will probe not look good in Launchpad for Lion):
AirServer Replacement
Quick icons replacement job for the app and some of the resources for the menubar.
You’ll need to put the “menu1-2-3” PNG files inside the app’s resources folder.
For the people who asked, the default app icon is this one (and will probe not look good in Launchpad for Lion):
Apr 19, 2011
INTRODUCTION
I’m also going to share with you some mockups and ideas I worked on for the past few months in my spare time for fun. Who knows if maybe they can help Sparrow’s team to make this app even better! :-)
Sparrow is an app released on the Mac App Store. It’s pretty popular and has also borrowed its UI design from Tweetie Mac (now Twitter for Mac).
Some people like this design, some don’t. In my case I have mixed feelings about it. I really like seeing a custom UI but Im not a huge fan when it’s going too far without specific reasons or when an app is creating new problems that wouldn’t exist with a more «native and default» UI.
During the beta, Sparrow looked a lot like Tweetie. I used it once and then never really paid any attention to it until the Mac App Store release. They made changes, good ones and bad ones. My first impression of the app was pretty good. I love the iOS/Lion elements such as the toolbar’s style, the list view and the scrollbar. The new icon is better too. Oh and it’s fast.
But the more I use the app, the more I see its UI flaws. The first question I asked myself was: Why did they think “let’s make a Tweetie Mail app” instead of “let’s make a Mail app borrowing UI bits from Tweetie Mac”?
My opinion is that Tweetie had great success among it’s users, so they tried to do the same by basing their entire design on it. Email is not Twitter, so functionally not the same. Therefore you can’t base your entire design on an app that’s not doing the same thing. Because of this, they seem to have sacrificed the app’s hierarchy and went with some weird UI decisions.
OVERVIEW
SIDEBAR
If we compare it with Mail, Apple went with a universal inbox approach and all of your accounts are divided between four categories: Inbox, Sent, Junk, Trash. If you click on «Inbox» you’ll see all the emails you’ve received for all of your accounts. Clicking on the little arrow next to «Inbox» will show your separate inboxes’ accounts so you can switch between the two really easily.
While it worked fine with Tweetie because most of its users probably only use one or two Twitter accounts, Sparrow built it’s UI around it without thinking it through: What about people with several email accounts? Here’s a little scenario I often come across while using Sparrow:
I have four accounts in the sidebar. I quickly want to switch between them to see an email I marked as a favorite. I don’t need to search, I marked that email as favorite not so long ago but I can’t remember from which account. Since clicking on an account will reveal its own folders and always show you it’s inbox, hiding the other accounts. It always requires extra clicks to switch between each account’s Favorites folder and that becomes quite annoying, especially if you go through that kind of scenario a lot. Also, if I resize the window to its minimal size, I’ll always have to scroll to see my two other accounts because the folder icons are quite big. It’s not a problem for big displays but it can become one for 11” or 13” displays.
I ask myself why they took Tweetie’s sidebar and built their entire design around it without tweaking it or thinking about this kind of scenario. It requires so many more clicks and time than Mail to do the same basic thing. In my opinion, Sparrow should only have a sidebar that looks like Tweetie’s instead of behaving the same. The sidebar should only show the folders, not the accounts and their own folders every time. I also wonder how they’re going to introduce universal inboxes with this design. I guess they’ll stick with the exact same system: universal account’s picture with its folders on top of every other account. Unless they completely change how the sidebar works.
SEARCH
• Method 1: Click on the Search icon in the sidebar from an account.
From an account when you click on the Search icon, it’ll appear active thanks to a blue glow and it’ll reveal a search bar with four segmented buttons on top of the list allowing you to filter results, that’ll remind you of iOS. That’s pretty neat.
• Method 2: Clicking on the search bar on the very top right of the window when it’s expanded.
Remember when I assumed this search bar appearing all of a sudden was there to search in the current email I’m reading? Turns out it’s not the case, it’ll search in the list that is located on the opposite side. If you reduce the window by hiding the preview, the search bar will appear on top of the segmented buttons. It’ll look just like Method 1 except that the Search icon will not appear active.
I’m not sure why they did this. Maybe they thought that when expanded the window’s border looked empty and they wanted to add something there, but they weren’t sure of what so they put a Search bar there? The question that popped into my mind at the time was: Why do you need a border since it doesn’t contain anything? Plus, you could save some pixels for long emails (especially HTML ones) if you get rid of it. The mouse cursor and your eyes also move a lot because of the search’s filters being at the opposite side of the Search bar.
Another scenario and big problem I came across while using the search is due to the whole accounts-with-own-folders-in-sidebar UI design decision. In one of my accounts, I searched for the name “Mathias” and didn’t find any results. I figured I made a mistake and searched in the wrong account so I had to click on another account, click on the search icon and retype my search to finally find some results. This is the exact same problem as the-switch-between-Favorites-accounts’-folder scenario, but slightly different.
The search function gets confusing to use because of the whole sidebar’s design and how they built the app around it. Showing two different ways of searching tells me they tried to fix a problem that doesn’t even exist. In my opinion, a simple search bar on the right of the toolbar would have worked just fine. It would also easily solve a future global search problem they might encounter with this design.
I think they put a search bar in the very first beta of Sparrow, but I can’t find any good reason why they went with this current design.
MORE LITTLE THINGS
About the labels: You can’t drag and drop emails to them since they appear in a popup. Actually, I’m not even sure you can drag and drop anything at all. If you want to move emails to a label from the list, you have to right click and select «Move To» in a popup. Sadly that’s not really OS X friendly to me. They could fix that by always showing the labels in a bar somewhere and you’d drag and drop emails to them. I guess that’s what they’re going to do in a future release.
About the animations: There’s some nice animation in the application. However, there’s one I really don’t like when I’m switching from my Inbox to any of my Labels. The animation is the same used when I switch between my accounts so I often find myself a little bit confused.
MY MOCKUPS & IDEAS
I’ll be honest: making mockups and sharing them with you is the only reason why I wanted to write a blog post. I’m not really good at it and this is pretty much my first time at writing about this kind of stuff.
The tricky part was to stick to Sparrow’s big design lines as close as possible, but since I wanted to solve the problems I wrote about, I had to change how some things work.
I tried to take all the good things here and there from apps I know. Then, I mixed all of that together with Sparrow’s UI and I tried to come up with some of my own ideas, and voilà:
This is the main view of the application. As you can see I moved things around, taking things from here and there:
• The account switcher and the search bar are now located in the title bar.
• The sidebar only contains your mailboxes (Inbox, Favorites, Sent, Drafts and Delete).
• The Labels bar is always shown at the top of the list.
• All the actions (Compose, Reply/Reply All/Forward, Archive, Delete and Toggle Preview) are moved to the bottom bar.
Some small actions such as «Toggle between Read & Unread» or «Mark as Favorite» appear when you hover over an email with your mouse.
The account switcher is taken from iPhoto’11 when you’re viewing pictures. The active account has colors and a yellow border around it so you can distinguish between them easily. I’m showing 4 accounts here but If you have way more and you don’t want to resize your window to show all of them in that bar, you just have to hover over it and you’ll be able to see and click on the hidden ones:
The sidebar looks like, but doesn’t work like Sparrow’s current one. You can only switch between your mailboxes. Doing that fixes the two problems related to account switching and search that I wrote about earlier. Also, you wouldn’t need to scroll anymore or have quite a large window to show all of your accounts, so the app would be even more minimal and take less space on 11” or 13” displays.
The labels are now always shown on top of the list so you can easily switch between them and if you want to mark an email or several as XYZ label, you just have to do a little drag and drop. Obviously a right click would work too.
This is how the Preview part would look:
This little mockup is for people who would want to put the Preview at the bottom. Note that in this case, you wouldn’t need to show the quick actions in the email:
The Compose window mixes designs from Mail 5, Sparrow and iOS:
Also, you’d be able to quickly select someone from your Address Book by clicking on the little + symbol, just like in iOS.
I’ve not spent a lot of time and added thoughts about the notifications, but I guess alerts (such as new mail or errors) would appear on top of the account’s picture. Clicking on the account would show you the problem or new emails:
This is an alternate sidebar design with a more classic look. I didn’t spend a lot of time on this one since I preferred to stick to Sparrow’s original UI as much as I could, but you’ll notice there’s no labels bar on top of the list. You’d just switch between them directly from the sidebar.
CONCLUSION
I think Sparrow is a great app but I’ll like it even more when they’ve fixed some of these little problems. I wish (and hope) they’d move away from Tweetie’s sidebar behavior while keeping its look. The dark sidebar design really grew on my when I was redrawing the icons for these mockups. They just need to tweak things here and there and they’ll have an application that mixes features from great apps and it’d manage to feel quite unique and great to use. If Sparrow’s team would like to use some of the ideas from my mockups, they’re obviously free to do that.
I hope you enjoyed this (pretty long) blog post and I’ll try to do that for other apps. Maybe not this long, though. Skype next maybe?
I’d like to thanks Jono and Julien Schouller for reading and correcting a lot of things. :-)
Thoughts About Sparrow UI
I’m also going to share with you some mockups and ideas I worked on for the past few months in my spare time for fun. Who knows if maybe they can help Sparrow’s team to make this app even better! :-)
Sparrow is an app released on the Mac App Store. It’s pretty popular and has also borrowed its UI design from Tweetie Mac (now Twitter for Mac).
Some people like this design, some don’t. In my case I have mixed feelings about it. I really like seeing a custom UI but Im not a huge fan when it’s going too far without specific reasons or when an app is creating new problems that wouldn’t exist with a more «native and default» UI.
During the beta, Sparrow looked a lot like Tweetie. I used it once and then never really paid any attention to it until the Mac App Store release. They made changes, good ones and bad ones. My first impression of the app was pretty good. I love the iOS/Lion elements such as the toolbar’s style, the list view and the scrollbar. The new icon is better too. Oh and it’s fast.
But the more I use the app, the more I see its UI flaws. The first question I asked myself was: Why did they think “let’s make a Tweetie Mail app” instead of “let’s make a Mail app borrowing UI bits from Tweetie Mac”?
My opinion is that Tweetie had great success among it’s users, so they tried to do the same by basing their entire design on it. Email is not Twitter, so functionally not the same. Therefore you can’t base your entire design on an app that’s not doing the same thing. Because of this, they seem to have sacrificed the app’s hierarchy and went with some weird UI decisions.
If we compare it with Mail, Apple went with a universal inbox approach and all of your accounts are divided between four categories: Inbox, Sent, Junk, Trash. If you click on «Inbox» you’ll see all the emails you’ve received for all of your accounts. Clicking on the little arrow next to «Inbox» will show your separate inboxes’ accounts so you can switch between the two really easily.
While it worked fine with Tweetie because most of its users probably only use one or two Twitter accounts, Sparrow built it’s UI around it without thinking it through: What about people with several email accounts? Here’s a little scenario I often come across while using Sparrow:
I have four accounts in the sidebar. I quickly want to switch between them to see an email I marked as a favorite. I don’t need to search, I marked that email as favorite not so long ago but I can’t remember from which account. Since clicking on an account will reveal its own folders and always show you it’s inbox, hiding the other accounts. It always requires extra clicks to switch between each account’s Favorites folder and that becomes quite annoying, especially if you go through that kind of scenario a lot. Also, if I resize the window to its minimal size, I’ll always have to scroll to see my two other accounts because the folder icons are quite big. It’s not a problem for big displays but it can become one for 11” or 13” displays.
I ask myself why they took Tweetie’s sidebar and built their entire design around it without tweaking it or thinking about this kind of scenario. It requires so many more clicks and time than Mail to do the same basic thing. In my opinion, Sparrow should only have a sidebar that looks like Tweetie’s instead of behaving the same. The sidebar should only show the folders, not the accounts and their own folders every time. I also wonder how they’re going to introduce universal inboxes with this design. I guess they’ll stick with the exact same system: universal account’s picture with its folders on top of every other account. Unless they completely change how the sidebar works.
• Method 1: Click on the Search icon in the sidebar from an account.
From an account when you click on the Search icon, it’ll appear active thanks to a blue glow and it’ll reveal a search bar with four segmented buttons on top of the list allowing you to filter results, that’ll remind you of iOS. That’s pretty neat.
• Method 2: Clicking on the search bar on the very top right of the window when it’s expanded.
Remember when I assumed this search bar appearing all of a sudden was there to search in the current email I’m reading? Turns out it’s not the case, it’ll search in the list that is located on the opposite side. If you reduce the window by hiding the preview, the search bar will appear on top of the segmented buttons. It’ll look just like Method 1 except that the Search icon will not appear active.
I’m not sure why they did this. Maybe they thought that when expanded the window’s border looked empty and they wanted to add something there, but they weren’t sure of what so they put a Search bar there? The question that popped into my mind at the time was: Why do you need a border since it doesn’t contain anything? Plus, you could save some pixels for long emails (especially HTML ones) if you get rid of it. The mouse cursor and your eyes also move a lot because of the search’s filters being at the opposite side of the Search bar.
Another scenario and big problem I came across while using the search is due to the whole accounts-with-own-folders-in-sidebar UI design decision. In one of my accounts, I searched for the name “Mathias” and didn’t find any results. I figured I made a mistake and searched in the wrong account so I had to click on another account, click on the search icon and retype my search to finally find some results. This is the exact same problem as the-switch-between-Favorites-accounts’-folder scenario, but slightly different.
The search function gets confusing to use because of the whole sidebar’s design and how they built the app around it. Showing two different ways of searching tells me they tried to fix a problem that doesn’t even exist. In my opinion, a simple search bar on the right of the toolbar would have worked just fine. It would also easily solve a future global search problem they might encounter with this design.
I think they put a search bar in the very first beta of Sparrow, but I can’t find any good reason why they went with this current design.
About the labels: You can’t drag and drop emails to them since they appear in a popup. Actually, I’m not even sure you can drag and drop anything at all. If you want to move emails to a label from the list, you have to right click and select «Move To» in a popup. Sadly that’s not really OS X friendly to me. They could fix that by always showing the labels in a bar somewhere and you’d drag and drop emails to them. I guess that’s what they’re going to do in a future release.
About the animations: There’s some nice animation in the application. However, there’s one I really don’t like when I’m switching from my Inbox to any of my Labels. The animation is the same used when I switch between my accounts so I often find myself a little bit confused.
I’ll be honest: making mockups and sharing them with you is the only reason why I wanted to write a blog post. I’m not really good at it and this is pretty much my first time at writing about this kind of stuff.
The tricky part was to stick to Sparrow’s big design lines as close as possible, but since I wanted to solve the problems I wrote about, I had to change how some things work.
I tried to take all the good things here and there from apps I know. Then, I mixed all of that together with Sparrow’s UI and I tried to come up with some of my own ideas, and voilà:
This is the main view of the application. As you can see I moved things around, taking things from here and there:
• The account switcher and the search bar are now located in the title bar.
• The sidebar only contains your mailboxes (Inbox, Favorites, Sent, Drafts and Delete).
• The Labels bar is always shown at the top of the list.
• All the actions (Compose, Reply/Reply All/Forward, Archive, Delete and Toggle Preview) are moved to the bottom bar.
Some small actions such as «Toggle between Read & Unread» or «Mark as Favorite» appear when you hover over an email with your mouse.
The account switcher is taken from iPhoto’11 when you’re viewing pictures. The active account has colors and a yellow border around it so you can distinguish between them easily. I’m showing 4 accounts here but If you have way more and you don’t want to resize your window to show all of them in that bar, you just have to hover over it and you’ll be able to see and click on the hidden ones:
The sidebar looks like, but doesn’t work like Sparrow’s current one. You can only switch between your mailboxes. Doing that fixes the two problems related to account switching and search that I wrote about earlier. Also, you wouldn’t need to scroll anymore or have quite a large window to show all of your accounts, so the app would be even more minimal and take less space on 11” or 13” displays.
The labels are now always shown on top of the list so you can easily switch between them and if you want to mark an email or several as XYZ label, you just have to do a little drag and drop. Obviously a right click would work too.
This is how the Preview part would look:
This little mockup is for people who would want to put the Preview at the bottom. Note that in this case, you wouldn’t need to show the quick actions in the email:
The Compose window mixes designs from Mail 5, Sparrow and iOS:
Also, you’d be able to quickly select someone from your Address Book by clicking on the little + symbol, just like in iOS.
I’ve not spent a lot of time and added thoughts about the notifications, but I guess alerts (such as new mail or errors) would appear on top of the account’s picture. Clicking on the account would show you the problem or new emails:
This is an alternate sidebar design with a more classic look. I didn’t spend a lot of time on this one since I preferred to stick to Sparrow’s original UI as much as I could, but you’ll notice there’s no labels bar on top of the list. You’d just switch between them directly from the sidebar.
I think Sparrow is a great app but I’ll like it even more when they’ve fixed some of these little problems. I wish (and hope) they’d move away from Tweetie’s sidebar behavior while keeping its look. The dark sidebar design really grew on my when I was redrawing the icons for these mockups. They just need to tweak things here and there and they’ll have an application that mixes features from great apps and it’d manage to feel quite unique and great to use. If Sparrow’s team would like to use some of the ideas from my mockups, they’re obviously free to do that.
I hope you enjoyed this (pretty long) blog post and I’ll try to do that for other apps. Maybe not this long, though. Skype next maybe?
I’d like to thanks Jono and Julien Schouller for reading and correcting a lot of things. :-)
Aug 4, 2010
Another quick job to replace the Displays icon inside System Preferences. Instructions inside the zip file with variants.
Displays Replacement
Another quick job to replace the Displays icon inside System Preferences. Instructions inside the zip file with variants.
Aug 3, 2010
A five minutes quick job to replace the default Trackpad icon inside System Preferences. Instructions inside the zip file.
Magic Trackpad Replacement
A five minutes quick job to replace the default Trackpad icon inside System Preferences. Instructions inside the zip file.
Jul 15, 2010
iTunes Widget Redesign
A little redesign. Be sure to read the document file included for installation and known issues please.
Jun 8, 2010
Best performance ever from the drummer.
Jun 1, 2010
Switching to WebOS
I’ve not really hidden it (at least on twitter) but a little more than a month I totally switched from an iPhone 3G S to a Palm Prē Plus. Since then I’ve only switched on my iPhone to install the latest OS 4 beta and gave it a spin for only 5 minutes before shutting it off again.
Why did I switch?
To be honest, when the Palm Prē was announced back in 2009, I wanted one. The whole user interface and user experience was so much better than the iPhone’s… and it a really had well-done multitasking experience.
While I didn’t really miss having this feature on my iPhone, sometimes I was frustrated having to quit a youtube video right in the middle of it because I received a text message (with a modal alert breaking the whole experience too) I had to reply right away. When I was done with the text message, opening youtube.app again not only lost the streaming progress of the video but I had to search for it all over again.
I can already hear people saying that multitasking is coming to iPhone OS 4 but it’s not good and is really not well executed compared to the Prē’s. The iPhone wasn’t built for it and you can tell when you use it in the beta. Maybe it’ll be different and better with the new iPhone HD/4G coming up but I really doubt it. However I’m curious how they’ll do it on the iPad.
Multitasking is one part, what is the other part that made me switch? Curiosity.
The Prē has a lot of amazing things the current iPhone OS version doesn’t have or will never have:
• Gestures based user interface,
• No intrusive notifications,
• Instant Messaging (AIM & Google Talk),
• Universal inboxes,
• Facebook contacts sync,
• PDF file viewer from the box,
• Transferring files directly to the phone by mounting it to the desktop.
• Palm is ok with the homebrew scene,
Some things like Universal inboxes is coming to the OS4 (it took Apple three years to do it though…), but you’ll still have to use iTunes to sync everything onto your iPhone and this is getting really frustrating (especially on the iPad).
Not everything is pretty though, the battery obviously like any other phones sucks nowadays. However applying some patches and installing UberKernel with Govnah to tweak the frequency made it a bit better (the phone is using less power when the screen is off). The App Catalog lacks some apps but I’m not a guy who had a lot of apps on his iPhone so I’m really not bothered by this.
Overall I’m really happy with the Palm Prē Plus, it’s a nice device and WebOS is so much superior than iPhone OS in so many ways that going back is a no for me. Am I exciting for the next iPhone? Not at all. The latest iPhone OS 4 beta didn’t convince me at all since I got my Palm Prē Plus and to be honest, when a good WebOS/Android tablet is released, consider me switching from the iPad and never look back.
For the lol, when I’ve to use my iPad or iPhone’s girlfriend, I always try to do Prē’s gestures haha… :-)
May 23, 2010
MegaMan
An entire amateur film from Eddie Lebron. Pretty impressive!
Apr 13, 2010
April 2010 News
It’s been a very long time I’ve not posted anything here. I’ve just quickly put two posts with some (old) icons I made a couple of months ago.
In fact, I’ve just been busy with work but also moving with my girlfriend (that was a subtle ad there!) to our new place in Reims. Sadly, I can’t stay there yet because I need teh Internetz to work remotely but I guess it’s coming soon.
I’m finally almost done with the very first project for the company I work for (it’s been 10 months now) and we still have some polish to do for it but I’m finally seeing the end of the tunnel… at least for this particular project.
So I’m not dead, I’ll try to post more stuff over here but I’m more (maybe too much) active on twitter for now. I think when I finally move I’ll be able to post more stuff like photos, etc… That’s going to be cool!
Oh, I should receive an iPad (64GB) on thursday and I’m pretty excited!
Apr 13, 2010
I started this set quite a while ago but I no longer have time to work on it sadly.
I thought I’d release it even if it’s unfinished, I’m sorry I kind of feel guilty.
Default iPhone Set ~ Discontinued
Navigate
