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

К чему тут этот котик?

Ну…

Иногда мне требуется дизайн для нового сайта. Я отправляюсь на wrapbootstrap.com или themeforest.net и начинаю подбирать подходящий шаблон. Спустя какое-то время выключаю монитор и бездумно смотрю на свое отражение в нем. Мое лицо выражает в точности то же, что и морда этого кота.

Обреченность, с трудом сдерживаемую ярость и желание что-нибудь разломать.

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

Что нужно в первую очередь менять в готовом html&css шаблоне

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

Текст, который пытается слиться с местностью

Почему-то писком моды считается делать серый шрифт на сером фоне. Ну ладно, пусть на белом фоне, но очень-очень бледный. Например так (далеко не худший пример, кстати):

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

К слову, я стараюсь читать длинные статьи с ридера на электронных чернилах. Представляете, как подобный текст выглядит на e-ink? Отвратно, доложу я вам.

Рахитичные шрифты

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

Многие шрифты корректно работают только с латиницей. При создании сайта под Рунет на основе шаблона из Америки это может вылезти боком. Так что обязательно нужно протестировать читабельность не только на “lorem ipsum”.

Заботливо припрятанные ссылки

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

Убойная аргументация спикеров в обоих случаях сводилась к:

• Пользователи теперь опытные, разглядят где ссылка, а где нет.
• Посмотрим на большой сайт X – ага, ссылки без подчеркивания! И на сайте Y тоже. Все, значит можно не подчеркивать.

По-моему, тут ничего не изменилось с 2011 года, когда Тема Лебедев расставил точки на Ё.

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

и

Проверка дизайна на правильность проста: если зритель, не притрагиваясь к мыши, может угадать, где ссылка, а где нет, — перед нами хороший сайт. Это правило перевешивает все остальные.

Лишние элементы

Опа, какой красивый слайдер на полстраницы! А какой прелоадер крутой – 10 секунд гипнотизирует пользователя! И большие картинки на каждой странице – очень красочно!

Просто выпиливаем все, что не относится к прямым задачам юзера на странице и идем дальше.

Проблемы с версткой и SEO

Почему-то дизайнерская религия запрещает использовать теги заголовков (h1-h6) по прямому назначению. Их пихают в боковую колонку, меню, подвал. Первый заголовок на странице далеко не всегда h1, бывает что и h3. А иногда на странице вообще нет заголовочных тегов, только где-нибудь внизу сиротливо болтается h5.

Такая же путаница с семантическими тегами section, article, nav. Перечитываем стандарт и расставляем их по местам.

Низкая скорость загрузки

Множество плагинов к JQuery, комментарии длиннее, чем код, ни разу не оптимизированные иконки и фон… Отправляемся в Google Page Speed и кропотливо выполняем рекомендации.

Конечно, вам могут повстречаться и более экзотичные проблемы, но все же мой перечень закрывает 90% проблем.

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

p.s. А монитор я после очередного шаблона поменял на матовый, чтобы не видеть свое отражение. Так, на всякий случай.