Ланч-тайм 263: краткий перевод свежих статей о digital

Содержание

• Как сделать неоморфические кнопки с использованием базового HTML и CSS
• Внешняя и внутренняя дорожные карты менеджера проекта. Техника roadmapping

#846. Как сделать неоморфические кнопки с использованием базового HTML и CSS

Neumorphic Buttons Using Basic HTML & CSS

Источник

Неоморфизм или Soft UI — это сочетание плоского дизайна и скевоморфизма. Стиль использует множество теней (мягких и резких), объектов и форм. Добавляя к элементам интенсивные падающие тени, он создаёт эффект, что на этот элемент можно нажать и повзаимодействовать с ним.

Вот пример калькулятора в стиле неоморфизм. Источник

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

Как создать элементы в стиле неоморфизм с использованием HTML и CSS

1. Загрузите текстовый редактор, чтобы поэкспериментировать с кодом: например, Brackets или Sublime Text, которые оба являются редакторами исходного кода.

2. Создайте в нём два документа: для HTML и CSS. Обязательно сохраните оба файла в указанной папке на рабочем столе.

Создайте HTML и CSS документ. Источник

3. Находясь в HTML-документе, добавьте <title> для своего документа, а также добавьте <link> в свою таблицу стилей (CSS Document).

4. Создайте <div> для вашей кнопки. Используйте тег <input> и вставьте идентификатор, а также значение.

Источник

Источник

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

Источник

6. Для стилей неоморфизма поиграйте со следующими элементами: border-radius, background и box-shadow. Вы можете изменять цвета с помощью цветовых кодов HTML, чтобы найти нужный вам HEX-код.

Другие стили, которые следует учитывать, это font-weight, border-styles (none) и text-color.

Источник

А вот и результат!

Источник

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

#847. Стартаперы — кто они

The Two Roadmaps

Источник

Две дорожные карты: внешняя и внутренняя

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

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

Но какие именно это цели? И чьих интересов они касаются: команды руководителя проекта или заказчика? 

Чтобы не путаться и сваливать все яйца в одну кучу, сделайте обе карты: одна поможет достигать ваши цели (продавать), а другая — цели вашего клиента (разработать).

Это дорожная карта от Invision.

Источник

А это дорожная карта от Aha!.

Источник

Дорожная карта, которая помогает вам продавать

Для кого она и на какие вопросы отвечает:

1. Вы, как руководитель проекта

Знаете ли вы, что вы и ваша команда делаете? Всё под контролем? У вас есть план?
Вы знаете, как это монетизировать?
Имеет ли это смысл? Это реально?
Соответствует ли это миссии компании и общей стратегии?

2. Ключевые клиенты и партнёры

Что они получат за свои деньги сейчас и в будущем?
Что они должны брать во внимание, сравнивая вас с вашими конкурентами?
Когда они могут ожидать результатов, которые им нужны?
Как им согласовать с этим продуктом свою собственную стратегию?

3. Маркетинг

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

4. Инвесторы

Получают ли они отдачу от своих инвестиций? Или когда примерно начнут?
Выглядит ли это выгодно в долгосрочной перспективе?
Должны ли они увеличить или сократить инвестиции?

Принципы внешнего дорожного картографирования

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

Источник

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

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

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

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

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

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

Пример внешнего плана на основе даты. Источник

Дорожная карта, которая поможет вам разработать продукт

Итак, заказчик одобрил бюджет. Время реализации проекта! Мы приглашаем на сцену нашего главного посредника по реализации — внутренняя дорожная карта.

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

Внутренняя дорожная карта — для вас. Только вы сами решаете, как это должно выглядеть.

Ну ладно, не только для вас. Все другие заинтересованные стороны тоже непосредственно участвуют в управлении реализации проекта:

1. Ваше прямое управление в продуктах и технологиях

Как я могу отслеживать прогресс?
Когда нужна моя помощь и обратная связь?
Как убедиться, что разные команды выровнены?

2. Ваши коллеги (другие менеджеры)

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

3. И, конечно же, ваши вопросы

О чём моя следующая история?
Как мне ставить задачи?
Как выбрать цели для спринтов?
Как мне выровняться с другими командами?
Как мы выявляем зависимости и избегаем блоков и узких мест?
Как мне легко настроить приоритеты и ожидания в зависимости от зависимостей и наличия ресурсов?
Как я могу отслеживать свой прогресс?
Когда подходящее время для проверки MVP, сбора отзывов, анализа данных и корректировки обоих планов?

Принципы внутреннего картографирования

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

Источник

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

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

Внутренняя дорожная карта — это наглядный план действий «Как мы это будем делать» — ключевые особенности и этапы реализации. Естественно, внутренние единицы дорожной карты намного более «гранулированы», чем у внешней дорожной карты. А вот «Почему» проекта, каким бы интересным оно ни было, просто не соответствует масштабу и должно передаваться через другие документы.

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

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

Вывод: разделяй и властвуй грамотно. Счастливого Roadmapping'а!
Переводили для вас по таймлайну, чтобы вы сэкономили 20 минут.

Наша команда снова в сборе! В офисе парят ароматы кофе, парфюма и антисептика.

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.