• Главная
  • Карта сайта
Не найдено

Як перетворити виріб возомнившего про себе дизайнера в зручний шаблон сайту

  1. Текст, який намагається злитися з місцевістю
  2. рахітична шрифти
  3. Дбайливо приховані посилання
  4. зайві елементи
  5. Проблеми з версткою і SEO
  6. Низька швидкість завантаження

До чого тут цей котик?

Ну ...

Іноді мені потрібно дизайн для нового сайту. Я вирушаю на wrapbootstrap.com або themeforest.net і починаю підбирати відповідний шаблон. Через якийсь час вимикаю монітор і бездумно дивлюся на своє відображення в ньому. Моє обличчя висловлює в точності те ж, що і морда цього кота.

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

Я зітхаю, включаю монітор і скачував мінімально прийнятну тему. Починається довга нудна робота по приведенню його в норму. Поділюся тут своїм чек-листом: що потрібно правити в першу чергу, щоб зробити нормальний дизайн.

Само собою, в кожному конкретному випадку - свої проблеми. З іншого боку, є чимало типових, широко поширених проблем.

Текст, який намагається злитися з місцевістю

Чомусь писком моди вважається робити сірий шрифт на сірому тлі. Ну ладно, нехай на білому тлі, але дуже-дуже блідий. Наприклад так (далеко не найгірший приклад, до речі):

Згоден, в навігаційних елементах або в якості підказок, на яких необов'язково акцентувати увагу, сірий може виглядати непогано. Але не в основному тексті, який будуть читати бідні користувачі. У тому числі ті, у кого низький контраст на моніторі. І ті, хто просто не хоче ламати очі.

До слова, я намагаюся читати довгі статті з рідера на електронному чорнилі. Уявляєте, як подібний текст виглядає на e-ink? Огидно, доповім я вам.

рахітична шрифти

Ще одна проблема, яка веде до погано помітного тексту - занадто тонкий шрифт. По ідеї це має виглядати вишукано, але часто виглядає як знущання над читачем. При виявленні найменшого дискомфорту - без сумнівів замінюємо на звичні arial, veranda і т.д.

Багато шрифти коректно працюють тільки з латиницею. При створенні сайту під Рунет на основі шаблону з Америки це може вилізти боком. Так що обов'язково потрібно протестувати читабельність не тільки на «lorem ipsum».

Дбайливо приховані посилання

Ще один писк моди - залишати посилання без підкреслення, лише трохи виділяючи їх кольором. Причому це робиться свідомо і не тільки зарубіжними дизайнерами. Особисто чув пару доповідей, про те, що тепер, мовляв, можна і не підкреслювати.

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

  • Користувачі тепер досвідчені, розглянуть де посилання, а де ні.
  • Подивимося на великий сайт X - ага, посилання без підкреслення! І на сайті Y теж. Все, значить годі й підкреслювати.

По-моєму, тут нічого не змінилося з 2011 року, коли Тема Лебедєв розставив крапки на Е .

Посилання завжди повинні бути підкреслені, навіть якщо це здається комусь негарним.

і

Перевірка дизайну на правильність проста: якщо глядач, не доторкаючись до миші, може вгадати, де посилання, а де ні, - перед нами хороший сайт. Це правило переважує всі інші.

зайві елементи

Опа, який гарний слайдер на півсторінки! А який прелоадер крутий - 10 секунд гіпнотизує користувача! І великі картинки на кожній сторінці - дуже барвисто!

Просто випилюємо все, що не відноситься до прямих завдань користувача на сторінці і йдемо далі.

Проблеми з версткою і SEO

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

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

Низька швидкість завантаження

Безліч плагінів до JQuery, коментарі довше, ніж код, жодного разу не оптимізовані іконки і фон ... Вирушаємо в Google Page Speed і ретельно виконуємо рекомендації.

Звичайно, вам можуть зустрітися і більш екзотичні проблеми, але все ж мій перелік закриває 90% проблем.

До дизайну і верстці на замовлення найчастіше все це може бути застосовано ще більшою мірою. Розробники шаблонів все-таки конкурують у відкриту, що спонукає до нормальної роботи і дотримання стандартів. Так що пильнувати потрібно завжди.

ps А монітор я після чергового шаблону поміняв на матовий, щоб не бачити своє відображення. Так, про всяк випадок.

Уявляєте, як подібний текст виглядає на e-ink?
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью