Практика web-дизайна. Часть первая.

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

1. Название ресурса. Ни одного ресурса в сети нет без своего уникального названия. Какую информацию для дизайна мы сможем вытянуть из названия? Иногда имя сайта может дать много, иногда ничего. Например, "About PC" (название сайта, выпускающего интереснейший оффлайн журнал) не оставляет никаких сомнений в вопросе тематики сайта. Другой пример - "Mastak.ru" (сайт одного из хостеров), по такому названию о ресурсе ничего не скажешь, он может быть посвящен чему угодно.

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

"Фарос" (сайт центра новаций), так назывался остров в дельте Нила, на котором был построен знаменитый маяк по приказу Александра Македонского. Маяк также мог быть, и был использован в дизайне сайта.

Сайт компании "Greenford Continental Limited" - из этого сложного (но солидного) названия мне приглянулось слово "континенталь" и в дизайне сайта стала фигурировать карта мира.

2. Логотип. Это вообще отправная точка для всего дизайна.
Лого дает кучу информации, а именно:

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

Опять пример - лого "Асклепия" выполнено в зеленых цветах, имеет закругленные, изогнутые линии, к тексту лого больше подойдет текст страницы выполненный шрифтом типа "Verdana, Arial, Helvetica". Противоположный пример - лого компании "Фарос", квадрат, внутри комбинация букв "Ф" и "Р", и разная цветовая гамма - темно синий и ярко оранжевый. Это позволяет выполнить дизайн, используя как прямые линии и сам квадрат, так и полукруги, что и было сделано.

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

3. Лозунг или слоган. Если есть, то его также можно и нужно использовать в дизайне. Красиво оформленный лозунг или название ресурса может вполне заменить отсутствующий логотип. Причем он должен выделятся, бросаться в глаза, и, по моему мнению, располагаться в некотором отдалении от логотипа, к примеру над сервисным меню. Человек, подводя курсор к меню, будет невольно обращать внимание на ярко выраженный лозунг, и, скорее всего, запомнит его.

Пример - "Фарос", его лозунг, в аккурат висит над меню сервисов, и расположен в противоположном углу страницы относительно логотипа.

4. URL ресурса. Это маленький кирпичик, но совсем немаловажный. Адрес ресурса также используется в дизайне, и как и слоган должен выделяться, что очень способствует его запоминанию.

5. Баннеры. Сюда мы отнесем также кнопки размера 88х31 пикселов (всевозможные счетчики и кнопки каталогов), и вашу собственную рекламу, размеры которой вы определите для себя сами. Если вы предполагаете размещение баннеров на странице, то почему же не предусмотреть для этого специально отведенное место, и сделать его таким, чтобы баннер своим броским видом не ломал общий вид страницы?

Обычно для баннеров размера 468х60 пикселов отводят местечко в самом верху страницы справа от лого (и требуют за это "бешеных" денег :), для меньших представителей этого семейства выделяют места в столбце под меню или новостями на противоположной стороне. Для счетчиков и кнопок каталогов можно отвести место в самом низу, под копирайтом.

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

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

7. Меню сайта. Хотя разработка меню, это тема для отдельной статьи, но приблизительно прикинуть, сколько у вас будет пунктов в меню, нужно уже сейчас. От этого будет зависеть, какой тип меню более приемлем для вашего ресурса.

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

Если количество пунктов меню сайта заранее неизвестно, или их количество будет увеличиваться со временем, то однозначным выбором должен стать тип меню под названием "вертикальный список" (с выпадающем подменю или без). Более того, можно разделять панель навигации, на меню "разделов"(страниц) - где будут находится ссылки на страницы вашего ресурса, и меню "сервисов" - где, возможно, будут располагаться ссылки на страницы не относящиеся ни к одному из разделов, но предоставляющие некие сервисы вашего ресурса. Я имею в виду гостевые книги, карту сайта, языковые переключатели (рус./eng.), карта сайта, раздел о создателях, контакты, опросы, обратная связь и так далее.

8. Тип дизайна. Здесь я имею в виду статический тип - шириной 780 пикселов (умещающийся в разрешение экрана 800х600) или "резиновый" (растягивающийся на всю ширину экрана, независимо от разрешения монитора). Второй грамм на 200 делать сложнее. С тех пор как размеры мониторов перешагнули 15" и обычным на сегодня стало разрешение 1024х768, многие пользователи без особой радости стали наблюдать сайты вытянутые в узкую полосу, и пол-экрана пустого места на своих громадных 21" мониторах. Сделать выбор может помочь приблизительное количество контента (текста) страницы. Идем к следующему "кирпичу", но прежде хочу сказать, что делать статическую страницу под разрешение 1024х768 неразумно, т.к, к сожалению, еще не все пользователи сидят за мониторами с большими экранами.

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

Хочу отметить, что лучше (если вы не знаете заранее как это будет выглядеть) делать "резиновый" дизайн, который легким движением мыши можно превратить в статический. А вот превращение наоборот займет несколько больше времени.

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

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

Продолжение следует...

Полезные советы

Время, затраченное на генерацию PHP скрипта.

Есть сайты, у которых в низу висит: страница сгенерировалась за 0.0068 сек., сегодня мы сделаем тоже самое.

<? 
// Определяем текущее время. 

list($msec,$sec)=explode(chr(32),microtime()); 
$HeadTime=$sec+$msec; 

// На этом месте должен быть ваш PHP код. 
// Можно сделать простой инклудинг: 
// include("script.inc.php"); 

// Определяем ещё раз текущее время. 

list($msec,$sec)=explode(chr(32),microtime()); 

// Выводим время затраченное на выполнение скрипта 
// с 4 знаками после запятой (точки). 

echo "Страница сгенерировалась за ".round(($sec+$msec)-$HeadTime,4)." сек."; 
?> 

Количество оставшихся дней до нового года.

<? 
$days=floor((MkTime(0,0,0,1,1,date("Y")+1)-time())/86400); 

echo "До нового года осталось: ".$days." дн."; 
?> 

Интересные программы

Proxy Checker 7.0
Программа предназначена для тестирования списков HTTP и SOCKS прокси-серверов. Используя эту программу вы получите большое количество информации о каждом прокси (уровень анонимности HTTP прокси, версия протокола SOCKS, временя ответа прокси сервера, скорость, поддержка SSL для HTTP прокси и т.д.) и сможете выбрать те прокси серверы, которые действительно удовлетворяют все ваши требования. Одновременное тестирование большого количества прокси позволяет значительно ускорить процесс тестирования.
512.00 KB Win 9*/ME/NT/2K/XP, Free, EN
Скачать: http://webstudent.net.ru/modules/mydownloads/visit.php?cid=12&lid=282

WebMon 1.0.10
Программа для автоматического мониторинга сайтов на предмет их обновления - достаточно указать, какие сайты и как часто нужно опрашивать (по времени можно настроить проверку каждой страницы индивидуально), и WebMon будет наглядно - значком или звуком - оповещать, что веб-страница обновилась.
766.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=69&lid=284

Codec Pack All in 116.0.1.3
Набор кодеков: DivX, Koepi s XviD, DivX, XviD — FFDShow, MPEG2, Subtitles g400, Subtitles DVobSub (Win9x, Win2k a WinXP), OGG Vorbis, AC3 0.70b, Morgan Multimedia Stream Switcher.
4.50 MB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=50&lid=285

RAR Password Recovery Key v.6.3
Прога позволяет получить доступ к запароленному архиву без пароля. В своей работе она использует несколько методов, что позволяет получить прекрасные результаты. Правда, работает Advanced RAR Password Recovery достаточно медленно. Причина этого - хорошая криптографическая защита паролей в архивах формата RAR. Подбор производится со скоростью 75,000,000 паролей в минуту, не правдали удивительно быстро, такая программа встретилась мне на глаза в первые советую загрузить, в хозяйстве такие вещи всегда пригодятся.
861.00 KB Win 9*/ME/NT/2K/XP, Shareware, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=71&lid=287

iTunes 4.6
Медиа центр от Apple. Программа, представляющая собой мультимедиа комбайн. Умеет практически всё: естественно проигрывать MP3, WAV, CDDA, проигрывать интернет радиостанции, умеет записывать CD и DVD диски, конвертировать аудио файлы, грабить компакты в MP3 (с переменным и постоянным битрейдом до 320 kbps), AIFF, WAV, AAC. Очень удобный органайзер MP3 файлов, редактор тегов, красивая визуализация. Умеет автоматически уравнивать громкость композиций, делать наложение одной на другую и ещё много чего... Удобнейший интерфейс, отличный эквалайзер на 10 полос. Отлично понимает русские названия песен. Имеет ШИКАРНОЕ звучание. И т. д.
19.68 MB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=46&lid=289

Патрульный ресурсов v.5.60
Многофункциональная утилита мониторинга состояния и управления ресурсами ПК в реальном времени. Программа сочетает в себе мощные средства контролирования оперативной памяти, файловой системы, передачи данных через модемное соединение, гибкость в управлении выполняемыми задачами и автозагрузкой. И все это с минимальными требованиями к аппаратной части компьютера. Пользователю предоставляется право самому задавать требуемый тайминг опроса всех контролируемых программой величин. Программа позволяет получить полный список драйверов устройств, сервисов, резидентных модулей и выполняемых процессов, с моментальной возможностью выгрузки их из оперативной памяти. Предоставляет пользователю максимально необходимую и содержательную информацию об аппаратной части компьютера, свободного пространства жесткого диска, настройках среды, доступных для последующего изменения, а также ведет учет времени работы ПК. Распознает до 30 моделей процессоров и 22 версии операционной системы Windows, без учета промежуточных, неофициальных релизов. Reg файл в архиве.
357.00 KB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=73&lid=290

Euro Championship Portugal 2004
Програмка для любителей футбола..., которая в реальном времени отслеживает результаты футбольных матчей на Чемпионате Европы 2004 в Португалии, и ведет полную статистику по группам..., так что, вы всегда будете в курсе событий на футбольных полях не отходя от экрана любимого компутера...
673.00 KB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=67&lid=291

Cookie Editor 1.8.4.333
Это приложение предназначено для работы с файлами cookies, которые скапливаются на жестком диске по мере того, как вы посещаете веб-страницы посредством браузеров Internet Explorer and Netscape. С помощью Cookie Editor вы можете делать резервную копию и удалять ненужные файлы. Продвинутые пользователи могут в этой программе редактировать содержимое cookies.
968.00 KB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=12&lid=292

E-ditor v.3.0
Этот редактор поможет создавать Ваши собственные электронные книги из HTML или TXT-файлов. Редактор позволит добавить к проекту некоторые важные функции, к примеру, опции безопасности, дизайна и т.п. Реализована поддержка Flash, Shockwave, RealAudio, Quicktime.
6.01 MB Win 9*/ME/NT/2K/XP, Shareware, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=9&lid=294

RegCool 2.493 Beta 3
Обновление утилиты, предназначенной для работы с реестром Windows. RegCool может экспортировать, импортировать, копировать, перемещать, удалять, переименовывать ключи и значения реестра. Расширенный поиск позволит быстро найти какой-либо определённый ключ (ключи) в реестре. Результаты поиска выводятся в наглядной форме в таблице. Интуитивно понятный интерфейс, а-ля Проводник Windows, делает работу с RegCool удобной и плодотворной. Однако, производя манипуляции над реестром операционной системы, не забывайте делать его копию. Стоит отметить, что программа может сравнивать реестры между собой и выводить список отличий. Совместима с Regedit и RegEdt32. В этой версии улучшена работа в функции поиска ключей реестра, исправлены ошибки.
679.00 KB Win 9*/ME/NT/2K/XP, Free, EN
Скачать:
http://webstudent.net.ru/modules/mydownloads/visit.php?cid=72&lid=300

Вопрос в рассылку

Уважаемые Гуру! Нам, новичкам, нужна Ваша помощь! Помогите нам, ведь это выгодно обоим сторонам: мы получаем желанные знания, а вы имеете уникальную возможность продемонстрировать свои знания и опыт. Ссылка на ваш сайт гарантирована!

Присылайте свои вопросы на адрес crystall@webstudent.net.ru

Вопрос №12

"Можно ли прописать сайт на narod.ru к примеру,или используя другой бесплатный хостинг,но только не изготавливая сайт по ихнему стандартному шаблону,а имея свои страницы,и как?"

Ответ от Vasyasya (http:// www.kpeaTops.narod.ru) : Спокойно. Делаешь сайт локально (у себя на компьютере). Если страниц мало, то заходишь в мастерскую НАРОДа -> Загрузка файлов на сайт. Если файлов больше 20-30, то по одному закачивать становится как-то вломы. Качаешь CuteFTP, задаешь там HostAdress: ftp.narod.ru, Username: твой логин, Password: пароль для доступа к мастерской, и качаешь.

Ответ от Судаков Вадим Геннадьевич : да можно! я так и сделал, просто в мастерской копируеш свои html странички (на свой сайт *.narod.ru) только потом если в будеш создавать в ихнем на твой index запишется поверх (следовательно не пользоваться ихними, а делаеш всё усебя на компе а потом заливаек на хостинг) и всё!

Ответ от Eduard : Конечно можно! Ручками в блокноте на html или с помощью специальных программ (тольеко не FrontPage!!!). Понадобятся ещё программы для изображенеий(Фотошоп и Гифаниматор).Размещать сайт на НАРОДЕ по меньшей мере несерьёзно (сервер крайне медлительный). Я писал свой сайт в блокноте, можешь посмотреть, что получилось - http://rostra.nm.ru

Ответ от Алексей Голубев (http://www.frnet.narod.ru/) : Конечно можно. Раздел в мастерской: "Управление файлами". И все. Далее: ссылка "Загрузить файлы"

Ответ от Strega : Делается все просто. На вашем компьютере в отдельной папке создается сайт (с помощью HTML, кто не знает - ищите в сети самоучитель для чайников и изучайте). Потом заходим на Народ, регистрируемся и выбираем пункт меню, предлагающий загрузить свои файлы. Выбираем те файлы, из которых состоит ваш сайт и пихаем туда. Главная страница сайта должна называться index.htm (но это лирика правил, на самом деле все гораздо легче).

Ответ от Shua (http://turning.narod.ru) : Можно. Делаешь свой сайт какой тебе нужен и закачиваешь его на хостинг через ftp (для народа, например, вводишь в браузере адрес: ftp://ваше_имя:ваш_пароль@ftp.narod.ru или можно специальными программками воспользоваться). Работаешь как с обычной папкой. Т.е. файлики своего сайта "копировать" и в окошечко, где у тебя ftp открыто, "вставить".

Новый вопрос: Вопрос №13

"Что такое CHMOD? В описании к скрипту написано, что нужно ЭТО выставить, а я даже не знаю для чего оно нужно и где его искать! Скажите, что за зверь? "

Ответить!

Хочу задать вопрос!

На посошок...

Снова раздаем семизнаки всем нуждающимся. Как обычно - пароли в форуме:
Получить номер!

1) 9401080
2) 6501526
3) 6646025
4) 7162567
5) 6435021

А то делать, если вы не успели взять себе номер? Главное не отчаиваться. Разъясняю алгоритм действий: заходим на злой портал. К слову, очень интересный сайт! Там 24 часа в сутки 7 дней в неделю можно получить номерки. Но это не все! К вашим услугам ежедневные обзоры новых программ, самая актуальная информация о софте и харде, и конечно живое общение в форуме. Поэтому, кому нужен номер вам сюда: http://zloy.org

Одной строкой

Все люди на одно лицо! (с) Табуретка
Все люди такие разные, только я один такой одинаковый!
Выше голову! - сказал палач, накидывая петлю
Где наша не пропадала? Наша пропадала везде!
Герасим учил плавать ещё хуже, чем говорил...
Гнетущую тишину нарушало только всеобщее молчание...
Господа, я тут где-то посеял Разумное, Доброе, Вечное - никто не находил?
Грабли, на которые не ступала нога человека
Да пошли вы все! И они пошли. Все...
Да пребудет с тобой крыша!
Даже у самого плохого человека можно найти что-то хорошее, если его тщательно обыскать
Две головы хорошо, но безопасный атом лучше
Демократия - это возможность самим выбирать себе рабовладельцев
Деньги - зло! И тем большее, чем их меньше
Джонсон и Джонсон. Почувствуйте разницу...
Долго, надменно и с презрением смотрели друг на друга презерватив и воздушный шарик...
Дом престарелых имени Павлика Морозова
Для набора секретных документов срочно требуется машинистка, не умеющая читать
Добро обязательно победит зло. Поставит на колени. И зверски убьёт...
Другое достоинство этого недостатка состоит в том...
Если слепые носят тёмные очки, то почему глухие не носят наушники?
Если ты идёшь мне навстречу - значит, нам не по пути
Если у Вас всё время отличное настроение, великолепные друзья, сногсшибательная подруга, огромная зарплата, не бывает похмелья и Вы никогда не были у дантиста... у вас один выход: скажите «нет» наркотикам!
Завтра сегодня станет вчера
«Запорожец» - лучшее средство от случайных связей
Здесь недалеко - одна остановка на такси
- Здесь немцы не проходили? - Hихт феpштейн...
Зеркало - это средство коммуникации с умным человеком

Последние темы форума: