Все для Ucoz на сайте ScripTiX
Приветствую Вас Вебсерфер
Меню сайта
Категории каталога
Скрипт для сайта Ucoz [73]
Шаблон для сайта Ucoz [29]
Софт для Вебмастера [6]
Статьи, гайды и обучалки для вебмастеров [9]
Полезные советы для сайтостроителей
Скрипты от ScRipTiX Team [3]
Наши скрипты
Наш Мини-чат
Наш опрос
Что вы лучше знаете ?
Всего ответов: 1000
Главная » Все для uCoz » Статьи, гайды и обучалки для вебмастеров

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

Использование сетки
Начнем по-порядку, а именно с выравнивания элементов, то есть построения сетки.
Перед её использование лучше активировать вид линейки (если, конечно, он уже не активирован), нажимаем CTRL+R, теперь у нас есть вид линейки, нажимаем два раза на шкалу и выбираем пиксели, так в построении макета будет намного удобней. Для создания сетки вы можете нажать на шкалу, и продолжая удерживать вести направляющую в нужное направление, направляющие сетки будут "прилипать" к элементу выбранному в панели слоёв и наоборот, элемент будет прилипать к сетке, для более точного построения можно нажать (просмотреть -> новая направляющая).

Сортировка по папкам
Элементы выровнены, теперь для облегчения жизни верстальщика (ну или вас самих), нужно распихать все слои по полочкам и дать им имена, не стоит этим пренебрегать, иначе потом сами запутаетесь, и будет невесело все разгребать =). Выделяется три основных папки, это header, body и footer, в них вложены остальные папки, такие как меню, блоки, вид материалов и т.д. Каждый графический элемент должен находиться в своем "квадратике" , то есть к примеру, рисуем поиск, создаём папку кнопка и папку форма ввода, в папке кнопка создаём ещё папки с кнопкой при наведении, активной кнопкой и т.д.

Мелкие детали
Теперь о мелочах в макете. Очень часто бывает такое, что весь дизайн может поменяться при добавлении какой-нибудь небольшой детали. Некоторые совсем их не прорисовывают, макет должен быть максимально приближенным к финальному результату. Обязательно показывайте цвета ссылок: обычные ссылки и ссылки при наведении, просто, я считаю, что гораздо легче подобрать цвета в фотошопе заранее, чем уже потом подбирать их при вёрстке. Кроме того, используйте различные иконки, не можете сами, откопайте что-нить в интернете, но не перетрудитесь, ибо можете все испортить и будет у вас мусорка, а не шаблон =).

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

Шрифт
Основной шрифт текста везде желательно Arial или Tahoma, ставим его в фотошопе на 12px и метод сглаживания устанавливаем на "нет", но в тексте вы можете использовать любой из стандартных шрифтов, главное чтобы он воплощал ваши дизайнерские идеи.
Посмотреть стандартные шрифты можно в гугле, введя "стандартный набор шрифтов windows". Не следует делать слишком большой шрифт, это, кстати говоря, одна из основных ошибок неопытных, незнающих или начинающих дизайнеров.

Выше были описаны основные аспекты по теме создания правильного макета, а дальше, вы должны знать - ограничивает вас только ваша фантазия!
Спасибо за внимание)



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


Категория: Статьи, гайды и обучалки для вебмастеров | Добавил: STALKER (06-10-10)
Просмотров: 3810 | Рейтинг: 4.2/5 |
Интересные материалы:

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
AdminUPro
Админ панель - AdminUPro v1.1
новая версия
добавлены новые функции
Скачать AdminUPro v1.1
Поиск
Друзья сайта

Copyrights© 2017
Хостинг от uCoz
Designed by Grigoruk Bogdan