Рубрика «Работа с иконками» - 2

Передо мной стояла задача сделать иконочный шрифт из векторов, сделанных в Sketch App, и сгенерировать шрифт на IcoMoon.

Для этого нужно экспортировать векторные иконки из Sketch App в SVG и добавить их в Iconmoon. Но что-то пошло не так, некоторые иконки имели неожиданный вид.

image Это то, как отобразил мой SVG IcoMoon.
image А это то, на что я рассчитывала, глядя в Sketch.

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

Встречали ужасные PowerPoint презентации с разноцветными слайдами и безвкусными картинками? Тогда вы точно должны прочитать эту статью!

ВАЖНО: здесь я пишу только про бизнес презентации для чтения — не для публичных выступлений. Это важно понять, так как техники разные в этих двух форматах. Под форматом «бизнес презентаций для чтения» я подразумеваю такие документы как коммерческие предложения, спонсорские пакеты, инвестиционные презентации проектов, презентации продуктов, которые в большинстве случаев отправляются исключительно по электронной почте.

С вами Григорий Арт, основатель Digital агентства Artrange, и в этой статье я расскажу о наиболее распространенных ошибках в дизайне и поделюсь своими 10 приемами по созданию поистине крутых презентаций. Почти все примеры, которые я привожу ниже, — это выдержки из реальных кейсов, которые мы реализовали.
Здесь важно отметить, что 10 приемов актуальны на 2017 год (и ближайшие месяцы 2018).

Начнем с самого важного при создании презентации:Читать полностью »

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

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

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

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

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

В девяностые, когда стали доступны первые компьютеры, каждый мог стать дизайнером и сделать вывеску для своего ларька.
К нам в рубрику #logomachine_help присылают самые разные логотипы, но от многих по-прежнему веет тем самым любительским дизайном из 90-х. Мы собрали самые распространенные проблемы в 5 худших приемов, которых лучше избегать, если ты не возишь щебень на самосвале.
5 худших приемов отечественного дизайна из 90-х - 1
Читать полностью »

Продолжение. Ссылка на первую часть (Осторожно, трафик!).

Как мы делали совершенно новый КОМПАС-3D: История в семи главах → часть 2 - 1

Продолжаем разбирать по полочкам революционный интерфейс CAD-системы КОМПАС-3D v17. В первой части наш проектировщик интерфейсов Сергей Швецов рассказал, с какими задачами столкнулась команда, с какими задачами столкнулись при разработке нового дизайна. Если вы не понимаете, откуда цитаты или не знаете спецтерминов — добро пожаловать в первую часть материала!

Осторожно, трафик!
Читать полностью »

Привет! Мы компания АСКОН, разработчик инженерного софта. Возможно, вы слышали про наши продукты КОМПАС-3D, Вертикаль, ЛОЦМАН:PLM, Pilot-ICE, Renga и геометрическое ядро C3D.
Они помогают промышленным предприятиям создавать модели изделий любой сложности и затем выпускать их на производстве, а строительным компаниям и проектным организациям воплощать архитектурные замыслы и управлять информационной моделью зданий и сооружений.
В нашем блоге мы будем рассказывать о самых разных сторонах разработки продуктов: развитии функционала, тестировании, api, дизайне, юзабилити, работе с геометрическим ядром (а оно у нас собственное!), команде и других важных, любопытных и иногда инсайдерских подробностях!
Как мы делали совершенно новый КОМПАС-3D: История в семи главах → часть 1 - 1
Сегодня у нас важный день. Не только потому, что мы опубликовали наш первый материал
на Хабре. 17 апреля мы выпустили новую, можно даже сказать революционную, версию
системы 3D-моделирования КОМПАС-3D v17. И главный герой этой революции — интерфейс. Ему и посвящается пост (в нескольких главах!) Сергея Швецова, дизайнера-проектировщика
пользовательских интерфейсов АСКОН. Осторожно, трафик.
Читать полностью »

Поговорим про интерфейсы и про то, что видим на этой ленте статей, прокрутив её вниз, до пагинатора.

Не находите ли вы неудачной кнопку перехода на страницу номер 100? Пятничное - 1

Конечно, очевидно, что после кнопки с номером «8», ведущей на страницу номер 8 по стрелке, похожей на стрелку возле слова «Туда» должна идти кнопка, ведущая на страницу с номером 9.

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

Представляем вам подборку бесплатных сервисов для дизайнера. Это первый вариант, в дальнейшем планируем расширять, добавляя новые разделы и инструменты.

101 бесплатный сервис для дизайнера - 1
Читать полностью »

image

У дизайнера есть несколько разных способов передать иконки разработчику:
— отдельными файлами PNG и спрайтом PNG,
— отдельными файлами SVG и спрайтом SVG,
— иконочным шрифтом.

Разработчики фронтенда все чаще привыкли использовать иконки в виде шрифта. Этим же способом распространяются популярные иконочные наборы (например, Font Awesome). У нас в компании разработчики тоже просят «дай шрифт». Мы некоторое время отлаживали схему сборки шрифта: как из файла Sketch автоматически получить файл, пригодный для фронтенда, не замучив дизайнера.

В этом посте я расскажу о нашей схеме, покажу скрипты сборки. Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический Asp.Net MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов.

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js