К сожалению, значительная часть сохранённых до 2024 г. изображений и видео была потеряна (
подробности случившегося). Мы призываем всех неравнодушных
помочь нам с восстановлением утраченного контента!
Превью картинок временно отключены пока мы проводим работы по техническому обслуживанию. Полноразмерные картинки доступны по их прямым ссылкам.
Штоэто? Дизайн интерфейсов?
Один из подвидов дизайна, где люди занимаются проектированием сайтов, мобильных приложений и всякого диджитал-удобства, с которым взаимодействует человек
Книжки
Для начинающих, чтобы понять, твое ли это вообще: Артемий Лебедев «Ководство», Адриан Форти «Объекты желания», Виктор Папанек «Дизайн для реального мира», Дон Норман «Дизайн привычных вещей», Влад Головач «Дизайн пользовательского интерфейса: искусство мыть слона»
Что-то более специализированное: Стив Круг «Не заставляйте меня думать», Илья Бирман «Пользовательский интерфейс», Артем Горбунов «Типографика и верстка»
Говно без задач и применения к реальности: Питер Морвиль, Луис Розенфельд «Информационная архитектура в Интернете», Алан Купер «Об интерфейсе»
Надо ли уметь рисовать?
Нет, но лучше иметь представление о композиции, потому что это поможет тебе красиво расставлять всякие блоки на странице, экономить место или наоборот добавлять воздуха.
Реквестирую хорошие и понятные книги по композиции, а то всё, что мне доводилось находить, скорее для художников и я нихуя не понял
В остальном, навыки рисования могут помочь тебе выполнять такие специфичные задания как «Нарисуй нам сет иконок для сайта», но надо сказать, что проще будет их где-то стащить и чуть-чуть видоизменить, чем делать с нуля.
Надо ли уметь программировать?
Нет, но лучше иметь хоть какое-то представление о верстке. Реквестирую понятных курсов для новичков, кстати.
Кто-нибудь проходил 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/
Советы Бюро охуенны, главное не вступай в их секту. Там сидят заросшие мхом профессионалы старой закалки и немного занудные люди, поэтому сначала тебе не всегда будут ясны их методы и решения, но потом въедешь.