5 ошибок при верстке, которые портят дизайн

#HTML5, #ошибки, #разработка
5 ошибок при верстке, которые портят дизайн

Не каждый веб-разработчик при верстке отдает себе отчет, что он делает. Качественная оцифровка дизайн-макета - это не просто pixel-perfect перевод в HTML и CSS - это соблюдение базовых требований юзабилити. Точно так же, как дизайнер должен иметь представление о том, что такое верстка, чтобы не рисовать оторваннный от реальности тяжело программируемый сюр, так же и веб-разработчик, должен следить за соблюдением базовых правил юзабилити. Давайте с ними ознакомимся ниже.

1 Favicon - задайте ее

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

 Не забывайте про favicon

2 HOVER эффект у ссылки ВСЕГДА ДОЛЖЕН БЫТЬ ✅

2.1 Hover-эффект в меню должен быть равен active (selected)

Речь идет о меню в шапке, либо боковом. На дизайн-макете, почти всегда один из пунктов меню выделяется на фоне остальных. К примеру, если мы на главной, то пункт меню Главная будет выделен по особенному (цветом / фоном / подчеркиванием) - так называемый active стиль ссылки. Стиль по наведению на другие пункты меню (hover) надо делать точно таким же, как active.

стиль по наведению на пункт меню

2.2 Эффект hover для ссылок в тексте

Верным эффектом для ссылки в тексте является инвертирование подчеркивания. Если в макете отрисована цветная ссылка с подчеркиванием, при наведении надо с нее убрать подчеркивание. И наоборот: если в тексте ссылка стоит с underline: none, то при наведении курсора мыши - должна появляться линия под текстом. Третий цвет вводить не надо!

стиль для ссылки в тексте

2.3 Как поменять фон кнопки при ховере

Для этого руководствуются двумя основными правилами:

  • Кнопка должна оставаться контрастной
    • цвет текста к фону кнопки
    • фон кнопки к фону блока
  • Кнопка должна остаться в фирменных цветах

Если в фирменных цветах больше одного цветового оттенка (не считая черного и белого), и фон блока нейтрален, то конечно можно поменять фон на другой цвет из лого.

Если вариант выше не работает, то всегда можно выбрать в колорпикере оттенок более темный. Градации без колорпикера можно подобрать при помощи общедоступных таблиц, например цветовой палитры Material Design.

Пример ховер эффекта, когда кнопка осталась контрастной приведен на схеме ниже.

стили по наведению на кнопки

3 Фиксируйте шапку

Меню должно всегда оставаться сверху страницы.

фиксация меню при скроле

4 Если фон шапки белый - добавить под него тень

Если вы зафиксировали шапку, а на странице есть блоки на белом фоне, то нужно добавить тень. Шапка не должна сливаться с белым фоном. Достаточно такой тени:

box-shadow: 0 0 20px #cecece;

текст под белое меню

5 Ссылки, ведущие на другие сайты, должны открываться в новом окне

Это конечно больше касается нужд SEO-продвижения - но не писать же об этом отдельную статью :) 

Поделиться в соцсетях: