• Есть ли более удобные инструменты для дизайна сайтов, чем фотошоп?

    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
    Ответ написан
  • Как сверстать такое меню?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Почти идеальное решение: cssdeck.com/labs/8qsqyyqr

    А «почти» потому, что когда меню переносится на две и более строки, у последнего пункта предпоследней строки есть отступ от правого края.
    Ответ написан
    2 комментария
  • Как сделать чтобы div растягивался на всю ширину в зависимости от контента, без переноса на другую строку?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    На обертку .one поставить white-space: nowrap;, на дочерних элементах .two обнулить: white-space: normal;. Overflow поставить по вкусу.

    Пример: codepen.io/paulradzkov/pen/MYejpP
    Ответ написан
    Комментировать
  • На каких людей подписаться?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Harry Roberts csswizardry.com — архитектура, правильные подходы к именованию классов, гайды
    Nicolas Gallagher nicolasgallagher.com — архитектура, прикольные демки
    Mary Lou tympanus.net/codrops — красивые примеры вёрстки
    Ответ написан
    Комментировать
  • Как растянуть ссылки по ширине блока без отступов по краям (принцип работы justify в text-align)?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Сверстал ваш пример самым старинным способом cssdeck.com/labs/8qsqyyqr
    Фишка в text-align: justify и псевдо-элементе с шириной 100%. Псевдо-элемент создает новую (вторую) строку, и поэтому к ссылкам (первой строке) применяется justify.
    Ссылок может быть любое количество, ссылки переносятся на следующую строку, если не помещаются в контейнер.
    Ответ написан
    Комментировать
  • Как выбирать название для CSS-классов?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    То, КАК оно это описывает. Паттерн поведения.

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

    В статье css-live.ru/articles/o-semantike-html-i-arxitektur... есть хорошие примеры.

    Оригинал этой статьи — nicolasgallagher.com/about-html-semantics-front-en...
    Ответ написан
    Комментировать