25 заметок с тегом

веб

Позднее Ctrl + ↑

Лукрум

В декабре 2011 мы начали работу над мебельным интернет-магазином для дизайнеров интерьера. Основными фишками магазина должны были стать некрупные предметы (стулья, столы, свет и аксессуары), стиль, актуальность, именитость авторов мебели и конкурентные цены. Проект так и не запустился, и у нас остались интересные картинки, которые смотрятся хорошо и в 2012-м.

Всё началось с названия. Мы предложили четыре варианта (по два на английском и русском языках):



Победил «Lookroom». Затем сделали два варианта логотипа:



Остановились на «очкастом». Клиент сомневался, хочел посмотреть, как логотип будет выглядеть на сайте с графической частью, без неё и с её уменьшенным вариантом. Перешли к сайту: на главной — сразу каталог с фильтром, «бесконечная резина» и много-много белого. Поняли, что большой знак не нужен — он съедает место в шапке и спорит с выразительными пиктограммами меню — сделали минивариант с домиком-зрачком. Клиент рад — сомнения развеялись.



Комментарии: нужно упростить шапку графически, уменьшить количество разнородных элементов и выравниваний.


Главная (1024 и 1920 пикселей по ширине)


Выпадающее меню и детали при наведении на объект


«Всплывашка» с контактной информацией

Теперь хорошо.

Отдельно хочу показать переключалку сортировки — она получилась супер-отмороженной. У меня ушло секунд 30, что бы вспомнить что к чему. Но на неё точно бы все нажимали, точно бы поняли и точно бы запомнили — сайт-то для дизайнеров :)



Проект остановился после утверждения главной.

Тени в Фотошопе с помощью смарт-объектов

Предполагаю, многие уже знают об описанном ниже методе. Надеюсь, что инструкцию увидят и те, кому она может пригодиться.

В Фотошопе есть смарт-объекты. Их можно получить из любых слоёв (так же ими становятся все объекты, которые «перетаскиваются» из вне). К ним можно применять все фильтры и почти все сохраняются в виде эффектов, не изменяя исходного смарта.

Но это не все плюсы. У фильтров, применённых к смартам, есть маски, которые позволяют делать воздействие фильтров частичным. Я использую эти свойства, например, когда рисую тени. Особенно это помогает, когда нет времени на многослойные «правильные» тени.

Например, вот такая тень от листа:

Тени в Фотошопе с помощью смарт-объектов

Я выделяю слой с листом, заливаю его градиентом от чёрно к прозрачному и трансформирую его с учётом желаемых направления и силы света. После перевожу этот слой в смарт-объект и применяю к нему размытие по Гаузу. Выделяю маску фильтра и заливаю её градиентом в том же направлении, что и сам слой. Теперь можно настраивать интенсивность размытия и карту маски.

При желании можно покрасить тень или добавить ей немного шума. Но нужно помнить, что шум, будучи фильтром, будет существовать в пределах первоначальной маски (у одного объекта — одна маска для всех его фильтров). Чтобы шум покрывал весь объект равномерно, нужно преобразовать смарт с фильтром в простой растровый слой или в новый смарт.

Сначала я хотел сделать скриншоты, но оказалось, видео с экрана делать быстрее.



https://kirillbelyaev.com/ru/blog/pictures/download_video_button.png

Мнемоники в ХТМЛ, «Наун проджект» и «Гет кавер»

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

1. В Фотошопе мне часто не хватает закладки «Глифы» (Glyphs), которая есть и в Иллюстраторе и в Индизайне. Почему её нет в Фотошопе, не понятно? Конечно, часто используемые символы (например, «ёлочки» или длинное и среднее тире) я набираю с Alt-кодами, но есть ещё какой-нибудь копирайт или «не равно». Для этих целей я использую страничку в Википедии про мнемоники в ХТМЛ (в дополнение к ней страничка про все кавычки) — я просто копирую и вставляю символы.



Типографской раскладкой Ильи Бирмана я не пользуюсь, потому что у меня дурацкое сочетание Виндоуса и Маковской клавиатуры, драйвера которой делают их несовместимыми.


2. «Наун проджект» (The Noun Project) — большая коллекция бесплатных пиктограмм. Правда, хороши не все.




3. «Гет кавер» (Get Cover) — сервис подготавливающий макеты сайтов к презентациям. Он мощнее «Сафаризатора», так как знает Хром, Фаерфокс, ИЕ плюс умеет «одевать» макет в продукты компании Эпл. Минус — нет загрузки фавиконки.

Область вокруг корзины лучше без итоговой суммы

В некачественных и непрогрессивных интернет-магазинах (не знаю как их ещё назвать) у блока с корзиной встречаются упоминания общей суммы покупок: «Корзина: 1 товар на 100 р.».

На Амазоне, Озоне, в Эпл-сторе и Микрософт-сторе, в «окрестностях» корзины (даже во «всплывашках», в которых можно уместить всё) такой информации нет. Наверняка, неспроста.

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

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

Напоминание о сумме, которая будет потрачена, мешает пользователю покупать больше. Как в реальном магазине: покупатели набирают кучку и идут к кассе. Если они не предполагают, что им может не хватить, то считают в уме, сильно округляя. А по пути к кассе они придумывают, как будут всеми этими вещами пользоваться. На кассе узнают точную сумму — она всегда выше ожидаемой («9,99» работает). Но эти вещи уже очень желанны и за них платят.

Когда пользователи постоянно видят сумму, они думают «ой, как много получается!» или «я могу ещё потратить». Из-за этой ерунды они отвлекаются от тех «прекрасных» вещей, которые могли бы купить, не холят и не лелеют мечты о них. И в итоге покупают меньше, что не желательно для владельца магазина.
 2 комментария    28   2012   веб   лучше так

Две премии — два третьих места

Тачес.ру, который мы делали, занял III место на премии «Рейтинг Рунета — 2011» в номинации «Потребительские товары и торговля» (май 2012).




Кофейная упаковка с чувачками, которых мы рисовали, заняла III место на «ММФР Ред эпл — 2011» в номинации «Этикетка и упаковка» (сентябрь 2011).
Третие места в двух премиях
Ранее Ctrl + ↓