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

Как всегда, вопросы помогут нам мыслить критично:

1. Во-первых, почему люди будут использовать этот сайт? Найдите веские причины… Я не уверен. Поищите еще. А теперь «отшлифуйте» эти причины. Они должны быть истинными.

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

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

Когда все сделано (это займет какое-то время и будет достаточно для промежуточного этапа разработки), посмотрите внимательно на результат. Он гласит: «Вы – здесь!»

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

Предположим, что мы работаем над сайтом, который обучает разработчиков CSS гибкой модульной верстке (или Flexbox), относительно новому модулю для разметки, которая имеет большие возможности в мультиплатформенном пространстве [120].

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

«Три маленьких прямоугольника» будут состоять из теории и синтаксиса, а также нескольких заданий, каждое из которых строится на основе предыдущего задания. Пользователь сможет написать их код в редакторе на странице, и кнопка «результат» покажет результат кода. Щелчком по клавише «Запустить» запускается введенный код. Каждое задание имеет два вида текстового контента: теорию и задание. Теория объясняет синтаксис и концепцию, а задания являются упражнениями, которые даются студентам для закрепления.

Давайте накидаем перечень контента:

1. Логотип.

2. Глобальная навигация.

3. Вводный текст (только на домашней странице).

4. Редактор кода (только на обучающей странице).

5. Область результата (только на обучающей странице).

6. Индикатор выполнения задания (только на обучающей странице).

7. Теоретический текст (только на обучающей странице).

8. Текст задания (только на обучающей странице).

9. Навигация урока (только на обучающей странице).

10. Регистрационная форма (только на домашней странице).

У нас есть два вида страницы:

• домашняя страница (для вводного текста и регистрационной формы) и

• обучающая страница.

Здесь остановимся. Понятно, что это до смешного просто и не завершено, но для примера хватит. Конечно, мы не включили сюда много другого материала (страницу профиля, статистику по урокам и т. д.) На большом сайте перечень контента может оказаться громадным и, возможно, разобьется на несколько частей. Но помните! Это не функциональные требования. Мы не должны включать каждую деталь каждой части контента. Мы разделили его на большие специфические группы, которые отражают суть.

Как правило, мы присваиваем, номерной или буквенныйидентификатор каждой части контента. Так как наш пример несложный, мы будем просто использовать нумерацию от 1 до 10, как в списке. Дизайн перечня не важен; годится простой старый текстовый файл. Но вы можете сделать его таким, каким позволит ваше воображение.

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

Записи перечня можно украсить (например, описаниями или скриншотами готовых компонентов), но знайте меру. Я считаю, что расстановка соответствия контента и типов страниц очень полезна, так что:

• домашняя страница → 1, 2, 3, 10,

• обучающая страница → 1, 2, 4, 5, 6, 7, 8, 9.

Порядок позиций в данном случае не имеет значения. Мы займемся этим во время этапа прототипирования.

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

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

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