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

По поводу цветового решения. Если строго следовать рекомендациям для веб-дизайнеров, то для цветового решения нужно использовать так называемую таблицу безопасных цветов (всего 216 цветов), или безопасную палитру. Почему она безопасная? Потому, что такая палитра обеспечивает точное соответствие отображения цветов на различных мониторах. Правило простое. Как известно, цвет задается шестнадцатеричным значением от 000000 (черный цвет) до FFFFFF(белый цвет). Так вот, безопасный цвет может содержать только следующие значения: 00, 33, 66, 99, CC, FF. Например: 003300, 6699СС, FF0099.

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

Как понять сайт красивый или нет?

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

Мало того для каждого человека, определение красивый или не красивый — меняется, в зависимости от настроения и возраста. Восприятие красивости в момент просмотра сайта зависит от того, как у человека сейчас идут дела на личном фронте и в профессиональной деятельности.

Правила, которые необходимо соблюдать, чтоб сделать красивый сайт:1. Рассматривайте каждую страницу сайта как цветовые пятна (текст тоже считается цветным объектом)

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

3. Цветовых пятен не должно быть много, чтоб глаза знали, где остановится, и за что зацепится.

4. Комбинируйте цветовые объекты в группы, которые концентрируют внимание в определенных местах

5. Расставляйте акценты на каждой странице сайта в зависимости от приоритетных целей страницы. По принципу, то, что важнее – привлекает больше внимание цветом, размером, формой.

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

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

• на своих знакомых и родственниках (попросите их посмотреть на страницу в течение 5 секунд, потом расспросите о впечатлениях, задавайте вопросы)

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

• напишите блоггерам, люди в основной своей массе отзывчивые, посмотрят на Вашу страницу в течение 5-10 секунд.

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

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

Затем человек долго долго смотрит на своё творение. Оно ему нравится, он считает его совершенным и самым красивым сайтом. Оно и понятно, ведь это он сделал! Потом на этот сайт смотрят его друзья. И, конечно, говорят, что он им очень нравится! А иначе они и не скажут (ведь это друзья).

Спустя немного времени автор этого сайта случайно или специально натыкается в безграничных просторах Интернета на форум. Форум, на котором общаются люди, создающие сайты. И тогда человек, уверенный в том, что его творение идеально, решается показать свойт сайт на этом форуме. Он регистрируется, открывает новый топик и ждёт ответов. Он ждёт и грезит, что про его чудо будут говорить «Да, как оринально!», «Да, здорово!», что будут восхищаться.

Через несколько часов (ведь так нетерпится узнать, что они говорят) человек снова заходит на форум. И каково же становится его разачарование, когда во всём топике ни оказывается ни одного ответа, похожего на то, чего он ожидал.

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

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

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

Чтобы создать макет сайта было бы желательно знать определенные условия и стандарты изготовления макетов. Вот главные из них:

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

2. Не стоит писать контент на эскиз сайта. Его можно заменить простыми горизонтальными линиями.

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

Теперь вспомним, что на сайте должны обязательно присутствовать следующие элементы:

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

Макет сайта с фиксированной ширинойМакет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800?600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Плюсы макета с фиксированной шириной

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

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

Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024?768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Минусы макета с фиксированной шириной

Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;

У пользователей с небольшими мониторами (640?480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;

Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;

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

Советы по макету с фиксированной шириной:

Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640?480 не приходилось прокручивать сайт по горизонтали для нормального чтения;

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

Адаптивный резиновый макетРезиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

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

Плюсы резинового макета

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

Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;

Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).

Минусы такого макета

Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;

Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.

Некоторые советы по использованию этого макета

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

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

Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800?600.

Расширяемый эластичный макетПри использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.

Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

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

Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши.

Минусы эластичного макета

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

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

Немного советов по эластичному макету

Если вы собираетесь верстать, используя эластичный макет, убедитесь, то он работает на маленьких мониторах. Иначе, зачем он вообще нужен?

Ограничьте размеры эластичного блока, определив размеры внешнего контейнера (используя резиновую или фиксированную ширину, т.е. создав гибридный макет). Например, #wrapper { width:60em; max-width:98%; }. Последователи «правильной идеологии» могут возразить, что это уже не будет истинно эластичным макетом, что он при этом ограничен или гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и прекрасна, но только не тогда, когда речь заходит о пользовательском удобстве (золотые слова!);

Помните, что IE 6 и меньше не поддерживают свойство max-width, убедитесь, что при задании максимально большого текст в IE не появляется горизонтальной полосы прокрутки на разрешении 1024?768. В любом случае, можете посмотреть мое решение для CSS Zen Garden. Следующим шагом может стать верстка уже для разрешения 800?600 с тем же условием. Как пример, можно посмотреть мою эластичную верстку сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, но и сейчас пример вполне рабочий.

Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план.

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

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

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

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

Разработка кода для сайта.

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

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

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

Исследования показали, что удивительно много людей страдает от частичной “цветовой слепоты”, которая не позволяет им различать определенные цвета, а это значит, что у них должна быть возможность выбирать цвета, которые они могут различать и которые при этом все равно будут довольно приятными на вид. Выбрав схему расположения элементов и цвета, которые будут использоваться, следует удостовериться в том, что сайт будет выглядеть одинаково во всех браузерах. Пару лет назад Internet Explorer (IE) был бесспорно доминирующим браузером среди пользователей Windows, и, разрабатывая технический сайт, ориентированный на Windows-разработчиков, можно было смело предполагать, что для просмотра сайта по большей части будет использоваться браузер IE, и, следовательно, разрабатывать и тестировать его нужно было только относительно IE. Однако сегодня среди пользователей Internet все более популярными становятся другие браузеры, которые к тому же доступны и для других операционных систем. Поскольку расчет делается не на узкий круг пользователей (т.е., не только на Windows-разработчиков, а на всех людей) и поскольку существуют и другие популярные браузеры помимо IE, обязательно необходимо удостовериться в том, что сайт будет работать хорошо с большинством популярных браузеров.

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

В худшем случае посещение такого пользователя будет представлять собой генерацию представлений страниц и, следовательно, просмотр баннеров. Поскольку терять посетителей никто не хочет, мы будем брать в расчет как Internet Explorer, так и Firefox. Процесс проектирования уровня пользовательского интерфейса не означает только написание HTML-кода для страницы; он также подразумевает разработку навигационной системы и обеспечение для Web-мастера или администратора сайта (если не конечного пользователя) возможности легко изменять внешний вид сайта, не редактируя сами страницы содержимого (которых очень много).

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

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

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

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

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

Этапы создания дизайна сайта.

1. Смотреть другие сайты.

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

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

2. Делать макет в карандаше.

Дизайн в карандаше делается примерно за один день, а если говорить реально, то за несколько часов. Работа в карандаше – это черновик, который вы сможете поправить, почеркать что-то, чтобы затем была возможность перерисовать все это в графическом редакторе.

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

3. Верстка в графическом редакторе.

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

4. Исправление сделанных ошибок.

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

5. Верстка дизайна в html.

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

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

Некоторые начинающие веб-студии заявляют, что они предоставляют на выбор клиенту три макета, какой больше понравится тот и возьмете. Я считаю, что это плохая практика: все три макета получаются или плохими или очень похожими друг на друга. Хотите получить три макета – закажите их 3 разным людям, а лучше разным компаниям. Потом можно будет выбрать тот, который нравится больше.

Советы при создании дизайна сайта.

Советы веб-дизайнеру

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

2. Не увлекайтесь графикой. Графика это хорошо, но ведь существуют и другие вещи. Поэкспериментируйте с цветными таблицами и CSS. Разгрузите ваш сайт и старайтесь придерживаться планки до 50kb на страницу.

3. Держите стиль. При создании дизайна пляшите от тематики. Есть такое понятие, как стиль. Он должен пронизывать весь сайт. Для корпоративных сайтов мягкий дизайн, для развлекательных веселый и обязательно для всех уникальный.

4. Дизайн не должен быть литым. Не сковывайте дизайном информативность сайта. Рано или поздно какую-нибудь менюшку уберут или добавят, а тексты поменяют.

5. Уделяйте внимание мелочам. Маркеры, полоски, значки и прочие мелкие элементы, готовьте с особой тщательностью. Подгоняйте их под общую картину и вы достигнете хороших результатов.

6. Удобная навигация — залог успеха. Пользователь не должен часами бродить по вашему сайту (хотя было бы неплохо…), это раздражает. Для небольших сайтов можно ограничиться навигационной полоской с выходами к основным разделам, а для сайтов с глубокой структурой стоит делать, что-то помощнее. Неплохо даже подумать о функции поиска.

7. Ваш браузер не единственный, разрешение экрана не уникально. Созданный вами сайт должен читаться при 256 цветах, при разных разрешениях ( 1024х768, 1280×1024 и др.) и пониматься двумя основными браузерами: Opera, FireFox.Также не забудьте про Internet Explorer, хоть он и считается самым ненадежным.

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

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

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

11. Точность — вежливость королей. Графический дизайн сайта должен быть подогнан с точностью до одного пикселя. Не ленитесь, пусть работы будет больше, но и эффект значительно солидней.

12. Авторские права не шутка. Не стоит воровать чужую графику. Во первых это не хорошо, а во вторых если не умеешь делать сам, то какой же ты дизайнер!

Советы веб-мастеру при разработке дизайна сайта.

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

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

3. Работайте в рамках дизайна. Дизайнер делает сайт (подробнее о создании сайта читайте здесь), а вы отвечаете за его работоспособность. Прежде чем, что-то реконструировать свяжитесь с дизайн-студией и согласуйте перемены с ней.

4. Отвечайте на все(!) письма посетителей. По своей работе вы наверняка получаете массу писем от пользователей с предложениями, замечаниями или жалобами. Не ленитесь, напишите ответ, пусть это будут примитивные фразы такие, как: «Большое спасибо» или «Мы это обязательно учтем». Сделав этот нехитрый номер вы 100% получаете постоянного посетителя, который к тому же приведет к вам всех своих друзей.

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

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

7. Никакой отсебятины. Если у вас новостной, информационный сайт, то старайтесь избегать предвзятости. Даже если вам не нравиться какое-либо событие не приписывайте к нему свеже придуманные факты. Пусть будет, как оно есть (AS IS:), а посетители и без вас во всем разберутся.

8. Ваша настольная книга — орфографический словарь. Старайтесь избегать ошибок и опечаток. Это настолько режет глаза и, так понижает солидность, что вам и в страшном сне не снилось. Возможно, стоит установить программу проверки орфографии или договориться с редактором.

9. ИМХО сабж рулез или пишите по-русски. Сленгу — нет! Мало того, что он не смотрится, так еще и часть ваших посетителей ничего не поймет. Конечно, слабенький жаргон типа: метр, прога или аська еще употребляемы, но закаленный фидошный сленг стоит исключить.

10. Не пишите чепухи. Не публикуйте на сайте сомнительную информацию или вообще полнейшую чушь. Пару раз прочитав липу посетитель в вас разочаруется и уйдет к вашим конкурентам. Ну, а если очень хочется, то вставляете подпись «Из непроверенных источников» и спите спокойно.

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

12. Будьте вежливы. Если вам в 101 раз пишут о какой-либо неполадке, которую вы уже устраняете, не стоит посылать автора письма в одно известное место, он же для вас старается. Черкните ему фразу «Спасибо, вы нам безмерно помогли» и всем будет приятно.

Советы заказчику дизайна для своего сайта.

1. Вам действительно нужен сайт? Прежде, чем поднимать на уши дизайнеров и программистов, тратив при этом немалые деньги, подумайте хорошенько зачем он вам. Возможно, что вам нужен простой e-mail.

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

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

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

5. Не работайте с не внушающими доверия студиями. Многие товарищи, чуть освоив свой Front Page (или, что там у них), быстренько клепают странички, называют себя Design Studio и ждут клиентов. Послушайте добрый совет — даже и не думайте связываться. Дизайнер должен уметь все делать своими руками и понимать, что он делает.

6. Одиночки — большая редкость. Дизайнеры одиночки очень редки (я имею в виду именно профессионалов). Справиться с сайтом в одиночку теоретически можно, но практически… С вами должна работать команда, в которой у каждого четко определенная роль.

7. Дизайнера не должны пугать такие слова, как: CGI, SSI и ASP. Если вы хотите получить по настоящему мощный, динамичный и информативный сайт, то простым HTML вы не отделаетесь. Погоняйте потенциального Веб-дизайнера на знание терминов и технологий. Отговорки типа: «это вам абсолютно не нужно» или «зачем такая роскошь» принимать не стоит. Дизайнер, как минимум должен свободно владеть HTML, JavaScript и CSS.

8. Позаботьтесь обо всем заранее. Готовый сайт еще не все Даже если он у вас на руках, вам надо позаботиться о куче вещей, таких например, как: доменное имя, хостинг, рекламные кампании и о многом другом.

9. Не сковывайте фантазию. Не бойтесь фантазировать. Хороший дизайнер может воплотить любую вашу мечту (и для этого есть все средства). Если ваш дизайнер заявляет, что не может работать на таком уровне, то скорее всего вы работаете с непрофессионалом.

10. Не надо довить на людей. Работа над сайтом очень трудоемка. На изготовление любой мелочи могут уходить часы. Не торте дизайнера! В противном случае вы рассчитываете получить блеклую штамповку.

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

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

1. Правильно выбирайте шрифты. Удачный выбор шрифтов — залог успеха.

2. Под крупным шрифтом располагается мелкий шрифт.

3. Под толстой линией рисуется тонкая линия.

4. Если вы хотите создать логотип только из шрифтов, то комбинируйте буквы логотипа со специальными символами.

5. Текст всегда смотрится только на цветном фоне.

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

7. Если вы что-то рекламируете, то используйте в тексте повторения.

8. Шрифт без засечек применяется только в заголовках.

9. Шрифт с засечками применяется при оформлении основного текста.

10. Чтобы создать иллюзию безразмерности, выносите ваши рисунки на самую малость за край полосы.

11. Служебные объявления всегда черно-белые. Не используйте в них бегущую строку.

12. Жирный шрифт и фотография — элементы одного дизайна.

13. Выравнивайте текстовые и графические объекты только одним способом, например, по центру.

14. Соблюдайте симметричность оформления графики и текста.

15. Изменяйте дизайн, не трогая основного стиля оформления вашего документа.

16. Текст над заголовками — всегда оформляется уплотненным шрифтом.

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

18. Применяйте принцип контрастности: на фоне текста, набранного светлым шрифтом располагаются жирные заголовки.

19. Заголовки оформляются одним шрифтом, а основной текст другим.

20. Чтобы текст хорошо читался, используйте широкие шрифты.

21. Если вы часто изменяете информацию, то используйте в оформлении шрифты, которые легко читаются.

22. Используйте подложки.

23. Дизайн заголовока, текста над заголовком и строки автора — всегда единый и гармоничный.

24. Строка автора набирается маленькими прописными буквами. Шрифт строки автора идентичен шрифту заголовка.

25. Шрифты должны сочетаться со всеми другими шрифтами вашего документа.

26. В одном документе используйте не более двух шрифтов.

27. Вставляйте в конец документа спецсимвол.

28. Цитата — внедренный текст. Шрифт цитаты идентичен шрифту строки автора.

29. Чтобы заголовок был заметным, оттените его или сделайте цветным.

30. Шрифт основного текcта должен гармонировать с шрифтом, которым оформлен заголовок.

31. Прочно привязывайте смысловую графику к соответствующему ей основному тексту.

32. Комбинируйте различные элементы дизайна.

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

34. Шрифт — это предмет искусства, а не набор символов. Все эти буквы рисовал художник.

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

36. Помните, что внешний вид вашего документа зависит от количества начертаний и формы шрифта.

37. Помните, что в Web-страницах используются только файлы графических форматов JPEG и GIF.

38. Графика в документе HTML должна быть небольшой, иначе, ваш сайт останется незамеченным.

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

40. Избегайте вложенных тэгов, то есть избегайте вставки в тэг других элементов HTML.

41. Выбирайте редактор таким образом, чтобы в нем была возможность присвоить унифицированный указатель ресурсов люблму объекту.

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

Профессиональные дизайнеры, еще советской школы, внимания не обращали на интернет. На курсах веб-дизайна учили чему угодно от html-верстки до настройки модема, но только не дизайну. А сам продукт работы веб-дизайнера сайт, был, по сути, продуктом в себе, «дизайном ради дизайна». Он мог быть красивым, классным, строгим, необычным, в общем, практически любым. Проблема была в том, что все эти качества проявлялись и реализовывались на стыке Эго заказчика и Эго дизайнера.

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

«Если я могу создать из ничего графический файл, значит я дизайнер» думали многие. До сих пор удивляюсь, почему большинство пользователей Word и других текстовых редакторов не называют себя писателями!

Тенденцию переломил все тот же Лебедев. Пожалуй, единственный на тот момент в России трендсеттер в области веб-дизайна, обратил внимание дизайнеров своими работами к интересам и нуждам конечных пользователей. С тех пор уровень российских веб-дизайнеров стал очень высоким. Появилось понимание целей и задач. Дизайн-процесс в студиях (где интуитивно, на собственных ошибках, а где на опыте коллег из полиграфии), приобрел вполне стройный вид, и работа для всех его участников стала более предсказуемой и понятной.

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

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

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

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

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

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

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

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

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

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

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

Для удобства понимания давайте разделим сайтостроителей на три большие группы.

1. В первую войдут индивидуалы-фрилансеры и небольшие веб-дизайнерские студии, только начинающие свой путь. Назовем их просто — «молодежь».

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

3. Наконец, к третьей отнесем известные компании, занимающиеся созданием сайтов лет семь–десять (а то и дольше) и годами присутствующие в различных рейтингах в диапазоне с первого и, например, по двадцатое место. Ну, а эти пусть называются в соответствии с опытом и заслугами — «мэтры».

Что движет ими, как они строят взаимоотношения с клиентами, как работают?

1. Веб студии «молодежь».

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

а) сами не знают, что хотят («хочу сайт не хуже, чем у других»)

б) не могут заплатить много (при этом о «много» понятия у всех разные).

«Молодежи» не остается ничего другого, как целиком и полностью «ложиться под клиента». Они мечтают о том моменте, когда наконец-то будет подписан акт приема-передачи, обязательства перед заказчиком будут выполнены (пусть в самом первом приближении) и взятки с них будут, что называется, гладки. Продукт, который они производят, и назвать-то продуктом нельзя. Почему? Потому что опыта у них нет, они создают сайты по своему усмотрению, ибо заказчик ничего им подсказать не может: сам «не в теме».

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

Продает клиенту, «ведет» его, а зачастую, и «дизайнерит», и верстает проект один и тот же человек. Делается продукт фактически на уровне телефонных переговоров и переписки между заказчиком и исполнителем.

Вы знали, что дела с сайтостроением обстоят плохо — но не догадывались, что настолько? Что поделаешь, практика — она всегда критерий истины. Даже такой горькой. Основная характеристика взаимодействия между клиентом и сайтостроителем-«молодежником»: двусторонняя очевидная некомпетентность. А если нет знаний и опыта ни с той ни с другой стороны, то нет и проблем.

2. Веб студии «крепкие хозяйственники».

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

Заказчики из этой ниши, как правило, уже имеют опыт сайтостроения. И, как правило, этот опыт негативен. Дело было так: на этапе становления бизнеса заказали у «молодежи» сайт по дешевке, вывесили в Сети. Сайт провисел год-два, контакты и заказы с него были единичными. Офлайновыми средствами бизнес продвинули, дела пошли лучше. Да еще вдобавок и маркетолог, скорее всего, сменился. Тут и вспомнилось всем о бесхозном сайте. Менять его надо.

А зачем менять? Каким конкретно образом? Чего от сайта ожидать? Кому работу поручить? И, поскольку подобное тянется к подобному, такой «средний» заказчик находит себе «крепкого хозяйственника» в разработке сайтов. В дело вступают менеджер по продаже, за ним — менеджер проекта. Главным аргументом в переговорах служит словесная конструкция вроде: «Мы уже работали с компаниями A и В, похожими на вас, и предложили им такие-то и такие-то решения, которые затем успешно воплотили на их сайтах; можно, конечно, воспользоваться еще вот этим и вот этим вариантами, но неочевидно, что результат вас удовлетворит»

3. Веб студии «мэтры».

Клиент иногда пытается возражать, но разработчик давит на него авторитетом. Благо авторитет у «крепкого хозяйственника» уже есть. Если же клиент продолжает возражать, то в ход идет тяжелая артиллерия, например: «В ответ на ваше замечание о том, что предложенный нами вариант A не годится, сообщаем, что есть еще варианты B, C, D, E и F. И если вы нам не доверяете, то выбирайте сами — но и вся ответственность будет уже на вас».

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

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

Проблема вот в чем: «крепкий хозяйственник» совсем недавно был «молодежником», а его заказчик из мелкого или среднего бизнеса еще совсем недавно торговал на колхозном. Иными словами, они оба в недавнем прошлом были «мелкими», и стереотип поведения «бедняков» — «не до жиру, быть бы живу» — у обоих сохранился.

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

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

Не сидел, тупо пялясь в экран и пытаясь угадать: а что же разработчики и хозяева сайта имели в виду, чего они от меня хотят прямо сейчас? Чтобы идея, заложенная при создании сайта, направляла посетителя на конкретное действие. Чтобы было взаимное действие, в обе стороны.

Дизайнерам важно понимать, что Интернет состоит из стандартных элементов, своего рода кирпичиков, которыми можно пользоваться при построении сайта.

Я думаю, что именно с этой точки зрения следует смотреть на доступные нам в Интернете «строительные кирпичики». Они не ограничивают ваш творческий потенциал; это всего лишь компоненты, из которых создаются сайты.

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

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

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

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

С шапкой обычно связаны следующие вещи:

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

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

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

Поиск. Поле поиска чаще всего располагается в шапке. Это вполне логично, ведь именно здесь находится основная система навигации.

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

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

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

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

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

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

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

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

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

Распространенные элементы нижних колонтитулов. В нижний колонтитул часто помещают:

- Сведения об авторских правах и ссылки на правовую информацию, например политику конфиденциальности.

- Копию основной системы навигации сайта.

- Полную или частичную карту сайта.

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

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

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

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

Основной проблемой web–сайтов является дизайн и удобство использования. В наше время работа дизайнера постоянно подвергается критике, и заключается непосредственно в решении поставленной задачи. Потребитель, зачастую не оценивает удобство пользования, а воспринимает работу по внешнему виду. Выглядит красиво — значит дизайн хороший, выглядит некрасиво — значит плохой.

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

Первым вопросом для рассмотрения будет навигация, ее структура и удобство использования. В статье выделены основные недостатки навигации.

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

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

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

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

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

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

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

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

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

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

 

Выбирая цветовое решения, важно не забывать следующее:

 

• 1. цвета должны соответствовать фирменному стилю компании (если имеется);
• 2. подбор цветов зависит от предпочтений целевой аудитории данного сайта;
• 3. не стоит использовать большое количество цветов, 2–3 достаточно;
• 4. важным аспектом также является цвет текста. Он необязательно должен быть черным, но
  должен гармонировать с основной цветовой гаммой и быть хорошо читаемым.

Существует несколько методов сочетания цветов:

• 1. метод использования близлежащих цветов в цветовом круге. Этот метод можно считать традиционным;
• 2. метод использования противоположных цветов (контрастность) в цветовом круге дает отличный результат;
  Его любят использовать различные дизайнеры, художники;
• 3. метод использования природных сочетаний цветов.

Так же важно учитывать, что некоторые люди (в том числе и пользователи Интернет) могут не различать цвета. Примерно 8% мужчин и 1% женщин страдают дальтонизмом. Чаще всего они не различают красный и зеленый цвета, но встречаются и редкие формы, когда не различаются желтый и синий, а также форма, когда человек все видит черно–белым. При выборе цветов и создании дизайна сайта необходимо подбирать цвета так, чтобы они были достаточно контрастными.

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

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

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

На основе анализа сайтов вебометрического рейтинга были выявлены следующие особенности:

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

– для большей динамичности на подавляющем большинстве сайтов используется JavaScript или его библиотеки;

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

– только 10% сайтов имеют версию для мобильных устройств и ни на одну из них нельзя зайти с персонального компьютера;

– 5% web-сайтов созданы с применением принципов адаптивного web-дизайна, хотя еще год назад ни один из проанализированных сайтов их не использовал.

Основные принципы проектирования адаптивного дизайна сайта.

1. Использование резинового типа макета (англ. fluid grid) – макета, в котором значение размера ширины родительского элемента (элементов) задаётся в процентах по отношению к разрешению монитора.

2. Резиновые изображения (англ. flexible images). Все изображения должны масштабироваться, исходя из предельно допустимого значения ширины. Оптимальным является их отображение в натуральную величину. При изменении пользователем окна браузера до размера менее самого изображения, оно автоматически уменьшается, чтобы вписываться по ширине в окно браузера наилучшим образом.

3. Использование media queries – правил CSS3, которые назначаются как атрибуты при вызове других правил из таблицы стилей, основанных на параметрах устройства вывода, таких как тип, ширина и высота окна браузера, разрешение, ориентация в пространстве.

4. Применение постепенного улучшения (англ. progressive enhancement). Идея состоит в том, что сначала создается простейшая разметка документа, которая корректно отображается даже в самых простых браузерах. Затем добавляются стили, интерактивность и прочее, используя каскадные таблицы стилей, JavaScript, SVG, Flash и все остальное, что можно вставить в страницу.

5. Проектирование для мобильных устройств с самых ранних этапов (англ. mobile first). Это подход, при котором проектирование сервиса начинается с мобильной версии, а не с версии для больших экранов, как это делается повсеместно.

6. Модульная сетка страницы – это невидимый «скелет» дизайна, система горизонтальных и вертикальных направляющих, помогающих сориентировать и согласовать между собой отдельные элементы композиции. Для генерации модульной сетки обычно используют так называемые css-фреймворки, которые созданы для упрощения работы верстальщика страницы, быстроты разработки и исключения максимально возможного числа ошибок вёрстки.

Проведя анализ статистики посещений пользователей существующего сайта и общемировой статистики популярных разрешений экранов , разработано 5 макетных сеток для наиболее типичных групп разрешений: менее 520 пикселей, от 520 до 800 пикселей, от 800 до 1000 пикселей, от 1000 до 1400 пикселей и более 1400 пикселей. После генерации модульных сеток созданы прототипы макетов страниц сайта для различных разрешений.

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

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