Существует распространённое мнение, что изображение стоит тысячи слов. Исследования подтверждают эту идею, отмечая, что мозг человека воспринимает визуальную информацию в 60 000 раз быстрее текстовой. Кроме того, визуальные данные легче запоминаются и воспроизводятся по сравнению со слуховой информацией. Тем не менее, другие факторы, такие как мотивация, также могут влиять на наши способности.
Итак, вы уже знаете, насколько важны изображения. Но что означают аббревиатуры JPG, PNG, GIF? И главное — чем они отличаются друг от друга? Понимая эти термины, вы сможете грамотно общаться с дизайнерами, разработчиками и клиентами, а также использовать нужные форматы в подходящих случаях.
Иконки (Icons)
В веб- и мобильном дизайне иконки представляют собой графические символы, которые визуально выражают идеи, объекты или действия. Они подсказывают пользователям, как можно взаимодействовать с разными элементами интерфейса.
При правильном использовании иконки ускоряют взаимодействие пользователей с интерфейсом, поскольку мгновенно распознаются. Кроме того, они добавляют стилевую выразительность и делают дизайн визуально привлекательнее.
Совет! Хорошие иконки понятны без дополнительных пояснений и догадок.
Иллюстрации (Illustrations)
Иллюстрация — это визуальное представление, созданное дизайнером или художником для пояснения идеи. Иллюстрациями могут быть рисунки, фотографии, эскизы, цифровая графика или живопись.
Наиболее распространённые виды иллюстраций:
- редакционные иллюстрации (журналы, книги, газеты);
- концепт-арты для игр и кино;
- модные иллюстрации;
- инфографика;
- иллюстрации для упаковки и маркетинга.
Наиболее популярные программы для создания иллюстраций — Adobe Illustrator, Adobe Photoshop и Procreate.
Паттерн (Pattern)
Паттерны в UI-дизайне — это повторяющиеся линии, формы, цвета или элементы. Паттерны выполняют не только декоративную функцию, но и помогают визуально отделять или объединять элементы интерфейса.
Паттерны бывают двух видов:
- Регулярные (регулярно повторяющиеся элементы, например шахматная доска или полоски).
- Нерегулярные — более разнообразные по композиции, не такие предсказуемые.
Независимо от типа паттерна, важно применять их так, чтобы улучшить пользовательский опыт, не перегружая интерфейс.
Ресурсы (Assets)
Ресурсами в дизайне называют цифровые материалы, используемые на протяжении всего процесса разработки продукта. Они включают UI-компоненты, шрифты, изображения, иконки, видео, мокапы, вайрфреймы, текстовый контент, анимации и аудио-файлы. Чётко организованные ресурсы упрощают работу всей команды, гарантируют эстетичность и функциональность дизайна, а также упрощают внедрение продукта.
JPG (JPEG)
JPG (или JPEG) — это стандартный формат сжатых изображений. Аббревиатура происходит от названия организации Joint Photographic Experts Group и произносится как «джипег».
JPG уменьшает размер файлов, удаляя ненужные детали изображения и снижая качество. Поэтому JPG не подходит для изображений с тонкими цветовыми переходами. Каждый раз при сохранении JPG-изображения после редактирования оно теряет детали.
В отличие от PNG, формат JPG не поддерживает прозрачность. Если сохранить прозрачный фон в JPG, он станет белым.
JPG подходит для веб-графики, где важна скорость загрузки, а качество изображений менее критично.
Совет! Избегайте сохранять изображения с мелкими деталями или текстом в формате JPG, иначе детали размоются после сжатия.
GIF
GIF — это формат изображений, поддерживающий анимацию и прозрачность. Название GIF происходит от Graphics Interchange Format.
Вы наверняка сталкивались с GIF как небольшими анимациями в интернете. GIF-изображения имеют небольшие размеры, потому что поддерживают лишь ограниченное количество цветов (256).
По словам создателя формата Стива Уилхайта (Steve Wilhite), GIF произносится как «гиф».
PNG
PNG — это графический формат для изображений высокого качества, который расшифровывается как Portable Network Graphics.
В отличие от JPG, формат PNG использует сжатие без потери качества — детали не теряются, и изображения остаются чёткими. GIF поддерживает всего 256 цветов, а PNG — более 16 миллионов цветов.
Особенность PNG — поддержка прозрачного фона. Это полезно в дизайне интерфейсов, особенно при создании логотипов или иконок, которые должны выглядеть аккуратно и без фоновых рамок.
Несмотря на высокое качество, PNG-файлы занимают больше места по сравнению с JPG.
SVG
SVG — это векторный графический формат. SVG расшифровывается как Scalable Vector Graphics («масштабируемая векторная графика»). Изображения в SVG состоят из математических формул, не зависят от пикселей и могут масштабироваться без потери качества.
Одно из главных преимуществ SVG — возможность создавать и редактировать файлы даже в текстовом редакторе. SVG легко масштабируются, анимации в них выглядят чётко и качественно при любом размере.
Большинство дизайнеров используют Adobe Illustrator и Figma для создания SVG-графики.
Совет! SVG идеально подходят для адаптивного дизайна — они всегда выглядят чётко при любом масштабе.
Размытие (Blur)
Blur (размытие) — это визуальный эффект, делающий детали изображения менее чёткими, будто они рассматриваются через дымку или туман. Эффект размытия помогает выделить ключевые элементы интерфейса, направляя внимание пользователей на передний план.
Этот приём активно применяется для акцентирования текста, иконок или других элементов на фоне. В большинстве графических программ (Adobe Photoshop, Figma) размытие легко настроить.
Lottie
Lottie — это относительно новый формат файлов анимации на основе JSON-кода. Когда важно минимальное время загрузки страницы, лучше выбрать Lottie вместо GIF, так как размер файла Lottie примерно в 3000 раз меньше.
Lottie-файлы масштабируются без потери качества благодаря кодированию. GIF-изображения, напротив, плохо обрабатывают сложную графику, и при масштабировании часто выглядят размытыми и пиксельными.
Дизайнеры могут легко изменять цвет фона, скорость анимации и другие параметры Lottie-файлов. Найти крупнейшую коллекцию бесплатных Lottie-анимаций для использования в ваших продуктах можно на сайте LottieFiles.