UX and UI: when graphics must be usable

When a media designer designs for screen—a website, an app, a newsletter—aesthetics are only half the task. The other half is whether the user can find their way, understand what's happening, and reach their goal without frustration. That field is called UX (user experience), while UI (user interface) is the concrete visual design of buttons, menus, fields, and content.

§UX and UI are not the same

UI is what you see: colors typography icons spacing and the appearance of components. UX is what you experience: is it easy to find the product understand the price complete the purchase? A design can have a beautiful UI and a terrible UX—pretty buttons that no one can find. As a media graphics specialist you contribute most to the UI but your choices of hierarchy contrast and readability are at the same time directly UX work.

§Nielsen's heuristics: rules of thumb for usability

The most widely used checklist for usability is Jakob Nielsen's ten usability heuristics, published in their well-known form in 1994. They are not legal requirements, but broad principles you can apply to any digital design to find places where users will get lost or be surprised.

• 01System status visibility: always show what's happening — e.g. that something is loading or has been saved.
• 02Match reality: use words and concepts the user knows not internal jargon.
• 03User control and freedom: make it easy to undo and go back.
• 04Consistency and standards: identical elements should look identical and behave identically.
• 05Prevent errors: good standard choices and clear warnings are better than error messages.
• 06Recognition over recall: show possibilities — don't force the user to remember them.

§Responsive design: one content, many screens

The same content must work on a large screen a tablet and a small mobile. Responsive design means the layout adapts to screen width: columns stack images scale and menus change shape. For the graphic designer it means you don't design one fixed page but a system of components that can flow — and that you think mobile from the start instead of 'shrinking' a desktop design at the end.

§Information architecture and user journeys

Before each page is designed, the whole must hold together: what pages exist, how do they connect in menus and links, and what path does the user typically take from first visit to goal? This is called information architecture. A simple map of the user journey — step by step from need to action — often reveals gaps and dead ends long before a single pixel is drawn.

§Wireframes and prototypes

Digital design processes typically work in two layers. The wireframe is a sketch of structure and content without finished graphics — what should the page contain and in what order? The prototype is a clickable model of the design where you can test the flow before anything is programmed. Both save expensive detours: it is far cheaper to move a box in a sketch than to rebuild a finished page.

§Design systems and components

Larger digital solutions are built on a design system: a library of fixed components (buttons, cards, forms) with defined colours, typography and spacing. This ensures consistency across many pages and makes collaboration with developers concrete — you talk about the same named building blocks. The media designer's role is often to keep the system visually consistent and in line with the brand's identity.

Remember also accessibility: contrast requirements, legible typography, and messages not carried by color alone apply even more to screen than to print because users and their equipment vary so much. Good UX is ultimately design that works for as many as possible.

“The user doesn't come to see your design — the user comes to solve a task. Your design is judged on how easy it was.”

— Basic principle in user experience