Открытая группа
9494 участника
Администратор Minisite

←  Предыдущая тема Все темы Следующая тема →
пишет:

Мастер-класс по заполнению сайта. Шаблон №5

Продолжаем серию уроков по заполнению мини-сайтов. Сегодня мы потренируемся на шаблоне №5. Это «коварный» шаблон. Ведущее место на сайте занимает довольно большая фотография, от правильного размещения которой зависит все восприятие сайта.

Рис. 1. Шаблон 1. Блок ФИО слева.

Главная фотография

Как избежать ошибок при размещении фотографии? Некоторые моменты мы обсуждали на прошлых уроках, но повторенье, в данном случае, лишним не будет.

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


Рис. 2. Длинное фото. Не все посетители сайта будут прокручивать 3 экрана вниз.

2. Фотография должна быть хорошего качества и оптимального размера (1000 пикселей по ширине). Если вы загрузите картинку-аватарку 100х100 пикселей, она будет размыта. Это придаст сайту неряшливый, непрофессиональный вид.

0x01 graphic
Рис. 3. Маленькая картинка растянется по ширине блока.

3. Поверх изображения накладывается информация: ФИО, статус и должность. На некоторых фотографиях с пестрым фоном это блок может потеряться. Также текст будет плохо читаться на выбеленном фоне (если у вас засвеченная фотография с какого-либо края).

0x01 graphic
Рис. 4. Из-за пестрого фона ваше ФИО и другие данные будут едва заметны.

0x01 graphic
Рис. 4. Больше всего на белом фоне пострадает статус - он будет нечитаем.

4. Старайтесь, чтобы блок с ФИО не перекрыл значимые объекты на фотографии, например, ваше лицо.


Рис. 5. Значимые объекты не должны перекрываться текстом.

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

0x01 graphic
Рис. 6. Вот так гораздо лучше!

Контакты и Ссылки

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

Не пишите длинные подписи к ссылкам, передайте суть в двух-трех словах.

0x01 graphic
Рис. 7. Подбирайте тексты по объему.

Обо мне

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

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

0x01 graphic
Рис. 8. Напишите что-нибудь о себе.

Фотогалерея

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

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

0x01 graphic
Рис. 9. Часть фигуры будет скрыта от посетителя сайта.

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

0x01 graphic
Рис. 10. Переместите рамку. Если потребуется, можете уменьшить рамку, потянув за уголок.

Вот что у нас получилось в конечном итоге:

0x01 graphic

 http://repin.minisite.ru

 

Все уроки размещены на нашем сайте. Перейти>>

 

Внимание! Напоминаем, что Minisite.ru - сервис персональных визиток, которые предоставляются бесплатно. Сайты фирм будут блокироваться. Создать сайт фирмы вы можете с помощью сервиса http://site4sms.subscribe.ru (предоставляется за абонентскую плату).

Это интересно
0
 

09.12.2011
Пожаловаться Просмотров: 4109  
←  Предыдущая тема Все темы Следующая тема →


Комментарии 1

Для того чтобы писать комментарии, необходимо