Самые запоминающиеся провалы чаще всего случаются в самом начале, когда вы очень стараетесь проявить себя и еще не понимаете, что провалы – это неотъемлемая часть развития. Мы попросили 8 дизайнеров поделиться тайной: каким был их первый рабочий провал?
Наконец-то в последних версиях Firefox и Chrome был запущен CSS Grid без дополнительных флажков. Да-да, теперь можно поиграть с гридом в двух самых популярных браузерах.
Подборка вдохновляющих примеров дизайна лендинговых страниц, демонстрирующих три основные тренда.
Сайт – это инвестиция, но о каком конкретно времени мы говорим? Когда и как инвестировать в сайт и чем руководствоваться?
Иногда для правильной адаптации страницы media querie и процентов не достаточно, нужно больше контроля. И решение есть – единицы вьюпорта!
Цвет – один из самых важных элементов дизайна. Поскольку дизайн – это эволюция, наше восприятие цветов (и того, как мы их используем) постоянно меняется...
Пустота – это неотъемлемый аспект жизни. Представьте, что слушаете музыку без промежутков между нотами. Это был бы просто шум. То же самое можно сказать и про дизайн.
Коллекция сайдбаров, которую я собрал, пока искал вдохновение для веб приложения, над которым сейчас работаю.
Все допускают ошибки. Возможно, пытаясь закончить проект побыстрее, или во время работы над сложным дизайном что-то просто упускается из виду. Но если вы совершили ошибку, вы должны её исправить!
Вижу это постоянно. Дизайнеры и разработчики настраивают контрольные точки, ориентируясь на свои любимые устройства. Когда мы уже научимся на своих ошибках?
При использовании медиа запросов CSS значения изменяются очень резко, но можно добиться более плавного результата.
В октябре 2016 появилась новая технология: OpenType Font Variations, более известная как вариабельные шрифты. Эта технология позволяет одному шрифтовому файлу вести себя как несколько шрифтов.
У CSS Grid очень гибкий синтаксис. Чтобы продемонстрировать это, мы создадим один и тот же макет тремя разными способами.
Дэн Седерхольм, один из соучредителей Dribbble, рассказал о том, с чего все началось, где Dribbble сейчас и куда планирует двигаться в будущем.
Карточка – это компонент пользовательского интерфейса, который работает как точка входа на страницу с более детальной информацией. Она стала символом современного цифрового мира и её дизайн имеет большое значение.
В CSS предусмотрены селекторы для выбора элемента на основе его позиции в дереве. Помимо этих псевдо-классов есть еще и те, что учитывают тип элемента.
Иногда единицы viewport’a очень полезны, так как зависят только от его размерa. Никакого каскада и влияния родительских элементов. Давайте рассмотрим небольшой пример использования vmin.
В веб программировании рекурсией называется функция, которая вызывает сама себя, как же добиться подобного эффекта в CSS?
Проценты дают много способов настроить вид контента, но они подходят не во всех случаях. Единицы viewport’a предлагают альтернативные «гибкие» значения.
В адаптивном дизайне часто забывают о высоте. На мобильных устройствах страницы бывают довольно длинными. Нужно ли обращать на это внимание?
Вместо того, чтобы всегда использовать один и тот же размер шрифта, или прыгать от одного размера к другому, как в media queries, можно сделать его гибким.
Эрик Шпикерманн - один из самых известных типографов мира, создатель шрифтов для таких компаний как Audi, Nokia, Cisco, Bosch и многих других.
Псевдоклассы nth-child и nth-of-type очень похожи, но все же работают совершенно по-разному. Давайте разбираться.
С приходом нового года появился целый набор новых вещей для изучения. Среди них много новых свойств, 3 из которых мне бы хотелось поскорее применить в этом году.
CSS Grid довольно сложный, в нем 17 новых свойств и много новых концепций на счет написания CSS. Пытаясь разобраться в спецификации, я создала простой макет.
Мне бы хотелось, чтобы новые CSS свойства поддерживались лучше. Однако среди них есть одно, которого я уже не могу дождаться.
Я заметил, что за последний год или около того стало популярно делать скошенные фоны на всю ширину экрана. Ниже несколько способов получить такой эффект.
CSS переменные уже поддерживаются всеми основными браузерами, кроме одного. А это значит, что стоит рассмотреть их использование в современной разработке.
С приходом нового года в браузерах появляется CSS Grid, и сразу без префиксов. Этот пост будет ответом на вопросы, которые мне задавали о CSS Grid и его поддержке браузерами.
Допустим, у вас есть градиент на CSS, который идет от красного к прозрачному. Вроде бы все просто, да? Но на самом деле тут есть подвох.
Для меня оценка дизайнерских портфолио – это ежедневная задача. На что мы смотрим, когда нанимаем (или не нанимаем) дизайнеров?
Цвет – это один из самых мощных инструментов дизайнера. Если говорить о современном веб-дизайне, то это определенно время ярких цветов. Ниже несколько советов по их использованию.
В 2017 году бэкграунды расширяют свои границы с помощью крутой геометрии, асимметрии и абстракции. Сегодня мы рассмотрим современные тренды в их дизайне, дополнив все вдохновляющими примерами.
Для креативщиков есть много хорошего материала, но в этом месяце я решил сфокусироваться на основных пунктах. Это восемь простых, возможно, банальных вещей, которые стоит запомнить.
«Оценивайте человека по его вопросам, а не по его ответам.» - Вольтер. А вас оценивали по вашим вопросам? Не продвигаетесь в бизнесе, карьере или браке? Возможно, вы не задаете правильные вопросы?
Веб формы эволюционировали из своих бумажных аналогов. Наборы надписей, боксов и кругов разрабатывались для того, чтобы контролировать ввод и упростить обработку данных. Но прогресс не стоит на месте, формы тоже должны измениться.
Возможность задавать переменную, использовать её по всему CSS и легко менять реализована и в препроцессорах и в родных CSS переменных. Но стоит знать несколько важных отличий.
Начало встречи. Вы – главный дизайнер проекта. Ваши клиенты перечисляют свои пожелания, вы все старательно записываете. Прошел час, а вы едва ли произнесли одно предложение. У вас есть какие-то мысли, но вы молчите. Почему вы молчите?
Самая сложная часть в процессе веб дизайна – это его утверждение. Оно может занять очень много времени и вымотать, а в конце вы можете остаться с дизайном, который будет стыдно включить в портфолио...
«Мне не нравится» - самый страшный отзыв о дизайне от вашего клиента, босса или коллеги. «Мне не нравится, потому что…» - это уже лучше. Как добиться той обратной связи, которая нам нужна?
<path> выглядит довольно неразборчиво. В нем куча цифр и буков, смешанных в одну длинную строку. Компьютерная поэзия! Я не эксперт, но думаю, что будет интересно покопаться в нем.
Отрывок из 6 главы книги Криса Койера «Practical SVG». Хотелось бы Вам получить контроль над размерами всей графики, которую вы используете на сайте? «Эй, ты! Лого! Ты должно быть вот такого размера!» И так все и происходит.
Вместо брендов, между покупателями и продуктами снова будут реальные люди.
Мы пришли к пониманию важности модулей и того, как они помогают с адаптивностью.
Изменения в годовой статистике использования браузеров едва-едва заметны. Война браузеров закончилась?
Потребители устали от рекламы так, как никогда за последние несколько десятилетий.
Основные пункты новых модулей: переменные, новые селекторы, сетка и Snap Points.
С появлением устройств с сенсорными экранами в формате ноутбука hover эффект стал не надежным.
Вспоминаю время, когда я впервые начал заниматься дизайном, если б была возможность вернуться назад и дать себе всего один совет, то я бы посоветовал тренировать глаза.
Тратишь кучу времени на модный дизайнерский элемент... а потом мода заканчивается. И крутой дизайн вместе с ней. Но все не обязательно должно быть именно так.
Статья поднимает важную тему тайминга UI анимации. Правильный тайминг необходим для создания правильной анимации.
Хорошие UX дизайнеры должны быть бойцами, потому что компромиссный дизайн - это плохой дизайн.
"Брутальные" сайты избегают шаблонных, user-friendly интерфейсов и, вместо этого, создают сайты с дизайном, напоминающим графику 90х.
Я получаю много писем от молодых дизайнеров, которые часто спрашивают, как найти свой собственный уникальный стиль...
Если вы думаете о создании личного сайта, то вот вам несколько отличных примеров, сделанных по всем правилам создания эффективных сайтов.
Анимация упрощает познавательную нагрузку, не допускает моментальных изменений, лучше запоминается в пространственном отношении и оживляет интерфейс.
Выпущены новенькие сайты для The Times и The Sunday Times. Я подумал, что было бы неплохо написать статью о структуре их пользовательского интерфейса.
Если вы работаете в индустрии дизайна, то видели как приходят и уходят стили, какие же в тренде, а какие в прошлом?
Можно ли ошибиться с цветом? Существуют ли оттенки или сочетания цветов, которых стоит избегать? Одним словом…да!
Как вы предпочитаете писать название работы, которой мы занимаемся: frontend? front end? Front-End? Есть ли среди этих вариантов правильный?
Руководство по комбинации шрифтов, которое продавалось тысячами копий, использовалось учебных программах и цитировалось ведущими дизайнерами, теперь доступно для скачивания бесплатно!
Изучение комбинации шрифтов – это лучшая инвестиция, которую может сделать дизайнер: она учит быть избирательным и терпеливым в принятии дизайнерских решений.
Веб изменил наше представление о комбинации шрифтов. Нужно рассматривать проект по композициям, оценивая шрифты в разных условиях и контекстах.
Комбинация шрифтов не начинается и не заканчивается каким-то одним правилом – все значительно сложнее и зависит от целей проекта.
Цель этой главы – помочь вам разработать четкую и эффективную процедуру комбинирования шрифтов.
Давайте посмотрим на 5 сайтов и проанализируем их комбинации шрифтов.