Дизайнеры

Вы верно поняли, тут речь пойдёт именно о тех людях, которые делают дизайн интерфейсов. Я порой вижу вопросы на тему: Нужно ли понимать дизайнеру вёрстку? и Почему вы делите дизайнеров на Ui, UX, итд?. В этой статье я отвечу на эти вопросы. Маленькая затравка для продолжения - да, эти два вопроса отвечают друг на друга. О том, кто такие дизайнеры интерфейсов, и что они делают в рамках разработки приложений, мы разбирали в прошлой статье.

UPD: Расшифровка того, кто такой Ui/Ux дизайнер по ссылке выше.

Нужно ли уметь верстать?

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

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

Что делать дизайнеру который не понимает вёрстку? - тут ответ очевиден Нужно разбираться в том, что ты делаешь. Это вопрос компетентности, и ответственности за свои решения, которые должны иметь твердое основание.

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

Почему делят дизайнеров на Ui, Ux, продуктовых, рекламных и так далее ?

Если вы читали ответ на предыдущий вопрос, то вы примерно уже догадываетесь о том, почему дизайнеры интерфейсов, это не тоже самое, что дизайнеры печатной продукции, и другие История IT такова, что постоянно нужно развиваться и учиться новому, без этого есть большой шанс стать неактуальным. На заре зарождения веб интерфейсов дизайном занимались люди, которые сайты разрабатывали, была даже такая профессия Веб мастер. Сейчас, если делать так, как делали в начале нулевых - то дизайнер рискует остаться не у дел. Веб мастера переквалифицировались в фронтендеров, с их большим зоопарком фреймворков, технологий по типу Blazor, и и много чего еще Сейчас веб разработчику, для успешной карьеры, мало знать лишь ванильный JS и JQuery. Так и выводим, что дизайнер, который разрабатывает интерфейсы, знает помимо обязательной для всех видов дизайнеров базы - Теории дизайна, цвета, композиции еще и технические детали в виде Системного подхода, верстки, принципов работы клиент-серверных приложений, принципов работы запросов и ответов, структуры JSON объектов. Справедливо будет уточнить, что не очень нужно знать всё это на уровне профессиональной разработки, а хотя бы на уровне базовых принципов и механизмов работы. Этим собственно и делятся дизайнеры между собой - дополнительными, отраслевыми навыками.

Выводы

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

Обращайтесь только к квалифицированным специалистам.

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

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

Проблема

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

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

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

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

Колонки:

1. Номер

2. Фото

3. ФИО

4. Телефон

5. Email

6. Дата

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

8. Статус

9. Действия

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

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

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

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

Десктоп

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Наверняка многие, желая создать интернет-магазин, сталкивались с вопросами. Выгодно ли? Насколько трудно создать? Сколько стоит? Какие подводные камни? Давайте попробуем разобраться.

1. Зарождение идеи

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

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

Возьмем произвольную, достаточно популярную, марку, допустим холодильника.

Цена составляет 16399 грн.

Недолго порывшись в интернете находим цену дешевле:

Цена уже 14064 грн.

Еще более порывшись, найдя и позвонив поставщикам, выяснилось, что можно получить скидку 20-30% от первой цены в 16399 грн. То есть минимум, который можно получить, как магазин будет 13119 грн. Максимум 11479 грн. Очень неплохо!

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

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

Бизнес-процесс кажется интересным и обрисовался следующий список того, что понадобится для его реализации:

• Юридическое лицо с необходимыми разрешениями - имеется . ФОП (ИП) в нашем случае. Разрешения на данные виды деятельности были добавлены за 3 дня и стоили около 50 долларов

• Интернет-магазин - отсутствует

• Организация бизнес процессов. CRM-система - имеется. Битрикс24 . Даже если ее нет, в пределах 100 долларов, разово, можно нанять сертифицированного специалиста, который за день-два все наладит. Сама подписка стоит на Битрикс24 с нужными процессами стоит 50-60 долларов.

• Телефония для приема и аналитики звонков - имеется. Бинотел . Обходится около 30-40 долларов в месяц. Настраивается сотрудниками самой компании.

• Реклама - тема для отдельной статьи , но также настраивается специалистами, которых легко можно найти на фрилансе.

• Залоговая сумма денег - имеется , но не со всеми поставщиками требуется.

То есть потребовался только интернет магазин. Приступим!

2. Создание интернет-магазина. Выбор ниши. Анализ логики.

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

• Сантехника

• Бытовая техника

• Электро- и осветительное оборудование

Была выбрана ниша сантехники и зарегистрирован домен.

Следующим этапом встал выбор движка и использование шаблона либо создание своего магазина "с нуля". Уже имелся негативный опыт создания сайтов на Битрикс . Возможно он субъективен, но не хотелось повторять ошибки.

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

Дальше встал вопрос: использовать ли готовые шаблоны магазинов на форуме разработчиков opencart или рисовать магазин с нуля.

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

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

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

Какие преимущества и недостатки дает готовый шаблон:

• Стоимость с установкой около 150 долларов.

• Необходимость подгонки шаблона под мои надобности - около 200 долларов со стороны изготовителей шаблонов.

• Необходимость нанимать программиста для "допиливания" нужного функционала. По оценкам времени - около 600 долларов.

• Наличие в шаблоне всех возможных скриптов. То есть шаблон "заточен" под максимальную кастомизацию, наличие абсолютно любых решений. Все эти решения постоянно обрабатываются. Вероятность того , что если где-то что-то пойдет не так , то рухнет вся система, очень велика. Это очень видно по комментариям к шаблонам. Как пользователи сталкиваются с проблемами и насколько долго и муторно их решать.

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

• Сроки реализации по прикидкам 2-3 недели.

• Можно не иметь глубоких представлений о сайтах.

Какие преимущества у создания интернет-магазина "с нуля". Был сделан проект о создании интернет-магазина "под-ключ" на weblancer . Об этом позже , но данные следующие:

• Итоговая стоимость около 2700 долларов для 10-ти страниц и необходимых требований

• Возможность реализовать какой-угодно функционал

• Возможность создать очень яркий и запоминающийся дизайн

• Возможность влиять на создание магазина в процессе

• Максимальная легкость за счет использования только нужных скриптов

• Сроки реализации около месяца

Около 1000 долларов за шаблон или 2700 долларов за свой магазин "с нуля"? Был выбран свой, в желании создать "конфетку", которой можно будет долго наслаждаться.

3. Создание интернет-магазина. Поиск исполнителей. Нюансы, которые позволяют сэкономить.

Как было написано выше, проект о создании интернет-магазина "под-ключ" был размещен на площадке фриланса weblancer. В первые полчаса мы получили заявки около 10-ти исполнителей. Большинство указывало финальную цену в 2700-3000 долларов. 1000 долларов за дизайн, 700 долларов за верстку и 1000 долларов за натяжку\кодинг . Был выбран итоговый специалист исходя из большого количества работ в портфолио и их качества. Но самое главное - исключительно положительные отзывы. Поиск в Гугле по фамилии хозяина и названии агентства выдал только положительные результаты.

Исполнитель потребовал Техническое Задание. Нами было сделано очень подробное ТЗ и прототипы страниц.

Изучив его, исполнитель указал сроки 7 дней/7 дней/10 дней , 1000$/700$/1000$ за Дизайн/Верстку/Кодинг соответственно. Мы согласились. Была внесена предоплата 50% .

Дизайн был сделан качественно и в два раза быстрее срока. Дизайн очень понравился. Его увидеть можно тут https://www.behance.net/gallery/111417229/E-Commerce-santehnika

Оплатили остаток 50% , внесли 50% за верстку.

Дальше исполнитель месяц делал ужасную верстку и по концовке пропал.

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

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

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

Самое интересное в том, что так быстро ответили на заявку на фриланс платформе именно менеджеры. Все потребовали ТЗ. Часть предложила за отдельные деньги это самое ТЗ написать :-)

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

После анализа ситуации были сделаны следующие выводы :

• Наиболее дешевый способ найти исполнителей для создания своего интернет-магазина "с нуля" является использование фриланс площадок

• Необходимо составить четкое Техническое Задание , которое описывает все желания и требования. Либо нанять специалиста, который это задание сделает. Это не дорого.

• Для гарантии получения результата необходимо пользоваться Безопасной сделкой. Это обойдется в 5-15% от стоимости проекта в зависимости от площадки фриланса.

• Всю переписку с возможными исполнителями ОБЯЗАТЕЛЬНО вести внутри самой площадки. В таком случае администрация может встать на вашу сторону , даже если сделка не заключена.

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

• Следует избегать менеджеров диджитал-агентств ПРИ НАЛИЧИИ технического задания. Все что они будут делать это передадут ТЗ и будут копипастить сообщения конечному исполнителю. Достаточно в требованиях к проекту указать, что работа будет вестись только с конкретным исполнителем.

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

• Необходимо тщательно "погуглить" исполнителя на предмет отрицательных отзывов.

Мы нашли исполнителей на все три этапа. Дизайн обходится в 500 долларов ( 10 страниц), верстка 500-600 долларов. Натяжка и кодинг 600 долларов. Итого 1600 долларов в нашем случае.

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

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