Дизайн в браузере: Когда? Как? и Почему?

Если Вы дизайнер в области компьютерных технологий, то Вы, скорее всего, читали большое количество статей об одной из топовых тем на сегодняшний день: дизайне в браузере. Работает это также просто, как и звучит.  Вместо того, чтобы проводить часы, дни, недели и месяцы, проектируя эти прекрасные макеты в Photoshop, дизайн в браузере позволяет Вам отбросить в сторону скетчи и предварительную работу и сразу перейди в текстовый редактор и работать с перемещаемым кодом. Но как нужно проектировать в браузере максимально эффективно? Как можно узнать, когда проекту требуется именно этот вид дизайна? Позвольте нам провести небольшую экскурсию с тремя остановками: когда, как и почему Вы можете решить, что дизайн в браузере лучше, чем более традиционные методы. К таким методам в этой статье мы отнесем дизайн с помощью Photoshop. Для начала отметим, что наша версия «дизайна в браузере» меньше похожа на «дизайн» и больше напоминает «компьютерные атаки, с целью добиться желаемого». Для нас, дизайн – это решение проблем для пользователей. Рассматривайте «браузер» как очередной инструмент в Вашем арсенале, быстрейший способ отправить чистый код, который имеет продуманный дизайн благодаря совместной работе и зарисовкам эскизов.

 

 

В техническом сообществе можно встретить много хвалебных статей в пользу дизайна в браузере: «Это будущее веб-дизайна», «мы должны убить Photoshop » – это парочка популярных высказываний. Мы согласны с тем, что в то время как дизайн в браузере может быть надежный способ при запуске дизайн-проекта, могут возникать некоторые факторы – требования клиента, содержание конечного продукта, временные рамки – которые не позволяют выбрать такой способ работы. Давайте рассмотрим некоторые из возможных вариантов сценариев, где Вы не можете выбрать дизайн в браузере. Требования клиента не подходят для дизайна в браузере. Вы можете сказать себе: «ок, просто не берись за эту работу!». Но все мы понимаем, что это не выход, и этот ответ не всегда будет подходить. Возможно, приоритет клиента состоит в том, чтобы у него был идеальный сайт, который будет выделяться на фоне конкурентов и привлекать капитал инвесторов. Может быть, их основная проблема в постоянные перемены, или они имеют проблемы с видением. В этом случае, традиционное каркасное моделирование может быть наиболее эффективным путем удовлетворения потребностей для их пользователей. Многие клиенты рассматривают зрительный ряд как результат. Иногда более эффективно отправить 10-20 высококачественных макетов за неделю, чем 1-5 работающие, но скучные страницы. Система и лейауты сайта слишком сложные задачи, чтобы произвести визуализацию и кодирование одновременно. Мы же люди. Большинство имеет ограниченные ментальные способности для того, чтобы думать в двух сферах. Принимая во внимание, что некоторые могут сказать Вам, что кодирование и проектирование идут рука об руку, для нас представляется сложным представить сложный лейаут с большим количеством движущихся частей и то же время писать divs для него. Исследования показывают, что мы не сильны в многозадачности, а дизайн в браузере часто создает именно такое чувство. К счастью, время и опыт определенно помогут делать визуализацию быстрее, и писать код чище. Так что, продолжайте работать. Вы находитесь на стадии “обработки” дизайна. Скажем, Вы находитесь в пункте MVP в Вашем проекте. У Вас есть рабочий веб-сайт с достойным лейаутом, и Вы готовы добавить больше опций. Если Ваши пользователи выразили недовольство по определенным проектным решениям, которые Вы сделали в браузере, возможно, что указания в работе не были достаточно четкими, или они не знают, что на странице читать сначала. В таком случае, у Вас есть возможность перейти в Photoshop и пересмотреть спорные пункты более вдумчиво и сосредоточенно. Нам кажется, что Энди Бадд хорошо сформулировал основную сложность дизайна в браузере:

 

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

 

В добавок к этому: Фактически Вы получаете удовольствие от процесса работы с пикселями на артборде. Многие веб-дизайнеры происходят из формальной среды графического дизайна. Неторопливость и тщательное рассмотрение у нас в крови. Причины почему мы проектируем в браузере сильно варьируются, а подход, который мы выбираем, сильно зависит от задачи, которую на нас возлагают. Другими словами, если ситуация требует дизайна в браузере, то почему бы и нет?

 

 

Есть очень много различных способов, чтобы начать работу над проектом. В этой статье мы расскажем о способе philosophie, в котором, обычно проект начинается с владельца нового, профинансированного продукта. Многие лидеры в сфере дизайна, как например Ден Молл, подробно рассказывают о том, как легко и успешно произвести запуск проекта, поэтому сегодня мы не будем вдаваться в подробности этой темы. До начала проекта, скажем, что мы определили ряд пользователей и их основные требования к нашему продукту. Основная формулировка, определяющая что, как и зачем, формулировка гипотезы, что мы намереваемся решить, возможно даже элементарные наброски или список функций.  На этом этапе мы получили неопределенное понимание того, для кого мы проектируем и что клиент хочет донести. Нам хотелось бы  начать с доски настроек. Они изобразить фирменное выражение (слоган), не затрачивая на это большое количество времени и сил. Для этих целей подходят Pinterest, Dribbble – чтобы дизайнер не заготовил, здесь есть хорошие визуальные опции для клиента.

Далее, мы выбираем фреймворк, скелет, для которого быстро делаем разметку лейаута и прикладываем к UI. Для маркетинговых и коммерческих сайтов, мы предпочитаем Foundation, потому что опции расположены в коде. Они более понятны, на наш взгляд, и их легче корректировать, чем Bootstrap. Bootstrap – это функциональный фреймворк идеальный для админ-направленных приложений. Изначально, здесь меньше работы, но больше возможностей для работы с CSS. Затем, руководство по стилю. Начиная с руководства по стилю или серии “style tiles”, очень важно содержать элементы дизайна организованными и сжатыми в пределах системы дизайна. Мы не будем вдаваться в подробности, есть много статей на эту тему, лишь скажем, что руководство по стилю самый простой способ вносить конструктивные изменения по мере необходимости. А это главная причина того, почему мы выбираем дизайн в браузере. Мы привыкли строить руководство по стилю UI элементов вручную, но Вы можете использовать методологию KSS или даже Hologram для большей автоматизации работы.

Наконец, композиция. Мы всегда стараемся учитывать один момент: не терять из виду принципы разработки. Движение глаз, иерархия, контраст – очень просто потеряться в коде. Когда мы проектировали исключительно в Photoshop, мы думали о дизайне более концептуально и детально: мы могли больше экспериментировать с новыми методами призыва к действию, с новым лейаутом, с современной анимацией. В этом смысле, дизайн в браузере не дает думать вне коробки. Мы считаем, что проще всего начинать с открытого текста, затем html  разметка, далее добавление лейаута фреймворка, добавление селекторов и потом стиль селекторов в CSS.

 

Таким образом, Вы создали первоначальный вид своего сайта в браузере, и теперь пора сделать превью с клиентом. И тут происходят чудеса. Вместо типичного нескончаемого цикла вопрос-ответ, Вы можете заранее позаботиться обо всем, что может быть интересно клиенту на встрече. Вот как мы использовали инспектор в Chrome: Клиент хочет сделать изменение в тексте. Откройте инспектор и выберите «edit text». Сделайте скриншот изменения. untitled6 Мы решили добавить новую контент колонку в секции на странице. Откройте инспектор, “edit HTML”, скопируйте и вставьте колонку. Бум, новая колонка! Сделайте скриншот изменения.

Нам нужно увеличить кнопку радио. Кликните лупу, затем правой кнопкой мыши. Лупа правит элемент, вставленный внутрь родителя. Сделайте изменения в стиле. Скриншот

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

Обратите внимание на то, что мы делаем скриншоты для того, чтобы сохранить код. Это вызвано тем, что использование инспектора не является способом произвести самый красивый, семантический код; это – просто обман, чтобы экспериментировать с проектным решением или получить одобрение от клиента. Использование скриншотов, однако, позволяет Вам сохранить изменение и позже выявить лучший способ объединить это с Вашей кодовой базой.

 

 

Оговорка: philosophie использует Pivotal Tracker в качестве проекта управления инструментом на выбор, и обычно, Ruby on Rails в качестве «дежурного» стека. Дизайн в браузере позволяет Вам работать в команде. Первый спринт может включать в себя стили foundation или bootstrap. Это – просто дизайн MVP. Далее, второй спринт может не спеша работать над брендингом, пересматривать шрифты, улучшать иерархию и другие действия, которые Вы можете определить со своей командой. Вы даже можете работать, используя Photoshop, в то время как вносятся различные изменения. Что касается того, как мы объединяем истории дизайна в Pivotal Tracker, мы посчитали, что было бы эффективно создать пользовательские истории для задач фронтенда, отдельных от историй бэкенда. Таким образом, Вы можете позволить дизайн бежать впереди разработки или дать вначале инженеру создавать модели и контроллеры, пока Вы занимаетесь внешним стилем. Все взаимозаменяемо и гибко. Например: в то время как Вы как фронтенд dev можете создать и разработать статические страницы, такие как домашняя страница, форма обратной связи или текстовая страница, бэкенд dev производит формы логина. Затем фронт-ender может перейти на страницы логина и разработать их. 

 

 

Работая над последним своим проектом, мы поняли, что дизайн в браузере – это хороший способ сэкономить бюджет, но все же получить свежий и чистый вид работы. Вся работа проходит быстро, так как мы копировали лейауты и страницы, используя Bootstrap в качестве фреймворка и Sublime Text в качестве текстового редактора. Мы работали в составе команды разработчиков, как было упомянуто выше, и успешно разделяли между собой обязанности. В то время, как мы достигли половины пути в работе над проектом, клиент захотел изучить новые направления домашней страницы. Не желая ограничивать себя в плане дизайна, мы решили, что Photoshop станет лучшим способом в выполнении цикла домашней страницы. С этими новыми стилями, составленными в Photoshop и элементами UI, необходимо было изменить стили в одном месте, и весь сайт приспособился к новому дизайну домашней страницы.

 

 

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

 

Источник