Нарисовать дизайн-макет — насколько сложно и долго?

Блог

Приветствую читателей статьи!

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

И так, как происходит создание дизайна сайта?

Почему дизайн-макет, а не просто дизайн? Т.к. дизайн сайта — это не просто картинка, а еще и функциональная составляющая сайта, его называют именно дизайн-макет.

  1. Прототип сайта.

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

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

Вот например, типичный прототип сайта:

Нарисовать дизайн-макет - насколько сложно и долго?

Недостатки:

  • Посмотрите, на прототипе, несколько сотен раз вы увидите слово «Текст». Вопрос — кто знает сколько там будет текста в конечном варианте?
  • Блоки с ссылками. Сколько будет ссылок в итоговом варианте?
  • Блок приемуществ. Кто ответит за то, что текст преимущества может не поместится в одну строку?
  • Размер шрифта. Я очень сомневаюсь в том, что кегль был подобран с соблюдением пропорций. Если изображения будут в такой пропорции с текстом, то дизайн не назовешь гармоничным.

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

А вот, более удачный вариант прототипа сайта.

Нарисовать дизайн-макет - насколько сложно и долго?

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

2. Цветовая схема.

Подбирать цвета для сайта так не нужно:

-мне нравится зеленый, красный и фиолетовый, их и будем использовать.

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

Цветовая схема подбирается согласно сочетаемости цветов. В самом простом варианте можно пользоваться специальным кругом, который любезно для нас предоставил, какой-то, наверняка известный человек:

Нарисовать дизайн-макет - насколько сложно и долго?

Мы сделали прототип и подобрали цветовую схему для сайта.

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

Я приведу несколько общих рекомендаций по работе с дизайн-макетом сайта, которыми пользуюсь сам:

  1. Аккуратнее работайте с  скруглением углов элементов. Например, кнопок, полей формы. Если нужен более строгий дизайн, используйте острые углы. Если используете скругленные углы, соблюдайте их в тех элементах, которые этого «просят».
  2. Не нужно постоянно использовать тени шрифтов или блоков. Только при необходимости. На мой взгляд, они уже давно устарели.
  3. Ссылки которые уводят посетителя на другую страницу, должны быть подчеркнуты, если ссылка не уводит посетителя с страницы, одна должна отличаться, лучше, если это будет подчеркивание пунктиром.
  4. Интерактивные элементы должны быть интерактивными, т.е. при наведении курсора их состояние должно меняться. Не заставляйте посетителей предполагать о возможности клика.
  5. Формы лучше всегда помещать в блок, который можно выделить цветом. Если конечно вы хотите, что бы формой кто-то воспользовался.
  6. Готовый макет дизайна сайта рассматривайте с разного расстояния. Я не шучу. Например, отойдя на два метра от монитора, вы сможете увидеть цветовые пятна, которые делают акцент на какой-то блок. Так вы поймете, соответствует общая концепция задумке или нет.

На этом все друзья! Заказывайте хороший дизайн — любите свою целевую аудиторию и не прячьте информацию на сайте.

Удачи вам!

Если нужен дизайн сайта

Отправляйте предварительный заказ на расчет стоимости дизайн-макета сайта для вашей компании, с помощью этой формы.

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