Русский
Русский
English
Статистика
Реклама

Дизайн сайтов

7 вредных советов дизайнеру

28.10.2020 10:05:26 | Автор: admin

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

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

Полина Абдула, проектировщик пользовательских интерфейсов Рексофт, автор вредных советовПолина Абдула, проектировщик пользовательских интерфейсов Рексофт, автор вредных советов

1. Все-все делай в одиночку

Хорошего дизайнера отличает то, что он никого не отвлекает и может выполнить все самостоятельно. Он знает все технические аспекты проекта, бизнес-логику заказчика, все паттерны проектирования. Сам напишет все тексты, нарисует все иконки. Исследования в одиночку будут, конечно же, объективными. Не важно, насколько профессионально все будет выполнено или сколько лишних часов будет потрачено, главное, что сам!

P.S. Конечно, самостоятельная работа прокачивает тебя, но у этого тоже есть минусы. Взгляд может замылиться, или ты можешь не так глубоко понять, что нужно заказчику. Не забывай задавать уточняющие вопросы, даже когда уже прошло интервью с заказчиком. Не бойся задавать вопросы и коллегам. Вы работаете в команде, и от общего понимания зависит результат. От того, что ты будешь задавать вопросы, ты не будешь казаться непрофессионалом. Правильно и вовремя поставленный вопрос это путь к успеху!

2. Помни, что на работе тебя всему научат

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

P.S. Очень часто новички ищут компанию, в которой их будут обучать, но это не так часто случается, поэтому даже после того, как тебе дали проект, следует учиться дальше. Хорошо, если тебе повезло, и есть дизайнер, с которым можно посоветоваться. Но если такого нет, то обучаться придется на своих ошибках, и в этом нет ничего плохого. Признавай их и исправляй. Дополнительное образование тоже идет в зачет в мире дизайна и ИТ постоянно что-то меняется.

3. Будь перфекционистом

Макеты настоящего профессионала точные до пикселя, в которых нет дробных частей. Композиции построены по золотому сечению. Состояния отрисованы до мельчайших подробностей. Профессионалы не ошибаются!

P.S. Если всегда так работать, то можно много времени потратить просто на то, чтобы доводить макеты до идеального состояния. Не говоря о уже том, что такой темп работы ведет к выгоранию. Используй, например, размеры кратные 8 пикселям и просто предупреди об этом разработку. Закладывай время на возможные правки, ошибки, коммуникацию с разработчиками. Очень сложно всегда все учесть, иногда важнее показать идею команде или заказчику быстро, чтобы получить фидбек в правильном ли направлении ты движешься!

4. Правки это плохо

Если кто-то делает замечание по поводу твоих макетов воспринимай это как личное оскорбление, ведь дизайнер тут ты! Ты всегда знаешь, как лучше. Заказчик ведь совсем не разбирается в дизайне. Почему все лезут в твою работу? Ведь потом придется на собеседованиях объяснять, что заказчик настаивал на этом глупом решении.

P.S. Возможно, заказчик не сможет объяснить, что его смущает в твоей работе и предложит свой вариант, который, по твоему мнению, будет не самым удачным. Но в твоих силах попробовать его понять, найти компромисс или предложить еще один или два варианта. Хорошая защита решения тоже может быть полезна. Однако к такой защите нужно готовиться.

5. Изобретай велосипед, придумывай новые паттерны

Чем уникальнее твое решение, тем лучше, и ничего страшного, что пользователей и заказчика оно будет вгонять в ступор. А коллеги из разработки не будут спать ночами, вспоминая, какой ты крутой дизайнер, воплощая твою гениальную задумку в жизнь.

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

P.S. Да, использовать хорошие паттерны это отличная идея, и пользователи чаще всего с ними будут уже знакомы. С разработчиками тоже нужно искать компромиссы, а по нестандартным решениям лучше консультироваться с ними заранее.

6. Используй конференции по дизайну для обучения

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

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

7. Прокачивай только хард скиллы

Как и в совете выше, не стоит распыляться на что-то, кроме изучения дизайна и инструментов. Если ты отлично проектируешь интерфейс, знаешь наизусть гайдлайны Android и iOS все двери тебе открыты. Дизайнеру не обязательно уметь искать общий язык с разработчиками и заказчиками. Дизайнер всегда знает, как должно быть красиво.

P.S. Прокачивая навыки в инструментах, типографике, не забывай учиться договариваться и понимать людей, с которыми ты работаешь. Разберись немного в психологии. Это также поможет тебе понимать пользователей и их цели, и ты будешь эффективнее защищать свои решения.

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

Подробнее..

Адаптация таблиц под мобильные устройства

15.03.2021 10:06:02 | Автор: admin

Для кого эта статья

Почти все дизайнеры сталкиваются с проблемой адаптации при отрисовке таблиц в интерфейсах - а именно адаптации таблиц под мобильные устройства. Справедливо также будет отметить полезность статьи для Frontend разработчиков, которые эти самые таблицы верстают.

Проблема

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

Данная проблема встречается повсеместно, и усугубить ее может пожалуй лишь контент ячейки, который не переносится построчно, увеличивая тем самым ширину колонки.

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Колонки:

  1. Номер

  2. Фото

  3. ФИО

  4. Телефон

  5. Email

  6. Дата

  7. Текст описание

  8. Статус

  9. Действия

Результатом станет довольно обширная таблица, которая имеет все нужные нам виды колонок. Признаться даже список сверху вызывает у меня вопросы справа тратится слишком много места.

  1. С фиксированной шириной и переносом строк

  2. С шириной по контенту

Анонс следующей статьи О списках в интерфейсах и как их применять по феншую.

Десктоп

В окне браузера наша таблица будет довольно комфортно себя чувствовать. Мы можем контролировать отображение контента так, как нам нужно. Даже если таблица перестанет помещаться по ширине то мы всегда можем либо скрыть пару колонок с самым низким приоритетом, либо в крайнем случае сделать скроллинг по горизонтали.

Варианты адаптации

Проблема наша талица по ширине не влезает в телефон.

Ошибочные решения

  1. Уменьшать шрифт

  2. Убирать колонки

  3. Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

  1. Каждую строку таблицы делать блоком

  2. Горизонтальный скроллинг

Первый вариант адаптации - сделать каждую строку таблицу отдельным блоком, и вывести ее на экране телефона.

Проблема с данным методом: Удлиняется вертикальный скроллинг, данные повторяются. (частично решается добавлением фильтров для поиска)

Возьмём за пример таблицу, которая отображена сверху. В таком виде она не поместится по ширине в мобильный экран. Для решения этой проблемы мы будем каждую строку таблицы преобразовывать в блок.

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

Второй вариант - горизонтальный скролинг таблицы.

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

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

Вывод

Теперь адаптация таблиц не должна нам казаться невыполнимой задачей, мы научились делать так, чтобы таблицы были удобоваримыми не только на десктопной версии сайтов, но и в мобильной (что применимо и к мобильным приложениям).

Если вы заметили ошибки, или вам есть что дополнить - дайте мне знать, я обязательно это сделаю.Спасибо за внимание!

Подробнее..

Перевод - recovery mode 41 термин в дизайне, полезный для UX-исследователя

05.09.2020 12:21:57 | Автор: admin


Работа с UX-дизайнерами и знакомство с их словарным запасом это почти изучение нового языка. Давайте посмотрим на 41 часто используемый дизайнерский термин. Для лучшего взаимопонимания в команде.



Flat Design (Плоский дизайн)


Flat Design это минималистский стиль дизайна пользовательского интерфейса. Он характеризуется фокусированием на использовании простых двухмерных элементов с яркими цветами.


Ник Бабич (Nick Babich) из UX Planet называет flat design более сложным кузеном минимализма, поскольку все элементы пользовательского интерфейса основаны на простоте.

Отличным примером плоского дизайна является целевая страница Dropbox Basic. Как видите, элементы пользовательского интерфейса настолько минимальны, что освещают содержание страницы.




Interaction Design (Интерактивный дизайн)


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




Material Design (Материальный дизайн)


Material Design, часто называемый просто материалом, это язык дизайна, разработанный Google и используемый на устройствах Android.


Вот краткое вводное видео об этом от Google:



Iterative Design (Итеративный дизайн)


Iterative Design это методология проектирования, которая не ограничивается четким началом или остановкой. Вместо этого это циклический метод проектирования, который включает в себя создание прототипа, планирование, реализацию, тестирование, а затем повторение этого процесса. По результатам тестов вносятся изменения для подготовки дизайна, наиболее подходящего пользователям.



Design sprints (Дизайн-спринты)


В гибкой разработке программного обеспечения спринт определяется как периоды времени, отведенные для выполнения определенных задач спринтов. Их продолжительность может варьироваться, но обычно составляет около 13 недель. Однако в дизайне спринт это уникальный пятидневный процесс проверки идей и решения больших проблем путем создания прототипов и тестирования идей с клиентами.



Brand Identity (Фирменный стиль)


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




Mood board (Доска настроения)


Mood board это набор материалов и полезностей, которые помогают определить определенный стиль продукта (например, веб-сайта или приложения) с помощью изображений, текста, цветов и других элементов брендинга. Это дает представление о голосе, направлении, языке и стиле конкретного проекта, дизайна или бренда. В отличие от большинства других пошаговых методов сбора данных, мудборд по своей природе свободен.


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



Storyboard (Раскадровка)


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



User Journey Maps / UX Flow / Flowchart


Карты пути пользователя (также иногда называемые UX-потоком или блок-схемой) представляют собой описательные документы, которые иллюстрируют шаги, которые пользователь может предпринять для выполнения задачи над продуктом. Они часто включают имя, шаги и описание того, что происходит на каждом шаге.



Есть ли различия между картами пути пользователя и потоками UX? Да.

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


В то время как UX-потоки имеют более формальные правила (вероятно, из-за их происхождения в виде блок-схем).



Wireframe (Каркас)


Думайте о каркасах как о проекте экрана. Они представляют собой низкокачественное представление макета и содержания веб-сайта.




Wireflow


Wireflow представляет собой комбинацию каркасов и рабочих процессов. Wireflows документируют процесс работы пользователя над задачей продукта или веб-сайта, но на каждом шаге вы можете видеть макет соответствующей страницы.


Чуть больше про Wireflow
Wireflow это не скетч. Wireframe-ы специально никак не связаны с дизайном, чтобы демонстрировать как сайт/приложение будет работать, а не выглядеть. В wireframe все выглядит схематично, но за этими чертежами стоят многие часы раздумий. Каждый небольшой блок должен быть спланирован и расположен в нужном месте. Каждая ссылка должна куда-то вести. Каждая страница должна быть доступна по ссылке с другой страницы. Каждая кнопка должна быть там, где она нужна пользователю, и не быть там, где от нее нет толку. Лишь 10% создания wireframe-ов приходится на рисование; 90% занимает процесс продумывания.



Mockup (Макет)


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




MVP


MVP или минимально жизнеспособный продукт(minimum viable product) относится к основному набору функций, с которыми мы можем запустить продукт, чтобы начать работу. Это не означает, что мы не будем развивать дальнейшие элементы или части. Продукты часто запускаются как MVP для быстрого выпуска и сбора ценных отзывов пользователей.


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




Low and High-fidelity protos


Прототипы с низкой и высокой точностью


На ранних этапах вы можете создавать бумажные прототипы (с низкой точностью Low protos) карандашом и бумагой для проверки концепций или течений. Позже, после проверки алгоритмов и концепций, вы можете перейти на программное обеспечение для проектирования, такое как Sketch, для создания прототипа с высокой точностью (High-fidelity protos). Прототипы будут выглядеть не как каракули, а как приложения на вашем мобильном устройстве, и их можно будет использовать для точной настройки деталей вашего пользовательского интерфейса.




Adaptive design (Адаптивный дизайн)


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




Responsive design (Отзывчивый веб-дизайн)


Не следует путать с адаптивными, отзывчивыми веб-сайтами, которые адаптируются к устройству, на котором они отображаются. Отзывчивый веб-дизайн это единый макет, который может сжимается, растягиваться и переупорядочивать содержимое, чтобы его можно было легко просматривать на каждом типе устройства.



Про разницу Адаптивного и Отзывчивого


Affordance (Ухватистость или провоцировательность)


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



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



Picker (Сборщик)


Как видно из названия, сборщик позволяет пользователям выбирать цель из ряда опций. Обычно он включает один или несколько прокручиваемых списков различных значений, например часов, минут, дат, измерений, валют и т. д.




Bar (Панель навигации)



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


Панель вкладок (Tab bar) в различных приложениях устройства она отображается в нижней части экрана приложения и дает возможность быстро переключаться между различными разделами приложения.




UI Element


Элементы пользовательского интерфейса (UI) это все различные части интерфейса, которые нам нужны для запуска определенных действий или обхода приложения или веб-сайта. Подумайте о кнопках, полях ввода, переключателях и переключателях.



UI Pattern


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


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


Widget (Виджет)


Виджет это просто экранный элемент, с которым взаимодействуют пользователи. Примеры виджетов: ползунки, инструменты календаря, кнопки, контактные формы...



Pixel (Пиксель)


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



Hierarchy (Иерархия)


Иерархия это визуальное расположение элементов дизайна, подчеркивающее важность.




Breadcrumbs (Хлебные крошки)


Хлебные крошки это вспомогательные средства навигации, которые сообщают пользователям, где они находятся на веб-сайте. Это позволяет пользователям повторять свои шаги на многоуровневых веб-сайтах. Несмотря на свой второстепенный статус, крошки используются с 1995 года, помогая сделать дизайн более удобным для пользователя.




API


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




Onboarding (Адаптация)


Создавайте благоприятные условия для новых пользователей, облегчая им это. Дизайн процесса адаптации для вашего сайта обычно ограничивается сценарием первого использования.



Lorem Ipsum (Текст рыба)


Также известное как фиктивная копия, lorem ipsum это общий текст-заполнитель, используемый, когда настоящий текст недоступен. Он используется в качестве текста-заполнителя, чтобы продемонстрировать, как будет выглядеть дизайн после того, как будет добавлен реальный основной текст.




Legibility (Разборчивость)


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




Microcopy (Микрофотокопия)


Это небольшие фрагменты текста, которые вы видите в приложениях или на веб-сайтах, которые помогают вам перемещаться по нему. Подумайте о ярлыках на кнопках, сообщениях об ошибках, тексте-заполнителе в полях ввода и тексте во всплывающих подсказках. Небольшие фрагменты текста большое влияние на UX вашего продукта.



Grid System (Сетка)


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




Scale (Масштаб)


Масштаб характеризует изменение размера объекта при сохранении его формы и пропорций. Большой масштаб может создать драму, а маленький может создать мелкие детали.



Color Theory (Теория цвета)



Изучение того, как цвета заставляют людей чувствовать и реагировать. Определенные цвета имеют тенденцию вызывать у людей определенные подсознательные эмоции и чувства например, мы склонны ассоциировать синий цвет с доверием и надежностью, поэтому так много корпоративных предприятий используют синие логотипы и бренды.



Cool Colors (Холодные цвета)




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



Warm Colors (Теплые цвета)




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



Gradient (Градиент)


Как видно на двух картинках выше, это постепенное изменение цвета от одного тона к другому.



Opacity (Прозрачность)


Степень прозрачности элемента. Чем ниже непрозрачность, тем прозрачнее элемент.



Resolution (Разрешение)


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




Contrast (Контраст)


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




Saturation (Насыщенность)


Степень интенсивности и яркости цвета. Например, цвет с низкой насыщенностью может казаться бледным и блеклым, тогда как более насыщенный цвет может казаться более ярким и красочным.




Ну вот и все. Это были одни из самых распространенных терминов, с которыми вы могли столкнуться при работе с UI, UX или графическими дизайнерами.

Подробнее..

Из песочницы Разбор UIUX на примере прототипа в Figma и основные принципы

24.06.2020 16:09:31 | Автор: admin

Кому адресована статья


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

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

Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов Figma.

Вместо введения


Разработка нового продукта в современном мире дело дорогое, а иногда очень и очень дорогое. Даже самое небольшое изменение стоит денег. Цена ошибки велика и измеряется не только в стоимости доработки, но и в упущенной выгоде, потерянных клиентах и доли рынка. Поэтому очень важно еще до начала разработки продумать и согласовать все внешние атрибуты реализуемого функционала: типы пользоватлей, что конкретно они будут делать и зачем, дизайн страниц и кнопок, включая текст и картинки, а так же сценарии использования.

image

Как это сделать? Написать на бумажке можно и нужно, но что поймет пользователь по итогам прочитанного и будет ли потом удобно разработчику реализовывать систему? Решение давно придумано создать сначала макет, а потом рабочий прототип. Пусть макет будет деревянным, а в прототипе будут только открываться двери, но уже на этом шаге заказчик сможет пощупать свой продукт и своевременно внести замечания.

То что написано выше относится к любому виду продукта, как физическому, так и электронному. Далее мы будем говорить о прототипах в сфере ИТ (сайты, приложения, корпоративные информационные системы и т.д.), определим, что такое UI и UX, какием критериям должен отвечать прототип в продуктовой разработке, рассмотрим некоторые особенности среды для создания прототипов Figma.

Что такое прототип ИТ продукта? Каким он должен быть?


Прототип это динамическая модель продукта, симулирующая взаимодействие пользователя с интерфейсов, с помощью которой можно дешево и быстро получить обратную связь от заказчика или представителей целевой аудитории.

image

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

Основные принципы прототипирования:

  1. Прототип создается только после того как определена целевая аудитория, маркетинговая стратегия, каналы сбыта.
  2. В прототипе должны быть учтены основные пользовательские сценарии. При тестировании хорошей идеей является озвучить задачу и отойти подальше от пользователя. Если у последнего в ходе использования прототипа возникают множественные вопросы, то это означает, что необходимо пересмотреть и переработать сценарии использования.
  3. Прототип является интерактивной моделью, так как он направлен на проверку возможных действия пользователя, а не на согласование картинки.
  4. В основе любого прототипа должна лежать гипотеза, которую необходимо проверить. Необходимо сформулируйте гипотезу так, чтобы на нее можно было четко ответить да или нет и прописать, как именно прототип даст вам ответ на этот вопрос.
  5. При тестировании прототипа необходимо давать минимум информации потенциальному пользователю. Причина проста чем больше он наломает дров, тем лучше для продукта, так надо тестировать, а не валидировать сценарии.
  6. Проверять все, даже если есть уверенность в том или ином функционале будущего продукта.
  7. Дизайн прототипа должен быть максимально лаконичным без отвлекающих внимание пользователя ярких картинок, цветовых акцентов или перечеркнутых квадратов. Конечно, если они не являются частью проверяемой гипотезы. В этом случае, есть риск того, что пользователь зациклится на наполнении визуального интерфейса.
  8. Если есть возможность сделать прототип похожим на реальность, то именно так и стоит сделать.
  9. При тестировании необходимо просить пользователя проговаривать вслух все мысли и действия и вести видеозапись самого процесса тестирования.

image

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

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

Что такое UI/UX?


UX/UI дизайн существует с незапамятных времен и относится не только к приложениям и сайтам. Просто раньше он назывался по-другому. Например, швейная машинка Зингер. Ведь кто-то еще в 19м веке придумал, как она должна выглядеть и как ей пользоваться. При этом в основе лежала цель, которую должен достигнуть пользователь сшить что-то быстро, красиво и качественно.

image

Так, что же представляют собой UI и UX дизайн?

UI расшифровывается как user interface и переводится пользовательский интерфейс. Под этим термином обычно понимают визуализацию экранных форм и интерфейсов. UI это про графический дизайн. UI-дизайнер работает с цветами, композицией, анимацией, шрифтами. На основе черновых схематичных набросков (вайрфреймов) UI-дизайнер собирает финальный дизайн-макет.

UX или User Experience переводится как пользовательский опыт. То есть это про то, как работать с интерфейсом, удается ли пользователю достичь цели, легко это или сложно. UX дизайнер перекладывает клиентский опыт на интерфейс, строит и проверяет гипотезы взаимодействия пользователя с системой.

Под UX/UI дизайном понимают проектирование любых пользовательских интерфейсов, в которых удобство использования так же важно, как и внешний вид.
UX и UI дизайны часто путают, так как они идут рядом друг с другом, но все же это разные понятия, которые в конце пути должны слиться в единое целое.

image

Связь прототипа и UX/UI дизайна


Является ли прототип информационной системы UX/UI дизайном? На мой взгляд, является.
Является ли UI/UX дизайн прототипом? Да, но только в случае, если бизнес логика наложена на интерфейс пользователя тем или иным способом. Если пользовательский опыт описан где-то на бумажке и его невозможно продемонстрировать клиенту на интерфейсе, то у нас есть отдельно UI и UX дизайны, но прототип отсутствует.

image

Есть хороший пример прототипа без разработки ПО. На листах бумаги рисуются страницы сайта. Экспериментатор садится перед пользователем и кладет перед ним лист с главной страницей сайта. Пользователь пальцем тыкает на кнопку или показывает на текстовое поле, поговаривая, что он туда вводит. На каждое действие пользователя экспериментатор заменяет предыдущий лист новым, в котором отображен ответ системы на действия пользователя.

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

Но, что будет, если убрать экспериментатора и оставить пользователя наедине с листами бумаги? Останется UX/UI дизайн, а прототип работать не будет. А значит, будет невозможно протестировать логику работы системы.

Инструменты для создания динамических прототипов


Представим ситуацию, когда Вы уже определили, что делать и остался лишь вопрос как реализовать прототип. Для создания кликабельных прототипов существует много различных инструментов. Ниже в таблице приведены наиболее популярные системы.

Инструмент


Описание


inVision, Marvel, Flinto
Позволяют указать по клику, на какую область одного макета страницы
нужно отобразить другую.
Prott, POP
Самые простые инструменты для быстрой проверки гипотез. Достаточно нарисовать скетчи карандашом, сфотографировать и указать области, при нажатии на которые необходимо перейти на следующую страницу.
Proto.io, Framer, Origami, Form
На основе макетов страниц позволяют анимировать отдельные объекты (слои) и делать более сложные и интересные переходы.
Axure, Wireframe
При создании прототипа используются простые фигуры и ссылки на макеты, если их много.При создании прототипа используются простые фигуры и ссылки на макеты, если их много.
Webflow, Figma
По факту являются конструкторами сайтов. С их помощью можно создать первую версию продукта. Отлично подходят для прототипирования в случаях, когда вам нужно сильно больше, чем переходы между статичными экранами.
Wix, WordPress, Tilda
Конструкторы сайтов. Удобные инструменты для создания рабочих прототипов людьми, непосредственно взаимодействующими с клиентом, без привлечения профессиональных UX и UI дизайнеров.

Далее в качестве иллюстрации создания прототипа рассмотрим пример создания личной страницы в Figma.

Что такое Figma?


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

Плюсы и минусы Figma


К плюсам работы в Figma можно отнести:

  1. Бесплатна в случае, если над проектом работают не более 2х пользователей.
  2. Создание и отрисовка макета в одной программе
  3. Существует огромное количество уже готовых шаблонов сайтов
  4. Для работы с Figma требуется свежая версия браузера, а десктопная версия не требует мощного и современного компьютера.
  5. Сохранение версий проекта до 30 дней на бесплатной версии

Минусы Figma:

  1. Отсутствие русификации. Работать в Figma приходится на английском языке.
  2. Figma не работает оффлайн, так как требуется синхронизация с облаком.

Пример создания простейшего прототипа в Figma


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

Шаг 1. Регистрация


Не обязательно регистрировать отдельный аккаунт в Figma. Если у Вас есть Google-почта, то можно зайти в сервис с ее помощью. При первичном открытии Figma сразу предложит пройти краткое обучение работы с программой.

Шаг 2. Создание проекта


Для создания нового проекта достаточно нажать + в правом верхнем углу экран. Там же можно открыть один из ранее загруженных шаблонов.

Шаг 3. Создание рабочей области страницы


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

Но сейчас речь не об адаптивном дизайне, а о том, что создавая рабочую область, мы по факту создаем основу интерфейса будущего прототипа, и пользователь на выбранном типе устройства будет видеть наш макет так, как он выглядит в Figma. Отдельно отмечу, что в Figma рабочая область сайта называется фреймом.

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

image

Шаг 4. Добавление картинки


В Figma очень легко добавлять и обрезать картинки под любые формы. Для этого достаточно добавить на рабочую область нужные фигуру и изображение, выделить оба объекта с помощью сочетания клавиш ctrl и нажать сочетание ctrl+alt+M. При этом важно, чтобы картинка была выше фигуры. Выделять фигуры можно как на рабочей области, так и на панели слева, щелкая на их названия.

image

Шаг 5. Добавление текстового поля


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

image

Шаг 6. Создание меню


В данной статье я не преследую научить читателя всем аспектам работы с Figma, поэтому меню у нас будет самое простое двухкнопочное. Кнопки представляют собой прямоугольники, объединенные с текстовым полем. Можно объединить объекты в группу, нажав CTRL+G, а потом отцентрировать текстовое поле по центру будущих кнопок.

Шаг 7. Дублирование основы страницы


В основание страницы входит: рабочая область, меню и текстовое поле. Чтобы создать копию ее копию можно вынести маску изображения вне группы объектов первой страницы. Для этого достаточно левой кнопкой мыши нажать на название маски и перетащить иконку вверх. Затем в перечне объектов выбрать группу объектов, входящих в основание первой страницы, и нажать CTRL+D.

image

Шаг 8. Добавление внешних ссылок


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

image

Шаг 9. Добавление ссылок между страницами


Добавление ссылок на объекты внутри Figma аналогично добавлению ссылок на внешние источники за исключением того, что надо где-то взять ссылку на внутренний объект. Для этого надо кликнуть правой кнопкой мыши по объекту и выбрать в выпадающем меню Copy/Paste и Copy Link.

image

Шаг 10. Демонстрация прототипа


Последний шаг демонстрация прототипа заказчику. Самое простое нажать кнопку Share в правом верхнем углу экрана и во всплывающем окне выбрать Сopy Link.

image

Результат


Вы можете просмотреть и прокликать выполненный прототип, пройдя по ссылке.

Видеоуроки по реализации прототипов в FIGMA


В качестве заключения хочу приложить ссылку на видеоуроки, созданные телеграмм-каналом Наука и дизайн. Всего 2,5 часа в 15ти уроках по использованию FIGMA, в которых рассмотрены все основные функции и кнопки.

Еще хороший ресурс с видеоуроками по созданию прототипов в Figma.
Подробнее..

Личный опыт обучения в Яндекс.Практикум

28.12.2020 00:15:11 | Автор: admin

Если вам неинтересна тема образования, то смело пропускайте этот длинный текст. Для тех, кто всё же ищет отзыв о Яндекс.Практикум, я рекомендую потратить некоторое время для ознакомления со структурой обучения.

Синопсис

Абзац для тех, кто хочет без "лишней воды" получить реальный отзыв студента Яндекс.Практикума. Курс "Дизайнер интерфейсов". Длительность семь месяцев. До оплаты есть возможность пройти часть учебника. Оплатить можно частями или сразу. Язык изложения материала доступный для любого возраста. Даже если Вам пятьдесят Вы сможете осилить курс. И это факт, так как со мной учатся взрослые люди. В учебнике есть задания, которые необходимо выполнять, чтобы закреплять материал и понимать следующие темы. Обучение проходит спринтами. У Вас есть время для чтения учебника и выполнения заданий. Задания бывают двух типов. Мини-проекты и обычные задания. В учебнике нет возможности читать хаотично. Материал подаётся в строгой последовательности. Некоторые задания необходимо выполнять чтобы перейти к следующему параграфу. Задания со звездочкой необязательны к выполнению, но желательны. В конце каждого спринта нужно выполнить финальный проект, который имеет два дедлайна. Мягкий и жесткий дедлайн. Если Вы сдаете проект до мягкого дедлайна и получаете обратную связь от ревьювера с замечаниями к проекту, у Вас есть две итерации на исправление замечаний. Так Ваш проект становится лучше и Вы больше понимаете и усваиваете. Если Вы не успели сдать проект до мягкого дедлайна, у Вас есть жесткий дедлайн. В этом случае отправляя работу на ревью, вы имеете одну попытку на исправление. Кто не справляется с дедлайнами, оправляется в академический отпуск. Такие студенты среди нас были. Причины разные загруженность человека, семейные проблемы, здоровье и прочие. Когда Вы знаете, что кто-то не смог продолжить обучение и ушел в академ, Ваша мотивация повышается. Кроме учебника с заданиями и проектами, которые могут стать основой для Вашего портфолио, особое значение в обучении занимает обратная связь и социальная активность среди таких же как Вы. Для общения используется площадка slack.com. Для каждого потока учащихся свой куратор, преподаватели и наставники. Согласно правилам, Вы можете задавать вопросы в личных сообщениях, в специальных тематических каналах. Отвечают быстро, без задержек, согласно установленному регламенту. Здесь же проходит общение всех студентов. Весь поток поделен на группы. У каждой группы своё название. За каждой группой закреплен свой наставник и преподаватель. По общим вопросам обращаться нужно к куратору. Наставник проводит вебинары в которых предусматривается разъяснение непонятных тем. Главное, что всё проходит в режиме диалога всех участников вебинара. Это очень мотивирует. Можно общаться по видеосвязи или писать в чате. Некоторые вебинары посвящены разборам выполненных студентами работ. Есть вебинары которые ведут приглашённые дизайнеры. Если что-то непонятно в учебнике или во время выполнения проектов, нужно смело задавать вопрос преподавателю. Он в своем сообщении может объяснить тему или вступит в диалог если остался непонятный материал. Кроме общения slack используется для обмена ссылками на интересные и полезные ресурсы. В частности, UX, UI, типографика и смежные направления. Очень важным, с моей точки зрения, является самоорганизация и мотивация. Учебника достаточно для понимания предмета и формирования навыков для будущей работы. И всё-таки, эта система совершенна только при участии самого студента. Каждый человек уникален и скорость понимания и способности индивидуальны. Поэтому необходимо обращаться к внешним учебным материалам. Yandex, Google и другие поисковые системы содержат множество ссылок на полезные для ознакомления источники дизайнерской мудрости. Youtube с бесплатными уроками инструментария UX / UI дизайнера, профессиональная литература, чаты дизайнеров, где можно спросить и получить много полезной информации по профессии, просто необходимы. Курс от Яндекс.Практикум плюс личное дополнительное самообразование по профилю в совокупности дают очень и очень заметный результат.


Абзац, необязательный к прочтению

Я на протяжении двух лет следил за развитием событий в сфере онлайн-образования. Хотелось не ошибиться, сделать правильный выбор. Просмотрев хвалебно-зазывательные вебинары множества школ, решил что Яндекс.Практикум имеет больше плюсов. Во-первых, имя которое у будущих работодателей на слуху. Во-вторых, уверенность в том, что компания Яндекс нанимает лучших специалистов и методистов в сфере образования по конкретному направлению. В-третьих, сертификат от Яндекс.Практикума. Направление "Дизайнер интерфейсов" востребованное. Настоящих специалистов в этой области не много. А значит, есть возможность окончить данный курс и устроиться на работу в качестве UX/UI дизайнера. Меня лично интересуют финансовый сектор. Хотелось бы работать дизайнером интерфейсов в Альфе, в Сбере, в Тинькофф. Закончив обучение, я постараюсь написать о своих результатах. :) Интересно ведь, станет ли мечта реальностью?

Хотелось бы работать дизайнером интерфейсов в Альфе, в Сбере, в Тинькофф.

Когда я узнал про новый курс от Яндекс.Практикум, то готов был стать первым студентом. Однако по личным причинам задержался и попал только во второй набор. Я не жалею. Уверен, что судьба не зря так распорядилась. Среди второго набора много студентов находятся в ежедневном, ежечасном контакте вне образовательной площадки. Мы постоянно общаемся на темы дизайна, UX и за четыре месяца стали очень близкими друзьями. Я надеюсь мы продолжим общение и после обучения. Наше общение и обсуждение проектов из учебника, обмен решениями и критика друг друга делает что-то магическое. Будто в естественных условиях формируется команда специалистов одного профиля. :) Меня это радует и мотивирует.

Абзац про то как Яндекс.Практикум трансформировал моё сознание

Почему именно такое ощущение? Имея за плечами большой опыт в сфере графического дизайна, я сформировал личное отношение к времени, к работе, к периодам "выгорания", к застоям. В моём случае обучение в Яндекс.Практикуме совершает rebirth сознания. Я задумался над многими моментами в своей основной профессии. Переход в онлайн-среду предполагает скорый темп жизни, быть всегда в курсе трендов, уметь гасить состояние "творческой лени" ради результата. Раньше ограничения в виде спринтов с дедлайнами, принятых во многих компаниях, как режим работы, меня смешили и возмущали! Как можно делать творчество, находясь в рамках? :) Ибо любой дизайн это творчество. Но сейчас, я изменил своё мнение, я понимаю, что эти рамки нужны, они необходимы. Моя проблема личного характера, это взгляд на материал для вэба через призму мировоззрения графического дизайнера. :) Вроде монитор, экран, тот же лист бумаги, но это не так К тому же графика в моём случае это рождение статики через динамику. А работа в сфере дизайна интерфейсов предполагает динамику и только её. Причём связь каждого участка изображения, форма и место расположения активных зон экрана накладывает особую логику на процесс создания дизайна. Я это начал осознавать только благодаря учёбе. Моё незнание элементарных вещей в дизайне заполняется кирпичиками знаний из дизайна интерфейсов. А самое главное, это осознание связей блоков интерфейсного мира. Это на уровне интуиции и постоянного процесса мышления. Теперь это происходит автоматически вторым потоком. Я могу идти, ездить, есть, смотреть ТВ или делать любую другую работу, но мой поток мыслей о приложении или взаимодействии элементов экрана идет параллельно человеческой жизни.

Я очень много времени посвящаю курсу. Точнее даже не чтению и выполнению заданий, а рассуждению на пройденную тему. А затем я люблю углубляться в тему, читая статьи из интернета или проводя часы в Youtube, просматривая вебинары посвященные пройденному или ролики о новых трюках в Figma. Да, Figma заменила мне теперь и Люстру и Шоп. Вот уже четыре месяца я работаю в обычном браузере только на Figma. Дело не в удобстве. Мне захотелось отказаться от моих обычных инструментов чтобы привыкнуть к новой среде. У меня получилось. Появилась скорость, работа с горячими клавишами упростила процесс. Проекты которые нам дают в Яндекс.Практикуме обеспечивают развитие творческого потенциала. Один из проектов, который перевернул мой аналитический ум, ставил задачу усовершенствовать часть флоу реально существующей программы. Вместо выполнения поставленной задачи, я умудрился увлечься полным флоу, разложить весь сценарий со всеми дополнительными в огромнейшую схему взаимодействия. Когда я окончил работу, мне было совершенно очевидно, где я могу что-то изменить не повреждая другие блоки взаимодействий. И именно после этого задания, я понял, что потратив много времени, я отошел от задания. Меня это отрезвило. Ведь конечная цель любой работы придерживаться выполнения поставленной задачи. И тут дилемма. Хочется знать как работает приложение чтобы сделать его лучше. А нужно сделать лучше только в рамках некоторого блока. :) В следующем проекте я уже учитывал свою особенность перерабатывать и следую плану разработки. :) Эти же задания вызвали у меня много вопросов в отношении расположения активных элементов. Подняв эту тему в одном из чатов, я получил ответ отсылающий меня на исследования каких-либо учёных умов в области человек-машина. Я задумался над пользовательским опытом ещё до создания MVP. То есть понял, что для меня критично знать зоны активной деятельности на экране, обоснованные научными исследованиями и практикой использования. Мы рисуем эту кнопочку в этом углу не просто так. Так диктует пользовательский опыт. При этом в данном конкретном сегменте нового приложения этого опыта может не быть. Его нужно получить или предположить, каким он может быть. Удобство управления не в плоскости одного экрана, а в сценарии и последовательности взаимодействий, чтобы получать максимально короткие цепочки связей для формирования результата и предоставления пользователю вот моя стезя. Здесь я и хочу себя применить.

UI это бусы на нитях UX.

В этой структурности и порядке есть красота и польза для людей которые будут потреблять конечный продукт. UI это бусы на нитях UX. Каким бы значительным не был UX, UI это часть мира пользователя. Лояльность пользователя определяется не только удобством смыслового содержания действий, но и красотой и пониманием интерфейса. Поэтому UI также необходимо осмыслять и давать оценку его применимости основываясь на психологии человека, а также системы визуального и тактильного восприятия. К этим умозаключениям меня подтолкнула собственная цепочка действий - желание сменить профиль работы, курс "Дизайнер интерфейсов" от Яндекс.Практикум, общение в чатах UXUI дизайнеров. У меня складывается новое понимание системы взаимодействия под названием "Человек-машина", где интерфейс центр сознания обоих. Ведь человек это сознательное существо, и машина какую бы работу не выполняла, наделена свойствами, определяющими её сознание. Задача дизайнера интерфейсов создать модуль общения для обмена продуктом сознания обоих объектов. Мне кажется, что дизайнер интерфейсов или лучше сказать конструктор интерфейсов, это профессия будущего. И функциональные обязанности профессии шире во много раз, по сравнению с нынешним пониманием, ограничивающимся только вэб и мобильной разработкой.


P.S. Чтобы больше знать о пользовательском опыте создал сообщество UX в VK. Надеюсь наполнять его исследованиями в области интерфейсной науки.

Подробнее..

Почему мне не нравится дизайн сайта ИЖЛТ и какие проблемы присущи сайтам образовательных учреждений

28.12.2020 22:14:52 | Автор: admin

Важно: в статье будет высказываться субъективное мнение касательно нескольких сайтов образовательных учреждений. Я не ставила перед собой цели изучить аудиторию этих сайтов, провести анализ всех порталов и переделать их дизайн. Это просто моё мнение.
А ещё здесь будет много картинок.

Сегодня я хочу показать сайт института журналистики и литературного творчества, расположенного в Москве и готовящего бакалавров журналистики. Думаю попробовать себя в журналистике, когда появятся деньги поступить на заочку.

Итак, для посещения сайта вобьём в поисковик аббревиатуру. Нас встречает вот такой креатив:

Результат поиска Результат поиска

Спасибо, что включили в метаданные телефон и адрес. Описание больше, чем нужно для поисковой выдачи. Написанное название сайта с маленьких букв выглядит однородно, но вот зачем выделять "об институте" нижним подчёркиванием? Я б ещё поняла, если бы вуз обучал программистов и тестировщиков, но это гуманитарный вуз. Не попадает в специфику.

Далее видим вот это безобразие:

Главный экран сайта ИЖЛТГлавный экран сайта ИЖЛТ

Вроде бы использовано два цвета, но исполнение сбивает с толку. Для чего эти синие линии, образующие ромбы? Я пытаюсь отследить их направление взглядом и не понимаю закономерности. Буквы слишком тонкие и сливаются с фоном, из-за этого читать текст трудно. Не хватает контрастности? Я перевела скриншот в чёрно-белый, и тут ситуация с текстом намного лучше:

Чёрно-белый главный экран сайта ИЖЛТЧёрно-белый главный экран сайта ИЖЛТ

Думаю, дело в красном цвете. На его фоне буквы читаются намного хуже, чем на синем.

Обратите внимание, что шрифт у названия вуза, у дополнительной информации и у названия других блоков разительно отличаются. И шрифт с засечками читается намного хуже. Это программа Сдохни или умри, только с чтением текста шрифтом с засечками на странном красном фоне.

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

Кстати, стрелки, которые вы видите, не ведут на новые страницы или в низ страницы. Они скрывают дополнительные пункты:

Раскрыла всю дополнительную информациюРаскрыла всю дополнительную информацию

Оставшаяся справа от блока о дипломе стрелка ведёт уже на другую страницу:

Информация о поступлении. Цены и ссылки на правила и условия приёмаИнформация о поступлении. Цены и ссылки на правила и условия приёма

На этой странице уже другая цветовая гамма, но контрастности ещё не хватает. Всё те же беды со шрифтами. А ещё я не понимаю, как этот фон сделан. Напишите в комментариях, если знаете, как.

Плюс стоимость учёбы в вузе и профили видны сразу, не спрятаны в приложениях и нормативных документах. Но из-за отсутствия акцентов и направляющих их сразу не видишь.

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

Внимание на правый край страницыВнимание на правый край страницы

Кратко перечислю главные проблемы сайта:

  • сбивающий с толка фон;

  • неудачно подобранный оттенок красного цвета на фоне;

  • неудачная комбинация шрифтов;

  • отсутствие структуры и направляющих, в том числе из-за сбивающего с толку фона.

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

Официальная версия сайта ИЖЛТОфициальная версия сайта ИЖЛТ

На ней же доступен режим чтения, в котором настраивается контрастность и размер шрифта. Здесь мы наблюдаем типичные и знакомые разделы сайта: О сайте, Абитуриентам, Студентам и так далее. И неприятное окошко с чатом в придачу. В этой версии выдержан фирменный синий цвет вуза, а если пролистать к блоку с новостями, то увидим ещё креативы:

Внимание на картинку в третьем блокеВнимание на картинку в третьем блоке

Как будто в начало десятых вернулась, спасибо. <sarcasm>

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

Вот, например, сайт моего колледжа. Он сделан на ucoz, но спасибо админу, что решил не прикладывать одни только документы:

Страница с перечнем документов для поступления во ВГЭКСтраница с перечнем документов для поступления во ВГЭК

А это сайт МГУ им. Ломоносова. Здесь прекрасно всё: обилие блоков с новостями, статьи о патриотических акциях, которые недавно проводили:

Главная страница МГУ им. ЛомоносоваГлавная страница МГУ им. Ломоносова

На странице с направлениями подготовки слетела вёрстка фильтров:

Страница с направлениями подготовки в МГУ им. ЛомоносоваСтраница с направлениями подготовки в МГУ им. Ломоносова

А это главный экран сайта Вятского государственного университета. Тут ничего и говорить не надо:

Главный экран сайта Вятского универститаГлавный экран сайта Вятского универстита

Как правило, сайты таких учреждений уже старые, их создавали на ucoz и сейчас поддерживаются инженерами-программистами, получающими максимум тридцать тысяч в месяц за работу. Я проходила практику в школе и видела это своими глазами. Часто на нормальное ведение сайта тупо нет времени, а на его перенос на другой движок нет денег.

Вернёмся к ИЖЛТ. Он поступил правильно и оставил название и перечень вступительных испытаний и стоимость платных мест:

Информация о заочном направлении подготовки журналистовИнформация о заочном направлении подготовки журналистов

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

В подвале сайта размещены ссылки на разделы сайта и на ресурсы для студентов. Также размещены ссылки на соцсети в иконках. Последние три ссылки нерабочие и никуда не ведут.

Подвал сайта ИЖЛТПодвал сайта ИЖЛТ

Четвёртая иконка ведёт на страницу лаборатории ИЖЛТ, на которой размещаются материалы из открытых лекций, анонс предстоящих событий и собственное издание. Эта страница сделана в Тильде, и веб-дизайнер даже не заморочился с фавиконом. Но зато оплатили домен!

Внимание на панель вкладокВнимание на панель вкладок

Что с этим делать

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

Нельзя просто так взять и приложить одни документы. Опишите в одном-двух абзацах то, к чему они созданы.

Уберите эти чёртовы всплывающие окошки связи. Они бесполезны, если на том конце сайта никого нет. Оставьте для связи почту, физический адрес с графиком работы приёмной комиссии и телефон.

Подберите нормальные шрифты. Для основного текста подойдёт моноширинный без засечек. Не используйте Times New Roman и простигосподи Comic Sans. При подборе гарнитуры для заголовков тоже не пускайтесь во все тяжкие.

Подберите нормальные контрастные цвета, которые будут подходить друг другу, а текст на их фоне прочитают ваши глаза. При подборе цветов используйте цветовой круг. Если текст на фоне не удобочитаемый, попробуйте сначала сделать его белым для тёмного фона или чёрным для светлого, а потом, если это не помогло, подберите другие оттенки фона. Если как фон используете картинку, то затемните и заблюрьте её но слегка, чтобы она оставалась понятной.

Если нет ресурсов перенести сайт на другой движок, подберите или измените нынешний шаблон сайта на ucoz, чтобы интерфейс не отталкивал посетителей.

Лаконичный дизайн испортит патриотическая картинка, поэтому по возможности откажитесь от них. Вместо них подойдут фотографии с мероприятий.

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

Подробнее..

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru