Что можно и чего нельзя делать при создании хорошего веб-дизайна

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

Процесс создания отличного веб-дизайна Чтобы убедиться, что мы все находимся на одной волне, давайте начнем с основного определения «веб-дизайна». Согласно Википедии, веб-дизайн – это:

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

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

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

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

Есть несколько вещей, которые вам понадобятся для эффективной концептуализации и планирования вашего веб-сайта:

• мозг
• ручка и бумага
• (опционально) программное обеспечение для создания блок-схем
• общее представление о различных разделах вашего сайта

Для начала возьмите ручку и бумагу или запустите любимую программу для создания блок-схем. Мы используем OmniGraffle Professiona для Mac OS X, лицензия которого стоит 150 долларов США, но оно того стоит, если вы создаете веб-сайты на регулярной основе. Если вы используете ПК, то SmartDraw — это отличная БЕСПЛАТНАЯ программа для создания блок-схем, которую вы можете использовать. Хотя ручка и бумага вполне подойдут.

Существует множество методов создания блок-схем. Мы собираемся показать вам самый простой способ сделать это ради экономии времени и объема этой статьи. Если вы хотите узнать больше о блок-схемах, найдите блок-схемы в Google или Yahoo.

Просмотрите блок-схему, которую мы создали при разработке концепции хроматических сайтов. (1) В верхней части блок-схемы мы указываем название нашего веб-сайта. (2) Далее мы включаем каждый основной раздел нашего веб-сайта: «Главная», «О программе» и «Услуги». Эти разделы являются основной навигацией вашего сайта. Какими будут названия каждого раздела, полностью зависит от содержания вашего сайта. Постарайтесь использовать как можно меньше разделов, чтобы посетители не были перегружены навигацией по вашему сайту.

(3) Затем добавьте все второстепенные страницы (подразделы), которые будут указаны на каждой из основных страниц. Для дома мы включили профессиональный веб-дизайн, веб-разработку и поисковую оптимизацию. Вторичная навигация должна быть более описательной, чем основная. Чем глубже навигационная иерархия вашего сайта, тем более информативным должен быть каждый ярлык.

Дос

• Меньше - больше; сведите количество основных разделов к минимуму. На нашем сайте мы используем 6 разделов, чего более чем достаточно.
• Независимо от того, используете ли вы ручку и бумагу или программное обеспечение для создания блок-схем, держите все в чистоте и порядке, насколько это возможно. Хотя вы (и все, кто с вами работает) — единственные, кто будет использовать блок-схему, она все равно должна иметь смысл. В основных разделах должны использоваться более широкие термины, а второстепенные и третичные термины должны быть более описательными.

Донты
Создать блок-схему довольно просто; однако есть несколько ошибок, которые легко допустить:

• Не используйте слишком описательные термины в основной навигации, если только весь ваш веб-сайт не посвящен одной узкой теме. Не пытайтесь объединить несколько тем на одной странице. Создайте общий раздел для этих тем и на его основе создайте подразделы. Это повысит рейтинг веб-страниц подразделов (описательных) в поисковых системах (Google, Yahoo, MSN, Ask). После того, как вы создали краткую и описательную блок-схему, вы готовы перейти ко второму этапу. процесса веб-дизайна:

Этап 2: Моделирование
На этапе моделирования создаются статические «каркасные» макеты. Каждый макет иллюстрирует скелет макета каждой веб-страницы, которая будет включена в ваш веб-сайт. Этот этап важен, потому что он дает нам представление о том, где в нашем дизайне будут размещены различные элементы. Некоторые из этих элементов:

• логотип
• навигационное меню
• содержание
• изображения, видео

Для создания этих макетов вы можете использовать ручку и бумагу или предпочитаемое вами программное обеспечение для создания макетов. Раньше мы использовали Photoshop, но в последнее время мы используем OmniGraffle Professional. OmniGraffle не так ресурсоемок, как Photoshop, и позволяет нам собирать каркасные макеты намного быстрее.

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

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

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

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

Что делать

• макет всех уникальных страниц
• включите важные элементы (логотип, навигацию, размещение контента, размещение изображений/видео) - начните сверху и двигайтесь вниз - сверьтесь со своей блок-схемой, созданной на этапе 1, чтобы не забыть создать макеты страниц - сохраните, сохраните, сохранить – как и все на компьютере, сохраняйте макеты каждые 10 минут или около того.
• сосредоточьтесь на чистых, удобных для пользователя макетах; маркируйте свои элементы, чтобы не забыть, что они из себя представляют, когда будете ссылаться на них на этапе 3, выполнение; используйте другие веб-сайты в качестве вдохновения; нет ничего плохого в том, чтобы взять элементы с других сайтов и сделать их своими собственными (см. «чего нельзя делать»)

Что нельзя

• не включайте графику и цвета (это на следующий этап) - не делайте макеты слишком «загруженными»; сосредоточьтесь на чистых, хорошо организованных и удобных для пользователя макетах — не пропускайте этот этап; это так же важно, как первое и последнее — если вы берете элементы с других сайтов, убедитесь, что вы не занимаетесь плагиатом; есть разница между вдохновением от другого веб-сайта для создания определенных элементов вашего дизайна и откровенным копированием их макета и цветов.

Этап 3: Исполнение
На третьем и последнем этапе выполнения планирование этапов 1 и 2 объединяется, чтобы помочь в создании живого интерактивного веб-сайта.
Третий этап, безусловно, занимает больше всего времени, поскольку вы будете: 1) создавать графику, 2) создавать контент и, наконец, 3) конвертировать веб-дизайн из изображений в код, который веб-браузеры будут использовать для представления вашего веб-сайта миру.

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

• как ваши посетители будут перемещаться из одного места в другое (этап 1, блок-схема) - как будут расположены ваши веб-страницы (этап 2, каркасные макеты)

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

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

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

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

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

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

Дос

• ссылайтесь на свои шаблоны, созданные на этапе 2; хотя отклонение от исходного макета вполне допустимо, вам не нужно этого делать.
• проведите небольшое исследование, прежде чем создавать настоящий дизайн; черпайте идеи с других сайтов и воплощайте их в жизнь (без плагиата)
• включите цвет и графику, чтобы придать окончательный вид вашим веб-страницам - используйте CSS (каскадные таблицы стилей) для преобразования ваших проектов из изображений в разметку, понятную веб-браузерам - используйте блок-схему из этапа 1 при кодировании страниц с гиперссылками; лучше использовать раскрывающееся меню, включающее все (или большинство) ссылок вашего сайта на каждой странице; это облегчит навигацию, а также облегчит сканирование ваших страниц, когда пауки поисковых систем заходят на сайт; Отличное место для получения раскрывающихся меню CSS — DynamicDrive.com — доработайте свой дизайн, работая в Photoshop или любом другом программном обеспечении для редактирования изображений, которое вы используете; вносить изменения в ваш дизайн после его преобразования в разметку (код) может быть затруднительно.

Донты

• не включайте текст в навигационные меню при преобразовании в CSS; вместо текста изображения используйте обычный текст, читаемый роботами поисковых систем.
• не используйте таблицы при конвертации; даже если вам понадобится купить книгу по CSS, она того стоит; столы мертвы
• не пропускайте первые два этапа только ради экономии времени; ваш веб-сайт БУДЕТ лучше, если вы начнете с самого начала процесса веб-дизайна (а не с конца)
• не забудьте сжать изображения, когда они разрезаются на части для CSS; нет ничего хуже, чем медленная загрузка сайта из-за больших файлов изображений; В Photoshop есть опция «Сохранить оптимизировано для Интернета» (CS3 — «Сохранить для Интернета и устройств»).

Процесс делает совершенным
Следуя процессу веб-дизайна, подобному тому, который показан в этой статье, вы увеличиваете шансы на создание хорошо организованного, легко навигируемого и очень удобного для пользователя веб-сайта. Давайте посмотрим правде в глаза: если посетители заблудятся или запутаются при попытке просмотреть ваш сайт, они могут нажать кнопку «Назад» и искать более удобный для пользователя веб-сайт. Люди не любят думать, когда дело доходит до навигации по веб-сайтам. Не заставляйте их думать. Вы думаете, планируя свой веб-сайт от этапа 1 до этапа 3, и вы обнаружите, что большему количеству людей понравится посещать ваш сайт.