Как описать дизайн сайта

woman 3083402 1920 Советы на день
Содержание
  1. Дизайн сайта: какие процессы происходят в голове и на мониторе у веб-дизайнера, когда он «рисует» сайт
  2. Анализ целевой аудитории (ЦА)
  3. Общий стиль и композиция
  4. Какова цель вашего дизайна?
  5. Какие эмоции вы хотите передать через дизайн?
  6. Какие цвета нам доступны?
  7. Типографика
  8. Какой шрифт подобрать для сайта?
  9. Сколько шрифтов использовать?
  10. Какие цвета подобрать для текста?
  11. Как создать выигрышное расположение текста?
  12. Заключение
  13. Дизайн сайта: понятия “красиво” не существует
  14. Красота – понятие размытое
  15. Что важно для дизайна
  16. 1. Стандарты
  17. 2. Структура и расположение
  18. Как сделать дизайн сайта
  19. Этап 0. Шаблоны или уникальность
  20. Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен
  21. дизайнер группы разработки карты рассрочки «Совесть» (QIWI)
  22. Брифинг
  23. Дизайн сайта определяет его цель
  24. Сайт-визитка (landing page)
  25. Корпоративный сайт
  26. Сайт-витрина
  27. Интернет-магазин
  28. Портал
  29. Зачем изучать конкурентов и на что обращать внимание?
  30. Mobile First или не First?

Дизайн сайта: какие процессы происходят в голове и на мониторе у веб-дизайнера, когда он «рисует» сайт

Создание дизайна сайта — один из самых трудоемких процессов при его разработке. Кто бы что ни говорил, дизайн играет одну из ведущих ролей. Когда мы заходим на сайт, первое, что мы видим, — это картинку, то есть дизайн. Срабатывает визуальное восприятие, и от того, каким оно будет, зависит и наше пользовательское отношение. Причем так происходит везде.

Например, вам захотелось яблок, и вы пошли в магазин. Увидев разнообразие сортов, вы в замешательстве и не можете сделать выбор. Как понять, что яблоко вкусное и спелое? Нужно его попробовать! Перепробовать все сорта в магазине вам вряд ли удастся, поэтому остается определять только на глаз. Если вам не нравятся красные яблоки, вы возьмете желтые, если вам не нужны мелкие, вы возьмете крупные. Потом уже вы решите, что с ними сделать: испечь шарлотку, приготовить сок или, наконец, просто съесть.

Дизайн помогает делать людей лояльнее. Все мы хотим питаться вкусной и здоровой едой, носить красивую одежду и жить в роскошных домах. Не так ли? =) А еще мы хотим, чтобы все сайты тоже были красивыми, а еще лучше красивыми и удобными для пользователей. Поэтому при разработке дизайна сайта, в первую очередь стоит задуматься, как ни странно, не о дизайне. Каждый уважающий себя веб-дизайнер, должен быть и SEO-аналитиком, и UI/UX-разработчиком, и верстальщиком.

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

Анализ целевой аудитории (ЦА)

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

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

Общий стиль и композиция

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

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

Следующее правило грамотной композиции — подчиненность. Любой элемент на сайте должен быть обоснован. Почему мы выбрали данный цвет? Зачем мы сделали шрифт такого размера? Для чего мы добавили вон ту маленькую черточку? И так далее. На все эти вопросы вы должны дать точный и ясный ответ.

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

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

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

Если кнопка на сайте для главной услуги синяя, то к дополнительным услугам мы делаем кнопки менее контрастными. Например, можно оставить синей обводку, но заливку у кнопки сделать белой:

design process 03

С заголовками происходит практически то же самое. Для более значимых мы применяем шрифт крупнее (например, для УТП), остальные подзаголовки делаем меньше:

design process 04

Более подробно о типографике мы поговорим ниже.

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

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

Прежде чем подбирать цвета, нужно задать себе несколько вопросов.

Какова цель вашего дизайна?

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

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

Какие эмоции вы хотите передать через дизайн?

У каждого человека ассоциации с цветом разные. Каждый воспринимает все по-своему. Существуют группы цветов, которые воздействуют на пользователя одинаково практически всегда.

Красный — смелость, опасность.

Зеленый — цвет жизни, умиротворенности.

Синий — свежесть, легкость.

Желтый — энергия, радость.

Белый — доброта, чистота.

Черный — стабильность, уверенность.

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

Какие цвета нам доступны?

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

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

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

Вспомогательный тон — один из оттенков главного фона. Помогает визуально разметить другие блоки на странице. Вспомогательный цвет показывает отличие второстепенных действий от основных. Его главная задача отделить основной цвет от других.

Вот два полезных ресурса, которые помогут вам с подбором цветов для сайта:

Также можете воспользоваться цветовым кругом и подбирать цвета по схемам:

Типографика

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

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

Несмотря на то, что это просто текст, он является неотъемлемым элементом дизайна. Сейчас шрифты вышли на передний план, заменяя собой графический дизайн. Существует несколько типов шрифтов:

Шрифты с засечками (Serif) — часто используются для сайтов, связанных с историей, модой, архитектурой. Встречаются также на новостных порталах, так как имитируют газетный шрифт.

design process 08

Шрифты без засечек (Sans-Serif) смело можно использовать на сайтах с различной тематикой.

design process 09

Акцидентные шрифты — графичные шрифты, почти всегда используются только для заголовков.

design process 10

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

design process 11

Шрифты-символы — шрифты, где буквы являются иконками.

design process 12

У каждого шрифта есть свое семейство (Font Family) или гарнитура. Гарнитура — совокупность шрифтов, которые объединены определенным стилем и имеют различное начертание.

design process 13

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

Когда на странице появляется блок с текстом, для него задается интерлиньяж — расстояние между строками текста. Иногда им пренебрегают, из-за чего создается ощущение сжатости текста, который сложно прочитать.

Далее отступим от терминов и перейдем к вопросам, которые нас всех так сильно волнуют.

Какой шрифт подобрать для сайта?

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

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

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

Сколько шрифтов использовать?

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

Какие цвета подобрать для текста?

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

Как создать выигрышное расположение текста?

В типографике существует правило: внутреннее ≤ внешнее. Расстояние между словами должно быть больше, чем расстояние между буквами. Расстояние между строками должно быть больше, чем между словами. Расстояние между абзацами должно быть больше, чем расстояние между строками. Все гениально просто =). Смотрите пример ниже:

design process 20

design process 21

Заключение

Создание дизайна — всегда очень сложная и ответственная задача. Даже если очень хорошо знать всю вышеизложенную информацию, не всегда удастся попасть в цель. Все люди разные, и всем не угодишь =). Дизайн — абсолютно субъективная вещь. Если бы все было так просто, мы бы уже давно забыли о дизайне и пользовались бы общедоступным сводом законов и правил.

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

Источник

Дизайн сайта: понятия “красиво” не существует

Но и не всё так просто, как кажется. Поэтому разберём подробнее тему визуальной разработки landing page.

Красота – понятие размытое

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

А потому что нет такого понятия, как “Красиво”, есть понятие “Мне нравится” и “Стандарты”. Получается, что с точностью нельзя быть уверенным, каким должен быть дизайн сайта. Красивый он у Вас или страшный, как моя жизнь?

dizajn sajta krasiviy ili net О ужас! И как теперь определить?!

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

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

Возвращаясь к нашим баранам, сайт должен соответствовать желанию целевой аудитории.

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

Что важно для дизайна

Владельцы не очень приятных глазу сайтов сейчас выдохнули, подумав, что можно сэкономить десятки тысяч на редизайне. И зря так сделали. Так как им всё равно нужно понять, что разработать дизайн сайта – это не только подобрать цвета.

Ниже представлены основы, которые очень важны, если Вы создаете новый дизайн проект или же думаете, как изменить дизайн сайта.

1. Стандарты

А вот понятие “Стандарты” очень даже измеримо, и это касается в том числе красоты мужчин и женщин. Нельзя сказать “страшный мужчина”, а можно сказать “не стандарт”. То есть рост меньше 180, фигура не спортивная, улыбка на троечку и т.д.

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

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

К тому же я уверен, не Вы собираетесь самостоятельно делать продающий дизайн сайта для своей компании, так как Вы всё-таки владелец. И Ваша основная задача состоит в том, чтобы быть уверенным, что Ваш подрядчик или дизайнер понимает базовые знания и элементы дизайна. Для теста можете использовать три вопроса (правильные ответы тоже на них написал):

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

2. Структура и расположение

Вы меня извините, но я прям из кожи рвусь, когда наш потенциальный клиент говорит, что он отдаст разработку правильной структуры лендинга – дизайнеру. Я в этот момент “кричу и взрываюсь” (единственный случай, когда я это делаю).

Важно. Нужно чётко понимать, дизайнер – не маркетолог. Это разные люди, с разным образованием, с разными мозгами и разными взглядами на жизнь.

Маркетинг – это анализ и цифры. А дизайн – это творчество и фантазия (+ капелька стандартов).

Поэтому, если Вы решили самостоятельно сделать лендинг, то, пожалуйста, не отдавайте полностью это дело дизайнеру. Сделайте это лучше сами. И да, дизайнер не виноват в своём желании заработать больше денег, соглашаясь выполнить эту задачу по Вашей просьбе.

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

Прислушаться, это не значит отдать. Это значить сделать самому и получить обратную связь.

Как сделать дизайн сайта

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

Этап 0. Шаблоны или уникальность

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

Конечно, это не значит, что все Вас хотят обмануть. Но желательно этот момент определить для себя и поднять его в разговоре со специалистом.

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

Поэтому личное моё мнение, в наш век актуально использовать только уникальный шаблон или полные права на шаблон, который кроме Вас никто больше не может использовать.

Источник

Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен

Gorevanova sqared

дизайнер группы разработки карты рассрочки «Совесть» (QIWI)

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

Гайд состоит из трёх частей. Эта посвящена сбору необходимой информации, следующая рассказывает о разработке визуальной концепции сайта, а в заключительной собраны инструменты для проектирования макета.

«Это бессмысленно», — сказал разум.
«Это нелепо», — заметил опыт.
«Это бесполезно», — отрезал здравый смысл.
«О, вот так красиво!» — обрадовался заказчик.

Брифинг

В процессе разработки сайта оформление — не самая первоочерёдная задача. Сначала необходимо провести бриф с заказчиком и определить основную цель. Это, как минимум, защитит от возможных переделок, когда сверстал уже половину сайта, а клиент говорит, что не это имел в виду (хотя от мелких правок всё равно никуда не деться). Но дизайн тесно переплетается с концепцией сайта и его функциональным направлением. Поэтому прежде, чем садиться за разработку макетов и сочетание шрифтов, рекомендую узнать детально:

Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. 🙂 Но не стоит паниковать, разделите слона на части и действуйте пошагово.

Дизайн сайта определяет его цель

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

Ниже рассмотрим наиболее распространённые типы сайтов.

Сайт-визитка (landing page)

Одностраничник, который обычно имеет одно целевое действие — подать заявку/заказать звонок. Самый простой в техническом исполнении, содержит всякие описания, преимущества, партнёров и пр. Здесь есть где разгуляться дизайнеру — одностраничник должен быть красивым, запоминающимся и с wow-эффектом, чтобы посетитель оставил-таки заявку.

Пример лендинга программы лояльности «Совести»:

designer guide illustration 1

Корпоративный сайт

Создаётся компаниями, чтобы рассказать клиентам о себе — кто мы такие, чем занимаемся, наша миссия, контакты, структура, портфолио и прочее. Может быть нужен

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

Пример — сайт карты рассрочки «Совесть» включает в себя основную информацию о продукте, блог, а также сервисную часть с личным кабинетом, графиком платежей и пополнением карты.

designer guide illustration 2

Сайт-витрина

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

Пример — сайт компании Mary Kay, которая занимается сетевой продажей косметики. Там есть большой и красивый каталог товаров, но купить можно только через консультанта.

designer guide illustration 3

Интернет-магазин

Это витрина с корзиной и возможностью онлайн-оплаты товаров. Имеет более сервисный характер, чем предыдущие (не только информирование). Здесь UX и юзабилити играют более важную роль, поскольку пользователь остаётся наедине с сайтом и решает с помощью него свою задачу, тогда как на витрине и одностраничнике покупку могут докрутить специалисты колл-центра.

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

Пример — Aliexpress, сайт интернет-магазина во всей красе.

designer guide illustration 4

Портал

Сайт, который объединяет разные информационные и сервисные функции — почту, новости, блог, вакансии, форумы и др. Пример — Яндекс, Хабр, даже Вконтакте тоже можно назвать порталом.

Как думаете, насколько сложно такое сделать? 🙂 Даже если это будет не настолько крупный портал, для его создания нужно не только сделать продуманные с точки зрения UI и UX макеты, но и иметь немалые технические мощности, ведь предполагается, что посещаемость у порталов высокая.

Пример — сайт Мэра Москвы, там и новости, и статьи, и услуги.

designer guide illustration 5

Зачем изучать конкурентов и на что обращать внимание?

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

Есть как минимум три причины посмотреть сайты конкурентов:

Mobile First или не First?

Откуда начать — с веба или с мобилки? Дизайн сайта нередко сегодня начинается не с web-версии, а с мобильной. Люди всё больше и больше онлайн-времени проводят в мобильных устройствах, а не за широкими экранами. Из-за этого больше внимания стоит уделять мобильной версии, поскольку с большей вероятностью пользователи будут взаимодействовать именно с ней. Рекомендую начинать дизайн с мобильной версии, а потом уже адаптировать элементы под более широкие экраны — так вы избежите ситуации, когда красивый и изысканный блок на широком экране не понятно, как адаптировать под мобилу (которая важнее).

Но, опять же, подходите к этому вопросу осознанно: проанализируйте, где больше сидит ваша целевая аудитория? В каких условиях пользователь вероятнее будет решать свою задачу при помощи вашего сайта — сидя дома или на работе за ноутбуком или перебегая между станциями метро с телефоном и пакетами наперевес?

Источник

Оцените статью
Добавить комментарий

Adblock
detector