Как сделать макет сайта

Главная » Etapy-sozdaniya-sajta » Sozdanie-maketa-sajta

Макет сайта: создание, виды, вёрстка.

Автор: Александр Побединский

Создание макетов для сайта очень трудоёмкий процесс. Конечно можно сделать всё просто (и так делают многие) взять готовый макет и немного поменяв стили, картинки выложить в сеть. Но что делать, если у вас нет готового макета. Правильно нужно сделать его с нуля.

Так как же происходит создание этого самого макета? Вы часто в сети можете видеть универсалов, которые одновременно являются как веб-дизайнерами, так и разработчиками, но по моему мнению это не совсем правильно. Да, веб-дизайнер может иметь представление о вёрстке сайта (и входе своей работы он всегда будет сталкиваться с какими-то вопросами по вёрстке), но он прежде всего должен быть дизайнером, а не разработчиком сайтов. Обычно каждый выбирают отдельную профессию (надеюсь вы понимаете о чём я говорю).

Немного отвлеклись от темы ну не суть. Так вот сначала создаётся ТЗ, по которому веб-дизайнер рисует макет сайта. После нарисованный макет верстается веб-верстальщиком, затем программисты наполняют его программной частью и поддержкой. В заключительной части готовый сайт, созданный по макету сдаётся заказчику (возможно я что-то написал не верно, так как не работаю в веб-студии или в какой-то группе, можете меня поправить если что). Стоило ещё сказать верстальщик обычно работает с psd-макетом. Это формат файла сделанный в фотошопе.

Виды макетов

Так какие же основные виды макетов сайта бывают? Многие из вас наверное слышали такие понятия, как фиксированный и резиновый макеты. Фиксированный макет обычно состоит из колонок фиксированной ширины, заданной в пикселях:

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

А также для навигации — ширину и обтекание блока справа:

Для колонки статьи я указал отступ, равный ширине колонки с навигацией + 10px от самой колонки. Результат можно посмотреть здесь: https://jsfiddle.net/nightgremlin/feydp1hz/


В резиновом макете колонки задаются не с фиксированной шириной (чаще всего ширина задаётся в процентах):

Код html я оставил без изменений. В результате у нас получилось вот что: https://jsfiddle.net/nightgremlin/feydp1hz/1/.

Подводя итог нужно отметить, что при использовании адаптивной верстки макет сайта может меняться.

Как сделать выпадающий список меню



По одежке встречают не только людей, но и сайты. Одежкой сайта является его дизайн. Качественный и привлекательный дизайн ресурса производит благоприятное впечатление на пользователей, обеспечивая тем самым их лояльность и готовность уделить свое время дальнейшему просмотру.

Создание макетов интернет-сайта

Кроме качества важна оригинальность и уникальность дизайна. Изъезженные темы отталкивают посетителей. Но разработка уникального дизайна стоит дорого. Именно поэтому многие начинающие web-мастера задаются вопросом о том, как нарисовать дизайнсайта собственными руками.

Вам понадобится

  • — карандаш;
  • — лист бумаги;
  • — редактор растровой графики GIMP или Photoshop;
  • — опционально: редактор векторной графики (например, CorelDraw);
  • — опционально: среда 3D-моделирования (3DStudio, Blender);
  • — современный браузер;
  • — доступ в интернет.

Инструкция

1

Разработайте концепцию дизайна сайта. Определитесь со стилем, цветовой схемой, компоновкой страниц (размером шапки сайта, расположением меню, блоков текста, изображений). Хорошо, если в основе концепции дизайна будут лежать оригинальные идеи. Но при их недостатке можно черпать вдохновение в ходе анализа уже существующих решений. Например, просматривая каталоги тем оформления популярных CMS. Результатом работы может стать эскиз страницы сайта, выполненный карандашом на листе бумаги с указанием зон фиксированных и варьирующихся размеров.

2

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

3

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

4

Нарисуйте дизайнсайта. В документ, содержащий заготовку шаблона страницы сайта в графическом редакторе, добавьте прозрачные слои. Выделите и залейте в них области, соответствующие фону страницы. Заполните области с градиентной заливкой и периодическими текстурами. Вставьте логотип, статические изображения, иконки. Очертите границы блоков. Добавьте текст. Каждый законченный элемент дизайна, статическое изображение и логотип помещайте в отдельный слой. Перемещайте изображения в слоях для того, чтобы добиться требуемой компоновки.

5

Сохраните рабочий "исходник" дизайна сайта в "родном" формате графического редактора. Это позволит вернуться впоследствии к его редактированию.

Полезный совет

Разработайте и сохраните в виде отдельных изображений типовые элементы дизайна сайта (например, меню, текстовые блоки) для их многократного использования в шаблоне.

Внимание, только СЕГОДНЯ!

Информационный раздел

Как выбрать ширину сайта?

При создании сайта одним из первых возникает вопрос: какой делать ширину сайта? Ответ на этот вопрос неоднозначен и будет зависеть от ряда факторов. Сайты бывают двух видов: 100% по ширине экрана и фиксированной ширины. Ниже приведен пример сайта с фиксированной шириной.

 

 Факторы, влияющие на ширину сайта

1. Количество колонок сайта.

  • Одноколоночный вариант: оптимальная ширина 1000 px
  • Двухколоночный вариант: оптимальная ширина 1000 px — 1256 px
  • Трехколоночный вариант: оптимальная ширина 1256 px — 1576 px

2. Разрешение монитора пользователя.

Для получения такой статистики лучше всего использовать открытый счетчик посещений популярного ресурса. Мы ореинтируемся на свой ресурс www.podolsk.ru.  Статистика сайта открыта, Вы можете посмотреть наиболее частые разрешения мониторов у пользователей, и в зависимости от этого подобрать оптимальную ширину для своего сайта. Посмотреть популярные разрешения мониторов на сайте mail.ru.

 

3.

20 правил создания качественного макета сайта

Почему 1280х1024 = 1256px?  Страницы сайта могут помещатся по вертикали экрана полностью или не полностью. Запас в 24 px берется на полосу прокрутки сайта.

 
Разрешение экрана Ширина, px
640х480 616
800х600 776
1024х768 1000
1152х864 1128
1280х1024 1256
1400х1050 1376
1440х900 1416
1600х1200 1576
1680х1050 1656
1920х1200 1896
2048х1536 2024

Теперь о самом важном!

Можно сделать автоматическую ширину сайта (100% по ширине экрана), которая будет автоматически подстраиваться под размеры монитора пользователя, но такой сайт ведет себя неконтролируемо. Мы рекомендуем своим клиентам делать фиксированные значения ширины сайта. Но решение всегда зависит от Вас.  Примеры сайтов: 100%-ной ширины, фиксированный.

« Вернуться

2013-11-24   //   Автор: Андрей   //   Статьи  //  Нет комментариев

Маленькая подсказка веб-дизайнерам.

Создание дизайна сайта в фотошопе, размеры макета

Очень часто при создании нового макета сайта в фотошопе дизайнеры, особенно начинающие, задаются таким вопросом: «Какой же размер сайта должен быть?». И в этом нет ничего страшного, неправильно будет, если не спрашивать. Из моего личного опыта и поиска в интернете я нашел для себя ту таблицу размеров сайта, которая всегда меня выручает. Скажу лишь одно на последок — длинна сайта может быть любой не зависимо от размеров экрана, а вот ширину уже нужно подбирать и он ограничена.

Идеальное разрешение, исходя, из тенденций на 2013 год составляет: 1000х768 px (1000 пикселей ширина на 768 пикселей высота). Почему именно 1000? Хотя разрешение экрана 1024×768? Все просто 24 pixel-ей уйдет на полоску прокрутки сайта по высоте, если у она заходит за первый экран.
Таблица правильных размеров сайта:

Разрешение экрана: Правильная ширина:
640х480 616
800х600 716
1024х768 1000
1152×864 1128
1280×1024 1256
1400×1050 1376
1440×900 1416
1600×1200 1576
1680×1050 1656
1920×1200 1896
2048×1536 2024

Как сделать макет сайта

Каким должен быть сайт? Ниже я структуирую информацию и проведу анализ факторов и требований к сайту

Общие требования к сайту

Среди требований к созданию сайта общего характера я бы выделил такие:

корректное отображение

он должен нормально открываться во всех основных браузерах, а также быть доступным к просмотру с помощью разных устройств (ПК, ноутбук, смартфон и т. д.); обратите внимание: важна компоновка страниц, при которой учитывается, какой должна быть ширина сайта для нормального показа;

структурированная информация

я, например, если зайду на ресурс и не найду быстро искомых данных, время тратить не стану и уйду на другой сайт, среднестатистические пользователи поступят так же, поэтому требования к оформлению сайта и нормальной подаче информации на страницах высоки;

Приятный дизайн

меня, как и большинство других людей, слишком яркие, бьющие по глазам цвета могут напрягать, при выборе оформления ресурса и продумывании его дизайна стоит помнить о разумной мере (особенно если идёт речь о вопросе, каким должен быть сайт солидной компании).

Хорошая конверсия

сайт должен превращать посетителя в покупателя

иметь хорошую целевую посещаемость (в это статье как лучше раместить рекламу в интернете http://likiweb.ru/sozdanie/kak-razmestit-reklamu-v-internete

Это я описал в общем, а теперь подробнее по порядку.

Требования Яндекса к сайту

Существует такое понятие, как требование поисковых систем к сайту. Перед созданием ресурса стоит с ними ознакомиться. Вы можете изучить их, перейдя по ссылке http://help.yandex.ru/catalogue/site-owner/requirements.xml

Основные требования яндекса:

  • на сайте должна быть полезная информация интересная посетителям
  • не стоит писать текст исключительно для роботов (тексты должны быть читабельными и носить экспертные данные)
    рекомендую к прочтени статью — Как правильно разместить текст на сайте
  • не пробуйте воздействовать на поисковую выдачу за счет ссылок (ссылки можно наращивать, но исключительно тематические, качественные и по которым будут переходить люди и задерживаться на вашем сайте)
    читайте статью как продвигаются сайты без ссылок
  • на сайте должны быт заполненные корректно мета теги (тайтл, дескрипшн и др)
  • сайт должен быстро загружаться и быть все время доступен (иметь надежный хотинг)

У гугла примерно такие же требования https://support.google.com/webmasters/answer/35769?hl=ru

Однозначно что не следуя этим рекомендациям хороших позиций и целевых посетителей с яндекса или гугла вам не видать.

Требования к дизайну сайта

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

логичность структуры ресурса

нормальное боковое и/или верхнее меню, «хлебные крошки», понятная и удобная навигация при переходах по внутренним страницам − всё то, что помогает мне ориентироваться на незнакомом ресурсе, автоматически попадает в плюс;

адекватность цветовой гаммы

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

Технические требования к сайту

Здесь отмечу:

  • нормальная скорость открытия ресурса (не более 3 секунд);
  • кроссбраузерность (видимость во всех браузерах);
  • оптимизация под планшеты и телефоны.

Я могу сказать, что с графикой, как правило, возникает много проблем. Если она не оптимизирована, будут проблемы с загрузкой, и пользователь уйдёт. Поэтому графика должна быть легкой и при этом наглядной и крупной.

Требования к безопасности сайта

К вопросу безопасности сайта я рекомендую подходить комплексно. Нужно обращать внимание на:

CMS (система управления)

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

хостинг

и общий, и выделенный хостинг должны обеспечивать минимальную свободу действий при сохранении нормальной работы ресурса, защита в этом случае лежит на системном администраторе; обязательно автоматическое сохдание бекапов (архивов)

надёжный пароль

чем сложнее будет код, тем мень
ше вероятность того, что ваш сайт подвергнется атакам извне, я бы рекомендовал использовать большое количество символов в разных регистрах;

бекап сайта

резервное копирование и хранение на локальном компьютере или естком диске даёт возможность сохранить информацию сайта, упростит его восстановление в случае хакерской атаки.

Требования к адресу сайта

  • Краткость — чем меньше символов, тем лучше.
  • Простота — имя ресурса должно быть легко произносимым (не должно быть двусмысленных букв — S C или K C).
  • Релевантность — желательно, чтобы адрес отражал суть деятельности.

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

Требования к контенту сайта

Я выделил бы такие требования к наполнению ресурса, как:

  • читабельность (нормальное соотношение ключевых слов и остальной лексики);
  • достаточный объём текста;
  • грамотность;
  • уникальность.

В общем, вы должны подать информацию так, чтобы и поисковые роботы, и люди остались довольны.

Как это лучше сделать с точки зрения SEO и визуального восприятия, можно почитать в моём блоге, перейдя по этой ссылке http://likiweb.ru/blog/kak-pravilno-razmestit-tekst.

 

.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *