Ответы пользователя по тегу Дизайн
  • Какой шрифт лучше использовать для сайта – Arial или Helvetica Neue?

    RostOsipov
    @RostOsipov
    Designer
    Пропишите: font-family: Arial, 'Helvetica Neue', sans-serif; и не парьтесь.
    Пользователи на Винде получат Ариал, на Маке - Гельветику.
    Кириллица в обоих гарнитурах проигрывает западным (во многом из-за отсутствия выносных элементов и фактом кривых рук создателей реформы русского алфавита при Петре I)
    Ответ написан
    2 комментария
  • Верстка десктопной версии с последующей доработкой до адаптива. Бред или вполне себе реально?

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

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

    RostOsipov
    @RostOsipov
    Designer
    2 способа:
    1. В настройках (Windows: Edit ->Preference / Mac: Illustrator -> Preference) во вкладке General поставить галку на Scale Strokes & Effects

    ed3bcb788606447ca6b8019cde10e4c4.png

    2. Преобразовать кривые. Выделить объект и Object -> Expand

    660bba246d9d41a1adcbc18498478150.png

    Если объект планируется масштабировать (уменьшать / увеличивать) - убедитесь, что снята галка Align to pixel Grid на панеле Transform. В противном случае - получите искажение изображения.
    d1ccc67bb49440a5852cb66f4e6e0cb3.png
    Ответ написан
    1 комментарий
  • Хитрости художника в фотошопе?

    RostOsipov
    @RostOsipov
    Designer
    Это не хитрость - это один из стилей рисования. Для этого также нужна снаровка и определенно высокий уровень мастерства.
    Некоторые рисуют поверх изображения, некоторые - за основу берут референс - рядом кладут фотографию, некоторые - рисуют "из головы".

    gtav_upton.gif

    Matte Painting восновном только так и создается - собирается из множества фотографий коллаж, а потом приводится к общей стилистике.
    Ответ написан
    2 комментария
  • Как сделать цвета на компьютере и смартфоне одинаковыми?

    RostOsipov
    @RostOsipov
    Designer
    Photoshop > Edit > Color Settings

    b6c8ae5dcc264531bfdc0ce66f71b09e.png

    Боитесь за разное отображение цветов на разных экранах - ставьте в рабочем пространстве sRGB. Этот стандарт, который поддерживается всеми производителями.

    Абсолютной идентичности в цветах, увы - вы не добьетесь. Причиной тому разные алгоритмы и технологии производства экранов.
    Ответ написан
    2 комментария
  • Как правильно уменьшать размер (габариты) png?

    RostOsipov
    @RostOsipov
    Designer
    Здесь нужно подключить свои знания в области математики.
    Ваше изображение: 70px x 70px состоящее из 16 квадратов 15px x 15px, находящихся друг от друга на расстоянии в 2px.

    Когда Вы уменьшаете картинку в 2 раза (35px x35 px) - 16 квадратов 15px так же делятся на 2.

    15/2=7.5px
    2/2=1px

    Ваша картинка выглядит размытой из-за того что при делении получилось не целое число и пиксели не встали на пиксельную сетку.
    Чтобы избежать этого - Вам следует изначально держать в голове возможные варианты масштабирования иконки.
    Вот например иконка 70px x 70px состоящая из 16 квадратов с размером 16px с разрядкой 2 px - при 2-кратном уменьшении дает четкую картинку так как:
    16/2=8px
    2/2=1px

    92aa9c7051a9461e925a63189d8ec27a.jpg

    Отличный способ - использование .svg. Векторный формат, остающийся четким при масштабировании.
    Ответ написан
    1 комментарий
  • Платежная система pay pal для сайта, дизайн?

    RostOsipov
    @RostOsipov
    Designer
    У Paypal есть портал для разработчиков.

    Общие принципы внедрения тут
    Непосредственно веб интеграция тут
    Если нужны кнопки - они тут
    Тестирование и отладка кнопок тут

    Индивидуальный дизайн лучше не создавать - пользователи уже привыкли к существующим.

    Checkout flow здесь.
    Ответ написан
    5 комментариев
  • Что со шрифтом?

    RostOsipov
    @RostOsipov
    Designer
    На Behance используется:

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    Причина некорректного отображения - установлен кривой шрифт в систему. Удалите из установленных шрифтов гарнитуры Helvetica Neue и/или Helvetica - все встанет на свои места.

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

    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. Немного сложнее в "установке" шрифта, но приятнее по качеству наборов гарнитур.
    Ответ написан
    Комментировать