Advertise here via BSA

Yes, But This One Goes To Eleven

If you’re developing an application for the masses, there are several things to consider when road-mapping it’s functionality and features.

It’s a common mindset to think you have to offer more than your competitors in order to be better. People want more right? Wrong. People (most of them) don’t know what they want. Psychologist and Author of The Paradox of Choice says that people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.

We can apply this same rationale to our application design at an early stage. We’re not talking about eliminating core functionality, or even dropping the “bells and whistles” but taking a step back and asking whether or not the, “Wouldn’t it be cool if…” is worth the added complexity to what the end user is going to actually use.

Too Many Chefs In The Kitchen

Another reason your application will die a fiery death is that most of us (designers and developers) need approvals. More often than not these approvals come from people who are either ignorant, afraid, or stubborn. Ignorant of what’s been proven or possible, afraid of failure or too stubborn to think that there might be someone who knows more than them. I’m sure most of you are thinking of someone right now aren’t you?

If you are one of said chefs, and you aren’t open to listening to and considering input from your peers, your product is doomed to fail and my suggestion to you is to either open your mind, or find a new profession. Perhaps a prison warden or a S&M phone sex operator. That way you either have a captive audience that has no choice but to do what you say, or you have people paying you to belittle them.

Shoot First, Ask Questions Later

Some of us have the luxury of not being burdened by deadlines. However a vast majority are perpetually cognizant of launch dates. Sometimes these time frames are so tight, that we are forced to cut corners. These sacrifices can range from clean coding, UI design and even usability testing. We’re not saying that we can’t iterate after the fact, but first impressions are crucial and a bad initial experience can crush even the most brilliant project.

Conclusion

The next time you end up at one of these roadblocks, consider the actions you’re taking to remedy the situation? If all you are doing is complaining about the hurdles, to see the failure you need look no further than a mirror.

We are hard-coded with the desire to do the best we can. No one sets out to fail. We need to continually educate ourselves with facts and information to consider success, but even then there is no guarantee.

There’s nothing wrong with launching a great product that can get better. By taking careful consideration to avoid these potential pitfalls, we bring ourselves one step closer to making sure your next app doesn’t fail.

Advertise here via BSA

We have been using patterns to solve problems for a long time. Generally people (in our industry) would define a pattern similar to this definition found on wikipedia

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem in software design. A design pattern is not a finished design that can be transformed directly into code. It is a description or template for how to solve a problem that can be used in many different situations.

Are we pulling the emergency brake on innovation when we resort to using a pattern just because it’s been used successfully before? Henry Ford said, “I cannot discover that anyone knows enough to say definitely what is and what is not possible.” Mr. Ford has actually said a lot of inspiring things in regards to innovation.

Sure. There is the usability argument that if people aren’t familiar with it they will shy away. People like the cozy and fuzzy and tend to migrate towards what they are comfortable with, so there are considerations to be taken. But if your innovation breeds experience, people will use it.

Patterns are a great to use as inspiration and to see what has and can be done, but they are not the holy grail and by definition, using them is not being innovative. There are times to use them as described but I would take them with a grain of salt. Look past what has already been done and find a better way. Maybe your innovation will be the next pattern.

A FEW PATTERN RESOURCES

ui-patterns.com/

uipatternfactory.com

quince.infragistics.com/UX-Design-Patterns.aspx

developer.yahoo.com/ypatterns

uidesignpatterns.org/designPatterns

patterntap.com

Agree? Disagree?

We would love to hear your thoughts!

Advertise here via BSA

Delibar is a full featured Delicious.com Mac client. Delibar focuses on giving Mac OS X users an easy and quick tool for searching, managing and sharing their Delicious bookmarks. Delibar will be your best friend while using Delicious!

Delibar is a beautiful Mac App by Shiny Frog that solves the problem of being able to share your bookmarks to delicious simply and easily. I know what you’re thinking, “Oh good grief Charlie Brown! Another delicious application that I will never use?!?!” Lets stop that train of thought there. If you don’t know Delicious is a social bookmarking platform that has been around since 2003. In 2006 Yahoo acquired what was then del.icio.us now known as delicious. Delicious provides a way for you to bookmark your sites  and share them with your friends, co-workers or anyone who has access to the site. Delicious allows you to “tag” your websites so that other people searching on delicious can find specific resources and sites based on your “tags”.

So which app is right for you? A plugin? A Standalone? But if I get a standalone I can’t update it from the site! Not true. Delibar has all of this covered in a small and neat package. I think I have tried every for of delicious app or plugin at some point and could never get anything that worked just right. Delibar has solved that and  I am can undoubtedly say that “Delibar brought the fun back to delicious”. No, that was not a paid plug. The reason that Delibar makes this so easy is because it utilizes  a bookmarklet to upload the URL which is great because you can click, tag and then go do something else. A really big asset to the app is that if  other people have already tagged this site, in the right column it shows you what they have already tagged so you too, can tag the site with the same tags (with a few clicks) or add your own.

Delibars integration is very good it allows you to share via email, twitter, shorten the URL, share with MarsEdit or send to Facebook all from its nice little compact interface. A benefit of Delibar is that you can run it in menubar icon only so you can that precious dock space for apps that you run on a daily basis and let your Delicious network only be a click away. The UI of Delibar is amazingly simple, clean and beautiful. Its not overpowering nor weak and puny. It is also is very easy to setup and use on a daily basis.

Delibar is definitely the last delicious app you will ever need. The app is updated regularly which is a great sign that this app will receive some awesome features in the next version. We can only hope that the second released will be as feature packed and successful as the first.

More Info

Site | Twitter | ShinyFrog Home

What is Shiny Frog?

Shiny frog is a small software and design company based in Italy.  Since 2005 they have been dealing with web design and development of high quality applications for Mac and iPhone. Their mission is creating applications that combine nice look-and-feel and usability with a great set of features, both for Mac and Web.

Advertise here via BSA

Web Design is an amazing asset to showcase your app. It also gives the public a place to connect outside of the App Store. A trend in those site designs has been dark websites. The reasoning for this? The dark sites show up well on your computer, it also puts emphasis on the app instead of the site design and allows the rest to blend into the background. Here are several examples of them.

How To: Dark Background with Noise

This is a simple tutorial to show how many sites now are using a “noise” background to add a nice texture. This is very simple tutorial that requires Photoshop. The source files are not for download because this tut is only a few steps long to show you, the idea of making a noise background.

1. Open a new document. For this tut I am using a 600×200px doc. Make sure your color space is setup for RGB.

2. Fill the canvas with your select color. For this tut we are using #343434 which is a nice dark grey that would show up well in a browser.

3. Go to Edit > Fill or Shift + F5 to fill the canvas. This just filled the canvas with the color that we had chosen in the step before.

4. We are now going to go to Filter > Add Noise This will pull up a dialog box which then you can send the amount of noise you want.

5. The point of adding noise is not to go overboard but give it a nice subtle pattern where, we can make a nice background image. The amount is very small set at 99%. Make sure the distribution is Gaussian and also make sure Monochromatic is checked. If it is not the noise will be in color and will overpower your backgound instead  of being in the black and white.

6. I then like to add a tiny bit of gaussian blur. This makes the noise a bit “blended” into the background color. I do this so you can’t focus on the edges of the pixels because its pretty distracting if left 100% in focus.

That wraps up how to make a dark noise background. You can experiment with different colors, blurs and noise levels.

**NOTE: **I also would recommend putting a dark gradient or a nice layer mask that makes the noise layer fade in from one side to another. This again makes another subtle background statement. You can also try making a repeating background by making a square pattern and then defining that pattern and using fill again to “fill with pattern” instead of just filling with color.

Examples:

Scraplr

Spiffing Apps

Flowchat

Eddit – Snow Report

Simply Tweet

Tweetie

iPhone App Template Site

Go Squared

Parking App

Birdbrain App

Teehanlax Labs

Beak – Twitter Client

JQTouch

Advertise here via BSA

The Five Competencies of User Experience Design

Throughout my career as a user experience designer, I have continually asked myself three questions:

• What should my deliverables be?
• Will my deliverables provide clarity to me and their audience?
• Where do my deliverables and other efforts fit within the spectrum of UX design?

Useful Glossaries For Web Designers and Developers

In a day in age where there are just as many freelancers as there are university educated designers, developers, and all around web gurus, it is amazing to me how much many of us don’t know or have forgot about our trade. As a self-taught designer, I will admit to you upfront that there is a lot I don’t know when it comes to official jargon or certain aspects of things like typography and graphic design. It is these reasons that I call upon glossaries from time to time.

Quick Usability Checklist

After reviewing websites for a few months, I’ve begun to see general patterns emerge that make a site more or less usable. In this post, I’d like to highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts.

Optimizing Conversion Rates: It’s All About Usability

In eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn’t only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.

10 Useful Usability Findings and Guidelines

Everyone would agree that usability is an important aspect of Web design. Whether you’re working on a portfolio website, online store or Web app, making your pages easy and enjoyable for your visitors to use is key. Many studies have been done over the years on various aspects of Web and interface design, and the findings are valuable in helping us improve our work. Here are 10 useful usability findings and guidelines that may help you improve the user experience on your websites.

iPhone Needs a New Home

The guys over at Teehan + Lax seriously made some awesomerness for the iPhone home-screen. This is a proposed home screen design that I think would work better then what the iPhone has now, which in turn, give you a more seamless experience.

Confirming Passwords is Annoying: Is here a better way?

The defining characteristic of a password field is that it abstracts text as dots. While the intention of this behavior is understandable (it makes users feel secure and protects from prying eyes), the unintended effect is that it creates a usability problem. Users can’t tell if they’ve entered a password incorrectly until after the site’s validation informs them. It’s like typing with your eyes closed.

Convert and the Evolution of a User Interface

An awesome post about the usability design of Convert. Just a constant reminder that experience design is always changing and the finished product is not going to the be the first.

Testled – Usable Usability Testing

See where your users spent their time, what they missed, and where they had problems. Analyse what they typed, where their mouse moved, and even what they are saying and feeling, with data straight from their webcam.

Off the Desktop and Into the World

Great post that “makes you think”. Dane Peterson talks about how Experience Design isn’t just “on a computer” and there are experiences everywhere.

Advertise here via BSA

Video Games

From their in-game graphic user interfaces to working game interfaces, video games have always been a source of inspiration for me. The creative possibilities are virtually endless when you’re designing a video game interface; you can create just about anything your mind can think of. You can have a futuristic design like Halo or something cartoonish/illustrated like Grand Theft Auto. Video games have always been a good place to acquire some unique and cutting-edge inspiration.

Ember App

EmberApp.com is an amazing online repository for screen captures and other images. Ember is made by RealMac software, the creators of Little Snapper & Rapid Weaver. Ember is a great place to browse through interface designs, web designs, typography and anything in between. With great interface designers, like Tim Van Damme, uploading images everyday, there is more than enough for you to look at, drool over, and make notes of, for your next interface.

Flickr

This rapidly-growing image uploading service receives an exorbitant amount of images everyday. Flickr has become so massive that there are even interface design groups, as well as various other groups, within the web interface, to find inspiration from. Most importantly, its minimal interface allows you to easily view the beautiful pictures that others have uploaded.

Library or Bookstore

by Dunny

In this digital age, we often tend to forget that print publications still exist. Books and magazines still provide tons of places for inspiration. Go to a book store, take your laptop, get some coffee, and read; not on digital format, via your Kindle, but on actual paper. Leaf through some magazines and you will be surprised by the mountains of fascinating ideas that will flow into your brain. Oh, and don’t forget to take a sketchbook or notebook with you so you can record your thought process.

Outside

by Casey Templeton Photography Inc

Sometimes we, as slaves to our own work, forget that we would be 100% better if we just got out of the house for a change. It’s true. Go out for a walk or a run, and even take your dog (if you have one) with you. You will be able to come up with some amazing ideas when you have relaxed and set your mind free.

Concept Cars

This is probably my favorite of the entire group. Concept cars have always been able to push the limits without having to actually have everyday function since they are, concepts. The cars are made to push the boundaries of the Transportation Design industry, so they tend to have sleek steering wheels, doors that open in the opposite direction, solid glass roofs, pushing function over form instead of form over function. Nothing can inspire me more than a groundbreaking concept car design that has amazing attention to detail and incredibly elegant lines.

Where do you find yours?

Advertise here via BSA

“User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design” - Wikipedia

Over the last few days, I have been trying to submerse myself in as much UI as possible. Why? Because I am on the hunt to cut down my workflow and become more efficient. Everyone does it, but I have made it my job. I have been reading about adding “droplets” to Finder . I’ve  timed my actions and tried to see which methods of production work the best. I’ve deleted apps, re-installed apps, bought apps, deleted apps I bought, etc., in hopes that these applications will allow me to streamline my social networking life, my design life, and my blogging life. Ultimately, I will be able to get more done in less time.

Thoughts

In one of my tweets today, I said, “I have an easier time editing things on the iPhone than on the native app.” Now, this is not always true, but I have started to notice a trend that things (normal app functions) are easier to accomplish on an iPhone. Responses? Dave Kaneda said, “Restraint + context = win.” And according to Graham Smith, “…therein lies the real truth to simplicity in user interface design…”

If people recognize the simplicity in user interface design, why is it executed more effectively on the iPhone and not in the native application? Why do people insist on cramming 65,000 features underneath crazy animated dropping tabs, weird swirls, and whatever else they can pull out of the magic interface hat? 9 times out of 10, I find myself utilizing the simplest and cleanest apps, unless another app is offering something the pretty one doesn’t.

What should you learn learn from this experience?

Simplicity is key. Keeping things simple makes for a more satisfying user experience. The reason I can do these tasks better on an iPhone is because the screen is small, the platform is clean, and that creates a more enjoyable experience overall. These constraints force the apps’ to stick to its core features and omit extra fluff.

Your Turn

Do you find this to be true, or am I simply too close to the spray paint? Hopefully this trend will start to receive greater acknowledgment, and we will soon see simplicity in our desktop apps in addition to our mobile apps and engross us in an app where the interface fades away and let you accomplish what your set goal is.

Advertise here via BSA

Nowadays everyone wants their stuff to be unique and custom. What a better way to be unique then changing your OS’s app icons right? Well, I’ve got you covered. Here are seven amazing resources for great icons to be used on your desktop & on your apps. **UPDATED: More based on your comments!**

1. Iconfactory

Icon factory has always had a selection of beautiful finely crafted icons. They are responsible for the beautiful UI of Twitteriffic & Ramp Champ.

Do one thing and do it well. If ever there was a philosophy for what we do here at the Iconfactory, this would be it. From day one we have dedicated ourselves to being the best in the challenging and niche field of icon design.

2. 365 Icon

Whats better than an icon site? One with an icon for everyday of course.

3. We Love Icons

We love icons. Do you?

We Love Icons is a joint project by Guifx designers Dan Wiersema and Nando Albuquerque. We started We Love Icons because, well… we love icons! Our sole purpose is to provide you with ONE place to go to find links to the BEST freeware icons on earth.

4. Interfacelift

My Interface needs a lift. I can has?

Interface lift has always had great icons and backgrounds. They have iPhone backgrounds in their arsenal too. If you like to change your background several times in a month and love customizing things this is your place!

5. Prettify

Dang. That there is prettified.

Nice icons and wallpapers for the discerning individual, collected and curated.

6. Deviant Art

I need some art.

With over 80,000 images uploaded a day and 2 million hits its hard to argue that there won’t be fresh content here daily. They have icons all over the place as well as anything else that the word “art” could encompass. Check it out.

7. Pixel Girl Presents

Pixie Girl to the rescue.

A recent favorite of mine. Pixel Girl has a copious amount of icons on her site and a good amount of cartoon/illustrated ones. This is definitely a site worth checking out.

Extra Resources from Comments:

Where do you like to grab your icons from?

IconFinder

Iconerz

Advertise here via BSA

Recently I have been scouring the web high and low to bring you the best app news, resources and information. Here is a list of some well designed app related sites from along the way. What are some of the sites you have run across this week? Put your thoughts in the comments!

Thermometer App

Typography App

Sifter

Notify

Mozilla Labs

Mobify

Meta Lab Design

Livestream

Teehan Lax | Labs

JUFTi

Firerift

Fileshare HQ

Convertbots

Bottle Rocket Apps

Advertise here via BSA

In an effort to help the community as a whole I am releasing  “An Ever Growing iPhone Resource Thread”. The point? It’s simple. We are all busy. We all need to finds things fast, learn, download and move on. So, I am trying to compile a big list of all things iPhone. However, I need your help. I have started with a small amount articles, downloads and information in hopes that you will share your favorites over time in the comments. Just copy and paste the link in your comment and I will do the rest. On the the content!

**UPDATED**

9/23/09

10/15/09

11/11/09

Articles:

iPhone Human Interface Guidelines

Phone and iPod touch are sophisticated devices that combine the revolutionary Multi-Touch interface with powerful features, such as email and instant-messaging capability, a full-featured web browser, iPod, and, in iPhone, a mobile phone.

The Making of Things iPhone

One of the first major design decisions was to either have a Tab Bar or a Toolbar.

We liked the idea of a Tab Bar very much as it allowed to quickly browse your tasks from different perspectives (by Projects, by Tags, by Due Date, Search, …)

How to Create Your First iPhone Application

What if you had a nickle for every time you heard: “I have the perfect idea for a great application!“? It’s the buzz on the street. The iPhone has created unprecedented excitement and innovation from people both inside and outside the software development community. Still for those outside the development world, the process is a bit of a mystery.

App Store Heresies: Higher Price, Better Ratings. Don’t Discount Your App At Launch

Lower your price, lower your ratings. Lower ratings, lower social proof. Lower social proof, lower sales. That’s my theory, and I’ve got data to support it.

Inspiration:

60 Sleek and Sexy iPhone App Websites

Like most of Apple’s expensive toys, the iPhone is a beautiful piece of kit. Its cool curves and bright display seem perfectly suited to sleek, glossy web design. Here’s a big bunch of lovely iPhone app websites for your admiration and inspiration.

Downloads:

iPhone GUI PSD

Over the past few months we’ve had to create a few iPhone mock ups for presentations. The problem we’ve encountered is the lack of resources to help us design something efficiently. Up until now we’ve used a nice PSD from 320480.com but we still found ourselves having to build out additional assets or heavily modifying bitmap based buttons and widgets.

iPhone PSD Vector Kit

Today, we are glad to release the iPhone Starter Kit, a set that comes with several button elements as well as six different iPhone interface options. This pack may be useful for mobile developers and front-end designers who need a professional way to show mock-ups to clients or to work out ideas. This set was designed by Renee Rist especially for Smashing Magazine and its readers.

Ultimate iPhone Stencil

This is the ultimate stencil for folks designing iPhone interfaces.

• Contains backgrounds, title bars, buttons, selectors, and other iPhone UI elements

• Text is fully editable on lists, title bars, buttons, and scroll wheels

• Buttons can be resized horizontally by ungrouping, resizing the middle element, and then regrouping the elements back into a single button

iPhone PSD file

iPhone PSD for snapshots, icons, etc… Made entirely in photoshop. Based on the iPhone design by Apple Inc.

Resources:

MobileLex 2009

Sam offers his Keynote slides from MobileLex that highlights:

How I Made an App that Has Over a Million Users

Scrolling Like Butter

Web Services with Cocoa

iPhone Development: The Why and How

I cover what your options are for iPhone development and some tips and resources on how/where to get started. I also speak about how to maintain a good user experience with your iPhone development. Check it out!

The definitive iPhone user interface gallery from Engadget

After getting our hands on the iPhone we set ourselves the irresistible task of photographing every conceivable menu option available to us. So here it is: the definitive iPhone user interface gallery, almost 300 images deep. If you’re the type to obsessively pore over every possible menu, submenu, setting, and function in a new device, this one goes out to you.

Coding:

iPhone View Switching Tutorial

The world of iPhone development can be a bit of a daunting task and irritating at times. I’m the kind of person that likes to do things from scratch as much as I can. So when I headed down this path, I decided to start with the simplest template and create a very, very easy app: creating 2 views and switching between them.

14 Essential Xcode Tips, Tricks and Resources for iPhone Devs

Cutting Through The Clutter

We’ve collected a set of tips, resources, how-tos, tutorials and links ranging from newbie-to-expert to help you wring the maximum amount of productivity out of Xcode.

Learn How To Develop For The iPhone

We’re going to start off with 2 psd’s I made and get those working in an iPhone page. I am using images for the background and header although you could use just straight colors instead of images.

Tools:

Notepod

What’s a Notepod 3-Pack?

Three 60 x 110mm, 100pp Notepods printed on both sides. 80gsm laser throughout with a stiff black strawboard back.

Design Comission iPhone Stencil

- Layout Nav Bar, Tab Bar and Keyboard
- New overlay icons provide cleaner look
- Additional icons
- Overall dimensioning and layout improvements

Quickly sketch out iPhone UI prototypes. Brainstorm your application ideas using our precision cut stainless steel stencil and mechanical pencil.

Mobile Sketchbook

• 100 pages of to-scale design templates
• One organized place for User Interface Designs
• Get your designs down on the Sketch Book today!

What Not To Do:

iPhone Apps Design Mistakes: Over-Blown Visuals

The development of iPhone applications has recently become a hot topic in the design community; everybody tries to come up with some creative idea, port it into a stylish iPhone-alike application and sell it to thousands of users through the iPhone app store. However, many of these applications are poorly designed and therefore miss the chance of providing users with a truly useful product that users would find worth recommending to friends and colleagues.

Advertise here via BSA

An important part of having a successful app is having a well thought out interface and icon design. In order to do that it is important to see what other people have done and where to find resources to make the best icon/interface possible. In order to do so FYA is going to release a series of “design” related posts geared towards interface and icon design. These posts will break down the designs, show where to find inspiration as well as give your great resources to learn from the great icons that have already been established so you to can make your app have an amazingly effective user interface as well as a stunning icon design. These are few resources to get you started on your icon & interface design journey.

Apple Human Interface Guidelines

Aqua offers a photo-illustrative icon style—it approaches the realism of photography but uses the features of illustrations to convey a lot of information in a small space. Icons can be represented in 512 x 512 pixels to allow ample room for detail. Anti-aliasing makes curves and nonrectilinear lines possible. Alpha channels and translucency allow for complex shading and dimensionality. All of these qualities allow you to create lush, vibrant icons that capture the user’s attention.

40 Tutorials for Creating Highly Detailed Icon Designs

As icons appear in larger sizes through appearances in Mac applications and rich user interfaces the icon designs themselves are becoming more and more detailed. Check out this collection of 40 of the best icon design tutorials from across the web, each covering the process of designing a highly detailed icon graphic in Illustrator or Photoshop.

Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Designing a good interface isn’t easy. Users demand software that is well-behaved, good-looking, and easy to use. Your clients or managers demand originality and a short time to market. Your UI technology — web applications, desktop software, even mobile devices — may give you the tools you need, but little guidance on how to use them well.

Designing Interfaces: Patterns for Effective Interaction Design

The title of the book is its chief personal design premise. All of the tips, techniques, and examples presented revolve around users being able to surf merrily through a well-designed site with minimal cognitive strain. Readers will quickly come to agree with many of the book’s assumptions, such as “We don’t read pages–we scan them” and “We don’t figure out how things work–we muddle through.” Coming to grips with such hard facts sets the stage for Web design that then produces topnotch sites.

42 Amazing Photoshop and Illustrator Icon Design Tutorials
This article is a compilation of the best Icon Design Tutorials, I think everyone will be able to learn something new from these tutorials.

The title should have been 41 Amazing Photoshop and Illustrator Icon Design Tutorials and also not Forgetting the Single Gimp Icon Design Tutorial. (A little long, don’t you think).user’s attention.

30 iPhone Apps with Sexy Interfaces -

The iPhone is a wonderfully designed device, sporting sleek curves and oozing minimalism. Fortunately, the great design doesn’t need to stop there. Ever since the App Store went live, we’ve seen some incredibly attractive software released for the platform..

[Fireside Chat] Icon designers (Part 1 of 3)

This is Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago. Visit the Product Blog for more information on our products.

iPhone Apps Design Mistakes: Over-Blown Visuals

We want to take a closer look at the design of iPhone applications and showcase some good and bad examples, best practices as well as useful ideas and recommendations for your next iPhone app design. This article is a first post of a new series related to the design of iPhone applications.

10 Tips for Effective Icon Design

We Love Icons:

We Love Icons is a joint project by Guifx^® designers Dan Wiersema and Nando Albuquerque. We started We Love Icons because, well… we love icons!

Our sole purpose is to provide you with ONE place to go to find links to the BEST freeware icons on earth.

10 Mistakes in Icon Design

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

25+ Fresh Icon Designers & UI Ninjas

We recently needed an icon designer for a quick job and it was far more time consuming that we thought to find a good freelancer portfolio for this kind of work. So we spent a few more hours and came up with this awesome list of icon designers and UI professionals.

Icon Resource:

Let yourself be taken by the hand through the world of visual interface design, and learn how to design icons for your own application, website, or company. Here a few reasons why it’s worth checking out; Learn all and even more about icon design in full HD quality Quicktime format movies.Icon Resource provides iPhone / iPod ready videos to load into iTunes and watch on the road.

Advertise here via BSA

Want to know how to make your App a smashing success?  Fuel Your Apps recently sat down with Jay Hilgert (Bittbox), to get some insight into his experiences bringing BrushPilot (the photoshop plugin mac app) to the masses. Below is the interview:

Where did the idea of Brush Pilot come from?

Well, I really wanted an app Like Brush Pilot, and after being frustrated trying the clunky java versions around and not having any luck finding anything suitable, I decided to take matters into my own hands. It was a risk, but I was certain that there were other people like me out there who could really use an app like Brush Pilot.

At what point did you decide ok, this is going to become a reality?

After I found a developer, we had some conversations about how long it would take and how much it would cost, and I decided that the benefits outweighed the risks, so I set things in motion and never looked back.

How did you take the first few plunges into the app? Sketch out the app? Hire a developer? Do it yourself?

Well, I started in Photoshop and went back and forth with my developer with how the app should look while he started the backend development. We made a few UI changes as we figured out which features we could include and after that, we started testing away.

Where did your pricing come from? Affordability? Enough to cover your overhead? etc.

I wanted it to be affordable. I know people have been waiting on this app for a long time and I wanted it to be affordable enough for anyone to enjoy it. Plus, I didn’t want to over-price it for version 1. There are still a ton of improvements we can make to Brush Pilot before it becomes a $20 app. I wouldn’t feel right charging more than $15 at this point in the app’s life.

What were the key features you wanted to capture in Brush Pilot?

Lightning fast previews was my top priority, and I have to say, my developer did a great job on that. The speed of Brush Pilot wouldn’t be possible without Spotlight technology, and I’ve had some complaints about relying on Spotlight, but let’s face it, Brush Pilot is up to 50x faster than ABR Viewer (open source Java app). I even tested it with 5.5 Gigs of brushes on an external HD and it only to 5-10 seconds to populate the file list. I’m very happy with the speed, and how lightweight the app turned out to be. Another thing I concentrated on, was the file system. I thought it was important for users to distinguish which of their brushes were installed, and which ones were not. This way you know what’s going to show up in you list of brushes when you fire up Photoshop. Also, the ability to install and delete was essential in order to truly be a useful app. I thought to myself “It’s nice to be able to preview the brushes, but if I have to open finder and move the files manually, it would just be a pain.” That’s just a few of the big ones we concentrated on.

How have you been marketing the app? (soft release? Your blog? twitter ads etc)

I started out with posting about it on my blog BittBox.com, then proceeded to Twitter, email, etc. I just recently got an affiliate program working, so if anyone has a Photoshop related website and wants to earn 20%, you can always drop me a line at brushpilot [at] gmail [dot] com.

What is something you took away from the process that people making new apps like you did would gain insight from?

It always takes longer than you think. I guess you could say the same about web design, but making an app, there are so many little things that can easily be overlooked. Test, Test, Test. Even in the early stages, send it out to people you can trust to test because everyone uses their computer differently and they might find a bug in 5 seconds that you haven’t found in 3 weeks. Also, keep an eye on Apple coming out with “Resolution Independent” UI for their software. From now on, to be on the safe side, I would do all my UI design in vector format.

Have you been bitten by the app bug or are you already thinking of something else to design?

I’m going to try and perfect Brush Pilot before I start thinking about anything else. There are still plenty of enhancements I’d like to see in version 2: Drag and Drop is a must. Renaming files, Shift + Select for installing/Deleting, full size PNG export, just to name a few.

Did you design the logo for Brush Pilot and how did you come up with the name? Has it always been called this or has it changed?

No, actually I hired a company that specializes in icon design, and they are very affordable. www.artua.com I’m a graphic designer, but icon design is a different animal, so I decided to leave it to the pros.

About Jay Hilgert (Bittbox)

He graduated from Oklahoma State University in 2005, with a BFA in Graphic Design and ended up getting a job at a small design firm in St. Louis. While in St. Louis, He started BittBox.com and after a while, ended up quitting my job to blog full time. Jay moved back to Oklahoma City where he currently runs BittBox, design fonts, and now is in the software business, so you can imagine, he spends most of his time emailing people theses days :)

Want to connect more with Jay?

Site | Twitter | App Site

Advertise here via BSA

An interview with Mike McDerment, CEO of FreshBooks

“Billing should be simple.” Is one of the underlying principles to FreshBooks, what personal experience drove you to creation of this app? At what point did you say: “I have had enough…. I need to make my own version of this” ?

In January 2003 I was using Word to invoice the clients of my design agency. When you use Word, the best way to invoice an existing client is to open an old invoice that has the client address info in it already, then enter the new invoices details. So that’s what I did – I opened an old invoice, entered the new info and saved it. Then I said, “F$#%^$%^%$!!!” because I forgot to rename the old file so I lost the old info. That was it, I literally said, “there’s got go be a better way” and I spent the next two weeks of my spare time and built an online invoicing service to bill my clients.

Tell us a bit about SoftwareasaNetwork.com

Software as a Network (SaaN) is an approach to the design of web apps. Traditionally business apps have been designed as silos. You have your account, and you invite me into it to do work. I have my account, and I invite you in. Trouble is our accounts are distinct entities in this paradigm and I have to log into your account, you have to log into mine and managing all those URLs, usernames and passwords is a massive headache. Enter SaaN.

When you build a web app, you want to start with the network you want to build in mind. Then you want to build experiences around the individuals in that network. Silos aren’t necessary –and they never were – they’re the result of short sightedness on the part of designers and developers. Accounts should talk to each other and each user should be able to stay within their own account to get their work done.

I have an analogy I like to explain this. Lots of people use collaborate remotely using web apps. Many times they do it from within their own homes wearing pajamas. If two people choose to work together, neither is forced to relocate themselves to the location of the other. Why does software insist that you do? With FreshBooks’ online time tracking and invoicing network, our users stay inside their own accounts to get work done – they don’t need to relocate – even if they are working for someone else.

How did you come to the decision to launch and expand on a new model?

The inspiration for our networked model came from my own pains, and those of our customers. I used to run a design agency, and I worked with contractors who did software development. In the early days I used to bring in all the work and dole it out to my contractors, but as their businesses grew, they started inviting me to do their design and project management. The consequence of this was – at any given time – I might owe someone $7000 for their work, and they might owe me $12,000 for mine, but since we were using Word and Excel and/or QuickBooks to do our invoicing, it was incredibly hard to figure out who owed who what without actually doing forensic accounting and sorting through a million emails. This whole process stunk, and it ate up time and energy. At FreshBooks customer dinners across North America we heard about these pains time and time again from our customers. FreshBooks’ online invoicing network is the solution to this problem.

Since FreshBooks accounts now talk to each other, it’s easy to tell who owes you money and, what you owe them. When another FreshBooks account holder invoices you, you can choose to receive their invoices inside your FreshBooks account. If you have 10 contractors who are all invoicing you, you now have a standardized platform to receive all your invoices instead of getting 3 different Excel templates, 2 QuickBooks invoices and 5 faxes. The time savings working on a platform like this is enormous. That is just the invoicing part of the equation, what about time tracking? FreshBooks covers that too.

If you have contractors who bill time on your projects, now you can manage them easily in FreshBooks. Simply add a contractor to a project and they will get an invitation to join your project (if they don’t already have a FreshBooks account they can get their own account for free and at no cost to you). When they log hours to your project from within their account, you can see those hours and stay abreast of their contributions. Also, as I’ve outlined above, it’s dead easy for them to invoice you when their work is done.

Got privacy concerns? FreshBooks manages all the sensitive data, and only shows it to the right people at the right times. Your contractors never see your client’s name or address, and your clients don’t see your contractors. Your contractors can set a rate to bill you at, and you can rebill your contractors to higher rates without your clients or your contractors ever knowing. This is how it’s done in the real world, so we built FreshBooks to manage these pieces of your billing process.

Your UI is simple and clean. Why is it important for the UI to blend into the background so the user can concentrate on the point of the app?

I played a bit of hockey growing up (bear with me here), and I played defence. You know the mark of a great defencemen? You don’t notice them. I’d say the same is true of your application when someone uses it – you want them to get into an unconscious flow where they don’t even notice they are using your application. If they do notice it, you want them to be experiencing surprise or delight (“that was…fast, helpful, easy, hilarious…”) – kind of like when a defenceman scores. J

So with that in mind, I like to distinguish UX (User eXperience) rather than UI (User Interface) – it drives the point home that you are designing experiences, not interfaces. We have a concept at FreshBooks called “4E”, which stands for “Execute on Extraordinary Experiences Everyday”. We’re in the experience business and using our app is part of that process, and so is calling us on the phone or sending us an email. It all matters, and while the app is the core, we think in terms of a holistic experience and every step in your app is part of that.

Need More Freshbooks?

Site | Twitter | Software As A Network

Advertise here via BSA

Elliott you describe yourself as being someone who makes complicated web apps. What would you consider to be complicated?

That’s a good question. It’s really a bit of a marketing line – most of my apps are actually very simple. I guess it really means that I build apps which can do some involved, and traditionally difficult things – but by using powerful tools, they’re easy to do. What used to take hundreds of lines of proprietary code, now takes a few elegant lines of re-usable code.

Filetweet is an intuitive idea for twitter. What prompted the idea and what problems did you run across?

Well, I’d been dealing with files and attachments in applications, and I was trying to come up with an app which filled a specific gap. Sending files on Twitter has been done before, but not very elegantly – and only with Basic Auth, where you give someone your password. I thought I’d try and make a simpler one. It helps to imagine a tweet as a tiny email. You’ve got a sender and a recipient, and you’ve got content, but you don’t have attachments. Sometimes it’s useful to draw these kinds of silly parallels.

I came up with the idea and built it that night – it wasn’t too difficult. It uses S3 for storage, and the fantastic Twitter Auth plugin. Actually, just before I was about to launch, Twitter changed an API setting which broke quite a few Twitter OAuth apps. We all had to downgrade to an older version of the gem, which doesn’t break with Twitter, just to get things running again. It only took a couple of hours, but it sure was conspicuous timing.

Why did filetweet become something that you felt users on twitter needed?

People share files with each other all the time – by email, over IM, in web apps – I figured I’d just make the process one step easier. That’s the trick: if you can make an everyday activity easier for someone, you’re ahead.

From your site I get the feeling you’re fun and relaxed. Why is this an attitude that helps you in your everyday tasks?

It’s good not to take yourself too seriously – at least from time to time. It lets you keep a healthy perspective on what you’re doing, and I guess it helps to makes you more approachable.

What recent things have you had in the pipeline?

I’ve done a few apps recently: Spreadtweet, a Twitter client that looks like Excel, Blocky, a Twitter spam-blocking app, Whobuilt.it, which lets you claim the sites you build, FileShare HQ, an FTP file sharing app – it’s been a busy year!
None of them other than FileShare HQ actually make me any money, but I guess that’s how it goes. They were all a lot of fun and great publicity, and people seem to find them useful, which is very rewarding.

If you had one mulligan (do-over) in your career what would it be?

Hmm, good question. I think I would’ve tried getting into Rails earlier – I remember looking at it when it was new, and thinking, “That’s a bit too tricky.” Turns out, there’s a lot to gain from difficult things.

What are the 5 most valuable apps you use on a daily basis?

Reddit, if that’s an app. Twitterriffic, Textmate, GMail, and Basecamp. Other than that, Safari. Oh, and Skitch. I also use Spreadtweet constantly, just so that when people ask me this question I can plug my own app.

For Carsonified’s event booking system: what were some of the steps you had to take to make reliable app?

I liked the error reporting and 500 pages the best. On the very rare occasion that something went wrong, and the site served up an error page, the user was given about 5 ways to contact me directly. This turned out to be great, because I’d get an automatic notification that something went wrong, and I’d be half-way through fixing it by the time I got the user’s email. Sometimes, you send out a message to someone who’s having difficulty, and it’s the last thing they’re expecting. It’s hard to imagine a website being in touch with its developer in real-time, so it’s a welcome surprise when someone says “Hey, it looks like you’re having trouble booking – how can I help?” Error pages are inevitable. Unfortunately, if you do your job properly, you don’t get to do this very often.

We usually just avoid talking about error pages, but you have to deal with the realization that things do go wrong. It’s not always your fault – but you have to know what happened, and when, and most importantly WHO had the problem, so you can help them.

What is with your affinity for pink?

Interestingly enough, pink was a masculine colour before World War 2 – and blue was feminine. It’s interesting to see how completely the roles have changed, and yet how immutable they seem now.

As for me, I guess it’s gotten to the stage where pink is so stereotyped in one direction that I felt it’d be nice and refreshing to try and roll with it. It’s always good to have a visual identity – so someone can say, “I recognize this style; I know who this is.” As with fashion, pink is pretty inoffensive these days – if you’re confident, I think you can pull it off.

What are some great resources for new devs to draw upon to learn and grow themselves into better developers?

The internet, and your own spare time. There are far too many resources to name – everything is available 24/7, and everything is free – the only difference is your level of commitment. People are always asking me, “I’d like to get into development – where do I start?” I don’t actually bother answering any more, because these people never end up actually doing anything. If they were really interested, they’d already have started by themselves. It just takes time – spare time, weekends – in general, the more time you spend trying new things, the better you get. Asking for a shortcut before you’ve even started is just lazy.

Figure out who you really admire, and then just set yourself up to do what they’re doing. Chances are, they’ve spent a lot of time choosing a path. Once you’ve mastered that, then you can try and reinvent the wheel – but don’t start Day 1 by writing your own PHP framework, because you’re wasting your time.

If you do ask for someone’s advice, take them up on it. If someone suggests Rails, try Rails – there’s no law that says you can’t use more than one framework. People like to see their advice being taken seriously – if you spend time and effort giving someone advice, and then they don’t take it, why would you bother the next time?

Finally, once you’ve started, make sure that you can always look back at what you were doing 6 months ago and cringe. That means you’re improving!

Need More Elliott In Your Life?

Site | Twitter

Advertise here via BSA

1. What brought you into the idea of making CurdBee?

This was the time we were looking to smoothen the billing process since our inception in early 2004. At the beginning we had just a handful of client accounts to manage so the spreadsheet + .doc template solution was sufficient enough to send a decent invoice and keep track of the activity. But as we entered in to more contracts things got complicated with billing tuning to be a key priority with more work to do (e.g. periodic invoicing, collection tracking, etc.), which made us look for solutions available from paid to free, proprietary to open source, hosted to installable applications. There were quite a few excellent solutions but they were either beyond our budget or way too complex for what we wanted to. This made us think of creating our own simple solution to meet Vesess billing needs while saving time for more productive stuff. With this in mind, we created a single screen billing app and replaced our spreadsheet + .doc solution quite smoothly. Days passed and everyone started to talk about Web 2.0, with software as a service. New and innovative solutions were being added to the marked on a daily basis. We realized this would be the ideal time to enter the small business product market, which was an idea we had in the back of our minds for awhile. We selected our billing app which we developed for our own use as an entry point, and a few months down the line, CurdBee came in to play as a free service targeted at entrepreneurs/SMEs with similar needs to us, and yet enjoy simple solutions.

2. During your thoughts on branding and identity what other names did you toss around before you landed on CurdBee?

That’s what happens more often. You spend most of your time picking the name, looking for the .com availability than concentrating on creating a better experience, something even we did in our other projects. But for some reason, whether you believe it or not, CurdBee was the first and the last name we came up with for our billing application. CurdBee was the first project name we assigned internally since calling it “the billing application project”. By the time we completed the product, all the team mates were in love with that name and even the .com was available. In our culture Curd is a symbol of success, purity and Bee on the other hand stands for the efficiency and team spirit, both of which worked well with our product.

3. What kind of hurdles did you have to overcome in making the CurdBee application?

While the design and development of the product was not easy by any means, we were able to execute the idea on par with our original intentions. The hardest part in getting CurdBee out the door, then, was adapting it to suit our clientele. As new players in this field, we were starting out from scratch, and a lot of what we did was a trial and error process as we worked hard to ensure that the features which our future users would want were included in the application. After a lot of testing and debugging, the first version of CurdBee went live almost year ago (June 2008) and we discovered that we had hit the nail on the head. People liked the product and we were lucky to get featured in LifeHacker, MSNBC, etc. which resulted in more account signups. Since then, we have been constantly evolving based on our users’ needs, and this is what we plan to do in the future as well. Being a team from outside the United States and Europe, we also had to work hard to win our users’ trust, and did so by offering a totally free product for about 10 months. After we had a steady user base, we naturally took the development of CurdBee to the next stage.

4. If you were doing this all over again what is some insight that you could pass on to new app developers that would be beneficial?

Know the purpose of your application and who will eventually use it. Do adequate research and find out what majority of the users want in common, and then aim to develop those features without complicating your product by overloading it with features. Especially in today’s vibrant post-Web 2.0 world, there really is no excuse for creating products that nobody uses. Get out there, find out what people want, and make it. Be humble and ready to change – your users will always be the ones to impart the lessons you need to learn. If you ignore them, they will ignore you.

5. How important is keeping a clean and functional UI when making an app especially one that deals with something so critical like billing?

For us it’s all about the UI. Simple, clean and functional interfaces. It doesn’t mean we ignore other stuff like code quality, scalability, security, etc. when it comes to apps, but we strongly believe that the majority of the people put more weight on what they see and how they interact compared to how good the backend is when selecting their products. Billing is a common function to any business whether you are a lawyer, web designer or a plumber. So as the designers, our objective was to make billing, something you enjoy irrespective of your knowledge, computer literacy, experience, etc.

6. Through CurdBee you can customize your colors to make it to your liking. How is customization important to keep a users experience positive?

Yes, CurdBee does allow users to customize their branding by changing colors and adding their logo to invoices. However with the introduction of the PRO version, we have gone couple of steps forward by letting the users have full control over their messages (invoice notifications, reminders, etc.) and have created a platform with that focuses on features such as recurring billing, estimates, etc. We really hope these customization options would create a positive user experience allowing more users to fulfill their needs at minimum cost. Everyone wants to feel unique, and at CurdBee, we pride ourselves in giving each of our users the ability to customize their experience. We don’t like it when applications tell us how we should behave, and believe very strongly that people should be the ones in control. At CurdBee, customizability is at the very core of our design philosophy, and something that we focus on in every project of ours.

7. How do you discern what the right amount of customization is without loosing the integrity of your app?

We do get requests for more features, better customization options so on and so forth from our passionate users and some of them are of real value. But then again we are following a wait and see approach in deciding which features, customization request to roll out as higher customization / flexibility could make CurdBee a complex application for the average user and those who with simple needs. We’ve seen simple, clean applications getting very complex in trying to make them all-in-one

solutions, and this, we feel, destroys the user experience. This is one of the main reasons why we implemented an on-demand architecture, so the user can make the decision regarding which features he or she needs and still keep the application clean, simple and functional.

8. How important is safety in making an application that deals with users crucial information like billing?

Safety has always been a top priority for us at Vesess. From our early days, through the development of CurdBee and the recent release of CurdBee PRO, the integrity of our users’ data is of paramount importance to us. While we do undertake all the usual precautions when it comes to our server side security, we also recently began offering SSL secured billing with CurdBee PRO, a feature that many users will no doubt find attractive. In terms of code, all core components of CurdBee are developed and tested entirely in house, and we are therefore 100% sure of the quality of the application.

9. CurdBee offers PayPal and Google Checkout integration as well as multiple currencies and PDF support. How vital is integration?

Sending a bill to your client online could certainly make life easy for most of the people when they have more important stuff to attend. But what if we can go that extra mile by allowing busy customers to accept payments online? What if we can let them download PDFs directly and send it via email if they like? They will save both time and money which will make a significant difference at the end of the day, isn’t it? Everyone is trying to go global and do business with the world. So, if you can send bills in the currency preferred by your customer, won’t he or she be happy? At Vesess we use at least four currencies when working with clients from different continents and we have experienced this first hand, which convinced us to become one of the first billing apps to allow multiple currencies and make our product a usable one for the majority of people around the world.

10. Do you think the final outcome of making the app outweighed all of the struggle while making it?

Most definitely. It is a truly a joy to open up our stats page every morning and see new sign ups, and sent invoices. As a SME it’s truly a privilege to have the opportunity of helping so many others like us. The development process was long and difficult, but the rush of creating a web application that is used the world over cannot really be explained in words! It really is a wonderful feeling to be of service to others. This is our first attempt at developing an application and it was a great learning for the entire team. Although we had experience creating apps for our clients, we mostly handled the tech side of those but here we had to get the app out and then start working really hard to get the word across to our future users as well. With the PRO version coming into play we have opened a new revenue stream for our product and it’s encouraging to see more and more users going PRO, which in turn confirms that they value our service and are willing to support us to make CurdBee an even better product.

——————

Where Can I get more Curdbee?

Curdbee on the web | Curdbee on Twitter | Vesess Site