My name is Vasyl Khrystiuk‎ > ‎process‎ > ‎main‎ > ‎

веб дизайн

Мотивация:
я хочу узнать - в чем суть работы, вряд ли я буду делать дизайн более одного раза. или для реальных проектов
http://webmozg.ru/dizajn-sajtov/sajty-dlya-dizajnerov-i-vebrazrabotchikov


1) Готовые фреймворки

http://www.dejurka.ru/web-design/responsive-frameworks/
https://html5boilerplate.com/
http://css-live.ru/
http://getbootstrap.com/
http://getuikit.com/


2) О композиции
http://www.rosphoto.com/photo-lessons/pravila_i_uroki_kompozicii-123


3) Цвет
1) Цвета, цветовой круг. https://color.adobe.com/ru/ Баланс цветов.  http://colorscheme.ru/. http://www.colorhunter.com/
http://webmozg.ru/uroki-dizajna/uroki-dizajna-praktika-cvet-v-vebdizajne
http://onjee.ru/podbor-cvetov-dlya-sajta/


4) Практическое создание дизайна
1) нарисовать дизайн на бумаге
2) 
модульная сетка (http://htmlbook.ru/content/modulnaya-setka)
  • http://960.gs/
  • http://getbootstrap.com/css/#grid 
  • http://onjee.ru/modulnaya-setka-dlya-veb-dizainerov/

2) От большего к меньшему, от общего к частному

http://onjee.ru/kak-sdelat-prototip-sajta/ - пример создания дизайна сайта с нуля
http://onjee.ru/kak-sdelat-dizajn-sajta/ - продолжение
http://webmozg.ru/dizajn-sajtov/vidy-sajtov - виды сайтов
http://webmozg.ru/uroki-dizajna/kak-ponyat-xoroshij-dizajn-ili-net - хороший дизайн или нет. чек-лист.
http://webmozg.ru/inkviziciya/dizajn-internet-magazina-avtozapchastej - другой чек-лист
http://webmozg.ru/uroki-dizajna/pismo-chitatelya-2-voprosy-o-dizajne - еще один

Другие советы:
  • меню должно быть рассчитано на расширение 
  • блоки из страницы должны быть легко удаляемы (при использовании сетки это не проблема)

5) Лендинг и первый экран
http://webmozg.ru/dizajn-sajtov/po-povodu-teplovyx-kart-i-pervogo-ekrana
Тепловая карта сайта ничего не значит
  • кликают там где есть что кликать
  • Еще одна слепая вера, в то что, располагать ключевые элементы лучше слева, потому что там больше кликают, ну так опять очевидные вещи, человек смотрит на сайт как на книгу, журнал: слева-направо и сверху-вниз. Это очевидно.
  • не лепить все на главной ( Интересно сколько человек из 100 не поймут, что есть продолжение сайта?)
6) Юзабилити:
http://onjee.ru/usability-saita/
http://onjee.ru/raznica-mezhdu-ui-i-ux/

7) Об устройствах и мониторах
масштабированность под разные мониторы (резиновые сайдбары, адаптивность)
Разные лейауты:
  • Absolute Layouts - все в сантиметрах и точно указано и соответствует печатным размерам (отличие от фиксед лайаут?)
  • Relative Layout - смотрит на страницу через viewport, все считает, основываясь на то, что ширина браузера 100%
  • Fixed Layout - все точно фиксованно
  • Elastic Layout - использование единиц релятивных размеров (em)
  • Scaled Layout - подразумевается разное отображение в зависимосим от ориентации мобильных устройств
  • Liquid (or Fluid) Layout - что-то с процентами, не ясно
  • Equated Layout - основанное на использовании css calc function
  • Fluid-Min/Max Layout - использование процентного соотношения но вместе с тем фиксирование минимальных/максимальных размеров элементов: min-width, max-width, min-height, max-height
  • Conditional Layout - использование медиа-кверис
  • Mixed - смешанные 

Адаптивный дизайн - альтернативы:
http://habrahabr.ru/post/239441/

Адаптивный дизайн - наш выбор
http://www.dejurka.ru/css/css3-responsive-web-design/
http://www.dejurka.ru/css/responsive-web-design-media-queries/
http://www.dejurka.ru/css/css-tutorial-adaptive-navigation/
http://www.dejurka.ru/css/create-adaptive-menu/
http://www.dejurka.ru/css/create-responsive-web-design/
http://wp-admin.com.ua/adaptivnaya-verstka-shpargalki-verstalshhika/

Длинна строки(50-75) и размер шрифта, возможно другой шрифт.


8) Типографика
Оформление содержания - важней всего. читабельность, выделение элементов, визуальные якоря(зацепиться глазу чтоб было за что).
Набор шрифтов
  • Базовый шрифт  — основной шрифт материалов сайта.
  • Акцидентный — шрифт для заголовков. Лого.
  • В некоторых случаях вводятся дополнительные шрифты для:
    • меню и навигации;
    • блоков выделения (важной информации, цитат, выносок);
    • для мелкого текста, с целью повысить читабельность.
Длинна строки: http://baymard.com/blog/line-length-readability
Элементы содержания:
  • абзац текста;
  • иерархия заголовков трех-четырех уровней;
  • ссылки, псевдо-ссылки;
  • элемент выделения важной информации;
  • цитата;
  • ненумерованный список;
  • нумерованный список;
  • вложенные списки;
  • иллюстрация на полосу, в текст;
  • таблица или несколько их типов;
  • файлы для скачивания;
  • выноски;
  • подача информации в 2–3 колонки (зависит от сетки);
  • простая форма.

Реакция на пользователя
  • навигация
    • меню навигации и выделение неактивного/активного разделов, выделение при наводе мишки
    • ссылки 
      • должны выделяться визуально и изменяться при наведении, 
      • посещенные ссылки в тексте менять цвет(как якорь). 
      • так же иконки ссылок для дополнительных свойства ссылки
      • псевдоссылки подчеркиваться пунктиром// (тут еще вопрос - вот на википедии это по годному - есть псевдоссылки а есть спойлеры)
    • курсор
      • навигация, псевдо-ссылки и табы (hand)
      • подсказки (help)
      • изменение размера элемента и перетаскивание
9) Прочее
Инструменты для шаринга дизайна:
  • https://share.axure.com
  • https://readymag.com
  • https://webflow.com
  • https://www.uxpin.com



    



----------------


-------------------------------


Какие книги почитать по дизайну?

  1. Живая типографика
  2. Дизайн для реального мира








Comments