Как сделать хорошо, если еще ни разу ничего не делал? Никак! Поэтому надо делать и ошибаться. А эта статья поможет увидеть ошибки и исправить их.
Все мы когда-то начинали свой профессиональный путь, и на пути этом совершали ошибки. Опыт работы не купишь, не продашь, и вообще ниоткуда не возьмёшь. Однако в этой статье мы попробуем помочь вам ускорить процесс получения опыта и уменьшить количество ошибок на старте, чтобы быстрее прийти к качественным результатам! В нашей онлайн-школе мы обучаем уже 14 поток веб-дизайнеров с нуля и каждый день видим одни и те же ошибки в разном проявлении. Поэтому мы решили их обобщить и показать, как от них избавиться.
Но не бойтесь ошибаться! Ошибки — неизменная часть процесса преодоления себя и выхода на новый уровень знаний.
Ошибка № 1. Сетки
Все новички знают, что такое сетки, но почти никогда ими не пользуются, даже если сетка в макете включена. Обычно это происходит из-за незнания или неумения пользоваться данным инструментом.
Правильно подобранная сетка поможет выдержать ритм элементов, улучшить композицию и навести порядок в макете (выравнивание все-таки штука важная).
Сетки можно разделить на много разных видов по разным классификациям. Рассмотрим несколько наиболее употребимых и понятных:
- равномерные сетки
- динамичные сетки
Многие слышали про стандартную 12-колоночную сетку. Данная сетка обычно является равномерной, так как ширина колонок остаётся неизменной (все колонки такой сетки равны между собой). Такие сетки больше подходят новичкам, так как держат в некоторых жестких рамках и приучают к порядку. Помимо этого, при работе с такими сетками дизайн обычно отталкивается от сетки, а не сетка от дизайна. Поэтому данный вариант поможет дизайнеру структурировать макет и поработать с другими аспектами дизайна, а не делать упор на композиции.
Динамичные сетки в свою очередь подстраиваются под дизайн. В этом случае сетка идет от дизайна, от композиции, от идеи. Это сложнее, особенно на первых порах.
Ошибка № 2. Выравнивание и выключка
Одна из любимых ошибок новичков — разные выключки у разных элементов. Напримевыключка текста по центру, выровнен он по левому краю блока, а кнопка — по правому краю, и так далее. Старайтесь на начальных этапах уж точно придерживаться какой-то одной стороны: выключку по левому краю и выравнивание тоже. Такое строгое выравнивание — ваш спасательный круг.
Выключка — это способ выравнивания текста внутри текстового блока.
Выравнивание — выравнивание уже готового текстового блока или других элементов относительно макета.
Новички часто любят использовать выключку по ширине. Данный приём пришёл из печатной продукции, а именно из книг, где выравнивание по ширине используется для удобства чтения. Основной проблемой данной выключки является то, что при использовании ее в вебе без переносов слов по слогам (как в печати) мы получаем дыры в тексте, что сказывается не в лучшую сторону на удобстве чтения.
Если говорить про выключку по центру, то ее крайне нежелательно применять в двух случаях:
- если в текстовом блоке много строк (более трех)
- если текстовый блок широкий
И то, и другое негативно сказывается на удобстве чтения.
Ошибка № 3. Визуальный шум
Палочки, точечки, штрихи, кружочки, галочки — любимые украшательства многих начинающих дизайнеров. Если вы добавляете эти шумы, то вы пока неуверенно работаете с пространством макета и контентом. Это, конечно, поправимо, но пока — не надо захламлять дизайн лишними элементами.
Важно понимать, что есть шумы, а есть детали. Работая с деталями, вы улучшаете дизайн. Используя шумы, вы его ухудшаете. Шумы захламляют пространство, не несут смысла, не поддерживают идею и стилистику бренда.
Детали – это показатель вашей экспертности.
Ошибка № 4. Негативное пространство
Все элементы дизайна лежат почти друг на друге, чтобы побольше влезло? Избавьтесь от этого. Добавляйте в макет отступы ото всех элементов, дайте объектам «дышать». Не стоит заполнять все пространство макета. Зачастую именно негативное пространство и отсутствие лишних объектов помогает обратить внимание на самое важное.
В теории дизайна это называется «эффектом изоляции»: вы выделяете наиболее важный объект пустотой вокруг него. Так как больше ничего вокруг нет, то естественно, что вы обратите внимание именно на изолированный объект.
Ошибка № 5. Контраст
Используете белый текст на светло-розовом фоне? Пишете заголовок поверх пестрой фотографии? Не надо так. Все элементы в вашем дизайн-макете несут какой-то смысл. А в чем их смысл, если их даже не видно?
Помимо эстетической составляющей дизайна, существует еще и функциональная: насколько ваш конечный дизайн будет понятен и доступен пользователю. Сможет ли ваш дедушка прочитать написанный вами на экране текст? Ваш дизайн должен учитывать все группы пользователей, которые будут с ним взаимодействовать.
Есть стандарты доступности (Web Content Accessibility Guidelines (WCAG) 2.0), которые применимы к цветовым решениям и читаемости текстов. Обозначено три уровня доступности: А (самый низкий), АА (средний) и ААА (самый высокий).
Эти уровни рассчитываются математически и по-разному вычисляются для различных размеров текста (заголовки или основной текст), а также для графических элементов (иконки, например). В своих проектах старайтесь проверять данные характеристики, чтобы пользователям вашего будущего сайта было комфортно. В Figma для этого есть специальный плагин Contrast. Он помогает определить контрастность двух цветов для следующих элементов:
- для основного текста (до 24 px)
- для заголовков (от 24 px или жирного текста)
- для графических элементов (иконки или обводки)
Данный плагин оценивает соответствие уровня контрастности для АА и ААА.
Ошибка № 6. Плохая графика
Фото классно подходит по тематике, ну и что, что разрешение вполовину меньше нужного! Пусть фото все будут в разном стиле и разного оформления, зато как хорошо в дизайн вписываются!
Узнали себя? Не надо так. Графика — такой же важный элемент дизайна, как и все остальное. Графика должна поддерживать стилистику и придавать настроение, а также повторять и усиливать композицию, а не портить ваш дизайн.
Подборка стоков и плагинов
Где брать фото для своих проектов? Ниже — подборка стоков и плагинов, где вы можете брать изображения. Не забывайте об авторском праве и правилах использования фото с подобных ресурсов. На хороших сервисах всегда есть информация о том, как, где и в каком виде вы можете использовать данные изображения.
Фотостоки:
Плагины для Figma:
Ошибка № 7. Слои и порядок
Беспорядок на страницах и в слоях сразу выдаёт неопытного дизайнера. Правильно сгруппированные и названные страницы и слои позволят и вам, и другим работающим с вашим дизайном специалистам быстрее ориентироваться в макетах и держать все под контролем. Используйте, например, смайлики, чтобы показать степень готовности макета 🔴 (не готово), 🟡 (в процессе), 🟢 (готово).
Подборка плагинов для порядка в макете
Pixel Perfect — по-разному интерпретируемое понятие в вебе, которое в данной статье используется в следующем смысле: все размеры объектов и значения их смещения по осям X и Y должны быть целыми числами. Так как наименьшая единица измерения в вебе все-таки 1 пиксель.
Убирает все несовершенства и неаккуратные значения в дизайне (14 вместо 13,86, например), а также сдвигает и меняет размеры объектов, чтобы получались целые значения, то есть осуществляет Pixel Perfect.
Может удалять все скрытые ненужные (запасные) слои, разгруппировывать однослойные группы, переименовывать слои, сортировать страницы и осуществлять Pixel Perfect.
Расставляет выбранные хаотичные элементы по заданной вами сетке.
Ошибка № 8. Работа с референсами
Понравилось несколько макетов на Dribbble или Behance, и вы решили набрать из каждого макета различные элементы и приемы и встроить их в свой дизайн? В итоге вы получите кашу из разностильных объектов. Не надо так. Референсами можно и нужно пользоваться, но надо понимать, КАК это делать.
Во-первых, референс ни в коем случае нельзя полностью копировать и выставлять за свое! Во-вторых, вы должны вдохновляться осознанно, а не просто «понравилось — взял».
Разные способы работы с референсами для получения нужного результата, мы рассматриваем на курсе «Профессия digital-дизайнер», один из таких способов описан ниже.
Метод инвертирования дизайна
Основная идея данного способа заключается в том, что необходимо:
- выбрать любой понравившийся дизайн
- повторить его, чтобы иметь все элементы данного дизайна в готовом состоянии
- «инвертировать» дизайн — расположить ВСЕ элементы дизайна в местах, отличных от их расположения в исходном дизайне
На данном этапе уже получился дизайн, выполненный на основе готового, но уже ваш, уникальный. Теперь можно приступить к вариациям: изменить положения объектов, их размер, цвет, типографику и так далее, и получить еще несколько вариантов дизайна.
Таким образом, можно быстро сгенерировать несколько различных вариантов дизайна, выбрать из них наиболее подходящий и «докрутить» уже именно его под свою тему и нужды.
Подробнее о том, как работает метод инвертированного дизайна, в этом видео
Подборка ресурсов для вдохновения
Сайты:
Агрегаторы:
Ошибка № 9. Группировка
Все ваши объекты вроде рядом, но как-то далеко? Картинка ближе к кнопке, чем к ее описанию? Чтобы такого не происходило, учитывайте в своем дизайне правило внутреннего и внешнего отступа. Это правило помогает создавать сильные группировки, которые позволят выстроить иерархию и провести пользователя по определённому пути в интерфейсе.
Почему важны группировки? Ведь пользователь и так может понять, что к чему относится по смыслу. Это так, и это есть логические группировки, когда пользователю приходится думать, чтобы понять, что к чему относится. Чтобы упростить и ускорить этот процесс, нужно «помогать» пользователю визуальными группировками, которые автоматически показывают соответствия и отношения между объектами. Визуальные группировки считываются намного быстрее
Ошибка № 10. Размеры элементов
Еще одна любимая ошибка новичков. Либо очень крупные размеры текстов, либо очень маленькие. Либо огромные кнопки, либо совсем незаметные. То же можно сказать и про размеры заголовков, форм, макета и всего остального. Лучшее решение — смотрите примеры на реальных сайтах. Открывайте код и смотрите все размеры. Так вам станет гораздо проще понять, какой размер должен быть у разных элементов, а со временем вы начнёте видеть закономерности и применять их в своём дизайне.
Ошибка № 11. Тени
Все начинающие дизайнеры очень любят тени в тексте. Только вот используют их не совсем правильно и не всегда к месту. Тени ухудшают читабельность и контраст! Вообще постарайтесь забыть про тени у текста, если это выглядит не так, как на примере ниже:
Физика теней
Есть всего два варианта использования эффекта Drop Shadow (тень) в дизайне. Оба этих варианта имеют корни в физике:
- тень
- свечение
Тень всегда отбрасывается объектом в какую-либо сторону, когда на него падает свет. Не бывает такой ситуации, что объект равномерно отбрасывает равномерно одинаковую тень сразу на все 360 градусов, а именно такие тени часто делают новички. Тень в реальности всегда смещена по осям X/Y.
Свечение же в свою очередь излучается объектом, который может этот сам свет генерировать.
Тень или свечение?
Какой эффект лучше использовать в вашем дизайне? Все зависит от стилистики макета, а также от фона и цвета объекта, с которым вы работаете, и, конечно, от того эффекта, который вы хотите получить. Однако есть небольшая хитрость: когда вы хотите показать многослойность — используйте тень, когда у вас яркие и насыщенные объекты (например, кнопки) — используйте свечение.
Как сделать тень? 3 правила
Правило 1: Тень всегда смещена по осям X/Y
Правило 2: Прозрачность и размытие. Не используем очень темный цвет тени в дизайне, потому что будет грязно и мрачно. Помимо этого размываем тень так, чтобы ее переход в фон был максимально мягким!
Правило 3: Цвет тени. Не используйте чёрные тени, особенно у насыщенных ярких объектов. Старайтесь делать тень в оттенке того цвета, на который эта самая тень ложится. Также лучше добавить оттенок объекта, отбрасывающего тень.
Как сделать свечение?
Помимо теней у объектов может быть свечение. Очень часто такими объектами в дизайне выступают яркие и насыщенные элементы, например, кнопки. В реальности свечение обычно равномерно распространяется вокруг объекта, поэтому похожий эффект из реального мира будет максимально естественно смотреться и в дизайне.
Также можно немного сместить свечение по Y:
Ошибка № 12. Не те шрифты
Новички часто используют в работах немодные, неактуальные шрифты, которые сильно «старят» дизайн. Если вы думаете, что декоративные или рукописные шрифты сделают ваш дизайн интереснее — нет, не сделают. Смотрите трендовые актуальные работы и анализируйте шрифты, которые в них используются.
Помимо актуальности не стоит забывать про соответствие шрифтов стилистике дизайна и целевой аудитории. Если вы делаете сайт про тракторы, не стоит использовать шрифт с цветочками.
Ошибка № 13. Настройки текста
Любимые настройки текста у новичков — увеличенный трекинг и уменьшенный интерлиньяж.
Это НЕ красиво.
Это НЕ аккуратно.
Это НЕ читаемо.
Трекинг — это расстояния между символами в тексте
Интерлиньяж — расстояние между строками
Не стоит увеличивать трекинг в нормальных наборных шрифтах, взятых, например, с Gooogle Fonts. Авторы шрифтов уже все за вас продумали, и маловероятно, что вы лучше них знаете, какие настройки надо использовать
Увеличить трекинг можно в случае, если вы используете Caps Lock для каких-либо заголовков, потому что данный вариант не является стандартным использованием шрифта.
А вот величина интерлиньяжа всегда зависит от кегля и желаемого эффекта. Для основного текста интерлиньяж может варьироваться от 120% до 170%.
И, пожалуйста, забудьте про бесконечный Italic в свои текстах.😉
Ошибка № 14. Рыбный текст
Многие новички влюблены в “Lorem ipsum…”. Удобно, просто, быстро, красиво? Не очень. Всеми опытными дизайнерами такие тексты-рыбы (заполнители) воспринимаются очень скептически, а их использование сразу выдает в вас новичка.
Используя один и тот же текст для разных сайтов и интерфейсов, вы рискуете допустить серьезную ошибку.
Например, в используемом вами заполнителе средняя длина слова составит 6 символов, а в настоящем тексте, который будет потом размещен в этом блоке — 10 символов. Выглядеть он будет совершенно по-другому, и ваш аккуратный дизайн рискует превратиться в тыкву.
Старайтесь использовать в дизайне реальный контент или тематические тексты, так как в разных сферах средняя длина слова и предложения может очень сильно варьироваться.
Ошибка № 15. Одинаковые однотипные элементы, несоответствие контента теме
Данная ошибка схожа с предыдущей, разница лишь в типе контента. Помимо текста-рыбы новички используют одинаковые фото (например, для карточек товаров или для отзывов). Результат — однотипные и неживые интерфейсы. То же самое относится к одинаковым иконкам и даже целым блокам.
Конечно, все изображения должны обязательно соответствовать тематике вашего интерфейса, «рыбные» фотографии категорически не допускаются!
Друзья рад приветствовать. Сегодня вновь хочу затронуть тему ошибок начинающего веб-дизайнера. В статье будут рассмотрены различные ошибки, причем это еще не весь список, так как в недавнем времени кто помнит и является постоянным читателем сайта, я уже писал не один раз на эту тему.
Итак, давайте напомню, первая статья в которой я рассказывал о том что необходимо знать начинающему веб-дизайнеру кроме фотошопа. Вторая статья об основах веб-дизайна, разработке макета, подготовке его к передаче заказчику и о некоторых ошибках.
Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.
Хочется быть полезным и по возможности подсказать, но зачастую банально не хватает на все времени. Да и ошибки в основном одни и те же, как не странно. Поэтому я и решил написать эту статью, чтобы рассказать о ряде ошибок.
Нет логической структуры в дизайне сайта. Очень часто непонятно что, куда, зачем и почему, в макете располагается. Структура не продумывается, все создается по принципу пусть будет, или а давай и это засунем. Пользователь не может с первого раза понять, что будет, если он произведет определенное действие. Должна быть логика в макете и пользователь с первого раза должен понимать, что значит тот или иной блок и что произойдет, если он будет с ним взаимодействовать.
Одна стилистика на всем макете. Это очень распространенная ошибка новичков веб-дизайна, стремясь сделать красивый дизайн, порой забывают о стилистике и в итоге смешивают всевозможные стили. В итоге получается, что в одном месте кнопка глянцевая в другом flat, тоже самое с иконками и другими блоками. А этого желательно не допускать, а соблюдать единый стиль, оформления блоков, кнопок, элементов, шрифтов.
Использование неправильного цветового профиля. Создавая макет сайта, начинающий веб-дизайнер часто забывает установить цветовой профиль на sRGB, оставляя его просто RGB в фотошопе это AdobeRGB. В итоге после того как макет создан и в дальнейшем происходит его верстка и сохранение некоторых элементов «сохранить для web и устройств» у нас искажаются цвета. Дело в том, что AdobeRGB обладает наиболее широким диапазоном цветов по сравнению с sRGB который в свою очередь наилучшим образом подходит для подготовки изображений под web, но обладает меньшим диапазоном цветов, чем AdobeRGB. sRGB позволяет одинаково отображать изображения на большинстве устройств.
Ядовитые и очень яркие цвета фона. Большинство новичков, почему-то разрабатывая дизайн сайта, используют яркие, ядовитые оттенки и цвета. Этого делать категорически нельзя, так как сайт с такими цветами и фоном не будет популярен. Посетитель сайта будет ощущать дискомфорт, и будет покидать его уже на первых секундах. Лучше использовать нейтральные, пастельные тона.
Не проверяется орфография. Возьмите себе за правило проверять все тексты в макете на наличие орфографических ошибок, дабы не попасть в неудобное положение перед заказчиком.
Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.
Не использование направляющих. Многие не используют направляющие, а ведь в связке с модульной сеткой это очень помогает и ускоряет процесс работы. Можно установить прилипание элементов к направляющим и тогда элементы будут четко позиционироваться.
Не откликающиеся элементы дизайна. Еще одна ошибка, новички практически никогда не отрисовывают элементы дизайна в разных состояниях. Статичное состояние, наведение, нажатие и другое. Часто не показывают, как поведет себя элемент при действие пользователя, а ведь верстальщик не умеет читать мысли, он сделает только то, что отрисованно и все. И дизайн будет не живой.
Ошибки, связанные с использованием шрифтов. Со шрифтами все часто очень плачевно. Используется огромное количество шрифтов, используются всевозможные начертания, текст рыбы пишется на латинице притом, что сайт будет использовать кириллицу, а ведь начертание порой разное. Используются различные шрифты для контента, каких только не бывает, делают потому что шрифт красивый, а не потому как будет ли его удобно читать, верстать и использовать. Кегель используют или большой или малый, не знаю чем обоснованно, но можно банально посмотреть на сайтах размер и сделать как используют большинство. Межстрочный интервал вообще не используется.
Использование грязных цветов и градиентов. Цвета не разбавляются оттенками в основном это черный, серый, зеленый, темно зеленый и так далее. Когда стоит добавить к зеленому немного желтого и получим более приятный и естественный цвет. О том, как добиваться хороших цветов и градиентов подробно писал в статье о чистых градиентах.
Не разрабатываются прототипы. Начинающему веб-дизайнеру необходимо понять, что прототип помогает быстро расположить все блоки дизайна, тем самым экономя нам время. Прототипируя мы с легкостью можем быстро что-то поменять изменить, а отрисованный блок в свою очередь гораздо сложней поддается изменениям. Создав прототип, мы можем его показать заказчику, утвердить положение блоков и элементов, и уже спокойно работать над дизайном по этой структуре, а если у нас нет прототипа мы можем попасть на огромное количество правок и порой не совсем простых и потеряем много времени.
Несоразмерность элементов и блоков в макете. Если не использовать модульную сетку, то многие блоки смотрятся несоразмерными. И выглядят нелепо из-за того, что их размеры не вписываются в макет. Вот вам и еще один + по поводу использования модульной сетки.
Уделяйте внимание деталям. Внимание к деталям делает макет более привлекательным. Зачастую бывает, плывут пиксели, вылезают лесенки на границах переходов, обтравка у фотографий плохая (остался контур), тени грязные, неправильные тени и тому подобное.
Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.
Учитесь у лучших. Это наверное золотое правило, во-первых многое придумано уже давно и если хотите разрабатывать достойные дизайны, ориентируйтесь на лучших дизайнеров, смотрите, вникайте в тонкости дизайна как и что сделано. Не сдирайте идею, а именно изучайте, смотрите и учитесь.
Не зажимайте элементы. Также один из моментов, не нужно зажимать элементы близко друг к другу, давайте им воздуха, так будет и читабельность лучше, и элементы будут смотреться намного приятнее. Также не стоит сильно распыляться и давать чересчур воздуха, ищите золотую середину.
Не изменяйте фигуры со скругленными углами через трансформацию. Трансформируя фигуры со скругленными углами, углы теряют свой радиус и приобретают форму овала, в итоге мы теряем форму элемента. А верстальщик отверстает их как овал, так как не будет знать, что там радиус и какой он этот радиус.
Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.
Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.
Разработка дизайна и интерфейса сайта — это не просто «тыкнуть кнопку здесь, вставить картинку там и использовать десять модных шрифтов». Это кропотливая работа, в процессе которой можно допустить множество ошибок. О том, какие самые часты ошибки допускают новички, мы решили спросить у экспертов.
Итак, какие типичные ошибки наиболее часто совершают при разработке дизайне сайта?
- не разбираются в задаче, желаниях заказчика;
- разрабатывают интерфейс для абстрактного пользователя, а не для решения его задач;
- используют фотографии и иконки с первой страницы поисковой выдачи;
- изобретают велосипеды, в то время как существуют устоявшиеся подходы к решению задачи;
- используют шаблоны, которые уже отработали своё;
- чрезмерно креативничают, превращая дизайн в солянку из всего и сразу;
- рисуют интерфейс «из головы», без проектирования;
- пренебрегают правилами оформления текста;
- делают незаметные кнопки, нарушают их иерархию;
- добавляют иллюстрации ради иллюстраций;
- неверно подбирают иконки;
- работают без фидбэка;
- бездумно бросаются в тренды;
- оставляют пустые страницы или безликие страницы ошибок;
- не используют пространство вокруг элементов, оставляют много «воздуха».
Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики. Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.
Новичкам везет, но не в веб-дизайне, ведь это кропотливая работа требующая профессионализма и внимания к деталям. Чаще всего начинающим веб-дизайнерам сложно делать свои первые проекты, поскольку еще нет опыта, скилов и понимания всех процессов, из-за чего они совершают достаточно много ошибок в работе.
Причем, сами дизайнеры редко видят свои ошибки в проекте и часто бывает, что им нужен взгляд со стороны. Так что, в этой статье я помогу предотвратить большинство частых ошибок в дизайне, которые улучшат твою работу. Погнали!
Кстати, я сделал сайт для нашей подборки Ui Jedi и теперь те сайты, которые получили награду в Телеграм-группе попадают на сайт подборки. Обязательно участвуйте!
- Сразу делать дизайн
- Плохая верстка текста
- Ошибки в тексте
- Неуместная или некачественная графика
- Много дизайна
- Мало дизайна
- Не презентовать свои идеи
- Невнимательность
- Не оптимизировать работу
- Не делать мобильную версиюНе интересоваться трендами
1. Сразу делать дизайн
Если при создании дизайна ты сразу идешь рисовать макет, то ты делаешь большую ошибку. Ведь перед отрисовкой макета есть множество шагов, которые необходимо сделать, чтобы добиться нужного результата. Пропуская предварительную подготовку к проекту ты рискуешь зря потратить время и не выполнить работу как надо.
Перед началом работы сперва ознакомься с тех заданием, получи ответы на все интересующие вопросы. Сделай текстовый или схематический прототип макета. Найди достаточное количество референсов и примеров, которые можно использовать как идеи для дизайна. Только после этого можно пробовать рисовать и реализовывать идеи. Если не делал так, то просто попробуй, результат будет совсем другой.
Это не только поможет тебе сделать более крутой дизайн-концепт, но и позволит избежать ряд правок, которые ты мог получить от заказчика. Ведь, погружаясь в проект, ты больше понимаешь ожидания клиента и другие подводные камни.
Если хочешь тренировать свою насмотренность и вкус, но не знаешь как это делать, предлагаю прочитать мою статью про насмотренность, которая уже помогла многим дизайнерам:
Как развивать насмотренность дизайнеру, чтобы создавать гениальные идеи
В этой статье мы поговорим о том, что такое насмотренность и визуальный вкус, как тренировать и прокачивать их, чтобы создавать гениальные идеи самостоятельно, а в конце расскажу о главном инсайте.
2. Плохая верстка текста
Часто бывает, что макеты на Behance и Dribbble отличаются от реальных проектов и многие дизайнеры грустят из-за этого. Поскольку в реальном проекте у вас будет намного больше проекта, нежели в дизайне для вдохновения у популярного дизайнера. Действительно, чем меньше текста, тем чище дизайн будет выглядеть, но дело не только в тексте.
Чтобы куча текста в макете выглядело хорошо необходимо уметь правильно верстать текстовые блоки. Ведь есть множество правил расположения типографики, которые я попросту не вмещу в этом тезисе. Помимо теоретической части с заголовками, акцентами, интерлиньяжем, кернингом и блоками необходимо достаточно много практики, чтобы сделать качественный дизайн.
Рекомендую смотреть референсы с версткой текста и практиковаться на собственных или выдуманных проектах, чтобы у тебя было понимание как работать с текстом в разных ситуациях и стилях.
3. Ошибки в тексте
Ошибки в тексте это боль многих заказчиков, а их лучше не злить, уж поверьте мне на слово! Для тебя это просто ошибка в слове, а для заказчика это потерянные деньги и время на программистах, которые отвечают за верстку сайта. И если не доглядеть банальные ошибки в тексте на сайте, то это может вызвать недоверие у посетителя, а как следствие — потерянный заказ.
Представьте, если бы ты зашел на официальный сайт Apple, где будет написано не «Buy IPhone», а «Buy IFon», согласись, выглядит очень странно, ты бы точно засомневались заказывать сейчас айфон, может их сайт взломали или ведутся тех работы и твой заказ не выполнят.
Окей, как тогда поступать, чтобы избежать подобных проблем? Все очень просто и примитивно — перепроверяй макет перед отправкой. Открывай предпросмотр в Фигме и читай текст на сайте, как будто ты скрупулезный пользователь, который хочет докопаться до всего. Лучше 7 раз проверь, 1 раз отправь! У тебя это займет 5-10 минут, а у команды будут целые нервы.
4. Неуместная или некачественная графика
Графика на сайте крайне важный аспект, заслуживающий особого внимания дизайнера. Лучше не относиться пренебрежительно к поиску и выбору графики для дизайн макета. В противном случае сайт будет выглядеть плохо и непрофессионально, что может не понравится заказчику.
Еще часто бывает, что дизайнеры используют одни и те же фотографии, например, с Unsplash, до дыр в своих работах, те же лица, те же фигуры, те же виды. Сразу становится понятно, что дизайнер не заморачивается и вставляет то, что ему первое попалось в поиске, но так делать лучше не стоит.
Если ты еще новичок и не готов покупать платные иллюстрации и подписки на стоки, то в интернете есть множество бесплатной качественной графики, как пример: Figma Community и Freepik. Здесь ты точно найдешь то, что тебе нужно в векторном формате, еще и бесплатно. Либо можешь подписаться на мой Телеграм-канал, где я регулярно выкладываю полезный контент для дизайнеров, в том числе и иллюстрации:
5. Много дизайна
Помните как выглядел дизайн 2000-х? Там все мигало, сверкало, использовалось миллион ненужных элементов, стилей, текстов и картинок — это можно обозначить гипер дизайном. Такой дизайн делался лишь с одной целью — заполучить внимание клиента и первое время это работало. Сейчас же гипер дизайн не используется повсеместно, только в тематической ретро-стилистике.
Перед началом работы отталкивайтесь от основных принципов дизайна. Он должен быть сбалансированным и интуитивно понятным, чтобы пользователю было комфортно считывать контент на сайте. Если на сайте используется много лишних элементов, которые отвлекают и не вписываются в концепцию — это проигрышный дизайн в традиционном веб-дизайне.
Вы скажите: “Но как же эти крутые сайты из подборок, как же крутые проекты на Behance, которые пестрят разнообразием элементов?”. В реальности, как я уже говорил ранее, все немного отличается. Не гонитесь за одним стилем, так как будет сложно. На начальном этапе нужно понять фундаментальные принципы дизайна, чтобы после делать нестандартные решения. Таким образом будет проще и вам и пользователям.
6. Мало дизайна
Теперь поговорим про антагониста гипер дизайна — это гипер минимализм. Да, да, минимализм сейчас очень популярен и он действительно работает, если сделать все правильно. В этой стилистике работать достаточно трудно, ведь нужно перепробовать миллион вариаций и комбинаций, чтобы найти лучшую. Но этот тезис не совсем про минимализм, а скорее про сырой дизайн, который требует доработки.
Недоработанный дизайн и минимализм это совсем разные вещи. Поэтому, не стоит надеяться, что ты поставишь одну букву на сайте и пользователь поймет твою гениальную задумку. Скорее всего, никто такую идею не поймет, ведь это будет выглядеть странно.
Так что, если словишь баланс элементов, то твой дизайн будет как персик! Главное знать меру и чувствовать стилистику, в которой работаешь, чтобы получить лучший результат.
7. Не презентовать свои идеи
Эта проблема есть практически у всех джунов дизайнеров и тут нет ничего зазорного, ведь через это проходят все. Если коротко, то отправлять свои работу без презентации идей и посылов не очень хорошая идея! Клиенты — не дизайнеры, им трудней визуализировать и представлять, то что ты тут имел ввиду. Поэтому, не стоит рассчитывать на то, что вы скинете дизайн-концепцию одной картинкой не описав все как нужно и это сработает.
К презентации своей работы и идей нужно относится ответственно. От этого зависит, как минимум, то примут у тебя работу или нет. Уже не говоря о отношение к тебе как к дизайнеру и твоим профессиональным навыкам. Я видел множество достойных идей, которые просто не были поняты.
Опять же, в пример могу поставить презентации топовых компаний, как Apple, которая в динамическом видео и графике рассказывает о новых фишках их гаджетов, которые вышли. Согласитесь, таким способом удобно узнавать о преимуществах продукта, нежели узнавать все детали самостоятельно.
8. Невнимательность
Внимание — это то за что вам платят. Чем больше вашего внимания, тем лучше будет для клиента. Поскольку, с помощью внимания и концентрации можно создавать действительно хорошие продукты. При отсутствии внимания начинаются проблемы у всей команды!
Поэтому, на начале своей карьеры тебе нужно научится быть внимательным к самым мелким деталям, а в веб-дизайне их достаточно много. Если упустить элемент, вставить не тот текст или картинку — это может повлечь за собой множество дополнительных правок, которые не нужны ни тебе, ни заказчику.
Хочу поделится с вами своим способом удерживать внимание и концентрацию на определенной задаче. Нужно понимать, что наш мозг, в среднем, может быть в концентрации не больше четырех часов без перерывов. А если у вас нет опыта — и то меньше. Сперва, нужно выключить все нотификации, убрать все отвлекающие факторы, смартфон и посторонние звуки. После чего погрузиться в проект насколько это возможно не отвлекаясь на другие задачи. Как почувствуете, что уже не можете быть с головой в этой задаче — необходимо отдохнуть. Практикуйте такой способ каждый рабочий день, чтобы получить первые результаты, желаю удачи!
9. Не оптимизировать работу
Работа дизайнера состоит из многих этапов и процессов, за которыми, порой, не уследить. К счастью, наша работа может быть оптимизирована и настроена под наш лад. Это как купить робот-пылесос, вместо того, чтобы каждый раз пылесосить пол самому. Оптимизация экономит наше время и силы, которых часто не хватает в фрилансерской рутине.
Есть множество вещей, которые упрощают работу, к примеру, использовать auto-layout и components в Фигме. Это позволит менять элемент в одном месте и не менять его во всех экранах. Или можно сохранить все полезные сервисы в одном месте, чтобы не пришлось их искать каждый раз заново. Найдите все необходимые плагины, которые могут упростить работу. Сортируйте все страницы, файлы, называйте объекты своими именами, а не «Frame2342».
Выполнив вышеперечисленные пункты ваша работа уже сейчас станет оптимизированней! Так что не ленитесь, наводите порядки, ведь так работать намного легче и приятнее.
10. Не делать мобильную версию
Если вы НЕ делаете мобильную версию в своих проектах, то у меня для вас плохие новости! Зачастую, такие сайты получаются просто ужасными в мобильном виде и требуют адаптации. Как вы знаете, больше половины пользователей посещают сайты с мобильных устройств. А это значит, что не сделать мобильную версию сайта является фатальной ошибкой для дизайнера.
Рекомендую всегда адаптировать сайт для мобильной версии и планшета, чтобы он выглядел корректно и никакие элементы не поплыли. Исключением может стать только тот случай, когда вы рисуете дизайн и верстаете его в конструкторе, но даже так лучше перестраховаться и отрисовать все необходимые версии сайта.
11. Не интересоваться трендами
Делать не актуальный дизайн не самая лучшая идея, которая могла прийти в голову новичка! Ведь у всего есть свой срок годности, не все стили прижились, не вся графика актуальна сейчас. Есть вероятность сделать сайт, который не будет нравится пользователям из-за своей неактуальности. Тенденции действительно постоянно меняются, однако их можно проследить и сделать свои выводы.
У меня на Ютуб-канале есть целый плейлист посвященный трендам в графическом и веб-дизайне последних годов. Рекомендую ознакомится с этими видео, чтобы понять куда идет современный дизайн, будет очень полезно.
____________________________________________________________________________
Если вам понравилась статья то поддержите ее лайком, а я продолжу делиться полезным о дизайне
Друзья рад приветствовать. Сегодня вновь хочу затронуть тему ошибок начинающего веб-дизайнера. В статье будут рассмотрены различные ошибки, причем это еще не весь список, так как в недавнем времени кто помнит и является постоянным читателем сайта, я уже писал не один раз на эту тему.
Итак, давайте напомню, первая статья в которой я рассказывал о том что необходимо знать начинающему веб-дизайнеру кроме фотошопа. Вторая статья об основах веб-дизайна, разработке макета, подготовке его к передаче заказчику и о некоторых ошибках.
Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.
Хочется быть полезным и по возможности подсказать, но зачастую банально не хватает на все времени. Да и ошибки в основном одни и те же, как не странно. Поэтому я и решил написать эту статью, чтобы рассказать о ряде ошибок.
Нет логической структуры в дизайне сайта. Очень часто непонятно что, куда, зачем и почему, в макете располагается. Структура не продумывается, все создается по принципу пусть будет, или а давай и это засунем. Пользователь не может с первого раза понять, что будет, если он произведет определенное действие. Должна быть логика в макете и пользователь с первого раза должен понимать, что значит тот или иной блок и что произойдет, если он будет с ним взаимодействовать.
Одна стилистика на всем макете. Это очень распространенная ошибка новичков веб-дизайна, стремясь сделать красивый дизайн, порой забывают о стилистике и в итоге смешивают всевозможные стили. В итоге получается, что в одном месте кнопка глянцевая в другом flat, тоже самое с иконками и другими блоками. А этого желательно не допускать, а соблюдать единый стиль, оформления блоков, кнопок, элементов, шрифтов.
Использование неправильного цветового профиля. Создавая макет сайта, начинающий веб-дизайнер часто забывает установить цветовой профиль на sRGB, оставляя его просто RGB в фотошопе это AdobeRGB. В итоге после того как макет создан и в дальнейшем происходит его верстка и сохранение некоторых элементов «сохранить для web и устройств» у нас искажаются цвета. Дело в том, что AdobeRGB обладает наиболее широким диапазоном цветов по сравнению с sRGB который в свою очередь наилучшим образом подходит для подготовки изображений под web, но обладает меньшим диапазоном цветов, чем AdobeRGB. sRGB позволяет одинаково отображать изображения на большинстве устройств.
Ядовитые и очень яркие цвета фона. Большинство новичков, почему-то разрабатывая дизайн сайта, используют яркие, ядовитые оттенки и цвета. Этого делать категорически нельзя, так как сайт с такими цветами и фоном не будет популярен. Посетитель сайта будет ощущать дискомфорт, и будет покидать его уже на первых секундах. Лучше использовать нейтральные, пастельные тона.
Не проверяется орфография. Возьмите себе за правило проверять все тексты в макете на наличие орфографических ошибок, дабы не попасть в неудобное положение перед заказчиком.
Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.
Не использование направляющих. Многие не используют направляющие, а ведь в связке с модульной сеткой это очень помогает и ускоряет процесс работы. Можно установить прилипание элементов к направляющим и тогда элементы будут четко позиционироваться.
Не откликающиеся элементы дизайна. Еще одна ошибка, новички практически никогда не отрисовывают элементы дизайна в разных состояниях. Статичное состояние, наведение, нажатие и другое. Часто не показывают, как поведет себя элемент при действие пользователя, а ведь верстальщик не умеет читать мысли, он сделает только то, что отрисованно и все. И дизайн будет не живой.
Ошибки, связанные с использованием шрифтов. Со шрифтами все часто очень плачевно. Используется огромное количество шрифтов, используются всевозможные начертания, текст рыбы пишется на латинице притом, что сайт будет использовать кириллицу, а ведь начертание порой разное. Используются различные шрифты для контента, каких только не бывает, делают потому что шрифт красивый, а не потому как будет ли его удобно читать, верстать и использовать. Кегель используют или большой или малый, не знаю чем обоснованно, но можно банально посмотреть на сайтах размер и сделать как используют большинство. Межстрочный интервал вообще не используется.
Использование грязных цветов и градиентов. Цвета не разбавляются оттенками в основном это черный, серый, зеленый, темно зеленый и так далее. Когда стоит добавить к зеленому немного желтого и получим более приятный и естественный цвет. О том, как добиваться хороших цветов и градиентов подробно писал в статье о чистых градиентах.
Не разрабатываются прототипы. Начинающему веб-дизайнеру необходимо понять, что прототип помогает быстро расположить все блоки дизайна, тем самым экономя нам время. Прототипируя мы с легкостью можем быстро что-то поменять изменить, а отрисованный блок в свою очередь гораздо сложней поддается изменениям. Создав прототип, мы можем его показать заказчику, утвердить положение блоков и элементов, и уже спокойно работать над дизайном по этой структуре, а если у нас нет прототипа мы можем попасть на огромное количество правок и порой не совсем простых и потеряем много времени.
Несоразмерность элементов и блоков в макете. Если не использовать модульную сетку, то многие блоки смотрятся несоразмерными. И выглядят нелепо из-за того, что их размеры не вписываются в макет. Вот вам и еще один + по поводу использования модульной сетки.
Уделяйте внимание деталям. Внимание к деталям делает макет более привлекательным. Зачастую бывает, плывут пиксели, вылезают лесенки на границах переходов, обтравка у фотографий плохая (остался контур), тени грязные, неправильные тени и тому подобное.
Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.
Учитесь у лучших. Это наверное золотое правило, во-первых многое придумано уже давно и если хотите разрабатывать достойные дизайны, ориентируйтесь на лучших дизайнеров, смотрите, вникайте в тонкости дизайна как и что сделано. Не сдирайте идею, а именно изучайте, смотрите и учитесь.
Не зажимайте элементы. Также один из моментов, не нужно зажимать элементы близко друг к другу, давайте им воздуха, так будет и читабельность лучше, и элементы будут смотреться намного приятнее. Также не стоит сильно распыляться и давать чересчур воздуха, ищите золотую середину.
Не изменяйте фигуры со скругленными углами через трансформацию. Трансформируя фигуры со скругленными углами, углы теряют свой радиус и приобретают форму овала, в итоге мы теряем форму элемента. А верстальщик отверстает их как овал, так как не будет знать, что там радиус и какой он этот радиус.
Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.
Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.
Новичкам везет, но не в веб-дизайне, ведь это кропотливая работа требующая профессионализма и внимания к деталям. Чаще всего начинающим веб-дизайнерам сложно делать свои первые проекты, поскольку еще нет опыта, скилов и понимания всех процессов, из-за чего они совершают достаточно много ошибок в работе.
Причем, сами дизайнеры редко видят свои ошибки в проекте и часто бывает, что им нужен взгляд со стороны. Так что, в этой статье я помогу предотвратить большинство частых ошибок в дизайне, которые улучшат твою работу. Погнали!
Кстати, я сделал сайт для нашей подборки Ui Jedi и теперь те сайты, которые получили награду в Телеграм-группе попадают на сайт подборки. Обязательно участвуйте!
- Сразу делать дизайн
- Плохая верстка текста
- Ошибки в тексте
- Неуместная или некачественная графика
- Много дизайна
- Мало дизайна
- Не презентовать свои идеи
- Невнимательность
- Не оптимизировать работу
- Не делать мобильную версиюНе интересоваться трендами
1. Сразу делать дизайн
Если при создании дизайна ты сразу идешь рисовать макет, то ты делаешь большую ошибку. Ведь перед отрисовкой макета есть множество шагов, которые необходимо сделать, чтобы добиться нужного результата. Пропуская предварительную подготовку к проекту ты рискуешь зря потратить время и не выполнить работу как надо.
Перед началом работы сперва ознакомься с тех заданием, получи ответы на все интересующие вопросы. Сделай текстовый или схематический прототип макета. Найди достаточное количество референсов и примеров, которые можно использовать как идеи для дизайна. Только после этого можно пробовать рисовать и реализовывать идеи. Если не делал так, то просто попробуй, результат будет совсем другой.
Это не только поможет тебе сделать более крутой дизайн-концепт, но и позволит избежать ряд правок, которые ты мог получить от заказчика. Ведь, погружаясь в проект, ты больше понимаешь ожидания клиента и другие подводные камни.
Если хочешь тренировать свою насмотренность и вкус, но не знаешь как это делать, предлагаю прочитать мою статью про насмотренность, которая уже помогла многим дизайнерам:
Как развивать насмотренность дизайнеру, чтобы создавать гениальные идеи
В этой статье мы поговорим о том, что такое насмотренность и визуальный вкус, как тренировать и прокачивать их, чтобы создавать гениальные идеи самостоятельно, а в конце расскажу о главном инсайте.
2. Плохая верстка текста
Часто бывает, что макеты на Behance и Dribbble отличаются от реальных проектов и многие дизайнеры грустят из-за этого. Поскольку в реальном проекте у вас будет намного больше проекта, нежели в дизайне для вдохновения у популярного дизайнера. Действительно, чем меньше текста, тем чище дизайн будет выглядеть, но дело не только в тексте.
Чтобы куча текста в макете выглядело хорошо необходимо уметь правильно верстать текстовые блоки. Ведь есть множество правил расположения типографики, которые я попросту не вмещу в этом тезисе. Помимо теоретической части с заголовками, акцентами, интерлиньяжем, кернингом и блоками необходимо достаточно много практики, чтобы сделать качественный дизайн.
Рекомендую смотреть референсы с версткой текста и практиковаться на собственных или выдуманных проектах, чтобы у тебя было понимание как работать с текстом в разных ситуациях и стилях.
3. Ошибки в тексте
Ошибки в тексте это боль многих заказчиков, а их лучше не злить, уж поверьте мне на слово! Для тебя это просто ошибка в слове, а для заказчика это потерянные деньги и время на программистах, которые отвечают за верстку сайта. И если не доглядеть банальные ошибки в тексте на сайте, то это может вызвать недоверие у посетителя, а как следствие — потерянный заказ.
Представьте, если бы ты зашел на официальный сайт Apple, где будет написано не «Buy IPhone», а «Buy IFon», согласись, выглядит очень странно, ты бы точно засомневались заказывать сейчас айфон, может их сайт взломали или ведутся тех работы и твой заказ не выполнят.
Окей, как тогда поступать, чтобы избежать подобных проблем? Все очень просто и примитивно — перепроверяй макет перед отправкой. Открывай предпросмотр в Фигме и читай текст на сайте, как будто ты скрупулезный пользователь, который хочет докопаться до всего. Лучше 7 раз проверь, 1 раз отправь! У тебя это займет 5-10 минут, а у команды будут целые нервы.
4. Неуместная или некачественная графика
Графика на сайте крайне важный аспект, заслуживающий особого внимания дизайнера. Лучше не относиться пренебрежительно к поиску и выбору графики для дизайн макета. В противном случае сайт будет выглядеть плохо и непрофессионально, что может не понравится заказчику.
Еще часто бывает, что дизайнеры используют одни и те же фотографии, например, с Unsplash, до дыр в своих работах, те же лица, те же фигуры, те же виды. Сразу становится понятно, что дизайнер не заморачивается и вставляет то, что ему первое попалось в поиске, но так делать лучше не стоит.
Если ты еще новичок и не готов покупать платные иллюстрации и подписки на стоки, то в интернете есть множество бесплатной качественной графики, как пример: Figma Community и Freepik. Здесь ты точно найдешь то, что тебе нужно в векторном формате, еще и бесплатно. Либо можешь подписаться на мой Телеграм-канал, где я регулярно выкладываю полезный контент для дизайнеров, в том числе и иллюстрации:
5. Много дизайна
Помните как выглядел дизайн 2000-х? Там все мигало, сверкало, использовалось миллион ненужных элементов, стилей, текстов и картинок — это можно обозначить гипер дизайном. Такой дизайн делался лишь с одной целью — заполучить внимание клиента и первое время это работало. Сейчас же гипер дизайн не используется повсеместно, только в тематической ретро-стилистике.
Перед началом работы отталкивайтесь от основных принципов дизайна. Он должен быть сбалансированным и интуитивно понятным, чтобы пользователю было комфортно считывать контент на сайте. Если на сайте используется много лишних элементов, которые отвлекают и не вписываются в концепцию — это проигрышный дизайн в традиционном веб-дизайне.
Вы скажите: “Но как же эти крутые сайты из подборок, как же крутые проекты на Behance, которые пестрят разнообразием элементов?”. В реальности, как я уже говорил ранее, все немного отличается. Не гонитесь за одним стилем, так как будет сложно. На начальном этапе нужно понять фундаментальные принципы дизайна, чтобы после делать нестандартные решения. Таким образом будет проще и вам и пользователям.
6. Мало дизайна
Теперь поговорим про антагониста гипер дизайна — это гипер минимализм. Да, да, минимализм сейчас очень популярен и он действительно работает, если сделать все правильно. В этой стилистике работать достаточно трудно, ведь нужно перепробовать миллион вариаций и комбинаций, чтобы найти лучшую. Но этот тезис не совсем про минимализм, а скорее про сырой дизайн, который требует доработки.
Недоработанный дизайн и минимализм это совсем разные вещи. Поэтому, не стоит надеяться, что ты поставишь одну букву на сайте и пользователь поймет твою гениальную задумку. Скорее всего, никто такую идею не поймет, ведь это будет выглядеть странно.
Так что, если словишь баланс элементов, то твой дизайн будет как персик! Главное знать меру и чувствовать стилистику, в которой работаешь, чтобы получить лучший результат.
7. Не презентовать свои идеи
Эта проблема есть практически у всех джунов дизайнеров и тут нет ничего зазорного, ведь через это проходят все. Если коротко, то отправлять свои работу без презентации идей и посылов не очень хорошая идея! Клиенты — не дизайнеры, им трудней визуализировать и представлять, то что ты тут имел ввиду. Поэтому, не стоит рассчитывать на то, что вы скинете дизайн-концепцию одной картинкой не описав все как нужно и это сработает.
К презентации своей работы и идей нужно относится ответственно. От этого зависит, как минимум, то примут у тебя работу или нет. Уже не говоря о отношение к тебе как к дизайнеру и твоим профессиональным навыкам. Я видел множество достойных идей, которые просто не были поняты.
Опять же, в пример могу поставить презентации топовых компаний, как Apple, которая в динамическом видео и графике рассказывает о новых фишках их гаджетов, которые вышли. Согласитесь, таким способом удобно узнавать о преимуществах продукта, нежели узнавать все детали самостоятельно.
8. Невнимательность
Внимание — это то за что вам платят. Чем больше вашего внимания, тем лучше будет для клиента. Поскольку, с помощью внимания и концентрации можно создавать действительно хорошие продукты. При отсутствии внимания начинаются проблемы у всей команды!
Поэтому, на начале своей карьеры тебе нужно научится быть внимательным к самым мелким деталям, а в веб-дизайне их достаточно много. Если упустить элемент, вставить не тот текст или картинку — это может повлечь за собой множество дополнительных правок, которые не нужны ни тебе, ни заказчику.
Хочу поделится с вами своим способом удерживать внимание и концентрацию на определенной задаче. Нужно понимать, что наш мозг, в среднем, может быть в концентрации не больше четырех часов без перерывов. А если у вас нет опыта — и то меньше. Сперва, нужно выключить все нотификации, убрать все отвлекающие факторы, смартфон и посторонние звуки. После чего погрузиться в проект насколько это возможно не отвлекаясь на другие задачи. Как почувствуете, что уже не можете быть с головой в этой задаче — необходимо отдохнуть. Практикуйте такой способ каждый рабочий день, чтобы получить первые результаты, желаю удачи!
9. Не оптимизировать работу
Работа дизайнера состоит из многих этапов и процессов, за которыми, порой, не уследить. К счастью, наша работа может быть оптимизирована и настроена под наш лад. Это как купить робот-пылесос, вместо того, чтобы каждый раз пылесосить пол самому. Оптимизация экономит наше время и силы, которых часто не хватает в фрилансерской рутине.
Есть множество вещей, которые упрощают работу, к примеру, использовать auto-layout и components в Фигме. Это позволит менять элемент в одном месте и не менять его во всех экранах. Или можно сохранить все полезные сервисы в одном месте, чтобы не пришлось их искать каждый раз заново. Найдите все необходимые плагины, которые могут упростить работу. Сортируйте все страницы, файлы, называйте объекты своими именами, а не «Frame2342».
Выполнив вышеперечисленные пункты ваша работа уже сейчас станет оптимизированней! Так что не ленитесь, наводите порядки, ведь так работать намного легче и приятнее.
10. Не делать мобильную версию
Если вы НЕ делаете мобильную версию в своих проектах, то у меня для вас плохие новости! Зачастую, такие сайты получаются просто ужасными в мобильном виде и требуют адаптации. Как вы знаете, больше половины пользователей посещают сайты с мобильных устройств. А это значит, что не сделать мобильную версию сайта является фатальной ошибкой для дизайнера.
Рекомендую всегда адаптировать сайт для мобильной версии и планшета, чтобы он выглядел корректно и никакие элементы не поплыли. Исключением может стать только тот случай, когда вы рисуете дизайн и верстаете его в конструкторе, но даже так лучше перестраховаться и отрисовать все необходимые версии сайта.
11. Не интересоваться трендами
Делать не актуальный дизайн не самая лучшая идея, которая могла прийти в голову новичка! Ведь у всего есть свой срок годности, не все стили прижились, не вся графика актуальна сейчас. Есть вероятность сделать сайт, который не будет нравится пользователям из-за своей неактуальности. Тенденции действительно постоянно меняются, однако их можно проследить и сделать свои выводы.
У меня на Ютуб-канале есть целый плейлист посвященный трендам в графическом и веб-дизайне последних годов. Рекомендую ознакомится с этими видео, чтобы понять куда идет современный дизайн, будет очень полезно.
____________________________________________________________________________
Если вам понравилась статья то поддержите ее лайком, а я продолжу делиться полезным о дизайне
Друзья рад приветствовать. Сегодня вновь хочу затронуть тему ошибок начинающего веб-дизайнера. В статье будут рассмотрены различные ошибки, причем это еще не весь список, так как в недавнем времени кто помнит и является постоянным читателем сайта, я уже писал не один раз на эту тему.
Итак, давайте напомню, первая статья в которой я рассказывал о том что необходимо знать начинающему веб-дизайнеру кроме фотошопа. Вторая статья об основах веб-дизайна, разработке макета, подготовке его к передаче заказчику и о некоторых ошибках.
Что сподвигло на написание этой статьи? Дело в том, что часто читатели присылают письма с вопросами, и просьбой посмотреть тот или иной макет, который они разработали подсказать какие-то мелочи, которые обычным делом допускаются новичками.
Хочется быть полезным и по возможности подсказать, но зачастую банально не хватает на все времени. Да и ошибки в основном одни и те же, как не странно. Поэтому я и решил написать эту статью, чтобы рассказать о ряде ошибок.
Нет логической структуры в дизайне сайта. Очень часто непонятно что, куда, зачем и почему, в макете располагается. Структура не продумывается, все создается по принципу пусть будет, или а давай и это засунем. Пользователь не может с первого раза понять, что будет, если он произведет определенное действие. Должна быть логика в макете и пользователь с первого раза должен понимать, что значит тот или иной блок и что произойдет, если он будет с ним взаимодействовать.
Одна стилистика на всем макете. Это очень распространенная ошибка новичков веб-дизайна, стремясь сделать красивый дизайн, порой забывают о стилистике и в итоге смешивают всевозможные стили. В итоге получается, что в одном месте кнопка глянцевая в другом flat, тоже самое с иконками и другими блоками. А этого желательно не допускать, а соблюдать единый стиль, оформления блоков, кнопок, элементов, шрифтов.
Использование неправильного цветового профиля. Создавая макет сайта, начинающий веб-дизайнер часто забывает установить цветовой профиль на sRGB, оставляя его просто RGB в фотошопе это AdobeRGB. В итоге после того как макет создан и в дальнейшем происходит его верстка и сохранение некоторых элементов «сохранить для web и устройств» у нас искажаются цвета. Дело в том, что AdobeRGB обладает наиболее широким диапазоном цветов по сравнению с sRGB который в свою очередь наилучшим образом подходит для подготовки изображений под web, но обладает меньшим диапазоном цветов, чем AdobeRGB. sRGB позволяет одинаково отображать изображения на большинстве устройств.
Ядовитые и очень яркие цвета фона. Большинство новичков, почему-то разрабатывая дизайн сайта, используют яркие, ядовитые оттенки и цвета. Этого делать категорически нельзя, так как сайт с такими цветами и фоном не будет популярен. Посетитель сайта будет ощущать дискомфорт, и будет покидать его уже на первых секундах. Лучше использовать нейтральные, пастельные тона.
Не проверяется орфография. Возьмите себе за правило проверять все тексты в макете на наличие орфографических ошибок, дабы не попасть в неудобное положение перед заказчиком.
Не используется модульная сетка. Наверное, 90% начинающих веб-дизайнеров, если не больше не используют модульную сетку при разработке дизайн макетов сайтов. А зря, так как модульная сетка это очень удобный, полезный инструмент для веб-дизайнера. Чем она полезна, расписано в статье о модульной сетке.
Не использование направляющих. Многие не используют направляющие, а ведь в связке с модульной сеткой это очень помогает и ускоряет процесс работы. Можно установить прилипание элементов к направляющим и тогда элементы будут четко позиционироваться.
Не откликающиеся элементы дизайна. Еще одна ошибка, новички практически никогда не отрисовывают элементы дизайна в разных состояниях. Статичное состояние, наведение, нажатие и другое. Часто не показывают, как поведет себя элемент при действие пользователя, а ведь верстальщик не умеет читать мысли, он сделает только то, что отрисованно и все. И дизайн будет не живой.
Ошибки, связанные с использованием шрифтов. Со шрифтами все часто очень плачевно. Используется огромное количество шрифтов, используются всевозможные начертания, текст рыбы пишется на латинице притом, что сайт будет использовать кириллицу, а ведь начертание порой разное. Используются различные шрифты для контента, каких только не бывает, делают потому что шрифт красивый, а не потому как будет ли его удобно читать, верстать и использовать. Кегель используют или большой или малый, не знаю чем обоснованно, но можно банально посмотреть на сайтах размер и сделать как используют большинство. Межстрочный интервал вообще не используется.
Использование грязных цветов и градиентов. Цвета не разбавляются оттенками в основном это черный, серый, зеленый, темно зеленый и так далее. Когда стоит добавить к зеленому немного желтого и получим более приятный и естественный цвет. О том, как добиваться хороших цветов и градиентов подробно писал в статье о чистых градиентах.
Не разрабатываются прототипы. Начинающему веб-дизайнеру необходимо понять, что прототип помогает быстро расположить все блоки дизайна, тем самым экономя нам время. Прототипируя мы с легкостью можем быстро что-то поменять изменить, а отрисованный блок в свою очередь гораздо сложней поддается изменениям. Создав прототип, мы можем его показать заказчику, утвердить положение блоков и элементов, и уже спокойно работать над дизайном по этой структуре, а если у нас нет прототипа мы можем попасть на огромное количество правок и порой не совсем простых и потеряем много времени.
Несоразмерность элементов и блоков в макете. Если не использовать модульную сетку, то многие блоки смотрятся несоразмерными. И выглядят нелепо из-за того, что их размеры не вписываются в макет. Вот вам и еще один + по поводу использования модульной сетки.
Уделяйте внимание деталям. Внимание к деталям делает макет более привлекательным. Зачастую бывает, плывут пиксели, вылезают лесенки на границах переходов, обтравка у фотографий плохая (остался контур), тени грязные, неправильные тени и тому подобное.
Создавайте элементы дизайна (иконки, кнопки, тизеры и т.д.) сами. Разрабатывая такие элементы, вы набиваете руку и придаете большую уникальность дизайну. Конечно, бывают случаи, когда нет смысла изобретать велосипед, но в большинстве своем учитесь рисовать элементы дизайна сами.
Учитесь у лучших. Это наверное золотое правило, во-первых многое придумано уже давно и если хотите разрабатывать достойные дизайны, ориентируйтесь на лучших дизайнеров, смотрите, вникайте в тонкости дизайна как и что сделано. Не сдирайте идею, а именно изучайте, смотрите и учитесь.
Не зажимайте элементы. Также один из моментов, не нужно зажимать элементы близко друг к другу, давайте им воздуха, так будет и читабельность лучше, и элементы будут смотреться намного приятнее. Также не стоит сильно распыляться и давать чересчур воздуха, ищите золотую середину.
Не изменяйте фигуры со скругленными углами через трансформацию. Трансформируя фигуры со скругленными углами, углы теряют свой радиус и приобретают форму овала, в итоге мы теряем форму элемента. А верстальщик отверстает их как овал, так как не будет знать, что там радиус и какой он этот радиус.
Знание стилей слоя, которые легко создаются средствами css. Уделите немного времени изучению css3 и вы поймете какие стили слоя с легкостью можно сделать через css, а какие нет. Используйте эти знания на благо своих макетов.
Если у кого есть дополнения по поводу статьи, дополняйте в комментариях.
Разработка дизайна и интерфейса сайта — это не просто «тыкнуть кнопку здесь, вставить картинку там и использовать десять модных шрифтов». Это кропотливая работа, в процессе которой можно допустить множество ошибок. О том, какие самые часты ошибки допускают новички, мы решили спросить у экспертов.
Итак, какие типичные ошибки наиболее часто совершают при разработке дизайне сайта?
- не разбираются в задаче, желаниях заказчика;
- разрабатывают интерфейс для абстрактного пользователя, а не для решения его задач;
- используют фотографии и иконки с первой страницы поисковой выдачи;
- изобретают велосипеды, в то время как существуют устоявшиеся подходы к решению задачи;
- используют шаблоны, которые уже отработали своё;
- чрезмерно креативничают, превращая дизайн в солянку из всего и сразу;
- рисуют интерфейс «из головы», без проектирования;
- пренебрегают правилами оформления текста;
- делают незаметные кнопки, нарушают их иерархию;
- добавляют иллюстрации ради иллюстраций;
- неверно подбирают иконки;
- работают без фидбэка;
- бездумно бросаются в тренды;
- оставляют пустые страницы или безликие страницы ошибок;
- не используют пространство вокруг элементов, оставляют много «воздуха».
Напоминаем, что вы можете задать свой вопрос экспертам, а мы соберём на него ответы, если он окажется интересным. Вопросы, которые уже задавались, можно найти в списке выпусков рубрики. Если вы хотите присоединиться к числу экспертов и прислать ответ от вашей компании или лично от вас, то пишите на experts@tproger.ru, мы расскажем, как это сделать.
Частые ошибки дизайна веб-страницы
Простые советы по верстке и оформлению, которые помогут создать красивую страницу сайта
Никита Обухов
Тысячи людей во всем мире создают сайты на Тильде. Эта статья основана на большом исследовании, которое мы сделали, анализируя дизайн сайтов, созданных пользователями нашей платформы. Мы выделили частые ошибки и сформулировали простые правила, которые применимы к дизайну любых страниц, независимо от инструмента, с помощью которого они созданы.
Ошибки в дизайне лендинга
1. Нет разделения на смысловые блоки
Информацию проще воспринимать, если она разделена на блоки по смыслу. Чтобы визуально отделить блоки друг от друга, используйте большие отступы (от 120 до 180 px) и отделяйте блоки с помощью разного цвета фона.
Между смысловыми блоками маленькие отступы и нет разделения с помощью цвета — информацию тяжело воспринимать, непонятно, какой текст к чему относится
Отступы достаточно большие и блоки разделены цветом — видно, что это блоки разной информации
2. Разные отступы между элементами
Между смысловыми блоками должны быть одинаковые расстояния. Иначе страница будет выглядеть неаккуратно, и может создаться ощущение, что блоки неравнозначны по смыслу.
Разные отступы —неаккуратно, и есть ощущение, что информация о компании относится к обложке, хотя все блоки равнозначны по смыслу
Одинаковые отступы помогают воспринимать смысловые блоки как равнозначную информацию
3. Маленькие отступы, не позволяющие разделить смысловые блоки сайта
Чтобы разные смысловые части не выглядели как единое целое, важно их разделять и использовать достаточно большое расстояние между ними (не менее 120 px).
Маленькие отступы — блоки сайта прилипают друг к другу. Это перегружает страницу и создает путаницу, как будто это одно целое, а не разные по смыслу части
Отступы достаточно большие, сразу понятно, что блоки разные по смыслу
4. Текст плохо читается на фотографии
Текст не должен сливаться с фоновым изображением. Чтобы он хорошо читался, можно наложить на фотографию фильтр контрастного тексту цвета. Чаще всего используют черный, но можно использовать яркие цвета и комбинировать их.
Еще один вариант — использовать изначально контрастную тексту фотографию или располагать текст так, чтобы он был на затемненном участке изображения.
Текст трудно прочитать, фотография слишком светлая
На фотографию наложен фильтр, и текст теперь легко читается
Большое количество разных стилей типографики и оформления на одной странице выглядит непрофессионально и затрудняет восприятие информации. Чтобы этого не происходило, ограничьтесь одним шрифтом, одним цветом и двумя видами насыщенности шрифта (например, normal и bold).
Из-за большого количества стилей типографики непонятно, какая информация важная, а какая второстепенная
Использован один шрифт, цвет и два вида насыщенности. Типографика выглядит аккуратно и понятно
Выделение цветом отдельных узких элементов страницы дробит смысловые блоки и выглядит неаккуратно. Например, заголовки уже выделяются среди текста размером, насыщенностью шрифта, а также отступами. Если нужно выделить какую-то информацию на странице — применяйте цветной фон для всего смыслового блока: и для заголовка, и для текста, относящегося к нему.
Заголовки, выделенные цветным фоном дробят смысловые блоки и выглядят отдельными самодостаточными элементами
Заголовок и текст, относящийся к нему, имеют общий фон. За счет этого видно, что это один смысловой блок
7. Много текста в узких колонках
Когда в узких колонках много текста, его трудно читать — глазам все время приходится перескакивать с одной строки на другую. К тому же это выглядит некрасиво. Лучше уменьшить количество колонок и сократить текст, иначе его просто никто не будет читать.
Длинный текст в колонках (еще и с выключкой по центру) неудобно читать
Текста в колонках немного, легко прочитать
8. Много текста с выравниванием по центру
Центральная выключка (равнение по центру) текста уместна при небольшом количестве слов, иначе его будет сложно воспринимать. При этом текст стоит сделать покрупнее, от 24 пикселей.
Если вам необходимо большое количество текста, используйте блок с раскрывающимся текстом (в Тильде TX12, TX16N или кнопка BF703).
Текста с центральной выключкой очень много, читается с трудом
Короткий текст под заголовком (все с центральной выключкой) создают хорошую композицию
9. Текст накладывается на важную часть изображения
Не стоит располагать текст на значимых частях фотографии и мелких деталях. Так и изображение не будет видно, и текст будет читаться тяжело. Попробуйте поварьировать выключку текста (равнение по центру или левому краю) и его вертикальное расположение.
Заголовок мешает рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать
Изображение и текст вместе создают хорошую композицию, видно детали фотографии, текст легко прочитать
10. Несоблюдение визуальной иерархии
Чтобы на странице была видна смысловая иерархия информации, заголовок на обложке должен быть крупнее остальных заголовков на странице либо такого же размера (например, если в заголовке на обложке много слов).
Заголовок на обложке неоправданно меньше, чем последующий заголовок, это создает путаницу. Кажется, что второй заголовок важнее
Заголовок на обложке крупнее, чем в следующем блоке, все выглядит последовательно и гармонично
То же самое относится к визуальной иерархии внутри смыслового блока. Заголовок должен быть самым крупным, а подзаголовок меньше и с меньшей насыщенностью шрифта. Названия преимуществ — заметно меньше, чем заголовок и такой же насыщенности. Описание преимуществ набрано самым мелким текстом.
Таким образом, даже при беглом просмотре страницы посетитель увидит, какая информация самая важная и какая вторичная.
Заголовок меньше, чем названия преимуществ и кажется второстепенным, хотя по смыслу он важнее
Заголовок самый крупный, названия преимуществ меньше, но тоже выделяются среди текста
11. Один смысловой блок визуально распадается на два
Полноэкранное изображение или галерея, расположенные после текста, смотрятся как самостоятельный блок. Если добавить галерее поля, то за счет общего фона текст и изображение будут выглядеть единым смысловым блоком.
Галерея во всю ширину экрана кажется не связанной с заголовком выше и выглядит как самостоятельный блок
Галерея расположена на общем фоне с заголовком — все вместе смотрится единым блоком
12. Слишком крупный длинный заголовок
Очень крупный шрифт хорошо подойдет для короткой фразы. Если заголовок длинный, лучше использовать меньший размер шрифта, так его будет легче читать и всем элементами на обложке не будет тесно.
Слишком крупный заголовок — заслоняет почти всю обложку, элементам тесно, текст тяжело прочитать
Хорошая композиция, все элементы обложки сбалансированны, текст легко читается
13. Неуместное использование обводки в кнопках
Обводка нужна, чтобы сделать прозрачную кнопку. Добавлять обводку к цветной кнопке не нужно — это лишний и бессмысленный элемент интерфейса, который перегружает страницу и усложняет восприятие контента.
Большое количество цветовых акцентов создает путаницу на странице: непонятно, что важнее. Достаточно использовать 1−2 цвета, чтобы выделить важные элементы.
Много ярких цветов, непонятно, на что в первую очередь обратить внимание
Один цветовой акцент создает разнообразие, но не отвлекает от содержания страницы
Человек заходит на сайт, чтобы найти решение своей проблемы. Помогите ему в этом. Используйте меню, чтобы посетителю сайта было проще сориентироваться и быстрее найти то, что ему нужно. Не перегружайте меню избыточной информацией. Оптимальное количество пунктов меню — 5-7.
В меню слишком много информации, поэтому в нем сложно сориентироваться
Информации в меню немного, легко сориентироваться
1. Длинный сплошной текст
Длинный и не разделенный на абзацы текст снижает удобство чтения. Чтобы в тексте было проще ориентироваться, стоит разделить его на абзацы и разбавить, например, ключевой фразой или изображением.
Сплошную пелену текста сложно воспринимать глазу
В тексте расставлены акценты, благодаря которым его легче читать
2. Заголовок стоит на равном расстоянии от предыдущего и следующего абзаца
Заголовок не должен «летать» между текстами предыдущей и следующей главы, потому что по смыслу он относится к последующему абзацу. Расстояние над заголовком должно быть раза в 2−3 больше, чем расстояние под ним. А расстояние под заголовком должно быть примерно равным расстоянию между абзацами или немного больше. Так заголовок будет визуально относиться к последующему тексту.
Заголовок находится на равном расстоянии от абзацев снизу и сверху и непонятно, к чему относится
За счет небольшого отступа под заголовком видно, что он относится к последующему тексту
3. Смысловая иерархия не соблюдается
Контраст в типографике помогает визуально разделить уровни текста и четко распределить иерархию. Самыми крупными должны быть заголовки, подзаголовки могут быть заметно меньше, но отчетливо выделяться в тексте.
Заголовок и подзаголовок практически одинакового размера, выглядят как равнозначные уровни текста
Видно, что заголовок важнее по смыслу, чем подзаголовок
4. Разные отступы сверху и снизу одного смыслового блока
Равнозначные по смыслу блоки должны выглядеть соответственно и располагаться на равном расстоянии друг от друга.
Слишком маленький отступ между обложкой и фотографией автора, кажется, что к обложке автор имеет большее отношение, чем к тексту
Отступы одинаковые, блоки выглядят как равнозначные элементы
5. Подпись расположена слишком близко к иллюстрации
Хотя иллюстрация и подпись образуют единую структуру, это два отдельных элемента, и текст не должен вторгаться на территорию изображения.
Подпись приклеилась к изображению и мешает восприятию (и картинки, и текста)
Между картинкой и подписью есть воздух, при этом понятно, что подпись относится к фотографии
6. Между подзаголовком и текстом мало места
Подзаголовок и последующий текст связаны, но если абзацный отступ внутри текста оказывается больше, чем расстояние между всем текстом и подзаголовком, конструкция становится дисгармоничной.
Отступ между заголовком и текстом меньше, чем отступ между абзацами
Отступ после заголовка чуть больше, чем отступ между абзацами
7. Основной текст расположен близко к акценту
Акцент внутри основного текста (например, ключевая фраза или цитата) — самостоятельный объект. И чтобы он действительно выделялся и бросался в глаза, его нужно отделять от основного текста отступами от 75 до 120 px.
Отступ между основным текстом и акцентом слишком маленький
Акцент выделяется в тексте благодаря большим отступам
8. Слабый контраст элементов
Если вы решили сделать акцент на какой-то фразе — будьте смелее, сделайте ключевую фразу крупнее основного текста на 10-15 px, пусть важная мысль действительно выделяется из окружающего текста.
Ключевая фраза как будто притворяется частью текста и не хочет выделяться. Выглядит неаккуратно
Ключевая фраза выделена за счет крупного шрифта и отступов
9. Цветной фон для узкого блока
Чтобы выделить какой-то небольшой блок (например, информацию об авторе), достаточно сделать хороший отступ, это создаст пространство вокруг. Выделять эту информацию на цветном фоне не стоит, это будет выглядеть неуместно.
Подзаголовок также не следует выделять цветом, вполне достаточно того, что он крупнее основного текста и отделен отступами.
10. Между двумя полноэкранными изображениями есть пустое пространство
Расположение нескольких полноэкранных изображений подряд не следует оставлять между ними отступ — граница между фотографиями и так будет видна, незачем добавлять лишний элемент, не несущий никакой смысловой нагрузки.
Пустое пространство между полноэкранными изображениями выглядит бессмысленно и некрасиво
Фотографии выглядят гармонично
11. Много выделений в тексте
Акценты (в данном случае жирное начертание) хорошо работают, когда их мало. Большое количество выделений в тексте затрудняют чтение.
Много выделено жирным, текст рябит в глазах
Небольшое выделение акцентирует внимание на элементе, но не мешает читать весь текст
12. Много стилей типографики
В тексте оформление не должно преобладать над удобочитаемостью. Чем меньше стилей типографики, тем лучше видны акценты в тексте. Достаточно выделять заголовки и подзаголовки, а также делать контрастными ключевые фразы.
В тексте слишком много акцентов и выделений, рябит в глазах и неудобно читать
Стилей типографики немного, четко видны акценты и иерархия в тексте
13. Выравнивание по центру в длинном тексте
Выключку (выравнивание) по центру обычно используют в заголовках и выносах — акцентах в тексте, чтобы выделить элемент из массы. Когда весь текст выровнен по центру, это значительно снижает удобство чтения.
Текст с центральной выключкой выглядит неопрятно, его неудобно читать
Равнение по левому краю лучше всего воспринимается глазом
14. Заголовок прилип к фотографии
Заголовок — самостоятельный элемент. Он не должен быть расположен слишком близко к следующей за ним иллюстрации. Чтобы заголовок хорошо сочетался с изображением, сделайте отступ не менее 60 px и добавьте подзаголовок, он раскроет содержание и правильно расставит акценты.
Заголовок расположен слишком близко к фотографии, нет воздуха
Заголовок отделен от изображения подзаголовком и относится ко всему разделу, а не только к картинке
15. Неуместное использование курсива
Курсив используется для того, чтобы выделить слово или короткую фразу в тексте. Он не так сильно бросается в глаза, как жирное начертание, но позволяет сделать акцент в определенном месте.
Набирать весь текст или заголовки курсивом не следует.
В текстах, набранных шрифтами без засечек, курсив лучше не использовать совсем.
Фраза уже выделяется в тексте за счет размера и отступа, курсив уже излишен
Курсив на своем месте — небольшой акцент в основном тексте
16. Смещение блоков относительно центра и друг друга
Этот досадный промах вы легко обнаружите сами, если после всех манипуляций с текстом (изменение размера шрифта, выравнивания, отступов) просто сделаете паузу и посмотрите на то, что получается.
Заголовок и описание смещены влево, а текст вправо
Все элементы текста складываются в гармоничную композицию
Авторы: Ира Смирнова, Маша Белая, Юлия Засс
Дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
Веб-дизайн призван решать бизнес-задачи. При этом всегда есть определённые ограничения, которые следует учитывать: по загружаемому контенту, его обновлению и отображению на разных устройствах, по работе с базами данных и внешними системами и не только.
Однако не все дизайнеры думают о том, как их макеты будут функционировать на сайте или в приложении. Руководитель студии дизайна и разработки сайтов и сервисов Method Zero Антон Шакиров рассказывает о самых распространённых ошибках, которые последние пару лет замечал на дизайн-площадках и сайтах, и делится принципами, которые помогут их избежать.
Дизайнеры, как правило, создают макеты для трёх разрешений экранов:
- под компьютеры и ноутбуки: ширина макетов — 1 920, 1 440 или 1 360 пикселей, обычно для сайтов берут только одно из этих разрешений;
- под планшеты: ширина макетов — 767 пикселей;
- под смартфоны: ширина макетов — 375 пикселей.
Дизайн хорошо смотрится, первый экран красиво передаёт нужную информацию и вовлекает скроллить дальше. При этом часто забывают, что на реальных устройствах первый экран будет меньше по высоте из-за окна браузера, поля с адресом сайта и панели закладок. Кнопка с призывом к действию и вовсе может уехать за пределы экрана. Всё это ломает дизайн.
Нужно помнить и про использование графики. В примере ниже фоновая иллюстрация растягивается по ширине сайта, при этом нижняя часть круга обрезается и выходит за пределы первого экрана, где её изначально располагал дизайнер:
Исправить этот недочёт можно так: увеличить отступы справа и слева от картинки до краёв экрана или поместить круги в отдельные элементы и работать с ними уже там.
Случается и обратная ситуация, когда специалист не адаптирует дизайн под ультраширокие мониторы 3 440 x 1 440 и не объясняет разработчикам, как должен вести себя сайт при изменении ширины экрана. Решить этот вопрос поможет:
- Резиновая вёрстка, когда весь сайт пропорционально растягивается по ширине экрана. Но следует учитывать, что контент может слишком укрупниться и будет видна только треть того, что должно было помещаться в рамках одного экрана.
- Добавление полей справа и слева. Здесь стоит помнить про закреплённые на экране элементы и про фоновые видео и изображения, которые обрезаются по краям экрана на стандартных экранах.
Пример резиновой вёрстки: контент остаётся в рамках одного экрана, благодаря правильному позиционированию всех элементов на странице ↓
В примере ниже разные части дизайна закреплены с левой и с правой стороны. Если открыть этот сайт на ультрашироком мониторе, посередине возникает дыра:
Для макетов для iPhone. При дизайне кнопок, закреплённых снизу на мобильном устройстве, часто забывают про индикатор «Домой» (Home indicator) — чёрную полоску снизу, область под которой не кликабельна. Кнопки следует приподнимать выше этого индикатора или ставить больше внутренних отступов под ней, но не прижимать её к низу. Это также немного повлияет на высоту элементов в рамках одного экрана сайта или приложения.
Не стоит забывать готовить и передавать разработчикам все видео и изображения в большем размере для сохранения их качества на мониторах 4K и 5K. Если изображение на весь экран, готовим его под всю ширину монитора, например, 4K — 3 440 px. Если на пол-экрана — 1 720 соответственно. Это важно, потому что часто разработчики экспортируют картинки напрямую из макетов, где эти картинки делают в небольшом разрешении. Экспорт изображений в увеличенных размерах не поможет в этом случае. Исключение составляют только векторные изображения в svg-формате, которые могут бесконечно увеличиваться и уменьшаться без потери качества.
Можно не рисовать отдельно макеты под планшет, если дизайнер делает проект, который:
- нужно оперативно запустить;
- не содержит сложных таблиц и сеток с переносами контента на следующие строки или с его скрытием на некоторых разрешениях экранов.
Согласно данным SimilarWeb и по личному опыту, на планшеты в среднем приходится 1–2% всего трафика, поэтому нецелесообразно тратить четверть проектного времени на эти макеты. Правда, если есть нестандартный блок со сложной сеткой, можно отдельно нарисовать планшетную версию только этой части. В остальных случаях опытные разработчики сами адаптируют десктопную версию макета под планшет.
Под динамическими элементами страниц подразумеваю всё, что может менять своё состояние — вид, содержание — в зависимости от положения курсора мыши, факта нажатия или перетаскивания элементов, фокуса, времени, скролла страниц, состояния каких-либо данных на странице.
На этапе дизайна динамических элементов нужно представлять, объяснять и рисовать, как этот элемент будет вести себя дальше или как он будет реагировать на определённые события.
Чаще всего забывают нарисовать и продумать состояния ховеров, когда на элемент наводится курсор, состояния нажатия или перетаскивания, состояния фокуса у кнопок, ссылок, форм, кликабельных элементов. Все эти состояния помогают пользователям понять, что на этот элемент можно нажимать, что в фокусе этот объект или что в поле есть ошибки.
При работе с формами — помимо состояний ошибок и невалидности полей — стоит помнить о сообщениях об успешной отправке формы. Так пользователь поймёт, что всё хорошо и его данные отправлены.
Некоторые элементы могут быть динамичными сами по себе. Например, если на сайте есть таймер обратного отсчёта, секундомер, экраны загрузки сайта, сообщения о загрузке данных. Нужно не только нарисовать то, как эти элементы выглядят, но и что с ними происходит в процессе и что будет после завершения действия.
Например, если говорить про таймер обратного отсчёта, нужно учитывать изменение цифр и изменение ширины всего текста из-за разной ширины отдельных цифр — если это не моноширинный шрифт, где каждый символ всегда занимает одинаковую ширину, что позволяет ориентироваться только на количество символов. Для этого делаем дизайн других состояний или описываем для разработчиков, как оно должно изменяться. А также готовим макеты или анимации того, что будет отображаться по истечении срока.
Если на сайте будут размещаться вакансии, новости, события, команды, магазины и другие данные, которые будут подгружаться из внешних систем и активно обновляться, следует заранее узнать у заказчика:
- как эти данные хранятся,
- какая есть или будет информация,
- как и кем данные будут актуализироваться,
- какие сложности могут возникнуть.
Это позволит определить полный набор данных для работы — или понять новые ограничения по дизайну и вёрстке.
Например, при проектировании HR-портала компании мы не можем вслепую задизайнить страницу поиска вакансий и каждую вакансию отдельно. Сперва нам надо узнать, какая информация по вакансиям будет доступна. Так, если в вакансиях нет информации о метро, мы и не должны рисовать это в макетах. Если в поле «Регион» хотим разделить Москву и Московскую область, узнаём у клиента, есть ли такая информация в принципе, а у разработчиков — возможно ли так сделать с технической точки зрения.
Нужно выяснить обязательность полей или целых разделов. Если мы делаем дизайн вакансий, может ли поле с графиком работы или со станцией метро полностью отсутствовать? Если делаем разделы со статьями, может ли какой-то раздел оказаться пустым? Может ли не быть ближайших событий? Может ли клиент удалить все новости?
С помощью таких вопросов дизайнер выявляет дополнительный набор состояний, который нужно задизайнить и передать разработчикам.
Другая ситуация — при наличии данных они могут не успеть подгрузиться с сервера при обращении к соответствующей странице. Если дизайнер знает, что эти данные будут грузиться извне, то лучше заранее предусмотреть сообщения о том, что всё в порядке и контент загружается.
Стоит помнить и про ограничения на контент, которые стоит задать для отдельных полей или частей контента. Ограничение может быть на длину текста, количество элементов в списке, количество фотографий.
Например, в слайдере с отзывами один из отзывов может быть сильно больше других. Это приведёт к тому, что под небольшими отзывами снизу будут дырки, так как нижестоящий контент отодвинется отзывом с самым длинным текстом:
Лучше заранее продумать в дизайне варианты поведения при таких сценариях или обговорить с клиентом и разработчиками введение ограничений на количество символов в каждом отзыве.
- Получите опыт 4 ведущих дизайн-студий и создадите 7 проектов для своего портфолио
- Научитесь создавать сайты под ключ, оформлять дизайн-проекты и презентовать их заказчику
- Сможете искать работу и проходить собеседования уже в середине обучения
Некоторые части сайта подлежат частым правкам: портфолио с кейсами, баннер с призывом к действию, блок с информацией о следующем событии, стоимость товаров или услуг и другое.
На этапе дизайна нужно сразу принимать в расчёт ограничения клиента по времени и деньгам, которые он готов тратить на обновления сайта.
Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?
Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.
Дизайнер должен быть уверен, что клиент сможет получить фотографии в заложенной стилистике под разные материалы или сделать предварительную постобработку и цветокоррекцию фотографий.
Дизайнеры знают про наличие в HTML заголовков H1–H6 и используют их при наименовании стилей. Однако при создании новых наборов стилей под мобильную версию сайта из-за удобства в дизайне и не знания того, что это делать нельзя, могут менять тип заголовка и стиля на элементах относительно десктопной версии. Был заголовок H1, а в мобильной версии у того же элемента стал H2. Был дополнительный стиль small text — стал просто text.
Если дизайнер создаёт с помощью HTML-тегов элемент H1, то он и должен оставаться H1 в мобильной версии. Иначе при разработке придётся делать дублирование всего элемента и создавать костыли с помощью CSS-классов — рабочее, но некрасивое и неэффективное решение.
Если нужно, чтобы какой-то элемент был по стилю таким же, как и элемент с другим стилем, стоит их сделать одинаковыми на определённых разрешениях экранов. Но сам элемент должен оставаться с таким же типом класса, как и на макетах под другие разрешения экранов.
Один и тот же элемент не должен менять свой заголовок между различными разрешениями экранов. Если в десктопной версии (верхнее изображение) заголовок соответствует стилю H4, то и в мобильной версии этот заголовок должен соответствовать стилю H4, даже если он эквивалентен мобильному H3
В этом вопросе дизайнерам и разработчикам сильно помогает создание UI Kit, где как минимум будут указаны все стили шрифтов, цветов, состояния элементов. Это позволяет проверить правильность указания всех стилей элементам и неизменность всего набора стилей между разными разрешениями экранов.
Здесь речь идёт скорее про уменьшение вероятных ошибок на готовом сайте и про сильную помощь разработчикам и ускорение их работы, а не про прямую ошибку дизайнеров. Но иногда это и про недостаточный объём того, что нужно сделать специалисту.
Все дизайнеры знают про favicon — маленькую картинку, которая отображается на вкладке сайта в браузере. Но не все создают и передают разработчикам webclip — картинку 256 x 256, которая видна в панели закладок Safari, — и opengraph-изображения для сайта и для отдельных страниц — изображение с рекомендуемым разрешением 1 200 x 630, которое видим при вставке в соцсетях ссылки на сайт.
Если фоновые изображения и другие элементы всегда зарезаются краями экрана или блоками в одном и том же месте, стоит сразу кадрировать эти изображения в макете. Часто дизайнеры отодвигают фоновую картинку за края экрана и включают у элементов обрезание контента за пределами макета страницы. Но когда разработчики будут скачивать такую картинку для экспорта на сайт, она выгрузится целиком. Так изображение попадёт на сайт в большем, чем нужно, размере, что будет замедлять загрузку и добавит разработчикам хлопот с выравниваниями.
Ещё одна частая ошибка — делать разные иконки в разных по размеру фреймах. Часто можно заверстать и так, но для этого разработчикам нужно под каждую иконку задавать свойства размеров, отступов. Если потребуется заменить иконку на другую, придётся менять размеры и отступы. Это приносит много проблем разработчикам и тормозит разработку.
Все иконки в дизайне должны быть сделаны внутри одинаковых по размеру областей — фреймов, внутри которых они уже выравниваются и масштабируются как нужно. Таким образом, все иконки вне зависимости от их реального размера будут занимать одинаковые области этих самых фреймов.
Иконки должны располагаться внутри одинаковых квадратных или прямоугольных областей, внутри которых они уже индивидуально выравниваются и масштабируются.
Вот примеры правильной работы с иконками:
На этапе разработки показывать все идеи и макеты разработчикам. Они скажут о возможных проблемах, которые всплывут при разработке.
Всегда просить обратную связь от разработчиков: что им не хватило при передаче дизайна. Через несколько проектов сформируется понимание, на что обращать внимание и что ещё нужно учесть и подготовить в дизайне.
Начать самостоятельно разрабатывать несложные сайты на технологиях no-code. Рекомендую Tilda, Readymag и WebFlow. После нескольких собранных сайтов станет ясно, с чем возникают сложности, где и что работает не так.
Самостоятельно проводить тестирование сайтов на различных устройствах. Такие сервисы, как BrowserStack, позволяют открыть сайт под различными ОС, браузерами и телефонами. Самостоятельно подвигать окно браузера, взять другой компьютер и посмотреть, как сайт себя ведёт в браузере Safari, где чаще возникают проблемы.
Мыслить критически. Советую моделировать все возможные ситуации и показывать в дизайне, как это всё должно работать. Задавайтесь вопросом «а что, если». А что, если клиент введёт описание в 2 раза длиннее, чем было в макетах? А что, если не будет картинки под новость? Продумывайте все ситуации, которые могут случиться, и любые возможные действия пользователей и клиента.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Неочевидные ошибки начинающих веб-дизайнеров
Новички в сфере веб-дизайна отличаются своей креативностью и с одной стороны, это очень хорошо. Однако в данной сфере важен не столько креатив, сколько профессионализм, а также внимание к деталям. Отсутствие профессионализма и внимания довольно часто приводит к том, что новички, реализуя свои первые проекты, допускают массу ошибок, которых даже не замечают. Поэтому крайне важен взгляд со стороны, который поможет снизить количество промахов и улучшить качество конечного результата.
Топ самых частых ошибок начинающих веб-дизайнеров
№1 — Мало внимания подготовке
Многие новички начинают свою работу с создания макета дизайна, однако перед этим необходимо выполнить предварительную подготовку к самой отрисовке. В частности, внимательно изучить задание и вникнуть в его суть, если появились вопросы, то нужно найти на них ответы, поискать подобные референсы и примеры, подумать над идей или лучше всего над идеями для дизайна. После чего стоит сделать наброски найденных идей и показать их заказчику/работодателю, для того чтобы он выбрать ту, что понравилась ему больше остальных. Теперь можно приступать непосредственно к работе.
№2 — Недостаточно проработанная вёрстка текста
Никто не спорит, что дизайн всегда выглядит лучше, когда не содержит вообще никакого текста. Однако в веб-дизайне такого не бывает и текст, в том или ином количестве, должен быть на любой, в том числе и на посадочной странице. Для того чтобы дизайн с текстовыми блоками выглядел достойное, необходимо уделить достаточное внимание изучению вопроса графической вёрстке. Кроме того, не обойтись без практики, поскольку только с ней приходит опыт.
№3 — Грамматические ошибки в тексте
Нередко новички воспринимают грамматическую ошибку, допущенную случайно в тексте, как небольшое недоразумение. Со своей стороны, заказчики, в подавляющем большинстве случаев, к таким ошибкам относятся совершенно иначе и могут даже расторгнуть договор о сотрудничестве. Разумеется, это не самым лучшим образом скажется на деловой репутации, так что, перед отправкой своей работу внимательно проверяй ей, в том числе и на наличие грамматических ошибок.
№4 — Неуместная, некачественная графика
Графикой, в принципе увлекаться не стоит, но если без неё никак не обойтись, то необходимо крайне внимательно подходить к её выбору. В противном случае, можно полностью испортить дизайн сайта и свести все свои старания на нет. Кроме того, не нужно использовать «затёртые до дыр» фотографии, поскольку это очередной раз показывает недостаток профессионализма дизайнера.
№5 — Недостаток актуального дизайна
Актуальные тенденции в мире веб-дизайна пусть не стремительно, но всё же меняются. Буквально 20 лет назад были крайне модными сайтами с ярким и сверкающе/мигающим дизайном, с миллиардом разных кнопочек и иконок, с безумной анимацией и так далее. Сегодня такие сайты остались в прошлом, а дизайн претерпел существенные и кардинальные изменения. Так что если тебе не заказали дизайн в ретро-стиле, то перед тем, как приступать к работе, изучи внимательно актуальные на текущий момент времени тенденции в области веб-дизайна
№6 – Гипер-минимализм
Некоторые новички, то ли боятся, то ли ошибаются, полагая, что дизайн в буквально минимально минималистическом стиле, где самой дизайнерской задумки буквально невозможно заметить, является хорошей идеей. Спойлер — нет, это плохая идея. Поскольку такой дизайн смело можно назвать недоработанным и недостаточным. Даже если работа над таким дизайном была проделана колоссальная, люди, а самое главное заказчики не смогут понять данную гениальную идею, поскольку попросту не заметят её.
№7 — Отказ от презентации своих идей
Многие новички «без слов» отсылают свои работы заказчика, те в свою очередь ни разу не профессиональные дизайнеры и, в принципе, не могут понять, что автор имел в виду, выбрав, скажем красный цвет, а не жёлтый, или зелёный. Поэтому не стоить лениться и/или забывать, писать презентацию своей идеи и выполненной работы, в которой подробно рассказывать почему было принять именно это решение, а не какое-то другое.
№8 Недостаточное количество внимания деталям
Возможно вы удивитесь, но общий уровень качества выполненной работы складывается из того уровня качества, на котором были выполнены самые мельчайшие детали. Иными словами, мелочей в веб-дизайне не бывает, поскольку, упустив одну из них, придётся полностью переделывать абсолютно весь проект. Для того чтобы качественно выполнять свою работу, мозгу необходимо давать отдыхать. Так было научно доказано, что мозг веб-дизайнера нуждается в кратковременном отдыхе каждые четыре часа и в более продолжительном каждые 8-9 часов. Кроме того, новичкам, во время работы настоятельно рекомендовано исключать любые отвлекающие факторы, в том числе и включенный смартфон.
№9 — Отсутствие оптимизации
Работа дизайнера чрезвычайно обширна и многогранна, из-за чего уследить за всем бывает очень непросто. Однако решить данную непростую задачу сегодня всё-таки можно, в частности, с помощью специальных программ и приложений. Например, можно использовать в Фигме auto-layout и components для автоматической замены элементов на всех экранах. Подобная автоматизация позволит сэкономить время, а также вывести оптимизацию на профессиональный уровень.
№ 10 — Отказ от мобильной версии
Не секрет, что сегодня недостаточно сделать адаптивный дизайн, поскольку необходимо ещё создавать его мобильную версию. Дело в том, что аудитория пользователей с мобильными устройствами стремительно растёт, а это значит новичкам необходимо уметь делать любую, актуальную сегодня версию дизайна. Если же у вас нет такого навыка, то необходимо восполнить данный пробел в своих знаниях и умениях. В противном случае, увы, ты становишься невостребованным.
Это самые главные и наиболее частые ошибки, которые допускает и, что самое интересное, не замечает очень большое количество новичков в сфере веб-дизайна. Хотя, есть ещё одна, это крепкая хватка за дизайн, который однажды получился и понравился заказчику. Некоторые новички полагают, что нашли рабочую модель, отчего перестают развиваться и интересоваться новыми тенденциями, а это очень плохо. Удачи!
Поделись мнением о статье «Неочевидные ошибки начинающих веб-дизайнеров», предложи свой вариант в комментариях! Спасибо!
Очень легко совершить ошибку, когда вы только начинаете свой путь.
И не важно, чем вы занимаетесь – строите дома, печете хлеб, рисуете картины или защищаете родину с автоматом в руках. Все и всегда совершают ошибки, все и всегда попадают в ловушки.
Однако, сегодня мы акцентируем свое внимание именно на веб-дизайне.
Создание чего-то нового, креатив, эксперименты, все это сопровождается совершением ошибок – это ни что иное, как процесс обучения. Делая ошибки люди учатся – и это давно известный факт. Ну а что, веб-дизайнеры тоже люди!
Перед тем как перейти непосредственно к выявлению этих самых ошибок, хотелось бы процитировать автора оригинальной англоязычной статьи:
«Ежегодно, будучи преподавателем в университете, я встречаю множество новых студентов на направлении веб-дизайна. Я заметил, что все они повторяют одни и те же ошибки. Надеюсь, что рассмотрев их в данной статье, мы сможем помочь вам выбрать правильный путь в будущем».
Каждая веб-страница создана с какой-то целью. Она должна что-то делать – развлекать пользователя, продавать ему товар, обслуживать его или являться инструментом для выполнения задач.
Каждый элемент, даже самый незаметный, полупрозрачный, спрятавшийся где-то в уголках страницы, даже он должен содействовать осуществлению глобальной цели веб-страницы.
Когда вы разработаете дизайн, посмотрите на получившееся и хорошенько подумайте. Функции всех элементов страницы должны быть интуитивны для пользователя, понятны. Элементы, прямо говоря, должны служить на благо той самой цели веб-страницы. Если же они этого не делают – удалите их без капли сожаления! Даже если они очень красивые, даже если она вам очень нравятся, удаляйте.
Веб-дизайн должен быть кристально чистым в плане восприятия. Если элемент кликабельный – визуально отразите это! Подчеркните, измените цвет, шрифт или создайте привлекающую внимание кнопку – главное, элемент должен помогать осуществить цель данной страницы, элемент должен помогать пользователю.
Веб-дизайнеру необходимо создавать такой визуальный образ и иерархию страницы, чтобы пользователь мог легко ориентироваться и без проблем получать искомую информацию за минимальное количество времени.
Стиль, в котором реализована страница, несомненно очень важен, ведь он визуально формирует цель страницы, ее образ. Однако, не менее важным является и контент – то, что будет размещено на данной странице.
Если вы занимаетесь веб-дизайном и собираетесь рассказать об этом на разрабатываемой странице сайта, то вряд ли там будет уместна информация о том, что вы коллекционируете велосипеды или марки.
Хорошенько проанализируйте все и задайте себе вопрос – зачем пользователь пришел на сайт или на конкретную страницу? Ответом на данный вопрос будет формулировка того, что пользователь получит в итоге или то, что хотите от него получить вы.
Всегда нужно тщательно продумывать информативно-функциональную составляющую сайта. Например, не стоит разбивать сайт на множество разделов или подразделов (если на самом деле их не так уж и много), если есть возможность сделать единую страницу с инфо-блоками (по типу landing page) с удобным скроллом и навигацией.
В качестве примера можно рассмотреть данный сайт: http://www.marivanna.ru/spb/
Это интересно – идти в ногу с модой, следовать трендам или даже создавать их в своих проектах, однако, не менее и даже более важно не забывать об основных принципах проектирования – о грамотном, удобном и интуитивным юзабилити.
Например, классические постеры Олимпийских игр из двадцатого века до сих пор смотрятся презентабельно и интересно. Другое же дело скевоморфические сайты «Web 2.0» (Скевоморфизм — это принцип дизайна, когда какому-то одному продукту придаётся облик другого), созданные в начале 2000-х годов, которые уже сейчас смотрятся незаурядно и старовато. Стоит сказать, что недавно трендовый хипстерский вид «усы и очки» движется в том же направлении и вскоре может кануть в прошлое.
Ключ к успеху – придерживаться принципов типографики, методик изображения, макетов, а не применять везде и всюду иконографику, играть CSS и наслаивать эффекты из Photoshop.
Зачастую меньше – лучше. И если вы умеете создавать карусель изображений или параллакс-эффект, это не значит, что умения эти нужно применять на каждом шагу.
Нет таких людей, который сразу рождаются с хорошим вкусом (конечно, это не стоит воспринимать как истину, это лишь мнение), и вкус, конечно, вещь субъективная. Однако, используя продуманные, проработанные и именно полезные вещи, мы можем создавать именно хороший, а не плохой дизайн, а также учиться видеть ошибки в будущих работах.
Хоть линии сетки и не видны на конечном продукте, большинство профессиональных дизайнеров пользуются этим инструментом при его разработке.
Зачастую такая сетка состоит из восьми, двенадцати и даже шестнадцати колонок. Колонки эти должны быть одинаковыми по размеру и обладать четкими и выделенными границами, разделяющими их. Дизайн элементы могут охватить одну и более таких колонок.
Фактически, если визуальный элемент небольшой – он может занять всего лишь три таких колонки, однако, бывают случаи, когда элемент занимает все поле, состоящее из двенадцати колонок. Вариации с расположением сетки и количеством колонок в ней позволяют проецировать будущий продукт в реальных размерах, а также показывать, как он будет смотреться на какой-либо поверхности или экране.
Система сеток появилась в полиграфическом дизайне, но пришла в веб через такие сервисы, как «960 Grid System», а позже из таких инструментов, как «Skeleton». Эти программы способны динамически изменять размер и количество столбцов в зависимости от разрешения экрана. Все элементы должны четко соответствовать сетке, либо не соответствовать и подлежать переработке. К примеру, какие-то линии могут выглядеть практически прямыми, но не совсем, это плохо, в итоге это приведет к неаккуратному визуальному виду. Также обращайте внимание на текст или элементы, которые являются, скажем так, бесхозными, располагающимися на своих местах или занимающими не очень удобное и логичное для юзабилити место. Проектировать обычно лучше в браузере, а не в Photoshop, поскольку вы получаете картинку, которая максимально приближена к реальности.
Как правило, веб-страница должна располагаться по центру и в пределах ширины браузера, но не быть смещенной вправо или влево и оставлять сбоку пустое место, как на примере ниже.
Пример: http://www.tsb.co.uk/how-were-different/
И да, белый фон может очень хорошо дополнять визуальный образ сайта, но только в том случае, если его правильно использовать.
Студенты зачастую делают текст слишком маленьким. Стандартный HTML размер шрифта пришел к нам еще с тех времен, когда сайтами пользовались люди с разрешением мониторов 800×600, но в эру развитых мобильных технологи и мониторов высокого разрешения мы можем думать о большем. Такие дизайнеры, как Джеффри Зельдмен показали, что большие размеры шрифта могут хорошо работать для оформления абзацев.
Не забудьте контролировать то, как ваш сайт выглядит на разных разрешениях и устройствах, используйте CSS для адаптации в случае необходимости.
Текст заголовков должен быть больше, чем текст абзаца. Убедитесь в том, что вы задаете достаточный межстрочный интервал. В редакторах он так и называется, а в CSS именуется, как «высота строки» (ориг. – line-height). Стандартные настройки располагают строки довольно близко друг к другу. Это может привести к плохой читаемости текста. Читатель попросту будет теряться по мере прочтения страницы. Попробуйте задать значение, которое на 50% больше, чем используемый размер шрифта, например, 36 пикселей для текста размером 24 пикселя.
Будьте внимательней с «белым пространством» вокруг текста. По сути это всего лишь белое пространство страницы (или не белое, зависит от фонового цвета), которое помогает структурировать контент, делит его на блоки и как вывод, делает его более легким для восприятия. Следите за шириной текстовых колонок. В строке не должно быть слишком много слов, иначе это приведет к тому, что читатель потеряется, пока прочитает ее до конца. Как правило, наиболее оптимальным вариантом является использование десяти слов в строке. По той же причине возникают сложности восприятия плохо форматированного текста – старайтесь использовать выравнивание по всей ширине.
Постарайтесь ограничивать себя двумя или тремя шрифтами, и избегайте использования изображения в качестве текста. Широкий выбор веб-шрифтов могут дать такие сервисы, как Google Fonts или Webfront. Следите за контрастом между цветом текста и цветом фона. Как правило, наиболее приемлемым вариантом является использование темного текста на светлом фоне. Светлый текст на темном фоне также может рассматриваться в качестве мужского или же холодного варианта, но подобное может привести к потере привлекательности продукта. Хорошим помощником для выбора подходящей цветовой гаммы может стать Adobe Kuler. В целом же, избегайте высокой контрастности между текстом и фоном, это может привести к смешиваю букв с фоном.
Пример: http://www.tsb.co.uk/how-were-different/
Наиболее распространенной ошибкой среди студентов является использование слишком маленьких изображений на странице. В таком случае они просто теряют эффект своего воздействия. Изображения на полную ширину браузера (например, как на сайте http://teamtreehouse.com) выглядят более впечатляюще и создают яркое ощущение того, что вы смотрите некий глянцевый печатный журнал.
Несомненно, вам нужно убедиться в том, что используемое изображение соответствует тому информационному сообщению, которое доносит до вашей аудитории сайт. И не забудьте проверить не нарушаете ли вы чьи-то авторские права, используя данное изображение.
Разнообразные фотостоки предлагают обширный запас изображений. Если вы пользуетесь своими собственными фотографиями, то убедитесь, что в ней хорошо настроена цветовая гамма и контрастность. После этого обратите внимание на то, выглядит ли фотография так же естественно, четко и привлекающе.
Пример того, как некачественные изображения влияют на визуальное восприятие сайта: http://www.iksmarket.com.ua/
Самой распространенной проблемой является некачественное вырезание визуального элемента. Это приводит к тому, что элемент выглядит неаккуратно, имеется зазубренные края или скошенные кромки в каких-то местах. Для предотвращения подобного используйте инструмент «Перо» в Photoshop или же «Полигональное лассо» и «Лупу» с сильным увеличением. Еще одной частой проблемой являются артефакты, которые появляются на изображениях в формате JPEG. Использование SVG или формата PNG с высоким разрешением и качеством решит эту проблемы, и ваши иконки и логотипы будут смотреться аккуратно и привлекательно.
Убедитесь, что ваша работа имеет разрешение не большее, чем ее изначальное. В противном случае она будет выглядеть размытой и отталкивать.
Профессиональный дизайнер никогда сознательно не оставит свою работу незаконченной или же с ошибками на уже запущенном ресурсе. Крупные студии и агентства обычно имеют свой собственный отдел контроля качества (QA – quality assurance) – команду людей, которые занимаются поиском ошибок. Если же вы новичок, то друг вам в помощь, пусть он посмотрит на ваш дизайн и сделает замечания. Удивительно, что может заметить вторая пара глаз!
Проверьте сайт на несуществующие страницы, «сломанные» изображения, глюки в макетах и на стили, которые по какой-то причине не отображаются. Орфографию также нельзя оставлять без проверки.
Внимание к деталям является ключевым фактором.
Если вы так и не смогли заставить что-то работать, то уберите это, удалите! Если у вас на сайте будут очевидные ошибки, то пользователи будут видеть только их и ничего больше, они проигнорируют все остальное.
И, конечно, не делайте таких банальных и глупых ошибок, как оставление страницы без названия или же случайно забытый текст, который использовался для заполнения во время разработки.
Надеемся, что этот текст поможет вам избежать ошибок начинающих дизайнеров в повседневной работе, а самих же юниоров этой сферы научит чему-то новому и полезному.
Веб-дизайн призван решать бизнес-задачи. При этом всегда есть определённые ограничения, которые следует учитывать: по загружаемому контенту, его обновлению и отображению на разных устройствах, по работе с базами данных и внешними системами и не только.
Однако не все дизайнеры думают о том, как их макеты будут функционировать на сайте или в приложении. Руководитель студии дизайна и разработки сайтов и сервисов Method Zero Антон Шакиров рассказывает о самых распространённых ошибках, которые последние пару лет замечал на дизайн-площадках и сайтах, и делится принципами, которые помогут их избежать.
Дизайнеры, как правило, создают макеты для трёх разрешений экранов:
- под компьютеры и ноутбуки: ширина макетов — 1 920, 1 440 или 1 360 пикселей, обычно для сайтов берут только одно из этих разрешений;
- под планшеты: ширина макетов — 767 пикселей;
- под смартфоны: ширина макетов — 375 пикселей.
Дизайн хорошо смотрится, первый экран красиво передаёт нужную информацию и вовлекает скроллить дальше. При этом часто забывают, что на реальных устройствах первый экран будет меньше по высоте из-за окна браузера, поля с адресом сайта и панели закладок. Кнопка с призывом к действию и вовсе может уехать за пределы экрана. Всё это ломает дизайн.
Нужно помнить и про использование графики. В примере ниже фоновая иллюстрация растягивается по ширине сайта, при этом нижняя часть круга обрезается и выходит за пределы первого экрана, где её изначально располагал дизайнер:
Исправить этот недочёт можно так: увеличить отступы справа и слева от картинки до краёв экрана или поместить круги в отдельные элементы и работать с ними уже там.
Случается и обратная ситуация, когда специалист не адаптирует дизайн под ультраширокие мониторы 3 440 x 1 440 и не объясняет разработчикам, как должен вести себя сайт при изменении ширины экрана. Решить этот вопрос поможет:
- Резиновая вёрстка, когда весь сайт пропорционально растягивается по ширине экрана. Но следует учитывать, что контент может слишком укрупниться и будет видна только треть того, что должно было помещаться в рамках одного экрана.
- Добавление полей справа и слева. Здесь стоит помнить про закреплённые на экране элементы и про фоновые видео и изображения, которые обрезаются по краям экрана на стандартных экранах.
Пример резиновой вёрстки: контент остаётся в рамках одного экрана, благодаря правильному позиционированию всех элементов на странице ↓
В примере ниже разные части дизайна закреплены с левой и с правой стороны. Если открыть этот сайт на ультрашироком мониторе, посередине возникает дыра:
Для макетов для iPhone. При дизайне кнопок, закреплённых снизу на мобильном устройстве, часто забывают про индикатор «Домой» (Home indicator) — чёрную полоску снизу, область под которой не кликабельна. Кнопки следует приподнимать выше этого индикатора или ставить больше внутренних отступов под ней, но не прижимать её к низу. Это также немного повлияет на высоту элементов в рамках одного экрана сайта или приложения.
Не стоит забывать готовить и передавать разработчикам все видео и изображения в большем размере для сохранения их качества на мониторах 4K и 5K. Если изображение на весь экран, готовим его под всю ширину монитора, например, 4K — 3 440 px. Если на пол-экрана — 1 720 соответственно. Это важно, потому что часто разработчики экспортируют картинки напрямую из макетов, где эти картинки делают в небольшом разрешении. Экспорт изображений в увеличенных размерах не поможет в этом случае. Исключение составляют только векторные изображения в svg-формате, которые могут бесконечно увеличиваться и уменьшаться без потери качества.
Можно не рисовать отдельно макеты под планшет, если дизайнер делает проект, который:
- нужно оперативно запустить;
- не содержит сложных таблиц и сеток с переносами контента на следующие строки или с его скрытием на некоторых разрешениях экранов.
Согласно данным SimilarWeb и по личному опыту, на планшеты в среднем приходится 1–2% всего трафика, поэтому нецелесообразно тратить четверть проектного времени на эти макеты. Правда, если есть нестандартный блок со сложной сеткой, можно отдельно нарисовать планшетную версию только этой части. В остальных случаях опытные разработчики сами адаптируют десктопную версию макета под планшет.
Под динамическими элементами страниц подразумеваю всё, что может менять своё состояние — вид, содержание — в зависимости от положения курсора мыши, факта нажатия или перетаскивания элементов, фокуса, времени, скролла страниц, состояния каких-либо данных на странице.
На этапе дизайна динамических элементов нужно представлять, объяснять и рисовать, как этот элемент будет вести себя дальше или как он будет реагировать на определённые события.
Чаще всего забывают нарисовать и продумать состояния ховеров, когда на элемент наводится курсор, состояния нажатия или перетаскивания, состояния фокуса у кнопок, ссылок, форм, кликабельных элементов. Все эти состояния помогают пользователям понять, что на этот элемент можно нажимать, что в фокусе этот объект или что в поле есть ошибки.
При работе с формами — помимо состояний ошибок и невалидности полей — стоит помнить о сообщениях об успешной отправке формы. Так пользователь поймёт, что всё хорошо и его данные отправлены.
Некоторые элементы могут быть динамичными сами по себе. Например, если на сайте есть таймер обратного отсчёта, секундомер, экраны загрузки сайта, сообщения о загрузке данных. Нужно не только нарисовать то, как эти элементы выглядят, но и что с ними происходит в процессе и что будет после завершения действия.
Например, если говорить про таймер обратного отсчёта, нужно учитывать изменение цифр и изменение ширины всего текста из-за разной ширины отдельных цифр — если это не моноширинный шрифт, где каждый символ всегда занимает одинаковую ширину, что позволяет ориентироваться только на количество символов. Для этого делаем дизайн других состояний или описываем для разработчиков, как оно должно изменяться. А также готовим макеты или анимации того, что будет отображаться по истечении срока.
Если на сайте будут размещаться вакансии, новости, события, команды, магазины и другие данные, которые будут подгружаться из внешних систем и активно обновляться, следует заранее узнать у заказчика:
- как эти данные хранятся,
- какая есть или будет информация,
- как и кем данные будут актуализироваться,
- какие сложности могут возникнуть.
Это позволит определить полный набор данных для работы — или понять новые ограничения по дизайну и вёрстке.
Например, при проектировании HR-портала компании мы не можем вслепую задизайнить страницу поиска вакансий и каждую вакансию отдельно. Сперва нам надо узнать, какая информация по вакансиям будет доступна. Так, если в вакансиях нет информации о метро, мы и не должны рисовать это в макетах. Если в поле «Регион» хотим разделить Москву и Московскую область, узнаём у клиента, есть ли такая информация в принципе, а у разработчиков — возможно ли так сделать с технической точки зрения.
Нужно выяснить обязательность полей или целых разделов. Если мы делаем дизайн вакансий, может ли поле с графиком работы или со станцией метро полностью отсутствовать? Если делаем разделы со статьями, может ли какой-то раздел оказаться пустым? Может ли не быть ближайших событий? Может ли клиент удалить все новости?
С помощью таких вопросов дизайнер выявляет дополнительный набор состояний, который нужно задизайнить и передать разработчикам.
Другая ситуация — при наличии данных они могут не успеть подгрузиться с сервера при обращении к соответствующей странице. Если дизайнер знает, что эти данные будут грузиться извне, то лучше заранее предусмотреть сообщения о том, что всё в порядке и контент загружается.
Стоит помнить и про ограничения на контент, которые стоит задать для отдельных полей или частей контента. Ограничение может быть на длину текста, количество элементов в списке, количество фотографий.
Например, в слайдере с отзывами один из отзывов может быть сильно больше других. Это приведёт к тому, что под небольшими отзывами снизу будут дырки, так как нижестоящий контент отодвинется отзывом с самым длинным текстом:
Лучше заранее продумать в дизайне варианты поведения при таких сценариях или обговорить с клиентом и разработчиками введение ограничений на количество символов в каждом отзыве.
- Получите опыт 4 ведущих дизайн-студий и создадите 7 проектов для своего портфолио
- Научитесь создавать сайты под ключ, оформлять дизайн-проекты и презентовать их заказчику
- Сможете искать работу и проходить собеседования уже в середине обучения
Некоторые части сайта подлежат частым правкам: портфолио с кейсами, баннер с призывом к действию, блок с информацией о следующем событии, стоимость товаров или услуг и другое.
На этапе дизайна нужно сразу принимать в расчёт ограничения клиента по времени и деньгам, которые он готов тратить на обновления сайта.
Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?
Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.
Дизайнер должен быть уверен, что клиент сможет получить фотографии в заложенной стилистике под разные материалы или сделать предварительную постобработку и цветокоррекцию фотографий.
Дизайнеры знают про наличие в HTML заголовков H1–H6 и используют их при наименовании стилей. Однако при создании новых наборов стилей под мобильную версию сайта из-за удобства в дизайне и не знания того, что это делать нельзя, могут менять тип заголовка и стиля на элементах относительно десктопной версии. Был заголовок H1, а в мобильной версии у того же элемента стал H2. Был дополнительный стиль small text — стал просто text.
Если дизайнер создаёт с помощью HTML-тегов элемент H1, то он и должен оставаться H1 в мобильной версии. Иначе при разработке придётся делать дублирование всего элемента и создавать костыли с помощью CSS-классов — рабочее, но некрасивое и неэффективное решение.
Если нужно, чтобы какой-то элемент был по стилю таким же, как и элемент с другим стилем, стоит их сделать одинаковыми на определённых разрешениях экранов. Но сам элемент должен оставаться с таким же типом класса, как и на макетах под другие разрешения экранов.
Один и тот же элемент не должен менять свой заголовок между различными разрешениями экранов. Если в десктопной версии (верхнее изображение) заголовок соответствует стилю H4, то и в мобильной версии этот заголовок должен соответствовать стилю H4, даже если он эквивалентен мобильному H3
В этом вопросе дизайнерам и разработчикам сильно помогает создание UI Kit, где как минимум будут указаны все стили шрифтов, цветов, состояния элементов. Это позволяет проверить правильность указания всех стилей элементам и неизменность всего набора стилей между разными разрешениями экранов.
Здесь речь идёт скорее про уменьшение вероятных ошибок на готовом сайте и про сильную помощь разработчикам и ускорение их работы, а не про прямую ошибку дизайнеров. Но иногда это и про недостаточный объём того, что нужно сделать специалисту.
Все дизайнеры знают про favicon — маленькую картинку, которая отображается на вкладке сайта в браузере. Но не все создают и передают разработчикам webclip — картинку 256 x 256, которая видна в панели закладок Safari, — и opengraph-изображения для сайта и для отдельных страниц — изображение с рекомендуемым разрешением 1 200 x 630, которое видим при вставке в соцсетях ссылки на сайт.
Если фоновые изображения и другие элементы всегда зарезаются краями экрана или блоками в одном и том же месте, стоит сразу кадрировать эти изображения в макете. Часто дизайнеры отодвигают фоновую картинку за края экрана и включают у элементов обрезание контента за пределами макета страницы. Но когда разработчики будут скачивать такую картинку для экспорта на сайт, она выгрузится целиком. Так изображение попадёт на сайт в большем, чем нужно, размере, что будет замедлять загрузку и добавит разработчикам хлопот с выравниваниями.
Ещё одна частая ошибка — делать разные иконки в разных по размеру фреймах. Часто можно заверстать и так, но для этого разработчикам нужно под каждую иконку задавать свойства размеров, отступов. Если потребуется заменить иконку на другую, придётся менять размеры и отступы. Это приносит много проблем разработчикам и тормозит разработку.
Все иконки в дизайне должны быть сделаны внутри одинаковых по размеру областей — фреймов, внутри которых они уже выравниваются и масштабируются как нужно. Таким образом, все иконки вне зависимости от их реального размера будут занимать одинаковые области этих самых фреймов.
Иконки должны располагаться внутри одинаковых квадратных или прямоугольных областей, внутри которых они уже индивидуально выравниваются и масштабируются.
Вот примеры правильной работы с иконками:
На этапе разработки показывать все идеи и макеты разработчикам. Они скажут о возможных проблемах, которые всплывут при разработке.
Всегда просить обратную связь от разработчиков: что им не хватило при передаче дизайна. Через несколько проектов сформируется понимание, на что обращать внимание и что ещё нужно учесть и подготовить в дизайне.
Начать самостоятельно разрабатывать несложные сайты на технологиях no-code. Рекомендую Tilda, Readymag и WebFlow. После нескольких собранных сайтов станет ясно, с чем возникают сложности, где и что работает не так.
Самостоятельно проводить тестирование сайтов на различных устройствах. Такие сервисы, как BrowserStack, позволяют открыть сайт под различными ОС, браузерами и телефонами. Самостоятельно подвигать окно браузера, взять другой компьютер и посмотреть, как сайт себя ведёт в браузере Safari, где чаще возникают проблемы.
Мыслить критически. Советую моделировать все возможные ситуации и показывать в дизайне, как это всё должно работать. Задавайтесь вопросом «а что, если». А что, если клиент введёт описание в 2 раза длиннее, чем было в макетах? А что, если не будет картинки под новость? Продумывайте все ситуации, которые могут случиться, и любые возможные действия пользователей и клиента.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.