1. Два очень полезных сайта, а также с чего начинать разработку.
2. Об оригинальных названиях, непонятных словах и подсказках к ним.
4. Как подобрать цветовую гамму для странички.
5. О графике.
Несколько советов по дизайну |
| 1. Два очень полезных сайта, а также с чего начинать разработку. 2. Об оригинальных названиях, непонятных словах и подсказках к ним. 4. Как подобрать цветовую гамму для странички. 5. О графике. |
| 1. Два очень полезных сайта, а также с чего начинать разработку. Две, вроде бы, не связанные между собой темы. Только вот перед работой над своей страничкой неплохо бы подучиться теории. И я не имею в виду HTML — это только азбука дизайна. Мало знать букв, надо уметь ими писать. Целую тонну практических советов и "грамматических правил" можно найти на двух очень полезных сайтах: Ру.Ководстве Лебедева и веб-журнале для веб-мастеров Webmascon. Единственное, подразумевается, что и HTML, и CSS вам известны. Если пока нет — учите! Теперь о том, с чего же начинается разработка. Ну, во-первых, вы твёрдо должны знать, о чём будет сайт. Не пытайтесь сделать разносторонний сайт, который будет по вкусу всем обитателям сети. Ничего хорошего не получится. Выберите определённую, ограниченную тематику — чуть более свободную для домашней странички или веб-журнала, но строгую для тематического сайта. Постарайтесь объяснить этот принцип заказчикам. Очень хорошо действуют слова: "Ну, это уж слишком! Да над вами вся сеть смеяться будет! Устроили тут жёлтую прессу! Я, конечно, сделаю, но в портфолио этот сайт мне будет стыдно заносить!" Никогда не надейтесь на вкус заказчика. Никогда не надейтесь на то, что он знает, чего хочет! Всегда предлагайте ещё парочку своих вариантов рядом с его, чуть-чуть надавите — и в конце концов он сам выберет один из ваших, ещё и доволен будет! Выясните (или обдумайте), какая информация будет выложена на сайт. Рассортируйте её по группам. Чтобы не запутаться, напишите эти группы в столбик, можно с комментариями. Обычно каждая группа — это отдельная страничка. Придумайте им названия, лаконичные и внятные — это понадобится для ссылок и заголовков. Сделайте эти название ещё лаконичней и переведите на английский или напишите латиницей — это будет имя файла со страничкой. Если групп слишком много, сделайте надгруппы для некоторых из них или для всех, исходя из смысла — это будут странички, обеспечивающие доступ к группам, или пункты скриптового меню, содержащие подпункты. Если какая-то группа слишком большая, разделите её на подгруппы. Создайте файлы для главной странички и файлы для остальных страниц, с надгруппами, группами и подгруппами, которые будут содержать текстовые ссылки друг на друга (пока без дизайна). Иногда это помогает не запутаться. Определитесь с дизайном. Сначала потренируйтесь на главной страничке. Выберите цветовую гамму, выберите общий стиль (самые распространённые — минималистичный, пиктографичный, мусорный, журнальный, чертёжный, готический, мондриановский плакатный, простой плакатный, панк-роковый, миниатюрный и мультяшный; этот сайт — помесь пиктографичного и мандриановского плакатного стилей) определите, какие элементы будут присутствовать на страничке, скомпонуйте их (если для заказчика, то можно сделать специальный рисунок-схему, где вместе со схематичной, но подробной композицией будут пометки и комментарии), какие шрифты будут использоваться. Теперь займитесь другими страничками. Как правило, по дизайну они слегка отличаются от главной, сохраняя, тем не менее, основные черты: цветовую гамму, общий стиль, размещение логотипа и навигации. Однако друг на друга они, по большей части, похожи. Можно создать для них отдельный шаблон — если страничек много, так удобней будет работать. вернуться к навигационной панели 2. Об оригинальных названиях, непонятных словах и подсказках к ним. Когда я лазила по Ру.Ководству Лебедева, меня очень смутила одна вещь. Я не хотела просматривать все его Параграфы; я искала несколько определённых тем. Иногда это было очень трудно, потому что он использовал очень интересные, стильные и забавные оглавления, которые совершенно не давали информации, о чём же будет статья. Тыканье наугад очень раздражало. Это не значит, что нельзя придумывать таких оглавлений, наоборот. Однако следовало бы пояснять, что вы имеете в виду, с помощью всплывающих подсказок, вставляемых тэгом
Кроме того, этот тэг удобен для объяснения трудных, редких, новых слов, поскольку пояснения в скобочках мешают нормальному восприятию предложения. Чтобы было ясно, что к слову имеется всплывающая подсказка, будет неплохо его подчеркнуть.
Даже не подозревая, что тут скрыты всплывающие подсказки, пользователь машинально потянется мышкой к подчёркнутому тексту. вернуться к навигационной панели 3. "Резиновая" вёрстка. Многие гуру веб-дизайна рекомендуют использовать "резиновый" дизайн для сайта, то есть, дизайн, не зависящий от размера монитора. Это достигается использованием процентов для измерения ширины и высоты элементов сайта, вместо традиционных пикселей. С одной стороны, это действительно избавляет вас от переживаний, как нелепо будет выглядеть ваша страничка, подогнанная под 800х600, притулившись в каком-нибудь уголке здоровенного экрана 1024х768 или больше, или наоборот, от переживаний по поводу неудобства страницы, предназначенной для 1024х768, просматриваемой на мониторе с максимальным разрешением в 800х600, когда посетитель вынужден гонять туда-сюда бегунок на полосе горизонтальной прокрутки. С другой стороны, реально трудно сделать красивую страничку с нестандартной композицией, используя "резиновую" вёрстку, когда всё перемещается, едва ты начинаешь изменять размер окна. Если вам представляется трудным разрабатывать композицию при "резиновой" вёрстке, вы просто можете сделать так, чтобы ваш сайт, рассчитанный на разрешение, к примеру, 800х600, прилично выглядело бы и при больших разрешениях. Например, можно сделать так, чтобы пустой фон странички выглядел частью композиции (сайт Киндерподольск), или центрировать страничку, разместив её в равноширинных таблицах с чётко очерченными боковыми границами, так, чтобы лишнее пространство по бокам казалось полями. Да, дизайн этого сайта — "резиновый", хотя некоторые ячейки отмеряны в пикселях. вернуться к навигационной панели 4. Как подобрать цветовую гамму для странички. Универсального правила, увы, не существует. Стоит только запомнит: тёмное и светлое сочетается, светлое и светлое сочетается, но тёмное и тёмное — это, как принято писать, АЦТОЙ. Бурый отвратительно смотрится рядом с лиловым, тёмно-синий — с чёрным, и т. д. Реверсивное оформление — тёмный фон, светлые буквы — воспринимается с трудом, хотя подходит к некоторым типам сайтов, вроде мистических (кабинет Неестествознания в Старминской Школе). Текст заголовка может на полтона отличаться по окраске от фона (сайт детского сада), а может быть выполнен контрастно (сайт Клуба Любительниц Экстремального Юмора). Обычный текст должен быть контрастным обязательно. То же относится к картинкам, относящимся к навигации, и логотипу. Как выбирала цвета для этого сайта я. Сначала получила RGB описание своего любимого цвета, светло-оранжевого: вернуться к навигационной панели 5. О графике. Один раз я наткнулась на страничку, где была необходимая мне картинка... в формате bmp. У меня не лучший коннект: не выделёнка и даже не обычный диалуп. Я выхожу при помощи ЖПРС. Мало того, что эта скотина имеет немыслимую цену, так она ещё и не закачивает файлы большого объёма! А картинки bmp имеют ни фига себе объёмы! Так вот, так делать не надо! Рекомендуемыми форматами для сети являются gif, jpg или, на крайняк, png. Как делать картинки, история отдельная. А вот несколько правил их оформления на страничке. Логотип должен висеть слева вверху. Это по умолчанию. Домашним страничкам, вроде этой, логотип не нужен. Логотип не должен смотреться наклееным квадратиком; это должен быть прозрачный gif, так, чтобы края смотрелись неровными (веб-журнал Лилит, сайт детского сада), Когда логотип не на индексе, он должен ссылаться на главную страничку и содержать соответствующее значение атрибута
Ширину, высоту и описание необходимо указывать для того, чтобы содержимое странички отображалось в браузере даже при отключенной графике. Описание должно не рассказывать, как выглядит картинка, а комментировать: в какой раздел она ведёт, если это ссылка, или что именно она иллюстрирует, если иллюстрация. Для карт-изображений необходимо добавлять описание для каждого активного участка. Фоновую картинку лучше не использовать или использовать текстурную. Картинка с ограниченными размерами может использоваться только в областях с явно ограниченными размерами: таблицах, ячейках и т. п. Фоновая картинка должна быть или очень светлая, или очень тёмная, не очень контрастная или пёстрая, чтобы на ней текст читался без невероятных усилий. Подкладывать фоновый рисунок под заголовки — дурной тон. Картинки-ссылки гораздо лучше воспринимаются, будучи разного размера, если это прозрачные гифы вроде тех, что использованы у меня на странице, и одинакового, если это жпеги или метафорки. Метафоры, текстуры, кнопки и логотипы лучше использовать свои, а не сдирать с чужих сайтов. Анимированные картинки обычно используются для ссылок. Реагирующие на мышь — только для ссылок. Иначе пользователь начинает нервничать. пределах видимости раздражают. Эти, казалось бы, несложные правила значительно облегчают жизнь вашему посетителю. вернуться к навигационной панели 6. Когда нужны "навороты"? Просто хороший, приятный глазу сайт — это уже не круто. Во всяком случае, так утверждают заказчики и многие веб-дизайнеры. К простенькой домашней страничке или сайту с информацией о фирме и её продукции обязательно должны быть прикреплены форум, в котором никто не отвечает ни на какие вопросы, гостевая книга, в которой пишут исключительно ерунду, никак не относящуюся к сайту, по страничкам непременно должны носиться летучие мыши, розовые слоники, снежинки и листочки; все картинки при наведении мыши — пищать и меняться, логотип непременно должен быть анимирован, а снизу — висеть опрос, непонятно, кому нужный и на что своими результатами влияющий. Ну, и куча разных дополнительных скриптов невнятного назначения. Примером такого "наскриптованного" сайта может служить первая страничка моего знакомого. Он её специально оставил, чтобы каждый мог видеть, как делать не нужно. Посмотрите на индекс. Вокруг курсора раздражающе вертится по кругу какая-то строчка; при наведении на картинку-ссылку внизу, вместо адреса, на который она указывает, высвечивается её описание; если ты идёшь по ссылке, появляется окошко с вопросом "Вы хотите туда-то?" и единственной кнопкой ОК. Предназначение всех этих эффектов остаётся неясным. Прежде, чем что-либо "присобачить", просто задумайтесь: несёт ли "наворот" практическую или эстетическую пользу? Помните — не всё то круто, что сложно. вернуться к навигационной панели 7. Композиция элементов на веб-странице: азы. Пока не готово. 8. Карта сайта и версия для печати. Если ваш сайт достаточно обширен и есть места, в которые меньше чем за три клика не попадёшь, то имеет смысл создать карту сайта, с перечислением и описанием имеющихся страничек в виде иерархического списка или дерева, и размещать ссылки на неё на каждой странице. К сожалению, только один из четырёх посетителей имеет представление о предназначении ссылки "карта сайта", поэтому имеет смысл как-нибудь её переименовать, что-то вроде "Быстрый переход" или "Список всех страниц". Кроме того, иногда можно предположить, что данную страничку кто-то захочет распечатать (например, справочную информацию, прайс-лист, анекдоты и т. п.). В таком случае будет вежливо сделать вторую версию странички, для распечатки, с простым дизайном и композицией, которая будет хорошо смотреться на листе бумаги. На эту версию (в формате html или rtf) делается ссылочка со словами "версия для печати". |
