Ответы пользователя по тегу Дизайн
  • Веб-дизайнеры, где вы делаете дизайн сайтов и приложений?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Основной рабочий инструмент на Маке это Sketch, на Винде — Adobe Fireworks. Photoshop использую только для создания коллажей, баннеров и обработки фотографий. Illustrator я так и не освоил: он мне видится монструозным и неудобным по сравнению со Скетчем и Файрворксом.
    Ответ написан
    3 комментария
  • Какими инструментами пользуются дизайнеры сайтов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Основной рабочий инструмент на Маке это Sketch, на Винде — Adobe Fireworks. Photoshop использую только для создания коллажей, баннеров и обработки фотографий. Выбор пал на эти инструменты потому, что в них удобно рисовать многостраничные интерфейсы, при этом можно использовать символы и общие стили, что ускоряет последующие правки дизайна.

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

    Чтобы отдавать исходники Скетча верстальщикам на Винде используем zeplin.io.
    Ответ написан
    Комментировать
  • Нанесение поляризованного изображения?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Отраженный от поверхности свет может быть поляризованным, если ось поляризации поверхности будет перпендикулярна оси поляризации в очках. Т.е. свет, прежде чем попасть в глаз, поляризуется 2 раза: первый раз отражаясь от метки, второй раз в очках.

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

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

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

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

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

    А вообще нужно узнавать подробности.
    Ответ написан
    3 комментария
  • Существуют ли какие-нибудь фреймворки для ВЕБ-ДИЗАЙНЕРОВ?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Платные дизайн-фреймворки — designmodo.com/shop
    Обратите внимание на Startup Design Framework — designmodo.com/startup
    На момент выхода он очень хорошо продавался и в результате пошла мода на дизайнерские фреймворки.

    Есть и бесплатные, но это уже просто «UI kits» — designmodo.com/freebies/ui-kits
    Ответ написан
    Комментировать
  • Где найти дизайнера интерфейса для open-source проекта?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Ваше описание проекта совсем его не продает и ничего не говорит.
    Чтобы привлечь кого-нибудь в проект, нужно «заразить» человека вашей идеей.
    Для этого распишите:
    — Почему все другие менеджеры паролей вам не нравятся. Опишите вашу «боль». Вероятно, эта боль не только у вас одного.
    — Каким вы мечтаете видеть проект. Каким образом он избавит от этой боли. Расскажите о планах.
    — Прикрепите скриншоты, а лучше ссылку на видео о том, как работает и как сейчас выглядит ваш прототип.

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

    Это описание разместите в readme репозитория проекта. Так и напишите «ПРОЕКТ ИЩЕТ ДИЗАЙНЕРА». Дизайнеры тоже лазят по Гитхабу.

    Сделайте посты в соц. сетях. Может заинтересуются коллеги. Попросите сделать репост.

    На Тостере размещайте конкретные вопросы под соответтвующие теги. Например:
    «Вот главный экран (скриншот), как улучшить интерфейс?
    Подробнее о проекте [ссылка на гитхаб, где есть полное описание проекта и его целей].
    P.S. проект ищет дизайнера»

    Конкретными вопросами легче зацепить.
    Ответ написан
    Комментировать
  • Если ли смысл использовать Adobe Edge для веб-дизайна?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Adobe Fireworks — самое нормальное, что есть на Windows. Даже не смотря на то, что это уже мёртвый продукт.

    Есть ли более удобные инструменты для дизайна сайтов, чем фотошоп? — тут я когда-то описывал его плюсы и минусы.
    Ответ написан
    Комментировать
  • Дизайн сайта: графическая вёрстка (текста и картинок) и модульная сетка, как лучше?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Насчет почитать:
    artgorbunov.ru/bb/soviet/20140519 — про базовые элементы верстки и принципы верстки. Начните с этой статьи и продвигайтесь по ссылкам. Ценность материала в том, что он подан кратко и наглядно.
    Ответ написан
    Комментировать
  • Есть ли более удобные инструменты для дизайна сайтов, чем фотошоп?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Считаю, что для интерфейсов нет ничего лучше Adobe Fireworks на Винде (на Маке есть Sketch).
    Очень жаль, что Adobe забросила этот продукт и не предложила ничего взамен. Файерворксу не хватает пары инструментов/возможностей Фотошопа, а Фотошопу не хватает половины возможностей Файерворкса. По сравнению с Иллюстратором Файерворкс попроще и подружелюбнее будет, хотя я мало работал с Иллюстратором, могу и ошибаться.

    Доводы ЗА Fireworks:

    • Fireworks — это полностью векторный редактор, заточенный под растровый вывод. В нём удобные инструменты работы с кривыми (path), выравнивание точек по пиксельной сетке. Рисовать резкие пиксельные иконки очень легко. Быстро и легко можно скруглять и распрямлять углы у прямоугольников, все вместе и по одному, ресайзить прямоугольники (даже растровые) без превращения круглых углов в овальные. Всё это вызывает боль в Фотошопе.
    • Отличная интеграция с Adobe Illustrator. Можно copy/paste туда обратно с возможностью редактирования. При помощи стороннего бесплатного плагина можно импортировать и экспортировать SVG.
    • В Fireworks есть стили для текста и векторных объектов, которые работают как CSS. Можно задать стили основному тексту, заголовкам, кнопкам, полям форм, а потом поменять данный стиль и распространить изменения на все страницы и состояния проекта.
    • В Fireworks все страницы (экраны) хранятся в одном документе. Разные страницы могут иметь разный размер, цвет фона, свои гайды. Каждая страница может иметь несколько состояний. Слои можно делать общими для нескольких страниц и/или состояний: например шапку и футер можно расшарить на все страницы, а можно сделать «символом» — элементом библиотеки наподобие смартобъекта в Фотошопе. В состояниях удобно хранить варианты одной и той же страницы, контент табов, каруселей, всплывающие подсказки, ошибки валидации форм и т.д.
    • В Fireworks есть библиотека символов. Туда удобно складывать всякие ресурсы, клипарты, картинки высокого разрешения, чтобы это не валялось в невидимых слоях. Но можно линковать и внешние файлы. На этапе проектирования, когда создаются wireframes, удобно для каждой иконки создать в библиотеке символ с плейсхолдером, потом собрать все эти символы на отдельной странице и отрисовывать по одной — иконки появляются на всех страницах, а вайрфреймы плавно превращаются в дизайн.
    • Fireworks умеет экспортировать стили в CSS (как CSS Hat), умеет генерировать CSS-спрайты. Правда из-за того, что Adobe положила хер на Fireworks, в CSS много уже не нужных префиксов и устаревший синтаксис градиентов.
    • Слайсы в Файерворксе могут пересекаться
    • Есть еще менее значимые фишки, но мне надоело писать


    Доводы ПРОТИВ Fireworks:

    • Корявое сглаживание шрифтов (некоторые шрифты сильно отличаются от того, что потом увидишь в браузере), не хватает некоторых эффектов текста: надстрочные, подстрочные, все заглавные, зачеркнутый текст.
    • Примитивные инструменты рисования и ретуширования (баннеры и коллажи я рисую в Фотошопе и импортирую в Fireworks)
    • Нельзя просто так взять и перетащить слой с прозрачностью из Фотошопа в Fireworks — прозрачность заливается белым (надо экспортировать в png файл и импортировать из него — вот это реально бесит!)
    • Нельзя задавать размер страницы больше, чем 6000×6000px (иногда высоты не хватает)
    • Фотошоп пошустрее будет, Файерворкс притормаживает


    P.S. «Всяк кулик своё болото хвалит». Дизайнеру-dribbble'ру Fireworks не понравится, а вот для проектировщика интерфейсов это чуть ли не идеальный инструмент.
    Ответ написан
    Комментировать
  • Не подкинете идеи для стилизации таблицы HTML?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Поищите для начала здесь tympanus.net/codrops/?s=table
    Ответ написан