Сайты, дизайн и самостоятельная работа
Сайты, дизайн и самостоятельная работа
Последние публикации
-
Как проверить контраст текста и фона в макете для доступного дизайна
Чтобы проверить контраст текста и фона в макете, определите цвет текста и фактический цвет под ним, затем сравните их коэффициент с порогами…
-
![Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования]( "Веб и фриланс")
Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования
Если изображений и пользовательских данных пока нет, проектируйте интерфейс вокруг сценариев, структуры и состояний, а не вымышленных материалов. Зафиксируйте ограничения, используйте нейтральные…
-
![Ширина текстовой колонки для удобного чтения на сайте: как подобрать оптимальный размер]( "Веб и фриланс")
Ширина текстовой колонки для удобного чтения на сайте: как подобрать оптимальный размер
Подбирайте ширину текстовой колонки по длине строки: на широком экране длинные строки утомляют, а слишком узкие дробят текст. Начните с пробного абзаца,…
Навигатор: Веб и фриланс
Веб-разработка
-
![Проектирование таблиц данных: выравнивание, плотность и читаемость интерфейса]( "Веб и фриланс")
Проектирование таблиц данных: выравнивание, плотность и читаемость интерфейса
Читаемая таблица данных группирует связанные поля, выравнивает однотипные значения одинаково и использует плотность строк, при которой записи можно…
-
![Дизайн пустого состояния интерфейса: как спроектировать каталог или личный кабинет]( "Веб и фриланс")
Дизайн пустого состояния интерфейса: как спроектировать каталог или личный кабинет
Пустое состояние интерфейса - экран, который появляется, когда в каталоге или личном кабинете пока нет данных для отображения.…
-
![Как реализовать раскрывающийся список с клавиатурной навигацией в веб-разработке]( "Веб и фриланс")
Как реализовать раскрывающийся список с клавиатурной навигацией в веб-разработке
Для списка выбора сначала оцените, достаточно ли нативного элемента <select>: он уже поддерживает клавиатурную навигацию и доступен вспомогательным…
-
![Как сделать таблицу доступной для экранных дикторов в веб-разработке]( "Веб и фриланс")
Как сделать таблицу доступной для экранных дикторов в веб-разработке
Чтобы сделать таблицу доступной для пользователей экранных дикторов, используйте семантическую разметку: обозначьте заголовки через <th>, данные - через…
Дизайн
-
![Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования]( "Веб и фриланс")
Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования
Если изображений и пользовательских данных пока нет, проектируйте интерфейс вокруг сценариев, структуры и состояний, а не…
-
![Как подготовить локальную среду проекта для передачи другому разработчику]( "Веб и фриланс")
Как подготовить локальную среду проекта для передачи другому разработчику
Чтобы передача проекта прошла без ручной настройки наугад, зафиксируйте версии инструментов, опишите зависимости и запуск сервисов,…
-
![Контроль версий макетов: как сохранять варианты и не терять историю решений]( "Веб и фриланс")
Контроль версий макетов: как сохранять варианты и не терять историю решений
Контроль версий для макетов - это единый порядок хранения исходников, фиксации изменений и восстановления нужного состояния.…
Фриланс
-
![Как обсуждать приоритеты с заказчиком, если бюджет или сроки ограничивают объём работ]( "Веб и фриланс")
Как обсуждать приоритеты с заказчиком, если бюджет или сроки ограничивают объём работ
Когда бюджет или сроки ограничивают объём работ, обсуждайте с заказчиком не абстрактное "сокращение", а выбор между…
-
![Как разделить личные и проектные заметки в приложении для записей?]( "Веб и фриланс")
Как разделить личные и проектные заметки в приложении для записей?
Разделяйте личные и проектные заметки по границам доступа, а не только по названиям папок. Сначала определите,…
-
![Формы с несколькими шагами: как сохранить данные при переходе между этапами]( "Веб и фриланс")
Формы с несколькими шагами: как сохранить данные при переходе между этапами
Чтобы введённые данные не исчезали при переходе между этапами, храните их в едином состоянии формы и…
Все публикации
-
Как проверить контраст текста и фона в макете для доступного дизайна
Чтобы проверить контраст текста и фона в макете, определите цвет текста и фактический цвет под ним, затем сравните их коэффициент…
-
![Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования]( "Веб и фриланс")
Дизайн интерфейса без изображений и пользовательских данных: принципы проектирования
Если изображений и пользовательских данных пока нет, проектируйте интерфейс вокруг сценариев, структуры и состояний, а не вымышленных материалов. Зафиксируйте ограничения,…
-
![Ширина текстовой колонки для удобного чтения на сайте: как подобрать оптимальный размер]( "Веб и фриланс")
Ширина текстовой колонки для удобного чтения на сайте: как подобрать оптимальный размер
Подбирайте ширину текстовой колонки по длине строки: на широком экране длинные строки утомляют, а слишком узкие дробят текст. Начните с…
-
![Проектирование таблиц данных: выравнивание, плотность и читаемость интерфейса]( "Веб и фриланс")
Проектирование таблиц данных: выравнивание, плотность и читаемость интерфейса
Читаемая таблица данных группирует связанные поля, выравнивает однотипные значения одинаково и использует плотность строк, при которой записи можно быстро различать.…
-
![Дизайн пустого состояния интерфейса: как спроектировать каталог или личный кабинет]( "Веб и фриланс")
Дизайн пустого состояния интерфейса: как спроектировать каталог или личный кабинет
Пустое состояние интерфейса - экран, который появляется, когда в каталоге или личном кабинете пока нет данных для отображения. Чтобы спроектировать…
-
![Как реализовать раскрывающийся список с клавиатурной навигацией в веб-разработке]( "Веб и фриланс")
Как реализовать раскрывающийся список с клавиатурной навигацией в веб-разработке
Для списка выбора сначала оцените, достаточно ли нативного элемента <select>: он уже поддерживает клавиатурную навигацию и доступен вспомогательным технологиям. Самописный…
-
![Css-переменные в веб-разработке: оформление темы сайта и настройка цветовой палитры]( "Веб и фриланс")
Css-переменные в веб-разработке: оформление темы сайта и настройка цветовой палитры
CSS-переменные помогают задать цветовую палитру сайта в одном месте, связывать цвета с их назначением и переключать темы без копирования всех…
-
![Проверка Html-разметки страницы: как читать сообщения валидатора]( "Веб и фриланс")
Проверка Html-разметки страницы: как читать сообщения валидатора
Проверить HTML-разметку страницы можно валидатором: передайте ему публичный URL или фрагмент исходного кода, изучите ошибки и предупреждения, затем исправьте подтверждённые…
