Как создать красивый сайт


Разработка красивого веб-сайта с нуля. Как создать веб-сайт

Доброго времени суток, уважаемые читатели блога http://www.webformyself.com

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта http://net.tutsplus.com/ . Данная статья Вам покажет как можно нарисовать красивый сайт, имея практически нулевые знания в программе Photoshop.

Автором данной статьи является Marko Prljic.

Поехали…

Вам захотелось создать красивый сайт, но Вы даже не представляете, как это делается? Хотите узнать, как создать веб-сайт? Честно говоря, несколько лет назад это и со мной произошло. Путешествуя по сети, я встречал множество красивых сайтов, и мне самому всегда хотелось уметь разрабатывать такой дизайн для сайтов. Сейчас я уже это умею и готов научить и Вас, как это сделать! В сущности, для этого требуются некоторые навыки работы в Photoshop и внимание к деталям. В этом руководстве я буду обращать внимание на те незначительные на первый взгляд детали, из которых складывается красивый дизайн сайта. Запускайте Photoshop и приступим к делу!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Автор: Marko Prljic

Редакция: Рог Виктор

Привет, меня зовут Марко, я веб-дизайнер из чудесной страны Хорватии. Я разрабатываю амбициозные, классно выглядящие, современные сайты. Также я пишу статьи для Themeforest и Graphicriver, и люблю писать разные руководства. В свободное от создания сайтов время я просто общаюсь со своими детьми или обдумываю очередной Большой Проект. О, как и все остальные, я веду блог на Twitter.

Шаг 1 – Скачайте 960 Grid System Template

Почти все дизайны я разрабатываю на основе блочной системы 960 Grid System. Поэтому нам сначала нужно скачать эти блочные шаблоны для Photoshop, которые можно найти на официальном сайте 960.gs. Просто распакуйте zip-архив и найдите в нем PSD-шаблоны. Вы увидите шаблоны двух типов: один – 12_col, второй – 16_col. Как видно по названию, отличаются они тем, что один состоит из 12 колонок, а другой из 16. Чтобы пояснить чуть точнее, допустим, что Ваш дизайн будет состоять из трех вертикальных блоков, тогда Вам нужно взять шаблон 12_col, так как 12 кратно 3. А если Ваш дизайн будет состоять из четырех вертикальных блоков, тогда Вы может брать в качестве шаблона как 12_col, так и 16_col, потому что и 12, и 16 кратно 4. Далее в руководстве мы рассмотрим это на примере.

Шаг 2 – Определяем структуру

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

Шаг 3

После того, как мы определились со структурой сайта, можно двигаться дальше. Откройте Ваш шаблон 16_col.psd. Перейдите в меню «Изображение» > «Размер холста» (Image > Canvas size). Установите размер 1200px по ширине и 1700px по высоте. Установите цвет фона #ffffff.

Шаг 4

Далее выберите инструмент «Прямоугольник» (Rectangle) и нарисуйте прямоугольник по всей ширине холста и высотой примерно 80px. Залейте его цветом #dddddd.

Шаг 5

Создайте новый слой над прямоугольной областью и установите для этого слоя режим «Перекрытие» (Overlay). При нажатой клавише Ctrl щелкните мышью по слою с прямоугольником. Он будет выделен. Выберите мягкую кисть (soft brush) толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке. Таким образом, Вы создадите красивый и легкий световой эффект. Кроме того, можно связать эти два слоя.

Шаг 6

Новый слой. Выберите снова инструмент «Прямоугольник» (Rectangle) и нарисуйте тонкий темно-серый прямоугольник, как показано на рисунке.

Шаг 7

Выбрав инструмент «Прямоугольник» (Rectangle), нарисуйте большой блок примерно на 500px ниже верхнего прямоугольника. Сделайте его высотой 575px и наложите на него линейный градиент в границах оттенков от #d2d2d0 до #ffffff, с углом -90° и масштабом 100%.

Шаг 8

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

Создайте новый слой над всеми текущими слоями. При нажатой клавише Ctrl щелкните мышью по большому прямоугольнику. Выберите мягкую кисть толщиной 600px, установите белый цвет и несколько раз щелкните, поместив край кисти чуть выше выделенной области, как показано на рисунке.

Шаг 9

Создайте новый слой и нарисуйте большой прямоугольник высотой 400px. Он будет использоваться для шапки нашего сайта. Наложите на него красивый голубой градиент от оттенка #2787b7 до #258fcd.

»Видите, какой нежный переход оттенков?



Шаг 10

Добавьте темно-синюю линию толщиной 1px вдоль нижней границы шапки, наложите эффект тени (Drop shadow). Для наложения тени используйте режим Умножение (Multiply), непрозрачность (Opacity) 65%, угол (Angle) -90°, смещение (Distance) 1px, размер (Size) 6px. Далее создайте поверх новый слой и нарисуйте под синей линей еще одну линию толщиной 1px белого цвета. Таким образом, мы создадим отчетливую границу для нашего блока с основным контентом. В принципе, этот прием оформления границ Вы можете применять для каждого блока Вашего проекта, только с другими оттенками.

Шаг 11

Создайте новый слой и с помощью инструмента «Прямоугольник» (Rectangle) нарисуйте в верхней части холста прямоугольную область высотой 50px, как показано на рисунке. Она будет служить для панели навигации.

Наложите тень, используя параметры, представленные на рисунке.

Шаг 12

Настало время заняться навигацией. Используйте инструмент «Прямоугольник с округленными углами» (Rounded Rectangle), установите радиус 5px. Нарисуйте прямоугольник, сделайте заливку цветом #f6a836 и наложите следующие эффекты:

— Внутренняя тень (Inner Shadow) – цвет: #ffffff, Режим: Перекрытие, Прозрачность: 60%, Угол: 120 °, Смещение: 7px, Размер: 6px.

— Внутреннее свечение (Inner glow) – Режим: Нормальный, цвет: #ffffff, Размер: 4px, остальные параметры оставьте по умолчанию.

— Обводка (Stroke) – Размер: 1px, Положение: Внутри, цвет: #ce7e01.

Теперь выделите этот прямоугольник с помощью Ctrl и щелчка мыши. Перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract), и введите в появившемся окне 1px.

Создайте сверху новый слой, установите режим «Перекрытие» (Overlay) и наложите эффект, описанный в Шаге 5, только в этот раз используя кисть меньшего размера. Далее добавьте текст для навигации. Я использовал для ссылок навигации шрифт Arial, все буквы заглавные и без сглаживания.

Шаг 13

Теперь давайте создадим поле поиска. С помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) с радиусом 5px создайте поле для поиска по правой стороне размеченной сетки шаблона, в середине верхней серой полосы, созданной на Шаге 4. Добавьте к слою следующие стили:

— Внутренняя тень (Inner Shadow) – цвет: #000000, Режим: Умножение (Multiply), Непрозрачность (Opacity): 9%, Угол (Angle): 90°, Смещение (Distance): 0px, Размер (Size): 6px.

— Обводка (Stroke) – Размер (Size): 1px, Положение: Внутри (Position: inside), цвет: #dfdfdf.

Я добавил текст «Search» и светло-серую кнопку «Go». Выглядеть это должно так.

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

Шаг 14

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

Снова создаем эффект, описанный в Шаге 5.

Используйте мягкую кисть меньшего размера. Я в данном случае выставил размер 45px.

Шаг 15

После добавления логотипа и подзаголовка наш сайт должен выглядеть вот так.

Шаг 16

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

Создайте еще одну пустую папку слоев и назовите ее «header». В нее мы переместим графику из шапки нашего шаблона. Вот так это должно выглядеть.

Шаг 17

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

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

Шаг 18

На этом шаге я объясню Вам, как я сделал отражение для изображений в шапке. Найдите пару изображений на свой выбор, я использовал скриншоты браузера Safari с изображениями двух других моих шаблонов. Уменьшите один из них и поместите под вторым, который больше. Создайте дубликат обоих слоев и с помощью инструмента «Свободное трансформирование» (Free Transform) переверните сначала одно изображение, затем второе. Сдвиньте оба изображения на несколько пикселей вниз. Теперь сделайте выделение снизу с внешней стороны до середины первого перевернутого изображения с помощью инструмента «Прямоугольная область» (Rectangular Marquee). Перейдите в меню «Выделение» > «Модификация» > «Растушевка» (Select > Modify > Feather) и в появившемся окне введите 30px или больше. У Вас должно получиться такое же выделение, как показано на рисунке. Нажмите несколько раз кнопку Delete, чтобы получилось красивое затененное отражение оригинального изображения. Повторите этот же шаг для второго изображения.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (Overlay). Наложите эффект, описанный в Шаге 5.

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

Шаг 19

Посмотрев на итоговое превью нашего дизайна, Вы заметите красивые вкладки в блоке с основным контентом. Для создания подобных вкладок нам необходимо будет выполнить еще несколько дополнительных шагов, но это определенно того стоит. Сперва с помощью инструмента «Прямоугольник с округленными углами» (Rounded Rectangle) нарисуйте большую прямоугольную фигуру высотой 70px и радиусом углов 10px или больше, если посчитаете нужным. Сейчас нам надо избавиться от нижних округленных углов и сделать их идеально прямыми. Выберите инструмент «Область (горизонтальная строка)» (Direct Selection) и установите его на границе фигуры. Щелкните по точке вертикальной оси и, удерживая клавишу Shift, оттяните ее вниз, пока она не достигнет уровня горизонтальной оси. Уже неплохо, но угол все еще деформированный. Заметен небольшой хвостик. Нажмите на него и сдвиньте вверх до уровня горизонтальной оси.

Мы сделали идеально прямой угол. Вот так это должно выглядеть. Теперь повторите этот шаг для правого нижнего угла.

Шаг 20

Выберите инструмент «Линия» (Line) толщиной 1px.

Шаг 21

Начертите разделители серого цвета, удерживая клавишу Shift.

Шаг 22

Разместите какие-нибудь иконки, заголовки и описание для каждой вкладки. Я использовал иконки Рэя Ченга, которые можно скачать с сайта WebAppers.com. Как правило, одна вкладка всегда активна, в то время как другие остаются неактивными. Чтобы это четко было видно в нашем дизайне, нам нужно найти способ это показать. Я обесцветил остальные иконки и уменьшил непрозрачность для заголовков и текста, оставив первую активную вкладку цветной и яркой.

Шаг 23

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

Вот так должно выглядеть выделение.

С помощью маленькой мягкой кисти создайте белый фон.

Шаг 24

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

Добавьте векторную маску (vector mask), нажав на маленькую иконку внизу палитры слоев.

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

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

Вот так должны выглядеть наши вкладки.

Шаг 25

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

Далее сделайте дубликат слоя и поверните его на несколько градусов с помощью инструмента «Свободное трансформирование» (Free Transform). Повторите этот шаг еще раз.

Импортируйте подготовленное изображение и поместите его над белыми прямоугольниками. Не волнуйтесь, если изображение выходит за границы блока – мы это исправим. Выделите верхний прямоугольник, перейдите в меню «Выделение» > «Модификация» > «Сжать» (Select > Modify > Contract) и в появившемся окне введите 5px. Выделив слой с изображением, нажмите иконку «Быстрая маска» (Quick Mask) внизу палитры слоев. У Вас получится эффект красивой картинки с рамкой, как показано на рисунке выше.

Вот так у Вас должен выглядеть порядок слоев.

Шаг 26

Не забывайте следить за порядком. Создайте папки слоев и распределите по ним слои на своей палитре. У меня это сделано вот таким образом.

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

И еще немного организации слоев.

Шаг 27

Я решил, что этот блок должен быть большим, поэтому я разместил его в большом поле сразу после главного блока. Сначала рисуем большой светло-серый прямоугольник высотой примерно 220px с рамкой серого цвета толщиной 1px.

Далее рисуем еще один прямоугольник, светлее и меньше предыдущего на 10px с каждой стороны. У него также должна быть светло-серая рамка толщиной 1px.

Добавляем какой-нибудь текст, и все готово!

Шаг 28

Теперь займемся нижним колонтитулом. Нарисуйте большой темно-серый прямоугольник высотой 400px.

Шаг 29

Наложите световой эффект точно так же, как мы описывали в Шаге 5.

Шаг 30

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

Шаг 31

Создайте самый нижний блок, в котором будет продублирована навигация. Можно скопировать верхний прямоугольный блок с навигацией, поместить его внизу и установить для него высоту около 40px. Поместите его в самом низу Вашего холста. Пожалуйста, имейте в виду, что Вам возможно потребуется расширить холст для этой цели, чтобы на нем уместилась вся графика. В этом случае откройте в меню «Изображение» > «Размер холста» (Image > Canvas size) и установите высоту, при которой весь проект умещается на холсте.

Шаг 32

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

Шаг 33

Наполним колонтитул содержанием и красиво упорядочим его по нашей сетке.

Шаг 34

Напоследок распределите все Ваши слои по папкам. У меня это сделано так.

Дизайн






Вот такой дизайн у нас получился в итоге, с парой изменений для разных страниц. Готовые PSD-дизайны, конечно же, можно приобрести на сайте ThemeForest.net.

Пара слов в заключение

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

Автор: Marko Prljic

Источник:http://net.tutsplus.com/

Редакция: Рог Виктор.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Создание веб-сайта: как создать красивый сайт

При создании веб-сайта эстетика - это еще не все, но она определенно имеет значение.

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

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

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

Зачем создавать веб-сайт с помощью конструктора веб-сайтов?

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

Вот три преимущества использования конструктора веб-сайтов.

1. Вы можете использовать шаблоны веб-сайтов, разработанные профессиональными дизайнерами.

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

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

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

2. Вам не нужно учиться программировать.

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

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

3. Вы можете сделать сайт своим.

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

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

Как создать веб-сайт с помощью конструктора веб-сайтов

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

1. Выберите конструктор своего сайта.

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

При поиске лучшего конструктора веб-сайтов для вас подумайте:

Выясните, каковы ваши основные приоритеты в конструкторе веб-сайтов, и найдите тот, который предоставляет все необходимое.

2. Выберите понравившийся шаблон.

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

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

3. Выберите цветовую схему.

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

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

Если вы действительно не знаете, как выбирать цвета, которые хорошо смотрятся вместе, вы можете найти в Интернете ряд бесплатных ресурсов, которые помогут. Поищите вдохновение на таких сайтах, как Design Seeds и Color Hunt. Или воспользуйтесь инструментом Canva Color Wheel, который использует «теорию цвета», чтобы подобрать идеальное сочетание цветов.

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

4. Создайте руководство по стилю для своего сайта.

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

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

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

5. Определите цели своего веб-сайта.

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

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

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

6. Уточните свои сообщения.

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

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

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

7. Определитесь со страницами и организацией вашего сайта.

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

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

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

8. Приступите к работе над созданием своего сайта.

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

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

9. Запустите его кто-нибудь другой, чтобы получить второе мнение.

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

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

Раскройте свой прекрасный веб-сайт

После всей этой работы ваш веб-сайт готов для более широкой аудитории.Защитите хостинг веб-сайтов (если вы еще этого не сделали) и опубликуйте его в Интернете.

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

Если вы готовы подписаться на услугу хостинга и создать свой собственный веб-сайт, свяжитесь с HostGator сегодня.

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

Связанные

.

6 советов по созданию привлекательного веб-дизайна

Знаете ли вы, что 48 процентов людей говорят, что дизайн веб-сайта является определяющим фактором номер один для доверия к бизнесу?

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

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

Ознакомьтесь с этими потрясающими тенденциями веб-дизайна на 2020 год

1. Добавляйте только необходимые элементы, которые повышают ценность вашего сайта

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

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

Каждый элемент на вашем сайте должен иметь цель.

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

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

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

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

2. Дизайн для первых пользователей

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

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

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

Пример: Мы снова обратимся к веб-сайту Zillow, как к яркому примеру хорошего дизайна.

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

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

3. Выберите цвета, соответствующие вашему бренду

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

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

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

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

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

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

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

4. Добавьте визуальные элементы, чтобы сделать свой сайт красивым

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

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

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

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

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

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

Пример: Airbnb имеет чрезвычайно наглядный сайт, который привлекает пользователей к своей странице.

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

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

5. Выбираем правильный шрифт

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

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

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

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

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

6. Протестируйте свой сайт

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

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

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

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

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

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

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

Начните создавать свой красивый веб-сайт сегодня

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

В WebFX мы создаем настраиваемые, адаптивные веб-сайты для наших клиентов. Наша команда из 200+ экспертов поможет вам создать веб-дизайн, уникальный для вашего бизнеса. Если вам нужен веб-сайт быстро, мы можем помочь вам создать красивый веб-дизайн всего за 30 дней с нашей программой RainmakerFX.

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

.

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


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера