В современном веб-дизайне существует достаточно много инструментов для web-дизайна. Это и классика — графические редакторы Photoshop и Sketch, и программы, совмещающие одновременно дизайн и верстку, такие как Macaw и Adobe Muse. И, как мы считаем, будущее web-дизайна — платформы для визуального дизайна сайтов в браузере, одним из примеров которых является Pixli.

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

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

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

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



На его примере подробно: о терминологии, чем интерактивный прототип лучше традиционного (10 моментов), как его использовать + несколько выводов.

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

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

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

Инвижн позволяет дизайнеру продемонстрировать заказчику прототип дизайна приложения, сделав его интерактивным. Кроме того, благодаря Инвижн, можно организовать слаженную работу внутри команды, между дизайнером, менеджером проекта, верстальщиком и программистами, независимо от платформы (macOs, Windows, Linux). Предлагаю вашему вниманию удобные сценарии использования связки Sketch + InVision.

Axure

• Действительно ли этот продукт не более чем инструмент прототипирования?
• Может ли UI designer полностью перейти на работу в Axure, отказавшись от других инструментов?
• Какие сильные и слабые стороны у этой программы?

Я постараюсь найти ответы на эти вопросы ниже. Сравнительно недавно я решил уйти от Adobe Photoshop к Axure, внезапно раскрыв для себя потенциал этого инструмента, не только как средства для прототипирования.

Очень много недопонимания в среде дизайнеров и разработчиков. Также много глупых вопросов, связанных с UX и UI у новичков. Часто просто из-за того, что люди не знают сути понятия UX/UI и, не зная о чем говорят, называют вещи не своими именами.

Я хочу раз и навсегда поставить точку и простым понятным языком объяснить, что значит «UX/UI дизайн».


_{Разные типы интерфейсов для заточки лезвий.}

Итак: требуется открыть .sketch-файл, созданный программой Sketch. Той самой, которая есть только на Mac’ах.

А Mac’a нет. Есть только Windows и этот дурацкий .sketch-файл, который кто-то прислал. И у этого кого-то Mac есть. А у тебя нет. Только Windows.

Введение

Эта статья о том, как набросать простенькую схемку из десятка элементов, когда под рукой нет ни Altium'а, ни Orcad'a, ни даже Visio, а Draw.io внезапно сломался.

Это совсем не сложно: современные браузеры поддерживают язык разметки SVG, с помощью которого в обычном текстовом редакторе можно легко и быстро нарисовать небольшую схему типа:

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

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

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

Динамический прототип

Рис. 9. Демонстрация динамического прототипа для проекта «Маркетплейс».

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

Почти 4 года назад мы написали одну из самых популярных статей в рунете про проектирование больших проектов с таким же названием, как и эта: часть 1 и часть 2. Только на Хабре её прочитало более 170 тыс. человек, а вообще она публиковалась в самых разных изданиях мира. Более 1000 стартапов использовали наработки из этой статьи для проектирования, и это только те, о которых я слышал и которые нам писали. Но время не стоит на месте, а мы постоянно развиваемся. С тех пор наша технология проектирования значительно эволюционировала и стала еще лучше. В этой статье мы опишем нашу обновленную технологию проектирования и покажем много живых примеров для каждой стадии.

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

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

В статье рассмотрим один из методов качественного анализа – Метод тематических сетей:

— обсудим частые ошибки качественных исследований и вспомним «кальсонных гномов»;
— разберем пошаговый алгоритм метода и его возможные ловушки;
— применим метод к анализу ИТ-продукта и нарисуем тематическую карту.

Статья будет интересна:

— исследователям;
— менеджерам продуктов и маркетологам;
— тем, кто использует в работе результаты исследований;
— тем, кто давно искал удобный метод структурирования нецифровой информации.

Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.

После каждого доклада, раз за разом мне задают два основных вопроса:

1. Должен ли дизайнер уметь работать с веб-технологиями?
2. С чего дизайнеру начать, если хочется с ними разобраться?

Постараюсь ответить на них в этой статье.

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



Если кратко суммировать все преимущества, прототипирование позволяет:

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

На сегодняшний день на рынке представлено такое изобилие решений для прототипирования всевозможных видов софта, что сориентироваться среди них непросто. На Хабре можно найти обзоры о множестве подобных программ. Как и многие другие разработчики, мы долгое время держались проверенного решения — небезызвестного Moqups — жалея времени тестировать многочисленные альтернативы. На Make My App — инструмент, о котором пойдет речь в обзоре, мы вышли случайно, благодаря рекомендации со стороны: в списках мы этот продукт не находили. Ниже представляем небольшой обзор, по которому можно составить общее представление о функционале приложения.

Многие рассказываю о проектировании: как пользоваться Axure или Sketch, какие функции должен содержать сайт, как правильно спроектировать страницу товара. Это все, безусловно, очень полезно, но не показывает полную картину происходящего в проектировании. В интернете даже нет ни одного полного примера технического задания на проекты такого уровня. На самом деле, чтобы спроектировать большой сайт, нужно потратить сотни часов на исследования, прототипирование и разработку подробного ТЗ. В этой статье я впервые в рунете покажу все этапы проектирования и результаты по ним, полный динамический прототип (более 150 прототипов) и большое ТЗ (более 200 страниц описания). Все это мы будем делать на примере проектирования аналога крупнейшей в мире E-commerce площадки «Alibaba.com».

Никогда не поздно пить “Боржоми”. Даже если кажется, что RGB уже никогда не станет ярче, пользователи не начнут понимать тебя с полупикселя, а стену “ВКонтакте” никто возвращать не собирается. Выход есть — надо бежать!

Antoine Valot, эксперт по user experience из Щвейцарии, в своем блоге на Medium, опубликовал очень хорошую статью, максимально созвучную с моим практическим опытом. Решившись на адаптацию данного текста, я специально снабдил его собственными мыслями и поправками на российские реалии, так, чтобы статья не являлась бы дословным переводом, а скорее новым совместным произведением, раскрывающим некоторые секреты профессии UX.


Да, сегодня уже трудно удивить кого бы то ни было новой «очередной статьей про юзабилити», в которой в сотый раз будут сделаны все те же очевидные выводы: возлюби пользователя своего, да не будет у тебя аргументов иных кроме результатов тестирования, сотвори себе кумира из Джобса…