Векторизация и создание иконок для Ekofriend
При обновлении сайта устаревшие иконки требуется приводить к современным стандартам. Векторные иконки отлично смотрятся на всех современных устройствах, от смартфонов до 4K мониторов.
Заказы временно не принимаются
При обновлении сайта устаревшие иконки требуется приводить к современным стандартам. Векторные иконки отлично смотрятся на всех современных устройствах, от смартфонов до 4K мониторов.
Для компании Ивановъ и партнеры была проведена комплексная работа по созданию лендинга, который помогает HR-у привлекать новых сотрудников. Работа включала: разработку логотипа подразделения HR, написание текстов о компании, получение отзывов от сотрудников, снятие видеоролика о компании, помощь в разработке основных принципов компании, оформление отзывов от клиентов и дизайн схемы проезда к офису компании.
Сайт полностью адаптивный: при переключении все элементы подстраивается под содержимое и под размер экрана.
Скоро буду делать адаптивную вёрстку сайта на моей основной работе. Один из этапов подготовки: перевод иконок в векторный формат SVG. Иконки сделаны по моде: плоские с лёгким намёком на объём.
За основу взяты старые иконки:
Предыдущие иконки рисовал тоже я, но многие идеи брал из гугла или ещё откуда-нибудь.
Кроме иконок, нужно было постепенно упростить вёрстку сайта. Мы отказались от бокового фона и от колонок, вместо них более логично разбили сайт на горизонтальные этажи сверху вниз. Всё это делали не сразу, а путём АБ-тестов.
В процессе вёрстки возник вопрос: как оптимальнее всего обозначить границы для переключения версий? К чему привязаться: к размеру экрана или к назначению устройства? В итоге привязались к назначению, исходя из этого подобрали подходящие граничные значения в пикселях.
Мы решили, что планшет — даже если он большой — это всё тот же планшет, которым управляют жестами и читают, как книгу или журнал. Поэтому на вертикальном планшете отображается самая простая «мобильная версия» (такая же, как на телефонах), а в горизонтальной ориентации — промежуточная «планшетная версия».
Основной канал @AvtodetiRu в Твиттере разделился на три направления. Двум новым каналам @Avtodeti_forum и @Avtodeti_video потребовались узнаваемые иконки с использованием основного персонажа — медвежонка. Были решены две задачи: чтобы иконки хорошо различались в общей ленте, и чтобы при этом не пострадало их единство.
Если и правда по сказке, то расклад такой: с Айпадом играет Мишутка, самая общительная (посередине) — мама, а слева, получается, папа 😃
На роль цветового маркера (для отделения иконок друг от друга) отлично подошло автокресло.
Нужно было сделать сайт, представляющий фирму M.Huber I.T.S. GmbH в России, сохранив фирменный стиль и улучшив вёрстку оригинального сайта.
Обязательные условия: ЧПУ, универсальность, красивый и читабельный вид на всех разрешениях от 1024 до 1920, отсутствие горизонтальной полосы прокрутки — в общем, стандартный джентельменский набор для современного сайта.
Сайт живо реагирует на изменение ширины окошка: меняется шрифт, меняются размеры всех блоков. Сайт увеличивается до разумных пределов, а затем остаётся посередине окна:
Фабрика «Медведково» делает неплохие бюджетные сумки. А вот сайт у них не самый аккуратный (типографика, вёрстка, нюансы). Фавиконка получена грубым уменьшением до нужного размера. При ресайзе она «поплыла», потеряла в деталях и цвете. Сравните два варианта:
Данная фавиконка идеально отвечает условиям акции «Фавикон бесплатно», которая стартовала в моём блоге ;)
gpft.ru
Небольшой сайт для транспортной комании GP FreightTruck:
Сайт будет развиваться, а пока его можно рассматривать как сайт-визитку. Дизайн нарисовала знакомая девушка, а я выполнил вёрстку, доработку мелочей (кнопочки, фавикон, стили) и подключение сайта к своей CMS.
Возникла необходимость пометить анонсы в ленте новостей «Автодетей». Бывает, что новость содержит видеоролик или фотографии, и тогда ставится соответствующий значок:
Когда-то давно мы все дружно пересели на квип (qip). Он был настолько хорош, что ему даже прощались периодические конфликты с icq-сетью. Потом в квипе появилась собственная регистрация, и из-за этого путаница в аккаунтах. Мой логин выглядел как
Если кому-то нужна моя иконка (16×16), скачивайте: icq.ico.
Любую фавиконку можно нарисовать в Paint’е: берём лупу ×8 и рисуем точечки, как в мозаике. Но такие удобные инструменты, как наложение градиента, произвольная прозрачность — в Paint’е недоступны. Поэтому лучше использовать фотошоп 😃
Вот весь процесс:
Перечислю основные средства фотошопа, которые нам понадобятся, чтобы во время рисования не было вопросов. Это пипетка, карандаш, стирательная резинка, выделение (прямоугольное и овальное), работа со слоями (создать слой, изменить порядок) и задание степени эффекта в процентах (будь то карандаш, ластик или прозрачность слоя).
Нужно заново отрисовать логотип Автодетей —
— в размере 16 на 16 пикселей.
Как рисовать фавиконку? Покажу на реальном примере.
На старой фавиконке, прослужившей верой и правдой несколько лет, красовались дети:
Старая фавиконка была получена простым уменьшением знака «Осторожно, дети!» до размера 16×16 пикселей и раскрашиванием в фирменные цвета: серый и оранжевый.
В этом посте собраны фавиконки старого образца (16×16 точек), которые я рисовал:
|
Незамысловатые и аккуратные:
Сайт «Финэксперта» получился слишком уж простым по внешнему виду, и нужна была какая-то «фишка». Этой фишкой стали пиктограммы на главной странице, ведущие в соответствующие разделы услуг:
Главная достопримечательность нового дизайна — это пиксельный рисунок района Строгино:
Для сайта «Автодетей» придумано и нарисовано около 100 пиктограмм, вот некоторые из них:
Апдейт. Эта страница уже неактуальна, так как после оптимизации в начале 2012 года сайт заметно изменился. О том, что было сделано, напишу в отдельном посте.
С компанией «Автодети» я сотрудничаю с момента её зарождения. За 5 лет сайт повзрослел, появились новые сервисы, разделы, акции, увеличился выбор товара, и в 2010 мы провели необходимый редизайн. Были решены 3 задачи на упрощение: навигация по сайту, подача материалов и процесс выбора товара.
У каждого раздела форума теперь есть своя запоминающаяся иконка.