19 заметок с меткой иконка
📅 18 декабря 2015

Векторные иконки для ретины

Скоро буду делать адаптивную вёрстку сайта на моей основной работе. Один из этапов подготовки: перевод иконок в векторный формат SVG. Иконки сделаны по моде: плоские с лёгким намёком на объём.

Флэт иконки с бликами в формате SVGФлэт иконки с бликами в формате SVG

За основу взяты старые иконки:

Иконки в формате PNGИконки в формате PNG
PNG vs SVGPNG vs SVG

Предыдущие иконки рисовал тоже я, но многие идеи брал из гугла или ещё откуда-нибудь.

Подготовка к адаптивной вёрстке

Кроме иконок, нужно было постепенно упростить вёрстку сайта. Мы отказались от бокового фона и от колонок, вместо них более логично разбили сайт на горизонтальные этажи сверху вниз. Всё это делали не сразу, а путём АБ-тестов.

📅 7 декабря 2015

Адаптивная вёрстка для NENCOM

bg.nencom.com

Версии сайта для телефона, планшета и обычного компьютераВерсии сайта для телефона, планшета и обычного компьютера

Разделение версий

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

Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».

▼ Читать дальше

📅 11 сентября 2012

Три медведя

Основной канал @AvtodetiRu в Твиттере разделился на три направления. Двум новым каналам @Avtodeti_forum и @Avtodeti_video потребовались узнаваемые иконки с использованием основного персонажа — медвежонка. Были решены две задачи: чтобы иконки хорошо различались в общей ленте, и чтобы при этом не пострадало их единство.

Три медведя, как в сказкеТри медведя, как в сказке

Если и правда по сказке, то расклад такой: с Айпадом играет Мишутка, самая общительная (посередине) — мама, а слева, получается, папа 😃

Иконки в ленте ТвиттераИконки в ленте Твиттера

На роль цветового маркера (для отделения иконок друг от друга) отлично подошло автокресло.

📅 13 апреля 2012

Сайт huberits.ru

Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.

Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.

huberits.ru

Страница продукцииСтраница продукции

Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:

Вид сайта на разных экранахВид сайта на разных экранах

▼ Читать дальше

📅 17 марта 2012

Favicon 2: medvedkovo.ru

Фабрика «Медведково» делает неплохие бюджетные сумки. А вот сайт у них не самый аккуратный (типографика, вёрстка, нюансы). Фавиконка получена грубым уменьшением до нужного размера. При ресайзе она «поплыла», потеряла в деталях и цвете. Сравните два варианта:

Исходный favicon против улучшенного вариантаИсходный favicon против улучшенного варианта

Данная фавиконка идеально отвечает условиям акции «Фавикон бесплатно», которая стартовала в моём блоге и продлится ещё долго. Оставляйте заявки в комментариях! ;)

▼ Читать дальше

📅 14 марта 2012

Стартует акция «Фавикон бесплатно»!

Что-то у меня мало заказов на favicon’ы 😃 Поэтому запускаю инновационную наноакцию в формате 16×16 пикселей:

«Фавикон бесплатно»

Иконка первого участникаИконка первого участника

Акция будет проходить в три этапа:

Этап 1. Фавикон рисуется выбранному сайту из топа Яндекса.

Выбор происходит на основе имеющейся иконки: если у неё есть потенциал, и его легко раскрыть, аккуратно перерисовав иконку.

Этап 2. Бесплатный редизайн favicon’а получают удачные примеры из комментариев. Пишите адрес сайта и, скорее всего, вам повезёт 😃

Обязательные условия:
— хороший сайт с посещаемостью от 100 человек в день;
— концепция иконки не меняется.

Если же вам нужна принципиально новая фавиконка, то это уже за небольшую плату.

Этап 3. Примерно через полгода подведём итоги.

▼ Читать дальше

📅 13 марта 2012

Транспортная компания GPFT

gpft.ru

Небольшой сайт для транспортной комании GP FreightTruck:

Главная страница сайтаГлавная страница сайта

Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.

▼ Читать дальше

📅 6 марта 2012

Иконки-метки для анонсов новостей

Возникла необходимость пометить анонсы в ленте новостей «Автодетей». Бывает, что новость содержит видеоролик или фотографии, и тогда ставится соответст­вующий значок:

Метки (тэги) в зависимости от типа новостиМетки (тэги) в зависимости от типа новости

▼ Читать дальше

📅 18 ноября 2011

Иконка ICQ

Когда-то давно мы все дружно пересели на квип (qip). Он был настолько хорош, что ему даже прощались периодические конфликты с icq-сетью. Потом в квипе появилась собственная регистрация, и из-за этого путаница в аккаунтах. Мой логин выглядел как 47748654-2, и мне совершенно не нравилось, что он не совпадает с номером аськи. Последней каплей для меня стало то, что в квипе появился баннер. В итоге при перестановке винды я полез на сайт icq. В новой версии аськи после тонкой настройки меня всё устраивает. Только вот иконка по-прежнему ужасно смотрится в мелком варианте. Сравните новую иконку и ту, что я сам нарисовал:

Оригинальная иконка ICQ вся размазываетсяОригинальная иконка ICQ вся размазывается

Если кому-то нужна моя иконка (16×16), скачивайте: icq.ico.

📅 23 октября 2011

Как создавалась фавиконка для «Автодетей» (часть 2)

Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп 😃

Вот весь процесс:

ПлашкаПлашка
ГрадиентГрадиент
Две лапы готовыДве лапы готовы
То, на чём сидит мишкаТо, на чём сидит мишка
Вот такие рукиВот такие руки
Правая лапаПравая лапа
Руки готовыРуки готовы
ГоловаГолова
Рисуем ременьРисуем ремень
Тень и носикТень и носик
Сочный градиентСочный градиент
Обводка головыОбводка головы
Итоговая версия фавиконкиИтоговая версия фавиконки

Перечислю основные средства фотошопа, которые нам понадобятся, чтобы во время рисования не было вопросов. Это пипетка, карандаш, стирательная резинка, выделение (прямоугольное и овальное), работа со слоями (создать слой, изменить порядок) и задание степени эффекта в процентах (будь то карандаш, ластик или прозрачность слоя).

Задача

Нужно заново отрисовать логотип Автодетей —

Мишка на оранжевой плашкеМишка на оранжевой плашке

— в размере 16 на 16 пикселей.

▼ Читать дальше

📅 21 октября 2011

Как создавалась фавиконка для «Автодетей» (часть 1)

Как рисовать фавиконку? Покажу на реальном примере.

Старая фавиконка

На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети:

Старая фавиконкаСтарая фавиконка
(девочка постарше и мальчик помладше). Иконка на момент создания соответствовала тематике сайта.

Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.

Процесс создания предыдущей версии фавиконкиПроцесс создания предыдущей версии фавиконки

▼ Читать дальше

📅 5 октября 2011

Фавиконки (favicon)

В этом посте собраны фавиконки старого образца (16×16 точек), которые я рисовал:

  • astronel
  • avtodeti
  • avtodeti_v2
  • biobran
  • cs-fashion
  • cyberface
  • diaclub
  • dominus
  • ekofriend
  • nencom_v2
  • fitnes-marfino_v2
  • fnxp
  • gbip_v2
  • plunix
  • gdwl_v2
  • gpft
  • reaktivy
  • kupaemsa
  • mklider
  • naholste
  • nikermann
  • ofgp
  • packland
  • pajeroservice
  • proproduction
  • rainbow_v2
  • ranforce
  • rukodelnitsy
  • tfmarket
  • senpolia-nn
  • vishenka
  • vodalux
  • xumuk
  • avtodostavka
  • besson
  • camelot
  • ejonok
  • fotogravika
  • sanclinic
  • icq
  • sisibol
  • stinnol

▼ Читать дальше

📅 22 июля 2011

Гарантия и подарок от «Автодетей»

Готовые иконки с подписямиГотовые иконки с подписями

▼ Читать дальше

📅 3 мая 2011

Пиктограммы для XuMuK.ru

Незамысловатые и аккуратные:

Неорганические реакцииНеорганические реакции
Органические реакцииОрганические реакции
Редактор формулРедактор формул
Электронное строение атомаЭлектронное строение атома
Конвертер величинКонвертер величин
Уравнивание реакцийУравнивание реакций
📅 3 февраля 2011

Пиктограммы для сайта «Финэксперта»

Сайт «Финэксперта» получился слишком уж простым по внешнему виду, и нужна была какая-то «фишка». Этой фишкой стали пиктограммы на главной странице, ведущие в соответствующие разделы услуг:

оценка финансовых рисков предприятияоценка финансовых рисков предприятия
оптимизация налогообложенияоптимизация налогообложения
бухгалтерский учетбухгалтерский учет
юридические услугиюридические услуги
📅 16 декабря 2010

Сайт и форум «Строгинет»

strogi.net

Главная достопримечательность нового дизайна — это пиксельный рисунок района Строгино:

Главная страница портала «Строгинет»Главная страница портала «Строгинет»

▼ Читать дальше

📅 20 ноября 2010

Пиктограммы для сайта «Автодетей»

Для сайта «Автодетей» придумано и нарисовано около 100 пиктограмм, вот некоторые из них:

аварииаварии
многодетным семьяммногодетным семьям
акция на троихакция на троих
лучшая ценалучшая цена
скидки корпоративным клиентамскидки корпоративным клиентам
краш-тестыкраш-тесты
раскраски детямраскраски детям
детские сказкидетские сказки

▼ Читать дальше

📅 7 октября 2010

Сайт «Автодетей»

avtodeti.ru

Апдейт. Эта страница уже неактуальна, так как после оптимизации в начале 2012 года сайт заметно изменился. О том, что было сделано, напишу в отдельном посте.

С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.

Сайт Автодетей, 2010

▼ Читать дальше

📅 31 марта 2010

Иконки для форума «Строгинет»

Весь набор иконокВесь набор иконок

У каждого раздела форума теперь есть своя запоминающаяся иконка.

Иван ТитовИван Титов
Веб-дизайнер,
разработчик
★ Москва
© 2004 – 2019