Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web design

231 views

Published on

Web design - trends 2019-2020

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Web design

  1. 1. Доц. М. Иванова
  2. 2.  Какво е уеб сайт?  Aрхитектура на уеб сайт  Съвременни технологични решения  Различни приложения на уеб сайтове 2
  3. 3. Уеб сайт - дефиниция  Уеб сайтът е колекция от уеб страници, изображения, аудио/видео файлове и други обекти, които се хостват от един или повече уеб сървъри, достъпни през Интернет  Уеб страницата е документ, обикновено написан на HTML, който е достъпен през протокола HTTP, чрез който се предава информацията от уеб сървъра до уеб браузъра на потребителя 3
  4. 4. Видове уеб сайтове  Малък  линеен  йерархичен  Средно голям  йерархичен  използа база от данни  Голям  използва база от данни  използва система за управление на съдържание  използва система за управление на учебно съдържание 4 начална страница страници на основни секции подстраници на секциите
  5. 5. Предназначение на уеб сайтове  Лични уеб сайтове  Информационни  Корпоративни  Блогове и онлайн дневници  Форуми  Онлайн магазини и сайтове за търгове  Онлайн списания  Сайтове за съхраняване и споделяне на файлове  Социални мрежи  Търсещи машини  Портали, директории, жълти страници 5
  6. 6. Използване на ограничен, но подходящ цветови набор  Color Combinations & Web Design: What You Need to Know- https://www.minimist.ca/articles/color-combinations-amp-web-design-what-you-need-to-know  50 Gorgeous Color Schemes – https://visme.co/blog/website-color-schemes/  How to Choose a Good Color Scheme For Your Website – https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/  7 Rules for Website Color Schemes – https://websitesetup.org/website-color-schemes/ Color Schemes Generator – https://coolors.co/
  7. 7. Изкуствен интелект и ботове  Алгоритми за изкуствен интелект – събиране и анализиране на информация, решаване на проблеми; използване на чатботове – за комуникация с потребителя и отговор на проблеми
  8. 8. Подходящ типографски стил  https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d  https://www.toptal.com/designers/typography/web-typography-infographic  Fonts: https://websitesetup.org/web-safe-fonts-html-css/
  9. 9. Използване на векторна графика  SVG (Scalable Vector Graphics)  Adding vector graphics to the Web https://developer.mozilla.org/en- US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web  The Advantages of Using Vector Graphics for Website Creation https://www.templatemonster.com/blog/vector-graphics-website-creation/  Vector images https://www.awwwards.com/websites/vector/
  10. 10. Използване на анимации и микроанимациии  https://digitalsynopsis.com/design/gif-icons-menu-transition-animations/  https://uxplanet.org/boost-your-web-design-different-types-of-web-animations-67d84feb59ff  https://www.intechnic.com/blog/30-creative-website-examples-of-css-animation/  Зареждащ екран, динамичен фон, динамична страница, динамично меню, динамична галерия
  11. 11. Използване на анимации и микроанимациии
  12. 12. 3D графика
  13. 13. Разказ на история в уеб дизайна  https://usabilla.com/blog/10-ways-to-incorporate-storytelling-in-web- design/  https://www.webfx.com/blog/web-design/online-storytelling-methods/  Текст, изображения, графика, анимация, фон, вертикален плъзгач
  14. 14. Линии, кръгове, геометрични форми, шаблони  Комбиниране на форми и шаблони върху уеб страницата  Използване на декоративни елементи и опростени форми  2D изображенията продължават да са актуални
  15. 15.  https://www.theochocolate.com/
  16. 16.  https://www.theochocolate.com/
  17. 17.  http://www.mrchocolate.com/
  18. 18. Ярки цветове  Ярки цветове в съчетание с плосък дизайн и използване на материали на обектите  Правилно комбиниране на цветовете  Избягване на агресивни цветове
  19. 19.  http://www.adobe.com/
  20. 20. Цветови комбинации  http://blog.visme.co/website-color-schemes/  https://designschool.canva.com/blog/website-color-schemes/
  21. 21. Асиметричен дизайн
  22. 22. Уникални изображения и графики  Графични илюстрации
  23. 23. Изображения в съдържанието на уеб страницата
  24. 24.  https://www.musicbed.com/
  25. 25.  https://www.aace.org/conf/elearn/
  26. 26.  https://www.toyota.com/
  27. 27.  http://www.hop.uk.com
  28. 28.  http://www.theflowerstudio.com/
  29. 29.  https://www.hallmark.com/cards/
  30. 30.  http://www.propago.com/
  31. 31. Икони  https://www.ibm.com/
  32. 32.  https://www.ibm.com/
  33. 33.  http://www.solarwinds.com/
  34. 34.  http://www.solarwinds.com/
  35. 35. Икони  https://www.toyota.com/
  36. 36. Икони  http://www.rizn.info/
  37. 37. Икони  https://www.sketchapp.com/
  38. 38. Професионални социални мрежи
  39. 39. Добавена реалност
  40. 40. Отделяне на горната секция
  41. 41. Отделяне на горната секция
  42. 42. Проста навигация  Постоянна навигация –навигацията да бъде на едно и също място върху всички страници от сайта, с лесна достъпност  Инлайн хипервръзки (хипервръзки в текста) трябва да са видими и откроими от останалия текст
  43. 43. Инлайн хипервръзки – различими от останалия текст
  44. 44. Брой колони  Колко текстови колони са необходими?
  45. 45. Лого  https://digitalsynopsis.com/design/top-logo-design-trends-2019/
  46. 46. Отзивчив дизайн - най-напред проектиране на уеб страница за мобилни устройства Отзивчив дизайн – съдържанието да достигне до по-голям брой потребители, независимо от вида на използваното устройство, операционна система или браузър  https://www.zazzlemedia.co.uk/blog/digital-design-trends/#gref
  47. 47. Отзивчив дизайн  Възможност за преглеждане на уеб страницата от различни устройства  Разработва се един сайт и се преглежда на лаптоп, телефон, таблет – спестяват се средства
  48. 48. Литературни източници  https://www.minimist.ca/articles/web-design-trend-predictions-for-2020  https://www.sitejet.io/en/article/10-exciting-web-design-trends-for-2020  https://mobiteam.de/en/the-future-of-web-design-2019-2020-top-3- trends/  https://merehead.com/blog/8-main-trends-of-web-design-2020/  https://sondoramarketing.com/blog/2020-web-design-trends/  https://www.theedigital.com/blog/web-design-trends

×