-
What does 320dpi mean to designers? (2)
This article is a follow-up to the one I wrote before we knew for sure Apple would introduce a new iPhone with high resolution screen.
The past couple of days I’ve been turning the internet upside down in search for screenshots of the new interface to see how Apple “solved” the problems you get when you need to design an interface that has almost the same DPI as paper (here’s the best screenshot gallery I could find). Here’s a list of tricks and techniques I learned so far. Over time we’ll see more design conventions, but for now it’s just a lot of guesswork.
1.5 or 2?
As you can see in this screenshot, solid lines and drop shadow on text should be 2px wide. Subtle glows however should be 1.5px, here’s a screenshot of how you can do this in Photoshop with inner shadow:
Same settings can be used for a 1.5px drop shadow. You can also achieve this effect with inner glow or stroke (3px centered stroke, requires a layer mask to get rid of the part of the stroke outside the object).
Glyphs have a 2px solid drop shadow if that shadow done with code (in which case you only need to provide a flat PNG, but it was worth mentioning this for mockup reasons), if not you should use the 1.5px drop shadow
You’ll notice that if you resize this to 320×480 pixels, it’ll look like a sharp 1px line. I’m not saying you don’t have to optimize some images for the “older” iPhones, I’m saying it isn’t so bad as I expected it to be.
Rule of 2
If you’re working on your 640×960 pixel design, you need to think about this: Developers don’t use pixels to position objects on screen, they use floating points. If what I read is correct, on older iPhones one point is one pixel. This means that on the iPhone 4, one point is 2 pixels. What does this mean for us? Well all the objects you design should measure a multitude of 2. Designing a 50×50 pixel circle will turn out to be 25×25 on an older iPhone.
After some dabbling in Photoshop, I found a trick I think is worth sharing. Open Preferences and go to Guides, Grid & Slices. Change the grid values so it looks like this:
If you turn on your grid, it’ll look something like this (sorry for the blurry iPhone photo, Photoshop does some weird voodoo that didn’t allow me to take a decent screenshot of the grid):
Stick to this grid, and optimizing the interface for 320×480 pixels is a much easier job.
Performance
Wether you’re designing for the slower 3G or 3GS, or for the iPhone 4 that has the blazing fast A4 processor, performance is always something you should keep in mind. When working with the dev team that will turn your design into a real app, try doing as much as you can with code. The developers know how to draw gradients and lines and much more with pure code (a bit like CSS), and this has many advantages, not the least the performance gain and if Apple ever launches an iPhone with a resolution of 1280×1920 it will still look crisp and clean.
For objects that need an image, you should always provide 2 images, one for each resolution. The developers can select which image should be displayed on what device.
Testing
You gotta keep testing the interface you’re designing on an actual iPhone. Go outside and look at it in direct sunlight, turn off all the lights in the house and see how it looks in the dark. Are the buttons big enough/too big (an issue we all run in to because the DPI of our computer screens is so low and it’s hard to guess how what we’re designing will look like on the device)?
Something I do is I save all my screenshots in Dropbox. For this I recorded an action in Photoshop that will automatically save my current design to a flat PNG. As soon as you save the file Dropbox start uploading it to their servers. Grab your iPhone, open the Dropbox client, and boom, there it is.
In Photoshop, I go to Window > Arrange > Open new window for [filename], and then zoom out to 50%. It isn’t perfect, but gives you a much better sense of the scale you’re designing in.
I hope all this helped you out if you were wondering how to design for the screen size of the new iPhone. This probably isn’t all 100% correct, but until we can preview our designs on the actual devices, this is the best we can do.
More info can be found at Apple’s iPhone Application Programming Guide (account required).
-
Once you go SSD...
Last week I got fed up with system freezes that lasted a couple of seconds every time too many apps were accessing the hard disc drive of my MacBook Pro. That, combined that lately the HDD was making a worrying amount of clicking-sounds, made me bite the bullet and order a SSD (short for Solid State Disc, meaning there aren’t any moving parts in it, like the storage inside your iPhone/iPod Touch/iPad).
Trees, forrest, something something
Before I ordered it, I did some research. I asked around on Twitter and Googled like a madman. The land of SSD is still pretty young, and it isn’t easy finding a clear answer on what the best bang for bucks available right now. Here’s a quick list of the 3 best options I found during my research:
- Intel X25 series are considered the best you can get looking at speed and durability. The only problem is they max out at 160GB (at the time of writing).
- The OCZ Vertex 2 series, which go up to 400GB were also highly recommended, but apparently they’re hard to get in Europe.
- Crucial’s C300 series, which I bought in the end. The speed is insane, and I could get it delivered within a week (from this German site).
Installation
Now, I’m not much of handyman when it comes to hardware. When I still used Windows, I composed my own desktop from various different hardware vendors, but that’s about it. That said, installing the SSD couldn’t be more simple.
First thing I did was create a mountable copy of my current disc with Carbon Copy Cloner which took about 8 hours. After verifying it could mount, I opened up the back of my MacBook Pro, took out the HDD (there’s only one tiny screw holding it in it’s place), and replaced it with the SSD. That was the hard part.
Insert the DVD of Snow Leopard (or the DVD you got with your laptop), and press “c” to boot from that DVD. Let it load the install interface (about 5 minutes), and go open Disc Utility from the top bar. Partition the SSD (I just made 1 partition taking up all the available space), close Disc Utility and go back to the installer. Press next until you see the OS X bootscreen.
That’s it. No extra software or drivers to install, nothing. Now I did a clean install (my current installation was 3 laptops old), but you can also just copy the backup you made from your HDD to the SSD.
Here are some quick tips on how to easily backup the files you need:
- Go to your user folder, select Library and navigate into Application Support. Here’s where most of the apps you have installed store their settings and data. Copy the folders of the apps you know you’ll reinstall.
- Copy all the fonts you installed from your user folder > Library > Fonts
- Use MobileMe to sync all your contacts, address book entries, bookmarks, your entire keychain and much more (this saves you a lot of trouble).
- Copy over your entire Pictures, Music and Movies folder.
- Don’t delete the backup you made for a couple of months, there are always things you forgot to copy back out of it.
Usage
The reason I wanted an SSD instead of a regular HDD was that it uses less energy, is lighter, is cooler, doesn’t make any noise, and it’s supposed to be fast as hell.
Well let me tell you, that’s one heck of an understatement. It screams. Everything happens instantly. Here’s a short video I recorded showing how I launch iPhoto (with 17,000 photo’s in it’s library), and just start scrolling away:
My first generation unibody MacBook Pro feels like next year’s MacBook Pro, and I didn’t even upgrade the RAM. CPU speed these days is nothing more than sales talk, and RAM is too expensive to make a big difference in performance. SSD’s are still kinda pricey ($500-$700 for 256GB, $1000-$1500 for 512GB), but it’s an investment everyone should do if you work with applications that to a lot of writing/reading to the disc (biggest examples: Photoshop and iPhoto). They’ll come down in price quite a lot in the next 6 to 12 months, but don’t wait out and treat yourself with one as fast as possible!
-
Responsive Web Design
I linked to this amazing article by Ethan Marcotte before on Twitter, but it’s worth mentioning here again. We don’t just browse the web from our desktop or laptop anymore, we use portable devices with screen sizes and pixel densities that change the way we have to design. If you want to be prepared for what’s coming (and it’s coming fast), I recommend you read this article, start using the techniques Ethan describes, and don’t look back.
-
Tips and tricks to extending the HTC EVO 4G and Incredible’s battery life
- Get rid of the large HTC widgets like bookmarks and FriendStream
- Turn off widget animation
- Use a static background rather than a live background
- Turn off auto brightness, set screen backlight at 10%
- Decrease screen timeout from 1min to 15 seconds
- Keep WiFi, GPS, 4G off until it’s needed
-
Making droids look good
Sebastiaan de With on the design he did for the doubleTwist Android app:
It’s always a huge leap for a designer to come up with designs for a platform you’re not familiar with. I remember feeling extremely uncomfortable at first when I designed my first iPhone icons and interfaces, and while the iPad was a logical extension of the iPhone UI, it still felt like a significant step to take.
-
On Competition and Recommending Others
[someone] at our table was bemused to find out that we were in fact all freelancers competing in the same industry for the same types of jobs, sitting side by side. It came as a bigger shock to him to find out that we are all great friends who meet up regularly in both a professional and social setting.
I remember when I first had to forward projects, my parents thought I was nuts. They’re in the car-sale industry, and forwarding clients to other vendors is a big no-no. But like Sam said, the web(design?) industry is completely different. I trust him and many others with my life, and also with my clients.
Sam also announces an app he’s been working on for the past couple of weeks: Endorse (love that URL). It lets you create a list of freelancers you don’t mind forwarding projects to. You log in with your Twitter credentials, and can update your project status and areas of expertise. I’ve had the honor of playing with an early release, and must say this’ll be one of those tools you come across that give you that “Why didn’t I think of that?” feeling. I’m sure it’ll spread like fire and people are gonna love it.
-
Steve Jobs on the Stolen Prototype iPhone
You know, when this whole thing with Gizmodo happened, I got advice from people who said ‘you gotta just let it slide, you shouldn’t go after a journalist just because they bought stolen property and tried to extort you.’ And I thought deeply about this, and I concluded the worst thing that could happen is if we change our core values and let it slide. I can’t do that. I’d rather quit.
Pure gold.
-
D8 Video: Steve Jobs on Flash, Adobe and Other Technology Apple Doesn’t Use Anymore
Video highlights of an interview with Steve Jobs at D8 Conference. Steve is sharp, funny and honest. Can’t wait for his keynote at WWDC next week.
-
I Have No Talent
I am sick of hearing people say, ‘Oh, I love your code, I wish I could do that.’ You can. The only reason you can’t is because you don’t practice enough.
You can replace “code” with whatever you want. Great article. (via)
-
The tiniest of Photoshop tips
Neven Mrgan sums up a couple of Photoshop tips, which are especially useful if you do a lot of pixel-perfect work. Small tip of my own: Press and hold the shortcut key when you select a tool; when you release it, it’ll jump back to the previous tool you were using.