18 ошибок. Начинающему веб-дизайнеру

Друзья рад приветствовать. Сегодня вновь хочу затронуть тему ошибок начинающего веб-дизайнера. В статье будут рассмотрены различные ошибки, причем это еще не весь список, так как в недавнем времени кто помнит и является постоянным читателем сайта, я уже писал не один раз на эту тему.

Итак, давайте напомню, первая статья в которой я рассказывал о том что необходимо знать начинающему веб-дизайнеру кроме фотошопа. Вторая статья об основах веб-дизайна, разработке макета, подготовке его к передаче заказчику и о некоторых ошибках.

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

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

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

Одна стилистика на всем макете. Это очень распространенная ошибка новичков веб-дизайна, стремясь сделать красивый дизайн, порой забывают о стилистике и в итоге смешивают всевозможные стили. В итоге получается, что в одном месте кнопка глянцевая в другом flat, тоже самое с иконками и другими блоками. А этого желательно не допускать, а соблюдать единый стиль, оформления блоков, кнопок, элементов, шрифтов.

Использование неправильного цветового профиля. Создавая макет сайта, начинающий веб-дизайнер часто забывает установить цветовой профиль на sRGB, оставляя его просто RGB в фотошопе это AdobeRGB. В итоге после того как макет создан и в дальнейшем происходит его верстка и сохранение некоторых элементов «сохранить для web и устройств» у нас искажаются цвета. Дело в том, что AdobeRGB обладает наиболее широким диапазоном цветов по сравнению с sRGB который в свою очередь наилучшим образом подходит для подготовки изображений под web, но обладает меньшим диапазоном цветов, чем AdobeRGB. sRGB позволяет одинаково отображать изображения на большинстве устройств.

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

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

Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.

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

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

Ошибки, связанные с использованием шрифтов. Со шрифтами все часто очень плачевно. Используется огромное количество шрифтов, используются всевозможные начертания, текст рыбы пишется на латинице притом, что сайт будет использовать кириллицу, а ведь начертание порой разное. Используются различные шрифты для контента, каких только не бывает, делают потому что шрифт красивый, а не потому как будет ли его удобно читать, верстать и использовать. Кегель используют или большой или малый, не знаю чем обоснованно, но можно банально посмотреть на сайтах размер и сделать как используют большинство. Межстрочный интервал вообще не используется.

Использование грязных цветов и градиентов. Цвета не разбавляются оттенками в основном это черный, серый, зеленый, темно зеленый и так далее. Когда стоит добавить к зеленому немного желтого и получим более приятный и естественный цвет. О том, как добиваться хороших цветов и градиентов подробно писал в статье о чистых градиентах.

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

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

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

Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.

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

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

Не изменяйте фигуры со скругленными углами через трансформацию. Трансформируя фигуры со скругленными углами, углы теряют свой радиус и приобретают форму овала, в итоге мы теряем форму элемента. А верстальщик отверстает их как овал, так как не будет знать, что там радиус и какой он этот радиус.

Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.

Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.