Задать вопрос
sfi0zy

Ivan Bogachev

Creative frontend developer
Ответы пользователя по тегу Дизайн

  • Есть ли недочеты в этом макете сайта?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    • Белый по светлому не читается. Белый по пестрому - тем более. Голубой по голубому - ох...
    • Странное смешение шрифтов с засечками и без. Никакой системы в этом не наблюдается. Какую задачу эта разница решает - непонятно.
    • Очень много разных размеров шрифтов и межбуквенных интервалов. Проблема та же - нет системы.
    • Отступы везде разные. Внизу их вобще нет. Проблема та же.
    • Местами намешана информация. Глаза разбегаются. Здесь явно прослеживается идея поэкранного скролла, или чего-то вроде него, но стоит подумать над тем, чтобы каждый экран был о чем-то одном. Первый про то, что это такое (зачем там какие-то характеристики про опыт и духов?), дальше описание сервера (зачем там реклама справа?), магазин вообще спрятался в куче рандомных фактов по краям, я его в первый раз даже не заметил.
    • Не совсем понятно, как это должно адаптироваться под разные размеры экранов.

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

    1. Обращайте внимание на систему в дизайне. Загуглите, что такое дизайн-система и почему простота и последовательность - это хорошо.
    2. Думайте больше о доступности и адаптивности. Вы дизайн делаете для пользователей в первую очередь. Красочная картинка вторична.
    3. Не нужно нагромождать все, как в газете. Это очень редко работает. Управляйте вниманием пользователей, не давайте ему растекаться во все стороны.


    P.S.: Также в таких проектах всегда нужно быть готовым к диалогу с разработчиком и не допускать требований pixel-perfect по согласованным без него макетам. Это не так сложно сверстать, но вот эти штуки по краям с линиями и кубиками будут генерироваться на лету (для адаптивности). Они не будут 100% соответствовать нарисованному. Также тут так и напрашивается все эти картинки анимировать, как на текущем сайте mtg. Не знаю, как этот стиль называется, но WebGL - наше все. Да и эти кубики я бы сделал неспешно плывущими более-менее вниз с покачиваниями и поворотами... Но это уже следующий шаг. Первое - система в дизайне и доступность.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как реализовать такое?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    нет 3d модели предмета

    но
    модель крутится

    Если вы хотите сделать вращение модели, то вам в любом случае нужна либо 3d-модель и отображение ее с помощью WebGL, либо куча картинок с видами на нее со всех сторон с разницей в N градусов и последовательное их показывание пользователю (ну или видео, что по сути - тот же набор картинок). Но тут важно отметить, что обычно такие картинки не рисуют прямо руками, а делают модельку и потом ее рендерят с разных сторон, т.к. это получается быстрее, чем рисовать.

    Подход с заранее отрендеренными картинками может показаться избыточным, но на деле он позволяет добиться более реалистичного освещения с бликами, рефлексами и разными материалами вроде стекла или меха, которые можно сделать в 3d в теории, в соответствующих редакторах, но в реальном времени рендерить в браузере не получится из-за проблем с производительностью. Нужно это или нет в вашем случае - решать вам.

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

  • Как правильно расположить один предмет относительно другого?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вожу её туда-сюда и не могу выбрать ей правильное место. Перемещу на одно место, вроде, норм. Потом смотрю — нет не норм и так много раз...

    Обычно это означает, что этот элемент там вообще не нужен. У каждого элемента на странице должно быть какое-то предназначение, не нужно их добавлять просто так, чтобы были. Какое предназначение у иконки телефона в данном случае? Тут и так понятно, что +7 495... - это телефон. То есть иконка, поясняющая, что это такое, тут не нужна (если бы там был ник с собачкой, то можно было бы добавить иконку инстаграма или твиттера, чтобы было понятно, к чему он относится, но телефон - штука универсальная). Если кроме логотипа и телефона в шапке ничего нет, то иконка, помогающая найти что-то на странице, тут тоже не нужна (ну то есть яркая жирная надпись и так бросается в глаза). В плане исправления композиции тоже не совсем понятно, нужна ли она там (иногда иконками можно сбалансировать негативное пространство, но тут скорее светящаяся штука его поломает). Так зачем она там?
    Ответ написан
    Комментировать
    Комментировать

  • Учусь веб дизайну, какие ошибки?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    В целом все аккуратно, так что замечания – это скорее поводы для размышления и вылизывания того, что есть.

    • “Untitled admin” в углу – такие названия имеют свойство быть довольно длинными и в боковую панель оно уже не влезет. Может его как-то в центр вынести, к “панели управления”? И почему это единственная надпись шрифтом с подчергиваниями?
    • Иконки какие-то все похожие и не интуитивно понятные, может с ними поиграть? Про карты вообще бы не догадался, если бы не прочитал.
    • Справа цвета какие-то обратные – рост красный, а падение продаж синее. Было бы логичнее рост делать зеленым, а падение красным.
    • То же с заказами – один “заказ отменен” красный, а другой, такой же – фиолетовый. Пусть уж все отмененные будут красными. И браузеры – почему один зеленый, другой красный, а третий вообще оранжевый? Если это ничего не значит – пусть все будут нейтрально – фиолетовыми.
    • Есть проблемы с контрастностью, особенно внизу. Серые оттенки прохо различаются, особенно на мониторе, который “светит” вверх.
    • Плашка с файлом с тенью. Спорное решение: когда одни элементы с тенями лежат поверх других элементов с тенями – это немного ломает восприятие. Может ее как-то по другому выделить?
    • Чат внизу, после скролла на полтора экрана, какой-то внезапный. Сверху ничего на него не указывало. Может под “почтовым ящиком” должен быть пункт “чат”, чтобы переходить к нему (ну или на отдельную страницу с ним)?
    • Наверное фиолетовую полосу нужно растягивать дальше, а слева не должно быть тени от панели (но тут не совсем понятно под какое это разрешение экрана).


    Ну и мобильная версия должна быть.
    Ответ написан
    1 комментарий
    1 комментарий

  • Оцените пожалуйста веб-приложение?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Стали бы вы им пользоваться? Если нет, то почему? Перспективно ли это направление вообще и перспективно ли конкретно это приложение?

    Минификация кода должна производиться автоматически в процессе сборки. В 2019 году никто уже не ходит куда-то и не делает это вручную. Есть gulp, webpack, parcel и.т.д. - целая куча инструментов, которые могут по ходу дела минифицировать все, что через них проходит. Нужно лишь сказать им - минифицируй! В наше время все, что можно автоматизировать, люди стараются автоматизировать, а ваш сервис - это шаг назад на этом пути.
    Ответ написан
    3 комментария
    3 комментария

  • Как реализовать такой дизайн сайта в один экран и анимационными переходами между экранами?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Для переходов между страницами можно использовать Barba.js. А как именно делать сами анимации - смотрите сами, что вам проще будет делать. По идее в WebGL здесь нет необходимости - все можно сделать на CSS-трансформациях.
    Ответ написан
    2 комментария
    2 комментария

  • Ваши впечатления от использования меню?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    впечатление от взаимодействия с ним

    Оно ломает мозг. Если кнопка открытия меню находится справа, то и меню ожидается справа. А оно слева.

    советы по улучшению

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

    P.S.: После взаимодействия с меню оно ломается. Или исчезает или просто перестает откликаться на нажатия. Видимо это тот самый момент, когда конструктор уже не справляется и нужно все делать руками.
    Ответ написан
    3 комментария
    3 комментария

  • Где смотреть современные интересные сайты?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Awwwards
    CSSDesignAwards
    FWA
    Ответ написан
    Комментировать
    Комментировать

  • Можете рассказать о минусах дизайна и взаимодействий с постом в блоге?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Расскажите о минусах и плюсах

    Из плюсов - идея интересная, выглядит симпатично.
    Из минусов (в самом посте):
    • Шрифт мелкий, строки длинные. На 15-дюймовом FullHD - сложно читать. Я бы увеличил хотя бы до 16-18px.
    • Контрастность тоже не самая лучшая. Серый текст по белому фону заставляет напрягать глаза.
    • Вертикальный ритм немного странный. Может быть над заголовками добавить отступы?
    • Картинки хочется сделать побольше. Хотя может быть и нет. Но отделить их отступами точно стоит.
    • Не хватает информации об авторе, даты написания статьи (может все уже устарело на 10 лет).
    • Иконки для расшаривания в социальных сетях тоже можно добавить.
    • Так и хочется внизу увидеть теги, комментарии, похожие посты и.т.д. Их там нет, а очень хочется.
    • Эффекты при наведении мыши и фокусе на элементы нужно добавить.

    Скролл очень сильно лагает, так что навигацию оценить сложно. Адаптивность отсутствует. Определенно стоит подумать про сценарии взаимодействия с сайтом в целом. Если это - блог, то там точно должно быть (люди к этому привыкли и ждут этого):
    • Список статей, который можно быстро пролистывать.
    • Поиск по статьям. Если материалов мало, то по крайней мере поиск по тегам или категориям.
    • Страницы авторов, или по крайней мере хоть какая-то о них информация, контакты.

    и.т.д.

    Красивые анимации - это уже вторичное, начинать нужно со сценариев взаимодействия, а то получается красивое, но не удобное.
    Ответ написан
    3 комментария
    3 комментария

  • Оценить дизайн начинающего дизайнера?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По ссылке только одна страница, так что только про нее:
    - Не понятно под какое это разрешение экрана, варианта для телефонов там точно нет. Сейчас без этого вопроса никак, особенно если дизайн предполагает перестановку блоков на маленьких экранах. Разрешение картинки намекает, что это было для FullHD, но на 15 дюймах - все огромное и глаза разбегаются. Стоит над этим моментом поработать.
    - Сочетание разных шрифтов с засечками и без в случайном порядке - не самая лучшая идея.
    - Белый по бежевому не читается.
    - Контент местами плохо воспринимается.
    - Иконки все разные по стилю.
    - Отступы везде разные.
    - Кнопка "call to action" внизу совершенно не видна.
    и.т.д.

    что нужно подтянуть в знаниях/практике

    Основы. Возможно вы как-то через них проскочили, но стоит вернуться и разобраться. Почитайте про "дизайн для недизайнеров" (книжка так называется), она может подтолкнуть в нужную сторону.

    на что обратить внимание

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

  • Каких вы знаете крутых специалистов в области UX, UI, Моушен-дизайна?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    русские

    Наш Николай.

    зарубежные

    Их Николай.

    Но в целом в этих областях полно интересных людей. Думаю вам стоит уточнить цель вашего вопроса.
    Ответ написан
    3 комментария
    3 комментария

  • Как грамотно продумать шаблон?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Может быть переставить логотип в темную полоску, а меню растянуть во всю ширину?

    5ae6d81349887290298746.jpeg
    Ответ написан
    1 комментарий
    1 комментарий

  • Как вставить CSS стили только для IE и Edge?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Попробовал несколько вариантов, ни один не работает.

    На browserhacks.com есть хорошая подборка хаков для определения самых разных браузеров и их версий с помощью CSS или JS. Попробуйте варианты, которые там предлагаются. И будьте внимательны: если вы используете автопрефиксер или что-то для оптимизации CSS, то эти инструменты могут незаметно ломать некоторые хаки при сборке.
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно передать анимацию разработчику?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    Creative frontend developer
    Вариант 1:
    У разработчика есть то же ПО, что и у вас. Он может открыть ваш проект и не по описанию и гифке все делать, а по вашим исходникам.

    Вариант 2:
    У разработчика нет возможности открыть ваш проект. Такое вполне может случиться. Например ваш Principle не очень дружит с линуксом. Или еще что-то не так. В такой ситуации желательно иметь:
    • Гифку
    • Гифку x0.1, а то иногда все так быстро движется, что ничего не понятно
    • Список функций, которые вы используете (кривые безье сложно угадывать на глазок, а easing - понятие ооочень растяжимое)
    • Тайминги, по крайней мере продолжительность основных движений в анимации (в небольших взаимодействиях с элементами разница в 50ms может "чувствоваться", но "увидеть" ее сложно)
    • Если есть хитрые соотношения размеров - было бы хорошо иметь описание логики, а то иногда не понятно, идет движение "на 100px" или "на треть высоты элемента"


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

    результат работы фронтенда не устраивает

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

  • Где есть курсы по основам рисунка?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    На канале Олега Торопыгина вы найдете полноценные курсы художественного училища в открытом доступе. По качеству и понятности объяснения будут получше, чем в большинстве школ, особенно для детей. Стоит начать с введения в рисунок.
    Ответ написан
    Комментировать
    Комментировать

  • Как изменять пропорции элементов на разных разрешениях экрана?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    То есть надо как то это всё масштабировать... Как вы решаете такие задачи?

    Можно все размеры задавать в rem/em, тогда при изменении размера шрифта для html все будет подстраиваться (вообще rem - это очень удобная штука, особенно когда все размеры выражаются красивыми числами - .5, .75, 1, 1.5, 2, 3, 4..., а не количеством пикселей). При этом можно по-умному привязать font-size для html к единицам vw и результат будет очень приятным.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как удобнее проставлять размеры, цвета в макетах дизайна сайта для программистов?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    По фен-шую нужно делать стайлгайд. В нем должна быть наглядно показана типографика, цвета, стандартные размеры отступов (их обычно немного, можно для каждого написать, что вот этот для заголовков, вот этот для того-то, а вот этот по умолчанию) и компоненты интерфейса по отдельности (включая все их состояния). Как потом будут выглядеть сами макеты, будут ли они кривыми и косыми - не важно, они могут быть хоть от руки карандашом нарисованы, ибо их смысл в том, чтобы показать взаимное расположение компонентов, а вся остальная информация есть в стайлгайде. Такой подход может экономить кучу времени, избавляет дизайнера от необходимости рисовать макеты страниц с точностью до пикселя, а компонентная верстка становится очень приятным занятием. Разумеется, в интернете можно найти достаточно примеров по запросу ui style guide example.
    Ответ написан
    1 комментарий
    1 комментарий

  • Шрифты. Теория. Какой рукописный шрифт использовать для заголовков (h1, h2, ...), если основной Open Sans?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Причём интересует не только кириллица, но и латиница (даже без поддержки русского). Ещё, желательно, из коллекций Google Font.

    Тогда стоит начать поиски с сайта fontpair.co, там как раз собраны хорошие сочетания разных шрифтов из коллекции от Google.
    Ответ написан
    1 комментарий
    1 комментарий

  • Где и как можно проверить сайт и получить рекомендации куда двигаться дальше?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Про SEO уже сказали, добавлю про юзабилити и общее впечатление:

    1. Отсутствует информация о всех товарах. Если есть категория в каталоге - она должна что-то содержать. Чем больше ассортимент - тем лучше. А пустующие категории, как и пустющие прилавки в обычном магазине - настораживают.
    Решение проблемы: заполнить сайт контентом. В том числе на всех второстепенных страницах.

    2. А как собственно купить? Ни кнопок "купить", ни информации об оплате и доставке. Это как автомат с газировкой без дырки для денег.
    Решение проблемы: добавить инструкцию как купить. Как минимум напишите, куда позвонить/написать, чтобы заказать какой-то товар, куда вы доставляете, в какие сроки и.т.д. Чем подробнее - тем лучше. Кнопка "купить" у товаров тоже желательна. Даже если она будет вести на страницу "как заказать". Это не полноценная корзина, но лучше, чем ничего.

    3. Тексты на цветных фонах сложно читать. Это даже не дизайнеру заметно. Сложно читать = я не буду это читать.
    Решение проблемы: Уменьшить яркость фонов под текстом (которые с разноцветным паттерном), добавить небольшие темные тени светлому тексту и светлые темному для заголовков на фоне фотографий.

    4. Прелоадер реально бесит. Я серьезно. На этом сайте нет ничего такого, что можно было бы так долго грузить. В современном мире все куда-то спешат, если ваш сайт ничего не показывает по 10 секунд, а соседний показывает что-то сразу - у вас проблемы (особенно, если вы не владеете заметной долей рынка или не предоставляете товар, не имеющий аналогов).
    Решение проблемы: убрать прелоадер. Почитать про оптимизацию скорости загрузки. Как минимум необходимо убрать фон, который весит больше 5MB, картинки можно немного сжать и законвертить в progressive-jpeg, скрипты и стили вниз страницы, наверху вставить critical css (на тостере уже спрашивали про все это - почитайте).
    Ответ написан
    1 комментарий
    1 комментарий

  • Прорисовка дизайна сайта - с чего начать?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    выбор CSS-фреймворка лежит на мне как на дизайнере... Просто у каждого CSS-фреймворка свои библиотеки, компоненты, виджеты и т.д...

    Инструмент выбирается под задачи, а не задачи подгоняются под инструмент. И выбирать будет верстальщик/фронтендер, который гораздо лучше вас разбирается в многообразии инструментов.

    Или же мне вообще срать на все это и делать в стиле "я дизайнер - я творю, а как это сверстают меня не волнует?"

    Вы - дизайнер (я надеюсь, что хороший, или по крайней мере стремитесь им стать). Соответственно вы лучше остальных членов команды понимаете как что должно выглядеть. Если вы на макете одинаковые элементы делаете одинаковыми, а не "на глазок, плюс-минус пара пикселей" с требованием верстать pixel-perfect, и к этому прикладываете стайлгайд - все будет хорошо. Вообще стайлгайд - очень полезная вещь, особенно в долгоживущих проектах. И плюсик в карму дизайнеру. Главное - не зазнавайтесь: если хороший верстальщик говорит, что вы где-то что-то ляпнули - проверьте, может и правда ляпнули. Если вы единственный дизайнер на проекте - вас кроме верстальщика проверять обычно некому.
    Ответ написан
    Комментировать
    Комментировать