Clients often start with: “Make it look nice.” What they actually need is a site that brings in leads, and a visitor who understands within seconds what you do. These are two different jobs, and each has its own name: UI and UX.
In plain words
UI is how it looks: colors, fonts, spacing, buttons. The decor of a shop.
UX is how a person moves through it: do they understand where they are, find what they need, reach the inquiry? It is how easy it is to find a product in the shop and get to the checkout.
You can build a beautiful shop window and still lose the customer halfway to the checkout. The opposite happens too: everything is convenient, but the site looks untrustworthy. It works only when both are there.
People don’t read a site, they scan it
In the first few seconds, people decide whether they’ve landed in the right place. So the main question for any page is: what will the eye see first, and is it the most important thing? If a screen has ten equal blocks, none has been chosen.
Research backs this up. A behavior analysis covered by Nielsen Norman Group shows that the stay-or-leave decision is made in roughly the first 10 seconds. And according to Gitte Lindgaard’s study, an impression of how a site looks forms in 50 milliseconds, after which people tend to look for confirmation of that first impression. That is why the first screen matters more than anything else.
How this looked in my projects
1. When everything is on the page at once
While building the screen for a museum transportation service, the client wanted the first block to show many objects: crates with pictures, mounts with fixed exhibits, museum equipment. All of it is relevant, but on one screen it turns into a mess: plenty of beauty, no main point.
Instead, the first screen became a museum hall: pedestals with busts and paintings on the walls. A single, instantly understandable metaphor of working with museums is enough for a person to adequately understand the core message.
Takeaway for clients: the first screen doesn’t have to show everything you do. It is enough to explain right away what it is about.
2. When a beautiful icon reads the wrong way
In a children’s app concept, a crystal was chosen as the icon for a reward. In the first mockup it looked like a coffin. And the multiplication-table icon looked like a “close” button. Everything was neat and the colors were well chosen, but the meaning read wrong, especially for a child who won’t try to figure it out.
The icons were replaced so that everything reads as intended and the meaning is clear at first glance.
Takeaway for clients: test an icon not with “is it pretty?” but with “what does this mean to you?”
3. When the platform has its own rules
Banners for a company card on a map service: the platform shows the headline as a separate field under the image, while the first sentence of the description has to be built into the image itself. If this isn’t accounted for upfront, the text gets duplicated or cropped. Good design here is not only composition, it is understanding how a person will actually see the banner.
4. A self-study app for Georgian
Currently in the works: a web app for self-study of Georgian, with over 180 lessons and about 15 hours of material. The course is designed not to distract people from their main task, settling in a new place. That is why the phone and large-screen interfaces are different: the large screen can show a bit more.
Profiles are split into adults and children to account for how the brain works. In a study of 262 people aged 7 to 85, the ability to sustain attention was higher in young adults than in children and older adults. Children tend to memorize better through play, so the app was extended with games and trainers for kids. Adults get short reading texts in which one letter is replaced with its Georgian counterpart, then two, and so on, so the alphabet comes in gradually.
Takeaway for clients: such decisions are dictated by the target audience, not by taste.
Check your site in 5 minutes
- Open the home page and count to five. Is it clear what you do and for whom?
- What single action do you want from a visitor? How many seconds and clicks does it take a person to get there?
- Open the site on your phone. Can you find what you need in a couple of taps?
- Is the text readable next to images, or do they compete with each other?
- Does the page give the feeling that you can trust it with your money?
- Are there sections your client’s path to the goal doesn’t depend on? Can you get rid of them?
If the answer to two or three of these is unsatisfying, the problem is most likely not in the colors.
How I approach it
Before the mockup, I clarify three things: who your target audience is, what they should do, and what competes with them doing it. Only then come colors and fonts. At some point, thinking “from function to form” becomes a habit, and it often helps solve a client’s strategic task more correctly and efficiently.
If your site is beautiful but doesn’t work, or you’re not sure where exactly the problem is, message me on Telegram or Instagram.
- Jakob Nielsen, How Long Do Users Stay on Web Pages?, Nielsen Norman Group, 2011. Based on Liu, White, Dumais, “Understanding web browsing behaviors through Weibull analysis of dwell time”, SIGIR 2010.
- Michael Hopkin, Web users judge sites in the blink of an eye, Nature, January 13, 2006. Based on Lindgaard, Fernandes, Dudek, Brown, “Attention web designers: You have 50 milliseconds to make a good first impression!”, Behaviour & Information Technology, 25, 2006.
- Simon A.J., Gallen C.L., Ziegler D.A. et al., Quantifying attention span across the lifespan, Frontiers in Cognition, 2023.