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

Что?

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

Как?

Более подробное описание того, как работает продукт, только факты и красивые картинки. Если о еде — прям много еды. Если о технологии — внутренность технологии. Если о том и о другом, значит, то и другое как в Додо.

Где?

Предложение где-то преобрести или воспользоваться продуктом. Предложение может содержать скидку или что-то, что привлечет внимание (реальная польза). Рядом кнопка заказа или ссылочка на скачивание. Соцсети.

Всё. Никаких преимуществ, иконок, цен, имён, мыслей, миссий, услуг, достижений, наград, количество съеденных бутербродиков и затраченных сил на работу, и уж тем более никаких новостей. Хватит. Для всего этого есть бэкстейдж-площадки, которые могут быть ютубом, блогом, медиумом, вц и чем угодно, но только не тем же лендингом. Еще раз — всё внимание исключительно на продукт. Экран «как» может быть расширен до любого размера, если хочется лучше объяснить и убедить. Посмотрите как эпл презентует маки и айфоны, рассказывая о всех тонкостях технологий. Экран «что» и «где» — супер простые и прямые. Они открывают и закрывают сайт.

Сегодня никого не убедить сайтом, это почти невозможно. Если продукт говно — красивые фотографии и клёвый текст его не спасут. Сайт — это карточка и чем она проще, тем лучше. А теперь примерчик — сайт сервиса «Кухня на районе».

что — как — как — как — где
https://localkitchen.ru/

Дамы и господа рад представить новый, красивый сайт Интелдома, который мы сделали во дворе.

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

Подробнее о проекте — dvor.design
Сайт Интелдома — inteldome.com

Дизайнеры — Катя Кан, Никита Грудин. Технолог — Александра Травкина. Артдирекшн — Вениамин Векк. Сделано за 45 дней.

Очень лестный отзыв

Приходите к нам делать сложное и прекрасное.

Мы сделали свой первый сайт — интернет-магазин Сникерсейла. Мы — это студия Двор, которую я организовал пару месяцев назад. Сникер — это сервис, который аккумулирует в себе лучшие предложения интернет-магазинов. Главная страница сделана таким образом, чтобы вмещать самое важное — поиск и предложения на первом экране. Почитайте описание на нашем сайте. Сникер уже на проде, можно походить, поискать косяки, заказать обувь. Дизайнил сайт под моим артдирекшеном Никита Грудин.

Мы в студии делаем айдентику, графику, сайты и все-все самое клевое. Приходите за кайфом, мы самая свежая студия в мире.

Я вот никогда не мог понять — зачем медиа мешают мне читать текст? Я говорю про эти дебильные полоски в шапке сайта, которые внезапно стали так популярны. Индикатор прогресса двигается в зависимости от того, сколько я проскролил. Офигеть, вот это польза!

Зачем замещать и без того идеальный функционал полосы прокрутки? Это первое. Второе, почему эту линию делают постоянно такой тормозящей? — она обращает на себя слишком много внимания и занимает место. Третье, полоска двигается слева направо, а страница скролится сверху вниз. Ощущение, будто у китайцев впервые что-то спиздили. Ну и финальное, полоской невозможно физически воспользоваться: ни нажать, ни подвигать, ни убрать! В чем польза этой чертовой полоски? Чем не устраивает стандартная функция любого браузера?

Возможно, я чего-то не догоняю.

А вы не задавались вопросом, почему у Букинга такой страшный сайт? Ладно, я о другом пришел говорить. О том, что вместо знака рубля у них стоит тупое сокращение в обозначении валюты. Кому-то может показаться, что это очередная дизайнерская придирка. Да, это она.

В 2018 году спокойно можно писать сокращение «руб.» в ситуации, когда нужно указать цену. Вообще можно как угодно: 100 рублей, 100 руб., 100 ₽, 100 рэ, 100 р., 100 Р, 100k. Конечно, не желательно создавать мутации когда есть официальный знак рубля, но иногда он не в тему. Это, значит, было про ценники.

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

В любом прайсе можно написать «Сто баксов», а например в интерфейсе выбора валюты — нельзя. И никак нельзя писать просто «руб.» в обозначении валюты, мы же не на базаре. Знак рубля — самостоятельный элемент, который живет в любых условиях и сам за себя отвечает. «Руб.» — не самостоятельный элемент, живет рядом с номиналом в ценниках.

Никаких «руб.» в обозначении валюты. Только знак рубля!

Знак идеально размещается на сайте и есть в шрифте. Я в инспекторе проверил!

​

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

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

Итак, вы помните мой сайт таким:

Проблемы:

1. Бесполезные прямоугольники.
2. Непонятное выделение рубрик.
3. Глупая последовательность блоков: обо мне, рубрики, проекты, блог.
4. Скучная куча избранных постов.
5. Проекты без подписей.
6. Почта словом.

Теперь главная страница выглядит так:

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

Три блока

Я решил отказаться от трех прямоугольников, которые были у меня с самой первой версии. Три прямоугольника заменил на три смысловых блока: кто такой, дизайн-собрания, проекты.
Было:

Стало:

1. Текст о себе я менял с каждой новой версией. Потом я понял, что сначала надо рассказать о главном, потом о второстепенном.
2. Дизайн-собрание сейчас не имеет хорошего логотипа, поэтому на сайте сейчас такой позор. Кстати, на следующем собрании мы собираемся заниматься разработкой логотипа все вместе — присоединяйтесь.
3. В проекты подсасывается каждый раз рандомный проект из избранного.

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

Избранные заметки

Раньше избранные посты у меня были простой кучей ссылок. Никто по ссылкам не кликал.

Я вдохновился ильяховским справочником Главреда и решил акцентировать внимание посетителей на некоторые посты.

Акцентирование сработало. Люди стали кликать на посты, которые выделены иллюстрацией или текстом. Наверно, это и называется дизайном.

Подвал сайта

У меня поменялся чуть-чуть футер сайта.
Было:

Стало:

1. Футер стал умным: знает когда вставлять Лайкли и кусок описания, а когда убирать. Знает когда скрывать ссылку «Задать вопрос и получить ответ», а когда оставлять. Скрывает метрику, если я редактирую сайт (чтобы не сбивать статистику).
2. Я решился отказаться от нижнего бордера и разделить футер от контентной части расстоянием (Бирман об этом как-то писал).
3. Сделал подвал отдельным файлом со всеми скриптами, копирайтами и версиями.

От бордера в шапки пока что рука не поднимается отказаться, но со временем я это осилю.

Форма для вопросов и предложений

Месяц назад добавил форму для вопросов

Мне начали поступать разные вопросы от читателей и друзей на почту. Я решил превратить это в рубрику и сделать чуть удобнее: не все любят писать на почту. Форму сделал с помощью «Экспромптума», ПХП обработчик и оформление написал сам.

Ссылку «Задать вопрос и получить ответ» футер сам убирает — смысл ее там повторять?

Шаблоны

Постепенно перехожу на шаблоны.

1. Теперь любую страницу сайта можно оформить разными цветами — модно нынче.
2. Хочу сделать удобные шаблоны для того чтобы быстро добавлять новые страницы и проекты. Получается так себе потому что никак не могу разобраться с базой данных. Думаю, дело времени.
3. Логотип меняет свои цвета с помощь ЦСС потому что в формате СВГ.
4. Появилась возможность выделить любимый или избранный проект.

Всякое

1. Ссылки теперь имеют плавный ховер.
2. Посещенные ссылки в шапке никак не выделяются. Остальные — блекло-синие.
3. Аккуратный бордер у Дизайн-собраний.
4. Ссылки и картинки ведущие в одно место выделяются вместе.
5. В разработке английская версия сайта.
6. В некоторых частях сайта было очень много лишних элементов, которые исчезали и появлялись в зависимости от ширины экрана, что очень нагружало страницу. Теперь везде жесткий адаптив.
7. Постепенно отказываюсь от сетки Бутстрапа и делаю адаптив своими силами.
8. Новый фавикон у сайта и блога.

В целом, сайт постепенно становится красивым и функциональным. Людям интересно гулять и читать посты, судя по статистике. Посещаемость растет, что меня очень радует. Ничто в мире меня так не радует как этот проект. Сидишь, верстаешь свой маленький сайт и радуешься жизни. Волшебно, если вы смогли найти себя в каком-то маленьком ремесле от которого вас торкает. Сайты, вышивка, холсты или плакаты — все подойдет для любимого дела от которого вам тепло на душе. Собственные проекты тем и хороши, что радуют вас и привлекают людей.

В перспективе:

1. Доделать шаблоны.
2. Подключить базу данных в проекты.
3. Разработать удобную систему добавления проектов.
4. Сделать английскую версию.

Зацените сайт: veqqa.ru

Что думаете?

Привет, ребят.
Не прошло и месяца, как я выпустил новую версию своего сайта.

Ключевые изменения:

1. Сайт наполнился информацией.
2. Название трех блоков: «Проекты», «Блог», «Мысли» — ушли в прошлое;
3. Добавлена моя фотография;
4. Добавлены рубрики: ссылки по пятницам и загадки по средам;
5. Добавлены две свежие работы (на главной);
6. Избранные заметки разделились на четыре основных раздела;
7. Весь сайт теперь блочный, а не на всю ширину экрана;
8. Добавились проекты (пока что без процесса);

Вроде все.

Предыдущая версия была дырявая.

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

Во-первых, старый сайт растягивал элементы на всю ширину экрана.

Согласитесь, не супер-пупер.

Во-вторых, приходилось добавлять очень большие иллюстрации, чтобы они нормально выглядели на широких мониторах.

В-третьих, портились все разделы.

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

Теперь все разделы сайта имеют ограничение на увеличение масштаба. Шапка и подвал, подсасываемые ПХП, остались широкоформатными. Как думаете, может их тоже сделать блочными?

В новой версии, проекты перечислены столибком.

Это не окончательное решение! Я еще не придумал, как сделать классно.

А отдельно взятый проект выглядит так:

Процессы потом допилю.

Ссылка в меню «Проекты» подсвечена и ведет в основной раздел, что является примером хорошего тона.

В новой версии три верхних блока без подписей. Вот тут спорный момент. Раньше над каждым блоком была ссылка, но в новой версии я решил все это убрать. Что думаете? Имеет смысл подписать эти блоки, или итак понятно?

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

Даже если у вас слишком широкий экран, сайт будет выглядеть нормально.

Вот такие изменения. Ребят, как вам сайт?
Нравится?
Что стоит подправить?
Что выглядит как дерьмо?
Как адаптивность?
Если стесняетесь, напишите на почту: veqqa@veqqa.ru. Принимаю любую критику, даже необоснованную.

***
Я кое-что понял: что если вам смешно смотреть на себя через какой-то промежуток времени — значит вы прокачались.
Мне, право, немного стыдно за свои работы, и порой хочется их закрыть, но потом я понимаю, что если их спрячу, то не с чем будет сравнить. Я не раз говорил, что мой сайт — самый важный мой проект. И я безумно рад, что каждый месяц нахожу новые решения, и делаю его круче. Теперь, когда я его обновил, я не могу смотреть на старую версию без слез и это ахуенно!

Программисты и верстальщики, вопрос к вам: как сделать так, чтобы при наведении на любой из моих блоков (первые три на главной странице), ссылка в навигации подсвечивалась? 

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

С Лебедевым и его студией я познакомился в двенадцатилетнем возрасте, а о сайте http://tema.ru узнал спустя год-два. И только сейчас, в 2017 году, я решил посмотреть код Артемия. Вот так выглядит его дом-страница.

Заходим в код

Тема встречает нас приветствием

Листаем ниже, видим скрытые разделы.

И еще что-то.

И еще.

«Слушай, а давай я тебя HTML писать научу? Это мы только что открыли таблицу. Ширина у нее — пока не треснет браузер. Края не видны. А все остальное — по нулям. Понимаешь? Давай, теперь сама.»

Что-ж, включаем инспектор, правим код.

Пару магических движений, и на сайте появляются скрытые ссылки.

Ооо, новый раздел, круто, переходим

-_-

Самизнаетекто в своем репертуаре.
Другие ссылки ведут на 404, идем дальше.

С помощью того же инспектора удается открыть грустный смайлик и раздел «О гостевых книгах»

Страница существует. Ураа!

Читаем, радуемся, идем дальше.

А дальше ничего интересного кроме фана от Лебедева мы не получаем.

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

«Ты уверен что посмотрел на все комментарии всех страниц этого сайта?»

«У такой картинки просто не может быть альта.»

Но все-таки у меня есть для вас загадка на сегодня. Какие разделы скрываются за этими ссылками?

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

***
В целом, я люблю такие секретики и пасхалки. Ведь Артемий их делал для прикола, для таких же как он сам. Очень приятно подобные штуки находить на сайтах. У меня тоже пасхалки есть, еще с первого сайта c:
Не знаю зачем люди страдают подобной фигней, но видимо те, кто что-то создает так персонализирует свое творение. Пасхалки есть везде: на сайтах, в играх, в домах, в музыке, на/в фотографиях... Пасхалки — это уровень.

В прошлые Загадки по средам правильно ответил Вадим Чичерин. Хвала.