Flamio.ru

Работа и деньги
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как создать макет сайта

9 лучших примеров макетов сайта и идей для веб-дизайна в 2018

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

Команда разработчиков проекта Mockplus собрала 9 лучших примеров компоновки сайтов 2018 года, чтобы вдохновить вас и помочь с созданием вашего следующего проекта.

1. Diker Bau

Идея макета сайта: использование изображений сайта для отображения сферы деятельности компании

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

Минимальное количество элементов помогает полностью сосредоточить внимание посетителя на конкретном продукте.

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

2. Chekhov

Идея макета сайта: Разделение страницы на секции

На сайте Chekhov мы видим разбитую страницу на две основные части, которые содержат контент одинаковой важности. Разместив две части рядом, дизайнер создает контраст, привлекая больше внимания пользователя, а сочетание анимации и цветовых изменений создает динамику.

Используйте макет разделенной страницы, если на вашем сайте предлагаются два совершенно разных варианта дальнейших действий для пользователя. При этом избегайте слишком большого количества контента в разделенных частях, так как они ограниченны в размерах. Лучше не использовать такой тип макета, если необходимо предоставить большой объем текстовой или визуальной информации.

3. Timothee Roussilhe

Идея макета сайта: параллакс эффект при прокрутке страницы

Timоthee Roussilhe — это сайт-резюме дизайнера Тимоти Руссилье. Сайт довольно простой, но в то же время креативный. Здесь используется параллакс эффект, который помогает привлечь посетителей. При прокрутке вниз появляются блоки, перемещающиеся по экрану. Интересно, что в самих блоках также используются эффекты параллакса, которые при прокрутке создают ощущение просмотра фильма.

Если вы хотите создать сайт с интересными особенностями, используйте эффект параллакса. Но при этом сохраняйте макет простым и аккуратно сочетайте цвета, чтобы не создать беспорядка на странице.

4. Happiness Abscissa

Идея макета сайта: закрепленная боковая панель навигации

В онлайн-магазине Happiness Abscissa вы найдете закрепленную боковую панель навигации, в которой отображена вся схема сайта. Главное меню является основным элементом в навигации. В нем показывается, где вы находитесь и куда можно перейти дальше.

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

На данном сайте так же используется эффект параллакса. Прокручивая страницу, макет меняется и показывает текст, сопровождающийся какой-нибудь декорацией.

Если вы создаете сайт с небольшим количеством опций в навигации, то вам стоит рассмотреть данный вариант макета. При прокручивании страницы перед пользователем всегда будут видны опции сайдбара. Также, по вашему желанию, на боковую панель можно добавить ссылки на социальные сети, контактные данные или любую другую информацию, которую пользователи могли бы легко найти.

5. Assemble

Идея макета сайта: сетка карточек

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

Данный вариант популярен при создании гибкого дизайна макета. Сетка карточек отлично подойдет для работы с переменными элементами, такими как размер, интервал, количество столбцов и экранов, отображая одновременно множество элементов с одинаковой иерархией. Если короче, то сетка карточек отлично подойдет для нагруженного контентом сайта.

6. Medium

Идея макета сайта: макет со множеством столбцов

Medium — популярная блог-платформа, которая предоставляет читателям большое количество информации в удобной форме. На данном сайте используется сетка с несколькими столбцами для создания сложной иерархии, интеграции текста и иллюстраций. Это облегчает и ускоряет поиск, чтение и понимание контента. Создается визуальный ритм, позволяющий глазу естественным образом переходить от одного блока к другому.

Данный макет похож на журнал. Хороший выбор для публикаций со сложной иерархией и большим количеством контента на странице.

Дизайн выделяется одной особенностью: длинная статья занимает страницу в одну широкую колонку так, чтобы посетителям было удобно читать.

7. Beverages

Идея макета сайта: блоки: большой блок в заголовке и несколько маленьких

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

Данный макет является универсальным и может быть использован как для сайтов-портфолио, так и для корпоративных сайтов и интернет-магазинов. Вы можете вставить новый блок, чтобы добавить какую-нибудь новую информацию. Большой блок можно использовать для демонстрации продуктов, а меньшие блоки — для дополнительной информации о продукте.

8. Casangelina

Идея макета сайта: асимметрия

Отель Casangelina находится на скалах Амальфийского побережья и является одним из десяти лучших отелей в мире, расположенных на скале. На сайте отеля используется асимметричный макет, в котором части страницы не равны по размеру между собой. Асимметрия — давно полюбившаяся техника в мире искусства, которая в последнее время стала популярна так же и среди веб-дизайнеров.

Обратите внимание, что асимметрия — это не то же самое, что дисбаланс. Цель асимметрии заключается в создании баланса, когда использование равных частей для двух разделов либо невозможно, либо нежелательно. Асимметрия позволяет создать напряжение и динамику. Она способствует лучшему восприятию информации, так как фокусирует внимание читателя на отдельных объектах (узловых моментах). Изменяя ширину, масштаб и цвет каждой асимметричной части контента, дизайнер усиливает визуальную вовлеченность посетителя.

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

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

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

9. Tinkerwatches

Идея макета сайта: большая фотография с четким призывом к действию

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

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

Чтобы привлечь посетителей, можно также использовать видео вместо изображений. Особенно если нужно продемонстрировать продукт в действии.

Вот и все 9 лучших примеров макетов сайта, которые мы нашли. Надеемся, что они окажутся полезными для вашего проекта. И напоследок: не забудьте запустить программу Mockplus, когда соберетесь создавать очередной сайт. Благодаря широкому набору компонентов и значков вы можете легко переносить элементы и завершить свой проект. Удачи и приятного создания!

Как сделать дизайн сайта в фотошопе с нуля

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

Читать еще:  Сайт визитка риэлтора

Существует много программ для создания дизайна, в том числе и для сайта. Однако в данной статье я рассмотрю, как сделать дизайн сайта в фотошопе с нуля своими руками. Так как считаю, что именно эта программа наиболее удобна для этой цели.

В статье используются названия инструментов и термины описание, которых не реально включить в данный материал из за объема. Поэтому если ты впервые открыл(а) эту программу, то нужно сначала изучить азы работы с ней. Еще рекомендую ознакомится с материалами раздела «Photoshop».

Создание и подготовка файла проекта

Для начала нужно открыть фотошоп, кликнуть в левом верхнем меню программы «Файл > Создать». И настроить новый файл следующим образом:

  1. Дать имя своему макету, у меня на примере «mysite«
  2. Ширину рекомендую выбрать в зависимости от разрешения монитора минус 20px. У меня разрешение 1440х900px. А высоту сделать 1200px, при необходимости в будущем можно будет ее увеличить.
  3. Единицы измерения установи в «Пикселях«. Разрешение «72» Пиксели/дюйм.
  4. Жми «OK». И сохраняй его как psd «Файл > Сохранить как. » в нужной папке.

Создай новый слой и сделай его активным. Выбери инструмент «Прямоугольник«, установи в параметрах инструмента значение «Пиксели» и создайте прямоугольник размером 1000х1200px (его заливка будет зависеть от того, какой цвет фона выбран основным).

Теперь слой с прямоугольником нужно разместить по центру холста. и установить направляющие по краям. Направляющие имеют полезное свойство прилипать к границам активного слоя.

Теперь нужно установить отступы внутри прямоугольника и поставить направляющие. Для этого я пользуюсь инструментом для выделения «Прямоугольная область«. А именно создаю выделенную область нужного размера, перетаскиваю ее в нужное мне место и тяну направляющую пока она ни прилипает к краю выделенной области. Обычно я устанавливаю отступы 15-20px.

Получится вот так:

Все первоначальная настройка макета окончена.

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

Сохрани, то что получилось «Файл -> Сохранить для Web -> PNG-24«

Теперь открой в проводнике или файловом менеджере папку с сохраненным файлом:

  1. Правый клик на файле
  2. В контекстном меню «Открыть с помощью»
  3. Выбери браузер которым пользуетесь (у меня hrome).
  4. После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
  5. Кликни один раз для отображения изображения в полный размер.

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

Создание шапки сайта

Теперь залей слой, который мы использовали для установки направляющих, белым цветом. И приступим к созданию шапки сайта. Для этого создай новую группу слоев и назови ее «Шапка сайта»

Разместим логотип компании. Я его поставлю традиционно с левой стороны. Это является не обязательным местоположением, но принято размещать логотип именно слева или по центру макета.

Это связанно с тем, что попав на сайт пользователь сразу определит к какой именно организации принадлежит сайт, к тому же большинство пользователей визуально изучают страницу начиная с верху, слева на право. Если нарисовать линию, то получится нечто похожее на букву Z.

Что бы добавить свой логотип (если его нет, то читай Как сделать логотип онлайн) нужно:

  1. Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
  2. Выбрать инструмент «Перемещение» (это стрелочка напоминающая курсор)
  3. Открой вкладку с логотипом
  4. Наведи курсор на изображение логотипа
  5. Нажми и не отпускай левую кнопку мыши
  6. Тащи изображение на вкладку с макетом
  7. Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
  8. Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

Если все правильно логотип скопируется новым слоем на холст с макетом.

Теперь нужно подогнать размер логотипа (комбинация клавиш ctrl+t) таким образом, что бы он был не сильно большим, но и не был мелким и выровняй его левый край по направляющей. Что бы проверить правильно ли подобран размер сохрани свой макет в формате png-24 и открой в браузере.

Теперь я создаю новую группу слоев и называю ее телефоны. При помощи инструмента «Текст» пишу «Горячая линия» и номер телефона организации «+7 (3435) 25-60-60». Я разместил телефон в шапке по двум причинам. Первая это наличие телефона с правой стороны в шапке уже привычно пользователям, так сделано на большинстве сайтов компаний. Вторая, если это сайт компании, то многие посетители почитав, то что их интересуют наверняка захотят позвонить и им не придется открывать страницу контакты. Я так же подобрал подходящий на мой взгляд шрифт, размер и выровнял телефон по правой внутренней направляющей.

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

Создание дизайна главного меню сайта

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

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

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

И на последнем шаге я добавил hover эффект (эффект при наведении курсора мыши) для одного из пунктов меню.

Создание дизайна левого меню сайта

Честно говоря это меню сделано в том же стиле и мало отличается от предыдущего по методу его создания поэтому весь процесс описывать не буду. Однако хочу заострить внимание на следующих моментах:

  1. Разделение места при создании дизайна вопрос больной и требует особого внимания. Я для себя решил, что левое меню не должно быть больше 250 px так как большая ширина съедает место у контента. Однако все зависит от конкретного макета
  2. Отступы между блоками не следует делать меньше 10 px. На мой взгляд оптимальными значениями являются 10px, 15px, 20px
  3. Что бы сделать пунктирную линию в фотошопе прочитайте соответствующую статью
  4. Создавая пункты меню я не делал для каждого пункта отдельный текстовый слой. Можно это сделать в одном слое начиная каждый пункт с новой строки (через ентер), а потом просто отрегулировать меж строчный интервал в окне «Символ»

Я использовал 14 размер и стандартный для Windows шрифт «Verdana«

Старайся использовать стандартные шрифты по максимуму. Так как при просмотре сайта пользователь используется шрифты своей системы.

Получилось вот такое меню:

Дизайн содержимого сайта

Теперь пришло время изобразить как будет выглядеть содержимого сайта. По идее нужно отрисовывать все типы содержимого сайта. А именно главная страница, формы, раздел новости и т.д., я же ограничусь простой текстовой страницей сайта.

У любой страницы должен быть заголовок и собственно сам контент. Для начала я установлю две направляющие. Первую горизонтальную по верхнему краю меню. Вторую вертикальную на расстоянии 20px от левого края левого меню.

Далее создаю слой с заголовком, слой с текстом и перетаскиваю заранее подготовленные изображения кофе. Что бы текстом было управлять легче возьми инструмент «Текст» и нажми левую кнопку мыши и потяни по диагонали. Получится прямоугольник определенного размера. Теперь можно скопировать туда текст, форматировать его и менять размер блока теста при необходимости.

Читать еще:  Сайт визитка создать самому

Получилось вот что:

Дизайн подвала сайта

В подвал сайта обычно помещают счетчики, дополнительные дублирующие меню, копирайт и т.д. Я так и сделал, разве что меню не разместил.

Создаем два прямоугольника по аналогии с меню и размещаем счетчики и прочую информацию, что бы получилось вот так:

Мы рассмотрели как сделать дизайн сайта в фотошопе (photoshop) с нуля своими руками. А дальше все зависит от Ваших творческих способностей и владения программой.

Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет

«Я не делаю брак, я не принимаю брак, я не передаю брак»
Toyota Production System

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

Если макеты создаются в студии, то разработчик может легко уточнить у менеджера проекта или дизайнера любые вопросы, например, что конкретно имелось в виду в техническом задании, или же как в представлении дизайнера должен выглядеть итог работы. Но если заказчик уже начал с кем-то проект, а затем пришел к нашему специалисту, наладить такую коммуникацию будет невозможно. Особенно много сложностей это доставляет, когда в макетах есть ошибки, ведь исправлять их теперь некому. Каковы самые распространенные огрехи горе-дизайнеров? Что стоит проверить перед тем, как отдать макеты на верстку? Эти и другие вопросы по теме мы рассмотрим в данной статье.

Требования к файлу:

  1. Макет должен быть представлен в формате (.psd). В противном случае сайт будет отличаться от макета.
  2. Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
  3. Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины . Указания значений не должны быть дробными!
  4. Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
  5. Слои ни в коем случае не должны быть склеены.
  6. Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д. Допускаются элементы shape и smart-объекты с ai-элементами.
  7. Выравнивание слоев строго по “Rulers”. Их необходимо оставлять в макете.
  8. “Rulers” должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
  9. Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.).Придерживаемся иерархии «сверху вниз» и «слева направо».
  10. В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
  11. Для адаптивного сайта должны быть макеты или элементы для 640px 960px 1200px 1600px.
  12. При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 ширина браузера 1000).
  13. В дизайне должны быть «служебные страницы» (404).

Текстовое содержимое. Четкие размеры и отступы:

  1. Необходимо использовать «родные» направляющие photoshop или готовые модульные сетки, чтобы точно определить расположение элемента на странице.
  2. Нужно осознанно выбирать пропорции и размеры объектов и делать их кратными 10, например, 1000px, а не 998px.
  3. Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
  4. Не допускается растрирование текста или размещение его в smart-объекте.
  5. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
  6. Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
  7. Все текстовые элементы должны быть сглажены методом “Windows LCD”.
  8. Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.)

Самое главное дизайнер должен быть верстальщиком, быть в состоянии самостоятельно сверстать то, что нарисовал (пусть и не быстро, не на 100% валидно).

Графические фишки:

  1. Фон должны быть повторяющимся, текстурированные фоны без логики повтора не принимаются.
  2. Все слои должны быть в нормальном режиме наложения (normal). Не допускается наличие слоев в других режимах, как то multiply, overlay и т.д.
  3. Необходимо использовать минимум элементов, что потребуют создания графических файлов png-24 (полупрозрачность etc).
  4. Обязательно должна присутствовать favicon.ico для сайта. Не нужно забывать про favicon для Apple.
  5. Векторные мелкие элементы должны быть отрисованы согласно однопиксельной сетке.
  6. Настоятельно рекомендуется выстраивать отступы между элементами, чьи значения кратны 10, в отдельных случаях кратны 5.

Исходные материалы макета

  • Макет в формате PSD
  • Шрифты
  • Исходные изображения

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

Все нестандартные шрифты копируются в ту же папку. У верстальщика может не быть необходимого вам красивого шрифта. И на его поиски уйдет много времени.

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

Определяем способ создания дизайн-макета

Здравствуйте, уважаемый посетитель!

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

Содержание

  • Какие существуют варианты дизайна
  • Дизайн на заказ
  • Дизайн на основе платных готовых шаблонов
  • Дизайн на основе бесплатных шаблонов
  • Самостоятельное выполнение дизайна

Какие существуют варианты дизайна

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

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

В зависимости от того, по какому пути пойти, в большой степени будут зависеть все последующие действия.

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

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

Напротив, в случае самостоятельной разработки макета, нужно в первую очередь обратить внимание на овладения необходимых навыков работы с графическими инструментами, такими, как Adobe Photoshop или GIMP. Это можно сделать, используя соответствующие обучающие курсы, например, такие как, имеющиеся здесь на сайте бесплатные видеокурсы Фотошоп для начинающих (бесплатная версия), Видеосамоучитель GIMP или какие-либо другие обучающие материалы.

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

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

Читать еще:  Сделать сайт визитку самому бесплатно на яндексе

Ниже будут более подробно рассмотрены все перечисленные варианты.

Дизайн сайта на заказ

Если вы сомневаетесь в своих художественных способностях, и уверены, что не способны сами сделать для своего интернет-ресурса макет, либо не хотите вообще с этим «заморачиваться», так как у вас имеются более важные дела, то вам прямая дорога по первому варианту, а именно: сделать заказ у профессионала.

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

Или аналогичным ресурсом Freelance.ru, предназначенным для поиска подходящей удаленной работы в различных областях, включая и веб дизайн.

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

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

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

Первый вариант можно увидеть на примере биржи «http://fl.ru», где на рис.1 показано, как выглядят размещения заданий на конкурс для поиска претендентов на работу.

Рис.1 Размещение заданий на конкурс

Пример технического задания на дизайн интернет магазина показан на рис.2.

Второй вариант поиска возможных исполнителей показан на рис.3, где в разделе услуги можно найти достаточно много разных предложений от дизайнеров с указанием ориентировочной стоимости работ.

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

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

На рис.3 можно увидеть варианты предложений от дизайнеров, где лишь на одной странице присутствуют предложения от 6000 до 33000 рублей.

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

Дизайн на основе платных готовых шаблонов

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

Существует немало площадок, где можно купить готовые шаблоны, причем стоимость их будет значительно меньше, чем если это делать на заказ. На рис.4 для примера приведен скриншот страницы «http://protpls.ru», где можно увидеть вполне демократичные цены.

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

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

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

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

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

Дизайн на основе бесплатных шаблонов

Данный вариант, аналогичен предыдущему, но при этом совершенно бесплатен.

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

Для примера, на рис.5 приведен скриншот страницы по адресу: «http://internet-technologies.ru/templates», где можно найти такие бесплатные шаблоны.

Самостоятельное выполнение дизайна

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

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

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

Здесь, в рубрике «Сделай сайт своими руками с нуля бесплатно» рассматривается именно такой вариант создания сайта, при котором все делается самостоятельно, так как целью данной инструкции является рассмотрение самостоятельного создания реального сайта на живом примере, включая дизайн, верстку и остальные виды работ.

Но это не значит, что все должны так поступать. Если, кто-то решит, что часть работ лучше ему выполнит кто-то другой, то в этом нет ничего плохого. Просто, он эти работы сможет сделать на заказ.

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

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

И последне, что следует сказать в завершении этой статьи.

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

Поэтому, для того, чтобы эта инструкция не породила массу совершенно одинаковых, повторяющихся своим внешним видом сайтов, исходный файл картинки шапки разработанного здесь дизайн-макета не будет предоставлен для скачивания в формате «psd».

Это один единственный случай, когда по ходу работы не будет предоставлен исходный файл. Вместо этого, в дополнительных материалах будет находиться файл в формате «jpg» с измененной картинкой, изображение которой позволит использовать ее для верстки сайта и проверки его работы, но не даст возможность «в лоб» использовать ее для рабочего сайта.

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

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

На этом все, и в следующей статье мы приступим к самостоятельному созданию дизайн-макета сайта.

Ссылка на основную публикацию
Adblock
detector