Если бы вы попросили меня спроектировать мост, у меня было бы много вопросов. Будет ли он проходить через ров в вашем дворе или на озере Понтчартрейн? Могу ли я использовать бетон и сталь, или все создание должно быть построено с зубочистками? Я, конечно, остановлюсь на том, чтобы взять вашу визитную карточку в баре и пообещать вам Золотые Ворота, прежде чем узнавать больше о том, кто вы есть, и почему вы думаете, что вам это нужно. С другой стороны, если бы вы поручили мне создать скульптуру для вашего сада, я бы чувствовал себя гораздо более комфортно, стремясь создать уникальную и художественную вещь.
Процесс разработки сайта лежит где-то между мостом и скульптурой. Да, мы хотим создать индивидуальный сайт, который будет эстетически привлекательным, но нашим главным приоритетом должно быть удовлетворение потребностей нашего клиента. Эти потребности могут быть высокими и сложными, или они могут быть связаны с предоставлением информации. Если мы не будем внимательно слушать, весь проект рухнет вместе с нашей репутацией. Технические детали разработки, размещения и поддержки веб-сайта или приложения могут быть техническими. Однако процесс создания проектной композиции можно свести к трем ключевым задачам: обнаружение , исследование и внедрение .
Что такое комп? — Слово comp — это аббревиатура от фразы «всеобъемлющий манекен», термин, который происходит из мира печатного дизайна. Это полная имитация печатного макета, созданного до того, как макет перейдет в печать. При переводе этого термина в веб-дизайн, comp — это изображение макета, созданного до того, как мы начнем создавать прототип дизайна в HTML . Думайте об этом как макет.
открытие
Компонент обнаружения в процессе проектирования — это встреча клиентов и изучение того, что они делают. Это может показаться немного непривычным , но сбор информации о том, кем являются ваши клиенты и как они управляют своим бизнесом, имеет жизненно важное значение для разработки соответствующего и эффективного дизайна.
Прежде чем запланировать свою первую встречу с клиентом, потратьте некоторое время на изучение его бизнеса. Если они попросили вас создать веб-сайт, в настоящее время они могут быть без него, но в любом случае Google. Если вы не можете найти какую-либо информацию об их бизнесе конкретно, постарайтесь узнать как можно больше об их отрасли до первой встречи. По возможности, первая встреча с клиентом должна проводиться лично. Иногда расстояние будет диктовать, что встреча должна происходить по телефону; но если клиент находится в городе, назначьте время для личной встречи.
Имейте в виду, что эта встреча посвящена не столько впечатлению клиента, продаже себя или продаже веб-сайта, сколько общению и установлению того, чего хочет клиент. Старайтесь слушать больше, чем говорите, и принесите блокнот, на котором можно делать заметки. Если вы берете с собой ноутбук или планшет, чтобы поговорить о примерах на веб-сайте, ограничьте время, потраченное на его использование. У компьютеров есть экраны, и люди склонны смотреть на них; следовательно, если клиент все время не смотрит на экран, вы будете так же, как пишете свои заметки. Если вам необходимо перетащить какую-либо технологию на собрание, используйте приложение, такое как iTalk Recorder для iPhone или Voice Recorder для устройств Android, чтобы записать ваш разговор — с разрешения клиента, конечно. Однако, по моему опыту, блокнот менее опасен и гораздо менее отвлекает часто не слишком разбирающегося в технологиях клиента.
Да, и помните: встречи с клиентами не должны проходить в офисе. Даже когда я работал в компании в большом офисе, у меня были самые продуктивные встречи с клиентами в кафе или за ланчем. Целесообразность такого подхода зависит от клиента. Если ваш контакт выглядит более формально, не предлагайте его; однако во многих случаях это хороший способ сделать деловую встречу более личной.
Вот несколько вопросов, которые я хотел бы задать на начальных встречах с клиентами, даже если я уже нашел ответ сам с помощью поисковой системы:
- Чем занимается компания?
- Какова ваша роль в компании?
- Есть ли у компании существующий логотип или бренд? Какова ваша цель в разработке сайта?
- Какую информацию вы хотите предоставить онлайн?
- Кто включает вашу целевую аудиторию? У его участников есть общая демография, такая как возраст, пол или физическое местоположение?
- Кто ваши конкуренты и есть ли у них сайты?
- У вас есть примеры сайтов, которые вам нравятся или не нравятся?
- Какие сроки у вас есть для проекта и каков бюджет?
Если проект предназначен для редизайна существующего сайта, я также хотел бы спросить:
- Что обычно ищут ваши посетители, когда приходят на ваш сайт?
- Какие проблемы с вашим текущим дизайном?
- Что вы надеетесь достичь с помощью редизайна?
- Есть ли какие-то элементы текущего сайта, которые вы хотите сохранить?
- Как вы думаете, как ваши посетители будут реагировать на новый дизайн сайта?
Иногда я начинаю с большего количества вопросов, чем перечисленные здесь. Используйте свое воображение и постарайтесь придумать несколько творческих запросов, которые действительно дадут вам более глубокое понимание организации клиента. Если вы программист, избегайте технического жаргона. Если вы дизайнер, не говорите конкретно о дизайне. Конечно, это может быть все, о чем вы думаете, но семантическая разметка, плавные и фиксированные макеты и цветовые схемы, скорее всего, будут очень мало значить для клиента. Что еще хуже, такие разговоры могут привести к ошибочному мнению о дизайне, прежде чем вы сможете начать думать о дизайне самостоятельно.
Исследование
Следующим этапом процесса проектирования является передача информации, которую вы узнали от клиента, обратно в вашу лабораторию для анализа, анализа и экспериментов. Вы хотите получить представление обо всей информации, продуктах и услугах, которые они могут предложить, и поэкспериментировать с их организацией. Поставьте себя на место посетителей сайта и спросите себя, что ищут эти люди. Если вы думаете о покупке продукта, что вам нужно знать перед покупкой? Если вы подписываетесь на услугу, где бы вы узнали о различных предложениях и какой уровень обслуживания вам нужен? Какой самый понятный заголовок возможен для страницы x , и сколько шагов нужно для достижения страницы y ?
В мире веб-дизайна это начало процесса, известного как информационная архитектура , или сокращенно IA . Для обширных веб-сайтов и сложных веб-приложений информационная архитектура сама по себе является карьерой, но руководящие принципы в этой области могут обеспечить прочную основу даже для самых маленьких веб-сайтов. На этапе исследования нашего процесса мы хотим сосредоточиться на организации контента и потока веб-сайта в структуру, которую мы можем разработать.
Два наиболее важных инструмента для этой задачи — это макулатура (или доска, если она у вас есть) и большой блокнот для заметок. Составьте список всех фрагментов веб-сайта и начните упорядочивать их по группам и подгруппам. Скорее всего, они немного сместятся, и вот тут вам пригодятся заметки. Если вы делаете пометки для каждого раздела, подраздела и страницы сайта, вы можете расположить их на стене в том порядке, в каком они будут отображаться в навигации вашего сайта. Вы не захотите перегружать посетителей слишком большим количеством опций, но не хотите слишком глубоко скрывать информацию внутри сайта; то есть слишком много кликов от домашней страницы. Нет жестких правил для этой деятельности; просто сделайте информацию как можно более очевидной и доступной.
Реализация
Теперь, когда мы продумали, как мы хотим организовать информацию, с которой работаем, этап реализации нашего процесса проектирования начинается с создания макета. Независимо от проекта, старайтесь избегать использования технологий, связанных с созданием веб-сайтов — по крайней мере, на первых порах. На данный момент неважно, будет ли сайт содержать обычный HTML , шаблон для системы управления контентом или приложение Ruby on Rails; Суть в том, что у нас есть интерфейс для дизайна и чистый лист бумаги. «Бумага?» Правильно, бумага. Ты действительно думал, что я собираюсь позволить тебе вернуться к твоему драгоценному компьютеру? Ни за что. И вот почему: легко потерять фокус на дизайне, если вы начнете думать о макете перед компьютером. Если вы начинаете на бумаге, вы можете игнорировать технические ограничения браузеров и CSS и сосредоточиться на том, как вы хотите, чтобы конечный продукт выглядел. Теперь вы можете подумать, что все хорошие дизайнеры носят с собой модные жесткие скетчбуки, в которых они используют дорогие маркеры и кисти для создания рендеринга в стиле Да Винчи потенциальных макетов веб-страниц. Со своей стороны, я использую тетрадь со спиралью в 79 центов и любой пишущий инструмент, который я могу найти на своем столе, который все еще работает.
Рис. 1, один из множества альбомов для рисования, доступных для создания макетов (этот — с webdesign-sketchbook.com ). Обычная бумага тоже отлично работает.
Я начну с набросков нескольких возможных макетов. После того, как я подготовил несколько, я выбираю тот, который мне нравится, прыгаю в Фотошоп и использую инструмент прямоугольника, чтобы заблокировать области, которые я отметил на моей бумаге. После того, как я определил свой макет, я экспериментирую с цветами переднего плана и фона, пока у меня не будет сплошной цветовой схемы. Я продолжаю вертеть ручки Photoshop и перемещаться по пикселям, пока, наконец, волшебным образом, у меня не появится комп для показа клиента.
Просто, правда? Хорошо, возможно, я пропустил несколько шагов в этом кратком описании. Честно говоря, однако, когда люди спрашивают меня, как я делаю то, что я делаю, они обычно получают подобное объяснение. Правда состоит в том, что есть множество подсознательной информации из моего прошлого опыта и тех старых классов колледжа по дизайну и искусству, которые помогли мне определить мой собственный процесс проектирования.
Учиться проектировать — это все равно, что учиться программировать. У некоторых людей есть некоторая ловкость для этого, но любой может учиться. Так же, как есть хороший код и ужасный код, есть хороший дизайн и ужасный дизайн. Изучение некоторых принципов и соглашений, связанных с дизайном, поможет вам понять разницу между хорошим и плохим и отвратительным, побуждая вас к созданию собственного процесса проектирования.
Принципы красивого веб-дизайна
Эта статья взята из книги Джейсона Беирда « Принципы красивого веб-дизайна» (второе издание которой уже вышло). Фактически это начало первой главы, которую мы вскоре продолжим, рассматривая макет и композицию.
Если вам нравится цвет, обязательно ознакомьтесь с существующей оцифровкой главы о цветах здесь, на фестивале дизайна .