• Какой css код более правильный?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Второй вариант лучше потому что:
    * нет контекста, нет зависимости от «родительского» блока
    * большая гибкость в разметке. можно двигать классы по HTML не трогая при этом css
    * соблюдается «принцип единственной ответственности» — когда класс выполняет только одну функцию, легче дебажить

    https://adamwathan.me/css-utility-classes-and-sepa... — в статье на примерах показаны преимущества такого подхода.

    Но стоить отметить, что atomic css в чистом виде подходит не ко всем типам проектов.
    Ответ написан
  • Куда двигаться дальше senior разработчику? Новый язык, технологии, opensource, стартап?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Я вижу такой путь: 1) свой open-source проект → 2) свой платный продукт → 3) свой бизнес.

    1) Создание своих собственных инструментов для решения типовых повседневных задач — это сложнее и интереснее, чем просто делать таски. Так можно дополнительно прокачать себя в теории, сохранить свой опыт в виде готовых решений и сократить будущие трудозатраты на скучную рутинную работу.

    2) Используя собственные наработки, сделать свой платный продукт, который решает более крупную задачу. Повышение масштаба задачи — это, опять же, сложно и интересно. Продвигая и продавая свой продукт вы напрямую сталкиваетесь с типовыми задачами бизнеса: маркетинг, реклама, администрирование. Это шанс не бросая основную работу получить опыт в бизнесе и оценить, нравится вам это или нет.

    3) Если будете чувствовать себя достаточно уверенно, можно начинать свой full-time бизнес. Может быть ваш платный продукт будет развиваться стремительно и потребует 100% вашего времени. Может быть вы даже решите уйти в оффлайн-бизнес. Но опыт, полученный на предыдущих этапах, поможет.

    Я сейчас на первом этапе и что там будет на втором и третьем, могу лишь вообразить. Но, по крайней мере, такой план даёт осмысленное направление для развития.
    Ответ написан
  • Что делать, если в компании не проводятся юзабилити тестирования?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Если у вас веб-сайт или мобильное приложение, то можно воспользоваться бесплатным usertesting'ом.
    https://peek.usertesting.com — бесплатные сеансы длятся 5 минут и без настроек пользовательских сценариев.
    Такая демка поможет продемонстрировать руководству пользу от внедрения юзабилити тестирования и привлечь его на свою сторону.

    https://www.fullstory.com — сервис для записи действий пользователей на веб-проектах. Как прокачанный Яндекс Вебвизор. Этот сервис не расскажет о том, что думают пользователи о вашем продукте, но поможет вам понять, что пользователи делают и что не делают. Своеобразная ux-археология.
    Ответ написан
  • С чего начать изучать web-дизайн?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Дизайн начинается с проектирования.
    tilda.education/digital-design-basic-course — про все этапы процесса кратко и по-существу.
    https://yandex.ru/design-school — про дизайн с точки зрения крупной компании.
    bureau.ru/bb/soviet — разбор практических моментов, читать регулярно.
    Ответ написан
  • Когда лучше всего грузить пооекты на behance?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Слышал «лайвхак»: менять превьюшку, которая отображается в ленте, раз в несколько дней. Это позволяет получить больше просмотров.
    Ответ написан
  • Стоит и какие наработки выкладывать на github для будущего портфолио?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Сто́ит выкладывать всё, вообще всё. И так как это будет публичный код, стоит позаботиться, чтобы это был не стыдный для данного этапа вашего развития код.

    Но в портфолио для работодателя должно быть адекватно малое количество крепких работ. Вы можете создать себе организацию на ГитХабе и перемещать туда неактуальные репозитории, чтобы в корневом аккаунте были только клевые работы. Вы можете создать репозиторий «portfolio» из одного readme.md и в него собирать ссылки на лучшие ваши проекты с аннотациями.

    Я уже писал про сортировку репозиториев на ГитХабе с помощью организаций Как вы организуете свою работу?
    Ответ написан
  • Как правильно расположить блоки с кнопками?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    До появления флексов эта проблема решалась костылями и хаками:

    1. Колонки на флоатах выравнивались с помощью js. По событию onResize высота колонок пересчитывалась.
    2. Колонки на инлайн-блоках, а кнопки в них спозиционированы абсолютно от нижней границы колонок.
    3. Имитация таблицы через display: table и table-cell + медиа-запросы, чтобы разобрать таблицу на малых экранах.

    Я бы рекомендовал вам не заморачиваться и просто погуглить «блоки одинаковой высоты» и почитать старые статьи для ознакомления, а тренироваться верстать уже на флексах и гридах.

    Но если всё же хочется получить подробные комментарии, сделайте демки на codepen и добавьте ссылки в вопрос.
    Ответ написан
  • Как сохранить пропорции таблицы при уменьшении разрешения?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    https://codepen.io/paulradzkov/pen/zzvOvR?editors=1100
    вариант без svg и без js, но с кучей других органичений:
    - нужно знать точные width и height таблицы для calc вычислений в css
    - нужно знать все дополнительные горизонтальные размеры вокруг таблицы. это могут быть маргины, паддинги, ширина сайдбара и т.д.
    - нужно делать кастомный брейкпоинт на основании всех этих размеров

    Добавлено
    Поторопился я отправлять — работает только в blink и webkit
    Ответ написан
  • Почему нет доступа к репозиторию при деплое?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    У меня когда-то была ситуация, что скрипт деплоя на GitHub не видел репозиторий через «remote origin». Пришлось задавать отдельно новый «remote deploy» с явно заданным логином и паролем.
    Ситуация описана здесь paulradzkov.com/2014/deploy_docpad_site_to_github_...
    Может поможет.
    Ответ написан
  • Имею ли я право использовать фотографии городов и их достопримечательностей внутри игр, программ и сайтов легально и бесплатно?

  • Как сделать отступы между картинкой с float:left и маркерами списка рядом с ней?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Когда-то писал статью об этом paulradzkov.com/2013/lists_and_floats
    И решение работало несколько лет. Но пару недель назад в новых хроме и опере появился баг: пока не поресайзишь окно, буллиты прилипают к левой границе контейнера.
    Но в статье есть и «старое» решение, у которого были проблемы с размеров буллитов в IE.
    Ответ написан
  • Как сделать чтобы блоки выстраивались с право на лево?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Самый древний способ — direction: rtl;
    htmlbook.ru/css/direction
    Контейнеру direction: rtl; — чтобы пустить блоки справа налево.
    Блокам direction: ltr; — чтобы контент внутри блоков вернулся в нормальный поток.

    И вместе с ним можно использовать и флоаты, и инлайн-блоки, и таблицы.
    Но лучше флексы :)
    Ответ написан
  • Как в sketch выбрать инструмент selection как в photoshop?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Selection и Magic Wand можно выбрать только сделав дабл-клик по растровому слою. (или выделить слой с картинкой, нажать edit → в правой панели увидите selection и magic wand). Для векторных слоев и смешанных групп это не работает.
    Ответ написан
  • Как на ретина-дисплеях установить повторяющийся фон?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Надо прописывать два фона — обычный, и «ретина» через медиа-запросы:
    .something {
        background-image: url(path/to/bg@1x.png);
    }
    @media screen and (min-resolution: 2dppx) { 
         .something {
            background-image: url(path/to/bg@2x.png);
        }
    }


    https://developer.mozilla.org/en-US/docs/Web/CSS/M...
    Ответ написан
  • Как строить карьеру в дизайне?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    У дизайнеров есть уровни по масштабу и сложности работы, которую они могут потянуть.

    Кто-то находится на уровне «иконки и баннеры», а вот качественно справиться с лендингом уже не может.
    Кто-то на уровне «страница» клепает лендинги и сайты из 10 страниц для малого бизнеса.
    Кто-то справляется с крупным на 100 экранов.
    Кто-то вышел на уровень «UI kit» и управляет дизайнерами с более низких уровней в масштабах крупного проекта.
    Кто-то способен создавать «дизайн-системы» и развивать несколько крупных проектов в рамках корпорации, заботится о восприятии бренда этой корпорации.
    Кто-то поднялся на уровень «архитектор платформы или операционной системы» и создает гайды для операционок, такие штуки как Material Design, в рамках которых существуют продукты множества других корпораций.

    В зависимости от отрасли и специализации деление на уровни может быть разным, больше-меньше уровней, но уровни есть везде. Первые 2-3 уровня достигаются довольно быстро, но переход на каждый последующий уровень даётся всё дольше и большими усилиями, требует умножения знаний.

    Программист с реальным опытом коммерческой разработки в 10 лет, вряд ли станет работать ниже сеньора, а то и тим лида, то дизайнер с подобным опытом по сути, остается таким же специалистом, что и люди, с опытом 1-2 года
    — это не так.

    Много лет работы не значит автоматическое получение звания. Даже в программировании можно 10 лет работать и остаться мидлом, если делать одинаковые задачи и не повышать масштаб и сложность. Можно прокачать скорость работы, но проиграть в конкурентной борьбе с более молодым специалистом, который прокачивал сложность работы.

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

    За год на фрилансе или в маленькой дизайн студии можно сделать десятки лендингов. После десятого и после сотого лендинга уровень профессионализма дизайнеров отличается много меньше, чем в 10 раз. Конкуренция происходит в рамках одного уровня.

    За тот же год можно сделать 1-2 крупных сервиса. Но чтобы положить в портфолио работу ещё более крупного масштаба, нужно уже несколько лет.

    Вы сейчас «предлагаете комплексные услуги», скорее всего, на фрилансе или в небольшой дизайн-студии и достигли «плато», когда развитие идёт всё медленнее. Если заполучить более сложный и масштабный проект не получается, уходите работать в продуктовую компанию. Там есть возможность расти в масштабе и переходить на новый уровень. Нужно рваться получить левел-ап, тогда дизайнеры с предыдущего уровня вам не будут конкурентами.
    Ответ написан
  • Как начать брать крупные заказы на фрилансе?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Большинство советует потратить полгода-год, работая в компании, но вопрос стоит «Как начать брать крупные заказы на фрилансе?». Да, работа в продуктовой компании поможет поднять свой уровень, но это не тот ответ. После работы в хорошей компании может и не захотеться возвращаться во фриланс. Вопрос стоит «как повысить свою компетентность, продолжая работать на фрилансе, и выбраться из потенциальной ямы лендингов и бложиков?»

    Есть разница в подходах к разработке. На фрилансе, обычно, проектная работа, сделал побыстрее, получил деньги и забыл. В компаниях при продуктовой разработке над одним продуктом работают по много лет, продукт живет, усложняется, эволюционирует. Чтобы продуктом было легче управлять, используют всякие фреймворки, архитектуры, подходы в проектировании и т.д. Без длительной работы над одним проектом всё это не нужно.

    Применяйте продуктовые подходы во фрилансе.
    Свяжитесь с прошлыми заказчиками и поинтересуйтесь, всё ли работает как ожидалось, надо ли что-то доделать, переделать или улучшить. Заполучите постоянных заказчиков. Если повторно поработаете над своим прошлым проектом, заметите, что было сделано не очень, и поймете, как делать лучше сразу.

    В новых проектах старайтесь выторговать больше времени. И за это дополнительное время пробуйте сделать больше, чем просили. Например, сделайте клиентскую оптимизацию, выбейте как можно больше очков в pagespeed, напишите документацию. Делайте проекты с мыслью о том, что этот проект к вам вернется и пробуйте на практике, всё, что хочется изучать.

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

    Саморазвитие на фрилансе по-любому будет идти медленнее, чем в развитой продуктовой компании.
    Ответ написан
  • Как свернуть таблицу после 10 строки?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Можно вообще без скриптов сделать через :nth-child()codepen.io/paulradzkov/pen/VbpNGM?editors=1100

    Рассмотрим этот селектор:
    table tbody > tr:nth-child(n + 11) {
        display: none;
    }


    Он выбирает все ряды, начиная с 11-го, внутри tbody и скрывает их.
    Шапка таблицы должна лежать в thead, тогда она не учитывается и может иметь любое количество рядов.

    В последнюю строку таблицы обычно пишут какой-то суммарный результат, для этого есть тег tfoot.
    Если поместить последнюю строку в него, то она будет видна в любом состоянии.

    Структура таблицы получится такой:
    <table>
        <thead>
            <tr>
                <th></th><th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th><td></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th></th><td></td>
            </tr>
            ...
            <tr>
                <th></th><td></td>
            </tr>
        </tbody>
    </table>
    Ответ написан
  • Может ли веб программист стать еще и веб дизайнером при отсутствии явных способностей?

    paulradzkov
    @paulradzkov
    Дизайнер, верстальщик, начальник отдела UI
    Дизайн пользовательского интерфейса — это смесь инженерии, психологии и хорошего вкуса. Чтобы стать дизайнером не обязательно уметь рисовать. Достаточно иметь здравый смысл, некоторое количество знаний и развить вкус (натренировать свою нейросеть видеть разницу между красивыми дизайнами и некрасивыми).

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

    Если вам нравится делать работу дизайнера, читать/смотреть про дизайн, рассматривать красивые сайты, то у вас есть все шансы со временем стать хорошим дизайнером.

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

    Самая действенная мотивация — это получать удовольствие от процесса.
    Ответ написан