Как написать красивый сайт

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

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

С Вами Виктор. Сегодня я хочу предоставить Вашему вниманию еще один интересный перевод с сайта //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

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

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

E-mail:contact@webformyself.com

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

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

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

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

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

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

Смотреть

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

Почему хороший дизайн помогает продавать

Что входит в дизайн сайта

Сейчас, ни один популярный сайт не обходится без услуг профессионального дизайнера.

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

Что такое дизайн сайта

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

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

Почему хороший дизайн помогает продавать

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

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

Что входит в дизайн сайта

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

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

Давайте разберем 6 основных элементов, из которых состоит дизайн:

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

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

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

Адаптивный дизайн

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

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

Мобильная версия сайта

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

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

Дизайн-концепция сайта

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

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

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

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

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

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

В графическом дизайне сайта есть четыре основных составляющих:

  • Выполнение работы в соответствии с требованиями современности. Для того чтобы понять, что именно вас вдохновляет и является трендовым, советуем поискать тренды веб дизайна на таких сайтах как Pinterest, Awwwards, Behance. Выбирая с помощью фильтров необходимые референсы, вам нужно понять, что именно в них привлекает внимание, и как аудитория реагирует на их содержание. Попробуйте составить список с плюсами и минусами разных веб-страниц.
  • Визуальное оформление сайта должно быть выполнено так, чтобы покупателям было удобно и просто с ним работать. Ui дизайн должен не отвлекать внимание клиента, а настраивать на определенную задачу. Поэтому не стоит использовать различные яркие и кричащие надписи, голографию или анимацию – это усложнит визуализацию страницы.
  • Дизайн должен быть эксклюзивным. Благодаря качественному оформлению, бренд запомнится покупателям и будет ассоциироваться с положительными эмоциями.
  • После того, как страница готова, необходимо протестировать ее на целевой аудитории. Это нужно для того чтобы понять, насколько сайт удобен, прост в использовании и внешне нравится покупателям.

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

№ пп

Наименование этапа

Описание этапа

1

Разработка технического задания

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

2

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

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

3

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

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

4

Определение структуры сайта

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

Заказ дизайна сайта

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

В основном, данную деятельность осуществляют фрилансеры или веб-студии.

Фрилансеры

Найти исполнителя, в данном случае, можно на различных фриланс-биржах.

Есть ряд плюсов и минусов при обращении с заказом к фрилансеру:

Плюсы

Минусы

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

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

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

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

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

Вот список самых популярных фриланс – бирж, где можно найти исполнителя:

  • Freelance.ru
  • Behance
  • UpWork
  • Dribbble
  • WorkZilla
  • KWork

Веб-студии

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

Так же как и с фрилансерами, в работе со студиями есть преимущества и недостатки:

Плюсы

Минусы

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

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

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

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

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

В списке ниже вы можете увидеть топ лучших веб-студий в России:

  • Коптельня – веб-студия по быстрой разработке веб-приложений и сайтов. Помогут разработать дизайн сайта или веб-приложение за 1 месяц. Не боятся закатать рукава и ускориться.
  • ADN – агентство полного цикла. Услуги включают маркетинговую стратегию, брендинг, производство рекламных материалов, разработку сайта, поддержку и эффективное привлечение клиентов.
  • Сибирикс – разработка сайтов highload-класса. Первая в России студия, внедрившая гибкую методологию Scrum в процесс разработки сайтов.
  • Uplub – создают функциональные сайты и сервисы с фокусом на дизайн, которые позволяют расти, зарабатывать или экономить, занимаются разработкой логотипов.
  • Pinkman – дизайн студия, в которой команды с особым мнением создают и развивают цифровые продукты.

FAQ

Где научиться дизайну сайтов?

Вариантов множество.

Первый – поступить в ВУЗ. Например, в Московский Художественно-Промышленный Институт, направление подготовки «Дизайн», специализация «Графический дизайн». Поступить в институт может быть сложно, нужно набрать высокие балл по спец. предметам, но если у вас получится пройти, вы обеспечите себя прибыльной профессией.

Второй вариант – обучение в онлайн-школах. Например, школа Нетология разработала курс «Как стать UX/UI-дизайнером: создаём свой первый сайт». На курсе вы узнаете об основах UX/UI-дизайна и поймёте, как сделать первый шаг в новой профессии; попрактикуетесь в UX/UI-дизайне и спроектируете собственный лендинг. Этот интенсив является бесплатным. Но в интернете можно найти и множество платных курсов, которые введут вас в профессию и даже дадут диплом об окончании школы. Любому дизайнеру будет интересно пройти такие курсы в качестве повышения квалификации.

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

Сколько стоит дизайн сайта?

Цены на разработку дизайна абсолютно разные и могут начинаться от 7 000 руб. и до бесконечности. Все зависит от сложности работы и исполнителя.

Подведем итоги

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

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

Содержание:

  • Дизайн сайта: подготовка
  • Постановка целей для будущего сайта
  • Выбор типа сайта
  • Выбор платформы для создания сайта
  • Как сделать дизайн сайта
  • Как сделать макет сайта
  • Полезный и красивый дизайн сайта: советы
  • Примеры красивого дизайна сайтов
  • Дизайн сайта: где искать вдохновение
  • Дизайн сайта: что стоит запомнить

Дизайн сайта: подготовка

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

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

Постановка целей для будущего сайта

Определяемся с целью, например:

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

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

Карточка на «Леруа Мерлен» позволяет удобно изучить, сравнить и купить товар

Карточка на «Леруа Мерлен» позволяет удобно изучить, сравнить и купить товар

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

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

Выбор типа сайта

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

Лендинг, или посадочная страница — это такой моносайт, который посвящен одному предмету и имеет всего один CTA. Например, страница конференции с кнопкой «Зарегистрироваться». Скорее всего, в содержании будет описание конференции, список спикеров и докладов и основные тезисы, почему стоит прийти.

Пример дизайна сайта-лендинга конференции SendPulse и eLama

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

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

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

Выбор платформы для создания сайта

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

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

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

Как сделать дизайн сайта

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

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

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

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

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

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

Если от руки рисовать сложно, найдите сервис для создания структуры сайта. Можете использовать один из этого списка:

  • Octopus — бесплатно для одного проекта, далее от 8 долларов в месяц.
  • Gloomaps —  простой и бесплатный, но нужно каждые 2 недели заходить в проект, иначе он заархивируется. Проекты только публичные.
  • Flowmapp — бесплатно для одного проекта на максимум 100 Мб. Здесь можно не просто создать структуру из блоков, а для каждого блока сразу выбрать и подредактировать примерное содержимое.
  • Writemaps — простой и лаконичный сервис чисто для быстрого создания карты. Бесплатно на три проекта, далее от 15 долларов в месяц.

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

Те, кто не умеет рисовать или работать в редакторах, могут найти онлайн-конструктор интерфейсов. Большинство из них построено по принципу drag-and-drop. Пользоваться такими просто: находите шаблон нужного элемента, перетаскиваете его на макет и редактируете под себя.

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

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

Вот несколько таких редакторов (все на английском, но интуитивно понятны):

  • Mockflow — онлайн, бесплатно для одного пользователя и одного проекта на три страницы, далее от 14 долларов.
  • Ninjamock — онлайн, бесплатно для одного проекта на максимум 200 элементов на странице. Далее от 6 долларов.
  • Balsamiq — приложение для Windows или Mac, есть онлайн-версия. Бесплатный триал на 30 дней, далее от 9 долларов в месяц.
  • wireframe|cc — онлайн-сервис. Бесплатный триал на 7 дней, далее от 16 долларов в месяц.
  • Moqups — есть минимальный бесплатный аккаунт, которого хватит для создания простого лендинга. Если нужно больше — от 13 долларов в месяц.

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

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

Полезный и красивый дизайн сайта: советы

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

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

Строгое оформление страницы на сайте юридической фирмы

Строгое оформление страницы на сайте юридической фирмы

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

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

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

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

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

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

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

Располагайте рядом объекты, которые связаны друг с другом по смыслу

Располагайте рядом объекты, которые связаны друг с другом по смыслу

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

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

CTA кнопка призывает пользователя оставить заявку

CTA кнопка призывает пользователя оставить заявку

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

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

Примеры красивого дизайна сайтов

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

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

Дизайн сайта по продаже одежды

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

Сайт дизайнера интерьеров

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

Дизайн сайта юридического сервиса

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

Дизайн сайта косметической компании

Следующий дизайн сайта не совсем обычный — это сайт инновационного города Иннополис в Республике Татарстан. Главная страница представлена в виде майндкарт, элементы которых оживают при наведении курсора. В подразделах — аккуратная блочная верстка с яркими фотографиями.

Дизайн сайта инновационного города в Татарстане

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

Дизайн сайта для продажи квартир в ЖК Санкт-Петербурга

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

Дизайн интернет-магазина по продаже чая и чайных напитков

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

Дизайн сайта издания Time

Это сайт башни Space Needle — главной достопримечательности американского города Сиэтла. Здесь круто поработали с фото: большое изображение в шапке сайта погружает в атмосферу вечернего города. Градиентный фон имитирует цвет неба на закате.

Дизайн сайта американской достопримечательности — башни Space Needle

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

Дизайн сайта креативного маркетингового агентства

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

Дизайн сайта: где искать вдохновение

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

Вот сайты, на которые можно заглянуть:

  • Behance
  • Dribbble
  • Awwwards
  • SiteSee
  • Land-book
  • 99designs
  • Pinterest

Дизайн сайта: что стоит запомнить

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

Начните создание дизайна сайта с подготовки, она состоит из трех шагов:

  • поставьте цели;
  • выберите тип сайта — лендинг или многостраничник;
  • выберите платформу, на которой будете создавать сайт.

Непосредственно при разработке дизайна сайта следуйте этим трем шагам:

  • соберите референсы — примеры, которые вам понравились;
  • отрисуйте карту сайта, если у вас многостраничник;
  • создайте шаблоны страниц.

Помните о восьми правилах в дизайне сайта:

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

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

Анна Гореванова

Анна Гореванова


дизайнер группы разработки карты рассрочки «Совесть» (QIWI)

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

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

***

«Это бессмысленно», — сказал разум.
«Это нелепо», — заметил опыт.
«Это бесполезно», — отрезал здравый смысл.
«О, вот так красиво!» — обрадовался заказчик.

Брифинг

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

  • Чем занимается компания?
  • Какое целевое назначение сайта для бизнеса (для осуществления продаж, генерации лидов, информирования или укрепления бренда и прочее)?
  • Кто целевая аудитория сайта (какие социально-демографические характеристики, стиль жизни, что их мотивирует и расстраивает)?
  • Есть ли у заказчика понимание или видение того, какую функциональность должен обеспечивать сайт?
  • Какую задачу или «боль» пользователя решает компания посредством сайта?
  • Имеется ли брендбук или фирменный стиль?
  • Кого компания считает своими конкурентами?
  • Какие сайты с точки зрения дизайна (референсы) нравятся?

Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. 🙂 Но не стоит паниковать, разделите слона на части и действуйте пошагово.

Дизайн сайта определяет его цель

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

Ниже рассмотрим наиболее распространённые типы сайтов.

Сайт-визитка (landing page)

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

Пример лендинга программы лояльности «Совести»:

https://sovest.ru/loyalty_info

Корпоративный сайт

Создаётся компаниями, чтобы рассказать клиентам о себе — кто мы такие, чем занимаемся, наша миссия, контакты, структура, портфолио и прочее. Может быть нужен

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

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

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

https://sovest.ru/

Сайт-витрина

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

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

https://www.marykay.ru

Интернет-магазин

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

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

Пример — Aliexpress, сайт интернет-магазина во всей красе.

https://aliexpress.ru

Портал

Сайт, который объединяет разные информационные и сервисные функции — почту, новости, блог, вакансии, форумы и др. Пример — Яндекс, Хабр, даже Вконтакте тоже можно назвать порталом.

Как думаете, насколько сложно такое сделать? 🙂 Даже если это будет не настолько крупный портал, для его создания нужно не только сделать продуманные с точки зрения UI и UX макеты, но и иметь немалые технические мощности, ведь предполагается, что посещаемость у порталов высокая.

Пример — сайт Мэра Москвы, там и новости, и статьи, и услуги.

https://www.mos.ru

Зачем изучать конкурентов и на что обращать внимание?

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

Есть как минимум три причины посмотреть сайты конкурентов:

  • Понять общую ситуацию на рынке. Кто какие продукты/услуги предоставляет, кто большой и лидер, а кто маленький, но быстрорастущий, кто на какие ЦА ориентирован и какую функциональность предоставляет. Обычно это задача заказчика — разобраться со всем этим и передать вам, но не всегда бывает праздник на нашей улице.
  • На основе этого определить, какую функциональность стоит и не стоит делать на вашем сайте. Важно выявить точки паритета и дифференциации: не проигрывать конкурентам (у всех есть фильтрация по цене, а у меня нет, хотя пользователям это нужно) и при этом отличаться от конкурентов (у меня есть фильтрация по цвету, а у других нет).
  • Красть как художник. Посмотрите референсы, чтобы синхронизироваться во вкусах с заказчиком, взять на заметку способы реализации той или иной фичи, а также переиспользовать существующий пользовательский опыт. Люди уже привыкли, что на сайтах вот такое расположение корзины, им будет странно, если у вас будет что-то офигенно-хитро-креативно-необычное.

Mobile First или не First?

Откуда начать — с веба или с мобилки? Дизайн сайта нередко сегодня начинается не с web-версии, а с мобильной. Люди всё больше и больше онлайн-времени проводят в мобильных устройствах, а не за широкими экранами. Из-за этого больше внимания стоит уделять мобильной версии, поскольку с большей вероятностью пользователи будут взаимодействовать именно с ней. Рекомендую начинать дизайн с мобильной версии, а потом уже адаптировать элементы под более широкие экраны — так вы избежите ситуации, когда красивый и изысканный блок на широком экране не понятно, как адаптировать под мобилу (которая важнее).

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

***

Другие части серии

  • Часть вторая: разрабатываем визуальную концепцию сайта
  • Часть третья: инструменты для создания макета сайта
Как создать красивый и удобный сайт за 8 шагов | Сайт Варвары Лялягиной StartBlogUp.com

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

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

Шаг 1. Подумайте о том, каков ваш бренд

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

Характер бренда отражается на сайте, в наружной рекламе, в видео и текстах бренда. Поэтому перед разработкой сайта cформулируйте, каков характер у вашего бренда.

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

ПОДПИСЫВАЙТЕСЬ НА МОЙ ИНСТАГРАМ С ЕЖЕДНЕВНЫМ ВДОХНОВЕНИЕМ И НАХОДКАМИ ДЛЯ ТВОРЧЕСКИХ ПРЕДПРИНИМАТЕЛЕЙ

Шаг 2. Соберите мудборд сайта

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

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

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

Мудборд для создания красивого сайта | Сайт Варвары Лялягиной StartBlogUp.com
Это пример мудборда для сайта одной из моих клиенток. Как вы думаете, какие характеристики бренда она хотела отразить?

Определите визуальные элементы стиля: цветовую гамму, шрифтовую пару, характерные графические элементы — линии, стрелки, обводки, выноски и другие, которые вам хотелось бы использовать. Проще всего это сделать на слайде в Power Point, Pinterest или графических редакторах вроде Canva.

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

Шаг 3. Составьте портрет своей идеальной клиентки и читательницы

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

Максимально чётко опишите человека, которого вы хотите видеть на своём сайте. Не общими словами «Женщина, 25-40 лет, двое детей», конкретизируйте, чтобы её образ стал объёмным и реалистичным.

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

Коллаж идеальной пользовательницы сайта| Сайт Варвары Лялягиной StartBlogUp.com
Я не люблю ограничиваться словесным портретом, а составляю коллаж, который отражает характер и интересы моей идеальной читательницы. Это творческая задача помогает действительно представить себе мою клиентку и пользовательницу сайта.

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

Шаг 4. Сформулируйте главное действие, которое должна выполнить посетительница сайта

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

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

Шаг 5. Проанализируйте сайты конкурентов и соберите референсы

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

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

Проанализируйте сайты конкурентов и соберите референсы | Сайт Варвары Лялягиной StartBlogUp.com
Для создания скриншотов страниц я использую расширение для Хром браузера GoFullPage и сервис Skitch, в котором можно разметить любой скриншот или картинку, надписать комментарии и выделить важные элементы.

Шаг 6. Нарисуйте карту сайта для удобной навигации

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

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

Карта сайта для удобной навигации | Сайт Варвары Лялягиной StartBlogUp.com

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

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

  • mindmeister.com
  • mindmanadger.com
  • xmind.net

Шаг 7. Нарисуйте макеты основных страниц сайта

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

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

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

Макет сайта, который позволит создать сайт красивым и удобным | Сайт Варвары Лялягиной StartBlogUp.com

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

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

Инструменты для создания прототипов и макетов страниц:

  • ninjamock.com
  • balsamiq.com
  • mockflow.com
  • moqaps.com
  • карандаш и бумага.

Если все предыдущие шаги сделаны, то у вас будут все данные для составления внятного и исчерпывающего техзадания разработчику:

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

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


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

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

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

Содержание

  1. Поставьте цель, проанализируйте ЦА и разработайте пользовательский сценарий
  2. Выберите тип сайта
  3. Проведите анализ конкурентов
  4. Соберите референсы
  5. Подготовьте визуальную концепцию
  6. Подберите цвета
  7. Подберите типографику сайта
  8. Подготовьте прототип 
  9. Подготовьте иллюстрации и составьте ТЗ для верстальщика
  10. Создайте веб-сайт
  11. Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование
  12. Красивый и функциональный дизайн сайта: советы

Поставьте цель, проанализируйте ЦА и разработайте пользовательский сценарий

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

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

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

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

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

Погружение в пользовательский опыт поможет сформулировать цель и разработать функциональный дизайн, а не просто красивое оформление контента. Например:

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

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

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

  • короткое ТЗ;
  • прототип с основным функционалом;
  • план работы с четкими этапами, обязанностями и дедлайнами.

Выберите тип сайта

Лендинг

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

главная страница сайта заголовок крупным шрифтом

Первый экран лендинга тату-студии

Интернет-магазин

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

пример главной старицы интернет магазина Lamoda

Дизайн сайта интернет-магазина Lamoda

Сайт-витрина

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

пример страницы сайта-витрины без корзины и возможности совершить покупку

Дизайн сайта-витрины Audi. Источник

Корпоративный сайт

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

  • кто мы;
  • чем занимаемся;
  • какова наша миссия;
  • какие задачи мы решаем;
  • как с нами связаться.

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

пример главной страницы корпоративного сайта

Дизайн корпоративного сайта брендингового агентства Funky

Портал

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

верстка главной страницы портала

Портал Госуслуг

Проведите анализ конкурентов

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

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

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

  • какой пользовательский сценарий реализован, как построена структура сайта;
  • сам дизайн — цветовые решения, композиция, иллюстрации, анимация.

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

программа для создания майндмэп

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

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

Соберите референсы

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

интерфейс Behance главная страница

Вдохновение для создания дизайна собственного сайта можно искать на Behance 

Подготовьте визуальную концепцию

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

пример мудборда в Pinterest для создания сайта

Мудборд можно собирать в Pinterest

Подберите цвета

Если у компании уже есть фирменный стиль, то за основу можно взять фирменные цвета. Но если нужно разрабатывать палитру, стоит воспользоваться рекомендациями профессионалов. Например, можно поискать идеи в книге Йоханнеса Иттена «Искусство цвета».

Вот несколько правил сочетания цветов:

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

Подберите типографику сайта

  • Выберите шрифтовую пару. Лучше, когда на веб-сайте использовано не больше двух шрифтов. Три, пять — это уже перебор. Идеально, когда шрифты — из одной гарнитуры. Еще гармонично смотрятся сочетания шрифтов с засечками и без.
  • Сформируйте гайдлайны. Здесь нужно отталкиваться от контента. Будет ли это просто текст, или вы хотите сделать врезки, подписи и прочие элементы. Заголовки должны быть контрастными, это помогает читателю быстрее ориентироваться в контенте. Основной текст должен быть легко читаемым, не крупным, но и не слишком мелким.
  • Придерживайтесь составленного плана. Новый стиль текста не нужно добавлять просто так. Только в том случае, если в этом есть серьезная необходимость или какой-то контент невозможно оформить теми стилями, что уже выбрали.

Подготовьте прототип 

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

прототип и готовый сайт в Figma Community

Прототип сайта Game Boy. Источник

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

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

Подготовьте иллюстрации и составьте ТЗ для верстальщика

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

  • как элементы сайта должны вести себя при масштабировании;
  • какие есть сценарии анимаций;
  • особые пожелания, уточнения, дополнения.

Создайте веб-сайт

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

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

Проверьте сайт с разных устройств, запустите трафик, проведите A/B-тестирование

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

Красивый и функциональный дизайн сайта: советы

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

  • Учитывайте ожидания потенциальных клиентов. Если это сайт строительной компании, то люди ждут аккуратности и пунктуальности. От юристов ждут строгости и умения решить любой вопрос. 
  • Применяйте модульную сетку в дизайне. Рисуют сетку горизонтальную и вертикальную, и по ее линиям компонуют элементы. Это самый простой ответ на вопрос, как сделать красивый дизайн сайта. 
  • Учитывайте правило близости. Оно означает, что рядом стоящие элементы человек воспринимает как связанные. Рядом нужно располагать объекты, которые объединены между собой по смыслу: заголовок и основной текст, например. 
  • Помните про воздух. Между элементами должно быть пространство. Исключением могут быть концептуальные сайты, где объекты намеренно расположены рядом. Но обычно желание уместить все и сразу — как попытка надеть все украшения на все пальцы. Это не просто безвкусно, но еще и сложно воспринимать. Пользователь просто закроет такой сайт и не сможет решить свои задачи.
  • Будьте сдержанными. Не стоит перебарщивать в попытке сделать красивый визуал. Обилие шрифтов, оттенков, геометрических форм может усложнить пользовательский сценарий. Перед тем как добавить тот или иной элемент, спрашивайте себя: точно ли он решает какую-то задачу или просто захотелось заполнить пустоту? Сайт должен быть в первую очередь функциональным, в этом и заключается вся красота.
  • Создавайте адаптивный дизайн. Сейчас сайты просматривают в первую очередь с телефонов, и адаптировать ресурсы нужно с учетом этого. В то же время важно, чтобы и с экранов компьютеров, ноутбуков, планшетов все элементы хорошо читались, кнопки нажимались, важные блоки не уезжали за края экрана.
  • Выбирайте подходящие под концепцию изображения. Хорошо использовать реальные фотографии заказчика — это внушает больше доверия со стороны пользователей. В то же время можно воспользоваться фотостоками, так как сделать хороший дизайн для сайта можно и без снимков от заказчика. Важно, чтобы картинки были хорошего качества, подходили по смыслу и помогали пользователям совершать целевые действия на ресурсе.
  • Делайте акцент на действии. На каждой веб-странице пользователь должен что-то сделать: оставить заявку, заполнить анкету, купить, посмотреть работу, прочитать статью. В идеале весь контент страницы должен логичным образом подводить к этому действию. Так как правильно — создавать дизайн сайта, который будет работать на цель, а не просто выполнять декоративную функцию.

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

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

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

  • В первую очередь изложите свои мысли на бумаге
    • Начинайте с эскизов элементов верхнего уровня
    • Используйте сетку в вашем PSD
    • Подбор шрифтов
    • Выбор цветовой гаммы
    • Разделяйте структуру сайта
    • Переосмысление привычных элементов
    • Бросайте себе вызов
    • Уделяйте внимание деталям
    • Оттачивайте каждый компонент, так как из этих кирпичиков складывается общий дизайн проекта
    • Работайте над четкостью и читаемостью элементов
    • Приводите в порядок ваши PSD
    • Рассчитывайте на лучшее, но будьте готовы к худшему
    • Углубляйтесь в проектирование так глубоко, пока это не будет вызывать у вас ненависть
    • Старайтесь как можно быстрее достигнуть общего видения с клиентом
    • Станьте лучшим другом для девелопера
    • Презентация: поясните мне все так, как будто я ребенок четырех лет
    • Любите каждую свою идею, но не слишком увлекайтесь ею
    • Отслеживайте развитие своего дизайна в течение всего процесса жизнедеятельности сайта
    • Делитесь с общественностью информацией по ходу разработки вашего проекта

В первую очередь изложите свои мысли на бумаге

Предварительные наброски для проекта серии о городах мира

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

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

Начинайте с эскизов элементов верхнего уровня

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

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

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

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

Используйте сетку в вашем PSD

Пример 978-разрядной сетки с базовой линией в 10 пикселей

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

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

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

Подбор шрифтов

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

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

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

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

Выбор цветовой гаммы

Используйте ограниченный набор цветов и тонов, чтобы избежать визуальной перенасыщенности

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

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

В качестве примера можно взять такие сайты, как Facebook, Twitter, Quora и Vimeo.

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

Разделяйте структуру сайта

Чем проще структура сайта, тем легче пользователям ориентироваться в ней

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

На самом деле не нужно размещать огромное количество панелей перехода к другим разделам — все должно быть подчинено идеологии «Что я могу сделать здесь?».

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

Переосмысление привычных элементов

Нужна ли нам кнопка «Поиск»? Практика показывает, что в большинстве случаев ответ будет отрицательным

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

Шаблоны проектирования и конвенции применяются в веб-разработках, потому что они работают.

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

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

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

Уделяйте внимание деталям

Игра в стадии разработки: взгляд на детали

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

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

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

Оттачивайте  каждый компонент, так как из этих кирпичиков складывается общий дизайн проекта

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

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

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

Работайте над четкостью и читаемостью элементов

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

Кроме эстетики, есть чисто практические причины обеспечивать четкость и корректность элементов.

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

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

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

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

Рассчитывайте на лучшее, но будьте готовы к худшему

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

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

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

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

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

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

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

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

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

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

Станьте лучшим другом для девелопера

Девелоперы — творческие люди, и они любят свою работу точно так же, как вы. Но они не всегда вовлечены в процесс создания сайта от и до.

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

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

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

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

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

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

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

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

Делитесь с общественностью информацией по ходу разработки  вашего проекта

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

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

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

Понравилась статья? Поделить с друзьями:
  • Как написать красивый рассказ
  • Как написать красивое письмо другу
  • Как написать красиво слово биография
  • Как написать красивое описание товара
  • Как написать красивый отзыв парикмахеру