Дизайн сайта

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

На самом деле он играет более важную роль: создает ощущение места. Хороший дизайн гармонично объединяет страницы сайта. Другими словами обозначает место размещения сайта

Часто задаваемые вопросы:

Что такое Web-дизайн? Я понятия не имею в этом деле хотя знаю язык HTML?

Юмористическая картинка Веб дизайнер

С помощью этих тегов формируются связи с другими Web -сайтами и ресурсами Интернет. Посмотреть файл, написанный на языке HTML можно в программе просмотра IE (Microsoft Explorer) для этого, нужно щелкнуть правой кнопки мыши в любом свободном от текста и графики места окна, и в выпадающем контекстном меню выбрать пункт просмотр html -кода

Другие, которые применяют Web-обозреватели типа Mozilla или Opera, могут поступить иначе - просмотр исходного кода .

Скажи, раз ты такой умный, как различить нормальные сайты от не нормальных ?

Серьезные сайты отличают от бесполезного хлама, которым полнится Сеть, как минимум следующие непременные черты:

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

Хочу знать, от чего зависит успех моего будещего проекта?

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

  • Это "шапка" (в английской терминологии  header);
  • блок навигации;
  • область основного текста;
  • "подвал" (footer).

Web -сайт -это набор, связанных HTML -документов плюс все внешние файлы, такие как изображения и клипы, отображающие на Web страницах. Обычный вопрос, который возникает у начинающих Web - дизайнеров: как организовать работу с чего начать, где взять программное обеспечение и т.д.
С технической точки зрения Web- страница - это обычный "текстовый файл"который заключен в парные HTML— теги или по-другому "флаги разметки". "Флаги разметки"объясняют компьютеру, как должен быть расположен текст на экране, в каком месте должны находиться рисунки, хранящиеся в совсем других файлах и так далее.

Для чего нужна "шапка" сайта?

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

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

Хочу модную навигационную панель,как быть?

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

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

Как на счет шрифтов?

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

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

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

  • Шрифты с заческами, такие как Times New Roman,хороши для Web- сайтов с серьезным содержанием обязательно для русского языка с форматированием по ширине с выключкой, величина 8 -12 pt ,не путать с пикселями, все данные задаются в CSS, избегаая страшного тега FONT
  • Шрифты без засечек, такие как Tahoma, Arial, лучше подойдут для Web - сайтов с легким игривым содержанием.
  • Шрифты с засечками и стандартными размерами делают большие фрагменты текста удобными для чтения.
  • Широкие гарнитуры, такие как Verdana или Georgia, лучше использовать для малых размеров шрифта. При больших размерах шрифта эти гарнитуры выглядят чрезмерно большими.
  • Шрифты без засечек обычно чаще, чем шрифты с засечками, используют для заголовков.

Выводы:

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

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

Хочу чтоб все моргало и сияло , много,много супер картинок ,чтоб все падали от зависти!

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

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

Мы должны учесть, что многие пользователи Интернета отключают на своих "бродилках" графику, или применяют текстовые браузеры, не обременяют себя установкой новых версий, а тем более разнообразных плагинов к ним (скажем Flash -проигрывателей). Если они только не смотрят порно или эротику. Ставят программы, убивающие баннеры, рекламы, всплывающие окна, заградители различных скриптов и т.д. все это делается против современных технологий.

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

Я создал ярко красочный красивый сайт, а он многим не нравится ,почему?

Правильность отображения цветовой гаммы

Времена ярких кричащих цветов ушли в прошлое. Сейчас на первое место выходит удобство восприятия информации, удобство чтения, что особенно актуально для информационных сайтов. Чем проще посетителю будет воспринимать вашу информацию, теш больше шансов, что он станет постоянным читателем — частью вашей аудитории.

Вы заметили тот минимализм, что присутствует в дизайне Google, что не мешает им быть на лидирующих ролях в Internet-бизнесе. За таким дизайном потянулись Yahoo и MSN. Одним словом, в моде "легкий дизайн". Делайте это и вы. Обратите самое пристальное внимание на цвета, которые будут использоваться на вашем будущем сайте. Рекомендую ознакомиться с сайтом Владимира Голованова, с его статьей "О дизайне" http://www.tarusa.ru/ ~golovan/file.php?page=0 На этом сайте можно посмотреть палитры (сочетания цветов, которыми рекомендуется пользоваться для Web-дизайна).

Автоматически подобрать контрастный цвет, гармоничные цветовые сочетания, нюансовые сочетания и оттенки серого можно на странице http://www.alokator.ru/color.htm. Номер цвета в системе RGB скопировать для последующего использования.

Скриншот программы ColorBlender

Аналогичный инструмент с названием ColorBlender и возможностью сохранения палитр в форматах Photoshop и Illustrator можно найти на странице http://colorblender.com/. Сайт позволяет сохранять удачно найденные сочетания цветов и затем при неободимости восстановить их .

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

Пожалуй, нельзя обойти вниманием две профессиональные утилиты для подбора цвета. С сайтов производителей можно скачать полнофункциональные пробные версии. Color Schemer Studio http://www.colorschemer.com/ и Colorlmpact http://www.tigercolor.com/ рекомендую познакомиться по ближе.

Немножко про CSS

Что такое CSS.

Каскадные таблицы стилей (Cascading Style Sheets—CSS) это язык, используемый в документах HTML для определения способа представления содержимого.

Представление задается с помощью стилей, помещаемых непосредственно в элементы HTML, заголовок HTML-документа или отдельные таблицы стилей.

Таблицы стилей содержат несколько правил CSS.Каждое правило выбирает элементы в HTML-документе. Затем данные правила определяют,каким стиле будут представлены элементы.С одним файлом CSS может связывать любое число файлов HTML.

Что означает "каскадные".

Существует три типа таблиц стилей, которые могут повлиять на представление HTML документа в браузере. Перечислим их.

1.Таблицы стилей браузера.

Браузеры применяют таблицы стилей ко всем Web-документам. Хотя эти таблицы стилей зависят от браузера, все они обладают общими характеристиками черный текст, синие ссылки, коричневые посещенные ссылки. Данные таблицы стилей браузера являются таблицами по умолчанию.

2.Пользовательские таблицы стилей.

Пользователем является любой посетитель вашего Web-сайта. Большинство современных браузеров позволяет пользователям устанавливать свои таблицы стилей в браузерах.

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

3. Авторские таблицы стилей.

Автором является тот, кто разработал Web-сайт, т.е. Вы применив таблицу основного стиля к странице, Вы добавили авторскую таблицу стилей.

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

Каскад означает, что стили могут ниспадать друг в друга (или образовывать каскад).

Посредством каскада определяются приоритеты правил, которые позже применяются к документу.

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

Откуда взялись CSS.

CSS — это рекомендация Консорциума World Wide Web (World Wide Web Consortium — W3C).

W3C—это промышленный консорциум сторон, заинтересованных в развитии WWW.
В него входят университеты,такие компании, как Microsoft, Netscape и Macromedia, а так-же эксперты смежных областей.

Одной из задач W3C является выработка рекомендаций для различных аспектов деятельности Web.

Технология CSS1 получила статус рекомендации в конце 1996 года, CSS2 стала рекомендацией в мае 1998 года, a CSS2.1 — в январе 2003 года.

Зачем нужно использовать CSS.

Перечислим некоторые преимущества использования CSS для разработчиков Web-страниц.

1.Простата эксплуатации.

Истинная мощь CSS заключается в том, что один файл CSS может контролировать внешний вид множества документов HTML.Чтобы изменить вид всего сайта, достаточно отредактировать единственный файл CSS (а не огромный набор HTML-документов).

2.Меньшие размеры файлов.

CSS позволяет авторам удалять из HTML— документов все элементы,связанные с представлением — таблицы стилей, разделительные изображения, декоративные изображения, шрифты, цвета, показатели ширины высоты и фоновые изображения.

Представления можно контролировать спомощью файлов CSS,что позволяет существенно уменьшить размеры файлов,представляющих HTML-документы.

3.Повышенная доступность.

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

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

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

4.Различные среды.

Стили CSS можно разрабатывать для различных средств—браузеров,принтеров,
портативных устройств и проекторов,не меняя при этом содержимое или структуру документа.

5.Повышенный контроль над типографией.

CSS позволяет авторам контролировать представление содержимого с помощью таких свойств,как capitalize, uppercase, lowercase, text-decoration, letter-spacing, word-spacing ,text-indent и line-height.

CSS также позволяет добавлять поля, границы ,заполнение, фоновый цвет и фоновые изображения к любому элементу HTML.

Вопрос: Для создания макета использовать HTML- или CSS-кoд?

Существует два основных подхода по созданию макетов на Web-странице: HTML-таблицы и каскадные таблицы стилей (Cascading Style Sheets - CSS). Подход, использующий таблицы, является классическим. Его легко реализовать, и он надежно работает на множестве различных типов браузеров. Однако использование HTML-таблиц для создания приводит все стандарты в беспорядок.

 Группы, наподобие консорциума World WideWeb (W3C), ненавидят, когда таблицы используются подобным образом, поскольку использование тегов table языка HTML предполагается для строк и столбцов данных.Использование таблиц для графического дизайна напоминает использование молота для вбивания шурупа - задача будет выполнена, однако это не та задача, на которую рассчитывали молот или шуруп.

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

Альтернативный подход с использованием CSS-кода следует стандартам буквально, удовлетворяя даже самых привередливых членов консорциума WSC. Таблицы CSS уже некотoроe время используются повсеместно, но до сих пор они являются «созревающей» технологией.

 Таблицы стилей не были бы такими неудачными, если бы браузеры выполняли совместные действия в отношении их. Самые последние версии браузеров Internet Explorer, Netscape, Opera Mozilla достаточно хорошо поддерживают таблицы CSS

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

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

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

Пользователю в этом случае нет никакой необходимости искать на странице кнопки ссылки а-ля "Версия для КПК" или "Версия для печати". Ни о чем не задумываясь, пользователь может смело зайти на страницу с тем же самым URL c "наладонника", увидев ее в специально адаптированном оформлении.

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

На сегодняшний день версия листов стилей, CSS level 2 (или, coкращенно, CSS2), позволяет полностью отказаться от нежелательных тегов атрибутов HTML, отвечающих за визуальное представление данных.

Важно понимать, что, отказываясь от визуальных средств HTML в пользу CSS, мы не просто меняем "шило на мыло". Мы приобретаем несравненни большую гибкость, ибо CSS2 в идеале дает нам возможность реализовать принцип разделения содержания и представления на уровне конечного кода веб-страниц.

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

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

Количеств во страниц не имеет значения — таких документов может быть десять, сто! тысяча, да хоть миллион...

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

Значить ,сайты строить тяжело?

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

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

Поэтому не спешите делать выводы, что это очень сложно, если освоил я, значить можешь ты. Не бойтесь, у ВАС все получиться! Есть множество инструментов, с которыми можно умело воспользоваться. Когда вы это поймете, тогда вам не будет цены!!! Выбор ЗА ВАМИ.

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

Как мы видим вывод один: надо строить правильные сайты.

А для этого у меня есть все необходимое :

Читать дальше

В меню быстрого доступа

Живая связь по всем вопросам тел. 8- 919- 633- 05-13  Телефон