3

As a UI designer, I'm looking for a way to be part of the QA process and review margins, font sizes, etc. on a mobile app.

In the past, I've been able to 'view source' on a website and verify specific items, like font size, margin width, hex codes. But there is no 'view source' tool that I know of for a mobile App.

As a UX/UI designer, I don't have access to the code, to ensure that changes match layouts I've provided were correctly implemented by developers. I only have the ability to view the app on a device and trust my eyes - which can't determine accuracy to the pixel or a specific hex code.

I'm aware that every company's QA process may be unique. But I'd like feedback on how others have solved this specific piece of the process.

6
  • If you as the designer can't see any issues with the current UI, it seems quite unlikely that you'd find any priority work this way.
    – jonrsharpe
    Sep 22, 2021 at 22:41
  • 1
    Apologies - not understanding your comment? There are definitely changes that could be missed at a glance, but need to be exact due to brand guidelines and other requirements. It's best to view code and verify changes are exactly as requested. Example with color: A color may look correct, but different monitors will present that color differently. It's best to see a hex code. We can't rely on our eyes alone.
    – turpentyne
    Sep 22, 2021 at 23:38
  • Why are you doing this manually? If there are brand requirements or something, you should have it be part of your automated testing, or even build pipeline. Sep 28, 2021 at 19:29
  • Apologies for kinda stupid question but what tool have you been using to 'view source' on a website? Sep 28, 2021 at 19:39
  • @KevinMcKenzie Good point! I think we need to solidify a couple measurements, but we're working on implementing automations to the build pipeline right now. Thank you!
    – turpentyne
    Sep 30, 2021 at 2:46

1 Answer 1

1

I think it'd be better to go to the source code and see it there. Thesource code should be in some git repository like Bitbucket, Azure Repos, and others, so it's just about setting up the right permissions for you (ask the DevOps guy/team).

For example, on Android, styles, colors, etc. might be defined in xml (something like res/layout/*.xml) files, e.g.

<Button
      android:id="@+id/customButton2"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:layout_below="@id/customButton"
      android:layout_marginTop="24sp"
      android:background="@android:color/white"
      android:text="My Custom button"/>

or:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--When Button is not enabled -->
    <item android:state_enabled="false" android:color="#b6b7b5" />
    <!--When Button is in pressed state -->
    <item android:state_pressed="true" android:color="#22a540" />
    <!--When Button is in selected state -->
    <item android:state_selected="true" android:color="#fabcff" />
    <!--Default Background Color -->
    <item android:color="@android:color/white" />
  
</selector>

That's where you can find it. Just look around in the code.

1
  • For us, we're working in Azure Repos, and working with Xamarin, XAML, XCode and Android code... so maybe that's what I'll have to do.
    – turpentyne
    Sep 22, 2021 at 21:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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