Рубрика «веб-дизайн» - 17

Привет, я Григорий, пользуюсь файловыми менеджерами почти 25 лет, и у меня есть что сказать про них — сегодняшний файловый менеджмент сделан плохо. Я попробую показать проблемы в наиболее распространённых прогах и сервисах, и если хотите, считайте эту статью whitepaper.

Посмотрите на этот скриншот и подумайте что изменилось за последние 20 лет.

image

Основные вводные утверждения:

  1. Сегодня файловый менеджмент неразрывен на десктопе, мобильном и в вебе — приватно публично и в коллаборации. Правильно сделанный файловый менеджер должен стирать грани между платформами, делая файлы синхронизированными и готовыми к совместному использованию и шерингу.
  2. Он должен предоставлять информативное превью контента любого типа, релевантные метаданные и инструменты по управлению внешним видом контента, подходящие каждой платформе.
  3. Он должен иметь релевантные инструменты для операций с файлами, чтобы можно было делать простые вещи просто, а сложные без лишнего мозготраха.

Мейнстримные файловые менеджеры не могут этого, вообще они сосут по всем 3 пунктам. Вот почему:

  1. Дизайнерам нет дела до того что они дизайнят, они не пользуются продуктом. Они просто делают свою работу.
  2. Их боссам нет дела до дизайна. А должно быть?
  3. Обычные пользователи не замечают "мелкие" недостатки. Они просто пользуются.Читать полностью »

Полагаю многим известна технология css верстки, как flexbox. По данной технологии написано не мало пособий и руководств. Она проста, значительно облегчает разработку сетки web-проекта и поддерживается многими современными браузерами. Это делает её популярной технологией среди web-разработчиков.

Изучая новые для меня концепции, я стараюсь максимально сжато, но между тем информативно выразить изучаемое в графическом виде, отношении одних сущностей к другим, их взаимосвязь и поведение. И flexbox не стала для меня исключением. За несколько вечеров я собрал для себя обзорную «шпаргалку» по технологии, которая долгое время висела у меня на стене перед глазами, пока я не запомнил все основные моменты по технологии.
Читать полностью »

Привет! Давно я сюда ничего не писал, со времён моего золотого поста про переход Opera на WebKit прошло уже пять лет. Но тут появился повод: завёл себе блог на Ютубе. Чтобы понять, зачем и что это такое — смотрите пилот. Если коротко: чтобы разбирать сайты и отвечать на вопросы. А сейчас перед вами 9-й выпуск с ответами на вопросы. Под катом подробности, ссылки, почта для связи и спойлер с остальными видео. Если меня здесь не съедят живьём — буду продолжать постить сюда раз в неделю новые.

Читать полностью »

Адаптировано из нашей будущей книги «Рефакторинг UI»

Видели эти модные генераторы цветовой палитры? Когда выбираешь цвет, настраиваешь несколько параметров с музыкальными словечками типа «триада» или «четвёртый мажор» — и получаете пять идеальных цветов для своего веб-сайта?

Создание собственной цветовой палитры - 1

Такой вычислительный и научный подход к выбору идеальной цветовой гаммы крайне соблазнителен, но не очень полезен.
Читать полностью »

image

12 ноября Google по тихому обновил PageSpeed Insights, изменив в нем практически все. Это станет большой переменой для всей индустрии сайтостроения. Похоже, сейчас настанет некоторая волна паники и хайпа вокруг этого события. В статье — анализ перемен и что они нам принесут.
Читать полностью »

Как сделать редизайн сайта и не нажить проблем: 4 важных шага - 1

Редизайн сайта часто видится руководителям бизнеса универсальным инструментом решения проблем. Падают продажи, пользователи проводят на сайте меньше времени, снижается конверсия – сделаем редизайн, и все исправим. На практике же часто оказывается, что редизайн порождает еще большие проблемы. Сегодня речь пойдет о том, какие шаги предпринять, чтобы этого избежать.Читать полностью »

Темные паттерны веб-форм или какой была бы самая конверсионная форма - 1

Практический каждый веб-ресурс предназначен для сбора информации, целью может быть сбор заявок, подписей, регистрации а так же сбор личных данных клиентов. В любом ветви событий нам нужно пройти через этап заполнение веб-форм. Мы подумали какой должна быть форма, обладающая максимальной эффективной конверсий с начала заполнения до ее конечной отправки. Заранее отмечу, публикация написана в ознакомительных целях, дабы показать как разрабатываются формы с темными паттернами, которыми «успешно» пользуются крупные кампании и не в коем случае не призываю к действиям описанным в публикации.
Читать полностью »

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт Responsive Logos, который показывает различные варианты известных логотипов для разных размеров экрана. Когда я впервые увидел это, я подумал, что это не более, чем просто ловкий трюк. В конце концов, это просто div для спрайта большого изображения в качестве фона. Так было до того момента, пока я не услышал доклад на Smashing Conference от MikeRiethmuller под названием «За пределами медиазапросов». Кроме того, я настоятельно рекомендую прочитать его же статью «Большой потенциал SVG».

Создание адаптивных изображений - 1

Я узнал две вещи, которые меня потрясли:

  1. При использовании SVG вы можете отказаться от атрибута viewBox и установить новую систему координат на вложенных элементах SVG путем применения нового viewBox. (Да, я знаю. Это звучит странно. Ниже я объясню все более подробно).
  2. Когда вы используете медиазапросы внутри SVG-файлов, а затем вставляете изображение через тег img или в качестве фонового изображения CSS, медиазапросы привязаны к ширине изображения. Практически такое же поведение, как и при использовании контейнерных запросов.

Читать полностью »

Существуют определенные правила CSS, которые можно найти в любом учебнике. Но есть также правила CSS, которые вы не найдете в пособиях, но столкнетесь с ними, как только начнете писать код. Я уверен, вы уже разобрались в том, как выровнять элемент по вертикали или создать сложный макет. Мы не будем об этом говорить.

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

Советы по CSS, которые вы вряд ли найдете в самоучителях - 1

Ниже изложено то, чему руководства по CSS меня не научили.
Читать полностью »

Многие компании используют так называемые тёмные паттерны: интерфейсы, сделанные не для удобства пользователя, а для получения выгоды. Спикер курса Binary District «UX/UI для продуктологов и дизайнеров» — арт-директор компании «Наносемантика» Михаил Федосов — рассказал, какие виды паттернов используются в разных компаниях, и есть ли у дизайнеров альтернатива такому подходу.

От «Победы» до PornHub: как компании применяют тёмные паттерны - 1
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js