Дизайн-проект сайта это разработка и создание дизайна для сайта. Действия позволят выделить сайт в лучшую сторону. Рассмотрим создание фона, цвета, оформления. Разработаем привлекательный дизайн, определим составляющие и ошибки. Поработаем над выбором цветов в режиме онлайн. Ознакомимся с рекомендациями.
Содержание
Дизайн сайта можно создать самому
Дизайн проект сайта возможно создать самому. Начинаем работу с поиска актуальной информации, анализа.
Наша задача сделать красиво, удобно и просто для посетителя. Используем визуальный вариант — создаём страницу и анализируем. Работаем в бесплатном конструкторе или
«Рисунки от Google»
Визуальный макет позволит разработку дизайна сайта сделать качественно. Применяем на сайте полученные данные и создаём «своё лицо».
Оно может быть выражено и состоять:
- из оригинального фона, цвета и их сочетаний
- это могут быть свои картинки
- из авторского текста, из своих иконок, значков на страницах.
Вариант оформления страницы.
Дизайн текста
Дизайн текста складывается из шрифта и цвета. Элементы следует подобрать. Правила позволят избежать ошибок:
- нельзя использовать много разных шрифтов: два — это норма
- выбранные шрифты должны хорошо читаться — они должны быть крупными, чёткими, хорошо смотреться на мониторе
- шрифты имеют свой характер, дизайн — они не должны конфликтовать с брендом. Не рекомендуется использовать шрифты с засечками, например Times New Roman
- ширина строки важна. Тема Root для WordPress задаёт длину строки
Цвета для текста
Цвета для текста подбираем, придерживаемся правилам:
- текст не должен сливаться с фоном, контраст необходим
- нельзя печатать чёрным цветом на тёмном фоне или белым на бледном
- нельзя применять реверсивные шрифты. Практика показывает, что в 90% белые буквы на чёрном фоне — неудачное решение
- применение черного текста на белом фоне — в 70 процентах дают положительный результат. В книжной продукции чёрные буквы на белой бумаге — беспроигрышный вариант. Эту версию используйте осторожно. Лучше делать светлый фон, а не белый.
- глаза пользователя устают при контрастном варианте, ярко настроенный монитор дополняет негативный эффект. Многие пользователи имеют ослабленное зрение. Цвет шрифта желательно делать не чёрным, а тёмно-серым, тёмно-синим — уменьшим контрастность.
Не забываем о принятых правилах:
- используем серый шрифт в площади формы с просьбой об их заполнении
- красный цвет для предупреждений и ошибок
- синий для активных ссылок. Пользователи знают эти правила, не будим их путать.
Тема Root делает это автоматически, применяем её и забываем об этих правилах. Работа с шрифтами, пространством, цветами, их характеристиками определяет 90% успеха.
Дизайн должен усиливать содержание, другого пути нет. На красоту ставить нельзя. Только интересный контент, статьи — заставляют посетителей возвращаться на сайт, читать, загружать, подписываться. Дизайн — это среда, в которой находиться посетитель, если она хороша, красива — то и пользователю комфортно. Контент превыше всего!
Подбор цвета для сайта
Подбор цветов для дизайна сайта — важный шаг. Цвет играет важную роль в ощущениях, в восприятии окружающего мира, в передаче эмоций. Цветовое решение может создать у посетителя позитивное или негативное восприятие. Цвет ассоциируется с определёнными чувствами. Рассмотрим информацию об цветах:
коричневый – тепло и уют, в то же время скука, грязь. Многим кажется скучным и устаревшим
черный – сила, изысканность, власть. Элегантный и таинственный. Иногда траур, ночь
синий — доверие, надежность, многим нравиться. Цвет согласованности, мелодичности, вселенной, Земного шара
серый – разумность, стабильность, воздержанность, холодность, отсутствие эмоций
красный — возбуждение, любовная страсть, тревога, счастье, срочность и экстренность, притягивает взгляды
розовый – молодость, романтичность, прелесть, шарм, конфетки и сладкое, детский, чудный
сиреневый – изящество, нарядность, великолепие, баловство, шик, мудрость, редкий
оранжевый – энергичность, жизнерадостность, необычный и необыкновенный, вызывающий, эксцентричный, своеобразный
зеленый – экологичный, натуральный, сочный, новизна, холодность, чистота, прилив сил
белый – чистота, простота, грация, невесомость, изящность, непорочность, безупречность
жёлтый — цвет счастья, удовольствия, положительный, утвердительный, позитивный, жизнерадостный, креативный. Цвет света, золота, иногда связан с изменой.
Элементы должны складываться воедино и подчёркивать замысел, который должен прослеживаться с логотипа до кнопок.
Сочетание цветов для сайта
Сочетание цветов — важное условие. Посетим сервис по подбору цветов, который позволяет подобрать сочетание цветов для сайта:
colorscheme.ru
Слева на цветовой палитре указываем основной колер в режиме «моно», справа получаем дополнительные цвета. Функция «Триада» даёт слишком много цветов. Смотрим оформление:
Лучшие сочетания цветов для сайта
Лучшее сочетание выполняем в режиме «тонко». Манипулируем основным цветом, осветляем, затемняем или меняем фон. Можно выбрать два — три цвета для блоков и элементов страницы, этого достаточно. Добавляем яркие элементы для бледного фона, бледные для яркого: кнопки, иконки, значки и прочее.
Большинство сайтов написаны темными шрифтами на светлом фоне, «подгоняем» фон к цвету текста. Для нашего примера подходят светлые жёлтые, оранжевые варианты — цвета выпечки, можно использовать тёмные шрифты. Подобранные цвета вызывают ассоциацию со словоформами: золотистый, румяный, «с жара, с пылу» - всё нормально.
В сервисе доступны номера цветов. В нижнем меню жмём на кнопку, получаем номер цвета, они нужны для сайта — копируем номера.
Создаём красивый фон для сайта
Показан пример «светлой страницы». Для просмотра нажимаем «пример светлой страницы»:
Индивидуальный вид сайта достигается за счёт Вашей работы.
Цвета для сайта html
Используем цвета HTML из таблицы кодов. В наличии более 1500 названий цветов в виде таблицы. Номер можно «забить» как основной и экспериментировать с ним. Пользуемся «Списком цветов»:
Если цвет по номеру HTML не меняется, так бывает, используем настройки RGB — вводим цвет используем 3 номера:
Данные будут нужны для задания цвета в WordPress:
Вставляем в поля r g b — цифры из предыдущего рисунка. Для цвета «Циан»: 0 255 255 (вместо 183 231 231).
Если цвет текста сливается с цветом блока (слишком светлый на светлом фоне, или тёмный на тёмном), система выдаст предупреждение.
Предоставленные возможности позволяют смотреть на мир не просто с широко открытыми глазами простого обывателя, а с точки зрения веб-дизайнера. Каждый взгляд оценивает рекламу, краски природы. «Ловим» удачные мгновения.
Вариантов вокруг много. Делаем анализ:
- почему сложилось хорошее восприятие увиденного? Какое решение привлекательно, притягивает взгляд? Это цвета хорошо подобраны, удачный фон, дополнительные элементы?
- почему это мне не нравиться? Или что отталкивает от картинки: неудачное сочетание цветов, фон, элементы?
- собственный дизайн сайта позволит реализовать эти наблюдения у себя.
Дизайн и структура сайта
Дизайн-проект сайта во многом определяется структурой. Это взаимно зависящие элементы. Определено, что структура и навигация первичны, они определяют удобство и ориентацию на сайте. Дизайн служит оформлением, средой, определяет формы и цвета средств навигации.
Дизайн начинается с меню — на него смотрит посетитель, попав на страницу сайта. Меню оформляем в единой цветовой гамме. Средства навигации, структурные элементы подвергаем единому стилю оформления. Сделайте удачное оформление, красивый фон, цвета — пользователю будет комфортно находиться на сайте. Он может не отдавать себе отчет в этом. Всё произойдёт на подсознательном уровне. Эффект достигнут.
Минимализм дизайна сайта
Многие продвинутые пользователи склонны делать дизайн сайта в духе минимализма. Это креативно, но делать этого не стоит. Причина: невосприятие широким кругом посетителей выражения своего видения. Если этого не случиться — хорошо, но риск есть. Страница должна содержать цепкие, цветные, выделяющиеся фрагменты оформления. Глаза человека среди монотонной картины заняты поиском цепкого элемента. Это позволит привлечь посетителя.
Древние мануалы украшали различными виньетками, вензелями – небольшими украшениями. Рукописные книги не могли себе технически позволить большего. Эти улучшения выполняли профессиональные художники, что украшало и удорожало книгу. Современные средства позволяют человеку сделать дизайн привлекательным что увеличит посещаемость. Добавьте немного фантазии, красок в сайт! Как делали наши предки.
Рекомендации для создания дизайн-проекта сайта
- цвета — их должно быть не более 3. Четыре цвета применять на сайте необходимо с осторожностью — дизайн может быть пестрым
- цвет должен гармонировать с тематикой. Придерживайтесь простой, сдержанной цветовой палитры
- используйте номера цветов красок, не применяйте «на глазок»
- разработка веб дизайна сайта строиться на принятых правилах:для бизнеса не подойдёт розовый цвет, но он гармонично впишется в сайт игрушек
- выбранные цвета для нашей «Домашней выпеки» не подойдут к сайту о мороженом
- для выделения элемента делайте цвет темнее или светлее, при этом фрагмент не должен быть слишком контрастным и тяжёлым
- определённый цвет служит инструментом для успешного дизайна
- все элементы сайта должны сочетаться друг с другом.
Заключение
Материал по дизайну-проекту сайта поможет выбрать цвета, фон, составить несложные требования к дизайну, его составляющим. Создайте свой шедевр, пользуйтесь рекомендациями этой страницы!
Посмотрите интересные статьи раздела «Сайт»:
