We made a Kindle Fire GUI Kit over at Awesome Giant. Let us know what you think!
Design
One of my biggest pet peeves is when Mac users put their Mag Safe adapters in backwards. This is the equivalent of clipping your finger nails in public in the tech world. Really, don’t be that person.
I keep seeing people do it though, so it made me wonder if people realize why the adapter is designed that way. See the image above. If you put the adapter backwards it blocks your USB port.
Moral of the story: don’t clip your fingernails in public.
When Apple CEO Tim Cook unveiled the new iPad, some designers and developers scrambled. The reason for the panic was because the third generation tablet had a beautiful retina display—four times the resolution as its predecessors. That meant apps had to be designed @2x for the retina. We didn’t do anything at Xhatch. Why?
We had our retina display assets ready three months before the announcement.
One night while working with my colleagues we talked about the rumor of the new iPad. There was rumor that it would be a widescreen format and the industrial design would change. We could have listened to the rumors on Tech Crunch or Mashable, but we didn’t? Why? We do not care what they think or report. Our team had to make a decision: should we wait until the announcement to know for sure or take a gamble?
We took a gamble, and it paid off.
We looked at the iPhone retina display and took a guess that the 1024×768 iPads would be upgraded to a 2048×1536 resolution. For those who don’t develop iOS apps, the retina display and non-retina display (such as the iPhone 3G and 3Gs) have different assets, differentiated by “file.png” and file-@2x.png”. That’s how iOS knows which assets to use for which device.
I figured if we were wrong, we would just have some huge ass assets and scale down to the original size. We were hoping and praying that for some reason there wouldn’t be a wider resolution that change the proportions.
In the end, we were so glad that it was right because it saved us so much time since all the graphical assets were ready. Our apps were retina display ready three months before we even knew we had to design for it.
Design what is about to come, not just what is already out there.
Design for the future.
If you told me that “get an app I worked on to be featured on the iTunes app store” was a goal of mine, you are wrong. Well, I guess things change.
Get an app I worked on to be featured on the iTunes app store
Paper’d is an iPhone app that allows you to browse through beautifully designed wallpapers for your phone and download them. Jamie and Nicole came up with the idea and connected with Adam and I to work on the Experience and Code. When Adam and I saw the idea, we knew this was a great idea that would go somewhere.
Week one has beyond exceeded our expectations. We were featured on the iTunes App Store, ranked #11 on top lifestyle apps and have had more than 40,000 downloads in one week. We were even featured on Mashable.
It was a lot of hard work and dedication to get this app out, but in the end it was so worth it. I couldn’t be happier to work with my best friend and a pair of new friends on an iPhone app.
I remember when Steve Jobs died, I told Adam that we should dedicate our work on Paper’d to him—really think about how to push this and make this a great app that people will love and want to keep using. It is amazing how much we have pushed the app together from the original idea.
We are very proud of what we have done, but want to make it better, make more apps and keep living, keep designing.
We passed Starbucks on the top Lifestyle Apps!
Number one might be tough to knock off. Note to self, don’t buy any Macs from your iPhone. We’re going for the top though—occupy app store!
We even got some BFF love from Alyssa
“Today Apple is going to re-invent the phone” said the late CEO Steve Jobs in 2007.
Wow, was he right. I must admit, I was skeptical at the time. When it came out, I wondered to myself, “why would I give up my perfectly good Motorola RAZR and iPod (now classic) for one device?” Then, I didn’t see the potential. I don’t know if many of us did. That’s what made Steve great. He knew what we wanted before we even knew we wanted it. A few reasons I’m thankful for the iPhone:
- Most of our work at Xhatch is designing and developing iOS applications. I never thought I would be doing this now, but I am…forever thankful.
- The revolution of mobile browsing. Design has shifted for mobile first, usually starting with the iPhone.
- Applications to be constantly connected to friends, family, work and making new friends.
Happy Birthday, iPhone. I can hardly wait for the years to come. I still dream of one day having a carbon fiber iPhone.
And you? How has the iPhone changed your life? No, I do not think it is ridiculous to say it is a life-changing device.
I’ve been on the Path app since the startup launched the iPhone app about 10 months ago. All of the sudden, I received email notifications from my people requesting to be my friend. I was curious what happened.
The mobile app released a new update with a competely redesigned User Interface. Could this be the reason Path was able to cultivate thousands of new users? The conensus seems to be “yes” that it did play a factor. Here is what Matt, an avid social networker and iPhone owner said about it.
“I initially signed up last year when they initially released the app. It was a poor user experience and had no incentive to use it on a regular basis, so I forgot about it quickly. After the update was released, I downloaded it and remembered that I had an account. I don’t use it as often as Twitter and Facebook, but the UI and UX in the new version is incredible. It is a pleasure to use for the most part, my gripes are trivial. Just goes to show how critical user experience and design are.”
According to Tech Crunch, the user base of Path jumped from 10k to 300k users in the two and a half weeks of the update. Can usability and user experience increase your user base that much? The answer is yes. Criticism of the app prior to the UI refresh was that it seemed like a lesser version of Facebook or Instagram. With experiences shifting more to real time and timeline-based experiences, Path re-focused their product to personal stories (paths) shared with close friends.
So what exactly did they change in the user experience and user interface? Let’s take a look at some of the new elements that were introduced.
Unified Content
Perhaps following the way of the new Facebook timeline, Path’s new user interface introduces unified content: music, thoughts, photos, video, location-based checkin, and yes, even when you are going to bed. The shift seems to be going away from widgets/sections and unifying content. We see this in Sparrow, Gmail, Facebook and Twitter.
No Tab Interface
The first thing that jumps out of Path’s new UI is probably the red call to action, which is a red plus button on the bottom-left of the UI—always fixed there. When a user taps on it, the interface reveals the different type of media he or she can post. One reason for this is Path has multiple types of media to post. When you use the Twitter app, you tweet. When you use Instagram, it’s a photograph. When you use Foursquare, it’s a checkin.
This is one of the first apps I’ve seen in a while where there is no tab interface.
Horizonal Swiping
This interaction became famous with Facebook’s iPhone app as well as the Twitter iPad app, where horizonal swiping would reveal different views versus only utilizing the tab interface.
Considerations
We’ve highlighted on the elements that have been working well, but let’s cover some things that could be different. It’s not to say what was done is wrong, but raises questions on UI best practices—what works and what may be evolving:
- Is the experience potentially troublesome for left-handed users? Typical primary call to action (CTA)_ buttons are traditionally in the middle, but Path’s single CTA resides on the bottom-left. However, it is possible they may have considered that less than 10% of Americans are left-handed and they possibly could be accustomed to using right-handed products.
- When user is in the “home” view, the CTA appears, allowing him or her to post content. However, when the user visits his or her own path, the CTA is not accessible. Could this consideration be for “view purposes” only?
While I still use Twitter, Facebook, Instagram, Tumblr and other content sharing social media sites, Path has become one of my favorites because of the user experience. I want to feel like I am sharing with my close friends and viewing their content, and that is what I am doing/receiving. The Path redesign is a great example of how user experience considerations can cultivate new users and really enable your products success.
Good design is innovative.
Good design makes a product useful.
Good design is aesthetic.
Good design makes a product understandable.
Good design is unobtrusive.
Good design is honest.
Good design is long-lasting.
Good design is thorough down to the last detail.
Good design is environmentally friendly.
Good design is as little design as possible.
I was sitting at the coffee shop with one of my friends co-working the other day. She wanted to see my mockups I do for iPhone apps. It surprised her that I pulled out a pad and sketchbook. Even with all the technology and tools we have, I always like to start with pencil and paper.
During the wireframing process there should be multiple iterations. Drawings are something that everyone can understand. I start with the basics with a client versus wasting time on refining. I learned in art school to start with a rough sketch and then refine, refine, refine.
Give it a try next time. Pencils before pixels.
Several years ago I was chatting with my friend Adam McDonald (now my co-founder at Xhatch) on chat. We were still undergraduates in college. He was pursuing CS and I was pursuing fine arts. He kept telling me “you need to learn to write code.” I resisted then and said “I just want to design.” McDonald is one of my best friends, so I decided to give it a try.
It is one (of not THE) of the smartest decisions I’ve ever made to become an effective designer.
You might ask yourself, “why does a designer need to know how to code?” Some things to think about. Would you want to hire an architect who is familiar with the building process and know the amount of effort and costs it will take? A clothing designer who understands the impact of the materials selected for a certain article? How about a barista who knows how coffee beans are harvested and prepared for a roast?
As the late and great Steve Jobs said, “Design is not just what it looks like and feels like. Design is how it works.”
I personally would not hire a designer who does not know how to write at least HTML/CSS. If they don’t know how to build something, how do you expect them to build something that will work?
Some reasons why:
- Designers who can code will understand the structure of a website—how certain elements will vary depending on the amount of content in it. A typical struggle for print designers is they do not consider dynamic element since they are accustomed to designing on a 2 dimensional surface that does change. Interactive is living and it looks different on certain platforms.
- A designer who understands programming will be more appreciated by developers. There is nothing more frustrating for a developer to be handed a design without programming elements being considered. Don’t be the designer that creates more work for developers.
- Having a designer on the same page as the developers will make a more fluid transition. From our experience, I don’t have to send Adam so much documentation or blueprints on the designs because he knows I’ve already considered what he has.
Writing code isn’t hard to learn. Just start with a personal project and hack away. I know many people who learned how to code from just messing around on their MySpace profile. You have no excuse!
Dear Steve:
I never got the honor or pleasure of meeting you in person, but I feel compelled to write this to share with you and others in the community about how much you meant (and continue to mean) to me.
Hearing the News
I was at Uptown Espresso near downtown Seattle, where I was working on some User Interface designs on my 15″ MacBook Pro. It was a normal day of sitting with my computer, thinking, creating and designing. My friend Melissa IMs me and asks if I was okay. I said “Yeah, why?”
I had no idea what she was talking about.
Mel asked me if I heard about you, and I said no. She told me that King 5 News and Komo were reporting that you died. I responded to her “Steve Jobs has died about five times on Twitter.” I didn’t want to believe her, but was very afraid that what she was telling me was true. I was praying and hoping that she was pulling my leg.
She wasn’t.
Reaction
I couldn’t help myself but started crying at the coffee shop. People were wondering what was wrong with me. I was not heartbroken by the loss of the man who is CEO of Apple, or the guy who unveils products, but a teacher and mentor I never met.
There were two instances where I remember feeling this type of sadness for the passing of two people I have never met, when Pope John Paul II and Michael Jackson passed. This one was the worst.
For me, Apple is about the community before it is the product. Your ability to capture and recognize beauty and innovation in the simplest things were inspiring to me. The emphases you had on typography for computers, inspired by a calligraphy class you took at Reed College—that was (and is) the type of inspiration I wanted to have.
You were (and are) one of the reasons I became passionate about design—ever since I was a kid, but especially in the most recent years. I began to discover design as functionality, which grew my passion for User Experience Design and User Interface Design. I didn’t want to make things just pretty, but simple, functional and practical. Besides Marie, you are one of my greatest mentors. It was not necessarily his products that inspire me, but how you innovated and the process of creating those products…what considerations were made to create it.
My Promise to You
I thought about how I could honor you; if I should make a design tribute, a video, or something like that. It became clear to me that there is only one way to honor you.
To keep living.
My promise to you is that I continue to live my life how I have been—full of inspiration, wonder and most importantly, curiosity. It is my obligation as a designer and creator to do this. I need to remember how much hard work it takes to be innovative, imaginative and creative.
For me, I still need to mourn. After that, it’s back to the wireframes, drawings and designs.
Thank you for everything you have taught me, Steve. I will honor your legacy the only way I know how…to live my life as inspiring as possible.
Oh. One more thing…
After I heard about your passing, I saw someone trip over a power adapter of a PC and almost knocked the entire computer down. I can’t help but think you might have chuckled.
“Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.”
[Stanford commencement speech, June 2005]
