Главная » Статьи » База знаний » Что такое качественный веб-дизайн?

Что такое качественный веб-дизайн?

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

Этапы творческого проекта:

 

  1. Определяем задачу.
  2.  

  3. Правильно формулируем проблему.
  4.  

  5. Исследуем проблему. Собираем информацию.
  6.  

  7. Создаем идею:
  8.  

  • ● Опирается ли идея на воображение?
  • ● Решает ли она проблему?
  • ● Насколько эффективно она решает проблему?

 Идея должна проходить по всем 3 пунктам.
 

Правила качественного дизайна

 

Три уровня ассоциаций:
 

1. Очевидность.
 
Используется в простых пиктограммах, чтобы упростить восприятие информации. Но такие изображения не несут уникальности.
 
2. Логика.
 
На этом уровне человек должен связать увиденное со своим опытом и знаниями. Удовольствие, которое испытывает при этом человек, способствует запоминаемости дизайна.
 
3. Эмоции.
 
Строится на архетипах — ассоциациях, которые запоминались ранее человеком при неосознанном восприятии. Использовать этот уровень нужно только в случае, если ЦА точно поймет, в чем скрытая суть изображений.
 
Гештальт
 

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

 

  1. Близость.
  2. Схожесть.
  3. Целостность.
  4. Замкнутость.
  5. Смежность.
  6. Общая зона.

 
Если вы закончили макет, помните, что он далек от идеала процентов на 50. Не останавливайтесь и попробуйте в несколько заходов улучшить свою работу.
 
Золотое сечение
 
Равно: 1,618033 или 1,62.
Используется при выборе размеров и размещения объектов на странице.

золотое сечение

Числа Фибоначчи
 
Последовательность, в которой каждое последующее число равно сумме двух предыдущих.
1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,..
Эти числа можно использовать как готовые величины ширины и высоты элементов дизайна.
 
Серебряное сечение
 
Равно: 2,41.
При определении зрительных центров, кадр делится линиями, параллельными его сторонам, в пропорциях 3:5, 2:3 или 1:2.

серебряное сечение

Метрика
 
Это сетка, которая делит рабочее пространство на равные элементы.
1. Выберите парное число от 0 до 15 или 5 (лучше — 8) и пользуйтесь им для определения шага сетки в пикселях.
2. Чем меньше шаг, тем бессмысленней метрика.
3. Чем больше шаг, тем меньше возможностей для творчества.
 
Пользователь должен заранее интуитивно понимать, какое действие выполнит программа после получения команды.
Первым делом дизайнер разрабатывает UI Kit, чтобы он был одинаково реализованным на всех страницах сайта. Это интерфейс построения системы.
Описываем пользование Китом с помощью гайда — руководства, чтобы каждый участник проекта мог использовать его в своей работе.
 
Базовый набор Кита:

  • ● заголовки;
  • ● наборный текст;
  • ● списки;
  • ● таблицы;
  • ● палитра;
  • ● отступы / расстояния.

 
Модульная сетка

модульная сетка

Нужна для организации объектов на странице. Помогает правильно расположить объекты на странице.
 
1. Модули могут иметь разные или одинаковые размеры.
2. Минимальная единица сетки — это шаг, равный модулю.
3. При построении сетки за основу берется строка текста.
4. Высота модуля соответствует определенному числу строк, а ширина —
ширине колонки набора.
5. Модули разделены друг от друга небольшими пробельными шагами, чтобы элементы не касались друг друга и чтобы можно было поместить подписи к ним.

6. По вертикали промежуток между модулями составляет 1, 2 или больше строк.
7. По горизонтали — рассчитывается по ширине блока текста или иллюстрации.

 
Комфортное чтение напрямую зависит от:
1. Размера шрифтов.
2. Длины строки.
3. Интерлиньяжа (межстрочного расстояния)
4. Объема информации.
 
Для комфортного чтения необходимо размещать в строке от 7 до 10 слов. Ширину полосы набора стоит выбирать исходя из наименьшего кегля (высоты литер).
Для легкого чтения важен большой интерлиньяж.
Для выбора размера изображений следует отталкиваться от кегля и интерлиньяжа текста, а также от ширины колонки. Таким образом размер изображения зависит от размера модуля. 1 картинка не обязательно должна занимать 1 модуль.


(голосов: 2)
Загрузка...