Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

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

Многие дизайнеры эффективно используют метаязыки на основе CSS и/или препроцессоры или компиляторы, такие как SASS и LESS [126]для значимых изменений в CSS в относительно короткие сроки. В сочетании с контролем версий эти средства могут осуществлять разработку в браузере быстрее, проще и намного интереснее, чем работу в графическом редакторе. Апробирование Великой Новой Идеи клиента (или вашей собственной) становится обычным делом, а процесс может помочь вам держать проект «в тонусе» и сохранить бюджет, сократив объем работ, требующийся на освоение новых идей.

Когда клиент одобрит базовый дизайн, вы можете точно настроить и презентовать несколько важных страниц как полнофункциональных прототипов HTML в противоположность скриншотам. Это не сложно: вы проделали почти весь путь, так как ваш дизайн уже в HTML. Используйте это как свое преимущество, сосредоточьтесь на дополнительном дизайне: сообщения об ошибке, изменение состояния и т. п.

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

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

В конечном итоге разработка в браузере таким способом приносит огромную пользу:

• Мало или вообще нисколько времени не тратится на графические редакторы. Все время посвящается коду, который мог бы использоваться полностью или частично в процессе разработки самого сайта. Использование контроля версий наподобие Git позволит вам свободно экспериментировать со своим дизайном непосредственно в коде и не волноваться о постоянных изменениях.

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

• Демонстрация клиенту изменений состояний (например, авторизован или разлогинен пользователь) возможна с минимумом усилий.

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

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

Давайте взглянем на наш новый технологический процесс:

1. Создать перечень, включив в список наш контент и функции.

2. Создать быстрые вайрфреймы в HTML и CSS, пометив прямоугольники в них соответствующим номером из перечня.

3. Используйте некоторое количество реального контента в структуре.

4. Создайте линейный дизайн для этого контента.

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

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

7. Объедините контент из линейного дизайна и вайрфрейма на HTML, создавая дизайн в виде прототипа на HTML.

8. Покажите клиенту скриншоты прототипов, представляя их как графический дизайн.

9. После одобрения дизайна (необязательно) доработайте HTML-прототип и представьте его (например, для пользовательского тестирования).

10. Если все сделали правильно, большая часть кода может использоваться для создания сайта.

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

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

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

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

Стивен Хей (р. 1970) родом из Оранжа (штат Калифорния, США). Живет в городе Леуварден на севере Нидерландов. После получения степени бакалавра по графическому дизайну и изобразительному искусству он отложил в сторону свои мечты стать художником и прошел путь от дизайнера до арт-директора в дизайнерском агентстве, где специализировался на фирменном стиле и дизайне упаковки. Стивен сделал свой первый сайт в 1995 году и влюбился в веб. Сеть казалась ему идеальным сочетанием дизайна и технологий. После 10 лет работы креативным директором в фирме, связанной с веб-разработками, он стал независимым консультантом, и это дало ему больше времени для занятий любимыми делами. Ему нравится помогать людям учиться, он получает удовольствие, когда рассказывает или пишет про веб. Работа занимает не всю его жизнь: он играет на баритон-саксофоне и состоял в джазовом квинтете. Еще он любитель фокусов, искусства и кино. Важнейшие уроки, которые Стивен получил за свою карьеру: критически мыслить, заниматься тем, что доставляет удовольствие, делать все настолько хорошо, насколько ты можешь, и продолжать учиться.