Английский для дизайнера: основная лексика и произношение
Верстка текста
Верстка текста и верстка страницы — в английском это два разных термина. Верстка текста называется typography (e.g. I want to improve my typography skills). Конечно же, говоря о работе с текстом нельзя не упомянуть еще целый океан терминов:
Font — шрифт
Increase \ decrease the font size — уменьшить \ увеличить размер шрифта
Font weight — насыщенность \ степень жирности шрифта (может быть heavy или light)
Script font — рукописный шрифт
Lower case letters — Строчные буквы (написать строчным шрифтом — type in lower case)
Upper case letters — прописные буквы
Capitalize — написать прописными буквами (Can you capitalize all the is?)
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 etc. columns of text — текст в две \ три \ четыре колонки
Верстка страницы
Прежде чем сверстать страницу, необходимо создать ее макет — create a (webpage) layout / design a webpage.
Когда вы непосредственно верстаете страницу с помощью HTML и CSS, можете назвать это простым словом “build” (e.g. It took me 2 days to design and build this webpage). “Build / build out” также используется с другими технологиями в значении “создать” (e.g. He built a game engine all by himself). Кроме этого также можно сказать “create / make / code up a website”.
Другие полезные слова для верстки:
Markup — HTML составляющая сайта. (e.g. I’m done with the markup and ready to style it.)
Header — шапка сайта
Footer — футер (d’uh)
White space (negative space) — пробел
Cluttered layout — слишком громоздкий хаотичный дизайн (обычно это слово используют для макетов, где недостаточно negative space). Как синоним, могут также сказать “busy layout”.
Grid — сетка (в CSS известная как CSS Grid Layout)
Responsive layout — гибкий макет (вопрос Is your website responsive? значит: “адаптирован ли твой сайт для разных браузеров и девайсов?”)
Cross-browser compatibility — кроссбраузерность
Mobile-first design — ориентированный на мобильный устройства (трендовое направление в веб дизайне, которое предполагает, что вы сначала верстаете мобильную версию сайта, а потом адаптируете ее для настольных компьютеров в отличие от более олдскульного desktop-first. На практике это также означает, что вы немного по другому составляете мультимедийные запросы (media queries), используя свойство min-width вместо max-width и кроме пикселей используете другие единицы измерения, такие как em и rem)
Hero section — главная часть сайта, которая привлекает внимание юзера (карусель, изображение, крупный текст и т.д.)
Slider — карусель (или carousel, это слово также используется)
Работа с изображениями и цветом
Resize an image — изменить размер изображения
Edit (text / image) — редактировать текст \ изображение
Scale up / scale down — увеличить \ уменьшить размер (изображения, объекта)
Bring up / down — также увеличить \ уменьшить, но не изображение или объект, а например яркость, насыщенность, размер кисти и т.д. (Let’s bring down the opacity of this layer)
Zoom in on (an area) — увеличить масштаб (какой-то области)
Crop — обрезать \ скадрировать
Clip (object) to mask — обрезать (объект) по выделению
Skew (text / image) — наклонить (текст \ изображение)
Vibrant colors — яркие \ насыщенные цвета
Hue — оттенок
Shade — оттенок (более темный)
Saturation (desaturate) — насыщенность (обесцветить)
Background — задний фон
Foreground — передний фон
Blur \ add a blur — размыть
Drag (something) over — перетащить
Произношение. Именно в этих словах чаще всего сделают ошибку:
Image /ˈɪmɪdʒ/
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 (круассан)
Пройдемся также по цветным моделям. Все они произносятся как отдельные буквы алфавита
RGB /ɑː(r) — dʒi: — bi:/
CMYK /siː — əm — wʌɪ — kei/ Аббревиатура цветов “Cyan Magenta Yellow Black”
HSL /eɪtʃ — əs — əl / “Hue Saturation Lightness”
И напоследок, несколько фраз из дизайнерской жизни.
Those colors don’t work well together — Эти цвета не сочетаются
Something is off here — Здесь что-то не так
This background doesn’t contrast well with the text — Фон плохо контрастирует и текстом
Basic Designer Vocabulary + Audio
Typography
Font — шрифт
Increase \ decrease the font size
Font weight
Script font — рукописный шрифт
Lower case letters — Строчные буквы (написать строчным шрифтом — type in lower case)
Upper case letters — прописные буквы
Capitalize — написать прописными буквами (Can you capitalize all the is?)
Align left \ right \ center — выровнять текст (по левому / правому краю / центру)
Paragraph indent — отступ абзаца
Increase / adjust letter spacing/kerning — разрядить буквы (kerning — это профессиональный жаргон, в то время как letter spacing — термин для “простых людей”)
Increase / decrease line height / leading — увеличить \ уменьшить междустрочный отступ
Baseline — нижняя линия шрифта
Drop shadow — оттенить (если применяете какой-нибудь эффект, всегда лучше добавить слово add: add a drop shadow, add a gradient etc.)
Two / three / four etc. columns of text — текст в две \ три \ четыре колонки
Markup — HTML составляющая сайта. (e.g. I’m done with the markup and ready to style it.)
Header — шапка сайта
Footer — футер (d’uh)
White space (negative space) — пробел
Cluttered layout — слишком громоздкий хаотичный дизайн (обычно это слово используют для макетов, где недостаточно negative space). Как синоним, могут также сказать “busy layout”.
Grid — сетка (в CSS известная как CSS Grid Layout)
Responsive layout — гибкий макет (вопрос Is your website responsive? значит: “адаптирован ли твой сайт для разных браузеров и девайсов?”)
Cross-browser compatibility — кроссбраузерность
Mobile-first design
Hero section — главная часть сайта, которая привлекает внимание юзера (карусель, изображение, крупный текст и т.д.)
Slider — карусель (или carousel, это слово также используется)
Resize an image — изменить размер изображения
Edit (text / image) — редактировать текст \ изображение
Scale up / scale down — увеличить \ уменьшить размер (изображения, объекта)
Bring up / down — также увеличить \ уменьшить, но не изображение или объект, а например яркость, насыщенность, размер кисти и т.д. (Let’s bring down the opacity of this layer)
Zoom in on (an area) — увеличить масштаб (какой-то области)
Crop — обрезать \ скадрировать
Clip (object) to mask — обрезать (объект) по выделению
Skew (text / image) — наклонить (текст \ изображение)
Vibrant colors — яркие \ насыщенные цвета
Hue — оттенок
Shade — оттенок (более темный)
Saturation (desaturate) — насыщенность (обесцветить)
Background — задний фон
Foreground — передний фон
Blur \ add a blur — размыть
Drag (something) over — перетащить
Image /ˈɪmɪdʒ/
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 (круассан)
RGB /ɑː(r) — dʒi: — bi:/
CMYK /siː — əm — wʌɪ — kei/ Аббревиатура цветов “Cyan Magenta Yellow Black”
HSL /eɪtʃ — əs — əl / “Hue Saturation Lightness”
9 647
4 558 
