UI
May 16, 2022

Перевод книги Fundamentals of creating a great UI-UX by Elisa Paduraru. Часть 1. Эволюция дизайна

  1. История графического дизайна

a. Первая система типографики

С самого начала человечество продемонстрировало умение общаться с помощью визуальных средств. Египетские иероглифы были одной из первых систем письма и использовались в Древнем Египте. Эта система совмещала логографические, слоговые и буквенные элементы, всего было около 1000 различных символов. Скорописные иероглифы использовались в религиозной литературе на папирусе и дереве. Каждое изображение или символ выполняли одну из следующих трех функций:
представляющие образ предмета или действия, обозначающие звук или звуки одного, до трех слогов и уточняющие точное значение соседних глифов.

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

b. Первый логотип

Первым логотипом в мире является герб, используемый в качестве символа для обозначения домов или территорий.

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

c. Графический дизайн

Термин «графический дизайн» впервые появился в 1922 году. В статье «Новый вид полиграфии требует нового дизайна» (Boston Evening Transcript, 1922) книжный дизайнер Уильям Аддисон Двиггинс впервые использовал термин «графический дизайн» для точно описания, какова была его роль в структурировании и управлении визуальными эффектами в дизайне книги. С самого первого дня дизайнеры изо всех сил пытались объяснить недизайнерам, что именно они делали.

В 2000 году веб-разработчики начали создавать несколько версий веб-сайтов для просмотра в разных браузерах и на разных устройствах. Хотя этот метод работал, он отнимал много времени и был непрактичным. Устройства и браузеры постоянно развивались, и наличие нескольких версий означало, что обновления приходилось делать отдельно — для настольных компьютеров, планшетов и мобильных устройств.

2. Хронология важных направлений в веб-дизайне

1987. Adobe Photoshop

Photoshop был разработан в 1987 году двумя братьями Томасом и Джоном Нолл, которые продали лицензию на распространение Adobe Systems Incorporated в 1988 году. Эта программа, в то время называвшаяся Display, привлекла внимание его брата Джона, сотрудника Industrial Light & Magic. , который порекомендовал Томасу превратить его в полноценную программу для редактирования изображений. Томас переименовал программу в «ImagePro», но название уже было занято. Позже в том же году Томас переименовал свою программу в Photoshop и заключил краткосрочную сделку с производителем сканеров Barneyscan на распространение копий программы со сканером слайдов; таким образом «всего было отправлено около 200 копий Photoshop».

Первоначально Photoshop был доступен только на платформе Macintosh. В 1993 году главный архитектор Adobe Ситхараман Нараянан перенес Photoshop на Microsoft Windows. Выход версии на Windows привел к тому, что Photoshop охватил более широкую аудиторию массового рынка, поскольку глобальный охват Microsoft расширился в течение следующих нескольких лет. В 1995 году Adobe приобрела права на Photoshop у Томаса и Джона Ноллов за 34,5 миллиона долларов, поэтому Adobe больше не нужно было платить лицензионные отчисления за каждую проданную копию.

1993. Первый лендинг

Адам Кларк Карри — подкастер, диктор, интернет-предприниматель и медийная личность, известный своей работой в качестве виджея (видео-жокея) на MTV и одной из первых знаменитостей, лично создавших и управляющих веб-сайтами.
Он запустил первую неофициальную целевую страницу MTV в 1993 году. Это была большая разница по сравнению с несколькими годами ранее. Согласно исследованию исследователя Массачусетского технологического института Мэтью Грея, к концу того же года насчитывалось 623 веб-сайта.

1995. Происхождение термина «Пользовательский опыт»

Термин User Experience, вероятно, впервые был публично услышан на конференции CHI '95 Companion on Human Factors in Computing Systems, состоявшейся 7-11 мая 1995 года в Денвере, штат Колорадо. Сочетание двух слов «Пользователь» и «Опыт» впервые появилось в презентации Дональда Нормана, Джима Миллера и Остина Хендерсона из Apple Computer под названием «Что вы видите, кое-что из того, что будет в будущем и как мы это делаем». : Привет в Apple Computer, особенно в предложении: «В этом организационном обзоре мы охватываем некоторые из важнейших аспектов исследования и применения человеческого интерфейса в Apple или, как мы предпочитаем называть это, взаимодействия с пользователем».

1998. Странный дизайн

Design is Kinky был основан Эндрю Джонстоном и был одним из первых веб-сайтов сообщества дизайнеров.
На сайте регулярно представлены графические работы, фотографии, экспертные статьи или профили художников, решивших опубликовать свои работы в сети. В 2018 году проект Design is Kinky закрылся.
Теперь, если вы заглянете на веб-сайт Design is Kinky, у них есть сообщение «скоро перезапуск».

1999. Практика простоты

Джейкоб Нильсен (Jakob Nielsen) — веб-консультант по юзабилити, исследователь взаимодействия человека и компьютера. В 1998 году газета The New York Times назвала его «гуру юзабилити веб-страниц», а журнал Internet Magazine назвал его «королем юзабилити». Якоб опубликовал революционную книгу: Designing Web Usability: The Practice of Simplicity. Книга стала одним из основных справочников в области веб-юзабилити и новой области дизайна пользовательского опыта (UX).

2005. Запуск Youtube

В 2005 году в PayPal работали Чад Херли, Стив Чен и Джавед Карим. Вскоре после отставки они вместе работали над запуском веб-сайта YouTube для публикации и обмена видеофайлами. Первое видео под названием «Я в зоопарке» было загружено на YouTube 23 апреля 2005 года одним из соучредителей. Это было короткое видео из зоопарка Сан-Диего. Вскоре после этого, в ноябре 2006 года, YouTube был куплен Google за 1,65 миллиарда долларов.

2009. Dribbble

Дэн Седерхольм и Рич Торнетт основали портал дизайнерского сообщества Dribbble. Графические дизайнеры, иллюстраторы, веб-дизайнеры, типографы и другие творческие специалисты могут делиться своими работами на Dribbble в разрешении 1600x1200px. Dribbble в настоящее время
крупнейший веб-сайт сообщества дизайнеров.

2010. Google Fonts

Google запустил библиотеку веб-шрифтов с открытым исходным кодом, Google Web Fonts, которая теперь называется Google Fonts. Шрифты размещены на серверах Google, а в библиотеке сейчас около 900 семейств шрифтов, которые пользователи могут бесплатно использовать на своих веб-сайтах.

2010. Flat Design

Microsoft выпустила Windows Phone 7, мобильный телефон, пользовательский интерфейс которого был создан с использованием плоского дизайна. Новый визуальный стиль получил положительные отзывы, и Microsoft использовала элементы плоского дизайна в оформлении графического интерфейса Windows 8. Плоский дизайн также приобрел значительную популярность среди веб-дизайнеров и стал одной из основных визуальных тенденций в веб-дизайне после 2010 года наряду со стилями скевоморфизма и материального дизайна.

2010. Sketch

Sketch — редактор векторной графики для macOS, разработанный голландской компанией Sketch B.V., ранее называвшейся Bohemian Coding. Впервые он был выпущен 7 сентября 2010 года и получил награду Apple Design Award в 2012 году. Он в основном используется для разработки пользовательского интерфейса и взаимодействия с пользователем веб-сайтов и мобильных устройств и не включает функции дизайна печати. В Sketch больше возможностей для прототипирования и совместной работы. Поскольку стороннее программное обеспечение и инструменты передачи доступны только для macOS, их следует использовать для просмотра проектов Sketch на других платформах.

2014. Material Design

Компания Google представила новый графический стиль под названием Material Design.
Конференция Google I/O. С 2015 года Google изменил дизайн большинства своих приложений и сервисов, используя единый визуальный стиль Material Design. Согласно определению Google, Material Design — это «визуальный язык, который синтезирует классические принципы хорошего дизайна с инновациями и возможностями технологий и науки».

2016. Adobe XD

В ответ на растущую популярность Sketch на конференции Adobe Max в октябре 2015 года Adobe объявила о разработке нового инструмента для дизайна интерфейса и создания прототипов под названием «Project Comet». Бета-версия Adobe XD была выпущена для Windows. 10 от 13 декабря 2016 г. 18 октября 2017 г. Adobe объявила, что Adobe XD вышла из бета-версии.

2016. Figma

Figma начала предлагать бесплатную программу предварительного просмотра только по приглашению 3 декабря 2015 года. Первый публичный релиз состоялся в 2016 году. 22 октября 2019 года Figma запустила сообщество Figma, позволяющее дизайнерам публиковать свои работы для просмотра, дублирования и адаптации другими пользователями.

2019. Неоморфизм

Сообщение Medium от Михала Малевича приписывает имя Джейсону Келли, от new + skeuomorphism. Этот стиль пользовательского интерфейса характеризуется плоским дизайном в сочетании с мягкими тенями и бликами.

2021. Глассморфизм

Глассморфизм — это термин, используемый для описания дизайна пользовательского интерфейса, который подчеркивает светлые или темные объекты, расположенные поверх цветного фона. На объекты накладывается размытие фона, позволяющее фону просвечиваться, создавая впечатление матового стекла. Glassmorphism — это новейшая тенденция в пользовательском интерфейсе, которая быстро становится популярной среди дизайнеров. Хотя его брат, Neumorphism, не завоевал столько поклонников, эта тенденция определенно будет расти. Он характеризуется стеклянным видом, основанным на сочетании тени, прозрачности и размытия фона. Он может отлично работать, если его правильно использовать, даже такие крупные компании, как Apple и Microsoft, используют его.