Дизайн темы под Wordpress
Задача: Нарисовать макет дизайна в psd формате.
1 страницу: вид со списком статей, например — любую рубрику с сайта,
2. форму комментариев (страница статьи). Например: http://oriflame100.ru/category/biznes-oriflame
Движок (CMS) — WordPress, следует учитывать ограничения.
Что требуется:
1. Адрес сайта: oribox.ru
2. Структура сайта: шапка + центр + подвал + правое и левое меню.
3. Вид сайта: фиксированный – 1000 px
4. Две колонки меню: левое и правое по 180-190 рх.
5. Размер контентной части – 620-640px.
6. Меню дополнительное в шапке или сразу под шапкой и дубль в подвале:
Главная
Контакты
Моя визитка
Регистрация Орифлэйм
Экспресс заказ
Видео Орифлэйм .
( Предусмотреть возможность добавления и изменения страниц.)
7. Шапка.
— В шапке слева вверху красиво написать название домена oribox.ru. Ниже – эмблема ( логотип ) компании ORIFLAME, а под ней слоган : Воплощайте свои мечты вместе с ORIFLAME!
- В шапке справа вверху красиво написать: Сайт независимого консультанта ORIFLAME. Ниже – тел. + 7 (999) 123-45-67; еще ниже Ирина; еще ниже г.Екатеринбург.
Написать обычным шрифтом, чтобы потом можно было в верстке менять .
8. Центральная часть (блоки, перечисление статей).
— Заголовок, выделяющийся как заголовок;
— Картинка слева и пару абзацев текста огибающих ее;
— Принадлежность к рубрике (категории);
— После текста кнопки «Читать далее» и «Комментарии» + количество;
— Сделать 3-4 блока на странице;
— Визуальное отделение блоков статей друг от друга в списке;
— Под блоками навигация по страницам 1,2,3…
9. Левый сайд бар - это основное меню сайта. Обрамить рамочкой. Предусмотреть возможность менять расположение блоков, названия блоков, чтобы управлять через виджеты.
Два вида оформления блоков с названием, без названия.
Правый сайд бар - это каталог, следующий каталог, каталог Wellness, акции, баннеры.
Блок подписки на рассылку, обыграть дизайнерски интересно, красиво.
Блоки центральной части и в сайт барах должны быть обрамлены рамочкой.
10. Подвал:
— Дубль меню верхнего (дополнительного), визуально оформить по другому, возможно простым текстом с ссылками;
— Копирайт ;
— Счетчики посещаемости кнопки;
— В подвале повторить имя и телефон.
— Обязательная фраза «Копирование материалов сайта разрешается только при указании работающей ссылки на сайт http://www.oribox.ru. При создании сайта частично использованы материалы с официального сайта компании Орифлэйм, http://www.oriflame.ru.
А так же в подвале можно использовать картинку с продукцией Орифлэйм.
(Учесть возможность изменения или добавления текста в подвале).
11. Дополнительные пожелания:
- Сайт должен быть светлым, стильным, элегантным, без излишеств, не перегруженный. Использовать пастельные тона: светло- светло зеленый цвет, светло бежевый.
Перед подвалом (или в нем?) кнопка «Наверх» в стиле сайта.
12. Оформление по стандартам юзабилити:
— Ссылки должны быть правильные - синеватые ( голубоватые), подчеркнутые, при наведении меняют цвет;
— Шрифт НЕ мелкий;
— Цвета не раздражающие, не темные;
— Маркированный список сделать в виде мини иконок, а не стандартных черных кружочков. Иконка в тему дизайна;
— Учесть постраничную навигацию 1 2 3 4…;
— Классические формы ввода данных (окантовка у окна), чтобы было понятно, в какие окна вводить имя, е-мейл и т.д.;
— Текст разбивать на абзацы и нормальный между строковый интервал делать, чтобы все легко читалось, то же самое касается маркированных списков и т.д.;
— Цвет фона и текста подобрать классический, чтобы легко было считывать информацию;
— НЕ делать слишком ОГРОМНУЮ шапку и подвал.
Сайт, который мне идеально понравился и на него равняться во всех отношениях: http://www.oriflame100.ru (сделать , оформить практически все как там, только в другой цветовой гамме под меня).
Вот еще сайты, которые понравились:
http://www.allaradio.ru - это сайт, чтобы посмотреть, какой узор на фоне можно сделать.
Сайты, которые НЕ ПОНРАВИЛИСЬ:
http://www.oriflame.blister.ru
На выходе сделать psd и jpg формат готового макета + файлы нестандартных шрифтов, если они используются, но лучше избегать потребности в нестандартных шрифтах.