Analiza calitatii si trenduri

1. Introducere

2. ELABORAREA UNEI
APLICAȚII WEB

3. Sisteme instrumentate - subiectele de
studiu a cursului

4. Stuctura cursului
Distribuția orelor de studiu:
• Prelegeri - 30 ore;
• Lucrări de laborator – 30 ore;
Forma de evaluare finală – test cu itemi multipli;
Forme de evaluare curentă (prelegeri) – test;
Forme de evaluare curentă (laborator) – proiect
adițional proiectului cursului Prog. Web II;

5. Greșeli tipice în elaborarea designului
pentru aplicații WEB
Este important de înțeles că misiunea unui
designer WEB nu este în faptul că pagina să fie
maxim de splentidă ci în elaborarea unui
resurs ce ar aduce proprietarului unui venit
maximal.

6. 1. Адаптивный макет
• Этот макет подстраивается под разрешение
монитора и окна браузера, меняя при
необходимости ширину макета, число
колонок, размеры изображений и текста. Для
этого заготавливается несколько стилевых
правил или файлов под разный диапазон
разрешений, выбор правил происходит через
скрипты или CSS3, которые и определяют
нужную для этого информацию о
пользователе.

7. Адаптивный макет
Преимущества
• Этот тип макета наиболее удобен для пользователя, поскольку
не зависит от разрешения и ширины окна браузера,
приспосабливаясь под них.
• Макет комфортно можно смотреть на любом устройстве.
Недостатки
• Это самый сложный тип из всех макетов, ведь, по сути, вместо
одного требуется сделать несколько макетов со своей графикой
и CSS, а также прописать механизм определения разрешения
монитора или ширины окна браузера.
• За счёт универсальности макет сложно проверять на разные
условия, которые возможны у пользователей.

8. Комбинированный макет
• Альтернативные названия: гибрид, hybrid
(англ.).
• Этот макет предполагает использование
разной ширины для отдельных частей
страницы, например, шапку и подвал
делают резиновыми, а контент
фиксированным

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

10. 2. Dimensiunea și proporțiile
blocurilor informaționale
• Часто встречается подобная картина —
одинаковые элементы на различных
страницах сервиса представлены в разных
размерах, что визуально не очень красиво,
а, главное, вызывает сложности в процессе
верстки.

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

12. 4. Формы и цвета
• Рекомендовано
применить 3-4 цвета
в создании
визуально приятного
ресурса, кроме этого,
не стоит
экспериментировать
и подбирать оттенки
«на глаз». Выбрав
синий или зеленый,
придерживайтесь
его.

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

14. 6. Формы и кнопки
• Иногда, заходя на какой-то сайт, видишь
сложные для восприятия формы,
нестандартные элементы, которые не
только не вызывают интереса разобраться,
а наводят на мысль поскорее покинуть этот
заковыристый ресурс.

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

16. 8. Шрифты в веб-дизайне
• Размер и цвет шрифта должны быть понятными,
хорошо просматриваемыми и читабельными.
Пользователю не нужна просто картинка, он
пришел на ваш сервис за информацией.
• Пользуйтесь бесплатными шрифтами, при этом
выбирайте 2-3 варианта, иначе, вы можете сделать
страницу полностью неинформативной.
• Используйте только целые пиксели, никаких
дробных чисел (18,3; 15,5), поскольку верстальщик
не сможет попросту свести все в одно целое, в
результате получится очень некрасивый текст.

17. 9. Нецелевое размещение
информации
Часто, открывая сайт, видишь
массу ненужной информации,
которая не только отвлекает
внимание пользователя, но и
формирует мнение о
непрофессионализме веб-
дизайнера или разработчика
ресурса.
К числу подобных элементов
относят:

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

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

20. Sergie Magdalin, Ryan Morrison,
Linsey Peterson, Nathan Romero, and
Darin Dimitroff
https://webflow.com/blog/18-web-design-
trends-for-2017

21. Тренды ближайщего будущего
1. Разбитые схемы сетки
В бесконечных поисках дизайнеров для
более творческих и привлекательных
макетов сетка, на которую мы всегда
полагались, чтобы привести гармонию
и логику к нашим макетам, сама по
себе стала своего рода ограничением.

22. 2. Иллюстрации занимают
центральное место

23. • Брутализм ... разрывает пространство, где дизайнеры могут делать
то, что хотят, а не то, что им нужно. Работы, созданные здесь,
избегают всех советов по оптимизации и списков лучших практик в
пользу взглядов и эффектов, которые обитают в раздражении, а
иногда и граничат с наступлением (к ожиданиям, во всяком
случае).
3. Брутализм достигает основного
статуса

24. 4. Более органические и косые
формы
Теперь каждое приложение от Google Now до Twitter в
Facebook может похвастаться почти агрессивно
закругленными углами на их карточках, коробках ввода,
аватарах профиля и многом другом.

25. 5. Еще более распространенные
взаимодействия и анимации
Justin Jackson's «Это веб-страница», веб-интерфейс
позволяет гораздо больше, чем просто печатать слова
на странице.
И если известная поговорка Маклюэна содержит
любую воду, это означает, что по крайней мере часть
сообщения Сети - ее смысл - заключается в ее
способности к движению и интерактивности:
способность веб-страницы не просто представлять
нам информацию, а сделать это информации и, что
более важно, позволить нам взаимодействовать с
этой информацией и воздействовать на нее.

26. 6. Появление максимализма
Хороший дизайн - это как можно меньше
дизайна. Дитер Рамс
В течение многих лет это казалось самым
мощным и желанным кусочком
дизайнерской обратной связи, которую вы
могли получить: «это чисто».

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

29. 8. Плавающие навигационные меню
• В последнее время мы видим, что
дизайнеры делают шаг вперед, визуально
отделяя навигацию от остальной части
дизайна сайта и перемещая ее немного
ниже хром браузера. Это усиливает
ощущение, что навигация - это глобальный
объект, не обязательно являющийся частью
какой-либо одной страницы, но чтобы вы
убедительно следили за сайтом.

30. 9. The <video> element
Это мощно по нескольким причинам:
• Он может легко вставляться в дизайн, без назойливого
хрома встроенного видео YouTube или Vimeo
• Он остается чрезвычайно высоким, даже с большим
количеством цветов, градиентов и деталей на
изображении - что-то GIFs не может обойтись без
экспоненциального всплытия по размеру
• Он может быть зациклен, чтобы гарантировать, что
детали копии и изображения остаются
синхронизированными и повторяются для тех, кто в ней
нуждается.

31. 10. Более захватывающая
«мультимедийная» длинная форма
Стоит отметить, что
эти более
разнообразные
подходы к longform
могут играть либо с
разбитой сеткой,
либо со стандартной
колонкой, как
показано в
вышеприведенной
статье New York
Times.

32. 11. Переменные шрифты!
Совместный проект между крупнейшими именами в
области технологий (и типографики) - Apple, Google,
Microsoft и Adobe - проект с переменными шрифтами
позволяет создать совершенно новую форму дизайна
шрифтов.
Официально дополнение к формату
OpenType:позволяет дизайнерам типов
интерполировать весь набор глифов или отдельные
глифы вдоль до 64 000 осей вариации (вес, ширина и
т. д.) и определять конкретные позиции в
пространстве дизайна как именованные экземпляры.

33. 12. Контент хабы - или webooks?
Многие ведущие бренды выкапывают
привычный подход в формате PDF к
распределению электронных книг и
полностью используют потенциал Интернета
для публикации контента в формате longform
в том - «webooks».

34. 13. CSS grid!
Робин Рендл так красноречиво наложил это
на CSS-Tricks: CSS Grid - первая реальная
система макетов для Интернета. Он
предназначен для организации контента как
в столбцах, так и в строках, и, наконец, дает
разработчикам почти богоподобный
контроль над экранами перед нами.

35. 14. Поиски идеального инструмента
цифрового дизайна
Брин Джексон из Spectrum выдвинул свой
аргумент в пользу: Промежуточный формат
между дизайнерскими и инженерными
инструментами, чтобы обеспечить более
эффективную и эффективную оснастку для
групп продуктов в целом и дизайнеров.

36. 15. Разнообразие и включение в
качестве задач проектирования
Нацеленность на создание команды, в
которой разнообразие идей и идентичности
не только приветствуется, но и поощряется.

37. 16. Дизайн это совместная работа
Любой, кто влияет на дизайн, становится
дизайнером. Сюда входят разработчики, PM,
даже корпоративные юридические. Все
дизайнеры.

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

40. Основные принципы material design:
качественно новая Google-
реальность
Material design базируется на тактильной
реальности, его вдохновением стало изучение
чернил с бумагой, он технологически продвинут,
а также на 100% открыт для воображения и
магии Google

41. Material Design представляет собой
качественно новый визуальный язык,
представленный компанией-флагманом
Google.
Он относительно очень молодой, так как в
первый раз был представлен только в июне
2014 года, но произвел фурор в дизайн-
сообществе моментально.
Это и объяснимо, так как он способен
систематически решать самые главные
проблемы дизайнеров.

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

43. В разных источниках можно
встретить разную «разбивку» на
принципы, но вернее будет
выделить 9 основных аспектов,
способных четко охарактеризовать
разработку:

45. • Принцип №1: material — это, в первую
очередь, метафора, объединяющая
корректную организацию пространства, а
также движения объекта в нем. Данный
дизайн неизменно строится на так
называемой тактильной реальности, так как
пользователи могут почувствовать грань
между плоскостями, которой нет.

46. • Принцип №2: всегда интуитивно понятные
поверхности. Это значит, что грани с
плоскостями всегда обязаны точно
передавать смыслы визуального характера.
То есть ощущения появляются на
подсознательном уровне, благодаря теням,
границам.

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

48. • Принцип №4: применяется единый
адаптивный дизайн, но на каждом
устройстве будет отражаться свой взгляд на
одни и те же элементы, при этом все виды
адаптированы к конкретным устройствам,
но неизменными остаются цвета, иконки и
пространственные отношения.

49. • Принцип №5: он акцентирует внимание на
графике, цвете и шрифтах. Дизайн должен
быть максимально естественным и
логичным, все элементы – сбалансированы
и гармоничны по отношению друг к другу,
чтобы у «юзеру» было комфортно и он
понимал, что ему необходимо делать здесь
и сейчас!

50. • Принцип №6: первоначальность действия.
По факту, это самая суть Материал Дизайна,
так как посредством действий пользователя
меняется дизайн, чтобы облегчить все
задачи относительно эксплуатации web-
ресурса или приложения.

51. • Принцип №7: пользователь неизменно
инициатор всех происходящих изменений,
совершая определенные действия. Все
начинается с «общения» с интерфейсом.

52. • Принцип №8: анимационная хореография.
Действия каждого объекта по отношению к
другому синхронно. Объекты, находящиеся
в поле пользовательского зрения, не
нарушают базис даже после
трансформации и перемещения.

53. • Принцип №9: именно движение является
обоснованием смысла. Каждый переход в
интерфейсе обязан быть понятным и
эффективным. Движения объектов
существуют для привлечения внимания,
неся в себе смысл

54. • https://vuematerial.io/
• https://material.angular.io/
• http://www.material-ui.com/