Designing effective and stunning graphics for mobile and web is a challenge. Graphics for mobile and web needs different treatment. It is thus imperative for designers to understand the complexities of working with different technology and file format in order to get the desired output in terms of the image quality and aesthetic appeal.
We will talk about Vector and Raster images in brief to help you understand how UX design is created in mobile and web application.
Vector Images
Vector graphics are made from geometrical figures such as lines, points, curves and shapes which incorporate mathematical expressions to portray images or graphics on a computer. Vector graphics are different from GIFs, JPEGs and BMP images as they are not made of pixels. Instead they are composed of defined paths from the start to finish. The path can form a line, a curve, a triangle, or a square that can further take the shape of simple drawings or figures to complex diagrams.
Vector images can be easily scaled to any size without losing quality. They are thereby perfect for logos which can be stretched to fit a billboard and also small enough to be placed on business cards. Some common forms of vector graphics are Adobe Illustrator, EPS Files and Macromedia Freehand.
AI
Adobe Illustrator is a vector drawing application that offers industry standard tools for professional designing and artwork. It is a preferred application for illustrations. Illustrator is a creation tool and so it deals with innumerable file formats. The default extension for Adobe Illustrator files is “.ai”. Some modern designers prefer creating UX design in Illustrator because it allows them to scale the UI to match the different screen resolutions quickly. This is more suited to flat UX styles, which are made popular by Windows 8 UI, iOS 7 UI and Android’s Material UI.
Raster Images
The images that are seen on computer screens, pictures on the web and the photos people import from their digital cameras are all raster images. Raster images are made of a grid of pixels, which are commonly termed as ‘bitmap’. The size of the image defines the disk space the image file will take. For example, a small image (640 × 480) requires 307,200 pixels to store information whereas a 3072 × 2048 image would require a mammoth 6,291,456 pixels to store information. Larger the bitmaps, bigger would be the file size requirement. Fortunately with time, many algorithms for image compression have been developed that help reduce the file sizes of images.
When scaled down raster images show no loss of quality (unless you are trying to make it too small), however, when enlarged a bitmap image would appear blocky and “pixelated”
PSD
Photoshop Document is the acronym for PSD, which is the default file format used by Photoshop to save data. It is a layered image file that is used in Adobe Photoshop. PSD being a proprietary file it allows the user to work with individual layers of the image post saving the file. Photoshop has been a favorite tool for UX designers to create Web and Mobile Designs. This is mainly preferred by the designers who have a tendency to use eye catching images, transparency and raster image effects.
PNG
PNG stands for Portable Network Graphics, which is a raster graphic file format used to compress images. PNG is expected to soon replace Graphic Interchange Format (GIF) on today’s internet.
What format should you ask the designer for UI design as the final output for your project?
You should always ask the designer to provide you the final UI design files as either a Photoshop PSD file with all the layers intact or as an AI file. Also ask the designer to attach all the font files used in the design separately. If the UI design uses royalty free graphics, then all such images should also be attached separately.
To know more about UX design, contact a UX specialist via our user experience services.
