Правила редизайна

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

Часто эта мысль возникает из-за смены моды дизайна, плохого планирования либо его отсутствия и отсутствия воли пересмотреть неудачные подходы. Постоянный редизайн - это чуть ли не тренд ИТ-индустрии и всем это знакомо.

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

Если вы уже решились на переделку сайта, то вот несколько правил от Джонни Холмана, который объявил о переделке сайта и сделал для себя набор правил (“в этот раз я сделаю всё правильно”). Даю их в переводе ниже, кто хочет, може посмотреть оригинал.

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

Правила

Выполняйте все эти правила, когда производите какие-либо изменения в дизайне.

Верстка

1. Использовать Mobile first
2. Без сайдбаров

Поведение

1. Без эффектов “навести-чтобы-открыть”

Объекты

1. Все изображения должны быть ретина-готовыми
2. Все изображения должны включать оригинальные файлы-источники
3. Что может быть в SVG, должно быть в SVG
4. Думайте долго и тщательно перед каждым добавлением любого JS

CSS

1. Никаких упоминаний пикселов вне границ. Только ems или проценты
2. CSS селекторы не должны быть связанны с HTML структурой
3. Никаких ветвлений глубже 2го уровня
4. Все цвета должны быть переменными
5. Держать макет отдельно от стиля
6. Никаких important
7. Никаких ID селекторов
8. Использовать отрицательные margin только как последнее средство
9. Все загружаемые шрифты должны начинаться с правильно определённых отступлений (fallbacks)

Обновления

1. Должны быть нетрудными
2. Их возможно проводить из любого места

Удалить

• сайдбар
• комментарии
• кнопки твитта

Вдохновение брать из сайтов

• http://friendsoftheweb.com/
• http://www.strangenative.com/
• http://oak.is/thinking/
• http://yaronschoen.com/
• http://thegreatdiscontent.com/
• http://thekoan.org/
• http://37signals.com/svn
• http://frankchimero.com

Типы контента

инфо

• текст со списками
• фото с текстом

пост блога

• эссе с фото
• объявление с лого или фото
• урок с кодом
• урок со скриншотами

проект

• лого, описание, ссылки
• лого, описание, скриншоты

список

• нумерованные текстовые списки
• списки с точкой
• списки с миниизображением

Фичи (можно обойтись без них или добавить свои)

• цветовая схема для контент-переменных