64 сайта для дизайнеров, которые нужно добавить в закладки

Как сделать прибыльной разработку дизайна сайтов (часть 3)

В предыдущих статьях мы рассмотрели проблемы повседневности и их решение для темы «встреч». Сегодня рассмотрим решение следующей проблемы.

Тема сегодня «Постановка задачи»

Напомню суть проблемы. У вас есть подписанный договор. В голове у вас мысли, напоминающие взбаламученную бурей воду. Много идей, что можно нарисовать. Множество мыслей, как удивить будущего посетителя нового ресурса, чтобы он зашел и сказал «WOW, its cool», и разослал знакомым или поставил лайк. У вас уже пошли мысли, как вам вручат награду thefwa, awwwards или cssdesignawards (.com). Иногда видится даже такой момент, когда выходишь с договором в руке и предоплатой на банковском счету: звучит музыка, светит солнце, тебе все вокруг улыбаются.

Чем занимается веб-дизайнер

Рабочий процесс дизайнера выглядит так:

• Дизайнер получает данные от заказчика — зачем нужен сайт, как он будет работать, какие пользователи будут на него заходить. Хороший вариант, если заказчик точно знает, что нужно. Но так бывает не всегда, поэтому дизайнер должен сам задавать вопросы и получать ответы. Задачу, требования к сайту и ответы на вопросы дизайнер записывает в бриф.
• Веб-дизайнер создаёт наброски или прототипы будущего сайта: на бумаге или в специальных программах. Прототипы больше похожи на схемы, где указывается расположение основных элементов на страницах сайта.
• На основе прототипов дизайнер рисует цветной макет. Тут уже можно работать над сочетаниями цветов, добавлять анимацию.
• Готовый макет дизайнер передаёт заказчику или разработчикам, которые перенесут его на сайт.

Важно! Прототип легче изменить, чем нарисованный макет, поэтому вопросы по структуре и расположению решают на стадии прототипирования

Советы начинающим веб-разработчикам

Перевод

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

• Порой сайт — это всего лишь сайт.
• Браузер уже является клиентом; HTML — это язык, на котором он разговаривает.
• Веб строится вокруг визуализации на стороне сервера.
• Вы можете предоставить данные несколькими способами; рассмотрите HTML как один из способов представления данных.
• Масштабирование на стороне вашего сервера поможет всем, в то время как масштабирование на стороне клиента, помогает только тем, у кого мощное железо и быстрое соединение.
• Не каждый имеет (или может использовать) мышку.
• Не каждый имеет (или может использовать) клавиатуру.
• Не каждый имеет (или может использовать) тачскрин.
• Не у каждого цвета и картинки отображаются так же, как и у вас.

Один в поле не воин или как бэкендер фулстеком попытался стать

Из песочницы

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

Кнопки «Закрыть»: паттерны и антипаттерны

Перевод

На модальных окнах, на рекламных объявлениях, на других подобных всплывающих элементах веб-страниц часто можно найти кнопку «Закрыть» с соответствующим символом. Эти кнопки позволяют пользователям (по крайней мере — некоторым из них) закрывать окна. Возможность щёлкнуть по кнопке «Закрыть» часто доступна только тем посетителям веб-страниц, у которых есть мышь. Дело в том, что большинство реализаций подобных кнопок далеко не идеально. В материале, перевод которого мы сегодня публикуем, будет рассмотрено 11 проблемных паттернов, которые используются при создании кнопок «Закрыть», а также — способы решения проблем этих паттернов. Здесь же речь пойдёт и об удачных способах создания кнопок «Закрыть».

Как определить функционал MVP и влюбить клиента в пилотную версию продукта

Из песочницы

Итак, MVP. Достаточно заезженная тема, на мой взгляд. Каждый, кто хоть как-то связывал себя с разработкой программного обеспечения за последние 5 лет, с 99% вероятностью слышал эти 3 буквы. Но даже несмотря на обилие информации, народ все равно наступает на грабли «идеального продукта» при создании проектов.

Эта статья не претендует на то, чтобы быть истиной в последней инстанции

Она не про важность и необходимость MVP. И не про его роль в бережливом запуске стартапов

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

Начну с вирусной зарисовки пути развития стартапа по принципу MVP, которая гуляет по интернету и которую вы наверняка встречали.

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

Боль. Или дизайн крупных проектов

Боль

Как не странно, но по самому процессу разработки визуальной части мы в компании отстаем как минимум на года 2-3. Во-первых, классическая, изолированная, универсальная модель: Проектирование — Дизайн — Верстка. Во-вторых, один и тот же подход остается как для страниц мелких акций (заглушек), так и для масштабных сервисов вроде, где трудно предугадать сценарий развития. Но мы метем все под одну гребенку. Я лично не знаю в нашей компании персонажа, который глобально бьется над улучшением процесса и самой системы разработки визуальной части. В основном звучат умелые фразы, по поводу сроков и складывается впечатление, что все мастера по тайм менеджменту. Многие из резких фраз, как «Процент времени», напрочь убивают всю логику, и наивно полагаться на сохранение продуктивности на том же уровне. Когда разрабатываешь крупный проект, 5-7 глобальных переключений в день на другие задачи, полностью парализуется и сбивает весь процесс разработки основного проекта. Ну, впрочем, это менеджерская магия с выгодой в одну сторону.
Процесс разработки визуальной части — это два отдельных этапа дизайна и верстки. Один и тот же подход остается как для мелких страниц акции (заглушек), так и для масштабных сервисов, где трудно предугадать сценарий развития.
Теперь о вытекающее из этого «боли»…. Ситуация, которая сейчас выглядит так:

LightBox с точки зрения UX/UI и как он меняет продукты

В Экосистеме РСХБ мы создаем инновационные продукты для сельского хозяйства.
Для их разработки мы решили использовать подход мировых компаний в области UX/UI.
Чтобы не повторять ошибки конкурентов и создать полноценную экосистему.
Основой всех продуктов экосистемы стал LightBox, который является сквозным функциональным дизайн-решением. Например, в проекте для фермеров, мы решаем насущные проблемы и вопросы фермера в одном окне и кроме маркетплейса товаров предоставляем большое число услуг
и сервисов.
Сложность проекта заключается в объединении в одном портале разных сценариев и ролей.

Как использовать психологию цвета для увеличения конверсии

Чтобы сформировать мнение о продукте, пользователю достаточно 90 секунд. Определяющую роль на мнение пользователей оказывает выбранная цветовая гамма. Цвет управляет эмоциями посетителей и определяет отношение к сайту и бренду в целом. Когда вы смотрите на какой-либо цвет, ваши глаза взаимодействуют с определенной областью головного мозга, известной как гипоталамус. Он посылает сигнал в гипофез к эндокринной системе, и затем к щитовидной железе. А щитовидная железа дает сигнал на выработку специальных гормонов, которые влияют на настроение, эмоции и поведение.Нейл Патель из компании QuickSprout утверждает, что цвет на 85% влияет на решение о приобретении той или иной продукции. Поэтому многие компании вкладывают большие деньги в исследования и создание продающей упаковки для своего товара. Тоже самое правило работает и для продающих сайтов: используйте правильные цвета, и вы всегда будете в выигрыше.

Aerospace and the Military Push New Robot Capabilities

Live Date: October 29, 2019Duration: 60 minutes

The US military is expected to spend more than a billion dollars in the next five years on robotic research and deployment. Commercially, the aerospace industry is scrambling to fill billions of dollars of backlog. One of the obvious solutions for both: intelligent, connected, traditional, collaborative and autonomous robotics.

Over the coming years we are likely to see significant advances in robot capabilities due to the investments in robotics from the military and the aerospace industry. This webinar will delve into some of the potential uses, applications, technologies, and innovations and that is offered by military and aerospace robotics and automation.

Attend this webinar and learn:

• Why the military and aerospace industry are investing so heavily in robotics.
• What robot capabilities are most important to the military and aerospace industry.
• How will advances from the military and aerospace affect the robot industry?
• What can we expect to see in the future of robotics?

Sponsored by:

     

Часто задаваемые вопросы

Где учатся на графического дизайнера?

В университетах, авторских школах, на курсах графического дизайна, а также самообучение. Смотрите «Как стать графическим дизайнером»?

Какие предметы нужно сдавать после 11 класса на графического дизайнера?

В России: ЕГЭ по русскому языку и литературе, плюс творческий конкурс «Рисунок» при поступлении.В Украине: ЗНО Українська мова та література, Історія України або Фізика, Математика або Інозмена мова; плюс творчий конкурс. Смотрите «Где учиться на графического дизайнера?»

Как создать портфолио графического дизайнера?

Выбрать свои лучшие работы (созданные «для себя», для друзей, или во время практики на курсах), составить портфолио по шаблону, выкладывать портфолио на сайтах. Не выкладывайте все свои работы. Только лучшие и только их

Нужно ли уметь рисовать графическому дизайнеру?

Вкратце – нет. Вам не пригодится умение рисовать головы греческих богов и гипсовые конусы. Дизайнеры зачастую используют в работе готовые картинки и иллюстрации

Дизайнер – более инженер, чем художник; важно уметь мыслить визуально, и превращать информацию в красивую структуру.Здесь могут пригодиться базовые навыки скетчинга: смотрите книгу «Вы сможете рисовать за 30 дней». 

Какие программы использует графический дизайнер и для чего они нужны?

Графический дизайнер работает в таких редакторах: — Adobe Photoshop для коррекции фото и 2D графики; — Adobe Illustrator или CorelDraw для векторной графики; — Adobe InDesign для полиграфии; — 3ds Max для 3D графики и визуализаций; — Figma для веб-дизайна и интерфейсов; — Blender для анимации.

Технические предпочтения пользователей с нарушениями зрения в 2020 году. Исследование Яндекса

Информационные технологии стирают многие границы. Они помогают учиться и работать удалённо, совершать покупки не выходя из дома, поддерживать связь с друзьями и близкими, заниматься наукой и творчеством. Однако для части общества цифровизация расширяет не только горизонты, но и спектр проблем при использовании повседневных, кажущихся обычными, процессов и продуктов.
Привет, Хабр! Меня зовут Никита, я помогаю коллегам из Яндекса с технической экспертизой по вопросам accessibility. В этой статье поделюсь данными нашего исследования и расскажу о том, почему сбор и оценка информации о технических предпочтениях пользователей с нарушениями зрения — ещё один важный шаг к полному пониманию специфики доступности.

Introduction to Parts Feeding – Parts Singulation for Robot Automation

Live Date: February 19, 2020Duration: 60 minutes

If you have an assembly application and need to build parts, chances are, you will need parts feeding. From bowl feeders to vibratory feeders, there are many solutions available today. Figuring out which one to go with can be daunting. With nearly 4 decades of automation experience, Epson Robots has the expertise to walk you through the process and explain the various feeder types available in the market. We will also take you through areas to consider and how to get started.

Attend this webinar and learn:

• How to select the right parts feeder
• Industry Trends
• Getting to know the essentials
• Pitfalls to avoid

Sponsored by:

Новичку only: 10 вещей, которые вы должны знать как веб-разработчик

Из песочницы

Привет, Хабр! Представляю вашему вниманию перевод статьи «10 Things You Should Know As a Web Developer» автора Anuupadhyay.
Написание тысячи строк кода и превращение в веб-сайт — одна из творческих и сложных вещей для веб-разработчиков. Если вы в этом деле новичок, увидели множество красивых веб-сайтов и подумали попробовать силы в этом, нам необходимо открыть глаза и рассказать о некоторых вещах, нужных веб-разработчику

Создание веб-сайта, который привлекает внимание пользователей, — это не только изучение различных языков программирования, это также изучение других концепций, таких как DevTools, форматы данных, тестирование, API-интерфейсы, аутентификация и многое другое. Здесь рассказывается о некоторых вещах, которыми должен овладеть веб-разработчик

1. HTML / CSS / JS

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

Где учитьсяна графического дизайнера?

По определению Международного союза дизайнеров ICOGRADA, графический дизайнер – это «профессионально подготовленный специалист, который создает визуальную, материальную, пространственную и цифровую среду, используя междисциплинарные подходы в теории и практике дизайна».

Рассмотрим варианты профессиональной подготовки графического дизайнера.

01.Онлайн курсы

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

Нет расписанияПроходите курс, когда и где удобно.

Поэтапное прохождениеТолько после прохождения определенного шага и сдачи домашнего занятия вам откроется следующий урок.

Дешевлечем другие платные формы обучения.

ПрактикаВажнейшая часть обучения на курсах. Подстёгивают вас делать, делать, делать и делать.

Какие курсы выбрать?Смотрите наш обзор лучших курсов для обучения графическому дизайну на русском языке.

Если вы владеете английским, для вас открывается выбор бесплатных онлайн-курсов на Udemy и Coursera.

Продолжайте читать и получите подборку бесплатных русскоязычных курсов в разделе ниже.

02.Авторские школы

Авторские школы обычно организованы автором (известным профессионалом, ментором) либо группой успешных специалистов.

Вокруг школы формируется целое «комюнити» (сообщество). Такие школы предлагают разные форматы обучения: учебные курсы, лекции, практические семинары, воркшопы, митапы (встречи).

Кроме платного обучения, у них часто можно найти бесплатные курсы и бесплатный обучающий контент. Это отличный старт в профессии.

Сильные стороны

• Репутация школы
• Много практики, и ведут лучшие практики
• Большой выбор курсов (от общих вводных до точечных навыков)
• Прямой контакт с преподавателями, фидбек
• Становитесь частью комюнити дизайнеров

Нюансы

• Высокая стоимость (тем не менее, предлагают некоторые бесплатные курсы)
• Привязка к локации для офлайн занятий

Список лучших авторских школ

01. Онлайн-университет Skillbox

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

02. Нетология

Помогают освоить востребованную профессию в дизайне с нуля или изучить новую специализацию.

03. Bang Bang Education

Школа дизайна и иллюстрации. Предлагает курсы и интенсивы от ведущих экспертов индустрии, открывают студентам доступ к профессиональному сообществу, помогают развить технические навыки и творческое мышление.

04. Школа дизайнеров Бюро Горбунова

«Школа cтавит на поток подготовку и даёт билет в профессию отечественным информационным и интерфейсным дизайнерам с чёткими жизненными ориентирами».

05. Британская Высшая Школа Дизайна

«Британская высшая школа дизайна является одним из важнейших образовательных центров России, специализируясь на профессиональном образовании в сфере творческих и бизнес отраслей, а также развиваясь на основе тесных партнерских связей с университетом Хартфордшира (Великобритания)»

06. Projector

«Школа Projector — платформа, помогающая профессионалам разного уровня и специализаций развивать системные и точечные навыки в дизайне интерфейсов, графдизайне, разработке, фронт-энде, проджект-менеджменте, интернет-маркетинге, английском языке и тд».

07. Среда Обучения

«Высшее образование онлайн из любой точки планеты».

03.ВУЗы

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

Плюсы:

• Диплом об академическом образовании
• Хорошая теоретическая база

Минусы:

• Мало практики
• Долго
• Дорого

Если вы хотите получить концентрат практических навыков в сжатые сроки, можно выбрать авторскую школу или онлайн-курс.

Код специальности в РФ54.01.20 Графический дизайнКод специальности в Украине022 Дизайн

Status of 3D Printing with Metal

Live Date: February 27, 2020Duration: 60 minutes

In the last few years, 3D printing with metals has exploded. Conventional powder bed fusion metal AM technologies (laser and e-beam) have continuously evolved with great advances in capabilities and materials. Hybrid methods that incorporate conventional CNC machining and additive manufacturing have been developed around Directed Energy Deposition and Ultrasonic Additive Manufacturing methods. More recently several new metal additive manufacturing (AM) technologies have emerged, including binder jetting, material extrusion, material jetting, vat photopolymerization, and cold spray.

During this webinar, Joe Strauss from HJE will examine each of these metal AM technologies. He will describe the processes and their capabilities, covering relative cost, build size, metals processed, tolerances, and surface finishes.

Attend this webinar and learn:

• Technical descriptions of current metal AM technologies
• Relative equipment costs
• Process capabilities: Build size, metals processed, tolerances

Sponsored by:

 

Светлое на Светлом

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

Их трудно читать.

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

К счастью, есть довольно легкий способ для исправления этой проблемы:

Выберите новое изображение в последовательно-цветовом фоне.

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

Рассмотрим полноцветное наложение на изображение, чтобы увеличить контраст между фоном и текстовыми элементами.

Где может работатьграфический дизайнер?

01. Фриланс

Фрилансеры самостоятельно ведут бизнес – поиск работы, переговоры с клиентами, маркетинг, бухгалтерия… С одной стороны, фриланс подразумевает свободу; с другой стороны, требует дисциплины.

Достоинства:

• Работа не привязана к локации – можно работать с ноутбуком на пляже.
• Творческая свобода. Фрилансер сам выбирает, какие проекты брать в работу (или нет – начинающие дизайнеры хватаются за все заказы).
• Свободный график. Рабочее время определяется ритмом жизни дизайнера, а не наоборот.

Недостатки:

• Изоляция. Работа в коллективе подразумевает общение, поддержку, обмен идеями и мотивацию. Экстраверты на фрилансе могут заскучать.
• Самостоятельный поиск заказов. Доход непредсказуемый, т.к. зависит от загрузки.
• Ограниченный профессиональный рост. На фрилансе обитают малые и средние заказы, крупные проекты – редкость.

02. Дизайнер в агентстве или студии

Это работа в команде над большим количеством проектов.

Достоинства:

• Отличный старт для новичков. Агентства часто предлагают стажировку, а опытный дизайнер может стать вашим наставником.
• Работа в коллективе дизайнеров. Можно попросить совета, завести полезные связи и учиться у коллег.
• Фокус на графическом дизайне – роль граф дизайнера в агентстве четко определена, типовые задачи позволяют «набить руку».

Недостатки:

• Дедлайны и правки требуют стрессоустойчивости.
• Оплата меньше, чем с клиентской стороны.

Часто, работу нельзя положить в портфолио, т.к. правами владеет студия либо клиент.

03. Работа на одну компанию

«In-house» дизайнер работает с единственным проектом для конкретного бизнеса.

Достоинства:

• Стабильная работа и оплата
• Погружение в айдентику единственного бренда
• Развитие продуктового мышления

Недостатки:

• Не-дизайнерский коллектив – дизайнер может оказаться единственным в компании.
• Однообразие в дизайне — развитие может получиться однобоким.
• Многозадачность — буклеты, рассылки, реклама, выставки – всё в руках одного графического дизайнера. 

Материалы по теме:— Продуктовый дизайнер должен быть инженером— Чем отличается дизайнер в продуктовой компании от дизайнера в агентстве?— Виды трудоустройства для дизайнера. В чем разница и что выбрать?

DirectX raytracing — всплываем

В 2018 году компания Microsoft анонсировала raytracing API (DXR) как часть DirectX 12. Подход рейтрейсинга заставляет полностью переосмыслить способ ренедринга трехмерных сцен, смещающий классический подход растеризации на второй план. АПИ модернизируются, разрабатываются более производительные GPU, разработчики пакетов визуализации пробуют новые возможности. Однако даже на наиболее производительных видеокартах мощности хватает на генерирование всего нескольких лучей на пиксель для обеспечения стабильной частоты смены кадров. К тому же, производительность во многом зависит от сложности материалов и сцены. Но уже сегодня продвинутые алгоритмы шумоподавления и аккумуляции результата освещенности позволяют достичь высокой степени реализма. Все это мотивирует к экспериментам в данной области.

В каком направлении развиваться веб-дизайнеру

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

Вот на чём может специализироваться веб-дизайнер:

UX/UI-дизайн — проектирование внешнего вида сайтов и приложений с учётом удобства для разных пользователей.
UX, сокращение от английского выражения user experience, дословно означает «опыт пользователя»
Здесь внимание уделяется пользователю и тому, какое впечатление он получает от работы с интерфейсом, как переходит по страницам, достигает ли он своей цели и насколько ему сложно это сделать.

Под UI — user interface — подразумевается внешний вид интерфейса, его характеристики и оформление
Здесь важно и расположение, и размер элементов, и цветовые акценты. Потому что в первую очередь нужно сделать дизайн удобным для пользователя

Под UI — user interface — подразумевается внешний вид интерфейса, его характеристики и оформление

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

Product Dashboard by Mason Yarnell

UX и UI — это два направления, но грань между ними постепенно стирается, поэтому специалисты всё чаще соединяют оба названия и пишут UX/UI.

Как найти иллюстратора, если вы ничего не понимаете в иллюстрации

Tutorial

Меня зовут Полина, я работаю веб-дизайнером и иллюстратором. Работы много, поэтому со временем возник вопрос о поиске «запасного игрока», который в случае моего большого загруза мог бы подхватить задачу по созданию иллюстраций для статей на Хабр и Яндекс Дзен.
До этого момента мне не приходилось заниматься поиском фрилансеров, я была по другую сторону баррикад, что мне очень помогло, поэтому решила написать небольшой гайд для людей, которые оказались в той же ситуации впервые или имели неудачный опыт. Мой рассказ будет не только теоретическим: под катом реальные кейсы с комментариями и выводами.
Эта статья для тех, кто ищет иллюстраторов на фриланс, при этом «не умеет рисовать», мало взаимодействует с «творческими людьми» и имеет слабое представление об иллюстрации в целом. Слово «иллюстрация» можно заменить на «логотип», «лендинг», «сайт», «анимированное видео».

Умная хрущёвка на максималках

Моя статья про проводной умный дом была популярной на Хабре (159 тысяч просмотров) — в ней я описал положительный опыт от идеи до реализации умного дома в новостройке.
Вместе с тем, у меня есть опыт интеграции и со старыми домами — квартира в типовом советском пятиэтажном кирпичном доме семидесятых годов постройки уже 5 лет автоматизирована. Она имеет единую панель управления для разных подсистем и не зависит от облачных сервисов. В отличии от новостройки, эта квартира в пятиэтажке была автоматизирована не сразу, а поэтапно за несколько лет, по мере возникновения интереса к разным элементам управления и контроля, таким как:

1. мониторинг приборов учета;
2. датчики контроля: домофона, температуры, шума, открытия дверей, …;
3. единая панель управления умным домом;
4. подъездное видеонаблюдение;
5. настенный дисплей для текущего времени и температуры за окном;
6. освещение в квартире, включая кнопку «выключить всё»;
7. удаленное обесточивание квартиры;
8. удаленное перекрытие воды.

3D модель этой двухкомнатной квартиры 47 кв.м, которая была автоматизирована, нарисованная в Sweet Home 3D

Возможностикарьерного роста

Пять лет назад, Лера пришла в компанию Х «рисовать кнопки» для сайтов. Год спустя, Лера разработала свой первый интерфейс мобильного приложения.

В прошлом году Лера стала начальником отдела UI. Лера больше не рисует — она менеджит проекты и ведет переговоры с заказчиками.

Лера считает, что достигла плато; она хочет развиваться в новом направлении, поэтому начинает осваивать моушн-дизайн с нуля.

Мораль истории: в карьере дизайнера всегда есть пространство для развития и обучения.

Рост дизайнера может быть линейным:

Схема. Карьерный рост графического дизайнера

На самом деле, много лет работы не означает автоматическое повышение. Графический дизайнер не растёт, если из года в год выполняет одинаковые задачи.

Переход на каждый новый уровень требует повышения сложности, умножения знаний, развития в новом направлении. Этот принцип называется lifelong learning.

Что делать, чтобы расти профессионально?

• Работать в компании (либо на фрилансе) и получать опыт
• Собирать супер-крутое портфолио
• Выкладывать свои работы на Behance и Dribbble
• Следить за трендами и новинками
• Штудировать новые инструменты и ПО
• Прыгать выше головы

Вас могут заинтересовать наши статьи:Моушн дизайн в 2020 году (тренды с примерами)Уроки Blender 3d

Не в момент выполнения, а в момент проектирования

Перевод

Давным-давно мудрый старый разработчик дал мне совет, который до недавнего времени я не очень ценил.
Во время код ревью мы рассматривали некоторую функцию, которая требовала, чтобы программа выводила список букв A-Z (например, список контактов с набором кнопок, которые позволяют переходить к именам, начинающимся с определенной буквы).
Итак, появился молодой преуспевающий программист. (Хорошо, это был я.) Я решил, что вместо хардкода массива всех букв будет проще написать цикл for, который проходит от 65 до 90, а затем генерировал буквы по полученному коду символа.
В варианте JavaScript это будет выглядеть примерно так:

Мудрый старый разработчик посмотрел на меня и спросил, почему я просто не захардкодил этот массив. Это не выглядит так, как будто алфавит будет отличаться от одного сеанса к другому. Так зачем каждый раз вычислять его?

5 макетов лендингов от VWO

Примечание от нас:
Не так давно на Хабре встретился комментарий о том, что целевые страницы начинают себя изживать. Но как кажется нам, учитывая тенденции забугорного интернета, этот вывод немного преждевременен. LP переживают период бурного расцвета и считаются чуть ли не панацеей для электронной коммерции, как B2C, так и B2B формата.
Под катом пять макетов, немного общей информации о том, что должно быть в каждом лендинге и маленький опрос.Немного об источнике.
Visual Website Optimizer – компания, которая занимается анализом и оптимизацией сайтов. Основным направлением деятельности является A/B тестирование, в ходе которого осуществляется комплексный анализ различных сторон процесса конвертации и всех факторов, которые на него влияют. Компания имеет огромный опыт и приличную клиентскую базу, в которой замечены Microsoft, Logitec и даже российский ресурс Ichance.
Дизайн разработанных макетов основан на многолетнем опыте компании и их знаниях о влиянии дизайна на уровень конверсии.Картинки кликабельны, открываются в текущей вкладке

Новое CSS-свойство content-visibility ускоряет отрисовку страницы в несколько раз

Recovery Mode

5 августа 2020 разработчики Google анонсировали новое CSS-свойство в версии Chromium 85. Оно должно существенно повлиять на скорость первой загрузки и первой отрисовки на сайте; причём с только что отрендеренным контентом можно взаимодействовать сразу же, не дожидаясь загрузки остального содержимого. заставляет юзер-агент пропускать разметку и покраску элементов, не находящихся на экране. По сути, это работает как lazy-load, только не на загрузке ресурсов, а на их отрисовке.В этой демке , применённый к разбитому на части контенту, даёт прирост скорости рендера в 7 раз

Итог

Для полноценной тёмной темы в почте нам не хватало перекраски писем со стилями, и мы выяснили, как это устроить. Два простых варианта на чистом CSS — переопределение стилей и CSS-фильтр — не подошли: первый слишком сурово обходится с исходным дизайном, второй просто плохо работает. В итоге мы используем адаптивное затемнение — разбираем стили, заменяем цвета более подходящими и собираем обратно. Сейчас работаем над расширением темы на картинки — для этого нужно анализировать их содержимое и перекрашивать только некоторые.

Если вам когда-нибудь потребуется перекрашивать произвольный пользовательский HTML под тёмную тему, держите в голове три метода:

• Переопределение стилей — нужно в любом случае для вашего основного приложения, дёшево и сердито, но убивает все исходные цвета.
• CSS-фильтр — прикольно, но работает так себе. Используйте только для непрозрачных (в смысле доступа) элементов вроде фреймов или веб-компонентов.
• Преобразование стилей — затемняет очень качественно, но сложнее других методов.

Даже если вы никогда не будете этим заниматься, надеюсь, вы интересно провели время!

Полезные ссылки:

1. Если вам интересно обсудить эту тему вживую и в контексте разработки под Android, то приглашаем в гости 18 апреля в петербургский офис Яндекса.

2. Недавно мы рассказывали о решении другой проблемы пользователей почты — проблемы рассылок.