How to make a good app? Here’s the short version: the secret to making a good iPhone or iPad application is pretty straightforward–you need a solid, simple concept and a great user interface. So many of the apps out there do not get this or do not do it right. The outcome is ultimately the same: the app does not sell.
Category Archives: iPhone
Boxwave Capacitive iPad Styra Stylus Review
I needed a stylus simply for testing purposes, as I am working on an iPad app that you can use to write and draw. Since I do not have the need for a stylus apart from testing, I decided to buy a super cheap one on eBay a few weeks back. I’ll make that sort of mistake no more. The stylus was useless. Even tapping was a problem as it required me to press fairly hard against the surface. While I did not expect a quality product for a couple of dollars, I certainly did not expect a useless one. Soon, the stylus found itself in the trash bin.
My next plan was to invest an hour or so into making a DIY stylus. I found some videos online and even found a way to make use of an old aluminum marker. The DIY stylus was actually much better than the eBay one, but I still could not do proper testing. The tapping worked OK, even the writing was fairly easy, but I lacked the precision I needed.
Plan C it was. I decided not to waste more time and order a proper stylus. The decision was an easy one as Capacitive iPad Styra had great reviews and looked really nice. My second choice was Pogo but from what I saw and read online, I liked the Boxwave one much more.
My winter white Capacitive iPad Styra Stylus came in yesterday morning, nicely secured inside a bubbly package. It looks elegant and classy, unlike some of the other products I saw online, which look like a kid’s toy. The stylus is also a ball pen, which may come in handy sooner or later. It is nice and compact, about as tall as the iPhone. It’s heavier than I though it would be, but I am really starting to enjoy the weight of it, it feels and fits nicely into my hand. The tip slides on the surface perfectly and seems to be made from a durable material, as in fact the whole product does.
Capacitive iPad Styra worked on my iPad and my faithful first generation iPhone without any problems whatsoever. Don’t let the rather big, rounded tip fool you–it allows you to be precise in both writing and drawing. I tested it on about a dozen of popular writing/drawing apps and it performed admirably. The same cannot be said for most of the apps though–their technology does not allow for genuinely smooth writing or drawing. There’s either a very slight but annoying delay or the edges of the lines you create are rough. These apps are pretty much useless to me, despite some nice features they may have.
Up until now, aside from work, I’ve been using the iPad mostly for reading. Now, I can use it for quick notes. Jotting things down is almost as easy as doing it on paper. If you’ve tried writing with your finger on the iPad, you know it’s not that easy. With a solid stylus, it is both easy and really fun. Sketching is another thing I will surely be doing in the future. Decluttering my desk and getting rid of as much paper as possible is something I’ve been wanting to do for a while. With a proper stylus, I can do sketches and email or upload them in no time. I can see this becoming a part of my work routine.
In conclusion, I can definitely recommend Capacitive iPad Styra to anyone in need of a quality stylus.
Healthy in a Hurry App mockups
I’ve had the pleasure of working on the Eating Well – Healthy in a Hurry iPhone app earlier this year. I was comissioned to contribute to the graphic and usability aspects. You’ve already figured out what the app offers: fast, healthy, yummy meals in your pocket.
Since some of you were curious to see my work on iPhone apps, here are a few screenshots from Eating Well. Note that these aren’t screenshots from the final product but some of the mockups I’ve made in the design process.
These are the loading screens. We opted for the first one because the meal looks more appealing. I chose to take the veggie colors from the photo of the meal in the second screenshot and use them across the UI.
My early experiments with Marker Felt were rejected, rightly so. In the end, we went with Helvetica.
Still, because of the small amount of pre-installed fonts, Marker Felt seems like one worth worth experimenting with in apps such as this, especially on headings.
You can see the Helvetica in action in the menu screen here. The dishes are categorized and given a color label. With food filters, you can quickly find the type of food you want.
The seafood icon has an outer glow to suggest it is “active” after the tap.
Time filters allow users to filter meals by the time needed to prepare the dish. The icons represent 15, 30, 45 and 60 minutes respectively.
Mmmm… delicious! :)
iPhone App Design Tips
Over the last year and a half or so, I’ve been involved in designing several iPhone applications. Designing iPhone user interfaces is a lot of fun and may seem a straightforward design job to some of you folks. There’s more than meets the eye, though.
The task of a designer is not only to make the UI look good. It’s only a part of the job. What a designer is creating is user experience, which requires skills beyond a graphics editing program. Good graphics alone will not make the application usable.
Apple provides extensive iPhone Human Interface Guidelines, which is what you should read if you are creating apps. Here’s what my own experience taught me:
Simplify
Probably goes without saying and falls into the obvious category, but you need to keep things simple. If you’ll remember only one thing from this article, then make sure you remember to keep it simple.
iPhone users love a clever app but not a complex one. Simplicity leads to usability. On the other hand, your app can become very difficult to use if you overcomplicate things.
Avoid Clutter
As any experienced designer will tell you, clutter is a failure of design. Don’t try to fit too much into the small and unique iPhone screen. It won’t tolerate a large amount of information. Focus on the most important elements and features.
Ensure you have plenty of space between tappable elements, so the user does not tap the wrong button by mistake.
Follow the iPhone Convention
The iPhone interface, like pretty much all Apple interfaces, is great. You can learn a lot from simply following the iPhone UI conventions. Get familiar with preinstalled apps and learn from them. By learning from Apple’s interface and user experience, you will learn from the masters.
Remember, iPhone users are used to the native apps and expect a similar experience from your app.
Give Special Attention to Typography
The iPhone comes with a limited number of preinstalled fonts. Use them with caution. If you’re not careful, a Trebuchet MS here or a Times there could ruin your UI.
Your text needs to be easily legible. As I have mentioned before, it is safe to follow the default iPhone UI, which uses the lovely Helvetica. Study where and how Apple uses small font values. No one wants to bring their iPhone all the way up to their nose to read the text.
Ensure quick navigation
Everyone wants the app to be smooth and quick. Besides making the app and the screens load fast, the navigation must be done in such a way that the navigation between screens is fast. Ensure an intuitive and recognizable navigation system throughout your app.
Non-standard navigation controls can cause problems. Avoid website-like horizontal navigation menus. The iPhone screen is not a website screen and therefore you cannot use the same principles.
Your users are smart
iPhone users are smart and will learn their way around your app. Not everything needs to be obvious at first glance. For instance, you can let your users discover all the corners of the app and find out for themselves if a part of the UI is tappable or not.
That’s all, folks. Hope this has helped some of you.
iPhone-like button in Photoshop Tutorial
Here’s a tutorial on how you can design an iPhone-like (or Apple-like, if you will) button in Photoshop. You can quickly learn how to design the button even if you don’t consider yourself very skilled in PS.
The important thing is to closely follow the instructions, so be patient and read carefully.
This tutorial can come in handy if you want to design any sort of Apple or iPhone inspired interface.
- Knowledge needed
- Basic, getting around Photoshop
- Time needed
- 10-15 minutes
Here’s how your custom button will look once you finish the 5 steps of this tutorial:
Step 1
Create a new document and draw a rounded rectangle with, say, a 4px radius. I have used 90px by 30px but you can use any dimensions you like for the button.
Step 2
The button will have a shiny, modern gloss, which you can achieve with a simple gradient. Add a layer style on your rectangle and apply a Gradient Overlay.
The solid gradient has 4 points, with the following colors: #000000, #222222, #444444 and #666666. These points are at 0, 48, 52 and 100 percent respectively.
Step 3
Next we’ll add the Bevel and Emboss effect, specifically the Outer Bevel (Smooth Technique).
Depth: 100, Direction: up, size: 1px, soften 10px.
Now the important part — the shading. Use the -90 angle and in altitude of light box, add the value of 40.
Set the white to the Normal highlight mode at 100% and the black to the Multiply shadow mode at 80%.
Step 4
We’ll add one more effect to finish the button, the Stroke. Use #222222 on a 1px stroke, with 80% opacity, positioned on the inside.
Step 5
One final step — the text. On the text, we will use the Bevel and Emboss again. Use the Outer Bevel with the Chisel Soft technique, at the depth of 130.
Direction: down, Size: 1, soften: 0. Use the angle of 90 and the altitude of 30. White: Screen at 0, black: Multiply at 50.
That’s it, you’re all done! In the example, you can see I have used a light, metallic gray gradient for the layer below the button. If you were wondering, it was done with a similar type of gradient as the one in the button itself.
If you wish to do so, you can also download the original .psd.