Веб-дизайн - Ссылки

Ссылки на ваш сайт

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

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

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

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

Ссылки на подписку и регистрацию

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

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

Рекламные ссылки

Реклама - особый источник входящих ссылок, потому как вы контролируете ссылки сами, если платите за рекламу. Я рекомендую в рекламном сообщении помещать ссылки на бесплатные страницы (продолжающие мысль, начатую в рекламе), а не ссылку на главную страницу сайта.
Исследования рекламы в Интернете показали, что около 20-30% пользователей, которые щелкают по рекламному баннеру, сразу же нажимают кнопку « Назад», как только понимают, что попали на корпоративную страницу. Я удивился только тому, что эти цифры не больше. В конце концов, если пользователи попадают на вашу главную страницу, остается надеяться только на их собственные способности в поиске ценной информации, которая имеет отношение к причине, заставившей их щелкнуть по баннеру. Учитывая, что на большинстве сайтов навигация очень сложна, это не самая лучшая идея.

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

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

Веб-дизайн - Графический дизайн страницы

Графический дизайн

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

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

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

Последнее различие между двумя интерфейсами скорее организационное и историческое, нежели техническое. Когда речь идет о графическом интерфейсе пользователя, мы можем вспомнить множество исследований, проведенных в крупных компаниях по-настоящему грамотными специалистами, наподобие Брюса Тогнацини (Bruce Tog-nazzini) в Apple и целой команды мастеров в Xerox PARC. В результате плохие идеи были отвергнуты, а хорошие - воплощены в виде общих принципов еще задолго до того, как графический интерфейс стал доступен среднему пользователю. Интернет же, напротив, развивается прямо по ходу нашего с вами разговора, все эксперименты проводятся непосредственно внутри него (а не в лаборатории с включенной видеозаписью), а нам с вами уготована почетная роль подопытных кроликов.

Веб-дизайн - Дизайн страницы

Дизайн страницы - это то, что видно сразу же. С современной технологией браузеров пользователи могут видеть только одну страницу в определенный момент времени (или, в крайнем случае, две или три, если размер экрана позволяет увидеть несколько одновременно открытых окон). Эта глава посвящена простоте использования видимой (поверхностной) части сайта - тому, что находится на отдельных страницах.

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

Неподвижные области экрана

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

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

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

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

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

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

Веб-дизайн - Искусство против техники

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

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

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

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

У технического подхода есть одно большое преиму­щество: когда вы не знаете, какой вариант дизайна предпочесть, вы можете поставить этот вопрос пе­ред посетителями вашего сайта и выбрать ответ, исходя из реальных данных. Можно ли найти нуж­ную информацию быстрее, если использовать ва­риант А? Какие мнения у посетителей по поводу дизайна А и дизайна Б? Получив ответы на эти и подобные им вопросы, выбирайте тот вариант, ко­торый набрал больше голосов, а не тот, который нравится лично вам.

Конечно же, применяя только научные методы, вы далеко не уйдете. Вдохновение и творческий под­ход не менее нужны при проектировании. Исполь­зование только технического подхода, которому может последовать каждый, поможет вам обнару­жить, что пользователи сталкиваются с проблемами при навигации или не могут найти кнопку поис­ка на вашей домашней странице. Вооружившись этими сведениями для улучшения схемы навигации или перемещения кнопки поиска на более подходящее место, не думайте, что все сделано. Вам нужно еще немножко вдохновения. Имейте в виду, что нововведение состоит на 10% из вдохновения и на 90% из стараний. Чтобы найти подходящий вариант дизайна, а отнюдь не идеи о красивом дизайне, который не пригоден для использования, надо понаблюдать за пользователями, выяснить, что им нра­вится, что кажется простым, что заводит в тупик. Лучшие результаты достигаются при использовании технического подхода и усиленном внимании к реакции пользователей.

Настройки фона

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

             Настройка изображение и текстура. Вот тут уже сложнее.
             Повторение текстуры на выбор:
    • заливка – закрасит весь фон повторяя изображение по вертикали и горизонтали.
    • горизонталь или вертикаль – повторение изображения по горизонтали или вертикали.
    • без заливки
            Расположение работает, если были выбраны опции – горизонталь, вертикаль или без заливки.
           Прокрутка:
    • фиксированная – фон фиксируется на месте.
    • скроллировать – фон движется вместе с продвижением страницы вверх или вниз.
          Флип – отразить изображение по вертикали или горизонтали.
          Повернуть изображение на 90 градусов вслево или вправо.
          Режим смещения – нормальный, мягкий или перекрытие.
          Прозрачность и контраст без комментариев.

Настройка градиента без комментариев.

Фон

Кнопка «предложить фон» в автоматическом режиме будут подбирать фон для вашего шаблона.

Кнопка «выбор фонового изображения» в выпадающем списке вам будут предложен набор фоновый изображений на выбор, это самые популярные изображения на усмотрения создателей программы.

Кнопка «блик» в выпадающем списке вам будут предложен набор бликов для фона, там же в низу вы можете загрузить свой блик и настроить его как вам нужно.

Кнопка «изображение или текстура» тоже самое что и выбор фонового изображения, только с у четом того что здесь собраны все текстуры и изображения, так же вы можете вставить свое изображение или текстуру и настроить его.

Кнопка «градиент» настройка градиентного изображения вашего фона, так же его можно настроить и вручную.

Все настройки мы рассмотрим в следующем уроки.

Макет

Кнопка «предложить макет» в автоматическом режиме будут подбираться макеты для вашего шаблона.

Кнопка «макет страницы» в выпадающем списке вам будут предложены макеты страницы на ваше усмотрение.

Кнопка «макет страницы» выбор расположения колонок, с какой стороны они будут располагаться.

Далее идут кнопки расположения поиска, архива и обо мне, то же самое, на ваш выбор. Экспериментируйте и у вас получится то, что вы хотели.

Цвета и шрифты

Кнопка «предложить цвета» в автоматическом режиме будут подбираться цветовые схемы для вашего шаблона.

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

Кнопка «предложить шрифты» в автоматическом режиме будут подбираться шрифты для вашего шаблона.

Кнопка «набор шрифтов» в выпадающем списке вам будут предложены наборы шрифтов на выбор, мое мнение надо выбирать классический набор шрифтов.

Кнопка «типографика» как будут отображаться шрифты.

Кнопка «размер шрифтов» и так все понятно.

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

Первый запуск

Ну что, приступим к первым шагам создания нашего шаблона. Для этого нам понадобиться программа Artisteer www.artisteer.com.
Запускаем программу и выбираем для какой СMS мы будем создавать шаблон:

Выбор у нас очевиден т.к. мы находимся на Blogger мы его и выбираем.
У нас загрузился демонстрационный шаблон. В верхнем меню, оно очень похоже на меню MS Office, мы видим вкладки: Идеи, Цвета и шрифты, Макет, Фон, Лист, Верхний колонтитул, Меню, Статьи, Блоки, Кнопки и Нижний колонтитул.

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