19 заметок с меткой иконка

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

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

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

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

Иконки в формате PNGИконки в формате PNG" style="max-width:518px;
PNG vs SVGPNG vs SVG" style="max-width:518px;

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

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

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

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

bg.nencom.com

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

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

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

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

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

Три медведя

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

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

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

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

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

Сайт huberits.ru

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

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

huberits.ru

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

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

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

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

Favicon 2: medvedkovo.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

gpft.ru

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

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

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

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

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

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

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

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

Иконка ICQ

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

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

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

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

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

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

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

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

Задача

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

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

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

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

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

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

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

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

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

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

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

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

Фавиконки (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

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

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

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

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

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

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

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

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

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

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

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

strogi.net

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

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

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

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

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

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

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

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

avtodeti.ru

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

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

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

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

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

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

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

© 2004...2018