Кирилл Беляев: заметки с тегом веб

Тире — плохой разделитель для заголовка страницы

Кирилл Беляев — Thu, 05 Oct 2017 09:43:21 +0300

Это мало кого волнует. ХТМЛ-тег «title» хранит заголовок страницы, тот который видно на вкладке настольного браузера. Заголовки стремятся составлять так, чтобы они ёмко описывали содержание страницы: Прогноз погоды в Риге. Или набивают его СЕОшным текстом для поисковых роботов: Где купить телефон Samsung в Москве — на IM.ru 60 моделей телефонов Самсунг. На главной странице часто пишут название компании или продукта: Яндекс.

На внутренних страницах к описанию этой конкретной страницы добавляют название «всего сайта». А чтобы не придумывать, как по-человечески сказать, вводят разделитель. Когда разделителем заголовка на русском служит тире, появляются паразитные смыслы:

Вторая причина не использовать тире — экономия места. Тире требует два пробела и длиннее других знаков препинания в 2-3 раза. Лучший разделитель, по-моему, — точка, ей нужен один пробел и минимум места и никаких лишних интерпретаций. Ещё подойдёт средняя точка, запятая, и в экстренных случаях — стрелка:

Диаметр. Википедия
Диаметр · Википедия
Диаметр, Википедия
Диаметр → Википедия

Шрифтовые логотипы в вебе

Кирилл Беляев — Wed, 29 Jan 2014 15:37:55 +0300

На Ретине хорошо выглядит вектор, фотографии и графика, увеличенная в три раза. Готовя графику для сайта, рассчитанного под Ретину, чаще все элементы просто сохраняют в растре с высоким разрешением.

Считаю, что векторные логотипы, с посильными для ЦСС заливками, лучше оставлять в векторе, например в шрифте. Можно весь лого одним элементом или побуквенно, если он как у Гугла текстовый.

Яндекс может просто впечатывать названия продуктов фирменным шрифтом.

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

В целом всё по стандартам триза «сделать статическое динамическим» (или постоянное — переменным) и «сделать неуправляемое управляемым» (другой пример применения стандарта). Кернить, менять цвет, подчёркивание, кегль и интерлиньяж — одно удовольствие.

Для примера наш логотип:

KIPO

Процедура в три шага:

Оупен-тайп собрал в приложении Glyphs (кстати, поделитесь простыми шрифтовыми редакторами в комментариях). Скопировал и вставил объекты из Иллюстратора плюс минимально настроил.
Из полученного Оупен‑тайпа сгенерировал набор шрифтов для веба на Font Squirrel.
Добавил набор на сайт.

Что скажете? :-)

Путешествия

Кирилл Беляев — Sat, 10 Aug 2013 22:04:24 +0300

Сделали страничку

kipo.name/travel

Здесь показаны, города, о которых нам есть что рассказать и показать.

Если о городе написано больше одной заметки, ссылка ведёт на одноимённый тег.

«Дело в сайте» прощай

Кирилл Беляев — Sun, 04 Aug 2013 10:40:53 +0300

В феврале этого года мы завершили сотрудничество с интернет-агентством «Дело в сайте».

За полтора года сделано 4 проекта и много сопутствующих задач. Это были интересные проекты, главным их плюсом было погружение в вопрос интернет-магазинов.

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

Предварительных договорённостей у нас не было, поэтому мы публикуем работы в полном объёме.

На нашем сайте проектов, заказанных «Делом в сайте» не будет, но они есть в портфолио на Ревижене: Тачес, Биг-бонус, Клобер и Балтик супер тревл.

Домен для проекта

Кирилл Беляев — Tue, 25 Jun 2013 22:30:17 +0300

Мы продаём домен, чтобы сообщить об этом мы сделали яркую страничку —

trendom.ru

Перепосты и ссылки приветствуются, должна же информация добраться до ищущих.

Открыли сайт и ищем разработчиков

Кирилл Беляев — Wed, 15 May 2013 20:43:25 +0300

Друзья, мы сделали сайт с нашим портфолио — kipo.name. У него нет системы администрирования, он на голом ХТМЛ. Это не круто, но на большее ни времени, ни умений не хватило. В ближайший месяц на сайте будут появляться работы этого года.

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

Мы ищем разработчика, с которым можно сотрудничать на проектной основе и по ФФФ. Задачи есть наши (сайт, блог) и клиентские проекты. Мы не берём комиссионных, но курируем проекты полностью (наш дизайн — наша ответственность). Это удобно, если нет желания общаться с разными людьми не всегда близкими к теме. Пишите на hi@kipo.name и расскажите друзьям.

Китайский чай и новости «Чаши тепла»

Кирилл Беляев — Fri, 22 Mar 2013 19:13:04 +0300

В 2011 мы начали работать над проектом «Чаша тепла». До этого мы предпочитали чай кофе и не жаловали пакетики. Основатель компании Дима Шацких увлёк нас темой китайских чаёв и наше предпочтение переросло в страсть. Теперь мы знаем, как сильно бодрит, тонизирует и вставляет хороший и правильно заваренный китайский чай (вот почему они так работают :) Теперь чай в приличном ресторане похож на пакетированный (даже, если листовой), а европейская культура чаепития на фастфуд.

Рекомендуем. Чаи «Чаши тепла» дороже, чем непакетированные из магазина, но дешевле, чем развесные из чайных лавок.

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

Пока разрабатывается удобный интернет-магазин, на волне моего изучения ХТМЛ появилась страничка-визитка — chasha-tepla.ru

Отличная доменная пара

Кирилл Беляев — Mon, 28 Jan 2013 14:42:01 +0300

Сделал страничку о доменах Мулоко:
mooloko.ru + mooloko.com

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

История про дипломный проект

Кирилл Беляев — Fri, 25 Jan 2013 00:04:06 +0300

В октябре 2011 я написал письмо Артёму Горбунову о моём дипломном проекте:

Здравствуйте, Артём!

Возможно, вас заинтересует мой проект. Если мои надежды оправдаются и вам будет интересно, прошу написать какие идеи вам показались значимыми, а какие не очень?

Мне показалось, что для «Советов» объём картинок слишком большой.

Артём ответил следующее:

Вы могли бы прислать в Советы пару самых важных картинок в увеличенном виде (желательно сразу на 700 в ширину) и дать ссылку на полный набор.

Да и на ревиженовской странице ничего нельзя прочитать.

Тогда я застеснялся публичного разбора полётов и неумения выложить картинку в сети и дать на неё ссылку. Я ничего не ответил. Но заноза о разметке и размещении страниц в вебе осталась. За что большое спасибо, Артёму!

Прошло всего 15 месяцев и появилась моя первая ХТМЛ-страничка. Потратил я на это около 10-14 дней, но, увы, не за раз.

Встречайте:
kipo.name/citydogs

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

Предновогодние работы

Кирилл Беляев — Fri, 04 Jan 2013 13:47:42 +0300

В предверии Нового года мы нарисовали пару работ для агенства «Дело в сайте».
Электронная открытка к Новому году:

Новая версия сайта «Тачес.ру» (предыдущий дизайн, процесс его создания):

Лукрум

Кирилл Беляев — Sat, 24 Nov 2012 15:29:52 +0300

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

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

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

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

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

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

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

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

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

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

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

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

Кирилл Беляев — Tue, 24 Jul 2012 14:54:28 +0300

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

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

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

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

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

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

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

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

Кирилл Беляев — Thu, 05 Jul 2012 01:24:33 +0300

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

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

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

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

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

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

Кирилл Беляев — Mon, 02 Jul 2012 12:42:17 +0300

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

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

Амазон.ком для примера

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

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

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

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

Кирилл Беляев — Sat, 30 Jun 2012 14:00:48 +0300

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

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

Плюсам —да, минусам — нет

Кирилл Беляев — Mon, 28 May 2012 09:56:33 +0300

Не знаю импортного сайта, на котором можно ставить «минус», «нелайк» или ещё что-то в таком духе. (Если знаете — дайте линк). На просторах рунета такие кнопки есть и не одна.

Раньше мне было как-то пофиг, а потом переклинило.

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

Ошибочно думать, что куча минусов остановит человека. Без аргументов они подобны мухам в жару — раздражают, но дома сидеть не заставят.

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

Как пример в этом смысле хорош Беханс, где сразу видно: просмотры против «лайков». И сразу понятно, что 15% или 45% посетителей «купят» некую штуку. И не важно, почему остальные этого не сделают: им не понравилось (они нажали «минус») или просто это не их сфера интересов.

На неудачи всем плевать — кто из нас не лажал? И с деньгами лажали, и с качеством, и со сроками. Все мы люди. Более эффективно сосредоточиться на плюсах.

Мне кажется для западной ментальности это норма, не требующая объяснений. Об этом никто там не задумывается.

Ну, а если что-то уж так сильно бесит, а «минус» не поставить — аргументированно выскажи своё мнение в комментариях.

Процесс создания сайта Тачес.ру

Кирилл Беляев — Mon, 02 Apr 2012 00:17:02 +0300

Дизайн сайта «Тачес.ру» заказало интернет-агентства «Дело в сайте». Это наш первая работа со студией в роли клиента: сотрудничество получилось продуктивнее и приятнее, чем с директором компании, которому нужен сайт подешевле и побыстрей.

По сути своей это мини-сайт: всё делалось ради главной станицы высадки. Кроме неё мы нарисовали форму заказа, информационную страницу и заставку с имитацией разблокировки сенсорного экрана.

Начинаем с главной:

Задачу не поняли, переделываем:

Ближе, но со стилем опять не то. Решить задачу быстро не получается, поэтому клиент принимает решение повесить заглушка — берём фотку из последних макетов и пишем текст:

При встрече разбираемся, что не так, и обсуждаем, куда двигаться. Тут надо сказать отдельное спасибо Денису Левченко за его опыт и чёткое видение цели. Рисуем ещё раз:

Теперь ок. Когда дизайн уже был готов, меня пригласили на фотосесию для сайта. Было холодно (—24 C°), но познавательно.

В начале марта стартовали скидки — для них сделали весеннюю тему:

Ссылка на рабочий сайт

Taчec.ру

Кирилл Беляев — Thu, 01 Mar 2012 15:48:27 +0300

Последние два месяца были более чем насыщенными — 7 задач разной сложности. Из них сейчас мы готовы представить сайт «Тачес.ру», который мы делали для интернет-агентства «Дело в сайте».

Пара слов о продукте: шведская марка «Tatchies» выпускает перчатки для сенсорных экранов. У них кончики пальцев пронизаны серебряными нитями, которые проводят заряд, на который реагирует экран. Подробнее написано тут. Это удобно — сами пробовали.

Заставка не мешает при повторном посещении — после разблокировки сайт помнит вас неделю.

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

P. S. Клиент выставил работу на конкурсе сайтов «Рейтинг Рунета — 2011». Приглашаем вас голосовать.

P. P. S. Смотрите процесс создания.

Современные пиктограммы

Кирилл Беляев — Mon, 30 Jan 2012 02:35:20 +0300

Шрифт Новые пиктограммы (Modern Pictograms) ещё один иконочный шрифт. Он также как шрифт Веб-символы упрощает работу с иконками, кнопками и прочими элементами в веб-среде. Весь алфавит и загрузка файла — по ссылке.

Шрифт «Веб-символы» и «Сафаризатор»

Кирилл Беляев — Fri, 06 Jan 2012 17:37:04 +0300

1. Шрифт Веб-символы (Web Symbols Font) от дизайн-студии «Джаст би найс» (Just Be Nice) позволяет упростить работу с иконками, кнопочками и некоторыми другими элементами в веб-среде. По ссылке можно скачать архивы, почитать про подключение и посмотреть весь алфавит.

2. «Сафаризатор» (Safarizator.ru) помогает обернуть дизайн-макеты в скин эпловского браузера Сафари (Safari). Этот простой и удобный сервис сделан в бюро интернет-проектов «Иммельман».