Создавайте сайты где угодно
В 2015 году Джозеф Коэн обратил внимание на необычный факт.
«Как и все, я выходил в интернет со своего iPhone, но создать ничего я там не мог, — говорит Коэн. — Тогда еще не было приложений».
Два года спустя он запустил Universe — первый мобильный инструмент для создания сайтов. С Universe это так же просто, как переставить местами блоки. В приложении есть полный набор инструментов электронной коммерции, а также модули, которые могут содержать текст, изображения, видео, ссылки, анимированные кнопки и продукты. Просто организуйте их по-своему. Теперь приложение доступно для iPhone, iPad и Mac.
Мы поговорили с основателем компании о Universe и пользе черновиков.
Universe поможет выбрать идеальный шаблон.
Как вам пришла в голову идея создать Universe?
Одним из вдохновений стал продукт Apple. Это был HyperCard, выпущенный в 1987 году. По сути, это инструмент без кода: дизайн и разработка для людей, которые не были ни дизайнерами, ни разработчиками. Я загрузил его в эмулятор шесть лет назад и был поражен. Я подумал, что если бы я мог сделать что-то подобное для iPhone, это превратило бы каждого интернет-пользователя в интернет-создателя. Другой, более важной задачи я не придумал.
Много независимых компаний используют Universe, чтобы создать магазин: ювелиры, парфюмеры, модные бренды, иллюстраторы.
Вы можете начать бизнес, используя одно приложение. На наших глазах почти 20 000 компаний запустились в Universe.
Как Universe превратилось в инструмент для бизнеса?
После того как мы демистифицировали процесс разработки веб-сайтов, то поняли, что можем сделать то же самое с коммерческой частью. Мы запустили наши бизнес-услуги, когда пандемия только начиналась, и с тех пор добавляем инструменты для продажи цифровых файлов, управления остатками товаров и создания этикеток для доставки.
Как появилась сеточная разметка в приложении?
Сетка — отличительная черта графического дизайна. Независимо от того, разрабатываете ли вы плакат, документ или брошюру, все начинается с сетки. Если разделить экран iPhone на три столбца и пять строк, получится почти идеальный квадрат. Это выглядит заманчиво, чтобы начать что-то делать. Сетка избавляет от проблемы чистого листа, но все еще требует вашего участия.
Если б можно было отмотать время назад, какую рекомендацию вы бы дали себе?
Не тянуть: чем больше циклов вы пройдете, тем лучше будет продукт. Одна из прекрасных вещей в разработке заключается в том, что все всегда можно изменить и улучшить. Нужно мыслить в образе «вечного черновика», где работа не кончается.
Дизайн сайта в стиле Apple
Веб-дизайн в стиле Apple развивался и эволюционировал на протяжении нескольких лет, начиная с 1996 года. Как следует из названия, идея дизайна принадлежит корпорации Apple: в таком стиле оформлялся сайт и интерфейсы продуктов. Дизайн сайта в стиле Apple приобрел широкую популярность благодаря минималистичности и акцентуации внимания пользователя на конкретном продукте.
Характерные особенности дизайна сайта в стиле Apple
- Строгая иерархия в композиции элементов. Основной приоритет – изображение продукта. Фотография высокого качества, четкая, крупная, размещается в центе страницы и окружается белым пространством. В лучших традициях минимализма.
- Цветовая палитра, как правило, состоит из трех оттенков: черный, белый, серый. При этом, в отличие от плоского стиля, широко применяются градиенты, тени, способы передачи объема.
- Характерные шрифты. Заголовки оформляются Adobe Myriad, обычный текст – Lucida Grande.
- Контент. На главной странице сайта – минимум информации. Подробное описание вынесено на отдельные страницы. Отсутствует эффект перенасыщения. Пользователь сам выбирает информацию, которая его интересует.
- Технические особенности. Apple-дизайн ориентирован на формат HTML 5, использование современных стандартов в дизайне. На официальном сайте Apple принципиально не используется Flash.
Для каких сайтов подходит?
Дизайн сайта в стиле Apple – идеальный способ презентовать товар или услугу. Такой стиль часто используют при оформлении интернет-магазинов, лендинг пейдж, промо-сайтов, посвященных любому виду продукции: от обучающих курсов до продажи недвижимости.
Вот так выглядит дизайн в стиле Apple для сайтов, посвященных программному обеспечению:
-
- Jumsoft http://www.jumsoft.com/money/
- Versionsapp https://versionsapp.com/
Для оформления этих сайтов использованы характерные цвета стиля – серый, черный, белый. Благодаря этому навигационное меню практически незаметно. Внимание пользователя приковано к продукту, презентованному ярким, красочным изображением. С помощью контрастов выделены кнопки для скачивания, покупки. Контент подан кратко, структурировано, в сопровождении иконок и изображений. Дизайн объемный, присутствуют зеркальные эффекты, тень.
Не подойдет Apple-стиль для информационных порталов, блогов, портфолио, а также сайтов, посвященных творчеству.
No-code. Как сделать сайт без программирования Запуск завтра
Вы точно хоть раз оказывались на странице, созданной с помощью Tilda или Readymag. Эти сервисы позволяют сверстать сайт без программирования всего за несколько кликов. Как это возможно? Насколько качественными получаются такие продукты? А можно сделать не сайт, а что-то сложнее? Программисты больше не нужны? Обо всем этом Самат Галимов спрашивает технического директора компании Readymag Антона Васина.
Реклама. АНО ДПО «Образовательные технологии Яндекса» ИНН 7704282033
Курс «DevOps для эксплуатации и разработки»: https://clck.ru/36VeSWСлушать «Запуск++» и другие бонусы по подписке ЛибоЛибо+ в приложении «Подкасты» от Apple https://cutt.ly/zap10epap или в закрытом тг-канале Либо/Либо https://cutt.ly/zap10eptg Скоро там появиться вторая часть разговора про батарейки, которая не вошла в этот эпизод.
Подписаться только на «Запуск++» в Телеграме: https://t.me/+N_AopnXC0dBkMGQy
Наш гость Антон Васин: https://antonvasin.com
Почитать про No-code можно здесь: https://www.nocode.tech И здесь: https://thenocodecrew.com
Чат Запуска в телеграме: https://t.me/zapuskzavtra
Редакторки: Маша Агличева и Маргарита Берденникова
Продюсеры: Данил Астапов и Настя Медведева
Звукорежиссер: Юра Шустицкий
Дизайнер обложки: Петр СутуповЭто подкаст студии «Либо/Либо»: https://libolibo.ru/
Вы точно хоть раз оказывались на странице, созданной с помощью Tilda или Readymag. Эти сервисы позволяют сверстать сайт без программирования всего за несколько кликов. Как это возможно? Насколько качественными получаются такие продукты? А можно сделать не сайт, а что-то сложнее? Программисты больше не нужны? Обо всем этом Самат Галимов спрашивает технического директора компании Readymag Антона Васина.
Реклама. АНО ДПО «Образовательные технологии Яндекса» ИНН 7704282033
Курс «DevOps для эксплуатации и разработки»: https://clck.ru/36VeSWСлушать «Запуск++» и другие бонусы по подписке ЛибоЛибо+ в приложении «Подкасты» от Apple https://cutt.ly/zap10epap или в закрытом тг-канале Либо/Либо https://cutt.ly/zap10eptg Скоро там появиться вторая часть разговора про батарейки, которая не вошла в этот эпизод.
Подписаться только на «Запуск++» в Телеграме: https://t.me/+N_AopnXC0dBkMGQy
Наш гость Антон Васин: https://antonvasin.com
Почитать про No-code можно здесь: https://www.nocode.tech И здесь: https://thenocodecrew.com
Чат Запуска в телеграме: https://t.me/zapuskzavtra
Редакторки: Маша Агличева и Маргарита Берденникова
Продюсеры: Данил Астапов и Настя Медведева
Звукорежиссер: Юра Шустицкий
Дизайнер обложки: Петр СутуповКому нужен лендинг как у Apple, и как его сделать?
Многие из вас видели классные продуктовые лендинги, где телефон крутится, меняет масштаб, а код страницы не дает заскучать сначала фронтендеру, затем процессору ноутбука. Чтобы сделать такой сайт, нужна задача и сработанная команда.
10 показов
9.1K открытий
Готовый сайт Petrovich BrothersОбычно у нас заказывают сайты другого типа: корпоративный сайт, годовой отчет, или лендинг для сервиса. А там нет никаких физических объектов, показать нечего.
Так бы это все и осталось в планах, но тут звезды сошлись. Сначала мы придумали набор для Амперки, который нравится самим. Это идеальный продукт для такого сайта. Я в отдельной статье написал, как мы его делали. А потом наступил карантин, текущие проекты затормозились, запуск новых отложился на неопределенный срок. Появилась свободная команда. Мы поработали два месяца и сделали промо-сайт Cyber Bug.
А зачем так все сложно?
Или кому нужен лендинг как у Apple, если ты не Apple? Мы начали этот проект для себя, чтобы отработать технологии. В процессе работы я подумал, какому бизнесу это может быть нужно.
Отлично такой сайт подойдет, если у вас есть партия продукта, которую надо продавать сразу и много. Особенно, если продукт сложный, нужно заранее познакомить пользователей с его фичами, показать дизайн. В формате такого сайта пользователь заранее знает о продукте почти столько же, сколько и продавец. Он рассмотрел товар со всех сторон, и почти потрогал.
Если у вас технически сложный продукт, то можно разобрать и собрать его прямо на сайте. Можно показать дизайн лимитированной серии кроссовок или процесс производства. Идеально запускать заранее, назначать дату выхода, и, с помощью маркетинговых инструментов, собирать заявки. Тогда к моменту выхода продукта можно продать всю партию за несколько минут. Начинать лучше заранее, потому что на разработку такого лендинга надо заложить срок от трех месяцев.
Как делали?
Сложность такой работы — в совмещении нескольких технологий. Сценарий, трехмерная графика, анимация, монтаж и сложный фронтенд. И все это умножить на два, потому что десктопная и мобильная версии отличаются очень сильно. Поэтому мы решили, что нужно максимально быстро видеть результат в браузере, чтобы понимать туда мы идем или нет. Не шлифовать все последовательно — сначала модель, материалы, освещение, текстуры, положения анимации, CSS, JS, и тд., а быстро делать все в драфтовом виде и потом дорабатывать.
Первая версия анимации в браузере. От нее до финала еще месяц. Petrovich Brothers
Плюс такого метода — быстро видишь этапы работы, которые требуют максимального внимания, невозможно потратить неделю работы на то, что потом не будет использоваться. Минус в том, что весь проект выглядит как набор костылей, нет ни одной части, которой можно наслаждаться, все где-то не так и не то.
А можно подробнее?
Мы сделали черновую модель и анимации в Cinema 4D и потом собрали в After Effects прототип сайта. AE — это программа для видеоэффектов, собирать там сайт непривычно, зато получается не унылый прототип, а классная видео-история.
Прикидываем модель, текстуры и ракурсы Petrovich Brothers
Сначала хотели собрать верстку в Webflow. Но быстро поняли, что такой сайт с кучей графики мы там если и соберем, то точно не настроим так как надо, и перешли на ручную разработку. Было два технически сложных момента — привязка к скроллу и загрузка графики большого размера.
Любая страница сайта выполняется браузером последовательно, сверху вниз. Чтобы при скролле сайт не зависал, если браузер просчитывает сложную графику, обработка сигналов от скролла вынесена в отдельный поток данных. Получалось что анимацию на странице можно было прокрутить до конца слишком быстро.
А нам как раз нужно было регулировать скорость прокрутки под нашу анимацию, поэтому системный контроллер скролла не подходил для этого. Написали собственный обработчик сигналов от скролла, и запустили его с нужной скоростью.
С большим количеством графики помогают справиться прелоадер вначале и мощные настройки тега picture . Пока вы читаете надписи в начале, браузер загружает все анимации. А чтобы не подтягивать в каждом случае изображение большого размера, перед загрузкой браузер проверяет размер экрана и разрешение. И подтягивает оптимизированную графику необходимого размера за счет тега picture , в который обернут стандартный img . А не просто img , как обычно.
В этом примере браузер загрузит big.jpg, только если ширина окна браузера больше 800 пикселей. Если меньше, то small.jpg.
Пока готовили каркас сайта, нужно было подготовить чистовую графику. Тут обнаружился существенный минус стартап-подхода к работе. Мы прорабатывали модель жука и материалы в одном файле синемы, а анимация была разбита на несколько файлов. То есть, после проработки нужно было все материалы, освещение и текстуры перенести в десять разных файлов. Конечно же, мы несколько раз забывали перенести какой-то материал или источник освещения и приходилось считать заново. Один чистовой кадр с тенями и хорошим освещением на ноутбуке рендерился около 10 минут, всего на сайте около 1000 кадров. То есть вся анимация на одном компе считалась бы около недели, с учетом настройки.
Решили эту проблему так. Мы перестали считать все на своих компах и отправляли сцены на просчет на облачную рендер-ферму. Да, это дополнительные расходы, но время стоило дороже. Стоимость ошибки заметно упала, стало можно поэкспериментировать с настройками материалов и освещение.
Когда мы разобрались с графикой и подготовили чистовые секвенции начали разбираться с версткой. Чтобы верстать было удобно мы, конечно, перенесли экраны из AE в Figma. Но на первом варианте сайта увидели проблемы с адаптивностью, пришлось вернуться в Webflow, сверстать там экраны, проверить адаптивность и уже в виде кода отдать программисту.
На работу с этим проектом мы потратили месяц плотной работы команды из трех человек, это 480 человеко-часов. Неплохо для своего проекта.