8

Ask DN:What is your design work flow for Android Apps?

over 7 years ago from , UX Team Lead, Wix.com

Q:What is your design work flow for android apps? In which screen size do you start and how you deliver to the developers? Thanks!

12 comments

  • Søren ClausenSøren Clausen, over 7 years ago (edited over 7 years ago )

    I work in XHDPI (closest to Retina res, so assets from iOS design can easily be pulled over to Android) in Sketch and export assets for MDPI, HDPI, XHDPI, XXHDPI. I usually work closely with the dev team, so I don't deliver a spec, but rather talk to them. Lately we have begun using Zeplin (which is soon out of Beta), so they can inspect all sizes and colors, fonts etc.

    3 points
  • Deep ShahDeep Shah, over 7 years ago

    I always start design in MDPI. Prevents a porting mentality for the iOS app, and helps to design for lowest common denominator first (scaling down doesn't alway work due to the wide variety of screen sizes that exist). I also draw the icons for each size manually when it makes sense; in most cases I make sure each scaled icon is tweaked appropriately.

    I try to implement myself in XML wherever possible (pretty similar to HTML & CSS once you get the hang of it), so there's less time wasted in back-and-forth with the engineers. I try to deliver prototypes & assets, in addition to a conversation explaining everything. Handing over specs have never worked for me.

    2 points
    • Fri RasyidiFri Rasyidi, over 7 years ago

      I too always start from the lowest resolution (in this case MDPI) and start climbing up and adding more details when needed. I personally think this is the best method since scaling down most of the time results in losing details and precision on each pixel, risking your assets to be blurry. For me, fixing it takes more time, since I'd need to readjust or even delete the details that I've already made—which is already time consuming by itself.

      I usually send a screenshot on how the end product will look, and another with detailed spec. Especially margins and sizes. For how the assets are delivered, it's mostly depends on the dev's requests. As for colors, I always provide a color palette with detailed notes on where they will be implemented to be used as guidelines.

      0 points
  • David AlandíDavid Alandí, over 7 years ago

    I work in mdpi with sketch and then I deliver a specs document along with all the screen size assets.

    1 point
  • Khaled Islam BouyaKhaled Islam Bouya, over 7 years ago

    I always design at XHDPI. I like to have high resolution designs and it's easy to export to other densities too.

    The easiest way and the most clean way, is still designing at MDPI though.

    0 points
  • Gabe WillGabe Will, over 7 years ago

    I start in Omnigraffle at MDPI, and then move to Photoshop for XXHDPI work like the raster peasant I am.

    I stick with 1080 × 1920 since that mirrors perfectly to my Nexus 5 using Pixl Preview.

    0 points
  • Ryan KimmelRyan Kimmel, over 7 years ago

    I have some questions regarding this too. Besides exporting things based on device density (xhdpi, mdpi, etc), I've also heard there are different screen sizes that should be designed for (small, normal, large, x-large, etc). I was working with a remote team and never got a clear explanation on this. How do you guys design for the various screen sizes?

    More info here that I couldn't understand / apply in a practical sense: http://developer.android.com/guide/practices/screens_support.html

    0 points
  • Evan DinsmoreEvan Dinsmore, over 7 years ago

    Given the number of screen sizes and resolutions, I choose to design for the most common device (as long as that data is available). Designing at the same size/res as a test device also means more accurate testing of legibility and contrast. For me this typically means designing for a Nexus 5 in xxhdpi (1080p). I know mdpi makes it easier to scale icons and such, but I prefer to aim for the best experience for the most users, and scale down/up accordingly.

    When I was first starting to design for Android I took the time to understand how the layouts work, how colours and sizes are defined, etc. Having a better understanding of the platform gives a good foundation for knowing if what you're designing (particularly when it comes to motion) is feasible, and also means your communication with developers will be improved, and you can make design tweaks in code to make dev times quicker if you're comfortable with git.

    I sketch and wireframe on paper, then use Photoshop for all my high fidelity design (making use of linked smart objects and layer comps), with Skala for previewing on device, and Pixate for prototyping animations/transitions. I break out assets into separate documents and use Photoshop Generator to export the various sizes. I use Invision to communicate basic flows from screen to screen, and communicate specs in a separate style guide.

    0 points
    • , over 7 years ago

      Thanks Evan for the detailed response. Can you please explain more about layouts behaviour in android ? I understand that assets needs different sizes for different screen densities but how this affects the layouts (what happens to margins, paddings.. do you use %? does it behave like fluid layouts on web?) Thanks :)

      0 points
      • Evan DinsmoreEvan Dinsmore, over 7 years ago

        You can use % in layouts, but the majority of the time (on a phone, anyway) you're using dp (density-independent pixels) and sp (scale-independent pixels).

        dp is used for any static numbers and is similar to using points in iOS. sp is used for font sizes, and takes the user's accessibility preferences into account.

        Depending on how you've designed your layout, you may want to use sp for certain things so that even using the largest accessibility font size everything looks correct. But other than that, I typically use dp for padding/margins, and most heights, with most widths being 100%.

        0 points
  • Nouri KhalassNouri Khalass, over 7 years ago

    Do as much as you can in vector, that way the assets can be converted to the correct size. Even more important is communication! Don't ask yourself (or us) about what they want, ask them.

    0 points