Как создать красивый сайт или блог самому? Создать красивый сайт


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

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

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

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

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

Поехали…

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Автор: 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 за ближайшие 6 дней

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

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

Сейчас, чтобы сделать оба изображения немного выступающими, создайте новый слой и установите для него режим «Перекрытие» (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 за ближайшие 6 дней

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

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

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

webformyself.com

Как создать красивый сайт или блог самому

Как создать красивый сайт или блог самому

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

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

В мае будет два года как я создала мой самый первый сайт — Про СММ. На тот момент я совсем ничего не знала о том как создать сайт, как сделать так, чтобы выглядел он прилично и нравился посетителям. Да что тут говорить! Я и статьи-то писать толком не умела. Для меня все было в диковинку и пришлось шаг за шагом осваиваться и учиться все делать самой. Я и сейчас сайтом занимаюсь без чьей-либо помощи — потихоньку и самостоятельно.

Шаблоны для сайта Elegant Themes

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

Так как бесплатный шаблон меня совсем не устраивал, а денег на дизайнера у меня не было, я начала искать достойные премиум темы, которые не разорили бы начинающего блогера. Уже не помню как, но я наткнулась на очень хорошего разработчика — Elegant Themes. Их темы мне как-то сразу приглянулись, да и цена мне показалась приемлемой. Ведь практически за ту же цену, которую просят другие разработчики шаблонов, я получила доступ не к одной, а 87-и красивым, современным темам, да еще и 5-и очень полезным плагинам в добавок. Я, конечно, не собиралась использовать все темы сразу, но сам факт был очень приятен 🙂 Сегодня, оглядываясь назад, я считаю, что покупка доступа к этим темам и плагинам, была моим самым лучшим вложением в блог и уже окупилась сторицей.

Примечание: ребята, в июле 2016 я изменила дизайн сайта, так что то, что Вы сейчас видите, это не больше Divi. Я решила изменить направление развития моего блога, поэтому сайт я полностью переделала. Тем не менее, Диви есть и остается одной из лучших тем на рынке и я ее очень рекомендую. Кстати, этим летом они выпустят большое и очень шикарное обновление! Теперь изменять дизайн сайта можно будет прямо «бродя» по сайту, т. е. появится новый визуальный редактор в фронтэнде. Это будет очень удобно!

Оригинальных шаблонов у Elegant Themes, как вы уже поняли, очень много. Самое интересное, что все темы очень разные и подходят под различные проекты: от блогов и портофолио, до интернет-магазинов и сайтов компаний. Если вы просматривали сайты разработчиков, то вы, наверняка, видели, что часто не так то и просто найти различия между шаблонами одного девелопера. Все как-то монотонно и скучно. У ребят из Elegant Themes проблем с фантазией явно нет. Не смотря на большой ассортимент шаблонов, самой популярной и сильной темой считается Divi, которой, кстати, пользуюсь и я. На ее базе я создала уже несколько сайтов совсем разных тематик. Думаю, что один раз попробовав Divi, будет очень сложно переключиться на что-то еще. Такая вот она мощная и гибкая!

Чем мне нравится Divi?

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

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

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

Они, кстати, сейчас работают над универсальным конструктором, который будет работать на всех темах. Чем это хорошо? А хорошо это тем, что, если вы решите переключиться с одного шаблона на другой, ваш сайт не превратиться в не понятное месиво, а приобретет новый дизайн в считанные секунды. Это очень большое преимущество, так как у кого из нас есть время ковыряться в сайте по несколько дней при переходе с одной темы на другую?!

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

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

Плагины Elegant Themes

Помимо замечательных шаблонов, у Elegant Themes есть еще 2 супер плагина: «Сайт в разработке» и «Социальные кнопки». На самом деле плагинов у них 5, но 3 из них (мобильный сайт, короткие коды и конструктор) теперь встроены во все темы, так что устанавливать их особой надобности нет.

Плагин monarchПлагин monarchСамым мощным плагином я считаю Monarch, который добавляет очень красивые социальные кнопки (как все социальные кнопочки на моем блоге) на сайт. Честно скажу, что я перепробовала н-ное количество плагинов социальных кнопок, но ни один другой плагин не обладал таким функционалом, как Monarch. После установки плагина, количество людей, желающих поделиться моими статьями выросло в десятки раз! Да-да, я не преувеличиваю! После таких ошеломительных результатов, я бы не задумываясь платила по 20 долларов в месяц за такой невероятный плагин, но он ведь бесплатный для подписчиков Elegant Themes. Честно говоря, я бесконечно благодарна разработчикам за такие подарки своим клиентам. Мало какие компании цифровых продуктов сегодня дают намного больше, чем берут!

Чем хорош этот плагин вкратце и не скажешь, так как этому можно посвятить отдельную статью. Может даже и не одну — столько у него всяких функций! Что есть? Различный дизайн кнопок (цвет, форма, счетчики и о-о-очень многое), гибкость в выборе и расположении кнопок, адаптативность (то есть работает на всех видах устройств), подробная статистика. В последнем обновлении, разработчики добавили еще одну супер крутую функцию — социальные кнопки во всплывающих окнах, которые могут появляться после определенного триггера, например, после комментария, покупки, % скроллинга страницы и т. д. Эту функцию я пока что даже не использовала, но возможности у нее, как вы сами понимаете, невероятные!

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

Это вроде бы все, что мне хотелось рассказать об Elegant Themes и моем очень приятном опыте использования их тем. До того, как появилась Divi, я использовала другую их тему — Nexus, которая мне не совсем подходила из-за необходимости использовать крупные фото и отсутствия конструктора. Очень скоро в свет выйдет еще одна сильная тема под названием Extra, подходящая для проектов с большим количеством контента. Скорее всего я на нее переключусь, так как обещают, что тема будет очень легкая, социально-направленная и удобная для таких проектов, как Про СММ. Жду не дождусь!

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

Удачного вам сайтостроения!

www.pro-smm.com

Красивый веб-дизайн сайтов, самые красивые сайты мира по дизайну

Красивый веб-дизайн сайтов: топ-10

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

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

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

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

10. http://cpeople.ru/

Практический курс по созданию дизайна сайтов в Photoshop

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

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

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

9. http://www.styiens.com/

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

8. http://www.pawelwojcik.com/

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

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

7. http://bubblesfilm.com/

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

6. http://www.sensisoft.com/

Практический курс по созданию дизайна сайтов в Photoshop

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

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

Этот сайт поразил меня красотой современных flash-эффектов, которые позволяют посетителю путешествовать во времени, телепортируясь по нескольким мировым столицам периода с 1920 по 2030 год. Вы сможете погрузиться в атмосферу Парижа, Москвы, Вашингтона, Токио и Лондона под аккомпанемент завораживающего музыкального сопровождения.

5. https://houseofborel.com/

Главная страница выполнена в формате видео-презентации, которая дает понять направленность и идеологию компании «House of Borel». Картинка смотрится впечатляюще и вызывает интерес. В данный момент подобный формат широко используется лишь в силиконовой долине, однако совсем скоро он доберется и к остальным уголкам мира.

4. http://www.whitefrontier.ch/

Четвертая строчка моих любимых дизайнерских оформлений достается официальному сайту пивной компании «White Frontier». Этот проект выполнен в необычном стиле, который мало где можно встретить. Не забудьте зайти на страницу с описанием продукции, насквозь пропитанную харизмой и традициями компании.

3. http://www.chrisducker.com/

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

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

2. http://www.mezcalbuenviaje.com/

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

1. http://www.dangersoffracking.com / http://www.soleilnoir.net

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

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

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

Практический курс по созданию дизайна сайтов в Photoshop

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

webformyself.com

Красивый дизайн сайта: правила и ошибки создания

Красивый дизайн сайта

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

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

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

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

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

Как сделать красивый дизайн сайту для друга

Приведу пару пунктов, на которые надо обращать внимание при создании красивого сайта:

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

2) Сделайте сайт простым в использовании, никаких замудреных меню быть не должно.

3) Подберите красивое сочетание цветов на сайте, постарайтесь добиться максимального баланса.

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

5) По возможности я вам советую отдать предпочтение только одному шрифту.

6) Не перегружайте страницы сайта большим количеством баннерной рекламы, это вызовет захламленность сайта. Ставьте примерно 1 или 2 баннера, но не больше.

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

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

Ошибки в дизайне сайтов

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

Ошибки в дизайне сайтов

Запомните главные ошибки, которые допускают начинающие веб-дизайнеры:

1. Яркий фон, отвлекающий от содержимого сайта.

2. Несочетаемые цвета в оформлении страницы.

3. Фреймы, так как они порождают массу неудобств для пользователя. К примеру, такую страницу нельзя добавить в закладки.

4. Фиксированная ширина страницы.

5. Наличие горизонтальной прокрутки страницы.

6. Открытые пустые страницы или страницы, находящиеся в стадии разработки.

7. Flash-Анимация, которая не только отвлекает от основного содержимого, но и мешает при ознакомлении с сайтом.

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

9. Открытие ссылок и разделов меню в новом окне.

10. Обилие баннеров и рекламных блоков. Они должны использоваться в меру.

11. Внезапно всплывающие окна с рекламой или любой другой информацией.

12. Автоматически проигрываемые медиафайлы, особенно, если пользователь не имеет возможности остановить проигрывание файла.

13. Наличие на странице пустого, незаполненного пространства. Это касается верхней части сайта, пустых боковых колонок.

14. Отсутствие каких-либо картинок. В частности, в шапке сайте.

15. Наличие анимационных изображений.

16. Обилие картинок и фотографий на сайте.

17. Слишком «тяжелые» изображения, которые долго загружаются.

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

19. Отсутствие поиска по сайту.

20. Отсутствие контактной информации, формы связи с владельцами или администраторами сайта.

21. Неправильно оформленная страница ошибки.

22. Расположение элементов сайта в необычных местах. К примеру, форма для регистрации на сайте всегда располагается в верхней части страницы.

23. Ошибки в меню, контактной информации.

24. Отсутствие кнопок «Назад», «На главную» на страницах сайта.

25. Сложный для прочтения шрифт на кнопках или в меню сайта.

26. Использование нестандартных шрифтов, которые отображаются не на всех компьютерах.

27. Разнообразные типы, размеры и цвета шрифтов, используемые в оформлении страницы. В дизайне следует использовать не более 5 вариантов шрифта.

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

seoslim.ru

Красивые сайты

01.10.2015 8 комментариев

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

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

1. Ryan Feerer

site1

2. Seán Halpin

site2

3. Curious Space

site3

4. MacRabbit

site4

5. OrangeYouGlad

site5

6. Michelberger hotel

7. Stacked Font

site7

8. Made of Sundays

site8

9. Amy Herndon

site9

10. These Are Things

site10

11. Carla Ferfolja • Never End Design

site11

12. Combadi

site12

13. Tsto

site13

14. More Hazards More Heroes

site14

15. Brisbane Wedding Photographer

site15

16. Hoodzpah Design Co.

site16

17. About Adham Dannaway

site17

18. Jesse Willmon

site18

19. Also

site19

20. Multiways

site20

21. Why Go Wild

site21

22. Brave the Woods

site22

23. Fuzzco

site23

24. WALLACE DESIGN HOUSE

site24

25. Helen & Hard

site25

26. FRÈRES D’ENCRE

site26

27. Denise Chandler

site27

28. Spokes

site28

29. Sweet Robot

site29

30. Marc Thomas

site30

31. Our Wedding

site31

32. Daydream Designs

site32

33. Bubble

site33

34. Pop Art Studio

site34

35. Kaktus

site35

36. Little Big Room

site36

37. Ruthless Spartans vs Cuddly Hipsters

site37

38.

39. Cat Rabbit

site39

40. LEG Work

site40

41. Kinetic V5

site41

43. Свадьба Артема и Юли

artemjuliawedding

44. Lorenzo Verzini

lorenzoverzini

45. Fernville

fernville

46. Fantasy Cartography

fantasy-cartography

Красивые шрифты от Google Web Fonts Оформление изображений на сайте: 10 идей
Поделиться:

html5book.ru

Примеры дизайна сайтов. Топ-15 примеров веб-дизайна 2016 года

Примеры дизайна сайтов. ТОП-15 2016 года

От автора: рад приветствовать моих любимых вебдизайнутых читателей. Хотите увидеть самые яркие и запоминающиеся примеры дизайна сайтов 2016 года? В этой статье я предоставлю ТОП-15 лучших, по моему мнению, ecommerce-проектов, поток вдохновения от которых просто в клочья раскрошит дамбу вашего сознания и сгенерирует крутые идеи!

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

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

15. mombook.ru

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

Практический курс по созданию дизайна сайтов в Photoshop

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

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

14. zuluandzephyr.com

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

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

13. wootten.com.au

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

12. lux-ticket.com

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

11. olea.com.au

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

10. dodgeandburn.com

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

9. skinnyties.com

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

Практический курс по созданию дизайна сайтов в Photoshop

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

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

8. mibolsa.com.au

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

7. satorisan.com

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

6. iskander-mebel.kz

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

5. lp.delta-boat.ru

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

4. etiquetteclothiers.com

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

3. pitangobikes.com

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

2. reebok.com

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

1. shop.bigcartel.com

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

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

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

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

Практический курс по созданию дизайна сайтов в Photoshop

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите пошаговую обучающую систему по веб-дизайну

Получить

webformyself.com

Как сделать красивый сайт - правила

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

По поводу цветового решения. Если строго следовать рекомендациям для веб-дизайнеров, то для цветового решения нужно использовать так называемую таблицу безопасных цветов (всего 216 цветов), или безопасную палитру. Почему она безопасная? Потому, что такая палитра обеспечивает точное соответствие отображения цветов на различных мониторах. Правило простое. Как известно, цвет задается шестнадцатеричным значением от 000000 (черный цвет) до FFFFFF(белый цвет). Так вот, безопасный цвет может содержать только следующие значения: 00, 33, 66, 99, CC, FF. Например: 003300, 6699СС, FF0099.

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

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

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

Правила, которые необходимо соблюдать, чтоб сделать красивый сайт:1. Рассматривайте каждую страницу сайта как цветовые пятна (текст тоже считается цветным объектом)

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

3. Цветовых пятен не должно быть много, чтоб глаза знали, где остановится, и за что зацепится.

4. Комбинируйте цветовые объекты в группы, которые концентрируют внимание в определенных местах

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

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

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

• на своих знакомых и родственниках (попросите их посмотреть на страницу в течение 5 секунд, потом расспросите о впечатлениях, задавайте вопросы)

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

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

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

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

Затем человек долго долго смотрит на своё творение. Оно ему нравится, он считает его совершенным и самым красивым сайтом. Оно и понятно, ведь это он сделал! Потом на этот сайт смотрят его друзья. И, конечно, говорят, что он им очень нравится! А иначе они и не скажут (ведь это друзья).

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

Через несколько часов (ведь так нетерпится узнать, что они говорят) человек снова заходит на форум. И каково же становится его разачарование, когда во всём топике ни оказывается ни одного ответа, похожего на то, чего он ожидал.

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

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

seoklub.ru