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

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

Ну…

Иногда мне требуется дизайн для нового сайта. Я отправляюсь на 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. А монитор я после очередного шаблона поменял на матовый, чтобы не видеть свое отражение. Так, на всякий случай.

Поделиться
Отправить
Плюсануть

Читайте также
  • seoonly
    09.12.2015

    Истинно) только выжжено черный на белом имеет право на жизнь

    Ответить
  • xx
    10.06.2016

    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Falexeytrudov.com&tab=desktop. «Отправляемся в Google Page Speed и кропотливо выполняем рекомендации». 🙂

    Ответить
    • Алексей Трудов
      10.06.2016

      Ну как бы 80 — неплохой показатель 🙂
      Кстати, про Google Page Speed скоро будет отдельный пост.

      Ответить
      • xx
        10.06.2016

        А мобайл? 60/100

      • Алексей Трудов
        10.06.2016

        С мобайлом хуже, да.
        До блога руки доходят далеко не в первую очередь.

  • Sergey
    19.06.2016

    Большинство сапожников без сапог.
    Елена Камская (оптимизаторша) аналогично отмазывается ))

    Ответить
  • Игорь
    15.01.2017

    Каждый шаблон с фореста нужно доводить до ума. Если нужен качественный дизайн, то я бы заказывал а не брал готовый с themeforest. Вы действительно привели основные моменты, что обязательно нужно править. Вы кстати не заметили, что все используют почти одинаковые фишки, многие под одну гребенку. Хотя у фореста большие требования к темам, у моего знакомого из 6 тем приняли только 2. Но многие прямо таки ничего нового.

    Ответить
    • Алексей Трудов
      15.01.2017

      Если нужен качественный дизайн, то я бы заказывал а не брал готовый с themeforest.

      Да, в каких-то случаях нужен уникальный.

      Вы кстати не заметили, что все используют почти одинаковые фишки, многие под одну гребенку

      Да, выбрать зачастую непросто.

      Ответить

Добавить комментарий

 

Публикуя комментарий, вы соглашаетесь с правилами http://alexeytrudov.com/terms/