Designing iPhone Apps

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

20-Jul-10 04:11
This week in our newsletter ( http://www.elated.com/newsletter/ ) I talk about my recent foray into designing an iPhone App. Do any of you have any experience with this side of interaction design? I felt a bit out of my depth, so I'd love to hear about it!

Also, if you'd like to see a fuller version of this piece on the Elated site with screenshots and more detail, please let me know here.

Cheers,
Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
21-Jul-10 19:19
Simon:

I wasn't sure where you were going with this post. At first I expected you to talk about designing an iPhone app. Then it seemed as if you were going to discuss the graphical interface, and how to create one. In the end, I was left wondering what the subject was. That said, I'd love to find information on designing (graphically) for the iPhone and iPad that isn't related to programming and scripting.
22-Jul-10 05:14
@inspiredmac: Well, you may have a point there.

What I was trying to do was outline some of the wider principles that I've learnt coming from a web design background when moving to iPhone App design, and share that information while I was still in the process of doing the work.

Maybe I should have done one that's more specific to the actual interface design and/or information architecture?

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
22-Jul-10 14:18
While I am primarily a graphic (read: print) designer, I do have some
competence in web design tools like (X)HTML and CSS, and I'm in the process of learning Javascript. Getting from the web to mobile content is very confusing to me. Dreamweaver CS5 has added a great new tool to help a designer finesse CSS to make a web page layout comply with real estate limitations of various mobile devices, but I haven't upgraded to the new version, and I'm not sure how helpful the new feature is.

The overriding question I still have is whether or not there is a role for graphic/web designers to play in the mobile category without a thorough knowledge of C, C++, Objective C, and Javascript.

I found your overview of the design process very helpful. What I need is an understanding of what tools I must have in my toolbox to get the job done.As it is, my head is spinning around Adobe's Device Central, Multi-screen authoring in Dreamweaver CS5, HTML5, CSS3, and the Flash wars.
23-Jul-10 11:09
@inspiredmac I do have the luxury, I admit, of not having to code the iPhone apps myself. The firm I'm working for has an array of coders champing at the bit to implement whatever designs I torture them with in Obj-C etc.

Given that, I can say that everything in the said app was designed with Photoshop CS3, and I paid no heed at all to Adobe's confusing array of mobile device design helpers. I simply scribbled in a notebook til I thought I knew what it should do, then started the process of designing the screens. The process was iterative of course, and everyone involved in the project threw in ideas for how it should work.

It took around 8 sets of designs til we had it to the stage where it could go over to the coders to be built. Even then there were some design changes as we went along.

I would add that this is a very different thing to designing web apps for the iPhone or creating an iPhone-optimised version of a website, which is something I still haven't done.

I tell you what though, I love this solution from Jon Hicks (based on an "A List Apart" article):

http://www.hicksdesign.co.uk/journal/

Notice how as you reduce the window size down to iPhone levels columns re-arrange, images get smaller, text size reduces, the menu is rearranged etc.

This I'm guessing, is fiendishly difficult to pull off, and that's why Jon Hicks is a web design god and I'm not!

Do a View Source and you'll see it's full of HTML5 with article, section and footer tags. Now I don't know Jon, but I suspect he doesn't rely on Dreamweaver's mobile features, Device Central or any other Adobe gadgetry. I reckon it's largely hand coded in some kind of text editor. I do know he uses a lot of Fireworks and Illustrator for the graphics side though.

Basically, what I'm saying is that it's not the tools, it's the ideas and research that count.

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
26-Jul-10 23:04
@inspiredmac: Good point - maybe "Designing an iPhone App Interface" is a better title?

@simon: I would love to see a more detailed article on the process you went through! It's little bit off-topic (since it's not strictly about building websites) but I think it would make for interesting reading, and I'm sure a lot of the concepts would apply to designing mobile web apps.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/
31-Jul-10 17:04
Yes, please do write more about the process you went through in designing the UI. In a couple of years, the distinction between websites and apps that we currently uphold will seem quaint, so as far as I'm concerned it's entirely on-topic. Go for it!

--
http://www.fireflywebz.com
01-Aug-10 02:33
Hi Firefly,

Okay then, that sounds like a plan. I'm on vacation til the middle of August, but I'll start to map out an article when I return.

Fair point about the Apps/Web distinction too. I think I agree with that on many levels.

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates

 
New posts
Old posts

Follow Elated