Изразите на уеб дизайна включват огромно разнообразие от термини, които трябва да познаваш. Независимо дали създаваш първия си блог или сайт, управляваш уеб дизайнер или разработчик, или просто искаш да научиш повече за уеб дизайна като цяло. Тази страница ще стигне до най-важните термини, ползвани в индустрията. Ще влезем и в детайли за това какво изгражда процеса на уеб дизайн — включително техники за решаване на проблеми и работен поток.
Уеб дизайнът включва пресичане между дисциплини. Списъкът с речник обхваща брандинг, структура, нюанс и типография. Да знаеш как да говориш езика на уеб дизайна ще ти помогне да търсиш по-добри отговори, да общуваш повече и да получиш по-полезен резултат. Можеш също да забележиш как тези термини се прилагат в огромно разнообразие от сайтове (за добро или лошо). Тъй като уеб дизайнът е холистичен процес, уеб дизайнерите са квалифицирани да виждат както голямата картина, така и най-малките детайли.
Термини за брандинг
Брандингът е израз на информацията, оценките и експертизата на една организация. Всичко — от логото на компанията и разпознаваемите дизайнерски детайли до „усещането в стомаха“, което хората имат за организацията. Когато става дума за уеб дизайн, можеш да създаваш преживявания, които подкрепят най-важното — бранда на компанията.
Lettermark / Wordmark / Logotype: Вид лого, създарено от стилизирани букви (IBM) или думи (Coca-Cola)
Brandmark: Вид лого, подадено чрез графично изображение (Apple, Target)
Икона (Icon): Опростено изобразяване на обект или концепция. Логото и иконата не са едно и също нещо.
Дизайн система (Design System): Хранилище от преизползваеми дигитални части, които се комбинират, за да създадат сайт.
Brand Guide: Визуален и смислов справочник за цвета, личността и гласа на бранда
Терминология за потребителско преживяване
Потребителското преживяване (UX) включва как хората взаимодействат и се ангажират със сайта. UX влияе как насочваме потребителите през сайта. Как да ги подпомогнем към конкретни крайни цели. Включва много елементи на дизайн и разработка — включително как нещо изглежда и работи. Взимай решения за функционалност с крайния потребител предвид, не според личното ти предпочитание или инструментите, които ползваш.
Persona: Измислен персонаж, който представлява основен потребител на сайта/продукта ти. Обикновено персоните са много добре разработени, защото трябва да описват реални хора с реални мотивации.
Wireframe: Нискодетайлен layout на сайт — представяне на общото съдържание на блоково ниво и интерактивните елементи.
Mockup: Високодетайлен layout на сайт — представяне на финалния цвят, типография, изображения и т.н.
Prototype: Интерактивна версия на сайт; може да не е разработена с финалния код.
CTA: Call to action — призив към действие, често съчетан с бутон.
Conversion: Когато потребителят извърши конкретно желано действие.
Landing Page: Единична страница, оптимизирана за конкретна аудитория или резултат от търсачка
Usability: Как реалните потребители взаимодействат със сайта ти — обикновено се тества чрез поредица от наблюдавани задачи
Указания за потребителски интерфейс
Потребителският интерфейс (UI) включва компонентите на страницата, с които потребителят взаимодейства. UI влияе на UX, макар да не са едно и също нещо. Не карай потребителите да мислят. Проектирай интуитивен интерфейс, който се възползва от съвременните модели.
Breadcrumb: Йерархични линкове към съдържанието.
Menu: Основна навигационна зона, понякога с dropdown или flyout на подменюта.
Filter: Предварително дефинирани елементи, които позволяват стесняване на видимото съдържание по различни таксономии (таксономиите са по-изтънчен начин да кажеш „категории“).
Search: Отворено поле, което търси в съдържанието и връща списък с резултати.
Slider: Модерен, анимиран начин за представяне на данни, който вероятно не бива да прилагаш.
Терминология за композиция
Композицията се отнася до това как съдържанието и естетиката на сайта работят заедно. Всеки компонент на страницата трябва да се усеща така, сякаш принадлежи към layout-а — не добавен като следмисъл.
Balance: Прилагане на сравними или успоредни дизайнерски елементи, за да изглежда композицията уравновесена.
Repetition: Ползване на повтарящи се елементи за подсилване на модели или като познати визуални сигнали.
Whitespace: Колко „въздух за дишане“ има всеки елемент?
Grid: Подлежащата структура на дизайна, която определя как всичко се подрежда.
Rule of Thirds: Визуална концепция, според която най-приятните фокусни точки са в пресечните точки на три реда и три колони
Терминология за йерархия
Йерархията включва относителната важност и яснота на частите информация. Визуалната йерархия е сбор от детайли като типография, цвят, близост и баланс. Добрата йерархия помага за сканируемостта на информацията. Помага на потребителите да се фокусират върху информацията на страницата според важността. Йерархията също помага да насочваш потребителите през сайта. Решенията за стил и позиция на елементите имат обичаен ефект върху преживяването в сайта.
Scale: Колко големи или малки са елементите на страницата един спрямо друг?
Proximity/Alignment: Кои елементи на страницата са свързани помежду си?
Focal Point: Мястото на страницата, към което насочваме вниманието на потребителя
Semantic Markup: Правилно ползване на HTML елементи, за да се подскаже йерархия и употреба в съдържанието.
Термини за типография
Типографията са естетическите решения за подреждането на текста. Размер, разстояние, правилно подравняване, ширина на колоната и относителното оразмеряване имат огромен ефект както върху потребителското преживяване, така и върху естетиката. Типографските избори трябва да са умишлени — да подсилват системите в голямата картина и да са привлекателни и лесни за четене или разбиране.
Font (typeface): Колекция от букви и глифове/символи
Font-family: Кой шрифт ползваш?
Font-size: Колко е голям/малък?
Font-weight: Колко е тежък/лек?
Font-style: Italic, underline, strike.
Line-height (leading): Колко пространство има между редовете?
Letter-spacing (tracking): Регулиране на разстоянието между групи букви/блокове текст.
Kerning: Разстоянието между отделните букви.
Text-decoration: Подчертан ли е текстът или има допълнителен стил?
Serif/sans serif: Serif шрифтовете имат допълнителен декоративен щрих или линия в края на буквите, докато Sans Serif е без тях.
Термини за цвят
Цветът включва естетическите решения за ползването на цвят в композицията. Цветът може да се прилага, за да предизвика емоция, акцент, разделяне или групиране на елементи. Цветът може да установи визуално единство и баланс. Цветът обикновено е свързан с брандинга. Изборът на тон трябва да е умишлен и да се ползва в целия сайт.
HEX: В сайтовете — шестнадесетичен цвят, шестцифрено число, ползвано за представяне на цвят в HTML/CSS.
RGB: Адитивен цветови модел за екрани — стойности на червена/зелена/синя светлина, които се комбинират до цветове.
CMYK: За печат — субтрактивен цветови модел за мастило: cyan/magenta/yellow/black, които се комбинират до цветове.
Pantone/spot color: Специфични персонализирани мастила с конкретен цвят. Големите брандове обикновено имат свой Pantone цвят.
Hue: Къде е в цветовия спектър?
Saturation: Колко е ярък или приглушен цветът?
Contrast: Колко изпъква?
Opacity: Плътен или прозрачен?
Термини за изображения
Термините за изображения включват визуалните и графичните елементи на сайта. Изображенията са необходими, за да комуникираш посланието си и да се свържеш с аудиторията. И все пак, когато се ползват, могат да добавят допълнителен товар към времето за зареждане, без да правят много за потребителското преживяване. Ползвай изображения, за да подкрепиш посланието. Ползвай правилния формат за съдържанието.
Vector: Изображения, направени от математика (SVG, EPS).
Raster: Изображения, направени от пиксели (JPG, TIFF, PNG, GIF).
Resolution: Колко пиксела имат растеровите изображения (напр. 800×600 или 2400×1200). По-високата резолюция обикновено значи по-голям размер, но и повече детайл.
Compression: Оптимизация (голям/малък размер на файла).
JPG/JPEG: Най-добър за фотография с детайлни изображения.
PNG: Най-добър за графика, прост цвят и изображения с прозрачност.
GIF: Най-добър за графика с нисък детайл или анимации.
TIFF: Най-добър за печатно качество; не е подходящ за екранен дисплей.
SVG: Векторен формат, подходящ за показване в уеб; най-добър за графика и лога.
Уеб терминология
Уеб терминологията включва общия речник при проектиране за мрежата. Уеб дизайнерите не знаят само за дизайн. Разбират и технологията, за която проектират.
Heading: Заглавия и подзаглавия, написани семантично с тагове h1 – h6. Полезни за организиране на информацията в йерархия; ползват се от търсачки и screen readers.
Body Copy/Body Text: Основното писмено съдържание — обикновено параграфи, списъци, цитати и т.н.
Hero: Централното изображение/графика на начална или landing страница, обикновено с основен CTA.
Single-Scroll: Сайт, в който по-голямата част от съдържанието е включена в една страница.
Responsive Design: Дизайн, който не е фиксиран, а се адаптира към размера на екрана и/или устройството на потребителя.
Breakpoint: Конкретна точка (напр. ширина), при която съдържанието/layout-ът на сайта се променя, за да пасне на различен интерфейс.
Accessible: Способността на сайта да се ползва от всички аудитории — включително с нарушено зрение, слух или моторика — чрез асистивни технологии или стандартна навигация.
Front-End: Общо казано — код, който работи в браузъра и контролира онова, което се вижда и с което се взаимодейства.
Back-End: Общо казано — код, който работи на сървър и контролира съдържанието и логиката.
Последни думи
Дизайнерите имат собствен речник. Ако си възложил дизайн работа, познаването на правилната терминология ще ти помогне да общувате помежду си и да получиш резултатите, които си представяш. (Обещаваме — далеч е по-лесно от френския в гимназията.)
Погледни тези дизайнерски термини. Разгледай ги. Запомни ги. Това е твърде много работа. Запази тази страница и я ползвай като cheat sheet за дизайнерски думи. Тук са най-важните описателни дизайнерски думи, които трябва да знаеш.
