ENGLISH CLUB
Tweak it: англійські фрази та терміни для UI/UX дизайнера
Щоб всім завжди вистачало слів для критики та аргументації — ми запускаємо серію матеріалів про те, як спілкуватися англійською на професійні теми.

Спеціально для Projector Анна Гандрабура, засновниця школи англійської мови English For IT, розповідає про найпотрібніші фрази та слова для спеціалістів у різних сферах діяльності.
Є вислів: «Everyone can recognize a good design but it takes a certain level of skill to create it». Будь-хто може впізнати хороший дизайн, та потрібні певні навички, щоб його створити.

Фахівці, які вміють і можуть створити хороший дизайн, часто зіштовхуються зі схожою проблемою в англійській мові: з розумінням мови проблем немає, а з тим, щоб пояснити або покритикувати певні рішення, виникають труднощі.

У цій статті ми надамо огляд елементарної лексики і правильної вимови слів, в яких часто роблять помилки дизайнери і менеджери, а також дамо кілька корисних фраз для переговорів і висловлення своєї думки.

CEO & Founder в English For IT
UI design
Negative space / white space — вільне місце / пробіл
«Negative space» зараз використовують частіше, оскільки не всі прогалини бувають білого кольору. Через нестачу «negative space» може виникнути «cluttered» («захаращений») дизайн, і навпаки — «too much negative space» створює порожнечу.
Typography — типографіка / робота з текстом.
Це повноцінна окрема частина UI дизайну зі своєю особливою лексикою.

Font — шрифт

Pair / combine / mix fonts — поєднувати шрифти (наприклад, serif і sans serif)

Blockquote — блок цитування

Slant text — нахилити текст Increase \ decrease the font size — зменшити \ збільшити розмір шрифта

Font weight — насиченість \ ступінь жирності шрифта (може бути heavy, medium чи light)

Script font — рукописний шрифт

Lower case letters — малі літери
Написати малими літерами — type in lower case

Upper case letters — великі літери

Capitalize — написати великими літерами
Can you capitalize on this?

Align left \ right \ center — вирівняти текст (по лівому / правому краю / центру)

Paragraph indent — відступ абзацу

Increase / adjust letter spacing / kerning — розрядити літери (kerning — це професійний жаргон, тоді як letter spacing — термін для «простих людей»)

Increase / decrease line height / leading — збільшити \ зменшити інтерліньяж (міжрядковий пробіл)

Baseline — нижня лінія шрифту

Drop shadow — відтінити (якщо використовуєте якийсь ефект, то краще додавати слово «add»: add drop shadow, add a gradient etc.)

Two / three / four columns of text — текст у дві \ три \ чотири колонки
Opacity — непрозорість Для того, щоб задати непрозорість, можна сказати «set the opacity at 80% / this element is at 80% opacity».

Bezier curve — крива Безье (вимовляється як /beːzɪˈeɪ/ з наголосом на останній склад)

(Subtle) animation — (легка / ненав'язлива) анімація
Це один із трендів в UI дизайні. Слово «subtle» часто використовують як протилежність слову «dramatic» (різкий / той, що привертає увагу)

Color contrast — кольоровий контраст

Color palette — кольорова гама

Luminosity — яскравість світла

Brightness — яскравість кольору

Hue — відтінок

Shade — відтінок (більш темний)

Saturation (desaturate) — насиченість (знебарвити)

Primary color — основний колір

Fade — розчинитися / поступово зникнути (коли мову йде про анімацію, то можна сказати: «fade in» — з'явитися, або «fade out» — зникнути)

Separation (between elements) — розділення (між елементами)

We need more separation between these elements — означає, що вам потрібно зробити елементи більш prominent («помітними»), наприклад, збільшити negative space чи margins (поля) між елементами.

Space out — збільшити проміжок
I think the navigation icons are too close together, I'd definitely space them out a bit more.

Brighten up — збільшити яскравість
The background image can be brightened up a little.

Tone down — пом'якшити / зменшити яскравість (антоним «brighten up»)
I'm not sure this color works on this background, let's tone it down.

Tweak — трохи змінити / внести невеличкі зміни
I tweaked the gradient to be a little more eye-catching.

Eye-catching \ attention-grabbing — той, що привертає увагу

Alignment — вирівнювання
There are some alignment issues on the landing page.

Play around with — погратися з…
Try playing around with different font sizes.

Visual hierarchy — візуальна ієрархія.
Відсутність правильної візуальної ієрархії призводить до того, що англійською звучить як «I don't really know where to look». Хороша візуальна ієрархія «draws the user's attention» (привертає увагу користувача) до важливих елементів і полегшує user journey.
Елементи сторінки
Container — елемент, який houses («містить») інші елементи сторінки та має визначену висоту (height) і ширину (width).
The blue container houses a feedback form.

Card — карта
Карта — це контейнер, який групує схожу інформацію в окремі easy-to-read (читабельні) контейнери, які нагадують звичайні гральні карти.

Slider / carousel — карусель (наголос на перший склад)

Loading bar — лінійка завантаження

Hero section / hero image — головна (частіше найбільша) секція чи зображення, що привертає увагу користувача

Header — шапка

Footer — футер / підвал

CTA (call to action) — заклик до дії
Найчастіше це кнопка, на яку можна клікнути, щоб продовжити user journey.

Microcopy — мікрокопі. Це супровідний текст до кнопок й інших клікабельних елементів інтерфейсу.

Light mode / dark mode — світлий режим / темний режим
Навігація та інтерактив
Nav — скорочення від «navigation»
You can add more nav items if you wish.

Nav bar — панель навігації

Pagination — нумерація сторінок

Snackbar — коротке повідомлення про те, яку дію виконує чи виконає застосунок, наприклад «Your response has been submitted» й т.і.

(Custom) scrollbar — смуга прокрутки
Деякі сайти мають власні (custom) смуги прокрутки на відміну від дефолтних, створених браузером.

Tab bar — панель вкладок.

Breadcrumb navigation (breadcrumbs) — навігаційний ланцюжок («b» в слові «crumbs» не вимовляють)
Меню, яке показує користувачу, де він знаходиться та як може повернутися назад до тих сторінок, які він відвідав раніше.

Scroll indicator — індикатор прокрутки
Зазвичай це іконка з анімацією, яка показує, що користувачу необхідно прогорнути вниз, щоб побачити більше інформації.

Hamburger menu — гамбургер («u» в слові «hamburger» вимовляється як «e» в слове «earth»)

Bring up — показувати
If you click on this icon, it brings up the search menu.

Toggle (menu) — перемикач / перемикати
Як дієслово часто використовується з прийменниками on і off.
You can toggle the visibility of this menu on and off.

Scroll — прокручувати
До цього дієслова також можна додавати будь-який напрямок: scroll up / down / left / right.

Tap — натиснути на екран

Click — клікнути

Hover — навести (курсор мишки), часто супроводжується прийменником over.
Hover over the image to see the pricing.

Drag — перетягнути

Swipe — проводити пальцем по екрану
Swipe right to see more.

Radio button — кнопка-перемикач
Кнопка, яка дозволяє користувачу обрати тільки одну із запропонованих опцій.

Search field — поле пошуку
Type this in the search field.

Input field — поле для введення
Enter your login in this input field.

Viewport — вікно екрана (наприклад, desktop, mobile, tablet и т.і.)
The font size will change depending on your viewport.
UX design
Layout — макет сторінки
Using a consistent grid system allows us to design cleaner layouts.

Responsive — адаптивний дизайн, який змінюється в залежності від вашого viewport. Також часто пересікається з терміном mobile-friendly.
How can you make the website responsive in the most time-saving manner?

Accessibility — доступність (чи може ваш сайт чи застосунок використовувати люди з інвалідністю)
It's better to make the text more prominent for accessibility purposes.

Flat design — плоский дизайн
Класичний «двовимірний» підхід до дизайну.

Skeuomorphism — скевоморфізм
Підхід до дизайну, заснований на створення 3D ефектів в об'єктів.

Neumorphism — комбінація flat design та skeuomorphism, нинішній тренд в UI/UX дизайні.

Material design — матеріальний дизайн.
Дизайн філософія або design language, створена Google в 2014 році, яка пропонує guidelines (вказівки) для дизайнеров.

Wireframe — макет
Скелет сайта чи застосунка, зазвичай чорно-білий ескіз, який презентує основну структуру проєкта.

Mockup — мокап (наголос на перший склад)

Prototype — прототип

User Engagement — активність користувачів
We're aimed at driving user engagement.

User research — дослідження аудиторії
You can't solve the customer's problem without doing research.

A/B testing — a/b тестування
Один із способів проведення user research. І ось вам хороша стаття про A/B testing англійською.

Survey — опитування

Persona — персона покупця
Вигаданий покупець з певними бажаннями і характеристиками.

User journey map — карта шляху користувача.
Візуальна репрезентація досвіду користувача.

Look and feel — враження та відчуття від користування
I enjoy the overall look and feel of the app.

Cohesive — логічний / цілісний (дизайн)

Consistency — постійність (стилю)

Design debt — дизайнерський борг
Використання менш елегантних і ефективних рішень заради економії часу.

Pain points — больові точки

Error message — повідомлення про помилку
Як обговорювати дизайн: критика та зауваження
При спілкуванні з командою, замовниками та стейкхолдерами виникає необхідність пояснити і обговорити дизайн, прийняти або висловити критику про нього. Як правильно це зробити англійською?

По-перше, коли ви критикуєте, зробіть так, щоб критика йшла від вас особисто, і не виглядала як незаперечний факт. Для цього корисно використовувати «I» statements. Наприклад: I'm not a big fan of shadows on text, they look really old-fashioned in my opinion.

Загалом, коли висловлюєте критику, можете дотримуватися таких трьох кроків:

1. Відзначте, що вам подобається / що було зроблено добре.
2. Скажіть, що вам не подобається, що потрібно змінити і чому.
3. Запропонуйте, як можна зробити щось краще.


«Everything looks pretty solid in terms of color and contrast. One thing I would do though is increase the line height in this container. It would make the text much easier to read in my opinion».

Здається, що ці кроки дуже прості, проте необхідна постійна практика, аби навчитися polite критиці. Наприклад, на курсі English For IT: Communication ми навчаємо висловлювати свої думки та давати негативний фідбек ввічливо, аби не образити нікого
Ще кілька корисних фраз:
It's not ideal (in terms of…) — Це не ідеально в плані…
The gradient you have going on on the buttons is not ideal in terms of readability.

Cluttered / clean (design) — загромаджений / чистий дизайн

It's lacking (in terms of UX) — чогось не вистачає (в плані UX)
I feel like the navigation is lacking in terms of UX. I would use this white space on the right to add more navigation links.

Throw off — бентежити
One thing that threw me off is all this unused space on the left and right.

One way to improve that would be… — Одним із способів, як це можна покращити, є…
One way to improve this would be to remove the background image and use a simple SVG background.

We can take it one step further — Можна зробити це ще краще
We can take this form one step further by adjusting the spacing.

Something seems to be off (about this font) — Щось не так (з цим шрифтом)

This may be a bit nitpicky — Це я вже чіпляюся (коли ви робите зауваження до дрібних деталей).
This may be a bit nitpicky but the background color could be slightly more vibrant.

I'm not really a fan of / I'm not a big fan of… — Я не великий фанат / прихильник
I'm not a big fan of flat design.

I'm not sure we can proceed with this design — Ми не можемо прийняти цей дизайн (I'm not sure — це ввічлива форма в англійській мові, яка означає незгоду чи відмову, а не невпевненість).
І наостанок, перевірте вимову термінів, які часто вимовляють неправильно.

Image — /ˈɪmɪdʒ/Icon — /ˈʌɪk(ə)n/

SVG — /əs - vɪ: - dʒɪ:/

PNG — /pɪ: - ən - dʒɪ:/

JPG — /dʒəɪ - peg/

Cursor — /ˈkəːsə/ «u» вимовляється як в слові «urgent» чи «her»

Merge — /məːdʒ/ «e» вимовляється так само, як «u» в «cursor»

Margin — /ˈmɑːdʒɪn/ «gin» як в «gin and tonic»

Align — /əˈlʌɪn/ римується з «sign»

Opacity — /ə(ʊ)ˈpasɪti/ «a» як в слові «apple»

Opaque — /ə(ʊ)ˈpeɪk/ «a» як в слові «grape»

Gradient — /ˈɡreɪdɪənt/ «a» так само, як в слові «opaque»

Retouch — /riːˈtʌtʃ/ «touch» вимовляється не «туш», а так, як зазвичай англійською

Color scheme — /skiːm/ римується з «ice cream»

Visual hierarchy — /ˈhʌɪərɑːki/ «hier» як в слові «higher»

Serif — /ˈsɛrɪf/ римується з словом «sheriff» (наголос на перший склад)

Sans serif — «sans» вимовляється як в слові «croissant» (круасан)
Важливо не лише знати всі ці терміни, але й вміти їх використовувати під час спілкування, особливо, якщо ви мрієте вийти на міжнародний ринок. Практика, практика та ще раз практика — це одне з базових правил, якщо ви мрієте вільно володіти англійською.

За практикою звертайтеся в школу англійської English For IT:
1. Марафон English For Tech — безкоштовний марафон, на якому ви дізнаєтеся, яка англійська потрібна для IТ.
Старт: 3 листопада

2. English For IT: Communication — курс про soft skills, кроскультурну комунікацію із замовником та командою, speaking & business writing.
Старт: 23 листопада

3. Vocabulary & Grammar — курс, який поєднує два головних компоненти: словниковий запас та граматику. За місяць вивчимо понад 1500 нових слів та виправимо граматичні помилки.
Старт: 29 жовтня

UX Courses at Projector
Сподобалась стаття?