В этой статье я, на примере редизайна главной страницы cplaza.ru, расскажу об одном из принципов разработки сайтов: «показать товар лицом».

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

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

Под катом находится сравнительно небольшая подборка СSS3 и СSS3+JQuery меню. Некоторые из них уже могли встретится пользователям на просторах Интернета, некоторые-нет. Весь обзор представлен в виде скриншотов и демо-ссылок, а также ссылок на закачку сырцов, там, где это возможно.

Уважаемые коллеги, которые сталкивались с классификатором адресов Российской Федерации КЛАДР знают, насколько это странная база (в первую очередь своей структурой), а также большим количеством неточностей в самих данных.

В 2011 году за дело взялась ФНС, которая начала разрабатывать новую единую базу Федеральной информационной адресной системы (ФИАС) для того, что бы покончить с адресным бардаком, царящим среди различных ведомств.

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

UPD: Продолжение статьи с примером техзадания

Не так давно на хабре были две статьи (Согласно техническому заданию и А зачем мне ТЗ? Я и так знаю!) посвященные техническим заданиям. У меня обе статьи вызвали, мягко говоря, недоумение, в особенности статья «Согласно техническому заданию». На мой взгляд, это вообще вредная статья, которая приводит к неверному понимаю сути ТЗ. В связи с этим хочу выразить свой взгляд на этот вопрос. Не буду говорить обо всех тех. заданиях, слишком широка тема, но думаю смогу рассказать о ТЗ на сайт.

То описание технического задания, о котором речь пойдет ниже, не является пересказом ГОСТа, но скорее является его творческой переработкой, хорошо сдобренной горьким опытом. Описанный ниже подход к ТЗ не охватывает все аспекты сайтостроения, но задает общее направление.

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

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

Разработчик отчетливо представляет, что нужно сделать, а сделать, в его понимании нужно вот так:

Уже довольно давно решая задачи проектирования веб-приложений, или веб-ресурсов я использую подход при котором проектирую логику работы исходя из предметной области к которой будет относится веб-приложение. Этот подход ни разу меня не подводил, и зачастую результат работы всегда меня удовлетворял (насколько вообще результат работы может удовлетворять — ведь всегда кажется, что можно сделать еще чуть чуть лучше, и процесс улучшения может быть бесконечным). Однако иногда среди коллег мне приходится встречать мнение, что проектирование с использованием CMS гораздо эффективнее. После последней такой беседы я решил написать статью и поделится своими мыслями с хабра-сообществом.

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

Этой статьей я не пытаюсь доказать что использование CMS не эффективно. Оно эффективно, но по моему мнению только тогда, когда в будущий ресурс новый функционал вносить не предполагается. И когда изначальный функционал не выходит за пределы «сайта-визитки» (хотя и «визитка» порой может быть достаточно технологичной и требовать для реализации того, чего с ограниченными возможностями CMS добиться достаточно трудоемко).

Статьи про создание tooltips'ов уже не раз поднимались на хабре [1,2] в виду большой популярности этого элемента. Сегодня вы узнаете еще один способ как создать простые, анимированные подсказки с помощью псевдо-элементов before и after, а так же свойства transitions.



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

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

Complex Systems

• Model Thinking
  

Computer Science

• CS 101
  
• Machine Learning
  
• Software as a Service
  
• Human-Computer Interaction
  
• Natural Language Processing
  
• Game Theory
  
• Probabilistic Graphical Models
  
• Cryptography
  
• Design and Analysis of Algorithms I
  
• Computer Security
  

Entrepreneurship

• Lean Launchpad
  
• Technology Entrepreneurship
  

Medicine

• Anatomy
  

Civil Engineering

• Making Green Buildings
  

Electrical Engr.

• Information Theory