Ответы пользователя по тегу Дизайн
  • Как строить карьеру в дизайне?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    У дизайнеров есть уровни по масштабу и сложности работы, которую они могут потянуть.

    Кто-то находится на уровне «иконки и баннеры», а вот качественно справиться с лендингом уже не может.
    Кто-то на уровне «страница» клепает лендинги и сайты из 10 страниц для малого бизнеса.
    Кто-то справляется с крупным на 100 экранов.
    Кто-то вышел на уровень «UI kit» и управляет дизайнерами с более низких уровней в масштабах крупного проекта.
    Кто-то способен создавать «дизайн-системы» и развивать несколько крупных проектов в рамках корпорации, заботится о восприятии бренда этой корпорации.
    Кто-то поднялся на уровень «архитектор платформы или операционной системы» и создает гайды для операционок, такие штуки как Material Design, в рамках которых существуют продукты множества других корпораций.

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

    Программист с реальным опытом коммерческой разработки в 10 лет, вряд ли станет работать ниже сеньора, а то и тим лида, то дизайнер с подобным опытом по сути, остается таким же специалистом, что и люди, с опытом 1-2 года
    — это не так.

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

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

    За год на фрилансе или в маленькой дизайн студии можно сделать десятки лендингов. После десятого и после сотого лендинга уровень профессионализма дизайнеров отличается много меньше, чем в 10 раз. Конкуренция происходит в рамках одного уровня.

    За тот же год можно сделать 1-2 крупных сервиса. Но чтобы положить в портфолио работу ещё более крупного масштаба, нужно уже несколько лет.

    Вы сейчас «предлагаете комплексные услуги», скорее всего, на фрилансе или в небольшой дизайн-студии и достигли «плато», когда развитие идёт всё медленнее. Если заполучить более сложный и масштабный проект не получается, уходите работать в продуктовую компанию. Там есть возможность расти в масштабе и переходить на новый уровень. Нужно рваться получить левел-ап, тогда дизайнеры с предыдущего уровня вам не будут конкурентами.
    Ответ написан
  • Может ли веб программист стать еще и веб дизайнером при отсутствии явных способностей?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Дизайн пользовательского интерфейса — это смесь инженерии, психологии и хорошего вкуса. Чтобы стать дизайнером не обязательно уметь рисовать. Достаточно иметь здравый смысл, некоторое количество знаний и развить вкус (натренировать свою нейросеть видеть разницу между красивыми дизайнами и некрасивыми).

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

    Если вам нравится делать работу дизайнера, читать/смотреть про дизайн, рассматривать красивые сайты, то у вас есть все шансы со временем стать хорошим дизайнером.

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

    Самая действенная мотивация — это получать удовольствие от процесса.
    Ответ написан
  • Примеры и идеи инфо-блоков для сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Если хотите потырить идеи, раскачать мозги или хлебнуть вдохновения, то погуглите по запросу «UI kit» на Behance, или в магазинах, типа UI8, или на сайтах производителей этих шаблонов, например, greatsimple.io

    В UI kit'ах используется компонентный подход и там можно найти различные элементы для сайта в нескольких вариациях, в том числе инфоблоки. пример: module01.greatsimple.io/.
    Ответ написан
  • Как правильно подготовить SVG-спрайт к вёрстке?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Когда-то я пытался побороть эту проблему и спрашивал об этом на Хабре https://habrahabr.ru/post/245583/#comment_8183581 (и демка есть).

    Это пока не лечится (я не встречал железобетонного решения). Даже идеальные иконки могут попадать между пикселей в браузере. Потому что, в браузере вычисленные значения высоты и ширины могут быть нецелочисленными. И тут суб-пиксельное сглаживание играет дурную роль: «мы теперь не обязаны округлять начальную позицию иконки до целых пикселей, мы может отрендерить ее прямо здесь, в точке 33.24px 46.05px! ура!»

    Без размытия будет когда svg внедряется через тег img, бэкграунд или base64. Но это уже не SVG-спрайт.
    Ответ написан
  • Из каких англоязычных ресурсов предпочитаете получать свежую информацию из мира UI / UX / Web Design?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Ленивый способ — поставить расширение muz.li вместо стандартной новой вкладки https://chrome.google.com/webstore/detail/muzli-2-...

    Несколько раз в день на глаза будет попадаться всякое новье с популярных сайтов. (Но иногда это отвлекает от работы)
    Ответ написан
  • Как сделать, что бы первый экран подстраивался под высоту окна браузера?

  • Стоит ли делать залипающее меню?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Фиксировать меню можно, когда достаточно вертикального пространства для основного контента (высота залипшего меню меньше либо равно 10% высоты вьюпорта).

    Если места под контент мало надо скрывать залипшее меню при прокрутке вниз, и выдвигать его при прокрутке вверх. Это позволит убрать ссылку «прокрутить вверх».

    То же самое на мобильниках: листаем вниз — весь экран под контент, как только листаем вверх — вылазит меню.
    Ответ написан
  • Как лучше сделать вывод новостных материалов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Первый вариант вообще неработоспособный: на тачевых устройствах :hover наступает только в момент тапа, т.е. посетители не увидят названий вообще.

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

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

    Скрывать название новости при наведении тоже не очень. Если посетитель хочет рассмотреть картинку, пусть кликнет саму новость и рассмотрит картинку внутри.

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

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

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

    Ссылки по теме:
    artgorbunov.ru/bb/soviet/20160316
    artgorbunov.ru/bb/soviet/20160127
    artgorbunov.ru/bb/soviet/20160420
    artgorbunov.ru/bb/soviet/20160427
    Ответ написан
  • Как подсказать пользователю (взрослый контингент) что логотип является ссылкой на главную страницу сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    При hover на логотипе сделайте какую-нибудь анимацию, например, фона. И добавьте tooltip с текстом «на главную» getbootstrap.com/javascript/#tooltips

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

    Если все совсем плохо и пользователи не учатся, или каждый раз новые, не стесняйтесь сделать в навигации пункт «на главную».
    Ответ написан
  • Как UI-дизайнеру с PSD макетами тестировать интерфейсы на экранах разных размеров?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Такое возможно.

    Если у вас все основные состояния уже нарисованы, экспортируйте дизайн в Adobe Edge Reflow
    https://www.adobe.com/ru/products/edge-reflow.html

    Тут вы сможете «докрутить» адаптивность на промежуточных брейкпоинтах без изучения кода.
    Ответ написан
  • Почему многие популярные интернет издания используют шрифт с засечками для основного текста, хотя это дурной тон?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Эти книги по веб-дизайну, в которых не рекомендуются шрифты с засечками, были написаны как минимум 5-8 лет назад и раньше, а в то время еще не существовало «ретина»-экранов и самым популярным разрешением экранов было 1024×768. При этом было модно рисовать трехколоночные сайты и, чтобы туда поместился хоть какой-то контент, основной текст приходилось делать размером 10—14px.

    На таких размерах (а если еще и без сглаживания) шрифты с засечками выглядели грязно и напрягали зрение.

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

    Посмотрите на theguardian.com — основной шрифт 16px с засечками, а подписи к картинкам 12px без засечек. У bloomberg.com основной шрифт 18px, а мелкие тексты без засечек.

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

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    1. Читайте теорию.

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

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

    3. Анализируйте подробнее. Обращайте внимание не только на то, что видно, но и на то, что не заметно. Откройте чужой дизайн (скриншот) в графическом редакторе и попробуйте подобрать модульную сетку, которую использовал дизайнер. Померяйте отступы между элементами, ищите закономерность. Так вы лучше поймёте теорию.

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

    Действуйте по алгоритму «теория» → «поиск чужих преимуществ» → «анализ чужих преимуществ» → «собственные эксперименты» вы быстрее повысите качество своих работ, потому что будете развиваться осознанно, а не случайным образом натыкаться на хорошие решения.
    Ответ написан
  • Нормален ли такой подход для работы с git'ом(хранение дизайн+код)?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Нет, неудобно.
    Версии у дизайна и кода меняются несинхронно. В общем случае, сначала обновляется версия дизайна, потом дизайн согласуют. Потом верстают согласованную версию, и, когда готово, меняют версию у кода.
    До согласования у дизайна может смениться несколько версий, на верстку попадет одна. И у кода может смениться несколько версий без изменения дизайна.
    Нет смысла синхронизировать дизайн и код, и хранить их в одном репозитории.

    Попробуйте https://www.pixelapse.com/ — система контроля версий для дизайнеров.
    Или www.invisionapp.com — там тоже есть версионность исходников, можно «форкать» проекты (но «мерджить» нельзя)
    Ответ написан
  • Как вы делаете дизайн сайта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    1. На первой встрече обычно удается узнать только область деятельности и смутные очертания того, как представляет себе результат заказчик. Обычно заказчик показывает пару сайтов из своей отрасли, которые ему нравятся. Мы с ним можем совместно на бумаге сделать пару эскизов и составить список «того, что должно быть на сайте».

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

    3. Дальше нужно узнать ответы на вопросы из пункта 2 и тогда можно оценить сроки и стоимость.

    4. Начинаю рисовать wireframes. В графическом редакторе (у меня Sketch) создаю новый документ, размечаю в нем модульную сетку и начинаю накидывать туда контент.

    На этом этапе у меня только белый фон, черный текст шрифтом по-умолчанию (Open Sans) и 2-3 оттенка серого для кнопочек, линеечек и плашечек. Никакого дизайна, но строго соблюдается модульная сетка. Контент использую только реальный (который дал клиент) или выдуманный (тексты с чужих сайтов, которые могли бы подойти к этому сайту, или придумываю текст сам), но ни в коем случае не «lorem ipsum» и не абстрактный текст ни о чем. Так как я делаю конкретный сайт на заданную тему, а не шаблон, то важно чтобы тексты были по-существу, и «рыба» тут будет мешать: если нечего написать, надо делать дизайн учитывая, что текста очень мало; если есть много текста, надо дробить его на подзаголовки, разбавлять врезками и иллюстрациями. Часть выдуманного текста потом перепишется в реальный, с использованием фактов о клиенте, остальное уберется за ненадобностью.

    5. Заливаю нарисованные страницы в invision, ставлю между страницами ссылки, ставлю комментарии, как это должно работать. Там, где контент придуман, заметка о том, что нужно переписать текст в таком же ключе. Где использована чужая иллюстрация, комментарий «заменить на настоящую» и т.д. Wireframes готовы.

    6. Заказчик видит более оформленный вариант, у него появляются конкретные комментарии, правки по текстам и фактам. Еще одна-две итерации и вайрфреймы превращаются в согласованное ТЗ — кликабельный прототип с реальными контентом.

    7. Начинаю раскрашивать вайрфреймы. Первая страница — «О компании». На ней обычно есть несколько абзацев текста, пару заголовков. Сначала шрифты: выбираю основной шрифт, размер, межстрочное расстояние. Font-family выбираю только из бесплатных шрифтов, иначе это может вылиться для заказчика в дополнительные затраты.

    8. На основе страницы «О компании» создаю отдельную страницу с типографикой и доделываю все остальные текстовые стили: заголовки, основной текст, lead-text, small-text, текст в таблице, списки, цитаты и отзывы, врезки, состояния ссылок в тексте, — всё, что встречалось в вайрфреймах. Позже на эту страницу будут добавляться состояния кнопок, полей ввода, табов и других интерфейсных элементов. Из элементов этой страницы создаю динамические стили, которые потом применяю ко всем остальным частям вайрфрейма.

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

    9. Применяю стили к вайрфреймам. Уточняю вертикальные расстояния между элементами и расположение по модульной сетке. Привожу в порядок слои и группы. Если какой-то элемент повторяется два и более раза, делаю из него символ.

    10. Отрисовываю все остальные элементы. Вайрфреймы плавно превращаются в финальный дизайн.

    11. Если в проекте много иконок, то делаю сборную страницу для иконок, а сами иконки символами вставляю на все остальные страницы.

    12. Заливаю в invision, жду комментов от заказчика, вношу правки.

    13. Если правок больше нет, создаю слайсы для экспорта картинок, иконок и т.д. Опять навожу порядок в слоях и группах. Invision автоматически экспортирует все слайсы в папку assets. Ресурсы экспортирую в обычно в @1x, @2X и svg.

    14. Если верстальщик на Винде, заливаю исходник в https://zeplin.io/ — там можно через браузер посмотреть параметры шрифтов, размеры и расстояния между элементами.

    --

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

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Для меня на данный момент Sketch.
    На Винде это Adobe Fireworks (ныне покойный).

    Очень надеюсь на Project Comet от Adobe, который обещают выпустить в начале 2016. Судя по анонсам, в нем будет всё лучшее от Скетча, но на всем платформах.
    Ответ написан