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