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

    Kadzi
    @Kadzi
    Ом
    Илья Бирман про белый на чёрном
    Игорь Штанг про заметку Ильи Бирмана

    Мое мнение: сайт кусок говна в каждом пикселе. Тупые текста, кастрированная композиция блоков и элементов, нереальное количество бессмысленного визуального мусора. Вообщем, работа дилетанта который применит любой говно-эффект и не поймёт, что лучше - когда этого нет. Это и есть дизайн, а не "я не мог придумать".

    Это я к тому, что вы обсуждаете цвет ручки двери, в то время когда сама дверь перекошенная. Быстрый пример переверстки. Учитываем, что карточки станут проще, так как есть повторяющиеся элементы в тарифах.

    612e7fbfb5f35558157243.jpeg
    Ответ написан
    2 комментария
  • Как правильно протестировать и найти ошибки в вёрстке, если я не верстальщик?

    Kadzi
    @Kadzi
    Ом
    чек лист вёрстки
    то же, подробно

    что можно делать без опыта:

    открыть сборку на смартфоне, планшете, десктопе. именно на реальном устройстве.

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

    это минимум:

    ПОХОЖЕ НА МАКЕТ
    ВСЕ КОНТРОЛЫ РАБОТАЮТ
    НЕ ЕДЕТ, НЕ РАЗВАЛИВАЕТСЯ
    В ДРУГИХ БРАУЗЕРАХ ОК

    отдельным пунктом ДОСТУПНО
    всеми контролами можно управлять клавиатурой, сайт (в идеале) полностью функционирует при выключенном CSS и JS (в хроме есть плагин - Web Developer, скачиваем из магазина, тыкаем, тестим)

    ПЕРЕПОЛНЕНИЕ КОНТЕНТОМ
    тестируем поведение блоков прямо в хроме, через инспектор. (об этом предлагаю автору найти уже готовые описалки... аааа, ладно, на: обзор веб-инспекторов)

    ______________________________________

    полезные ссылки:

    Блог Киселёвой, куча обзоров книг + полезные вырезки, крутейший блог

    о доступности:

    https://weblind.ru/ ОСНОВНОЕ ЧИТАТЬ
    https://www.bl2.ru/programing/colourcontrastcheck.html
    https://habr.com/post/347478/
    https://developer.paciellogroup.com/resources/cont...
    https://usabilitylab.ru/blog/dostupnost-internet-b...
    https://blog.sibirix.ru/2018/05/22/almost-blind-ve...
    https://www.toptal.com/designers/colorfilter
    www.bbc.co.uk/guidelines/futuremedia
    https://www.lightningdesignsystem.com/accessibilit...
    https://geon.github.io/programming/2016/03/03/dsxyliea
    https://wearecolorblind.com/
    blog.gov.design/blog/2016/11/08/accessibility.html
    specialbank.ru/guide
    specialbank.ru/guide/index.html

    P.S

    валидаторы кода (пускай меня поправят если не так) во-первых их 2 и они отличаются, во-вторых, если видим ошибку - это не значит, что это всегда ошибка. Т.к некоторые вещи могут быть не описаны там
    Ответ написан
    6 комментариев
  • У кого есть структурированный видеокурс по Figma?

    Kadzi
    @Kadzi
    Ом
    Илья, ты не перейдешь от фотошопа полностью. Делать нужно так:

    1) сложные векторные штуки рисуем в иллюстраторе (там и фильтры есть и эффекты), затем берем и экспортируем как SVG в фигму. Инструкция, как правильно сохранять в SVG.

    2) Растровые коллажи рисуем конечно в фотошопе, экспортируем в фигму, как PNG или JPEG

    3) Фигма - для сборки, потомучто а) гораздо быстрее работа с макетами б) гораздо меньше весят файлы в) несколько человек могут дизайнить одновременно г) можно делать компоненты - кирпичи, например ты нарисовал кнопку и сделал её компонентом, затем можешь её плодить одним нажатием кнопки, так, ты можешь сделать хоть 100 таких кирпичиков и за считанные минуты собрать интерфейс (посмотри такого чувака, как Roman Kamushken, чтобы понять насколько это ускоряет работу)

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

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

    ролики на ютубе есть, но их объясняют такие болваны с ээээканьем мммммэканьем, что сил нет смотреть 15 мин то, что можно обьяснить за 10 сек.

    из адекватного, русское:

    знакомство с фигмой
    почитать статейка старая, много что поменялось, но визуально там показаны преимущества
    полезный материал по резине
    Ответ написан
    2 комментария
  • Как создать макет по конкретному сайту?

    Kadzi
    @Kadzi
    Ом
    Илья, зайди в гугле в режим разработчика и посмотри брейкпоинты:

    5b1c394dc75eb407974712.png

    потяни курсором сайт, посжимай его, увидишь, что блоки масштабируются.

    Как нужно такое делать:

    1) придумываешь блоки
    2) прикидываешь, что будет резиновым, а что нет
    3) учитываешь поведение элементов, при разных разрешениях
    4) посмотри как ведут себя блоки при растяжке на сайте, в режиме разработчика

    Да, возможно нужна будет сетка под 1920 (например для карточек интернет-магазина). Посмотри как пример сайт студии лебедева в режиме разработчика, вопросы отпадут. У них текст остается какбы в пределах 1200px, а карточки и фоны тянутся по всей ширине.

    p.s переходи срочно в figma, это в разы ускорит разработку + там ты сразу можешь тестить свой дизайн.

    прикладываю на всякий случай сетки, копируй их в свой документ в фигме и делай все там (там кстати можно прям в режиме реального времени протестить как поведут себя блоки при растяжке)
    Ответ написан
    1 комментарий