План веб-дизайна доступный каждому

Начало комикса про веб-дизайн. Конец в переводе!
Anthony с «UX Movement» показал общий план работы над сайтом и вкратце описал каждый этап. Его стратегия проста, понятна и удобна. Статья хорошая для новичков, а профи найдут там лаконичные тезисы о каждом этапе дизайна. Я уже переводил о том как делаются сайты, но Anthony неплохо показал все со своей стороны.

Оригинал: A Web Design Process Everyone Can Follow

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

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

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

План работы по дизайну сайтов доступный каждому
План работы по дизайну сайтов

Содержание (контент)

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

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

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

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

    Как только собрана вся информация, можно приступать к организации ее на страницах сайта.

Информационная архитектура

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

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

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

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

Визуальный дизайн

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

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

Разработка

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

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

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

    Путь к качественному и работающему сайту не прост. Терпение и труд несомненно все со временем перетрут, но если работать с умом, то результата можно добиться быстрее и он будет лучше. Описанный план разработки сайта не глуп. Теперь вы знаете куда вы идете и как туда попасть. Этот план работы только указывает направление, а сам путь зависит от вас.

перевод: Рехимкулов Ринат
Забыл ссылку англоязычную сделать.
Вот короткая http://wp.me/p10W0E-9O

Комикс про веб-дизайн

Реклама

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s