So I wrote this up recently for internal use at Inkling, and thought it might serve as a good general purpose guide for iPhone/iPad UI designers who work in tandem with developers. Hopefully it will help you work more efficiently and have more harmonious, fruitful partnerships!
Archive for the ‘It’s Not Rocket Surgery’ CategoryClick on one of the items below to go to the post
In Mac OS X applications, toolbar icons are the illustrative UI shortcuts that appear beneath the title bar. You’ll see a few different styles of these depending on the application, but generally speaking they are relatively small and colorful, meant to be easy to remember. If you plan to design toolbar icons, you should start with the section devoted to them in the Apple Human Interface Guidelines.
While the HIG has a lot of good information, it doesn’t go into the details of implementation, so I’m going to go through the process of how I would design a toolbar icon. I’ve chosen the iWork style because I really like how crisp and clear they are, and I think they are a good model to work towards.
Read the rest of this post…
The Macintosh platform is well-known for quality independent software, a fact that attracts an increasing amount of professionals looking to get away from overpriced and bloated enterprise software. Indie Mac software is usually well-tailored to a particular audience, has a streamlined interface with native controls, and comes at a bargain for the price. What’s not to love?
And yet, there is still one large (and vocal) market segment waiting for rescue from their corporate overlords. I’m talking about professional designers, photographers and artists, who continue to be slaves to Adobe and its golden goose, Photoshop.
Now, there are several independent apps out there that offer some of the functionality of Photoshop. Many of these are quite good: Acorn, Vector Designer, Pixelmator. But no graphics professional is going to use any of these apps instead of Photoshop, despite the much lower price tag. The problem is not that the apps don’t have useful features. It’s that they haven’t managed to target a segment of the population that uses Adobe software to do their job and present them an alternative with the feature set they need.
Well, I’m here to help. I’m presenting four professional user archetypes of Photoshop along with what features they would need to switch to another application. Note that they rarely overlap. Hopefully this illustrates the futility of appealing to all of these people at once. Pick one segment of users and fine-tune towards their needs.
Pierre the Painter
Pierre and others like him use Photoshop for something we call digital painting. Their typical workflow involves scanning a sketch or sketching onscreen with a tablet, then inking and painting the sketch with different kinds of brushes. They rarely if ever use vectors because they don’t have the same organic qualities as natural media, so they usually work at a very high resolution to allow for printing and exporting at a variety of sizes.
Brush editor: Size, shape, opacity, blending, pen pressure. The more options the better. Brushes are the crux of everything they do.
Peripheral support: Must work seamlessly with their pen tablets and scanners.
Color tools: A fully featured and prominent color palette as well as an eyedropper tool that they can easily swap to from the brush. Color proofing tools are important for artists who want to print their work.
Smudge: Aids blending, should ideally have similar options to the brush tool.
Layers: Pierre uses layers and layer blending to build up a painting from bottom to top. Changes to layers should be in the form of layer properties – in other words, you can go back later at any time and add/remove effects. (We call this non-destructive editing.)
Canvas texture: Natural media textures that affect brush dynamics on the “canvas.”
Line correction: Automatic line smoothing, perhaps as a brush option, would help correct a shaky hand when inking bold lines.
Where others have done it right:
Take a look at the oekaki phenomenon. Oekaki typically uses a simple web-based illustration tool and enjoys massive popularity in Japan and all over the world. Even though the feature set is relatively small, a creative artist can achieve a wide range of visual effects.
Corel Painter is also quite good, but much more complex and just as crufty as Photoshop in some ways.
Dana the Designer
Dana uses Photoshop primarily to create mock-ups and layouts, usually involving a fair amount of text. She uses vector tools to draw shapes and embellishments, typographic tools for text layout and headings, and bitmap tools to add images to her design. Assembling all the various pieces of a design into a cohesive whole means she needs to be able to work easily with many different kinds of graphic elements.
Robust typography tools: Design is 90% typography, so the more options here, the better. Kerning, anti-aliasing, conversion to paths – all the usual suspects.
Layers: The ability to move, group, lock, name and otherwise manipulate layers of all kinds is critical.
Layer effects: You should be able to add basic effects like stroke, drop shadow, transparency, etc. to any kind of layer. Same for blending effects. But keep it non-destructive! Anything you add should be removable later.
Basic vector tools: A pen tool, simple shapes and lines with the option for stroke/fill on any of them. Basic pathfinding tools (join, union, add/subtract) are a bonus.
Image masking: Designers often don’t require extensive bitmap manipulation (level correction, etc) but do need to fit these images into shapes in their design.
Grid tool: Rules and guides are a given, but additional tools to help you set on a grid with pleasing proportions would be great.
System anti-aliasing: For web designers. A text tool that emulates the system anti-aliasing you’d see on various kinds of computers.
Where others have done it right:
Fireworks (originally Macromedia, now Adobe) is a good example of an app with a boiled-down feature set for designers. It includes “lite” versions of many tools you can find in Photoshop or Illustrator. Despite not being as powerful, many designers prefer it for its relative simplicity.
Patrick the Photographer
Patrick uses Photoshop primarily for post-production work on his photographs. He imports an image from his camera, opens it at a high resolution and does level/color tweaks on the image. He may also use some limited drawing tools for clean-up.
Level/color correction: All the usual suspects for photograph enhancement. Non-destructive please! If you add a correction, you should be able to edit or remove it later.
Heal and clone: Used for cleaning up artifacts and photo manipulation.
Basic drawing tools: Airbrush-like drawing tools with blending options are helpful for enhancing a subject. Used often on pictures of models.
Quick mask: Easily isolate a subject or portion of the photograph for editing. The ability to have alpha properties on a selection further enhances this tool’s usefulness.
Automatic depth-of-field blur: Detect elements in the foreground and blur elements in the background. Useful for when you are working with low-quality photographs.
Photo browser: Interface seamlessly with the user’s library of photographs.
Where others have done it right:
Of the four archetypes, this one enjoys the best coverage on the Mac. Both Aperture and Pixelmator do a nice elegant job of working with photographs. Both of these are reasonable alternatives to Photoshop for professionals.
Ian the Illustrator
Illustrators and icon designers fall into the same group and generally need the same tools. They rely almost exclusively on vector tools to do their work, and the more powerful the better. They may work from initial sketches but otherwise rarely do hand-drawn work with a tablet.
Powerful vector tools: A well-designed pen tool, point/handle editors and pathfinding tools are all absolutely essential. Any path, once placed, should always be fully editable.
Gradients: Standard gradient fills are a must have, but many will also want mesh gradients or gradients that follow a path.
Export to standard file formats: One of the reasons illustrators work in vectors is so the final output can be resolution-independent. You should be able to export to a variety of standards like EPS, SVG and PDF. Bonus if you can export to AI as well.
Bitmap layer for tracing: Your canvas should be able to support bitmap layers so you can easily trace over photographs with the pen tool.
Icon preview: Automatically generate a view that lets you preview your icon at a number of different sizes on various backgrounds.
Hand-drawing tools: Tools that convert input from a pen tablet to paths are great, but even better when you can use different kinds of brushes that respond to pen pressure.
Where others have done it right:
Sadly, I can think of no professional-grade vector illustration tool. Some swear by the open-source app Inkscape, but I’ve never seen it used in professional circles and don’t have much personal experience with it myself.
Say what you will about Photoshop, it’s pretty amazing that one single app services all four of these archetypes. However, the flip side of that is that for any one of them, 75% of the app’s features are totally useless. Specialization and customer service is where independent software is strongest. If you can align yourself with your users, and if you listen to their needs, you will find yourself with a very willing audience. We all hate paying $1k+ to Adobe for a bunch of features we never use. We’d much rather pay $50 to an indie developer for exactly what we need.
Posted on 9 December, 2008 at 10:41pm with 5 comments
Hey. You there. Yes, I’m talking to you, Guy Who Hasn’t Written HTML Since 1998. And you, Software Engineer Who Can’t Be Bothered By UI. And even you, Stubborn But Secretly Insecure Old-School Web Designer. You know what CSS is. Chances are good you’ve heard a lot of people bragging talking about it. There’s a reason they do, and a reason you want to learn about it. Effective use of CSS greatly reduces code bulk and makes your design brilliantly maintainable, all without you ever having to think. Well, much.
I think the problem many people experience when trying to learn CSS is that they jump straight into the hard stuff (layouts, box model, browser compatibility) without learning the basic structure and behavior of the language. Here I’m just going to present you with a simple document and show you how to style the text on the page using CSS. You’ll learn about the different kinds of selectors and how inheritance behavior works, and it will hopefully provide you with a framework for learning the more advanced stuff.
It’s easier than you think. So leave your mental blocks at the door and come on in.
Read the rest of this post…
Posted on 8 November, 2008 at 1:05am with 9 comments
Going independent is a scary thing. You have to convince yourself to leave your job, be your own boss and be responsible for your own fate. There seems to be a dearth of good, specific documentation about how to take this step, so I’ve tried here to compile the best of what I’ve learned over the years. This advice is specific to design, but much of it also applies to consulting in any field.
Chapter One: Rates and Finances
Rule #1: You have to budget.
The first thing you should do (nay, must do) is to sit down with your favorite spreadsheet application and write up a budget. Figure out what your monthly expenses are, how much spending money you’d like to have, how much you want to save, and the cost of your health care (either estimated expenses or private insurance if you’re buying it). Add them all up and divide by 0.6 to account for taxes. Voila! That number is about how much you should aim to earn per month.
Remember this number. Cherish it. It’s your new best friend. Look at it when you get anxious about money – it will comfort you.
And I hope you caught that bit about taxes. You don’t have a company withholding money for you anymore, so you’ll have to be responsible in order to be ready when April comes around. Don’t worry though, I’ll explain how to prepare for that in a little bit.
Rule #2: Don’t work forty hours a week.
Now, what I mean is that you shouldn’t work forty billable hours a week, especially if you maintain multiple clients at the same time. There are a few reasons for this. First, people are simply not productive for that much time. It’s required in an office because of the inevitable inefficiency that happens in any company of reasonable size, but you are independent now and you can be a lot tighter about when you work and when you don’t. Work when you’re productive, rest when you’re not. What a novel idea!
Second, you should plan to spend about 5-10 hours a week doing off-the-clock work. This includes finding potential clients, writing estimates and contracts, and networking with your peers. This is absolutely essential to your success and if you don’t give yourself time to do these housekeeping tasks it won’t be long before you’re burned out and signing up to flip burgers at the local In-N-Out.
Rule #3: Be pragmatic about your rates.
Many people struggle with setting rates, especially as it can be difficult to figure out what others in your field are charging. A good starting point is to take your current salary, convert it to an hourly number, and multiply by 2. (Note: a commenter below points out this should be closer to 2.5 or 3. This is more in line with what your company pays for you and is necessary if you have overhead to cover. When in doubt, take the higher multiplier. It is far better to start high and adjust down than to start too low and have to scramble to make up the difference.)
Divide it into your magic number from Rule #1, and then divide by four to find out how many hours a week you’d have to work to make your target. You should be aiming for 20-25 hours a week, so adjust accordingly. If you want to work less, you have to charge more. If you want to (or have to) charge less, you have to work more. Work out an ideal balance that you’re comfortable with.
Now get out there and find some clients. The only way to find the sweet spot with rates is to do some actual work and collect data. Note the kinds of companies that you’re working for — you will probably find that smaller companies have less money in their budgets but more work to offer. Bigger companies often come with good rates but a lot of overhead. Many consultants have a sliding scale depending on the size and visibility of the company. Over time you’ll naturally develop a small range that gives you some wiggle room for negotiation.
Rule #4: Don’t be afraid to negotiate.
When quoting rates, always start high and negotiate down. I’m going to teach you a trick of sorts that can be used when a client is gunshy about your rates. Read the interaction below for an example of this trick in action.
Let’s go over what has just happened. First, Joe now has a data point about his rates. XYZZY was a little nervous about $75/hour. That doesn’t mean he should lower his rates for all clients, of course. But it does help inform his decisions about XYZZY or companies similar to it in the future.
Second, let’s discuss why Joe got a good deal even though he lowered his rates. Notice that he negotiated from an hourly rate to a flat rate – $1,600 for the whole job (up to 25 hours). In some ways this is a false discount for the company. It’s only $65/hour if he takes the full 25 hours to do the work, and if Joe is smart about how he uses his time there is a good chance it won’t actually take that long. He was also careful to quote the upper bound to the client. If you think a project will take 20-25 hours, always quote them 25. It’s good “potentially saving your ass” practice.
So let’s say he really boogies and it takes him 20 hours to finish the job. Doing the math, we find out Joe got $80/hour for that work, even higher than his original estimate. And the client is happy because they got it done on their budget. Everyone wins.
Now let’s say it really does take him 25 hours or more and ends up being $65/hour. It’s not such a good deal anymore, right? You might be surprised. Keep in mind that every client you have brings some amount of unbillable overhead in the form of communication, estimates, and contract writing. This means there is an advantage to taking fewer, longer projects. The fact that Joe now knows he will get at least $1,600 for his time is worth something.
Let’s take a detour and quantify what a longer-term contract is worth. I usually estimate about 5 hours of overhead for a new client. That includes the work I do to get that project rolling as well as the work I have to do to find them. At Joe’s rates this is about $375 worth of his time. He’s essentially saving himself this money in taking a steady project, so it is still worth it to him even if he has to lower his rates a little.
Of course, this isn’t quite as cut-and-dry as I’m making it out to be here. There are many factors that go into what you charge for a job. Here are just a few possible scenarios:
1. Web design for John’s startup. John is a friend of Joe’s and his company doesn’t have a lot of cash. Joe decides to discount to $60/hour.
2. Building a CMS template in PHP for a local school. Joe really hates PHP and quotes $120/hour, because that’s what it would take for him to actually do it.
3. Design contracting for BigCorp, Inc. Joe raises his rates a little to $85/hour, because he knows the large company can afford it and he has to deal with their annoying marketing team.
The more work you do, the more you’ll know how far you can push different kinds of clients, and how much you believe your time is worth. Use your monthly magic number (see Rule #1) as a guide, and remember that you’re free now to make your own choices about what you earn. No more begging for raises – you just have to earn them yourself.
Rule #5: If you’re not turning away clients, you’re not charging enough.
This is related to Rule #4. Negotiation is good and can improve your relationship with the client. However, if you find that you’re negotiating a lot and not often getting jobs at or above your target rate, you probably need to toughen up a bit and push harder for the higher rates. Some clients won’t be able to afford you and will go elsewhere. However, assuming your rates are fair and appropriate for your experience and work, some will stay and pay it. You never want to be in the situation that you are known for your low rates. Competing on price is the kiss of death.
Think of it as a form of supply and demand. The more you work and the more experience you have, the more your time will be worth. Your rates will go up over time to match the increased demand for your services. Think of it as a promotion, indie-style.
Rule #6: Give yourself a salary out of the “company” bankroll.
One final rule that will help keep you prepared for tax season. You probably want to set aside about 40% of everything you earn for taxes. One way to make sure that you do this diligently is to deposit your checks into a “company” bank account. (You did set up a fictitious business name, right? Of course you did!) Give yourself a “paycheck” out of this bank account once or twice a month, making sure to leave at least 40% of what you earned. If you find that you need to take out more than that to cover your expenses, you need to go back to Rule #1 and revisit your budget. Maybe you need to work more hours or ask a higher rate in order to make your target.
If you’re feeling saucy, you can use the company bank account for business-related expenses as well. Come up with a fair wage for yourself and leave everything else to reinvest into the company — purchasing advertising or office supplies, for example. Working for yourself takes discipline, especially financial discipline. Keeping your accounts separate is a good way to establish a mental boundary between what you earn and what you actually get to spend.
And as a corollary, doing your taxes as an independent is extremely complicated. You will probably want help in the form of a small business accountant. They can help you plan, deal with expenses and invoices and keep your taxes under control.
Well, that was a hefty chapter! But finance is a hefty topic when it comes to being your own business. The next chapter will cover writing contracts, details of invoicing and payment, and making sure your butt is covered legally. Feel free to leave any comments or questions you might have and I’ll try to answer them here. Angry tirades also accepted. Everyone is welcome!
That’s all for now. See you next time for Chapter Two: LeChuck’s Revenge.
No related posts.