Bubleev

Представляю вам собственную подборку полезных  каналов для художников и искусствоведов любого уровня

Каналы для поиска вдохновения

@bestfromai - интересный самобытный канал с иллюстрациями, сгенерированными искусственным интеллектом

@ruart - публикуют работы крутых авторов и своих подписчиков

@crazyart - иллюстрации, картины и скетч-арты именитых художников

@uvazhayu - картины и выставки художников старой эпохи

Каналы с различными гайдами и лайфхаками

@simpleartist - анатомии, большое кол-во техник рисования и видео с их процессами

@lessons_and_tutorials - уроки и туториалы

@risovanie_AT - уроки по рисованию, техники

@I_am_Artist - референсы, уроки, арт-подборки

@art_ardz - учимся рисовать, поэтапные процессы

Другие полезные и интересные каналы

@shakko_kitsune - Искусствовед и журналист Софья Багдасарова рассказывает об искусстве необычными способами.

@your_sketchbook - иллюстрации, полезные книги и статьи (Есть свой магазинчик для художников и чат)

@arttaste - всё про искусство

@kopeikinnikolai - иллюстрации Копейника

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

Из новых окон добавились:

Окно фильма

Мои билеты

Начал использовать сетку на 12 столбцов (до этого стояла на 3 столбца и включал ее только чтобы соблюдать отступы по бокам). Узнал, что у фигмы есть приложение для телефона "Figma Mirror". С ее помощью можно в реальном времени просматривать прототип на телефоне. Все время пользуюсь ею во время работы, очень удобно. Постепенно набиваю руку, начинаю пользоваться хоткеями. Параллельно изучаю книгу Йоханнес Иттен - Искусство формы, ну и хаотично посматриваю гайды на ютубе. На этом пока все. А, ну и прототип для наглядности (уже с телефона). 

Предыдущие посты:

UX/UI Дизайн - Часть 1 - UX/UI Дизайн - Часть 1

UX/UI Дизайн - Часть 2. Выбор приложения и первая практика - UX/UI Дизайн - Часть 2. Выбор приложения и первая практика

UX/UI Дизайн - Часть 3. Редизайн - UX/UI Дизайн - Часть 3. Редизайн

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

Первое окно, которое нас встречает, это "Сеансы на сегодня", вид меню и личный кабинет. Обойдемся пока что этим.

Как мне показалось, над дизайном тут особо не заморачивались. Сперва я начал анализировать. Для чего чаще всего могут заходить в приложение кинотеатра? Определенно для покупки и бронирования билетов. Так же у кинотеатра есть функция "SOS", благодаря ей можно во время сеанса пожаловаться на мешающих посетителей. Понимая, что приложением будут пользоваться во время просмотра кино, в темном помещении, то и основными цветами будут темные оттенки. И основываясь на дизайне сайта кинотеатра, вторым цветом я взял желтый.

Мне симпатизировал переключатель расписания, где отдельно вынесены ближайшие дни (Сегодня, Завтра, Послезавтра). Изначально я выполнил переключатель в подобном виде, но как по мне он выглядел не очень привлекательно.

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

В итоге главное окно у меня получилось таким. Кстати, все это время я руководствовался сайтом material.io, в частности вкладкой components. Там очень много полезной информации по гайдлайнам с разметками и прочим. Чтобы во всем этом разобраться даже не обязательно владеть английским языком.

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

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

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

Предыдущий пост: UX/UI Дизайн - Часть 2. Выбор приложения и первая практика

И так, я подошел к выбору программ. Сначала я планировал свои первые каракули изобразить в фотошопе. Ведь это основной и всеми признанный помощник для редактирования, да и работаю я с ним достаточно давно. Однако прогресс не стоит на месте и имеется ряд программ, разработанных специально для разработки дизайна интерфейсов. Из основных: Figma - есть возможность работать над проектом сразу нескольким дизайнерам, сразу просматривать код стилей и еще много интересного, чего я не знаю). Adobe XD - не знаю какими особенностями она славится, но разве Adobe сделает плохо?. Sketch - говорят хорошая приблуда, но, к сожалению доступна только для Mac, к тому же платная. Ну и Illustrator рекомендуют для удобной работы с svg форматом (вектор).

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

Изучать интерфейс Фигмы я начал по урокам ютуб-канала "Наука Дизайна". Посмотрев несколько уроков (Из серии Мини-курс Web Design) я перешел к практике. Я долго не мог определиться над тем, что же мне начать делать? В итоге решил скопировать главную страницу Play Market`а. Может на первый взгляд интерфейс выглядит предельно просто, но приступив к работе, понимаешь, что не все так легко, как казалось. Конечно, в полной точности воссоздать дизайн программы мне не удалось. Как минимум я не смог найти идентичные иконки. Пришлось брать те, что имелись в всеобщем доступе интернета. Так же я не особо понимал, какой сеткой руководствовались дизайнеры гугла, поэтому в основном все делалось на глаз. Еще заметил, что все агитируют использовать четные цифры - четные отступы, четный размер шрифтов. Однако подставляя свой текст с имеющимся скриншотом он никак не совпадал с четными цифрами в настройках. А вот нечетные очень даже подходили. Из-за этого у меня возник вопрос: Таким образом дизайнеры из гугла протестуют против стандартов или у них есть "свои" стандарты, о которых я не знаю. Очень надеюсь, что кто-нибудь пояснит в комментах). Кстати в результате я все равно не решился использовать нечетные размеры шрифтов, поэтому различия все же имеются. Вообщем своим первым опытом я доволен, как по мне получилось не плохо, конечно это далеко от оригинала, но общая конструкция не нарушилась.

Так же вот список книг, которые я планирую прочесть и считаю, что они должны быть полезны (Некоторые из них предлагали в комментариях к первому посту) :

Брингхерст - "Основы стиля в типографике",

Иоханнес Иттен - "Искусство цвета" (Хоть эту книгу я удостоился прочесть около года назад, но в список все равно включу, вдруг кому пригодиться),

Джанда Майкл - "Сожги свое портфолио! То, чему не учат в дизайнерских школах",

Брайан Трейси - "Выйди из зоны комфорта. Измени свою жизнь. 21 метод повышения личной эффективности" (Советуют для мотивации).

Привет, пикабу. На днях я решил освоить и разузнать, что такое ui/ux дизайнер, что входит в его обязанности, возможно-ли найти работу без опыта и должного образования и насколько сложно вот это вот все? Своим продвижением я планирую делиться с вами - в виде блога.

И так, разберемся что же означает UI/UX дизайн простыми словами.

UX - это User Experience (в переводе "опыт пользователя"). Т.е. это опыт, который пользователь получает при использовании нашего интерфейса. Удалось-ли ему найти необходимую задачу и как просто или быстро он это сделал.

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

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

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

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

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

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

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

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

Яндекс.Еда и Delivery Club.(Не реклама).

Начнем с Яндекс.

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

Давайте сравним его с Деливери. На первый взгляд интерфейс достаточно схожий.

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

Как по мне интерфейс Деливери оказался интуитивно понятнее и проще. 

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

Некоторая часть информации была взята со статьи https://habr.com/ru/post/321312/