Зависнуть на Behance на пару часиков – это норма для дизайнера.

Только вот это время можно потратить на свою работу. И тут на помощь приходит канал Behancer – там публикуют топовые работы с Behance.

Всё, что нужно для вдохновения, и ничего лишнего: @onbehancer

#реклама

Услышал про эту статью в подкасте "Веб-стандарты" ( https://is.gd/edni9e ) о том, что эта статья отличный материал для новичков, которые хотят понять методологию БЭМ.

Содержание статьи:
1. Основные почему
2. Основы БЭМ
3. Модификаторы и миксы
4. Удобство параллельной разработки и верстка блоками
5. Блоки в файловой структуре
6. Шаблоны в БЭМ
7. Тестирование верстки
8. Сборка проекта
9. С чего начинать?

Мне как начинающему верстальщику давно было интересно разобраться, что же такое БЭМ. Часто слышал об этой волшебной аббревиатуре в различных материалах, но не понимал о чём это.

🇷🇺 Сссылка на статью -
https://is.gd/sexyzy

Хочу ещё добавить одну статью о которой я услышал из подкаста. В статье объясняется, почему не нужно использовать атрибут title для повышения доступности сайта и вообще стоит отказываться от него полностью. За исключением нескольких ситуаций.

Его использование рекомендуется только в некоторых случаях:
abr - при использование тега аббревиатур.
iframe - добавлять описание, что это внешний элемент
Смены темы сайта - при подключение дополнительных css стилей.

🇺🇸 Ссылка на статью - https://is.gd/qc4ZHc

Ссылка на обсуждение в подкасте (44 минута) - https://is.gd/rb72we

Качественное дизайн-образование под любые задачи!
- Графический дизайн, дизайн сайтов и мобильных приложений
- Профессиональная подготовка — бакалавриат с государственным дипломом
- Работа с персональным наставником — дополнительное профессиональное образование по индивидуальному плану
- Ключевые дисциплины и инструменты — интенсивные программы и курсы, по отдельности и в наборе
И главное, в удобном онлайн-формате, с непрерывной обратной связью!
Оставь заявку на обучение - https://goo.gl/rrZRU4

#реклама

Игнат Смирнов из aic написал заметку, что знание таких языков программирования, как SQL, R и Python могут быть полезны дизайнеру.

- SQL и R будут полезны UX проектировщикам. С помощью SQL можно писать скрипты, и обращаться к базе данным для получения данных статистики. С помощью R, как я понял можно визуализировать эти полученные данные.
- Cо знанием Python и использованием приложения Rhino с подключенным к нему плагином Grasshopper, можно играться с алгоритмическим дизайном.  

В статье Игнат приводит материалы для изучения каждого языка программирования. Ссылка на статью - https://is.gd/o1t0xc

За саму ссылку спасибо каналу Саши Бизикова (@bizikovru)

​​Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.

1. Бесплатная серия видео уроков по css grid - https://is.gd/480ore
2. Реклама Apple Homepod. Только типографика и музыка - https://is.gd/ljxjla
3. Подборка дизайн методов для работы над проектом - https://is.gd/m4d86j
4. Видео как работать с модульными сетками - https://is.gd/sqtr68
5. Haiku - приложение для создания анимаций и экспорт в код для Sketch вышел - https://is.gd/bnhgcf

#5вПят

Double Diamond

Модель двойного алмаза (Double Diamond) – простой фреймворк, который помогает дизайнерам решать проблемы проекта и генерировать идеи. Данная модель двойного алмаза, представляет собой структурированный подход к решению любой дизайн задачи в четыре этапа:

1. Исследование – знакомство и анализ проблем.
2. Определение  — область где нужно сосредоточиться над полученными результатами.
3. Разработка — генерация потенциальных решений. Важно не думать о каких либо ограничениях.
4. Результат — выбор решений, которые можно реализовать и проверить.

Подробное описание метода по ссылкам.
🇺🇸 – https://is.gd/8wghp9
🇷🇺 – https://is.gd/5aw4pi

Сделал перевод схемы Double Diamond на основе статьи

От красивых картинок к дизайну digital-продуктов: «Нетология» совместно с Badoo запускает очный интенсив по продуктовому дизайну. В числе экспертов курса - Павел Шумаков (Badoo), Алексей Бородкин (Notamedia) и Андрей Сундиев (Mail.ru Group). Лучший студент курса получит приглашение на стажировку в лондонском отделении Badoo!
Подробнее о программе обучения - http://netolo.gy/d9t

#реклама

Дизайнер Слава Яшков рассказал о полном цикле работы над готовым продуктом BeepCar. Всё от исследования до дизайна и разработки. В своей статье он описывает, как шла разработка продукта, как работал с пользовательскими исследованиями, аналитикой и как проводились эксперименты при запуске сервиса.

🇷🇺 - https://is.gd/pv41ir

​​Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.

1. Концепты поиска Яндекс от известных дизайнеров. Мне понравился вариант от студии ONY - https://is.gd/4i122u
2. Музей интерфейсов - https://is.gd/evs4oi
3. Тестирование прототипов от Invision - https://is.gd/7ne4ki
4. Инструмент проверки адаптивности на популярных устройствах https://is.gd/j2pbr7
5. Каталог отечественных дизайн систем - https://is.gd/zoggk0

#5вПят

Создание современной библиотеки для Sketch

Перевёл статью Майкла Фуке из Hudl в которой он рассказывает, как они создавали удобную в использовании и простую в обслуживании библиотеку для Sketch.

Это мой первый полный перевод статьи. Буду рад вашему фидбеку.
https://is.gd/yyizve

​​#вопрос

Недавно я задавал вопрос у себя в твиттере, и в одном крупном чатике на тему проверки дизайна с вёрсткой. Решил спросить и у вас.

Как вы проверяете вёрстку в соответствии с дизайн макетом? И дополнительный вопрос. Если через Chrome dev tool я внёс правки в CSS или HTML. Могу ли я показать эти изменения разработчику в удобной форме, где именно произошли изменения? Или тут только один вариант – скопировать изменённые стили в отдельный css файл и отправить их разработчику на просмотр?

Поделитесь пожалуйста своими советами и инструментами по решению этой задачи, в личные сообщения со мной @astract

Юра Ветров написал короткую заметку о новых инструментах для дизайнеров интерфейсов. В частности упомянул новый инструмент Phase. Я уже попросился в ранний доступ, жду свой инвайт чтобы его попробовать. Сама заметка по ссылке - https://is.gd/7ptijz

Обратил внимание, как приложение Twitter провоцирует пользователя на написание дополнительных ответов с помощью кнопки «Добавить ещё один твит»

Ссылки против кнопок

В своей статье Марси Саттон рассказывает, почему важно различать кнопку и ссылку в html. Приводятся доводы, в каких случаях нужно использовать кнопку вместо ссылки и как правильное использование этих тегов влияет на доступность сайта.

Что могут кнопки <button> :
- кнопка может получать фокус с клавиатуры
- делать «клик» по нажатию на пробел
- отправлять данные формы на сервер
- очищать форму
- блокироваться с помощью атрибута: disabled
- давать подсказку скринридеру
- показывать состояния ∶focus, ∶hover, ∶active, ∶disabled

Что могут ссылки <a> :
- создавать гипертекст
- перевести пользователя на новую страницу
- изменять url
- вызвать браузерную перезагрузку страницы
- переходить по якорям внутри страницы
- связывать между собой разные части веб приложения
- способны принимать фокус по умолчанию с помощью атрибута href
- можно кликнуть с помощью клавиши enter
- имеют неявную роль link
- ссылки нельзя заблокировать как кнопки, но можно сделать неактивными
- могут открывать в новых окнах
- отображать состояния ∶link, ∶visited, ∶focus, ∶hover, ∶active

Основное отличие
Ссылка перемещает пользователя на новый ресурс. Кнопка переключает что-то в интерфейсе.

🇷🇺 https://is.gd/d39afu
🇺🇸 https://is.gd/7yMPF0

Открыт набор на двухгодичную онлайн-программу для дизайнеров. Ждем смелых — кто не боится учиться «с нуля» или признать,
что надо поработать над безупречностью навыков и качеством работ. Прокачаем скилы и систематизируем все, что вы уже знаете и
умеете, заполним пробелы, залакируем-отполируем до блеска. С первого курса работаем над качеством вашего портфолио. Лучшим
даем рекомендацию для устройства в крутые компании. Интенсивно, трудно, незабываемо, 38 000 рублей за семестр. Старт в феврале! https://goo.gl/4VLJ89

#реклама

Статья с говорящим названием, почему ваше приложение выглядит лучше в Sketch.

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

Основные советы:
- Перед передачей в дизайна в разработку. Исправьте во всех текстовых блоках трекинг букв. Для шрифта San Francisco используйте плагин SF font fixer (можете скачать через плагин Runner).
- Для правильного отображения теней, можно попробовать повысить коэффициент радиуса тени и слегка уменьшать прозрачность в коде.
- Для правильного отображения градиентов, попробуйте немного изменить координаты начальной и конечной точки в коде.

🇺🇸 https://is.gd/0r4npm

Нашёл статью в ответах к этому твиту.

Как отображается тень в различных браузерах. Полезная гифка.
https://is.gd/uw8qhn

​​​​Еженедельная рубрика «Пять в Пят»
Пять интересных ссылок за неделю.

1. Studio - ещё один инструмент для создания интерфейсов от Японцев https://is.gd/qWuNKE
2. Вышел Avocode 3.0 https://is.gd/Kvl369
3. Grid guide - инструмент для создания сеток https://is.gd/HzYCwb
4. История создания интерфейса для Windows 95 https://is.gd/34qSEc
5. Медиа о дизайне от Британки (БВШД) https://is.gd/cMSs8L

#5вПят