|
08.10.2004 00:00
В этом разделе собраны веб-дизайнерские правила
хорошего тона (бонтон), следуя которым вы приобретете славу хорошего
и культурного дизайнера, а возможно и больше.
Всегда
соблюдайте основное правило веб-дизайна: посетитель вашего сайта
всегда должен чувствовать, что его любят.
Ссылки
следует ставить на ключевое слово или словосочетание. Например.
"Подробное описание работы данного устройства смотрите в статье
Кулибина."
Золотое
правило бонтона: "Никогда не вмешивайся в родной интерфейс
браузера". Посетитель любит свой браузер и не терпит любых
изменений в его привычной работе и в его внешнем виде.
Всевозможные
дополнительные функции и эффекты, как, собственно, и любую информацию,
можно лишь предлагать посетителю, но ни в коем случае не навязывать.
Например, можно предложить посмотреть видеоклип, загрузить модуль,
включить виртуальную машину и так далее, но не делать этого автоматически.
Если
вы решили, что вашему сайту нужна фоновая музыка, то следует предложить
посетителю включить ее, но ни в коем случае не запускать сразу так,
чтобы потом он, ошарашенный вашим музыкальным вкусом, лихорадочно
не искал выключатель, присутствие которого, кстати, на сайтах с
музыкой просто обязательно.
Бонтоном
является конструировать тексты для чтения шириной, такой же как
в печатных книгах, то есть 10-14 см, обрамленного полями. Кстати,
ныне модный "резиновый" дизайн страницы, отличающийся
тем, что содержание сайта может растягиваться пропорционально размерам
окна, - не самое лучшее решение для оформления текстов. Имеет смысл
подпирать размер строк, ограничив тем самым чрезмерное растягивание
текста.
Очень
хорошо, если вы дадите возможность посетителю самостоятельно изменять
размер шрифта, которым написаны все тексты.
Соблюдайте
правило десяти секунд. Любая страница должна открываться не дольше
этого времени, особенно первая. Если объем страницы велик, то любым
способом дайте знать посетителю, что придется некоторое время подождать
загрузки выбранной информации. Можете, например, рядом со ссылкой
указать размер файла.
Публикуйте
только вычитанные тексты. Ссылки на чужие источники, или цитаты,
должны быть обязательно проверены. Выдерживайте единый стиль изложения.
Лучше, если тексты готовят специально обученные люди - редакторы
и корректоры.
Вы
должны точно знать происхождение публикуемой информации (текстов,
картинок, музыки и т. д.), которая обязательна должна быть легальной.
То есть вы сами являетесь ее автором, или у вас есть разрешение
на ее публикацию, лучше письменное или е-mail. Очень редко бывает,
когда кто-либо отказывает в использовании (даже совершенно бесплатно)
своего материала на других сайтах. Уважайте Закон и не только об
авторском праве.
На
первой странице обязательно должна присутствовать информация, из
которой с первых слов или изображений было ясно о чем этот сайт.
Соблюдайте
правило трех щелчков - в любое место сайта можно добраться не более
чем за три щелчка по мышке.
Для
информационных сайтов, как ни странно это звучит, но необходима
стереотипная навигация. Посетители должны с первых секунд догадаться,
как управлять вашим сайтом.
Хорошим
тоном является маскировка или защита от сканирования роботами публикуемых
чужих адресов электронной почты. Публикация этих адресов в любом
случае должна быть только с согласия их владельцев. И вообще, максимально
щепетильно относитесь к доверяемой вам персональной информации.
Для
тех, кому больше нравится исходить от противного, рассчитан раздел
"моветон", в котором рассказывается
о том, чего следует избегать при создании и поддержании сайтов.
Эту статью можно копировать на другие веб-сайты без моего разрешения при условии размещения в ее коде подписи в виде гиперссылки: <a href="http://www.alx.lv/">Александр Щербин</a>.
Последняя коррекция - 8.10.2004
|
01.02.2003 00:00
Сегодня я представляю одну из статей Нормунда Брицса, одного из тех, кто сочетает в себе хорошего веб-дизайнера и программиста. Это, кстати, большая редкость. С разрешения Нормунда я решил публиковать переводы наиболее полезных на мой взгляд его статей у себя на сайте. Воззрения Нормунда на веб-дизайн созвучны с моими. Мы можем расходится в деталях и используемых приемах, но его мнение и работы заслуживают пристального внимания. В общем, у него есть чему поучиться.
Я занимаюсь дизайном веб-страниц уже семь лет. Мои первые сайты были примитивными. Там о дизайне не могло быть и речи. Но позже я стал осознавать, что такое красивая веб-страница и какое значение имеет правильная навигация. Сейчас я попытаюсь рассказать, что на мой взгляд является основами хорошего дизайна.
Первое и, возможно, главное - выбрать правильную цветовую гамму, так как разработать страницу без предварительно составленного плана (цветов) будет затруднительно. Постоянно будут путаться цвета и в результате страница может стать похожей на радугу. Посетителю, зашедшему на такой сайт, будет трудно сконцентрироваться на содержании сайта и его навигации.
Практически всегда хороших результатов можно достичь, используя серый цвет. Серый сочетается практически со всеми цветами. Конечно же не стоит ограничиваться использованием только этого цвета. Сайт получится слишком скучным или, возможно, слишком серьезным. Экспериментируйте, но не стоит на странице использовать более чем трех, четырех основных цветов.
Вот небольшой помощник веб-мастерам. В случае, если не хватит градаций, то сами подправьте этот PNG файл.
Небольшой вспомогательный материал
На верху прямоугольника расположены три основных цвета страницы и их градации насыщенности с шагом в 10%. Под основными цветами есть место (More colors), где можно "смешать" какой-либо основной цвет и выбрать 69 его градаций с шагом 5%.
Файл colors.png - 38.1КВ. Пример для программы Fireworks от Macromedia.
Как использовать файл
Разместите основные цвета вашей страницы в ячейки с обозначениями 100%. Все остальные цвета получатся автоматически. Тот же эффект получится, если заполнить нужным цветом ячейку More colors, только в этом случае вы получите уже 69 его градаций.
Цветовые поля в файле находятся в слоях "colors", текстовая информация в слоях "texts" и фильтры, формирующие градации - в слое "filters".
Цвета в фотографиях не подпадают под это правило. Идеальным вариантом было бы подобрать фотографии с близкой цветовой гаммой.
Не стоит перегружать страницу текстом и графикой, необходимо оставить на странице свободные места, которые будут служить как бы местом отдыха глаз. Иногда я встречаю такие сайты портального типа, где текст занимает буквально всю площадь страницы, нет ни одного "сейсера" и текст прилип к краям таблицы. Создается впечатление, что смотришь на брикет, коктейль из букв, линий и картинок. Можно оставить на странице между текстовыми блоками небольшое расстояние в 5-10 пикселей. Когда на странице много текста, оберните это в свою пользу - используйте его как разделитель блоков страницы. Постарайтесь не использовать в качестве разделителей текстовых блоков линии, или, если использовать, то сделайте их цвет неброским. В любом случае экспериментируйте. Попробуйте убрать какой-либо элемент дизайна и посмотреть, стала ли страница выглядеть лучше. Если лучше, то этот элемент лишний - не используйте его.
Небольшой пример "прилипшего текста и тот же текст с десятипиксельными "спейсерами".
Если дизайн страницы требует какого-либо графического элемента (картинки), то "живая" фотография всегда (почти всегда) делает страницу живее. Здесь я имею в виду фотографию реального (не нарисованного) предмета или человека. Конечно же нарисованные (синтетические) элементы могут быть красивыми. Главное - не перестараться с количеством графических элементов.
Оформляя страницу придерживайтесь определенного стиля. Не надо использовать на странице много шрифтов. Понятно, что вы хотите показать как много их на вашем компьютере, но подумайте, удобно ли будет читать эту выставку шрифтов. В оформлении графической информации допускается использовать другие шрифты, но и их не должно быть очень много.
Не забывайте, что создавая страницу на национальных языках (латышский, русский, польский, эстонский и т.д.) в коде HTML необходимо указывать название таблицы кодировок. Даже если вы можете прочесть текст на экране монитора своем компьютера, это еще не значит, что другие увидят то же самое. Обычно люди не путешествуют по сайтам одной языковой зоны (скажем, Латвии), а посещают и другие. В этом случае, если вы не укажете какую таблицу кодировок указывать (например, windows-1257), браузер оставит установки от предыдущей посещенной вами страницы. Например, человек просматривал сайт www.gazeta.ru (на русском языке), а потом перешел на сайт с латышским языком.
Правильное и некорректное отображение текста. Первый пример с установленной кодировкой windows-1257, и второй - на страницу без прописанной кодировки зашли после посещения www.gazeta.ru.
Если страница сделана на каком-либо национальном языке, то используйте только стандартные шрифты (Arial, Times, Verdana), так как они присутствуют (Unicode) практически во всех операционных системах Windows, и на вашей странице можно будет увидеть правильное начертание национальных букв. Здесь я не упоминаю iMac компьютеров, но, думаю, что и в них не будет затруднений с этими шрифтами.
Как я уже писал в самом начале, все написанное в этой статье - мое личное субъективное мнение. Если у вас есть какие-либо вопросы или уточнения, а может быть и желание подискутировать по этому вопросу, используйте страницу контактов.
Нормундс Брицс (www.nbinc.net)
Перевод статьи - Александр Щербин
|
