Beauty – ретушь для начинающих при помощи Photoshop.

Beauty – ретушь для начинающих при помощи Photoshop.

Эффект голограммы на фотографии.

Эффект голограммы на фотографии.

Создание портрета при помощи шрифтов.

Создание портрета при помощи шрифтов.

Создаем красивую оригинальную шапку для блога.

Создаем красивую оригинальную шапку для блога.

Необычный эффект глаз при помощи Photoshop.

Необычный эффект глаз при помощи Photoshop.

Создаем макет сайта о звездах и знаменитостях.

Создаем макет сайта о звездах и знаменитостях.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Создание текстового логотипа в стиле Ретро при помощи фотошоп.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок ретуши фото. Создаем потрясающий портрет в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию летнего водного макета сайта в Photoshop.

Урок по созданию футуристического логотипа в фотошоп.

Урок по созданию футуристического логотипа в фотошоп.

Создаем дизайн телефона на Android в Photoshop.

Создаем дизайн телефона на Android в Photoshop.

Создание макета сайта в стиле минимализма.

Создание макета сайта в стиле минимализма.

Как создать пиксельную кнопку в фотошопе

Как создать пиксельную кнопку в фотошопе

Создаем макет сайта для службы знакомств.

Создаем макет сайта для службы знакомств.

Создание RSS иконки.

Создание RSS иконки.

Урок по созданию простого  и современного  макета для сайта.

Урок по созданию простого и современного макета для сайта.

Графика для сайта.  Рисуем иконку на сайт.

Графика для сайта. Рисуем иконку на сайт.

Урок по созданию зимнего текста.

Урок по созданию зимнего текста.

Урок по созданию красивого новогоднего макета в фотошоп.

Урок по созданию красивого новогоднего макета в фотошоп.

Псевдо HDR.

Псевдо HDR.

Как создать основу для рекламы профессиональной косметики для волос.

Как создать основу для рекламы профессиональной косметики для волос.

Создание эффекта рисунка на фотографии.

Создание эффекта рисунка на фотографии.

Создаем макет сайта, продающий програмное обеспечение.

Создаем макет сайта, продающий програмное обеспечение.

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта-портфолио при помощи текстуры "джинс".

Урок по созданию макета сайта для гостиниц и ресторанов.

Урок по созданию макета сайта для гостиниц и ресторанов.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Создаем креативный макет для продажи косметических средств с помошью Photoshop.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию фотореалистичного макета сайта для его дальнейшей верстки CSS/XTML.

Урок по созданию яркого красочного дизайна сайта.

Урок по созданию яркого красочного дизайна сайта.

Создание простого и стильного макета сайта.

Создание простого и стильного макета сайта.

Создаем макет блога в фотошоп.

Создаем макет блога в фотошоп.

Создаем оригинальный чистый стиль для сайта.

Создаем оригинальный чистый стиль для сайта.

Создаем профессиональную панель навигации для сайта.

Создаем профессиональную панель навигации для сайта.

Рисуем милую девчушку-смайл.

Рисуем милую девчушку-смайл.

Урок по рисованию прохлаждающегося солнца.

Урок по рисованию прохлаждающегося солнца.

Фантастический эффект фотографии.

Фантастический эффект фотографии.

Создание приятного макета сайта портфолио.

Создание приятного макета сайта портфолио.

Создание макета сайта для портфолио в стиле Веб 2.0

Создание макета сайта для портфолио в стиле Веб 2.0

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию стильного рекламного банера с помошью Photoshop.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок по созданию профессионального бизнес-шаблона сайта с помощью фотошоп.

Урок рисования реалистичного динамика.

Урок рисования реалистичного динамика.

Создаем стильный коллаж.

Создаем стильный коллаж.

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок по созданию макета дизайна сайта в стиле Веб 2.0

Урок создание эффекта металлического текста

Урок создание эффекта металлического текста

Небесный коллаж

Небесный коллаж

5 правил веб-дизайна

Tags: дизайн сайта | создание сайта

pravila_web_dizaina

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

-простота чтения;
-простота навигации;
-простота поиска;
-согласованность в макете и дизайне;
-высокая скорость загрузки;


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

Правило 1. Простота чтения.

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


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


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


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


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


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


Правило 5.Быстрая загрузка.
     Большинство из посетителей сайтов желают, чтобы страница грузилась не дольше 30 секунд при модемном подключении. Ниже приведены несколько общих рекомендаций, позволяющих ускорить загрузку страницы.
     Минимум анимации. Применяйте анимацию только для привлечения внимания к самым главным разделам сайта
     Следуйте правилу KISS («keep it simple ,stupig» - «будь проще, дурень») Всегда старайтесь придерживаться максимальной простоты во всем. Ведь в конечном итоге цель вашего сайта донести до пользователя ту или иную информацию, а не предложить полюбоваться дизайном.
     Отображайте  товары в  виде уменьшенных изображений, миниатюр. Страница «Товары» с миниатюрами загрузится быстрее, чем с полноэкранными картинками.
     По возможности используйте одинаковые графические элементы на всех страницах сайта. Например, логотип сайта, размещенный на всех страницах ( с гиперссылкой на главную страницу) будет способствовать навигации, брендингу, а так же поможет пользователю лучше запомнить сайт, на котором он находится. При этом изображение логотипа загружается только один раз, так как оно будет сохранено в КЭШе.


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

AddThis Social Bookmark Button
 

Добавить комментарий


Защитный код
Обновить

поиск
RSS
Что такое карта сайта?

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

кол-во просмотров11347
Подробнее...

Модульная сетка.

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

кол-во просмотров20805
Подробнее...

Стили сайтов. Промостиль.

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

кол-во просмотров6671
Подробнее...

Основные правила набора текста.

Ниже приведены самые важные правила набора текста применимые к веб-дизайну.             1. Не ленитесь! Всегда после набора потратьте 10 минут на...

кол-во просмотров11883
Подробнее...

Правила написания постов в гостевых.

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

кол-во просмотров45781
Подробнее...