Рубрика «иконки»

В этой статье мы разберем нюансы экспорта векторных иконок из графических пакетов. Несмотря на то, что векторные иконки успешно эксплуатируются не один год, до сих пор встречаются досадные ситуации, в которых отображение иконок будет некорректным: будет плясать толщина линий, появляться размытия, пропадать скругления, или наоборот — появляться скругления там, где ожидались острые углы.

Основных причин — три: особенности (или даже баги) экспорта и оптимизации иконок из графических пакетов, особенности и ошибки рендеринга (мы будем ориентироваться на рендеринг браузером Chrome или оболочки Electron), ошибки дизайнеров по неопытности. Хотя в самом графическом пакете все выглядело хорошо (в данном случае мы рассматриваем Sketch, но похожие проблемы есть везде).

Тонкости и толстости иконок. Про Sketch, особенности рендеринга и игру с толщиной линий - 1
Читать полностью »

Полезное дизайнеру и разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 10 - 1

10-й «Юбилейный» выпуск полезных штук для дизайнеров и разработчиков. Сегодня в выпуске 31 ссылка на всякие свежие полезности. Больше добавить нечего → изучайте сами и делитесь с друзьями!
Читать полностью »

Полезное дизайнеру - разработчику. Свежие утилиты и инструменты для ускорения работы. Выпуск № 9 - 1

Пока дизайнеры продолжают испытывать восторг от появления возможности прототипирования в двух известных инструментах, анонсированных в один день; мир независимых разработчиков продолжает выпускать всякие нужные инструменты. В 9-м выпуске 20 ссылок
Читать полностью »

Обзор в честь моего 10-летия участия в проекте создания операционной системы Kolibri.

Кем я только не работал и что только не делал в этом проекте. Именно знания, полученные в процессе работы над Колибри дали мне возможность кардинально изменить свою жизнь — найти работу мечты, новых друзей и получить невероятное количество фана!

image

Читать полностью »

VK by design - 1

ВКонтакте — это множество интерфейсов для разных платформ. Сегодня Вы узнаете о том, как мы работаем над этими интерфейсами, создавая дизайн своих продуктов.
Читать полностью »

Это очередной кейс о том, как мы проводили А/Б-тесты иконок приложений в Google Play. Мы доказали, что один лишь новый дизайн иконки может увеличить органические загрузки приложения на 14%. Но перед этим нам довелось провести 16 этапов тестирования, сменить 6 концепций, столкнуться с удручающей погрешностью и вывести свою формулу успешного проведения А/Б-тестов.

А для начала, попробуйте отгадать иконку-победителя:

Как мы увеличили загрузки приложения на 14% с помощью нового дизайна иконки - 1

Читать полностью »

Оптическое выравнивание и пользовательские интерфейсы - 1

Привет, меня зовут Иван Греков, я работаю во фронтенд-команде Badoo, занимаюсь вёрсткой пользовательских интерфейсов на проектах компании.

В работе с макетами интерфейсов я использую графические редакторы, такие как Adobe Photoshop и Sketch. В них все слои по умолчанию представляют собой прямоугольные контейнеры. Когда мы выравниванием один слой по центру относительно другого, то для выравнивания используются центры прямоугольных контейнеров. Такой подход крайне неудобен при работе с иконками, поскольку выравниваемые фигуры могут сильно отличаться от прямоугольных контейнеров. И чем больше несимметричная фигура отличается по площади и по точкам координат от прямоугольника, в границы которого она вписана, тем заметнее разница между центрами фигуры и её контейнера. Это приводит к дисбалансу композиции в интерфейсных иконках.

Такая ситуация хорошо знакома специалистам в области дизайна, обычно она решается вручную, что требует определённых знаний и навыков. Именно поэтому она может создавать трудности для верстальщиков и разработчиков, которые решают эту задачу подручными инструментами.

Читать полностью »

Сервис omg-img позволяет вставлять иконки вот так:

<img src="https://png.icons8.com/search">

Пишем URL, получаем бесплатную иконку - 1

Чувствуете, к чему я клоню? Сделали вставление иконок не выходя из IDE. Просто пишете URL, параметры вроде цвета и стиля — мы отрендерим иконку и отдадим через хороший, годный CDN.

Вместо search можно написать любое название иконки:

  • home
  • sheep-on-bike
  • trump

Пишем URL, получаем бесплатную иконку - 2 Пишем URL, получаем бесплатную иконку - 3 Пишем URL, получаем бесплатную иконку - 4

Читать полностью »

10 полезных сайтов с 2D ресурсами для игр - 1

С развитием HTML5 и мобильных платформ 2D игры возвращаются в моду и привлекают внимание даже крупных издателей. Благодаря таким инструментам, как Unity, и онлайн-ресурсам с игровыми ассетами, разрабатывать эти игры стало намного легче. Ниже представлен список из 10 лучших сайтов с 2D ресурсами для игр – как платными, так и бесплатными.
Читать полностью »

1. Dripicons V2

45 ресурсов дизайнерам в помощь - 1

Удивительный набор из 200 аккуратных иконок для разных потребностей, которые доступны в форматах SVG, Webfont, PSD и Sketch.

Читать полностью »