среда, 16 февраля 2011 г.

Как смешать простой макет сайта с фоном, фотографиями и шаблонами

Как смешать простой макет сайта с фоном, фотографиями и шаблонами

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




Шаг 1 - Создание простого макета


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

Шаг 2 - Заполнение 

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

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

  

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

Страница выглядит ОК, но ничего запоминающего в ней нет. Как же так? Исправляемся!

Шаг 3 - Полирование и добавление стиля

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


Шаг 4 - Добавление фона


Ну и как Вам? Продолжение следует...

8 коммент.:

Linux комментирует...

Неплохо, спасибо.

Valentine комментирует...

интересная статья, спасибо

nattfodd комментирует...

Интересно. Жду продолжения.

reimu комментирует...

отлично

Rockwell комментирует...

Сохронил, очень интересно

torchin комментирует...

полезно, ждем продолжения

Алекс комментирует...

благодарю за статью. обязательно опробую при необходимости

BenJah комментирует...

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

Отправить комментарий

каталог блоговКаталог блогов Blogdir.ru Web Design Web Design Blogs