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

Расположение материала
Весь дизайн базируется на том, что Вы хотите представить – материал, разделы, дополнительные удобства – все это определяет будущий дизайн, потому…

1. Подготовка – это начало всех начал, не поленитесь и опишите, что Вы требуете от дизайна и создайте список из основных элементов, ради которых этот дизайн и создается. Главное в Вашем дизайне картинки? Хорошо, они должны хорошо просматриваться, занимать должное им место и не клеиться друг к другу.

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

3. Теперь представьте себя на месте посетителя, это обязательная стадия, можете даже попросить кого-то представить себе эту ситуацию, понравится ли навигация, расположение материала и так далее.

4. Экспериментируйте, не бойтесь и делайте несколько вариантов, и Вы обязательно найдете идеал.

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

Графика

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

1. JPEG или Gif? Старый вопрос. Еще раз для тех, кто в танке – JPEG для графики (картинки, иллюстрации с большим количеством цветов).
Gif для всего того, что имеет ограничение по количеству этих самых цветов (в формате всего 256 цветов) и особенно этот формат очень хорошо подходит для текстов – лучше пусть картинка будет весить побольше, но текст в Gif’е будет читаться легче. JPEG имеет более высокую степень компрессии изображения, особенно в больших изображениях. Gif формат анимационный, баннеры делаем в нем. Gif может использовать прозрачность, а это иногда тоже имеет значение.

2. GIF формат полезен иногда (interlaced вариант) тем, что большая картинка появляется постепенно, все улучшая и улучшая видимую картинку, иногда это лучше, чем смотреть долго на пустое место.

3. На PC мониторах изображение темнее, чем на MAC мониторах, потому иногда используют специально разработанную 216 цветовую палитру при создании макета.

4. Не забывайте указывать размеры графики на сайте – это поможет Вашему сайту не напрягать пользователя беганием за скачущими картинками и текстами.

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

Размещение текста

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

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

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

3. Ведите пользователя постепенно, шаг за шагом указывая ему что где нужно вводить, заполнять и так далее, как бы отвечая ему на вопрос “А что дальше”

4. Не делайте грандиозных форм – пусть процесс заполнения (если он нужен) будет проще и удобнее.

5. И еще раз проверьте качество текста – грамматику, пунктуацию, понятность написанного.

Навигация

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

2. Как всегда используйте Вашу смекалку и креативность – не делайте все серым и одинаковым, создайте изюминку.

3. Используйте понятные тексты, читабельные и удобные кнопочки.

4. Установите направленность своего сайта, зачем он нужен? От этого и шагайте дальше – сделайте акцент на тех элементах, которые имеют основное значение.

5. Экспериментируйте с графикой, добавьте звук, анимацию, но не переусердствуйте – всего должно быть в меру.

Анимация

Анимация уже давно стала стандартом многих сайтов – благо Flash технология развилась вполне хорошо.

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

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

3. Если говорить о технической стороне – не поленитесь – найдите уже готовые примеры прелоадеров на флэше, человек должен знать, сколько осталось ему ждать.

4. Добавьте в анимацию немного звука и Вы будете приятно удивлены эффектом.

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

Интерактивность

Очень полезная деталь, а иногда и обязательная.

1. Javascript, php и так далее помогут обновлять содержание страниц без Вашего вмешательства.

2. Часики, игрушки, циферки – все это привлекает пользователя, но, опять же, всего в меру.

3. Используете флэш? Так используйте его в полную силу – только интерактивность – тут нажать, здесь навести и так далее.

4. Людям нравится, когда о них помнят и чтут их мнение – можно поставить голосование, поприветствовать его и напомнить, что с времени его последнего посещения много чего изменилось.

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

luxuru.com

By Ruslan Novikov

Интернет-предприниматель. Фулстек разработчик. Маркетолог. Наставник.