Сайт для маркетинговой фирмы 'FineMinds'
Смоленский гуманитарный университет
ТЕМА: Сайт для
маркетинговой фирмы "FineMinds"
Исполнитель: Кубракова Евгения
Научный руководитель:
Ирина Александровна Бирюкова
СМОЛЕНСК 2016
Содержание
Цели и Задачи сайта
Ход работы по созданию сайта
Вывод: Почему мой сайт - лучший вариант?
Цели
и Задачи сайта
Определение компании:
1. Чем она занимается?
Эта фирма занимается маркетинговым продвижением сайтов:
оформление, рекламные компании, копирайтинг.
. Какая ценовая категория услуг?
В среднем 14 000 - 70 000 р.
Целевая аудитория:
Взрослые люди - предприниматели, со среднем и высоким уровнем
дохода. Как мужчины, так и женщины. Которым нужно оформление, сайт или реклама
для продвижения собственного проекта или компании. Преимущественно это жители
стран бывшего СССР, русскоговорящие люди.
Назначение и цели сайта:
повышение узнаваемости компании;
продвижение услуг через интернет;
работа с удаленными клиентами;
Сайт должен демонстрировать полный спектр услуг компании, и
привлекать внимание для сотрудничества!
сайт продвижение целевая аудитория
Ход работы по
созданию сайта
"МЕНЮ"
За основу сайта я взяла уже готовый шаблон под названием
"marketingwebtemplate" уже с некоторыми готовыми стилями и блоками. В
макете был блок (<div>
Дизайн будет в черно-белых тонах с добавлением светло
коричневых элементов в изображениях и в текстах.
Колонки объединены блоком с стилем (классом) page - ширина
блока 960рх, margil слева и справа стоит на "авто", overflow: hidden
Далее в колонке-меню вставляю блок с картинкой логотипом на
прозрачном фоне (сделано ранее в фотошопе).
Под логотипом я сделала свои пункты меню (переименовываю, те
что уже были в макете и добавляю ешё пару своих). Каждый пункт - отдельный
блок:
· Главная
· Компания
· Наши услуги
· Портфолио
· Контакты
· Наш блог
внизу блок "подписка на новости" и под ним форма
для ввода своей почты. Тег, по которому при клике надпись "введите ваш
электронный адрес" исчезает, я нашла в сети.
Подсказка в поле получилась следующим образом:
<input type="text" onClick="this. value='';
" onFocus="this. select ()" onBlur="this. value=! this.
value? 'Введите Ваш электронный адрес': this. value; " value="Введите
Ваш электронный адрес">
Далее идет блок иконок соц сетей. Класс "connect":
padding: 34\48\18
Далее в этот блок вставляю 3 иконки. На примере иконки
фейсбук: создаю правило #facebook задаю размер блока 37х37 рх; display inline
block,
на фон (background-imeges) ставлю нужное мне изображение
круглой иконки в png.
Далее я на основе этого правила создано правило #facebook
hover и вставляю туда на background такую же картинку только более светлую.
Применяю к тому же блоку. Таким образом, при наведение курсора на иконку она
будет становится темнее. Далее вставляю гиперссылку при клике на изображение.
Иконка готова. То же самое делаю с остальными 2мя.
Название для моей компании выдуманное, поэтому я конечно не
нашла в фейсбуке и других соц сетях странички дизайн компании с таким именем.
Но нашла музыкальную группу с таким названием. Что бы показать вам, как
работают иконки, я вставлю ссылки на их странички.
Страница "ГЛАВНАЯ"
Переходим в колонку с права - делаю заголовок.
Сохраняю и делаю копии этой же страницы, под разными
названиями.
Теперь получилось 6 страниц с одинаковым меню.
Связываем их, через тег указывая адрес. Пример:
<a href="about.html">КОМПАНИЯ</a>
На каждой странице выделяем в меню название этой страницы
назначая ей>
Возврашаюсь к странице "главное" Пишу заголовок.
Задаю шрифт заголовков; Lucida Grande, Lucida Sans
Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif размер 18
H2; Impact, Haettenschweiler, Arial Narrow Bold,
sans-serif, цвет #7d7d7d размер 24.
Далее блок обычного текста Lucida Grande, Lucida Sans
Unicode, Lucida Sans, DejaVu Sans, Verdana, sans-serif, размер 14.
Вставляю картинку
Заголовок h3
Обычный текст
Внизу вставляю блоки с картинками они ведут на страницу
Услуги Снова заголовок h3
Вставляю блок в катором будет 3 вертикальных блока с
картинками - скринами сайтов и подписями и кнопко "подробнее". На
каждый такой блок с картинкой применяем стиль section: На бекграунд ставится
картинка с тенью, ширина блока 200, отступы справа 32. выравнивание текста по
центру. Под каждой картинкой таким же способом как кнопки в меню, делаю кнопку
"подробнее". Она должна перенаправлять на страницу
"услуги." К ним применяем селектор section ul li a делаем текст
темным. По аналогии как мы делали с иконками соц сетей создаем еще один
селектор с hover в конце и делаем текст светлее. Таким образом при наведении
курсора и нажатии буквы становятся темными. Картинки и кнопки перенаправляют на
страницу "услуги".
Страница "КОМПАНИЯ"
Заголовок
Блок с картинкой
Текст
добавляю блок с заголовком h4 назначаю стиль ширина 665,
отступы 21 добавляю на фон специальную картинку делаю несколько таких блоков:
заголовок, текст, разделитель.
Последний блок: ввожу заголовок H6 размер 16 цвет тот же
Страница "НАШИ УСЛУГИ"
Делаю заголовок h3
далее добавляю блок с заголовком h4 - разделитель
и делаю в правом верхнем уголке блок с классом navigation
(padding 32 10 22) и внутри 3 блока с классом selected () на
фон ставлю специальные "кнопки", сделанные в фотошопе, скругление 7.
По той же схеме, что и иконки соц сетей мы делаем на каждую иконку два стиля
(светлый фон темный текст, темный фон светлый текст), для того что бы светлая
кнопка была когда НЕ активна и темная - когда активна.
А так же на кнопку дизайн ставим тег класс
"selected", как в меню, что бы выделить страницу на которой мы сейчас
находимся. Страниц ОПС и Копирайтинг я не делала
Далее я делаю 3 горизонтальных блока с тегом-контейнером уже
внутри каждого блока, блок с картинкой (ширина 251, отступ 29, 35) и блок с
текстом (ширина 400, отступы сверху и снизу 20)
СТРАНИЦА "ПОРТФОЛИО"
Снова делаю кнопки в правом верхнем углу, к каждой применяю
вначале селектор portfolio navigation li a, где отстыпы 12 0 12, цвет #7f7f7f.
Далее уже другой: меняем цвет текста, отступ 6, скругление 7, ставим на
бекграунд картинку темнее. Меняю название кнопок. По клику на кнопки галерея
должна менятся на галерею с сайтами или банерами соответсвенно.
Но пока вставляю ссылки на страницу "услуги".
Делаю блок со стилем "portfolio"отступы 0, 11,40 рх
Галерея - 12 блоков: в каждом блоке картинка с логотипом и
текст. Применяю класс span на кнопки "подробнее". По той же схеме как
и такие же кнопки на странице "главная", они темнеют при наведении на
кнопку курсора.
Страница "КОНТАКТЫ"
Вставляю заголовок и разделитель.
Блок с классом контакт: отступы 0: 0: 575 рх
Внутри этого три блока с текстом.
Последнему присваиваем гиперр ссылку на страницу "новое
письмо" в майле.
В макете сайта уже была форма для отправки письма. Я меняю
надписи и шрифт и меняю кнопку "sent" на ту которую я сделала на
русском. Для этого в селекторе submit2 меняю изображение на бекграунде.
Страница "БЛОГ"
Пишу заголовок, вставляю картинку, блок обычного текста, блок
с заголовком h6 делаем для него отдельный селектор, цвет #997352, шрифт такой
же как и в тексте, но размер 16, отступ слева 21, далее чередую заголовки -
вопросы и обычный текст. Внизу я делаю три блока div. В каждом заголовок класса
H3
и маленькие блоки с текстом а и span, селекторы
соответственно названию, а - текст с гиперссылкой, span текст шрифтом
Conv_Muli-Regular цвет #7d7d7d
На этом создание сайта завершено.
Вывод: Почему
мой сайт - лучший вариант?
С одной стороны сайт кажется не сложным. Однако, шаблон сайта
выполнен в соответствии с современными веяниями. Лаконичный дизайн и приятные
цвета позволяют легко вникнуть в суть при просмотре страницы. Я старалась
делать акценты в нужных местах, так что бы было приятно смотреть. Удобное, на
мой взгляд, расположение блоков, помогает получить в итоге максимально
эффективный ресурс, который будет привлекать внимание пользователей к
определенной услуге, увеличивая количество доходов этой компании!