Jacob Baytelman

Building software since 1998

Innovations of Tomorrow Projects Contact me

A graphic designer vs a UI/UX designer

A good graphic designer does not necessarily create good designs for websites or mobile applications. Graphic design is as old as a printing press or even older, no wonder it has its ancient history, its techniques, among which you as a customer can get a decently coloured reasonable placement of your call to action elements above the fold.

From a graphic designer expect to get:
- a colour scheme, or in other words a set of 3-6 colours for your website or application;
- a typography, that is, a choice of fonts and styles;
- layouts of all key elements in the form of nice screenshots, as if your product already exists, and this is where things get tricky because we are entering now the realm of user interfaces.

Very good if the layouts clearly indicate the difference between focused buttons and buttons in their normal state, active and inactive elements, selected and regular menu items as well as the difference between clickable elements and the rest of the content. Not so good if you designer tells you about “mouse over”, there is no “mouse over” on mobile phones!

For ages graphic designers have been taught to create static content - think of printed books, magazines, newspapers, postcard, leaflets. First UI/UX designers appeared 50 years ago, first of them were software engineers, guys who used math functions to draw circles and rectangles. They did not learn much of fine arts, instead, they learned how people interact with software. Since the very beginning, app designers have been dealing with GUI elements in motion, with their reactions to users’ clicks, scrolls, typing, etc.

If your designer grasps the basics of UI/UX, you would also get
- sketches of the screens with the open keyboard to help you imagine what part of the screens becomes hidden under the keyboard or how it should jump up to reveal the rest of user input elements;
- sketches of the screens on different resolutions - think of iPads, iPhones, laptops and big screens of desktop computers.

If you are less lucky, you will be shown a masterpiece with totally customised drop-down selectors, get ready to pay huge extras to have them implemented and bear in mind that on mobile phones standard selectors tend to resemble scrollable blocks or wheels in the bottom of the screen rather than drop-down blocks under the element they belong to. Both Apple and Google provide their design recommendations: https://developer.apple.com/design/human-interface-guidelines/ and https://developer.android.com/design. Please do have a look to know what to request from your designer.

If your designer speaks only one language and your product is planned to have a multilingual support, prepare to answer your developers’ questions how to fit long texts into short buttons and what the screens should look like in the right-to-left layout, think of the different length of English and German words.

A good app designer never forgets about
- the minimal reasonable size of the clickable elements - imagine thick fingers tying to press a tiny button;
- line breaks and the three dots or other ways to hide or scroll the text, should it be too long to fit its container;
- an option to preview an image - again, think of somebody struggling to see what they choose from small thumbnails in the gallery before sending a message;
- hints in text input fields;
- transparency and overlaying elements in all possible states, they should remain readable regardless the colour of the underlying content; popups and error messages;
- system differences - not all GUI elements are identical on Android and iOS.

A really good UI/UX designer will make you happy with
- a storyboard showing how screens are changed from one to another, what animation is used, whether it is a standard one for iOS or Android or it requires additional development;
- clear navigation instructions, so the user always knows how to return to the previous screen and all main areas of the app;
- progress of a process: the user should know whether a file is still loading or the app got stuck with the loading indicator running in cycles for ever;
- the look of the app when the screen brightness is set to the highest and lowest values.

Most important: though artists can draw pretty much anything imaginable, fantasy converts to development time and costs, the further you go from standard GUI the higher implementation costs.

PS: You can find a lot of free or very cheap templates, themes and ready-to-use libraries. Normally they all let you play with sizes and colours but any attempt to combine two different themes or merge together functionality of 2 different elements into a new one might require much more time and effort than you expect. If your choose to go down this route do ask your developers first.

J.Baytelman August, 2019