2

1) For native mobile apps (iOS7, Android etc.), do you guys do mockups using the grid system too? Like maybe, 4-column grid layout for mobile apps? I heard of the grid system being used for responsive websites but don't seem to hear much of it being applied to native mobile apps (not mobile websites).

2) At my company, I'm required to do mockups for iPhone 3GS, 4, 5, 6, 6+, as well as Android devices etc. Should I start with the mockup for iPhone 6 first, then scale down accordingly? What about Android devices?

I'm using Photoshop and Edge Reflow CC, although I'm not sure if Edge Reflow is suitable for mocking up mobile apps of various resolutions since it seems more for websites.

Tks!

1

1) A grid system can be helpful for alignment and pleasant balance of content, but I'd also pay attention to the OS-specific Human Interface/Design Guidelines (Apple & Android) to determine element size, minimum spacing, common design patterns, and standard placement of typical system functions. Those may or may not cooperate with your chosen grid system.

In general, iOS devices have 3 distinct aspect ratios that could affect a shared grid:

  • 3:2 (iPhone4 and earlier)
  • 4:3 (all iPads so far)
  • 16:9 (iPhone 5 & later, +/- a few pixels depending on device).

Android devices are sort of all over the place, but can also generally fit into these categories (give or take a few pixels). I might recommend creating grids based on these & applying them as necessary.

You also want to present a consistent experience that meets user expectations for their chosen device. This differs between iOS and Android & people generally dislike seeing UIs designed for one ported directly to the other. That alone will require some reworking of layout & rethinking of where to place common controls or functionality.

2) Avoid starting large & shrinking - generally better to start small & grow.

  • Start with iPhone 3GS and 4 since they're the smallest at 3.5". iPhone 4/4S has @2x retina display which affects asset creation, but the screen is the same physical size & 3:2 aspect ratio as 3GS so any layout decisions should be identical.

    • Test on real devices to get a feel for how tiny they really are. Apply the same "mobile-first" considerations as a responsive website - designing your most restricted space first forces you to focus on critical needs while leaving room to expand. Add a few smaller Android devices to this process as well & try find a happy compromise between their sizes.
  • iPhone 5/5S is almost exactly 16:9 like the iPhone 6 and 6 Plus. This totally different aspect ratio should get its own variants regardless, so I wouldn't recommend starting there.

  • iPhone 6+ and similar Android "phablets" have further unique requirements, in addition to @3x pixel density that further complicates things for your graphic designers. Better to scale these designs up to full tablet size than start here & try to shrink them.

    • In the same way an iPad app with a standard iPhone layout looks pretty bad & wastes a lot of screen real estate, these larger devices often allow for 2-column/"master-detail" tablet-style layouts and different interaction patterns ("Reachability" on iOS to auto-scroll items that are too far away, for example). They also have slightly different use cases & can simply show more content, so consider how people might use them differently.

Finally, I'm not sure of the Android equivalent, but you might want to look into Apple's Adaptive Design (new as of iOS8) which sort of rethinks how layouts should change across device size classes. This is probably more useful later in the process, but it could help to do mockups w/these concepts in mind.

  • Tks MC01! Seems like it's gonna be one hell of a mess and nightmare when you take into consideration all the Apple and Android design guidelines. How about in terms of workflow and tools? How would you go about this? 1 Photoshop file for 1 screen for each iPhone version, and then repeat for Android? Any tools which can lessen the pain of repetition a bit? Reflow CC? Tks! – Xeon Feb 11 '15 at 14:55
  • @Xeon - You can find (or create) templates for different device sizes & OS (Ex: teehanlax.com/tools). I wouldn't do separate files per screen. Could use Illustrator w/wireframes on separate Artboards for each & copy/paste between them (layer organization is important!) - easier to scale up too. Start w/simple gray & polish later. There are a ton of other tools (InVision, Balsamiq, Axure, etc). Even Keynote works to create hyperlinked static prototypes. Haven't used Edge Reflow - looks interesting though. For iOS you could even mock up directly in XCode w/native UI elements. – mc01 Feb 11 '15 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.