Официальное представительство «Пежо» в России требует от всех дилеров следования корпоративным стандартам создания сайтов, которые описаны в 100-страничном гайде. Стандарты совершенно не адаптированы под особенности России и уже сложившиеся у нас практики, к тому же материалы, которые распространяет «Пежо», часто совершенно непотребного качества, но поделать с этим ничего нельзя. Кстати, этой болезне подвержено большинство автопредставительств в России.

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

Подробное описание в портфолио Мастерской.

Что главное для любой мастерской? Конечно, работы. Им и отдано центральное место.

Комментарии на полях — это очень классный прием — добавляет неформальности и книжного стиля. Читать на полях — одно удовольствие =)

У большинства работ есть раздел «процесс», в котором можно ознакомиться с этапами создания работы.

В ближайшее время на сайт добавятся еще несколько работ.

Мастерская занимается сайтами, интерфейсами, графдизайном, печатной продукцией и нестандартной рекламой. Пока еще по земным ценам. Обращайтесь.

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

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

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

Страницы с записями на главной, а также сами записи можно листать с помощью сочетания клавиш Ctrl и стрелочек ← →.

Не забыли и про правильные URL. Все части адресной строки функциональны и осмысленны. Если из названия поста (http://sinelnikov.name/2009/05/no-kaif-no-life/) стереть название, оставив только год и месяц, то откроется страница со списком всех постов за этот месяц.

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

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

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

Потрясающая находка — сделать картинки с кузовами машин «вид сверху». Ведь так приятно, что сверху машины практически не отличаются — можно нарисовать только одну картинку. Это еще и очень логично, ведь большинство смотрит на машины с высоты 10-го этажа. Странно только, что вид снизу не использовали, там-то вообще все одинаковые.

 — универсал, да.

Первый эскиз:

Арт-директор — дизайнеру:

— Очень неплохо. Давай попробуем цветовую дифференциацию для гарнитур, как у них в печатном каталоге;

— Логотип Кардо перетягивает на себя все внимание — это неправильно;

— Контакты в меню лишние: и так уже есть в хедере и в футере (да и еще в разделе Компания);

— Мне не нравится, как сверстаны Статьи и новости. Да и место слишком много занимают.

Вариант 2:

Арт-директор — дизайнеру:

— Ценники сверстаны неудачно: непонятно к какой гарнитуре относятся, особенно при большом разрешении;

— Цвета мне тоже не нравятся, да и непонятно, как с ними на других страницах жить;

— Клиент сказал, что у него появится классное видео — давай попробуем сделать его главным элементом страницы;

— По структуре что-то у нас неправильно. Сейчас мы такаем посетителю в нос проводами, в то время как сразу должны рассказывать о возможностях;

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

Вариант 3:

Арт-директор — дизайнеру:

— Здорово. Только теперь получается, что фильтр (возможности, модели, помощник) превратился в самый главный элемент навигации, а меню вообще никому не нужно. Смотри, меню можно сильно упростить. Компания остается. Модельный ряд у нас и так есть в моделях — убираем. Где купить давай напишем под телефоном в плашке. Новости и статьи засунем в раздел Компания (на главной и так есть ссылки). Фото и видео уберем: все равно у Заказчика нет никаких материалов;

— Иконки из правого угла надо убрать. Карту сайта перенеси в футер, а главная — это логотип;

— Полосу красную надо убрать — она не нужна будет, как и надпись Твой скала райдер;

— Слушай, мне не нравится красный. Он агресивен и ничем не обоснован. Давай оранжевый попробуем.

Вариант 4:

Арт-директор — дизайнеру:

— Супер! Отлично. Ничего лишнего, все акценты правильно расставлены;

— Только колонки справа и слева от видео плохие.  Давай выровняем по верхней границе. И добавь абзац про возможности, а то не совсем понятно.

Вариант 5:

Арт-директор — дизайнеру:

— Все-таки картинки не на своем месте. Давай их наверх перенесем. Они должны встречать посетителя. И давай сделаем, чтобы подписи с коротким описанием появлялись просто при наведении мышки. Как у Меги.

Окончательный вариант:

«Добрый вечер! Наткнулся на ваш персональный сайт, sinelnikov.name. Понравилась критика сайта про живое пиво (хотя про phpBB я не согласен, но это субъективное мое мнение).

Не могли бы вы оценить мой сайт с точки зрения юзабилити и дизайна?
1. HoSm - http://hosm.ru/ - Умный Дом своими руками. Здесь я пытался максимально отказаться от использования графики. В идеале хотелось бы только 2 графических элемента — логотип и favicon. Но сейчас еще тени блоков реализуются с помощью картинок. Пытался сделать минималистический дизайн, который бы не надоедал и не препятствовал воспринятию контента.»

Пока рецензия ждала своей очереди, на сайте успели произойти изменения.

Было:

Стало:

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

1. Обязательно надо выделять ссылки, по сравнению с остальным текстом. Лучшие дизайнеры считают, что любая ссылка, за редким исключением, должна быть подчеркнута. Это уже стандардт де-факто, и если нет каких-то веских причин, чтобы этого не делать, то это надо делать. Также помогает выделение цветом.
2. Зачем нужно второе меню, да еще и подписанное «навигация», почти полностью копирующее горизонтальное? Если сразу не понятно, что это навигация, значит, это очень плохая навигация. Этот блок нужно вообще выбросить.
3. В подменю «софт» всего один элемент, значит, нет необходимости делать каталог. Также, как не надо делать нумерацию или ставить буллиты, если в списке единственный элемент.
4. Рамочки, рамочки, рамочки. Если даже убрать их все, читаемость текста не пострадает, а только улучшится, потому что станет меньше мусора. Структурированности добиваются размещением информации по четкой сетке.
5. В списках в верху страницы буллиты перетягивают на себе все внимание и никак не способствуют удобству чтения. Надо сделать их меньше, поставить ближе к тексту, а в конце предложения ставить либо точку, либо точку с запятой. А еще лучше вместо буллита использовать длинное тире «—».
6. Газета. Если «Автоматизация зданий для всех» — это ее название, то не надо каждый раз его писать, достаточно вынести в заголовок. Лучше около тире ставить неразрывные пробелы, чтобы не переносилось название на другую строку.
7. «Умный дом … у вас в квартире». Кроме того, что это неграмотно (по-русски многоточие не отделяется пробелом от предшествующего слова), это еще и глупо. Какой смысл тут передан? «Умный дом… [внимание! театральная пауза! о-па! сюрприз] — у вас в квартире [ни хуя ж себе! дом! — в квартире! умный! кто бы мог подумать?!]»
8. Надо определиться, как писать «умный дом» — в кавычках или нет. В любом случае, всегда одинаково.

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

Спасибо за ссылку Рашиду Юнисову.

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

Задача сайта: привлекать как можно больше новых пользователей, мотивировать старых потреблять платные сервисы.

В чем залог успеха?

1. В нестандартном алгоритме сравнения.
2. В удобном интерфейсе.

На сайте 1618.ru совершены все возможные ошибки в интерфейсе и дизайне. А над идеями простоты Маэдзи дизайнер глумился особенно усердно.

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

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

А должна быть отражена суть. В легкой и интересной форме.

Разберем главную страницу по косточкам:

Середина

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

2. Два сердечка с красными крылашками-точка-1618-точка-ру. Класс.

3. Текст про анкеты нечитаем. Группировка неправильна. Разряды цифр надо разделять пробелами.

4. Что такое новые анкеты? За год? За день? За час? Насрать, что на мамбе так делают. Надо быть круче мамбы.

5. Тикающий счетчик с родившимися  людьми — самый заметный и отвлекающий внимание элемент сайта. В любом случае, разряды надо разделить пробелами.

6. Пустой а-ля поэтический абзац надо убрать ко всем чертям. Я не за этим пришел.

7. Основной текст написан и сверстан так ужасно, что перечисление ошибок займет еще страницу: смысл, орфогрфия, пунктуация, верстка — все плохо.

8. Информация про золотое сечение очень интересна — надо ее красиво подавать и на нее делать ставку. Можно привести больше примеров.

9. Коэффициент и правила его расчета — самое важное. Надо гораздо четче и подробнее рассказать о правилах расчета. Но это не значит — длиннее. Иначе, выглядит как полное разводилово.

Левая колонка

1. Не место контактам и ФАКу в блоке авторизации/регистрации. Какой процент переходит по этим ссылкам? 0,00001? Не только место тратиться, но и восприятие усложняется.

2. «По 100 Золотых. Каждому!» Ни хуя себе. А я думал только избранным и только по четвергам.

3. Баннер тошнотворен и ничитаем.

4. Лидеры сайта — идея правильная. Только надо делать ссылками, чтобы мне хотелось кликнуть (там и так есть эта функция, только неочевидная).

5. Что за топ телефонов? Нельзя так мусорить на главной. И так тошно уже.

Правая колонка

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

2. Идея «как я нашел свою половинку» правильная. Но не с кретинской версткой, не с длиннющими текстами, не с уебищным «подробнее».

Внутри сайт не многим отличается от главной страницы. Немыслимое количество ссылок-функций, теснящихся слева. Даже опытный пользователь растеряется, куда он попал и что тут нужно и можно делать. Ужасно неудобный и сложный интерфейс.

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