Штоэто? Дизайн интерфейсов?
Один из подвидов дизайна, где люди занимаются проектированием сайтов, мобильных приложений и всякого диджитал-удобства, с которым взаимодействует человек
Книжки
Для начинающих, чтобы понять, твое ли это вообще: Артемий Лебедев «Ководство», Адриан Форти «Объекты желания», Виктор Папанек «Дизайн для реального мира», Дон Норман «Дизайн привычных вещей», Влад Головач «Дизайн пользовательского интерфейса: искусство мыть слона»
Что-то более специализированное: Стив Круг «Не заставляйте меня думать», Илья Бирман «Пользовательский интерфейс», Артем Горбунов «Типографика и верстка»
Говно без задач и применения к реальности: Питер Морвиль, Луис Розенфельд «Информационная архитектура в Интернете», Алан Купер «Об интерфейсе»
Надо ли уметь рисовать?
Нет, но лучше иметь представление о композиции, потому что это поможет тебе красиво расставлять всякие блоки на странице, экономить место или наоборот добавлять воздуха.
Реквестирую хорошие и понятные книги по композиции, а то всё, что мне доводилось находить, скорее для художников и я нихуя не понял
В остальном, навыки рисования могут помочь тебе выполнять такие специфичные задания как «Нарисуй нам сет иконок для сайта», но надо сказать, что проще будет их где-то стащить и чуть-чуть видоизменить, чем делать с нуля.
Надо ли уметь программировать?
Нет, но лучше иметь хоть какое-то представление о верстке. Реквестирую понятных курсов для новичков, кстати.
Кто-нибудь проходил HTML Academy? А то оно чёт мне показалось нифига не сбалансированным по уровню сложности, местами прямо как на картинке с совой, и я забросил
Отдельная ссылка всем фронтендерам, которые хотят вкатиться в дизайн https://bespoyasov.ru/front-not-pain/
UX/UI дезигнер очень творческая специальность! Мне так сказали!
Нихуя. Как сказал один очень умный анон, творчество в этой сфере на уровне работы на токарном станке, а может и меньше. Придумывать первый gui для винды было творчеством, а сейчас за нас уже подумали десять раз. Концепция интерфейса — это что-то на уровне «перевести бизнес требования на графический язык». А ещё стоит помнить, что большинство заказчиков самодуры и практические задания, с которыми ты будешь работать, это угадать, что нравится заказчику и угодить его вкусу.
Весь пиздеж про интервью пользователей на практике разбивается о волюнтаризм конечного заказчика. Да что уж там, даже из результатов юзабилити исследований два человека могут сделать два разных вывода про интересы пользователей
Что должен уметь/знать, etc, начинающий дизайнер интерфейсов?
Очень холиварная тема, но я внесу свои пять копеек, которые вы в полном праве закидать помидорами.
— Умеет пользоваться скетчем или фотошопом, если он работает на неандертальцев
— В состоянии нагуглить UI-kit под определенный сайт и перекрасить его
— Знает бесплатные стоки, где можно таскать иконки и может переделать парочку
— Понимает для чего нужна сетка и знает, что размеры компонентов должны этой сетке соответствовать
— Читал про пользовательские сценарии, может мигом прикинуть парочку в зависимости от продукта и расписать полный сценарий пользовательского взаимодействия с сервисом, чтобы улучшить те или иные его части
— Понимает, почему пользователям нельзя задавать вопрос «А вы бы стали пользоваться этим сервисом?»
— Знает, что дизайн должен решать какую-то задачу пользователя или помогать ему в чем-то, а красота ради красоты отправляется в стол
— Морально смирился с тем, что дизайн это про «делать, переделывать и поддерживать» до бесконечности, а не сделать и забыть
— Может аргументировать каждое свое решение вроде кнопки или поясняющего текста. «Я так вижу» даже не всем художникам простительно
Можно ли вкатиться во фриланс с нуля?
Можно, но будет пиздец. Придется за гроши делать дяде Володе лендинг для его ремонтной шараги, да и клиенты будут очень редкие, потому что у тебя нет хорошего портфолио.
Тот сладкий фриланс, о котором все говорят, получается тогда, когда ты уже плотный pro с причесанным портфолио и опытом за плечами. Такой дизайнер уже вышел на приличные деньги, ему не нужно хвататься за каждый заказ, а на портфолио клиенты сами клюют.
Вкатываться же на фриланс с нуля или около нуля не стоит, точнее попробовать можно, ведь ты ничего не теряешь и даже получишь кое-какой опыт. Но не строй надежд на то, что сразу будешь зашибать 300к в месяц, как Ероха, сидя на пляже в Тайланде, лучше найти работу в нормальном офисе. Задачи примерно такие же, деньги стабильные и чаще всего них больше чем на фрилансе за счет регулярности платежей.
Опыт или портфолио?
Главное портфолио, потому что если оно приглянётся, то возьмут без опыта. Многое из того, что пишут в требованиях, является подстраховкой, условностью или зависит от команды, в которую попадешь, так что смело говори, что %требование_нейм% не знаю, но смогу освоить.
Статьи
Readymag про свет, типографику, сетки и анимацию https://almanac-rus.readymag.com
Никита Обухов «Дизайн в цифровой среде» http://tilda.education/courses/web-design/ (выложен бесплатно где только можно, просто погугли)
Про надписи в интерфейсах http://igorshevchenko.ru/blog/entries/interface-copy
Про большие красные кнопки https://designpub.ru/серёжа-и-большая-красная-кнопка-a45ff35393ef
Переговоры для дизайнеров https://megaplan.ru/letters/venus/
Шпаргалка для первой встречи с заказчиками https://bureau.ru/about/welcome/
Полезные штуки в Скетче http://blog.aic.ru/10-sketch-tricks/
Про мотивацию https://go.manyahin.ru
Полезные сайты
Сервис со списком всех сайтов, которые могут понадобиться дизайнеру https://www.evernote.design
Курсы кодинга для дизайнеров https://designcode.io
Иконки https://flaticon.com или https://material.io/icons
Бесплатные картинки http://pixabay.com или https://unsplash.com
Шрифты https://fonts.google.com
Как набирать телефоны, цифры, адреса и какие бывают черточки https://guides.kontur.ru/principles/typography/
Еще кучу всего можно посмотреть в местном стокаче, там классные ребята
Инструменты
Зависят от задач:
Проектируешь интерфейсы в большой компании — Sketch. В стартапе — Figma
Рисуешь иллюстрации — Photoshop, Illustrator
Обрабатываешь фотки — Lightroom, Photoshop
Передаешь макеты разработчику, а не складываешь всё в стол — Zeplin
Плагины
Нахуй не нужны, но в треде советовали haiku.ai для анимирования фигмы
Построение сетки в web для самых маленьких
Сетка — это область, в которой находится весь твой контент. Самая распространенная ее ширина — 960рх, а дальше лава. Примечание для желторотых: по краям рабочей области может быть еще сколько угодно пустого пространства, но все баннеры, кнопки и текст должны находиться в пределах заданной тобой ширины.
Сетка всегда включает в себя вертикальные колонки, которые разделяют всё пространство на части. Самое распространенное число колонок — 12, потому что это число делится на 2, 3, 4 и 6.
Если ширина нашей рабочей области 960px, а мы хотим разделить ее на 12 частей, то каждая часть будет шириной по 80px. Круто, мы только что вычислили ширину одной колонки, но забыли, что между ними должно быть расстояние.
В нашем случае, проще всего будет разложить 80px на 60px+20px, где 60px будет шириной колонки, а 20px — межколоночным расстоянием, но тут нельзя увлекаться, потому что существует минимальное межколоночное расстояние. Чтобы его вычислить, нужно знать, какого размера у тебя будет основной текст на странице. Есть мнение, что делать его меньше 14px грешно и за это рубят пальцы, поэтому 16px наш выбор.
Зная размер основного текста, мы сможем сказать, что минимальное межколоночное расстояние это 16px (или 14px если ты больной). Соответственно, если 60px+20px тебя не устраивают, то возможны вариации с 66px+14px, 64px+16px или 62px+18px
Еще можно считать специальной удобной штукой: http://gridcalculator.dk
Готовые интерфейсные решения
https://bureau.ru/soviet/
Советы Бюро охуенны, главное не вступай в их секту. Там сидят заросшие мхом профессионалы старой закалки и немного занудные люди, поэтому сначала тебе не всегда будут ясны их методы и решения, но потом въедешь.
