Создайте чистый макет веб-сайта в Photoshop. Разработка макета веб-сайта - это больше, чем организация цветных изображений и заполнение текста в текстовых фреймах. Это подход, который говорит о многом бизнес вашего клиента. Цвета и графика сайта определяют характер бизнеса, а качество дизайна и удобство навигации по сайту должны связывать пользователя с организацией и превращать его в потенциального клиента.
Разработка привлекательного и легкодоступного макета сайта обязательна для каждого веб-дизайнера. Это руководство предназначено для того, чтобы помочь вам создать простой и чистый сайт с нуля. В ходе этого процесса вы узнаете важные моменты, которые помогут вам получить больше знаний о веб-дизайне. 
Запишите ваши требования перед разработкой макета сайта
Прежде чем приступить к разработке макета сайта, вы должны знать, как будет выглядеть ваш сайт и какие темы вы должны включить в сайт. Очень важно составить список элементов макета сайта, которые нужны вашему клиенту на его сайте. Наряду с этим, качество хорошего дизайнера состоит в том, чтобы подготовить макет всего сайта, прежде чем он начнет работать над окончательным шаблоном.
Различные проектные компании адаптируют различные уровни стратегий предварительного проектирования, которые могут включать в себя создание каркасов, создание прототипов, макет, бета-версии и многое другое. В этом уроке мы создадим макетную версию перед тем, как запустить оригинальный дизайн шаблона. Я использую оттенки серого, которые позволяют идентифицировать блок макета
холст
Много лет назад, хотя ОС и ограниченного количества устройств для доступа к веб-сайтам было очень мало, размеры страницы были установлены на один или два размера. Сегодня сценарий совершенно другой. Конечные пользователи получают доступ к сайтам на настольных компьютерах различных размеров, мобильных телефонах, iPad и планшетах. В этой разнообразной ситуации нет никаких шансов, что вы сможете исправить свою веб-страницу до определенного размера. Но есть некоторые стандартные размеры, применяемые для каждого устройства. Вы постепенно найдете свой любимый размер, или ваш клиент может направить вас на сайт, чтобы имитировать размеры.
В этом случае мы работаем над следующими измерениями. Не беспокойтесь о высоте, так как она со временем изменится. Чем больше контента вы добавляете на свой сайт, тем больше будет высота.
Помните, что обычно прокручивать страницу вниз по вертикали, поэтому вы не можете установить конкретную высоту для вашей веб-страницы, если вы не хотите, чтобы пользователь прокручивал вашу домашнюю страницу как Google. Но нужно не прокручивать горизонтально. Поэтому ограничьте свою ширину в соответствии с отраслевыми стандартами и не занимайтесь творчеством с горизонтальной прокруткой.
Для Интернета разрешение ограничено 72. В последнее время на iPads найдено несколько изображений и страниц с более высоким разрешением, а также несколько планшетов. Но это редкий случай, и лучше придерживаться 72, учитывая скорость интернета по всему миру.
Выберите файлы с помощью команды Ctrl + A и нарисуйте направляющие одинаково по всему шаблону. Веб-сайт должен быть аккуратно организован, каждый элемент должен быть согласован друг с другом. А рекомендации по макету сайта помогут вам легко получить его.
Подготовь свой макет
Размещение файла макета на исходном шаблоне поможет вам сэкономить достаточно времени. Разработка вашего сайта становится настолько простой, что вы в конечном итоге завершите каркас за несколько минут. Однако макет поможет вам только разработать рамки. Выполнение элементов дизайна с деталями, расположение шрифтов и выравнивание займет больше времени, чем составление макета сайта.
Цветовая схема и другие варианты
Следующее, что нужно сделать после того, как вы подготовите каркас, это выбрать цветовую схему. Но лучше подготовить свои цвета, прежде чем начать работу над дизайном.
Все сводится к тому, что подготовьте свое оружие, прежде чем начинать разработку. Все, включая значки, изображения и выбор цвета, должно быть готово до начала работы. Организация и планирование вашей работы сэкономят больше времени и сосредоточатся на дизайне без каких-либо препятствий между ними.
Выбор цвета может быть выбором дизайнера, если компания нова и ранее не имела фирменного стиля. В некоторых случаях клиенты дают представление о том, какими должны быть оттенки логотипа или фона. В существующих компаниях, где вам может потребоваться изменить дизайн всего веб-сайта, вам, возможно, придется выбирать те же цвета, что и потребностям клиента.
Есть множество сайтов, которые могут помочь вам выбрать миллионы цветовых схем из архивов. Попробуйте следующие сайты, чтобы насладиться широким выбором цветовых комбинаций.
Color.adobe.com
Colourlovers.com
Здесь я выбрал несколько оттенков синего для использования на сайте. Весь сайт будет спланирован в следующей цветовой гамме. Не забудьте выбрать три или четыре различных цветовых комбинации, так как мы не знаем, какой цвет предпочтет клиент. Как только клиент завершит цветовую схему, сохраните значения оттенков и убедитесь, что цвета играют жизненно важную роль в каждой вертикали организации. Особенно в фирменном стиле.
Процесс проектирования
Есть много способов продолжить ваши дизайнеры. Не существует жестких и быстрых правил верстки сайта, которые бы определяли или следовали процессу проектирования, это в основном процесс, который дизайнер выберет для своего удобства.
Некоторые дизайнеры хотят построить целые блоки и кадры и начать работу над деталями на втором этапе, за которым следуют тип и, наконец, выравнивания и корректировки. Некоторым нравится завершать одну часть страницы за раз и переходить к следующей части. Мы следуем второму стилю.
Мы закончим сайт в следующих шагах
- Верхний и нижний колонтитулы
- Что мы делаем
- Сервисы
- форма
- Новости
- нижний колонтитул
Верхний и нижний колонтитулы
Практическое правило определения размеров вашего заголовка или баннера оставлено на ваше усмотрение. В соответствии с последними тенденциями, веб-сайты появляются с огромным изображением, которое покрывает весь экран вашего компьютера. Стиль упоминается как образ героя, который стал довольно популярным в последнее время.
В данном случае мы начинали с заголовка высотой 120 пикселей и высоты баннера 550 пикселей. Ширина должна соответствовать размеру документа.
Проекты со сплошным цветом имеют плоский вид, который не подходит для больших кадров или изображений. Чтобы избежать плоского вида, я применил градиентный оверлейный слой поверх баннера. Это дает баннеру глубину, которая медленно трансформируется из одного оттенка в другой.
Затем мы начали импортировать логотип и разместить его в верхнем левом углу заголовка, а другой большой логотип - в центре баннера. Вы также можете наблюдать векторные формы макета сайта в верхнем правом углу, которые используются для обмена ссылками в социальных сетях.
На этом этапе я закончил добавлять тип в части заголовка и баннера. Название компании, фирменное сообщение, со ссылками и услугами, добавляются в текст. Вы также можете наблюдать прозрачную кнопку на баннере.
Простой текст или слишком много текста без специальных функций испортит внешний вид вашей веб-страницы; страница скоро утомит пользователя, что может позволить ему быстро покинуть ваш сайт. Посмотрите на векторную форму, которую я добавил в ссылки на сервисы в правом верхнем углу баннера. Стиль прост, но он заполняет пустоту, избегая обыденного взгляда.
Выберите изображение, соответствующее бизнесу. В сети доступны миллионы изображений, и вам не понадобится много времени, чтобы найти изображение, соответствующее вашим требованиям.
В моем случае я нашел высококачественное изображение, которое, я думаю, будет хорошо с моим сайтом. У меня нет бизнес-темы для веб-сайта, поэтому я могу выбрать любое изображение, которое будет хорошо смотреться на посте баннера.
Попробуйте загрузить некоторые изображения HD с бесплатных сайтов изображений, указанных ниже
www.pixabay.com
Смешивание - это искусство, которым вы должны овладеть, чтобы создавать красивые баннеры. Здесь я смешал три слоя, чтобы добиться эффекта, показанного на изображении выше. Вот что я сделал
- Поместите слой изображения поверх синего цветного баннера
- Поместите наложение градиента над изображением
- Измените непрозрачность изображения на 40 процентов и измените режим смешивания на разницу.
- Посмотрите палитру слоев на изображении выше, чтобы понять, как слои расположены друг на друге.
Так будет выглядеть ваш заголовок и баннер, когда мы только что закончили над ним работать. Мы работаем над одной частью одновременно, и пришло время перейти на следующий уровень.
Выравнивание имеет решающее значение, когда дело доходит до типа; иметь представление о том, как должен выглядеть ваш сайт, а текст должен быть выровнен до его запуска. На этом уровне я использовал два разных текстовых фрейма, оба выровнены по левому краю.
Следующим шагом является разработка сервисной части веб-страницы. Я разработал металлическую звезду в серых тонах, чтобы продемонстрировать различные услуги компании. Цель использования символа звезды - услуги 5 звезд.
Когда дело доходит до выравнивания текста Руководства являются вашими лучшими друзьями. Связность между типом и объектами может быть достигнута благодаря хорошему использованию пустого пространства и равных промежутков между элементами дизайна. Я использовал многие Рекомендации по макету веб-сайта, чтобы увидеть, что все объекты в фрейме должны выдерживать надлежащие промежутки и расстояния, которые выделяют достаточное количество пустого пространства.
Следующим шагом нашего дизайна является создание поля формы. В этом случае я работаю против метода, который мы использовали при разработке баннера. Мы разместим слой изображения под сплошным цветным слоем и нанесем градиентный слой поверх двух слоев, чтобы добиться лучшего вида. Игра с режимами наложения всегда важна при размещении больших изображений.
Выбор изображений для этого сайта не имеет конкретной темы, связанной с ним. Я думаю, что это изображение поможет сайту выглядеть лучше.
Поместите изображение под цветной фоновый слой. Чтобы точно отрегулировать изображение до размера цветного слоя, используйте параметры маскировки слоя.
Посмотрите на палитру слоев на изображении выше. Слой сплошного синего цвета находится сверху изображения, режим наложения преобразуется в наложение, а непрозрачность уменьшается до 65 процентов.
Я использовал карту градиента поверх двух слоев. Режим смешивания изменен на оттенок, а непрозрачность остается неизменной.
Ящик для формы готов, что подводит нас к концу четвертого уровня в дизайне нашего сайта.
Наш следующий уровень состоит из двух простых текстовых фреймов. Он напоминает второй уровень веб-страницы, и я использовал выравнивание двух полей, аналогично верхнему. Поддержание согласованности в выравнивании является хорошим способом использования пустого пространства.
Когда мы добрались до последней части страницы, пришло время еще раз взглянуть на размеры нижнего колонтитула. Дизайнер должен планировать высоту нижнего колонтитула на основе ссылок, которые он должен использовать там. В этом случае, я дал высоту 170 пикселей для моего нижнего колонтитула. Ширина остается такой же, как на сайте.
Разместите ссылки и изображения согласно вашему требованию.
На этом мы завершили разработку части нашего сайта. Используемые нами цветовые комбинации минимальны, мы используем много пустого пространства в нашем дизайне и добавляем простой текст с минимальными шрифтами. Намерение состоит в том, чтобы создать чистую веб-страницу, которая, как мы надеемся, будет выполнена.
Пожалуйста, взгляните на дизайн всей страницы ниже еще раз
