Ответы пользователя по тегу HTML
  • Как настроить сглаживание шрифта?

    RostOsipov
    @RostOsipov
    Designer
    Если кроссбраузерно не говоря о движках, то
    text-rendering: optimizeLegibility;

    text-render_zoom.png
    Ответ написан
    Комментировать
  • В какой программе лучше делать макет сайта?

    RostOsipov
    @RostOsipov
    Designer
    Photoshop точно в топку.

    Если Mac:
    1. Sketch
    2. Adobe XD
    3. Invision Studio (Open Beta)

    Win:
    1. Adobe XD
    2. Invision Studio (Open Beta)

    У каждого есть свои плюсы и минусы. И каждый сейчас старается заткнуть пробелы фичами, которые есть у конкурентов. Так что, думаю, в обозримом будущем будет ситуация как сейчас с браузерами - использование того или другого складывается лишь из личных предпочтений и завязанности на платформу.
    Adobe XD – проигрывает пока! скетчу по функционалу и поддержкой сторонних разработчиков. Входит в подписку Adobe CC.
    Sketch – Mac Only.
    Invision Studio – пока в бета версии, но очень многообещающий тул. Чего стоит только возможность привнести адаптивность в макет. Кроме того с бесплатным (кастрированным) планом.
    Ответ написан
    Комментировать
  • Искажение цветов в Chrome(CSS). Отчего и как убрать?

    RostOsipov
    @RostOsipov
    Designer
    Давно замечал в Chrome такой касяк. И это не только в CSS.
    Проблема кроется в Управлении цвета и цветовых профилях. Попробуйте сменить рабочее цветовое пространство с sRGB на Adobe RGB.

    attachment?aid=448720042000&name=mustang

    Нашел алгоритм, но не знаю какие выводы из этого сделать ): Если обрабатываешь в Photoshop картинку в пространстве Adobe RGB и сохраняешь ее для web не конвертируя в sRGB - получаешь картинку, которая смотрится как и было задумано во всех браузерах, кроме Chrome - там она блеклая. Если же при сохранении в web поставить конвертацию в sRGB - картинка везде выглядит перецвеченной, кроме Chrome - там она выглядит ровно как первая картинка во всех браузерах, где не происходила конвертация в sRGB.

    Вроде как известная проблема и с ней борятся. )
    Ответ написан
    Комментировать
  • Японские, Китайские, Корейские начертания популярных шрифтов для сайта: где взять?

    RostOsipov
    @RostOsipov
    Designer
    У Open Sans нет поддержки японского:

    328dca530fbb4e5897297a094f11d1b3.png

    Для ваших целей Google создал Noto Family. Одно семейство для всех языков.
    Ответ написан
    Комментировать
  • Верстка десктопной версии с последующей доработкой до адаптива. Бред или вполне себе реально?

    RostOsipov
    @RostOsipov
    Designer
    В первую очередь нужно ответить на вопрос, кто текущие (планируемые) посетители сайта и с каких устройств приходит большая часть трафика.
    Если 98,9% - это пользователи десктопов, то вопрос с адаптацией под мобильные можно отложить.
    Если основной трафик будет (планируется) идти с мобильных устройств - то это первоочередная задача.
    Mobile First - это не глупая фраза, она несет в себе стратегическое видение дальнейшего развития веб.

    Если вы создали десктопную версию, но с мобильными версиями долгое время ничего не выходит - сделайте шаг назад и осмотритесь: скорей всего проблема на ранних этапах еще до сдачи массива а верстку.
    Ответ написан
  • После добавления к тексту градиента появляются проблемы с шрифтом Myriad Pro. Как исправить?

    RostOsipov
    @RostOsipov
    Designer
    Если подписчик Creative Cloud, то можешь совершенно легально пользоваться ими как в полиграфии так и веб через TypeKit.
    Ответ написан
    Комментировать
  • Какой редактор для разработки вы используете?

    RostOsipov
    @RostOsipov
    Designer
    Был на Brackets, пересел на Visual Studio Code.
    Бесплатен. Легок. Кросс-платформенный (Win, Mac, Linux). Куча расширений.
    Ответ написан
    Комментировать
  • Как сделать HTML5 баннер для AdRiver?

    RostOsipov
    @RostOsipov
    Designer
    Adobe Edge Animate отлично справляется с этой задачей. Вам будет еще удобней, так как он имеет интерфейс схожий с Flash.
    Посмотрите на lynda.com. Уверен, что и кроме этого в интернете полно обучающих видео.
    Google Web Designer - все еще бета и у меня такое чувство что на него забили. Не знаю как сейчас но раньше было невозможно быстро "залупить" анимацию - приходилось искать дополнительные ходы увеличивая размер файла и строки кода. И если раньше Google для adwords обязывал использовать только WebDesigner, то сейчас позволил создание в Adobe Edge Animate, намекая что WebDesigner мягко говоря - не идеален )
    Ответ написан
    2 комментария
  • За и против Bootstrap?

    RostOsipov
    @RostOsipov
    Designer
    Плюсы Bootstrap - простота (следовательно - быстрота) разработки, уверенность в валидности и возможность сэкономить на дизайнере (так многие действительно думают), используя заранее готовые UI компоненты.
    Понятный код, разобраться в котором может ученик старших классов, ходящий на факультативы по информатике.

    Минусы - от Bootstrap'a пахнет Bootstap'ом. Поменяй все стандартные наборы на уникальные - запах не исчезнет.
    Это как мебель от IKEA - все вроде отлично, но нет "души". )
    Ответ написан
    2 комментария
  • Как сделать мобильную версию сайта?

    RostOsipov
    @RostOsipov
    Designer
    В своем .css файле пишешь строку:
    @media only screen and (max-width: 540px)
    и ниже прописываешь стили элементов, которые хочешь чтобы были изменены в мобильной версии.
    h1, h2, p, divs. ets.
    При загрузке страницы - если окно больше 540px - действуют стили, описанные раньше твоего медиа-запроса. Как только окно уменьшается до 540 и ниже - начинают вступать в силу стили которые ты указал в медиа-запросе.
    Ответ написан
    4 комментария
  • Какие шрифты чаще всего используете в дизайне сайта?

    RostOsipov
    @RostOsipov
    Designer
    Не путайте парня и не ограничивайте его в выборе. Послушает, замкнется на Open Sans, Roboto, Proxima Nova.

    1. Выбор шрифта осуществляется в соответствии с конкретной задачей. Это первое правило, которое нужно держать в голове при выборе шрифта (шрифтов) для определенного проекта.
    У Вас большие объемы текста и нужно добиться максимальной скорости прочтения? Выбирай шрифт с максимальной удобочитаемостью (Helvetica, Pragmatica, Aktiv Grotesk, etc).
    Делаешь своей девушке сайт-визитку по продаже хенд-мейд бижутерии? Можешь присмотреться к декоративным шрифтам или серифам.

    Кроме того, возможны ограничения по шрифтовым набором со стороны разработчика ПО под которое делается проект. Так например, Microsoft в Windows 8 Guidelines, настоятельно рекомендовала уйти от сторонних шрифтов в пользу Segoe UI.

    Мне сложно представить, к примеру, сайт IT компании, параграфы которого набраны serif типа Bodoni или Baskerville. Это вызывало бы диссонанс, так как Антиква (serif fonts) отправляет нас в прошлое, а Информационные технологии - направление будущего, поэтому и выбирают Гротескные гарнитуры (sans-serif).

    2. Практика - это хорошо, но без теоретических основ и понимания структуры Вам сложно будет добиться идеальных результатов. Образцы шрифтов Яна Чихольда, Живая Типографика Корольковой - отличные книги для начала.

    3. Поиск шрифтовых пар.
    Найдите пару шрифту для связки Заголовок/Параграф. Как и у людей - не все шрифты подходят друг другу. Собираетесь сделать моношрифтовой сайт? Почему бы нет. Однако, возможно, он будет скучноват и будет напрашиваться добавление еще одной гарнитуры к уже имеющийся.
    В интернете полно сайтов, посвященных "играющим" парам.

    НО. Никогда. ни в коем случае. Не при каких обстоятельствах. Нельзя использовать в заголоках и параграфов похожие шрифты. Например: Helvetica и Acumin Pro.

    Почему некоторые шрифты популярны, а другие нет? Здесь есть много причин:
    a) Бесплатность. Не нужно платить за лицензию на шрифт, либо лицензионные фи за использование в приложениях или web. Шрифт Лобстер набрал свою популярность именно по этой причине. (правда сейчас у него репутация, близкая к Comic Sans'у).
    b) Качество набора гарнитур.
    c) Поддержка языков.
    d) Наличие лигатур (для кириллицы не актуально:))
    e) Тенденции в Web Дизайне и т.д.

    Возвращаясь к вопросу "Какие шрифты должны быть у каждого web дизайнера?" Не хочется ли Вам после всего вышеописанного перефразировать свой вопрос "Чем должен руководствоваться каждый web дизайнер при выборе шрифта?"

    Сервисы:
    Google Fonts (Free) и Adobe TypeKit (Free and Paid). Лично мне больше нравится сервис от Adobe. Немного сложнее в "установке" шрифта, но приятнее по качеству наборов гарнитур.
    Ответ написан
    Комментировать