UI design

Assets

Usually, the UI assets are provided by designers in vector graphics formats, such as SVG or PDF. Assets of such formats are then easily scaled up or down without reducing the quality of the asset. If the asset is not in vector graphics format it should be provided in each size we require.

Not all browsers support SVG. If the client requires supporting a browser which does support SVG, a fallback from SVG to PNG is necessary.

Achieving a pixel-perfect design

A ‘pixel-perfect’ layout is when an UI design which was originally created in a graphics program (such as Photoshop), is recreated in the front-end of the application (e.g. in a web application using HTML and CSS) – and where this recreation is accurate to the pixel.

We use image overlay tools to help implement pixel-perfect design. We use the following tools:

PerfectPixel (Web applications)

For web applications, we use Chrome browser addon PerfectPixel to place a semi-transparent image overlay on top of the web page and perform pixel level comparison between them.

Android studio (Android and React Native applications)

For Android applications, we use a built-in Android Studio tool called Pixel Perfect to capture the current screen of the application and apply an overlay of the desired design image on top of it.

Launch the application via emulator.
Open the Android Device Monitor.
Choose the UI design image to use as the transparent overlay.

Tip: overlay images must exactly match the device resolution. Otherwise, the overlay will ba scaled and the resulting layout will not match the layout of the original design.

xScope (iOS applications)