Как сделать дизайн сайта: Как сделать дизайн сайта / Skillbox Media

Содержание

Дизайн сайтов. Как самостоятельно сделать шаблон дизайна сайта?

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

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

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

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

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

В программе Adobe Photoshop есть специальный инструмент для разрезания изображения –

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

Когда изображение разрезано на необходимое количество частей, нужно его сохранить. В программе Adobe Photoshop это сделать легко. В меню File нужно выбрать пункт Save for Web&devices. В открывшемся диалоговом окне необходимо выбрать тип файлов «HTML&images», указать имя файла «index.htm» или «index.html» (расширение .htm предпочтительнее) и сохранить этот файл в корневую папку Вашего будущего сайта. Если все было сделано правильно, то в этой папке появится соответствующий файл index.html и каталог images. В images как раз и будут находиться все нарезанные кусочки изображения.

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

Заказать шаблон сайта Вы можете прямо сейчас!

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

Прежде чем верстать шаблон сайта в HTML/CSS, его надо проработать. Отрисовывать дизайн принято в программе Photoshop. Готовый макет сохраняется в файл формата

.PSD.

В качестве примера создадим дизайн сайта на рисунке ниже.

1. Открываем Photoshop и создаём в нём новый документ (Файл -> Создать или Ctrl+N).

2. Устанавливаем начальные параметры. На практике продумать дизайн с точностью до пикселя практически невозможно — в процессе вёрстки обязательно нужно будет что-то поменять, переместить, переделать. Поэтому размеры можно задавать приблизительные, причём ширину и высоту документа желательно указывать заведомо больше планируемых размеров сайта, чтобы в макете точно уместились все элементы. Наш документ сделаем 1000 пикселей шириной и 1500 пикселей высотой. Обратите внимание: пикселей, а не сантиметров. Другие параметры можно не трогать.

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

Если линеек нет — включите их (Просмотр -> Линейки или Ctrl+R).

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

4. Проверяем, чтобы размер шрифта был указан в пикселях, а не в пунктах. Если настроено не так, идём в Редактирование -> Настройки -> Основные, в отобразившемся окне переходим на вкладку Единицы измерения и линейки, в выпадающем списке Текст выбираем Пиксели и нажимаем OK.

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

Градиент.

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

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

В результате манипуляций градиент получился следующим.

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

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

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

Сохранить такую узкую полоску несложно.

6.1. Выбираем инструмент Прямоугольная область.

6.2. Выделяем полоску произвольной ширины, но по всей длине слоя.

6.3. Копируем выделенную область (Ctrl+C).

6.4. Создаём новый документ (Ctrl+N), устанавливаем для него ширину 1 пиксель и вставляем скопированное (Ctrl+V).

6.5. Сохраняем файл в JPG-формате.

7. Создаём фон страницы. Фоном будет простой белый цвет. Выбираем инструмент Прямоугольник и в окне свойств задаём нужные параметры. У нас получился прямоугольник 800×1100 пикселей, левый верхний угол которого лежит в точке 100,0.

8. Делаем фон шапки. Градиентная заливка, похожая на подложку, размерами 780x80px.

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

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

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

10. Аналогично вставляем остальные пункты меню.

11. Добавляем логотип. У нас уже есть готовый, поэтому его остаётся только аккуратно вставить в макет. Для этого нажимаем Файл -> Открыть, затем щёлкаем на изображении и, удерживая нажатой кнопку мыши, перемещаем его на заголовок документа-шаблона, когда он откроется, перетаскиваем картинку в нужное место макета и отпускаем кнопку мыши.

12. Пишем имя и слоган сайта. Уже известным нам инструментом Горизонтальный текст дополняем уже почти созданный логотип надписями.

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

14. Добавляем на только что созданный градиент текст-заголовок информационного блока.

15. Рисуем обрамление области. Для этого достаточно использовать прозрачный прямоугольник с чёрными линиями контура. Выбираем инструмент Прямоугольник, задаём тип заливки фигуры Нет цвета, щёлкаем значок Задать тип штриха фигуры и выбираем чёрный цвет, иначе линий не будет. Если контур получился слишком толстым, устанавливаем ширине линий значение 0,5 пт.

16. Ниже добавляем заголовок блока с градиентной заливкой, как в п. 12-13.

17. Создаём блок меню левой панели. Добавляем оранжевый прямоугольник шириной 100px с жёлтым контуром 0,2 пт.

18. Добавляем на него текст.

19. С помощью дублирования слоёв и линеек создаём ещё пять пунктов меню левой панели.

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

21. Добавляем фото в основную часть страницы, как мы делали это с логотипом. Для копирования изображения просто перемещайте его мышью, удерживая при этом нажатой клавишу Alt. Если вдруг картинка не подходит по размеру, используйте инструмент Трансформация (Ctrl+T).

22. Рисуем фон нижней части сайта — оранжевый градиент длиной 64 пикселя.

23. Сохраняем полоску нижнего фона шириной 1 пиксель в отдельный графический файл.

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

25. Сохраняем шаблон в файл формата .PSD (Файл -> Сохранить).

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

Теперь из PSD-макета остаётся средствами HTML/CSS сверстать шаблон сайта, но об этом я расскажу уже в следующей статье.

Полезные ссылки:

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

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

В своей работе довольно таки продолжительное время я использовал исключительно проприетарный софт, а именно Adobe Photoshop. Довольно таки продолжительное время — это около 8 лет (на 2014 год).

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

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

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

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

Какой софт я использовал в своей работе для этого урока:
— Ubuntu 14.04
— Gimp 2.8.10
— Gcolor
— Система сеток 960gs

Файлы урока, которые нам понадобятся, можно скачать с Яндекс.Диска: http://yadi.sk/d/edsbxnAeQmuyK.

В архиве вы найдете изображения для создания дизайна сайта, файл 960_grid_12_col.xcf — разлинованный в системе сеток 960gs макет для GIMP, необходимые шрифты, а также готовый, нарисованный мной макет сайта.

Внимание! Каждый элемент рисуем на новом слое.

Итак, приступим.

Шапка сайта
1. Откроем в GIMP систему сеток 960gs (файл 960_grid_12_col.xcf), создадим новый слой, нарисуем на нем в верхней части прямоугольник во всю ширину макета, высотой 140 пикселов. Зальем его градиентом — #111111 нижний цвет и #555555 верхний цвет.

2. Вытянем из верхней линейки горизонтальную направляющую и установи на отметке 60. Вставим логотип (файл logo.png) на новый слой таким образом, чтобы он прижимался к созданной направляющей и левой крайней направляющей системы сеток.

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

3. Создадим поле для поиска.
Нарисуем между крайней правой направляющей и 9-й колонкой прямоугольник с закругленными углами (радиус закругления 3 пиксела, высота — 26) и зальем его цветом #444445.
Применим к новому прямоугольнику фильтр Inner Shadow. Параметры фильтра:

Необходимо установить плагин Script-Fu Layer Effects, который есть в архиве — файл Layerfx.scm

Создастся новый слой с тенью, который будет располагаться выше прямоугольника поиска. Не снимая выделения с нового слоя с тенью, выполним команду «Выделение > Уменьшить» и уменьшим выделение на 1 пиксель. После этого выполним команду «Выделение > Инвертировать». Зальем 1-пиксельный край поля поиска заливкой цвета #626467:

Напишем в поле поиска «Искать по сайту…» шрифтом «Arial» (для Ubuntu шрифты MS можно установить командой sudo apt-get install msttcorefonts). Размер текста 12px, начертание курсивом, цвет #858787.

Теперь вставим иконку поиска (файл search.png), зальем ее цветом рамки #626467 и уменьшим так, чтобы она хорошо и гармонично смотрелась:

4. Левее поля поиска, между 4 и 8 колонками, напишем пункты главного меню. Шрифт PT Sans Narrow Condensed (из архива) размер 16, цвет #a6a6a6. Цвет первого пункта сделаем #e3e3e3 и подчеркнем. Друг от друга отобъем пункты меню пробелами.

5. Создадим 2 прямоугольника на одном слое шириной в рабочую область сетки, высотой 1 пиксель и расположим их друг под другом, примерно посередине шапки. Зальем верхний цветом #252728, а нижний #4a4b4b. После этого сотрем их края мягкой резинкой большого размера:

6. Над слоем полосы меню, которую рисовали в начале урока, создадим новый слой и нарисуем на нем овал, высотой в половину шапки и шириной во всю рабочую область сетки. Спрячем половину овала за верхней границей документа. Зальем его цветом #6E9FAE:

Теперь снимем выделение и размоем овал гауссовым размыванием (Фильтры > Размывание > Гауссово размывание).

Применим шум и Установим непрозрачность слоя 30%.

7. Ниже, между двухцветной линией, которую рисовали ранее, и нижней границей шапки, напишем подпункты, тем же шрифтом, что и пункты главного меню. Размер шрифта 14 пикселей. Цвет сделаем #6d7070, а первый пункт меню выделим цветом #d7d7d7.

Под слоем текста создадим новый и нарисуем прямоугольник со скругленными углами (радиус закругления 3 пиксела), зальем белым цветом и применим к нему фильтр Inner Shadow, который применяли ранее (Script-Fu > Layer Effects > Inner Shadow), со следующими параметрами:

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

8. Последний штрих в нашей шапке — легкий глянец верхней половины. Создадим слой над первым слоем, который делали и нарисуем прямоугольник во всю ширину документа, высотой — до разделительной полоски. Зальем его белым цветом и установим непрозрачность слоя 20%.

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

Выше темного слоя, который у нас получился, разместим текстуру фона (под кожу), а именно файл skin.jpg.

Уменьшим нашу текстуру до ширины 1390 пикселей, с помощью инструмента «Масштаб» и разместим в центре макета.

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

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

Сделаем непрозрачность «кожи» 70%.

Теперь нарисуем прямоугольник основного контента шириной в рабочую область сетки, высотой от шапки и до самого низа (от первой до последней колонки, не «заезжая» на крайние поля) и зальем его цветом #070707. Применим к прямоугольнику тень (Фильтры > Свет и тень > Drop Shadow). Размер (Blur Radius) тени установим 50 пикселей, непрозрачность (opacity) 100%.

10. Вставим на новый слой картинку hall.jpg, обрежем снизу (выделением и удалением слишком длинного пола зала) и уменьшим до ширины рабочей области сетки (940 пикселей), сохраняя пропорции. Вставим также под шапку, в центре макета:

Применим к изображению фильтр Inner Shadow, со следующими параметрами (может долго отрабатывать):

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

Можно создать декоративную полоску внизу шапки высотой в один пиксель, во всю ширину документа и залить ее цветом #1d1e1e:

11. Теперь добавим заголовок баннера (цвет белый, шрифт PT Sans Narrow Condensed, 26 пикселов) и сделаем под ним выделение прямоугольником со скругленными углами (радиус закргления 8 пикселов), который зальем черным цветом и сделаем непрозрачность 45%. У текста сделаем тень (Фильтры > Свет и тень > Drop Shadow).

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

13. Вставим картинку kolonki-1.png в последние 5 колонок сетки, как показано на картинке:

Внизу колонок можно удалить белесые элементы и немного затемнить нижнюю часть инструментом «Кисть» черным цветом с непрозрачностью 30%.

14. Создадим новый слой в рабочую ширину сетки и поместим его под слой с фотографией зала. На новом слое нарисуем овал в рабочую ширину сетки и высотой 60 пикселов, как рисовали для ленты верхнего меню и зальем его цветом #6E9FAE. Размоем его, как в пункте 6 и установим непрозрачность 10%.
В результате должен получится такой эффект (в уменьшенном виде):

15. Добавим прямоугольник высотой 4 пиксела и шириной в рабочую область сетки, поместим над созданным в предыдущем пункте оверлеем. Закрасим новый прямоугольник цветом #13191d. Внимание! Прямоугольник не должен выступать над колонками (аудиооборудование).

16. Справа и слева добавим 1 пиксельные полоски в ширину и высотой — от фотографии зала, до самого низа, чтобы обозначить центральную часть контента сайта (цвет — #12181c):

Подвал (footer) сайта
Заключительная часть урока по созданию дизайна сайта в GIMP, в которой создадим элементы подвала сайта.
17. Создадим группу слоев, в которой разместим прямоугольник (на новом слое) шириной 270 и высотой 140 пикселов, с закругленными углами (радиус закругления 4 пиксела). Зальем прямоугольник градиентом от цвета #0D0D0D снизу и до цвета #3A3A3A сверху.

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

18. Создадим новый слой и добавим картинку kolonki-2.png, уменьшив до необходимых размеров.

19. Добавим заголовок нашему баннеру, установив цвет первого слова — #c1c1c1, а цвет модели — #ffffff. Шрифт заголовка — PT Sans Narrow Condensed. Размер первого слова — 20 пикселов, размер названия модели — 26 пикселов.

Добавим заголовку тень, как в 11 пункте.

20. У любого объекта в дизайне, если это какая-то модель или какой-то визуальный объект, должна быть тень. Так что добавим новый слой и поместим его под слой с колонкой. И инструментом «Кисть» аккуратно нарисуем тень под колонкой черного цвета, непрозрачностью 25%. Тут главное — не переусердствовать.

21. Напишем описание баннера и скопируем группу слоев с баннером 3 раза, разместив их на равном расстоянии друг от друга. Цвет шрифта описания — #a0a0a0, семейство шрифтов — Arial, а размер — 13 пикселей.

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

Обратите внимание, 2 последних баннера я намеренно затемнил для того, чтобы показать, что выбран первый вариант на картинке как текущий. Добиться этого можно, установив непрозрачность для слоя фона, либо для группы слоев целиком.
Полноэкранный результат выполнения данного урока вы можете посмотреть здесь: http://rtfm.org.ru/24/

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

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

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

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

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

Создать новый документ.
Добавить фон.
Добавить картинки.
Настроить стандартные кнопки.
Наполнить блоки текстовым контентом.
Оценить результат.

Шаг 1

Начнем с самого начала. Просто запустите Photoshop и создайте новый документ (CTRL + N) с параметрами, указанными на скрине ниже.

Шаг 2

Теперь вы должны добавить подходящий узор на свой фон.

Layer Style->Blending options->Pattern Overlay.

Шаг 3

Вы хотите создать потрясающий дизайн? Тогда используйте сетчатую структуру для проектирования. Поместите сетчатую структуру в ваш дизайн сайта с интервалами 60px и 20px.

Шаг 4

Итак … теперь пришло время создать меню для будущего сайта. Используйте инструмент Rounded Rectangle для его создания (радиус — 3 px). Ширину для меню возьмем — 940 px, а высоту — 34 px.

Чтоб сделать это меню более привлекательным, перейдите в Blending Options->Drop Shadow. Используйте настройки, которые вы можете увидеть на скриншотах:

Blending options->Inner Shadow

Для меню выбран цвет #6bafff.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool. Вы можете создать свой дизайн с любым шрифтом, который вам нравится. В примере использовался шрифт Aller [bold]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и вы должны показать, что они активны. Поэтому возьмем, к примеру, create — это прямоугольник (цвет, который для него использовался: # 5a90e5).

Результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Используйте инструмент Rounded Rectangle (радиус — 3px), чтоб создать форму поиска со следующими параметрами: 124px и 26px.

Добавляем внутреннюю тень:Blending Options->Inner Shadow.

Создайте один прямоугольник с размерами 41px и 32px.

Blending Options->Drop Shadow

Blending Options->Inner Shadow

Blending Options->Color Overlay (цвет — #6bafff)

Теперь пришло время добавить привычный для функции поиска значок. Откройте Linecons Free->Vector Icons Pack и найдите там значок поиска.

И вот результат:

Шаг 8

Связь с социальными сетями очень полезна и важна для любого сайта. Попробуем создать простую кнопку Facebook.С помощью инструмента Rounded Rectangle (радиус — 3px) создаем кнопку.

Затем используем инструмент Rectangle (закругленный), чтоб создать квадрат (удерживая кнопку Shift) с размером — 16 px.

Выберите инструмент Pen Tool и отрежьте половину этого квадрата.

Нажмите Edit->Transform->Rotate, чтоб поместить этот треугольник на левую сторону прямоугольника. Выделите все слои кнопки Facebook и объедините их (Ctrl + E).

Blending Options->Inner Shadow:

Blending Options->Color Overlay (#c1cac5 )

Теперь добавьте текст Перейти или т.п. на кнопку Facebook.

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете использовать букву F, и выделить ее синим цветом (# 5a90e5).

Результат:

Шаг 9

Создайте новую форму: ширина 940px, высота 372px.

Как всегда, добавьте тень:

И границу: Blending Options->Stroke (20px, цвет # 6bafff).

Шаг 10

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

Шаг 11

Добавьте текст. Вы должны использовать тот же шрифт, который использовали для панели меню. Установите размер шрифта на 30px.

Поиграйте с настройками смешивания: добавьте белую тень, цветное наложение (# 6aaefd) и внутреннюю тень, чтоб получить вот такой результат:

Шаг 12

Заполните четыре столбца (ширина каждого — 240 px) текстовым контентом. Лучше добавить разный текст в каждый столбец.

Шаг 13

Создайте кнопку Читать дальше с помощью инструментов, которые мы использовали ранее. Blending options->Inner Shadow, Drop Shadow, Color Overlay (# 919392).

Step 14

Добавьте текст Читать далее или что-то подобное на кнопку.

Шаг 15

Теперь необходимо отделить основную часть созданного сайта от нижней. Создайте линию в 1px, используя стили кнопки Читать далее.

Шаг 16

Ваш следующий блок может быть разделом на любую тематику. Используйте инструмент Rounded Rectangle для создания квадрата (удерживайте нажатой кнопку Shift). Радиус — 3px, ширина и высота — 138px.

Перейдите в Blending options ->Stroke, чтоб ввести настройки: размер-20px, цвет # 919392.

Скопируйте и вставьте этот элемент 5 раз. Поместите эти квадраты с интервалом 20px и добавьте на них фото партнеров, сотрудников и т.д.

Шаг 17

Футер сайта так же важен, как и заголовок. Спросите себя: “Что вы хотите, чтоб ваши посетители делали, когда они дошли до нижней части страницы сайта?” Ответ, который вы получите, станет отличной отправной точкой для разработки футера вашего сайта.

Добавьте градиент, например # 3a8df1 — # 6bafff.

Шаг 18

Добавьте еще три блока в футер на свой выбор, учитывая ответ на вышеуказанный вопрос. Используйте шрифт Arial Regular для заголовков (30px) и добавьте стили, например, как на скриншоте ниже:

Используйте шрифт Arial Regular для текста в разделах (12px).

Поместите несколько стандартных значков в один из разделов футера — RSS, Google Plus + или Twitter.

Ну, собственно и все! Результат:

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

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

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

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

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

Просто взгляните на сайт Википедии. Минимум дизайна. Максимум функциональности. И это прекрасно!

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

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

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

Не нужно впихивать невпихуемое. Иногда приходит пора остановиться.

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

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

Нужен ли вообще уникальный дизайн?

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

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

Мы даём вам готовый шаблон, а вы даже не меняете на нём стандартные фотографии. Не надо так.

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

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

Способы придания шаблону уникальности

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

Естественно, мы рекомендуем использовать уникальную графику: изображения, логотип, иконки и прочее. Это, так сказать, джентльменский набор хорошего сайта. Также не лишним станет и правка шрифтов по умолчанию. В А5 можно выбрать любые Google-шрифты. Главное – не переборщите с их количеством. 2-3 достаточно, не больше. Всё должно быть легко читаемо и вписываться в общую концепцию дизайна.

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

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

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

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

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

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

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

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

Выводы

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

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

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

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

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

Как сделать дизайн сайта в фотошопе с нуля – Блог opengs.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правый клик на файле
В контекстном меню “Открыть с помощью”
Выбери браузер которым пользуетесь (у меня hrome).
После того как изображение откроется наведи на него курсор, он сменится на лупу с плюсиком
Кликни один раз для отображения изображения в полный размер.

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

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

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

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

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

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

Открыть его в Photoshop. Желательно, что бы он был хорошего качества и имел формат png с прозрачным фоном.
Выбрать инструмент “Перемещение” (это стрелочка напоминающая курсор)
Открой вкладку с логотипом
Наведи курсор на изображение логотипа
Нажми и не отпускай левую кнопку мыши
Тащи изображение на вкладку с макетом
Не отпуская кнопки задержи без движения курсор на нужной вкладке до тех пор пока она не станет активной и не появится твой макет
Теперь тяни курсор на холст с макетом и отпусти левую кнопку мыши.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

Дизайн сайта в фигме за 15 минут: делаем макет с иллюстрациями

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

Подготовка к созданию дизайна сайта
Первым делом вам нужно скачать и установить комплект, который я для вас подготовил. С его помощью вы сможете ускорить работу при создании Landing Page. Нажмите здесь, чтобы скачать комплект
Чтобы установить комплект перейдите в раздел «Drafts» и перетащите его к другим файлам, которые у вас есть. Также слева, сверху есть иконка «Import». Можете её нажать и выбрать файл «Sirius.fig» на вашем компьютере.
Установка плагина с иллюстрациями для создания дизайна сайта в фигме
В этом уроке мы будем использовать плагин с иллюстрациями «Storyset by freepik», который вы можете установить перейдя по ссылке. Для его установки нажмите на кнопку «Install» сверху, справа.
Пошаговая инструкция по созданию дизайна сайта в Figma
Создание первого экрана
Первым делом, вам нужно взять элементы из комплекта, который вы ранее установили. Рекомендую взять шапку и раздел с текстом, как показано выше. Поместите шапку к тексту.
Чтобы активировать плагин, который мы установили «Нажмите на меню слева», далее перейдите в «Plagins» и выберите из списка «Storyset by freepik».
В плагине можно выбрать стиль иллюстраций. Выбираю первый из списка, затем клацаю на нужную мне иллюстрацию.
Помещаю иллюстрацию во фрейм к нашим элементам и тексту.
Выбираю фрейм и в правой панели, внизу надписи «Fill» ставлю значение цвета #241543.
Затем меняю цвет текста на белый.
Удаляю не нужные элементы в иллюстрации. Чтобы выбрать какой-то элемент, нажимаю на клавшу «Ctrl» и кликаю на левую клавишу мыши для выбора объекта за 1 клик.
Создаю круг с помощью инструмента «Ellipse».
Помещаю круг во фрейм и перемещаю на задний план. Для этого нажимаю на комбинацию горячих клавиш «Ctrl + Alt + [».
Изменяю цвет круга на #3B246B.
Создание карточек внизу первого экрана
Затем копирую из комплекта карточки товара. Для копирования нажимаю «Ctrl + C».
Чтобы вставить элементы нажимаю «Ctrl + V».
Копирую верний элемент из карточки зажав левую клавиши мыши и клавишу Alt. Тяну в сторону.
Создаю внутри этого прямоугольника ещё один прямоугольник. Для этого активирую инструмент «Rectangle» сверху.
Выбираю 2 элемента и выравниваю их относительно друг друга, нажав на иконки, как показано выше.
Выделяю 2 прямоугольника, нажимаю правую клавишу мыши и выбираю «Frame seleciton».
Переименовываю слой на «Img».
Копирую группу элементов с зажатой клавишей «Alt».
В итоге создаю 6 прямоугольников, как показано выше.
Запускаю плагин с иллюстрациями «Storyset by freepik» и нажимаю на прямоугольник. Затем на иллюстрацию. Аналогичную операцию проделываю с другими 6 прямоугольниками.
Выбираю кнопки и цены, с зажатыми клавишами «Ctrl» «Shift». Затем удаляю нажав на клавишу «Backspace».
Получаются карточки, без цены и кнопки.
Перемещаю созданные прямоугольники с иллюстрациями между прямоугольниками, которые находятся в карточках товара.
Удаляю не нужные элементы сверху карточек. Получается 3 карточки с иллюстрациями.
Дублирую карточки, нажав на «Ctrl + D». Затем помещаю 3 оставшиеся иллюстрации в эти карточки.
Получилось 6 карточек с иллюстрациями.
Перемещаю карточки к нашему фрейму.
Изменение цвета в дизайне сайта с иллюстрациями в Figma
Далее выбираю иллюстрации и справа, внизу надписи «Selection colors» выбираю синий вместо того синиего цвета, который есть сейчас.
Все элементы имеют значение «Синий» в цветовой палитре.
Если его изменить например на розовый, то цвет всех элементов также изменится.
Можно дополнительно скопировать какие-то элементы в комплекте. Например текст с цифрами.
Затем разместить их внизу заголовка.
Удаляю подзаголовок и меняю цвет вставленного текста на белый.
Вот, что получается в итоге использования этих иллюстраций, плагина и комплекта, который я для вас подготовил. Как сделать страницы с ошибкой 404 смотрите в видео выше.
Заключение
Итак, в этом видео вы узнали как сделать сайта (дизайн лендинг пейдж) в фигме. Также разобрались с плагином, который позволяет вставлять классные иллюстрации. Смотрите другие уроки по веб-дизайну, которые помогут разобраться в программе Figma и набить руку.
Автор статьи: Владимир Чернышов
Когда вам следует (или не следует) нанимать веб-дизайнера
Создание веб-сайта — это серьезное дело — оно позволяет разместить в Интернете частичку себя или своего бизнеса в надежде расширить вашу аудиторию. Мы все хотим быть уверены, что наши сайты производят наилучшее первое впечатление, особенно с учетом того, что данные показали, что огромные 75% доверия к вашему присутствию в Интернете обусловлены качеством их веб-дизайна.
Естественно предположить, что единственный способ получить великолепный сайт — это разориться, наняв профессионального веб-дизайнера. И в некоторых случаях это определенно правильно, но не всегда.
Чтобы помочь вам понять, что лучше всего подходит для вашего сайта, мы провели собственное исследование и опросили:
Люди, которые наняли дизайнера для своего сайта
Люди, которые использовали конструктор веб-сайтов сами по себе
Сами профессиональные веб-дизайнеры
Теперь давайте проведем вас через то, что они нам рассказали!
Нужно ли мне нанимать веб-дизайнера?
Вам следует подумать о найме веб-дизайнера, если:
У вас есть значительный бюджет, который можно потратить на свой сайт
Вы готовы подождать как минимум несколько недель, пока не появится конечный продукт
Вы не хотите разобраться с любым дизайном или техническими аспектами самостоятельно
При написании этой статьи мы поговорили со многими веб-дизайнерами, и почти все они дали нам одинаковые критерии.Вот что сказал дизайнер Тарик Квинтанс:
«Вам следует использовать веб-дизайнера, если вы готовы платить больше, и если ваш бизнес требует уникального подхода.
Наличие веб-дизайнера гарантирует, что все, что вам нужно, будет от бренда и будет иметь индивидуальный вид. Также здорово иметь дизайнера, который позаботится о том, чтобы ваш сайт был одинаковым для настольных и мобильных устройств, и не только выглядел, но и отлично себя чувствовал «.
Вам, , не нужно нанимать веб-дизайнера, если:
Вы бы предпочли более доступный вариант
Вы хотите принимать непосредственное участие в процессе проектирования
Вы хотите быстро выйти в Интернет
… В этом случае вам понадобится экономичная альтернатива, например, конструктор веб-сайтов — мы обсудим их более подробно в конце этой статьи.
Сравнение пользователей: конструктор и конструктор сайтов

John Ross, Test Prep Insight
Платный
для создания своего сайта
веб-дизайнер
Вы использовали дизайнер с самого начала?
Когда мы только начинали нашу компанию и обладали ограниченными ресурсами, я начал с создания нашего веб-сайта самостоятельно на WordPress. Я просмотрел несколько видеороликов на YouTube и многое понял методом проб и ошибок.Однако, несмотря на ряд привлекательных тем, предлагаемых в WordPress, наш UI [пользовательский интерфейс] был ужасен. Мы доводили дело до тех пор, пока у нас не появилось немного денег, а затем немедленно передали нашу веб-разработку на аутсорсинг профессиональной фирме для полной модернизации.
Почему вы решили нанять профессионального дизайнера?
Профессиональные веб-дизайнеры хорошо разбираются в пользовательском интерфейсе, чего нет у большинства владельцев малого бизнеса. Наш опыт заключается в нашем основном бизнесе, а не в веб-дизайне. С другой стороны, веб-дизайн — это их работа , и они каждый день видят самые актуальные тенденции и технологии.
Какой бюджет у дизайнера?
Составление бюджета для проекта веб-дизайна может быть сложной задачей, поэтому мы в основном полагались на молву, полученную от коллег за веб-дизайн, а также на то, что мы читали на форумах. Мы также отобрали от трех до четырех заявок на наш проект, чтобы сравнить цены между фирмами. Это хороший способ установить ориентир.
Тем не менее, я бы посоветовал не выбирать автоматически самую дешевую ставку. Как и большинство вещей в жизни, вы часто получаете то, за что платите.Наш первый веб-разработчик сделал самую низкую ставку, но обанкротился. Мы выполнили 15% работы, а после получения второго промежуточного платежа он бросил нам вызов. Поэтому я советую выбирать фирму с солидной репутацией (проверяйте отзывы клиентов и бизнес-рейтинги Google), даже если они немного дороже.

Джонатан Фрей, Urban Bikes Direct
Построил свой сайт с
0 нанять профессионального дизайнера?
Обычно я предпочитаю использовать конструктор веб-сайтов.Платные версии почти каждого конструктора веб-сайтов включают экспертную поддержку клиентов, вооруженную конкретными знаниями о самой технологии, на которой работает мой бизнес. Базовый код и шаблоны дизайна созданы для той цели, для которой я их использую, и служба технической поддержки хорошо с ними знакома. Служба поддержки часто может решить проблемы мгновенно. Для онлайн-бизнеса это бесценно.
Насколько вас устраивает сайт, который вы создали самостоятельно?
Я доволен практически каждым сайтом, который я создавал с помощью конструктора сайтов! Это всегда (относительно) беззаботный опыт, потому что я знаю, что получу, по крайней мере, функциональный веб-сайт с надежным дизайном.
Есть какой-нибудь совет для других людей, рассматривающих возможность создания веб-сайтов?
Спросите себя, насколько важно поразить вашу аудиторию действительно особенным веб-сайтом. Это может быть очень важно. В этом случае вы, вероятно, захотите нанять дизайнера. Если вы не думаете, что уникальный дизайн сильно поможет — или если слишком много вспышки может даже навредить вашим целям, — возможно, вам подойдет конструктор веб-сайтов.
Test Prep Insight (построено с помощью веб-дизайнера)
Urban Bikes Direct (создано с помощью конструктора веб-сайтов)
Есть еще вопросы о профессиональном дизайне веб-сайтов?
Вы можете нажать на вопрос ниже, чтобы развернуть его и узнать больше.
Чем именно занимается веб-дизайнер?
Работа веб-дизайнера заключается в создании макета веб-сайта путем создания страниц, сочетающих текст, графику, видеоклипы и многое другое. По сути, они заставляют контент и структуру веб-страницы работать вместе, чтобы создать отличный опыт.
Веб-дизайнеры в основном работают с интерфейсом веб-сайта или визуальной частью, с которой взаимодействуют пользователи (в отличие от серверной части , или невидимой части веб-сайта, где хранятся все данные).
Общие задачи веб-дизайнера включают:
Обеспечение визуальной привлекательности страницы и простоты использования
Обеспечение хорошего соответствия дизайна страницы на настольных и мобильных устройствах
Создание макетов веб-страниц, которые можно протестировать по удобству использования
Что не может сделать веб-дизайнер?
Может возникнуть соблазн подумать о найме веб-дизайнера как о билете в один конец на полноценный веб-сайт, но это не совсем так.Некоторые части создания веб-сайтов выходят за рамки того, для чего вы наняли веб-дизайнера. В частности, следует помнить о двух частях: веб-дизайнеры не являются веб-разработчиками , и они также не стратеги бренда!
Веб-дизайн и веб-разработка часто идут рука об руку, но — это не совсем одно и то же. В то время как дизайнер сосредоточен на визуальных аспектах веб-сайта, разработчик больше сосредоточен на технических элементах внутренней части веб-сайта.Другими словами, работа веб-разработчика состоит в том, чтобы взять чертежи, созданные дизайнером, и воплотить их в жизнь, написав код для сайта.
Стратегия бренда — это тоже не работа веб-дизайнера. Это то, что вы можете передать на аутсорсинг брендинговому агентству, или , вы можете сделать это сами. Под «стратегией бренда» мы подразумеваем задачу создать уникальную идентичность, которую вы хотите, чтобы ваш бизнес / портфолио / побочная суета имела. Ваш веб-сайт — это первый инструмент в вашем арсенале, когда дело доходит до создания бренда в Интернете, поэтому легко подумать, что веб-дизайнер может позаботиться об этом за вас, но в конечном итоге веб-сайт — это инструмент, который помогает донести ваш бренд до зрители.Это не движущая сила самого бренда (это вы!).
Существуют ли разные типы веб-дизайнеров?
Да! Если честно, существует бесчисленное множество разных веб-дизайнеров, занимающих разные ниши для разных проектов. Но есть два более крупных и конкретных типа, о которых вам нужно знать, — это дизайнеры User Experience (UX) и дизайнеры пользовательского интерфейса (UI).
Дизайнеры UX ориентированы на визуальные взаимодействия, которые пользователь будет иметь с вашим веб-сайтом — UX был описан как способ проектирования веб-сайтов, ориентированный на человека.Основная цель UX-дизайнера — сделать так, чтобы пользователи могли выполнять желаемые задачи как можно проще и приятнее. Дизайнеры UX в первую очередь озабочены тем, насколько интуитивно понятна веб-страница для пользователя.
Дизайнеры пользовательского интерфейса ориентированы на цифровое взаимодействие пользователя с вашим сайтом. В эту категорию попадают такие элементы, как кнопки, значки и интервалы. Дизайнеры пользовательского интерфейса в первую очередь озабочены тем, насколько эффективно веб-страница будет работать для пользователя.
Сколько времени это займет?
График работы с веб-дизайнером будет зависеть от размера проекта. Например, если вы хотите нанять дизайнера для создания базового бизнес-веб-сайта с менее чем шестью страницами — вашими основными домами, О нас, контактами и галереей — это может занять всего пять дней, в то время как для более крупных проектов требуется должны быть запланированы за несколько месяцев вперед.
Если на этом этапе вы решили нанять веб-дизайнера, но не уверены, что , когда будет подходящим временем для этого, не беспокойтесь — это тоже распространенный вопрос!
Как правильно нанять веб-дизайнера
Профессионально разработанный веб-сайт — огромный актив для любого бренда, будь то личное портфолио или перспективный бизнес.Однако хорошо спроектированный веб-сайт — это не шаг номер один. Сначала вам нужно иметь в виду две вещи: ваш бюджет и ваш бренд.
Когда у вас есть деньги
Подходящее время для того, чтобы сосредоточиться на дизайне вашего веб-сайта, — это когда вы добьетесь чистого положительного денежного потока, превышающего 1000 долларов в месяц. Конечно, вы можете поставить цель немного выше — 2000 долларов или больше, но мы предлагаем 1000 долларов в качестве отправной точки.
Достижение отметки чистого положительного денежного потока в 1000 долларов в месяц придаст вам больше уверенности (и импульса) в том, что у вас под рукой настоящий бизнес.Достижение этого рубежа доказывает, что вы сосредоточены на понимании того, чего хотят ваши целевые клиенты, и на предоставлении надежных услуг для удовлетворения их потребностей. Именно в этот момент вы действительно можете позволить дизайнеру заниматься технической стороной дела за вас.
Совет пользователя: Минди Грин, MG Beauty
«У меня есть веб-сайт с 2007 года, и я всегда пользовался услугами дизайнера. Я знаю свой бюджет и не вижу необходимости платить за сайт более 700 долларов. Меня процитировали аж 3500 долларов. Я не говорю, что они того не стоили — я просто не их покупатель.У меня небольшой бизнес, и я не вижу, чтобы платить столько за свой веб-сайт, тем более что социальные сети заняли место профессионалов красоты.
Я пользуюсь услугами веб-дизайнера, потому что кое-что у меня хорошо получается — макияж, прическа, публичные выступления и гардероб. Кроме того, я плачу людям за их талант. Я не хочу быть мастером на все руки — мне даже не нравится заниматься обслуживанием своих плагинов «.
Минди использовала профессионального дизайнера для создания сайта MG Beauty.
Когда у вас есть стратегия бренда
Дизайнеры могут создать профессионально выглядящий веб-сайт, если у вас есть деньги, чтобы им платить.Но они не несут полной ответственности за творческий процесс, лежащий в основе этого конечного результата.
Подумайте об этом так: , если вы готовы платить хорошие деньги, чтобы кто-то разработал ваш сайт, разве вы не хотите, чтобы кто-то сказал, как будет выглядеть конечный продукт?
И дело не только в личных предпочтениях. У вас есть всего семь секунд, чтобы произвести первое впечатление на зрителей, поэтому очень важно, чтобы дизайн вашего веб-сайта максимально эффективно отражал ценности вашего бренда — и никто не сможет лучше объяснить эти ценности, чем вы! Вот что сказал Тарик:
«Вам следует сосредоточиться на том, чем занимается ваш бренд: в чем ваша проблема; каковы ваши цели.Дизайнер поможет придумать решения, которые касаются не только бренда, но и распространенных шаблонов дизайна в Интернете, что облегчит вашим клиентам быстрое определение того, что происходит ».
После того, как вы определились с вашим брендом, пора передать вашу стратегию дизайнеру, который поможет вашему бренду полностью раскрыть свой потенциал.
Тем не менее, если вы хотите более активно участвовать в брендинге своего сайта, вы можете вместо этого воспользоваться конструктором веб-сайтов. Или, как золотую середину, вы можете использовать WordPress и приобрести профессионально разработанную тему.
Совет пользователя: Афома Умеси, Среднего уровня чтения, созданный с помощью WordPress
«Основная причина, по которой я уклонялся от веб-дизайнеров, заключается в том, что, будучи блоггером-любителем (изначально), я просто не мог позволить себе дизайнеров, чьи работы Мне нравится. Мне также не нравился тот факт, что мне пришлось бы держать многие из них под рукой позже, так как я не знал бы, как возиться со своим сайтом самостоятельно, если бы они с самого начала выполняли всю закулисную работу.
Я никогда не пользовался услугами профессионального дизайнера, и мне очень нравится свой веб-сайт.Я думаю, что эта тема великолепна, и есть так много минималистичных тем, которые вы можете настроить бесплатно или за недорогую разовую плату.
Если вы крупный блогер с деньгами и у вас есть другие важные дела, то непременно наймите дизайнера. Вы все равно будете заниматься другими делами, чтобы зарабатывать деньги, чтобы платить им. Но если вы только начинаете, у вас ограниченный бюджет или вы хотите заниматься практическими делами, я бы порекомендовал сделать это самостоятельно ». Модель
Reading Middle Grade была создана без помощи профессионального дизайнера.
Как мне нанять веб-дизайнера и работать с ним?
Совет эксперта: Ана Абрантес, дизайнер пользовательского интерфейса
«Думайте о работе с дизайнером как о совместной работе. Дизайнер готов помочь вам и вашему бизнесу, поэтому лучше всего было бы сообщить дизайнеру, если у вас нет большого опыта в области технологий / дизайна и вы не знакомы с конкретной терминологией — дизайнер всегда может адаптировать их общение и объяснения во время работы с вами.
Также задавайте вопросы, когда вы не уверены, что имеет в виду дизайнер — нет глупых вопросов, и никто не будет осуждать вас за то, что вы их задали. ”
Выбор дизайнера
Существует множество веб-сайтов, которые помогают людям находить веб-дизайнеров для работы (и мы поговорим о них через минуту). Но Интернет настолько обширен, что поначалу может быть трудно отделить качественные варианты от… не очень качественных вариантов .
Будет проще, если составит список критериев перед началом поиска. Вот на что мы рекомендуем обратить внимание при выборе дизайнеров:
Достаточно большое портфолио прошлых работ
Несколько четырех- и / или пятизвездочных отзывов от бывших клиентов
Предыдущий опыт руководства проектом
Совет эксперта: Маттео Миле, UI-дизайнер
«При приеме на работу дизайнера важно видеть, каковы его навыки управления проектами и какой у них опыт работы в области маркетинга. Поиск дизайнера, который знает правильные процессы, действительно может изменить правила игры.«
Маттео также сказал нам, что ничто не может сравниться с проверенной справкой.
«Для меня лучший способ — молва. LinkedIn — отличное место — попробуйте спросить некоторых из своих друзей, знают ли они кого-нибудь, и проверьте их профиль, чтобы узнать, что они сделали и где работали ».
Для тех, кто не разбирается в LinkedIn среди нас, Тарик также предложил Twitter как способ поиска дизайнеров:
«Twitter кажется более демократичным, но это будет зависеть от вашего охвата (насколько ваши сообщения будут показаны вашим сверстники).”
Составление бюджета для дизайнера
Мы хотели бы дать вам простой ценовой диапазон для работы с дизайнером, но будем честны: стоимость может варьироваться от нескольких сотен долларов до десятков тысяч, в зависимости от размер вашего проекта.
Стоимость найма дизайнера: пример из практики
Допустим, вы хотите создать простой веб-сайт для рекламы вашего местного бизнеса. Вы хотите разместить на своем веб-сайте пять страниц:
Домашняя страница с множеством фотографий вашего магазина
Страница «О нас» с оригинальным разделом «познакомьтесь с командой», со снимками головы и биографией
Контактная страница с форма для отправки по электронной почте и интерактивная карта вашего местоположения
Страница галереи с изображениями, которые вы можете увеличить, щелкнув мышью
A Раздел «Что говорят клиенты», где люди могут оставлять свои отзывы
Это не потребует особо тяжелых ресурс, который нужно делать хорошо.Итак, вы ознакомились с несколькими внештатными торговыми площадками (мы поговорим о них позже), и это общий профиль, который вы найдете для работы:
Дизайнер A
Лос-Анджелес, Калифорния
Я буду создайте оригинальный и удобный для мобильных устройств пятистраничный веб-сайт с адаптивным дизайном и загрузите контент за вас.
Стоимость: 40–105 долларов в час
Срок поставки: 5–8 недель
Работа с дизайнером: основные советы
Прежде чем мы перейдем к следующему разделу, мы собрали несколько основных советов, как имейте в виду, выбирая дизайнера и работая с ним, напрямую от клиентов с реальным опытом.
Джейк Ирвинг, Willamette Life Insurance:
Цена — не единственный важный фактор.
«Я сравнил цены нескольких разных дизайнерских компаний, но в конечном итоге я принял решение, основываясь на связи, которую я установил с командой. во время первоначального ознакомительного звонка. Я был уверен в том, что они разработали, и знал, что они сделают фантастическую работу ».
Ethan Taub, Creditry:
Не бойтесь конструктивной критики
«Глубокое знание дизайнерами пути веб-сайта и того, как потребители, вероятно, будут использовать сайт, может быть действительно ценным.И это то, что типичный конструктор веб-сайтов не может вам предложить. Вдобавок к этим знаниям дизайнеры также могут остановить вас, если ваше видение не работает по какой-либо причине. Наличие на борту профессионала всегда поможет готовому продукту стать чище ».
И прежде чем мы перейдем к следующему разделу, еще один совет от нас:
Не слишком беспокойтесь о местонахождении
Внештатные дизайнеры могут работать откуда угодно, и вы увидите дизайнеров со всего мира в любой ситуации. внештатный рынок.Не расстраивайтесь из-за часовых поясов или языковых барьеров, если вы найдете дизайнера, работа которого вам нравится — прелесть удаленной работы в том, что ее можно выполнять в любое время, а многие торговые площадки требуют владения общим языком (обычно английским ), чтобы зарегистрироваться. Хотите верьте, хотите нет, но мир внештатного дизайна был удобен для удаленных пользователей даже за год до пандемии COVID-19 в году (если вы помните те дни).
Где я могу найти лучшего веб-дизайнера?
На данный момент мы знаем, что нельзя упускать из виду мощь социальных сетей.
Но есть также множество международных торговых площадок, где обычные люди могут связаться с веб-дизайнерами по поводу проектов. Большинство этих торговых площадок функционируют как порталы вакансий, связывая дизайнеров-фрилансеров с такими же владельцами веб-сайтов, как вы, и позволяют вам принимать меры и осуществлять платежи через саму торговую площадку.
В большинстве случаев вы вводите требования своего проекта (например, «целевая страница» или «5-страничный веб-сайт»), и результаты поиска покажут вам множество различных дизайнеров, их портфолио и их цены.
Не знаете, с чего начать? Мы собрали пять наиболее распространенных торговых площадок, которые упоминались в наших беседах с дизайнерами, и обобщили их наиболее важные особенности ниже:
Toptal Fiverr Upwork 99designs
Рейтинговая система ✘ ✔ ✔ ✔
Проверка навыков ✔ ✘ ✔ ✔
9018 9018 ✔ Безопасные платежи 9018 9018 ✔
Инструмент регистрации времени ✔ ✘ ✔ ✘
Служба поддержки клиентов ✔ ✔ ✔ 904 ?
Мы рады, что вы спросили! Вот краткое изложение:
Надежная система отзывов поможет вам быстро устранить фрилансеров, с которыми у других клиентов был плохой опыт.
Проверка навыков инструментов дают вам четкое представление о том, подходит ли фрилансер для работы, которая вам нужна.
Безопасные платежи означают, что вы можете защитить себя с помощью инструментов управления платежами и выпускать платежи только тогда, когда вы удовлетворены выполненной работой.
Инструмент регистрации времени похож на встроенный инструмент управления персоналом, который позволяет отслеживать часы, которые фрилансер потратил на работу над вашим проектом.
Служба поддержки клиентов будет там, чтобы обратиться, если у вас возникнут какие-либо споры с вашим фрилансером.
Узнайте, как прошел процесс приема на работу Томаса Джепсена, генерального директора компании по дизайну домов Passion Plan:
«Я уже знал, что мне нужно создать что-то более продвинутое, чем то, что можно было сделать с помощью WordPress. Чтобы найти подходящего дизайнера, я фактически объявил конкурс 99designs, и около 30 дизайнеров представили свои предложения.
Чтобы получить дополнительные квалифицированные материалы, я также обратился к дизайнерам на платформе и призвал их представить свои работы.Я был очень доволен тем, что из этого получилось ».
А как насчет локального поиска?
Торговые площадки фрилансеров, о которых мы говорим выше, представляют собой глобальные сообщества дизайнеров, открытые для любого географического региона. Преимущество этого состоит в том, что вы получаете более широкий выбор талантов и можете позволить себе быть разборчивым.
Однако есть и более локализованные агентства веб-дизайна, с которыми вы можете работать, которые часто обслуживают конкретный город или регион. Использование местного агентства дает некоторые преимущества:
Рекомендации из уст в уста будет легче получить по телефону
Вы можете лично встретиться с дизайнером, прежде чем принять решение о работе с ним
Вы и ваш дизайнер будете работать в тот же часовой пояс
В конечном итоге решение о поиске дизайнера глобально или локально зависит от ваших личных предпочтений.Пока вы найдете дизайнера, цены и портфолио которого вас впечатлят, конечный результат не будет сильно отличаться!
Если вы хотите попробовать себя в местном агентстве веб-дизайна, мы рекомендуем разместить несколько ориентиров в LinkedIn и посмотреть, какие места в вашем районе настоятельно рекомендуются. Деловые обзоры в Google также являются хорошим способом оценить качество работы местного агентства.
Каковы альтернативы найму веб-дизайнера?
Если веб-дизайнер кажется вам не стоящим вложений или вы не думаете, что готовы к этому, у вас все равно есть множество вариантов. Конструкторы веб-сайтов — это более удобный, независимый и доступный способ для начинающих создать свой собственный сайт.
Как работают конструкторы сайтов?
Конструкторы веб-сайтов — это простые инструменты для создания веб-сайтов. Во-первых, вы выберете шаблон веб-сайта (большинство разработчиков веб-сайтов предлагают сотни вариантов шаблонов, которые можно отфильтровать по отраслям), что избавляет от необходимости создавать код веб-сайта с нуля.
Затем вы сможете настроить свой шаблон, изменяя цвета, шрифты и изображения, а также перетаскивая различные элементы (например, изображения и текстовые поля) в любое место на странице. Опять же, на любом из этих шагов абсолютно не требуется кодирования — хотя многие разработчики веб-сайтов предлагают вариант для кодирования, если вы хотите, что означает, что они в основном скользят по шкале, когда дело доходит до гибкости дизайна и необходимы технические знания.
Пользовательский обзор конструктора веб-сайтов: Дэйв Нильссон, ConvertedClick
«Конструкторы веб-сайтов предоставляют больше возможностей для творческого контроля [чем дизайнер]. В общем, конструктор сайтов воплощает ваши мысли в реальность. У вас есть активный контроль над каждой частью веб-сайта. Это гарантирует, что ваш сайт соответствует вашему видению и является очень рентабельным. Для меня лучше всего то, что он не требует программирования и позволяет мгновенно приступить к работе ».
Плюсы конструктора веб-сайтов Минусы конструктора веб-сайтов
• Доступно: при комплексной стоимости около 10–14 долларов в месяц конструкторы веб-сайтов — самый дешевый способ запустить сайт.
• Удобство для новичков: вам не нужен технический опыт, чтобы начать использовать инструмент перетаскивания конструктора веб-сайтов, и конечный продукт по-прежнему будет профессиональным и современным.
• Контроль: последнее слово в процессе проектирования остается за вами, и вы можете легко вносить новые изменения, когда захотите. • Ограничения дизайна: конструкторы веб-сайтов гибки, но они не могут сравниться с профессиональными возможностями дизайнера.
• Временные затраты: на то, чтобы ваш сайт заработал, потребуется несколько часов — на самом деле это меньше времени, чем работа с дизайнером, но вы будете работать сами.
• Недостаточная масштабируемость: у вашего сайта не будет столько возможностей для роста, сколько было бы с помощью профессионального дизайнера.
Как выбрать конструктор веб-сайтов?
Если вы решите пойти по этому пути, есть множество различных конструкторов веб-сайтов, из которых можно выбрать. Если это звучит ошеломляюще, не волнуйтесь: вы попали в нужное место. Наша команда провела часы, тестируя и исследуя множество платформ, и мы составили рейтинг всех лучших разработчиков веб-сайтов, чтобы избавить вас от головной боли, и получили общие пять баллов.
Вот краткое изложение трех лучших:
Хотите сэкономить еще больше времени?
Мы использовали свое исследование, чтобы составить викторины с четырьмя вопросами с по , чтобы выяснить, какой конструктор веб-сайтов лучше всего подходит для ваших нужд.
Вы можете проверить наше исследование (буквально), и это займет всего две минуты.
Пройдите викторину
Найм веб-дизайнера: последние мысли
Найм веб-дизайнера не для всех, но — это отличный способ создать профессиональный веб-сайт, не выполняя никакой работы самостоятельно.
Вам следует нанять веб-дизайнера, если…
У вас достаточно большой бюджет
Вы хотите, чтобы все технические детали позаботились о вас
Вы готовы работать с кем-то другим над брендингом вашего сайта
Вам следует использовать конструктор веб-сайтов, если…
Вы хотите сэкономить деньги
Вы не против использования инструментов дизайна с перетаскиванием
Вы хотите принимать непосредственное участие в создании своего веб-сайта
Вы сделали Решайтесь? Или у вас есть еще несколько вопросов? В любом случае дайте нам знать, о чем вы думаете, в комментариях — мы хотели бы знать!
Как создать веб-сайт [2021]
Ложь: вы должны быть своего рода художественным гением или мастером программирования с высокотехнологичными инструментами, чтобы создать веб-сайт, который выглядит и ощущается умопомрачительно.
Факты: с такими инструментами, как конструкторы веб-сайтов, темами / шаблонами, базовым пониманием принципов дизайна веб-сайтов и небольшой практикой, почти любому (включая вас) чертовски легко создать веб-сайт, который поражает воображение.
Особенно, если у вас есть супер подробное (но легкое для сканирования и понимания) руководство, подобное этому.
Сегодня мы рассмотрим основы создания веб-сайта, начиная … сейчас!
Примечание: , если вы хотите применить то, что вы узнали в этом руководстве, для создания реального веб-сайта, но еще не имеете его, мы рекомендуем получить бесплатную учетную запись Wix или, наконец, запустить свой веб-сайт WordPress с хостингом и установить его одним щелчком мыши с Hostgator.
Что такое веб-дизайн?
Прежде чем мы углубимся в процесс, давайте начнем с основ: веб-дизайн — это процесс создания визуального внешнего вида веб-сайта.
В основном.
В наши дни «дизайн» также включает в себя идею «пользовательского опыта», что само по себе является целым предметом, но для наших сегодняшних целей это означает, что веб-дизайн не только в том, насколько хорошо выглядит ваш сайт, но и в том, насколько он прост. это делать такие вещи, как поиск информации, важных ссылок и кнопок и т. д.
Отсюда «посмотрите» (что люди видят на вашем сайте) и «почувствуйте» (насколько легко использовать ваш сайт).
Веб-сайты создаются с использованием языков кодирования HTML и CSS, которые сообщают веб-браузеру, как расположить весь текст на сайте, какие цвета создавать, где размещать изображения и т. Д.
Раньше веб-дизайнерам приходилось вручную кодировать веб-сайты с нуля — буквально писать каждую строчку кода HTML и CSS для каждого создаваемого веб-сайта.
В наши дни вы можете быть дизайнером, не зная ничего из этого, благодаря конструкторам веб-сайтов «Что вы видите, то и получаете» (наш любимый — Wix) и системам управления контентом, таким как WordPress (которые вы можете получить с дешевым хостингом и одним нажмите установить с Hostgator).
Эти инструменты для создания веб-сайтов делают тяжелую работу по созданию кода за вас, поэтому вы можете использовать свои базовые компьютерные навыки (перетаскивание объектов с помощью мыши, нажатие кнопок, копирование / вставка) для создания веб-сайтов. Быстро и просто.
Что означает «взгляд»
Есть несколько элементов веб-дизайна, которые определяют, насколько хорошо (или плохо) выглядит ваш веб-сайт.
Цвета
Какого цвета ваш текст? Как насчет фона за этим текстом? Ваше меню заголовка? Кнопки?
Color — огромная составляющая создания привлекательного сайта и важная составляющая того, будет ли ваш сайт выглядеть так, будто он предназначен для продажи дорогих часов руководителям предприятий, или это просто место, где ваш брат может поделиться фотографиями с вечеринки по случаю дня рождения вашего племянника.
Шрифты
Шрифты определяют, как выглядит текст на вашем сайте. Одни и те же слова могут казаться супер-примитивными (например, всегда стильная Helvetica) или непринужденными и дружелюбными (#comic sans) только на основе шрифта!
Графика / Изображение / Видео
Это такие вещи, как фотографии, видео, значки, иллюстрации (где все «изображение» нарисовано в такой программе, как Adobe Illustrator — милый котенок выше является примером!) Или составные изображения (например, «как создать веб-сайт» »Изображение вверху этого поста).
Фотографии, разумеется, сделал бы фотограф.
Видео будут созданы видеооператором, если они представляют собой видео из реального мира, или аниматором, если они созданы из других изображений / иллюстраций.
И технически это «графический дизайнер», который будет создавать значки, иллюстрации и составные изображения.
Но из-за большого количества совпадений многие веб-дизайнеры обладают навыками графического дизайна / фотографии / видеосъемки, потому что совпадений так много.
Когда у вас есть эти фотографии / графика / изображения / видео, «веб-дизайнер» — это тот, кто добавляет их на сайт таким образом, чтобы это выглядело фантастически.
Письменные материалы
Создание контента / письменного текста — это не работа веб-дизайнера, но, как и в случае с графическим дизайном, некоторые веб-дизайнеры обладают навыками создания контента.
На фронте веб-дизайна «контент» — это расположение слов на веб-сайте таким образом, чтобы их было легко читать и привлекать внимание людей, когда они должны (например, мы хотели, чтобы вы видели «Письменный контент» выше, прежде чем читать эти последние пару предложений, поэтому мы сделали его выше на странице И больше, чтобы он привлекал ваше внимание и позволял вам узнать, о чем эта часть сообщения).
Но опять же, поскольку есть много совпадений — особенно если вы создаете свои собственные веб-сайты — человек, который создает дизайн веб-сайта, может также написать часть или весь контент.
Что значит «чувствовать»
Помимо всего вышеперечисленного, тех визуальных элементов, которые сочетаются с небольшой магией веб-дизайна, чтобы сделать сайт впечатляющим, есть несколько элементов, которые делают веб-сайт легким и, осмелюсь сказать, забавным в использовании.
Макет
Макет — это способ размещения графики, текста и кнопок на странице.
Макет
не только делает ваш сайт привлекательным, но и надежный макет также упрощает использование, потому что информация отображается таким образом, что имеет смысл, кнопки находятся в тех местах, которые люди ожидают от них, изображения размещаются так, чтобы помогать людям понимать, что вы пытаетесь передать, не делая текст трудным для чтения и т. д.
Навигация
Это то, как люди переходят с одной страницы на другую, а для ваших более сложных страниц — как они перемещаются по странице.
Если взять этот самый сайт и страницу в качестве примера (вы здесь, почему бы и нет), сюда входят такие вещи, как
Меню заголовка (часть с главной страницей, учебными пособиями YouTube, письменными руководствами и т. Д. В верхней части страницы на настольном компьютере или тремя составными строками на мобильном устройстве).
Плавающее оглавление в левом верхнем углу (если вы на рабочем столе; если вы используете свой телефон, как и большинство людей в наши дни, вы видели его вверху этой страницы, эта часть называется «Оглавление» ).
Кнопка «перейти наверх» (белая стрелка на фоне синего круга в правом нижнем углу страницы).
Раздел «недавно написанные статьи» внизу страницы.
Цель таких элементов навигации — упростить людям поиск нужных страниц и информации в нужное время.
Совместимость
Совместимость — это то, насколько хорошо ваш сайт / страницы загружаются и выглядят в разных браузерах, операционных системах и устройствах.
Ваш сайт должен будет выглядеть и функционировать немного иначе для экрана телефона с диагональю 6 дюймов, где люди должны касаться предметов пальцами, чем на экране ноутбука с диагональю 15 дюймов, где люди используют свою мышь / трекпад (совет от профессионалов: если вы Вы собираетесь заняться созданием веб-сайтов, купите себе мышку; даже трекпады Apple намного сложнее использовать).
Веб-дизайн и веб-разработка
По мере того, как вы знакомитесь с миром создания веб-сайтов, вы увидите, что понятия «веб-дизайн» и «веб-разработка» в значительной степени взаимозаменяемы.
На начальном уровне они в основном так и есть — оба посвящены созданию веб-сайтов.
Но мы здесь, чтобы помочь вам пройти путь от новичка до эксперта в области ракетной скорости SpaceX, поэтому мы разберем их для вас немного подробнее.
Веб-дизайн, как мы уже говорили немного выше, — это то, что люди видят и как они взаимодействуют с вашими веб-сайтами — кнопки, цвета, шрифты, изображения, макеты страниц и т. Д.
Веб-разработка заключается в том, чтобы фактически погрузиться в код, написать HTML, CSS, Javascript, PHP и т. Д., Которые образуют функциональный веб-сайт.
Если вы сами создаете веб-сайты с помощью конструкторов веб-сайтов или CMS, таких как WordPress, в некотором смысле вы в основном и то, и другое (даже если вы не пишете ни малейшего кода).
По мере того, как вы станете более продвинутыми, вы, возможно, захотите развить некоторые навыки уровня самурая в веб-дизайне или веб-разработке.
Или вы можете нанять кого-нибудь, чтобы помочь вам с определенными частями процесса создания вашего веб-сайта.
Итак, вот немного подробнее о различиях между веб-дизайнером и веб-разработчиком.
Кто такой веб-дизайнер?
Опять же, проще говоря, именно эти люди делают веб-сайты красивыми и удобными в использовании.
Но в мире крупных веб-сайтов, таких как Amazon и Google, и, возможно, когда-нибудь на ваших сайтах, на самом деле существует пара различных типов «веб-дизайнеров».
Дизайнер пользовательского интерфейса (UI)
На верхних уровнях игры по созданию веб-сайтов дизайнеры пользовательского интерфейса занимаются только визуальными эффектами — используемыми цветами, используемыми шрифтами, какими изображениями и где используются, размером и расположением текста и т. Д.
Только визуальный «вид», эстетика, а не какие-либо «ощущения».
Итак, когда многие люди говорят «веб-дизайнер», они обычно имеют в виду именно это…
Дизайнер взаимодействия с пользователем (UX)
Но в мире веб-дизайна есть еще один конец — «ощущение» вашего веб-сайта.
Когда вы начинаете, и, честно говоря, долгое время и многие сайты после этого, вы можете просто придерживаться предварительно созданных шаблонов и некоторых стандартных форм дизайна, чтобы определить, как все работает на вашем сайте, где находятся кнопки. , где использовать меню и элементы навигации и т. д.
Например, ваш сайт должен иметь меню заголовка для ваших основных страниц (страница контактов, страница о компании, главная страница, блог и т. Д.). Они есть в любой теме или шаблоне веб-сайта, и вы уже знаете, что меню заголовков — это то, что нужно вашему сайту в верхней части страницы.
Но глубже в игре вы начинаете задавать вопросы вроде «какие страницы должны быть в этом меню заголовка?» «Должен ли я иметь кнопку для моей страницы контактов в меню заголовка?» «Должно ли меню оставаться в верхней части экрана и исчезать при прокрутке вниз или оставаться над контентом?»
UX-дизайнеры задают эти вопросы, а затем проводят исследования и тестирование пользователей, чтобы определить лучший способ компоновки ваших страниц, какие именно элементы следует включить, чтобы как можно больше людей сочли ваш сайт интересным, интересным и, возможно, даже немного. вызывает привыкание.
Кто такой веб-разработчик?
Опять же, это люди, которые создают настоящий код, который превращает веб-дизайн («вот какой текст куда идет, с каким шрифтом, какого размера; вот где идут кнопки, и они должны быть этого цвета» и т. Д.) В реальный веб-сайт.
И, опять же, когда вы начнете, вы будете использовать такие инструменты, как конструкторы веб-сайтов и WordPress, чтобы справиться с этой задачей за вас — так что вы будете заниматься «веб-разработкой» так же, как и « веб-дизайн.”
Однако, когда вы станете более продвинутым, иногда вам захочется, чтобы все выглядело определенным образом, чего вы не можете найти в шаблоне или не можете реализовать с помощью инструментария веб-конструктора или плагина WordPress.
В таком случае вам понадобится кто-то, кто разбирается в коде, чтобы это произошло — или вы сами станете им.
В этот момент вы определенно выигрываете.
И тогда вам понадобится помощь одного из трех типов веб-разработчиков.
Backend разработчик
Backend-разработчики — это ребята и девчонки, которые работают над основной структурой веб-сайта.
Они используют такие языки, как Java, SQL и C ++, для получения определенной информации из баз данных, загрузки страницы при нажатии кнопки, отправки новой записи из одной из ваших контактных форм в такую программу, как MailChimp, чтобы вы могли заниматься маркетингом по электронной почте.
По сути, если это связано с чем-то, что заставляет ваш веб-сайт работать, но не связано напрямую с тем, что видят ваши посетители, это работа внутреннего разработчика.
Фронтенд-разработчик
Frontend-разработчики создают HTML, CSS и Javascript, которые заставляют посетителей вашего сайта видеть.
Вам нужна кнопка здесь? Разработчик интерфейса добавит это в код.
Требуется, чтобы в этой контактной форме были поля для имени, адреса электронной почты и сообщения? Интерфейсный разработчик заставит эти поля отображаться на вашей странице и принимать текст от кого-либо (но именно внутренний разработчик следит за тем, чтобы данные были правильно получены на сервере и отправлены в Mailchimp).
Проявитель полного стека
Теперь, когда мы знаем о фронтенд-разработчиках / бэкэнд-разработчиках, это легко: разработчик полного стека — это просто тот, кто может помочь с обоими сторонами «стека веб-разработки».”
Вам нужно нанять веб-дизайнера или веб-разработчика, который поможет вам создавать веб-сайты?
Короткий и длинный ответ: нет!
Особенно, когда вы только начинаете, инструменты, такие как лучшие конструкторы веб-сайтов (мы любим Wix) и CMS, такие как WordPress (их можно получить дешево и просто с помощью установки одним щелчком мыши с Hostgator), позволяют любому легко создавать веб-сайты, не тратя много времени. кучу времени и годы накопления опыта в тонкостях веб-дизайна или обучения программированию.
Когда вы дойдете до определенной точки, вам может понадобиться дизайнер или разработчик, который поможет с некоторыми более сложными вещами, которые вы хотите сделать.
Но вы можете создавать потрясающе выглядящие сайты и без помощи этих экспертов.
И, благодаря таким ресурсам, как эта здесь запись в блоге и наш канал на Youtube, вы можете научиться делать многие вещи в области веб-дизайна и разработки самостоятельно!
Что хорошо подводит нас к нашему пошаговому руководству по созданию веб-сайта…
Шаг 1. Определите назначение своего сайта
Да, первый шаг в разработке веб-сайта — это в некотором роде философский вопрос: каковы ваши причины вообще создать сайт?
Вы хотите создать блог, который соберет миллионы поклонников и читателей?
У вас есть отличная бизнес-идея в Интернете, чтобы получить приятное времяпрепровождение и финансовую свободу, которых вы просто не можете получить на дневной работе?
Вы учитесь создавать сайты, чтобы зарабатывать деньги, создавая сайты для других людей?
Какой бы ни была причина вашего желания научиться создавать веб-сайт, каждый создаваемый вами веб-сайт должен начинаться с цели, «смысла существования», как выразились бы французы или люди, пытающиеся быть слишком причудливыми (#guiltyascharged) .
Почему спросите вы?
Что ж, если вы новичок в создании веб-сайтов, очень легко над этим подумать; есть сотни сообщений в блогах о том, как создать веб-сайт, как создать блог, как заработать деньги в Интернете и т. д. и т. д.
Всевозможные идеи о том, что вам следует делать, чтобы создать онлайн-бизнес, какие функции вы должны иметь на своем сайте, какие инструменты вы должны использовать для его создания.
Знание того, зачем вы создаете веб-сайт и что он должен делать, может помочь вам принять решение о том, какой дизайн должен иметь создаваемый вами дизайн, а что — #extra.
Плюс, если вы с самого начала не понимаете, чем должен быть веб-сайт, у вас может получиться «франкен-сайт», представляющий собой своего рода гротескный и запутанный лоскутный узор из 100 идей, которые у вас были за 100 недель веб-сайта. строительство.
Итак, чтобы помочь вам разобраться в дизайне веб-сайта и сделать правильный выбор, у нас есть для вас три вещи:
Список общих вопросов о разрабатываемом вами веб-сайте
Некоторые идеи трех основных целей, которые может иметь веб-сайт
Некоторые примеры типов сайтов, которые вы, возможно, захотите построить
Во-первых, те В общем, обратитесь к своему буддийскому монаху / Эйнштейну по вопросам:
Зачем вам сайт?
Как для вас выглядит «успешный» веб-сайт?
Как вы думаете, кто ваша аудитория / посетители?
Что они получают, заходя на ваш сайт?
Что вы хотите, чтобы они сделали, когда они перейдут на ваш сайт?
Чем отличается идея вашего веб-сайта от других?
Вы хотите зарабатывать на своем сайте?
Последний хорошо подводит нас к:
3 основных цели веб-сайта
На высоком уровне веб-сайт может сделать для вас три вещи:
Утвердите свой авторитет
Привлекайте потенциальных клиентов
Продавайте продукты
Первый, вероятно, самый простой — несколько относительно простых страниц и блог — это все, что вам действительно нужно; вы можете получить больше фантазии оттуда, но это самое главное, чтобы люди знали, о чем вы думаете, и наладили с ними связь, чтобы они захотели услышать от вас больше.
Второй, с технической точки зрения, немного сложнее, но не намного.
Не углубляясь в бизнес-лекцию, в основном под «привлечением потенциальных клиентов» мы подразумеваем одно из двух:
Вы продаете определенную услугу (например, графический дизайн или веб-дизайн) и хотите, чтобы люди могли зайти на ваш сайт, решить, что они хотят работать с вами, а затем иметь возможность начать работу.
Вы создаете партнерский веб-сайт, на котором вы хотите привлечь людей, которые будут читать ваш контент, а затем нажимать на ссылки на продукты, которые они затем купят, и вам будут платить комиссию.
Для этих сайтов вам нужно немного больше подумать о том, каких людей вы хотите и должны привлечь (что в значительной степени является маркетинговым вопросом, но также повлияет на ваш дизайн) и что вам нужно покажите и сообщите им, чтобы они захотели щелкнуть ваши партнерские ссылки или заполнить форму для работы с вами.
Третий — самый сложный — в дополнение к некоторым основным страницам, описывающим, о чем ваш сайт / бизнес, блоге и некоторых размышлениях о том, кому вам нужно прийти на ваш сайт и что вы хотите, чтобы они увидели, когда они получат там вам нужно будет создать страницы и функции электронной торговли, чтобы они могли покупать у вас продукты.
6 типов сайтов
Эти три основные цели можно преобразовать в несколько разных типов сайтов, каждая из которых будет влиять на функциональность и эстетику, которые вам необходимо учитывать при разработке веб-сайта (хотя любая из них может быть создана с помощью конструктора, такого как Wix, или с помощью WordPress. организована такой замечательной компанией, как HostGator).
Вот несколько примеров на ваше рассмотрение (вставьте сюда широкий, размахивающий жест):
Блог
Сердце и душа блогового веб-сайта (такого как этот) — это всемогущий пост в блоге (как этот!).
Обычно они информативны и, надеюсь, занимательны, их, как правило, много, и они будут добавляться быстрее, чем вы добавляете новую страницу на сайт другого типа.
У вас может быть блог-сайт, который просто делится вашими личными мыслями и приключениями, как пятьдесят чашек кофе.
У вас может быть блог, который учит людей некоторым навыкам, которые у вас есть (например, этому!).
У вас может быть блог, который приносит деньги, или, может быть, он предназначен только для вашего личного удовольствия (и хотя бы нескольких посетителей).
Другие типы сайтов могут иметь блог, но вся причина и цель вашего сайта также может быть самим блогом.
Портфолио
Сайт-портфолио в первую очередь предназначен для описания вашей работы и демонстрации некоторых примеров и тематических исследований этой работы.
Вот несколько отличных примеров:
В большинстве случаев они предназначены для людей с творческими способностями, хотя они могут быть своего рода онлайн-резюме для кого-то практически из любой отрасли.
Часто у них будет по крайней мере контактная форма, которая может быть предназначена для генерации лидов, но в отличие от бизнес-сайта, созданного специально для генерации лидов (на котором были бы такие вещи, как «загружаемые руководства» и всплывающие окна с просьбой «зарегистрироваться для списка рассылки », это может быть на передней панели LG.
Иногда на этих сайтах есть блоги, а иногда это просто относительно статические страницы, которые время от времени обновляются.
Брошюра
Веб-сайты с брошюрами похожи на портфолио тем, что они в значительной степени информационные, но могут иметь некоторые функции лидогенерации и / или блог.
Разница в том, что портфолио — это сайты для частных лиц, а брошюры — для предприятий, групп и некоммерческих организаций.
Это означает, что у них будет немного другой набор основных страниц; если на сайте портфолио будут примеры проделанной вами работы, то на веб-сайте с брошюрами будет отображаться меню или страница предстоящих мероприятий; там, где у вас может быть простая контактная форма на сайте портфолио, на сайте с брошюрами также могут быть указаны адреса и часы работы (может быть, и без контактной формы — никому не нужно отправлять электронное письмо в этот новый гастропаб с просьбой об их ежедневных новостях).
Примеры сайтов с твердыми брошюрами:
Отсутствие необходимости в реальных соображениях по привлечению потенциальных клиентов — вот что отличает сайты-брошюры от бизнес-сайтов из нашей следующей категории; ресторанам не нужна лидогенерация, как и некоторым некоммерческим организациям.
С другой стороны…
Профессиональные услуги
Сайты профессиональных услуг могут включать юридические фирмы, агентства веб-дизайна, отели, агентства недвижимости и т. Д.
По сути, если сайт должен рассказать историю компании и предоставить информацию, которая убеждает людей работать с этой компанией, это то, что мы называем компанией «профессиональных услуг».
Они не обязательно продают товары через интернет-магазин, хотя могут иметься некоторые функциональные возможности электронной торговли.
«Клиенты», которых пытаются привлечь эти сайты, в какой-то момент должны будут поговорить с реальным человеком, назначить встречу, возможно, забронировать онлайн.
Однако эти сайты не являются «электронной коммерцией», потому что посетители либо не будут платить через какую-то функцию «купи сейчас», либо, если они это сделают, то, за что они платят, не просто продукт, который доставляется или отправлено им по электронной почте.
Примеры:
Электронная торговля
Это просто, потому что вы точно знаете такой сайт — Amazon.
Но Amazon — не единственное имя в игре электронной коммерции, существует масса (гораздо) более мелких предприятий, у которых есть веб-сайты для продажи своих продуктов напрямую, без помощи сторонних веб-сайтов, таких как Amazon.
Смысл этих: получать трафик, продавать.
Некоторые примеры:
Шаг 2. Выберите платформу своего веб-сайта
Хорошо, когда у вас есть базовое представление о цели и типе создаваемого веб-сайта, пора выбрать платформу для вашего веб-сайта.”
Что, черт возьми, это значит?
Что ж, вам нужно создать этот веб-сайт (надеюсь, не слишком много знать о кодировании), подключить к доменному имени и разместить на сервере, чтобы люди со всего мира могли получить к нему доступ.
Технически есть много способов сделать это.
Реально есть два основных способа:
Конструкторы сайтов
Конструкторы веб-сайтов — это инструменты, которые позволяют очень быстро перейти от нуля к веб-сайту.
Они позаботятся о домене и хостинге за вас, а затем предлагают интерфейс перетаскивания, чтобы вы могли создавать свой сайт страница за страницей, кнопка за кнопкой — без необходимости кодировать или возиться с техническими частями создания сайта и создания он доступен в Интернете.
Если вы хотите максимально упростить процесс создания веб-сайта и не возражаете заплатить несколько лишних долларов по варианту 2, это то, что вам нужно.
У нас есть для вас полное руководство по лучшим конструкторам веб-сайтов, на случай, если вы не хотите полностью изучить несколько наших любимых сайтов:
Wix
Лучшее в мире
Wix — это то, что мы называем «конструктором веб-сайтов» — он действительно устанавливает стандарты для всех остальных.
Это не самый дешевый вариант, и, поскольку он настолько настраиваемый, требуется немного больше времени для обучения.
Но если вы собираетесь полностью погрузиться в мир создания веб-сайтов, вы не ошибетесь.
Ознакомьтесь с полным обзором Wix здесь.
Gator Конструктор сайтов
Самый дешевый… и это неплохо!
Итог
Мы полностью уверены, что за хорошего производителя веб-сайтов стоит платить… особенно если он стоит менее 4 долларов в месяц!
Gator — это, безусловно, выбор для новичков в создании веб-сайтов, ориентированных на разумную цену, но он также мощный и простой в использовании, поэтому вы не разочаруетесь, когда станете мастером создания веб-сайтов, ищущим создателя веб-сайтов, с которым вы можете расти.
Ознакомьтесь с полным обзором Gator Website Builder здесь.
Конструктор веб-сайтов с постоянным контактом
Лучший конструктор сайтов для малого бизнеса
Constant Contact позволяет очень легко создать профессиональный веб-сайт, который отлично выглядит, с достаточной настройкой, чтобы сделать ваш сайт уникальным без дополнительных функций, на изучение которых нужно время.
Объедините это с одной из лучших платформ электронного маркетинга и ценой в 10 долларов в месяц, и вы получите создателя веб-сайта, идеально подходящего для владельца малого бизнеса, которому нужен надежный веб-сайт без необходимости тратить много времени или с трудом заработать. наличные!
Ознакомьтесь с нашим обзором конструктора веб-сайтов Constant Contact здесь.
WordPress
Другой основной платформой для разработки, создания и запуска веб-сайтов является WordPress.
Это «Система управления контентом» (CMS), которая упрощает создание и настройку сайтов, не зная, как писать код.
Технически существуют и другие CMS, помимо старого хорошего WP, но WordPress на сегодняшний день является наиболее часто используемым и не зря — это простой, без шуток, надежный продукт.
Сама по себе
WordPress на 100% бесплатна, что довольно круто.
Тем не менее, вам придется заплатить за хостинг и доменное имя, но общая сумма будет дешевле, чем использование конструктора веб-сайтов (особенно когда вы получаете нашу скидку до 61% и бесплатный домен через HostGator!).
Компромисс: предстоит еще много работы.
Вы должны настроить свое доменное имя и хостинг, о чем за вас позаботятся разработчики.
И хотя WordPress является более гибким и настраиваемым, чем конструкторы веб-сайтов, это достигается за счет более высокой кривой обучения, если вы не используете плагин для создания веб-сайтов WordPress, такой как Divi.
Ознакомьтесь с полной информацией о том, «что такое WordPress» здесь!
Шаг 3. Выберите шаблон или тему
Хорошо, теперь, когда у вас есть некоторая ясность в отношении цели сайта, который вы строите, и платформы, на которой вы собираетесь работать, пора выбрать шаблон или тему.
Эти два термина в основном взаимозаменяемы, в основном это зависит от платформы, которую вы используете.
Помимо некоторых нюансов, тема или шаблон в основном покрывают большую часть работы в отделе внешнего вида вашего сайта, предоставляя вам исходный макет и набор цветов для работы.
Это похоже на структуру дома, который представляет собой ваш веб-сайт — основные стены, комнаты, цвета присутствуют, вам просто нужно заполнить его мебелью, перекрасить пару стен, возможно, поменять унитаз или добавить встраиваемый освещение на кухне.
Какую бы платформу вы ни использовали, вы найдете ряд шаблонов / тем, упорядоченных по типу сайта, определенным функциям, конкретным отраслям, которые вы можете предварительно просмотреть, чтобы найти лучшую отправную точку для своего сайта.
Несколько примечаний, прежде чем мы перейдем к некоторым советам по выбору лучшего шаблона или темы для вашего сайта:
Некоторые темы / шаблоны поставляются с набором предварительно созданных страниц, поэтому такие вещи, как ваша домашняя страница, страница о странице и страница контактов, уже запущены; другие просто дадут вам несколько стандартных цветов / шрифтов и типов макетов страниц, тогда вам придется создавать нужные страницы с этой отправной точки — это немного больше работы, но вы все равно получите фору по сравнению с людьми делаю все с нуля.
Темы и шаблоны для лучших платформ веб-сайтов можно настраивать, поэтому вы можете сделать свой сайт именно таким, каким вы хотите, но может быть полезно найти тот, в котором уже создано 70-80% того, что вы хотите — экономит время, добавляя / переставляя вещи позже.
Наши любимые темы WordPress
Если вы собираетесь использовать WordPress в своем большом приключении по созданию и дизайну веб-сайтов, в этом посте у нас есть полный список лучших тем WordPress.
Вот быстрый и грязный вариант, если вы больше заняты в режиме чтения, чем чтение:
Советы по выбору темы или шаблона сайта
Будьте проще
Именно здесь действительно важно знать цель вашего сайта.
Некоторые темы содержат много яркой анимации, сложные макеты и множество встроенных функций, которые могут показаться действительно впечатляющими, когда вы впервые их видите.
Но эти вещи могут отвлекать посетителей.
Они могут усложнить настройку вашего сайта.
И они могут замедлить работу вашего сайта.
Итак, начните с основных функций, которые вам понадобятся для достижения цели вашего веб-сайта.
Позже вы сможете получить грандиозный финал двойного фейерверка.
Оцените конкуренцию
Это очень полезное место для начала, особенно с вашими первыми несколькими сайтами.
Потому что, пока у вас не будет нескольких сайтов за плечами, вам, вероятно, будет сложно провести мозговой штурм по поводу того, что вы хотите в дизайне своего веб-сайта, и вы можете просто не понимать, почему вам следует выбирать один шаблон вместо другого.
Итак, начните с того, что уже работает для людей, которые делают аналогичные шаги, проверьте сайты ваших конкурентов, сделайте несколько заметок о том, что вам нравится, а что нет, а затем используйте это, чтобы найти тот крутой шаблон, который вы ищете.
Будьте осторожны, чтобы не думать, что вы должны делать все, что делают ваши конкуренты — они могут работать с гораздо большими бюджетами, и они работают над своим сайтом дольше, чем вы.
Просто найдите несколько основных хороших / плохих фигур и продолжайте двигаться!
Обратите внимание на шрифты и цвета
На шаге 4 ниже мы подробнее рассмотрим шрифты и цвета, но это большая часть выбора шаблона.
Опять же, настройка всегда возможна; Если вы найдете тему с идеальным макетом, но цвета кнопок ужасные, возьмите ее и измените их позже.
Но это может потребовать некоторой работы, в зависимости от платформы веб-сайта и конкретного шаблона.
Так что ищите что-нибудь, в котором используется набор шрифтов, с которыми вы, по крайней мере, можете жить, если они вам не очень нравятся.
И выберите тот, чья общая цветовая схема близка, если не точна; Если вы создаете очень веселый и яркий магазин детской одежды, не выбирайте шаблон, который в основном состоит из черного, белого и серого цветов.
Аналогичным образом, если вы создаете сайт для юридической фирмы, вероятно, лучше оставить пастель и комиксы без текста.
Не забывайте о мобильных устройствах
Вы, наверное, читаете этот пост на своем телефоне.
Как мы можем это узнать?
Потому что сегодня большая часть интернет-трафика идет с мобильных устройств.
И у нас есть данные Google Analytics, которые говорят о том, что большинство наших посетителей соответствуют этим требованиям.
На пути к веб-дизайну вы встретите и другие сообщения, которые напоминают вам: «Убедитесь, что ваш сайт адаптируется к мобильным устройствам.”
«Мобильный отзывчивый» означает, что ваш сайт отображается одним способом, который отлично смотрится на настольных компьютерах, и автоматически отображается другим способом (который также выглядит фантастически) на мобильных устройствах.
Мы согласны, что ваш шаблон должен быть адаптирован для мобильных устройств.
Мы не согласны с тем, чтобы «убедиться, что ваш шаблон адаптируется к мобильным устройствам».
Всем известно, что это важно годами; любой шаблон или тема, которые вы выберете, будут адаптивными.
Таким образом, «помня о мобильных устройствах» — это не столько проверка, адаптируется ли тема, которую вы любите, к мобильным устройствам, сколько проверка перед тем, как сделать выбор.
Некоторые платформы будут иметь «мобильное представление» в своей демонстрации, чтобы вы могли видеть, как шаблон выглядит на небольших экранах.
Хакер, если он недоступен: просто измените размер окна браузера до минимально возможной ширины.
Просто потому, что все упоминают «SEO»
Опять же, как и «отзывчивость мобильных устройств», здесь не о чем беспокоиться.
SEO («поисковая оптимизация») играет важную роль в течение некоторого времени, поэтому любая платформа, тема или шаблон веб-сайта, которые вы выберете, будут иметь в виду SEO.
Есть некоторые вещи, которые вы захотите найти, но это для другой публикации и более позднего этапа вашего пути к созданию веб-сайта.
Так что пока просто знайте, что вам действительно не нужно об этом беспокоиться; какую бы тему вы ни выбрали, все будет в порядке.
Шаг 4. Выберите начальную торговую марку
Пришло время заняться созданием страниц с сорняками и дизайном веб-сайтов. Еще один шаг «давайте подумаем об этом в первую очередь» — выбор первоначального брендинга.
Брендинг — это большая тема, но с точки зрения новичка это означает, в основном, цвета и шрифты, которые вы хотите использовать на своем сайте.
«Но подождите, разве я не должен определиться со шрифтами и цветами, прежде чем выбирать шаблон? Разве это не изменит мой выбор шаблона? »
Хороший вопрос. И нет, не надо.
Ну, можно, но не обязательно.
Почему?
Потому что, когда вы только начинаете, довольно сложно определить, каким должен быть брендинг; есть большой опыт и практика, которые помогают понять, какие цвета, шрифты и общий стиль должны быть у веб-сайта, почему Helvetica лучше, чем Times New Roman, почему жженый оранжевый лучше подходит для бренда, чем красный пожарный.
Вот где полезно взглянуть на то, что делают конкуренты; если все они используют много темного фона и шрифтов без засечек, вам, вероятно, тоже следует.
Аналогичным образом, если вам действительно нравится внешний вид определенной темы, она все равно будет включать определенные шрифты и цвета.
Может быть, вам стоит их изменить, но может и не понадобиться.
Таким образом, сначала выбрав тему, вы можете придать некоторую структуру своему принятию решения о том, «что это за бренд», вместо мира вариантов (которые могут сбивать с толку и требовать много времени для навигации), у вас просто будет несколько хороших вариантов, которые являются отличными отправными точками.
При этом цвет и шрифты — важные части разработки веб-сайта.
Итак, давайте рассмотрим несколько основ каждого из них.
Цветовые схемы веб-сайта
Color — огромная часть определения дизайна вашего веб-сайта и бренда в целом.
За тем, что означают цвета и какие цвета лучше всего подходят для вашего веб-сайта и бизнеса, который он представляет, лежит тонна психологии.
Существуют целые книги и веб-сайты, посвященные теме «теории цвета», но мы здесь, чтобы сэкономить вам время, необходимое для их чтения.
Как и во многих других случаях, у нас есть большое руководство по цветовым схемам для веб-сайтов.
Укороченная версия…
Вот основные значения цвета в отношении брендинга и веб-сайтов:
Черный олицетворяет роскошь, мощь, элегантность и изысканность.
Серый олицетворяет простоту, нейтралитет, логику и «будущее».
Красный олицетворяет срочность, волнение, опасность и страсть.
Розовый олицетворяет сладость, женственность, невинность и романтичность.
Желтый олицетворяет оптимизм, жизнерадостность и молодость.
Оранжевый олицетворяет творческий подход, дружелюбие и энтузиазм.
Фиолетовый олицетворяет успех, мудрость, богатство и королевскую власть.
Зеленый олицетворяет здоровье, богатство, умиротворение и природу.
Синий олицетворяет безопасность, стабильность, доверие и спокойствие.
Круто, а как выбрать цвета для своего сайта?
Что ж, у большинства брендов есть один доминирующий цвет, затем два или три дополнительных цвета и цвет фона.
Вы тоже захотите подумать о своей аудитории — не просто выбирайте свои любимые цвета, выбирайте те, которые будут хорошо общаться с людьми, которые будут посещать ваш сайт.
Создаете сайт под шикарный (он же дорогой) ресторан? Черный, красный и фиолетовый — хорошие отправные точки.
Создаете сайт по продаже детской одежды? Синий, розовый или желтый могут быть ходом.
Может быть, это сайт-портфолио для услуг по созданию вашего сайта. Серый, синий и оранжевый там сплошные.
Когда у вас появится общее представление о том, какой доминирующий цвет лучше всего подходит для вашей целевой аудитории, пора испытать цветовое колесо Adobe.
Это абсолютно бесплатный инструмент, который позволит вам выбрать доминирующий цвет, а затем автоматически предложит вам второстепенные цвета.
И он выдаст вам шестнадцатеричные коды (например, «# 231885»), которые вы будете использовать, чтобы сообщить конструктору вашего веб-сайта / WordPress, какой именно цвет использовать в определенных местах (вместо того, чтобы полагаться на свои глаза, чтобы попытаться сопоставить — это просто не про ход, лол).
Как только вы определились со своей цветовой схемой, как использовать ее на своем сайте?
Доминирующий цвет должен использоваться в наиболее важных частях вашего сайта, например:
Ваш логотип
Вкладки меню
Кнопки с призывом к действию
Фоны для важной информации
Заголовки
Ваши второстепенные цвета должны использоваться в качестве акцентов в таких местах, как:
Подзаголовки
Фон для важной, но не самой важной информации
Эффекты наведения
И ваши цвета фона, которые могут быть белым, серым, черным или одним из второстепенных цветов, которые вы получили от наших друзей из Adobe , следует использовать в… фоне.
Ду. Точнее / услужливо:
Используйте более светлый цвет фона, если хотите, чтобы слова и изображения части страницы выделялись.
Используйте более темные цвета / второстепенные цвета, чтобы создать некоторое различие между разделами вашей страницы; используйте их часто вместо светлого или белого фона, если вы действительно хотите продвигать свой брендинг на своем веб-сайте.
Шрифты для веб-сайтов
После цвета шрифты — это еще один важный способ, которым ваш первоначальный бренд будет применяться к вашему веб-дизайну.
Будет ли ваш сайт освещать серьезный бизнес? Тогда на помощь придут классические, стильные шрифты, такие как Baskerville и Arial.
Хотите заняться чем-то более веселым и беззаботным? Copse или Museo — хорошее место для начала.
Одна важная вещь, о которой следует помнить при выборе шрифта для дизайна своего веб-сайта: убедитесь, что они читабельны.
Есть несколько классных скриптовых шрифтов, которые хороши для свадебных приглашений, но просто ужасны для веб-сайтов (мы смотрим на вас, Buttermilk; потому что мы не можем сказать, что вы говорите, и мы не знаем, почему это ваше имя ).
Кроме того, вам понадобится 2, может быть, 3 шрифта для вашего сайта максимум: основной шрифт (для заголовков) и один или два дополнительных шрифта (для ваших подзаголовков и основного текста).
Классная история, мы знаем, но как именно выбрать правильные шрифты для своего сайта?
Что ж, как мы уже упоминали выше, здесь полезно сначала выбрать шаблон; вы, вероятно, можете использовать шрифты, которые они включены по умолчанию.
Если вы хотите выбрать новые, это займет некоторое время и исследование.
Но чтобы помочь вам начать работу, вот пара удобных инфографик от наших друзей из DesignMantic:
SourceSource
Шаг 5. Создайте макеты своего веб-сайта и начальные страницы
Замечательно, теперь мы переходим к грязным грязным практическим вещам — пора создать ваши первоначальные страницы веб-сайта.
Во-первых, вам нужно просто начать с нескольких ключевых страниц, которые есть на любом веб-сайте.
Оттуда, в зависимости от цели вашего сайта и конкретного бизнеса, для которого вы его создаете, вам понадобится больше.
НО любой сайт, который вы собираетесь создать (независимо от того, используете ли вы конструктор, такой как Wix или хостинг WordPress / HostGator), будет иметь следующее:
Домашняя страница
Для записи, хотя мы на 99,9874% уверены, что вы это уже знаете: домашняя страница — это главная страница сайта, та, на которую вы попадаете, когда переходите на «thewebsite.com»
На каждом сайте есть один, и почти всегда это первое, что видят посетители.
Несколько советов по созданию домашних страниц:
Обязательно используйте привлекающие внимание визуальные эффекты.
Если это веб-сайт лидогенерации или электронной коммерции, обязательно включите хотя бы один «призыв к действию» или CTA — что-то вроде «свяжитесь с нами, чтобы узнать цену» или «купите сейчас».
Если у компании есть какие-то свидетельства или значки доверия (например, «аккредитовано BBB»), приклейте туда этих плохих парней.
Убедитесь, что есть удобные для сканирования и чтения разделы, в которых рассказывается, чем занимается бизнес / организация / человек и почему посетители должны заботиться.
Включите контактную информацию или форму подписки на рассылку, если это является частью цели веб-сайта.
О странице
Мы также уверены, что вы тоже знаете эту страницу.
Здесь вы рассказываете историю о компании / организации / человеке, веб-сайт которого читают люди.
Обязательно включите изображения людей, стоящих за сайтом / бизнесом.
И убедитесь, что эта страница отвечает на следующие вопросы:
Как началась деятельность компании / организации?
Для кого этот сайт?
Чем отличается этот сайт / бизнес?
Контактная страница
Для сайтов, генерирующих лиды, это определенно одна из самых важных страниц, хотя почти каждый веб-сайт должен иметь одну из них.
Упростите для потенциальных клиентов или посетителей, с которыми вы, возможно, захотите связаться, с помощью хотя бы контактной формы.
бонусных балла за включение ссылок на учетные записи в социальных сетях, номера телефонов и физические адреса.
Но включайте их только в том случае, если они имеют смысл (если это сайт-портфолио, пожалуйста, не указывайте свой домашний адрес, чтобы его мог найти кто-либо в мире — вы получите больше спамовых писем и, возможно, посещение чересчур восторженного фаната. ).
Продукт / Услуги / Портфолио стр. (Ы)
Последняя из ваших основных страниц — это действительно тип страницы, потому что это зависит от цели вашего сайта / типа бизнеса или организации.
Это страницы портфолио, на которых показаны примеры работ, страницы продуктов, на которых люди могут покупать вещи, или страницы услуг, где люди могут больше узнать о том, чем занимается компания, чей сайт находится в вашем здании, и могут связаться с кем-то, чтобы узнать больше / получить услугу.
Вы определенно захотите включить много релевантной информации о примере продукта / услуги / работы, а также несколько очень красивых изображений, которые помогут визуально передать, что, почему и как.
И если мы говорим о странице продукта или услуги, важна информация о ценах (хотя на многих страницах услуг ее нет, потому что стоимость может варьироваться в зависимости от проекта), как и функция оформления заказа для страниц продуктов.
Рекомендации по макету веб-страницы
Когда дело доходит до фактического макета ваших конкретных страниц, ваша тема или шаблон помогут определить многое из этого для вас — они поместят заголовки, изображения, основной текст, формы, кнопки и т. Д. В определенные места вне коробка.
Но, возможно, вам не совсем нравятся некоторые из этих вариантов.
Или вы из тех, кто просто любит настраивать вещи, чтобы они были более «вашими».
Что ж, нам нравится такая творческая искра.
Просто не портите свой сайт ради того, чтобы что-то изменить.
Хороший веб-сайт и макет веб-страницы удерживают людей на вашем сайте, потому что он позволяет легко найти важную информацию и функции.
Плохие макеты расстраивают и заставляют людей прыгать с вашего сайта быстрее, чем ваш дядя-алкоголик съедает 12 упаковок Bud Light (никакого неуважения к дяде Джимми, но, черт возьми, расслабься).
Некоторые общие элементы хорошей планировки:
Это интуитивно понятный — посетителям не нужно много думать, чтобы понять, на что они должны смотреть / делать.
Обтекаемая форма — без лишних хлопот и беспорядка, только минимальное количество текста и изображений, необходимых для того, чтобы донести свою точку зрения.
Целенаправленно — хотите, чтобы люди нажимали кнопку покупки? Сделайте его ярким и хорошо отделенным от других частей страницы; хотите, чтобы люди смотрели на конкретное изображение? Сделайте это большим и правильным ударом посередине страницы.
Он разработан для скиммеров — большинство людей просто не хотят тратить время, чтобы читать каждое слово на странице (если вы читали каждое слово этого поста, вы наверняка герой повседневной жизни), поэтому используйте множество маркированных списков и заголовков, чтобы людям было легче быстро увидеть / прочитать самую важную информацию.
Макеты сайтов, которые работают
Есть масса принципов дизайна, которые нужно изучить, если вы хотите полностью изучить тему «как создать веб-сайт».
Но для начала вы определенно можете создать надежный веб-сайт, просто используя то, что уже работает для тысяч других сайтов.
Есть несколько стандартных макетов, которые почти всегда работают, поэтому, если вы примените их к своим страницам, вы почти гарантированно будете в порядке.
Конструкторы веб-сайтов, такие как Wix, определят, что «то, что вы видите, то и получаете», упростят реализацию их, как вы хотите; Когда дело доходит до WordPress, лучше всего использовать тему / конструктор перетаскивания, например Divi, поскольку другие темы будут иметь более ограниченные возможности для настройки макетов.
F
Это самый фундаментальный макет веб-сайта, так как люди веками читали книги (по крайней мере, на английском) — начните с левого верхнего угла текста, читайте вправо, вернитесь влево от второй строки текст, переместите вправо.
Удачно названный, потому что заставляет глаза людей смотреть на страницу в форме, как вы уже догадались, «F.»
Но этот вас не подведет, потому что он настолько стандартный, что не очень интересный.
Используйте его как макет по умолчанию, чтобы опираться на него, но смешивайте свои страницы с разделами, в которых также используются другие макеты.
Зигзаг
Это старый трюк с левым текстом, правым изображением -> правым текстом, левым изображением -> левым текстом, правым изображением, который вы видели на сотнях сайтов.
«Зигзаг», потому что ваш глаз «движется зигзагом», а затем «движется» по странице в форме буквы Z.
Люди настолько привыкли смотреть на такие веб-страницы, что это настоящий победитель для создания макета, который немного интереснее, чем проверенный и верный макет F, но легкий для понимания.
Избранное изображение
Показанное изображение — это еще один стандарт веб-дизайна — оно помещает изображение, большое и жирное, в верхнюю часть страницы, чтобы действительно понять суть этой страницы в супер-визуальном виде, обычно уравновешенном некоторым текстом, а не до…
Фото на весь экран
Как и звучит, будь то вверху или в каком-либо разделе под ним, это часть страницы, которая позволяет изображению играть ведущую роль в передаче ключевой идеи, которую вы хотите донести о своем сайте или о людях, для которых он предназначен.
Полноэкранное фото — отличный способ сделать фон более интересным, чем просто использование цвета (хотя убедитесь, что ваш текст все еще читается).
Или вы можете ненадолго задержать слова и просто позволить людям увидеть во всей красе фотографию, которая, попросту говоря, чертовски крутая.
Сетка
Сетки — изображения, текст или и то, и другое — это хороший способ позволить людям легко просматривать большой объем информации за короткий промежуток времени.
Равномерно распределяя контент, они позволяют посетителям вашего сайта выбирать, что они хотят смотреть в первую очередь, во вторую, третью или вообще не смотреть.
Шаг 6. Создайте, найдите и добавьте свой контент
Хорошо, вы создали и разместили свои начальные страницы, пора добавить в контент — слова, изображения и, возможно, видео, которые сделают этот веб-сайт шедевром.
Еще несколько технических деталей, потому что они нам нравятся и вам полезно знать:
Поиск изображений / графики для включения на веб-сайт — это то, что сделало бы большинство «веб-дизайнеров»; на самом деле фотографирование или создание графики — это технически работа фотографа или графического дизайнера, но в мире создания веб-сайтов многие веб-дизайнеры тоже могут заниматься этим (потому что они являются неотъемлемой частью создания веб-сайта.
Аналогичным образом, создание слов для веб-сайта — техническая работа «копирайтера» (это старый рекламный термин, где слова объявления называются «копией», а не просто «словами», потому что это не очень цепляет).
Но, опять же, многие веб-дизайнеры тоже пишут текст («слова веб-сайта»).
У нас определенно нет места для написания полных руководств по копирайтингу, графическому дизайну или фотографии.
Но, чтобы помочь вам добраться до готового веб-сайта, вот несколько советов по написанию слов для веб-сайтов и поиску изображений / графики для включения.
Написание копии для сайтов
Примечание: Если вы не большой любитель писать, вы можете найти на Fiverr солидных авторов «копий веб-сайтов» и «содержимого веб-сайтов», но даже если вы решите, что кто-то оттуда напишет для вас, это хорошо. знать основы, чтобы вы могли проверить их работу!
Знайте свою целевую аудиторию
Точно так же, как цвета и шрифты вашего бренда должны соответствовать тому, с кем вы пытаетесь поговорить через свой сайт, также должна соответствовать копия.
Имея представление о том, кто ваш идеальный посетитель, «целевая аудитория» вашего веб-сайта, важно понимать, какую копию вы должны написать, какие слова вы должны использовать, какую информацию вам нужно иметь.
Например, мы знаем, что многие люди, которые заходят на наш сайт, только начинают свой путь создания сайта.
Итак, мы часто используем слова «начало работы» и «как новичок».
И мы также стремимся отфильтровать детали и глубокие технические аспекты, необходимые для полного понимания того, как создавать и запускать веб-сайты, чтобы предоставить вам информацию, которая действительно поможет вам начать работу.
Вы, вероятно, не знаете, что такое файл htaccess. В начале работы в этом нет необходимости, поэтому мы не упоминаем их, когда говорим о хостинге.
Понимание вашей целевой аудитории, людей, которые собираются читать и принимать меры на вашем сайте, выходит за рамки демографических данных, таких как возраст, пол, местоположение и т. Д.
Вы хотите знать, какие проблемы не дают им уснуть по ночам, какие слова они используют, чего они мечтают достичь.
Все это поможет вам понять, что ваш сайт должен сказать и когда он должен это сказать.
Знать особенности, преимущества и возражения
Это для потенциальных клиентов или сайтов электронной коммерции, в частности.
Вы знаете, какие товары или услуги вы продаете — очевидно, вам следует о них написать?
Не совсем так.
Жестокая правда заключается в том, что большинство людей, которые приходят на сайт, который вы строите, не ваша мама; им нет дела до вас, вашей компании, ваших товаров и услуг.
Они заинтересованы в себе.
Их проблемы. Их потребности. Их мечты.
Товары, которые вы продаете, — это просто средство решения этих проблем, удовлетворения этих потребностей и достижения этих мечтаний.
Итак, вы должны поговорить о преимуществах — что люди получают, покупая ваши вещи или получая ваши услуги.
И вы должны ответить на их возражения по поводу того, можете ли вы предоставить эти преимущества.
Высокий уровень понимания:
Составьте список характеристик продуктов / услуг, продаваемых через веб-сайт.
Переведите каждую функцию в выгоду, которую желает ваша целевая аудитория.
Запишите возражения людей по поводу покупки этих продуктов / услуг.
Затем убедитесь, что вы поговорите об этих преимуществах и ответьте на эти возражения в тексте, особенно на вашей домашней странице и страницах продуктов / услуг.
Поместите важные вещи наверх
Написание текста для веб-сайта похоже на рыбалку: вы хотите поставить сочную наживку, которую используете, именно там, где вам нужно ее поймать.
В случае страниц вашего веб-сайта это справа вверху.
Если вы не привлекаете внимание и интерес посетителей в первые пару секунд, пока они находятся на вашем сайте / странице, прямо вверху они уйдут и найдут одно из миллиона других занятий в Интернете. (видео с кошками и Instagram, вероятно, находятся в верхней части этого списка).
Поэтому, когда вы создаете копию для своего веб-дизайна, не забудьте поместить самые интересные детали и преимущества как можно ближе к началу (если не на самом верху).
Не пытайтесь показаться умным или использовать жаргон
Когда престижное, высокоинтеллектуальное издание, такое как Harvard Business Review, предлагает нам перестать казаться умными, мы здесь, в CaPW, принимаем это к сведению.
Их рассуждения: вместо того, чтобы произвести впечатление на читателей, вы отталкиваете их; им кажется, что вы пытаетесь поставить себя выше них.
И, кроме того, громкие слова и фразы, такие как «эти профессионалы сложны и красноречивы», просто отнимают у людей больше времени, чтобы их обработать и понять.
Они могут сбивать с толку, и в этом очень отвлекающем онлайн-мире люди получают больше удовольствия от занятий, чем запутанные, читая ваш веб-сайт.
Так что говорите просто и ясно.
И постарайтесь избегать использования инсайдерских терминов / жаргона, которые ваши читатели могут не понять, или объяснять, что означают эти слова, если вам придется их использовать.
Например, мы хотели удостовериться, что вы знаете, что WordPress является CMS далее в этом посте, но объяснили, что это означает «Система управления контентом», и это, по сути, способ создания веб-сайтов без необходимости написания кода.
Нам нравится использовать такие инструменты, как Grammarly и Hemmingway app, чтобы выяснить, не слишком ли сложно наше письмо — и вы тоже должны!
Сохраняйте дружелюбие
Это рифф на последней подсказке.
Во многих случаях лучше писать так, как если бы вы говорили — используя «вы», сокращения (такие слова, как «не могу» вместо «не могу» для тех из вас, кто не помнит урок английского языка — мы чувствуем, что вы ), а иногда и сленг.
Для некоторых бизнес-сайтов такой язык не совсем уместен (на большинстве веб-сайтов юридических фирм не должно быть «поддержки»), но во многих случаях лучше просто поговорить со своими читателями, как с людьми. какой-то душный, подставляй своего бухгалтера в фирму из списка Fortune 500 (извиняюсь перед корпоративными бухгалтерами, которые знают, что делать).
Поиск изображений и графики для вашего веб-сайта
Изображения веб-сайтов — мощная штука.
Простая замена изображения может иметь огромное влияние на изменение внешнего вида вашего сайта, и это можно сделать за несколько секунд за небольшие деньги или вообще бесплатно, не требуя сверхсовременных навыков программирования или дизайна.
Но как найти и выбрать несколько красивых изображений для своего сайта, не тратя кучу денег на профессиональную фотографию или индивидуальный графический дизайн?
Несколько советов и список:
Совет 1. Выбирайте высокое качество
Надеюсь, это очевидно, но для «ясности» (понимаете, потому что мы говорим об изображениях… вот почему мы не профессиональные комики): не используйте на своем сайте нечеткие или пиксельные изображения.
Разрешение изображения — это балансирующее действие на веб-сайтах, потому что изображения в сверхвысоком разрешении замедляют загрузку вашей страницы.
Но вы хотите убедиться, что вы используете изображения, ширина / высота которых не меньше пространства, которое вы пытаетесь заполнить на своем сайте (например, если вы создали страницу с размером 1020 x 870 пикселей для изображения, не пытайтесь растянуть изображение 750 × 420, чтобы оно уместилось).
Вы также можете использовать изображения, которые больше, чем вам нужно, но обязательно используйте такой инструмент, как Optimizilla, чтобы сжать ваши изображения до минимально возможного размера без потери качества.
Совет 2. Будьте уникальны
Когда вы только начинаете, вам обязательно нужно использовать стоковые фотографии, потому что нестандартная фотография (по крайней мере, хорошая индивидуальная фотография) стоит дорого.
Но вы определенно захотите поискать что-то получше, чем классические фотографии «мужчина перед ноутбуком, в рубашке на пуговицах, смотрит в камеру с чашкой кофе», которые часто встречаются на ужасных веб-сайтах из 90-х. и мемы.
Гарольд, мы чувствуем твою боль по многим причинам.
Определенно есть интересные стоковые фотографии, которые могут не быть на 100% уникальными для вашего сайта, но, по крайней мере, не заставят людей почувствовать, что ваша мама создала ваш сайт 10 лет назад.
Смотрите наш список ниже, чтобы найти их!
Совет 3. Изображения должны иметь значение
В окопах стоковой фотографии достаточно людей, так что можно найти множество хорошо скомпонованных изображений с высоким разрешением.
Но не стоит размещать фотографию на своем сайте только потому, что она хорошо выглядит. Ваши изображения должны помочь передать сообщение, которым вы пытаетесь поделиться на своей странице.
Если вы ищете изображение для страницы с юридическими услугами, вы можете найти изображение людей в костюмах, обменивающихся рукопожатием, предлагающих: «Мы поможем вам решить ваши проблемы с законом.”
Или для блога, заставляющего задуматься, вы можете использовать снимок горы или закат над пшеничным полем.
Хорошо, эти идеи на грани глупости, но дело в том, что вы хотите, чтобы ваши изображения вызывали чувства и помогали рассказывать историю, которой вы делитесь на своем веб-сайте, прямо или абстрактно.
Случайные фотографии щенков выглядят мило, но не подходят для большинства сайтов.
Совет 4: Лица хорошие
Люди — особенная вещь. # глубокие мысли
r / iamverysmart шутит, за силой зрительного контакта и лиц в маркетинге / веб-дизайне стоит много психологии.
Людей естественным образом привлекают лица на глубоко животном уровне, поэтому обязательно используйте это, чтобы удерживать людей в вашем веб-дизайне, имея хотя бы одно или два дружелюбных лица где-нибудь на вашем сайте.
Где найти изображения для вашего сайта
Есть множество мест, где можно получить супер-милые изображения для вашего веб-дизайна, некоторые из них бесплатны, а некоторые платные.
Нужно ли платить за качественные фотографии?
Вовсе нет. Изображения в этом посте в основном бесплатные (некоторые мы сделали сами и платили людям за их помощь).
В наши дни плата за стоковые фотографии не сводится к получению качественных изображений.
Но если вы заплатите за изображение, оно будет немного более уникальным, потому что большинство людей придерживаются бесплатного контента благодаря всем бесплатным сайтам стоковых фотографий.
И вы можете найти изображения, которые лучше подходят для определенного бизнес-контекста, поскольку многие из хороших бесплатных стоковых фотографий либо имеют высокий концептуальный / вычурный / вдохновляющий характер; Если кто-то знает, что его стоковая фотография будет хороша для бизнеса, он знает, что компания может позволить себе заплатить, поэтому у них больше шансов разместить ее на платной службе.
Но вы можете найти несколько деловых стоковых фотографий бесплатно.
Где ??
Отличные места, где можно найти бесплатные стоковые фото
Хорошие места для поиска платных стоковых фотографий
Сладкие места для получения нестандартной графики (не слишком много)
Лучший способ узнать больше о том, как создать веб-сайт
Хорошо, это был путь, но мы дошли до конца…
Сейчас!
На нашем сайте есть много других полезных письменных руководств по веб-дизайну!
Так что, если у вас есть еще вопросы, если вы жаждете еще ответов, у нас есть для вас знакомые.
7 основных принципов создания визуально привлекательных веб-сайтов
Как создать красивый веб-сайт
Сохраняйте сбалансированность вашего дизайна.
Разделите свой дизайн на части с помощью сеток.
Выберите для своего дизайна максимум два или три основных цвета.
Постарайтесь, чтобы графика хорошо сочеталась.
Улучшите типографику своего сайта.
Выделите элементы, добавив вокруг них пустое пространство.
Подключите все элементы.
Кажется, что все, и их дедушка (и собака) в наши дни создали веб-сайты. Интернет становится все более многолюдным с каждым днем, буквально десятки веб-сайтов добавляются по мере того, как вы читаете эту статью. Быть замеченным в массах становится все труднее и труднее.
«К счастью» для нас, дизайнеров, похоже, не все понимают , что делает или мешает веб-дизайну . Конечно, веб-дизайн — это в значительной степени творческий процесс, и поэтому его можно назвать скорее искусством, чем наукой.Но поскольку это внутреннее средство презентации, применяются некоторые правила (или, по крайней мере, принципы). Следуя нескольким простым советам, любой сможет создать визуально приятный дизайн и сделать еще один шаг к славе. Хорошо, это не , а простой, и талант и опыт имеют значение, но любой может превратить свою домашнюю страницу во что-то более красивое за считанные минуты.
Так что же делает что-то красивым? Это не Flash. Нельзя сказать, что Flash не имеет достоинств, но Flash сам по себе не делает дизайн хорошим; есть несколько неприятных Flash-сайтов.Кроме того, не нужно быть хорошим иллюстратором, чтобы создавать привлекательные дизайны. Вместо этого посмотрите на веб-дизайна как на симбиоз различных элементов. Ни один элемент не считается самым важным; скорее, сумма элементов делает дизайн привлекательным.
1. Сохраняйте сбалансированность вашего дизайна.
Balance — это гарантия того, что ваш дизайн не перевернется в одну или другую сторону. Это похоже на весы веса в достижении симметрии или асимметрии.
Посмотрите на собаку на картинке в заголовке на сайте Вычитания Хой Винь ниже.Я взял этот пример из книги Джейсона Байрда «Принципы красивого веб-дизайна». Джейсон указывает, как крест справа компенсирует добавленный визуальный вес , который собака обеспечивает слева. Это небольшая, но немаловажная деталь. Убедитесь сами, прикрыв крест рукой.
Это то, что мы называем асимметричными весами , и именно в этом суть весов. Если вы не будете осторожны с тем, как вы выкладываете вещи, дизайн довольно быстро станет несбалансированным.Вы можете управлять визуальным весом дизайна разными способами, например с помощью цвета, размера, а также добавления или удаления элементов. Если бы вы сделали крест, скажем, ярко-оранжевым, он стал бы тяжелее и, возможно, снова выбил бы макет из равновесия. Достижение асимметричного баланса — это особенно деликатный вопрос, требующий времени на точную настройку и несколько натренированного глаза, чтобы действительно добиться успеха.
Вот еще один пример симметричных весов , на этот раз от The First Twenty.Хотя изображение заголовка асимметрично сбалансировано (вы можете заметить, как это сделано?), Остальная часть дизайна внизу имеет симметричные столбцы. Асимметричный баланс сложнее добиться, но он делает дизайн более игривым.
Вы обнаружите, что каждый дизайн, который, по вашему мнению, выглядит хорошо, имеет в основе хорошо продуманный баланс. И каждый представленный здесь дизайн имеет высокие оценки по каждому из семи обсуждаемых нами принципов. Так что найдите минутку, чтобы прокрутить вверх и вниз и убедиться, все ли они проходят проверку.
2. Разделите свой дизайн на части, используя сетки.
Концепция сетки тесно связана с концепцией баланса. Сетки — это горизонтальные и вертикальные линейки серии , которые помогают «разделить» дизайн. Подумайте о столбцах. Столбцы улучшают читаемость, облегчая восприятие содержания страницы. Интервал и использование правила третей (или аналогичного золотого сечения) упрощают работу с глазами.
Правило третей и золотое сечение объясняют, почему боковые панели, например, обычно составляют около трети ширины страницы и почему основная область содержимого примерно равна ширине дизайна, деленной на 1.62 (равняется фи по математике). Мы не будем разбираться, почему это так, но, похоже, на практике это действительно так. Вот почему объект на профессионально сделанных фотографиях обычно располагается не посередине, а на пересечении воображаемой сетки из девяти квадратов (три на три, с двумя горизонтальными и двумя вертикальными линиями).
Решетка особенно хорошо подходит для минималистичного дизайна. 5 Тридцать один Дерека Пунсалана показывает, почему:
Хотя дизайн сам по себе визуально не впечатляет, четкая строгая структура элементов делает его приятным для глаз.Левый столбец примерно в два раза больше правой боковой панели, что имеет смысл и о чем стоит подумать при создании собственных дизайнов.
3. Выберите максимум два или три основных цвета для своего дизайна.
Что, если вы измените базовый красный цвет на веб-сайте The First Twenty (выше) на салатовый? Было бы хорошо смотреться? Скорее всего, нет. Потому что он не принадлежит к той же цветовой палитре (и, конечно, салатовый цвет — не самый простой цвет для работы). Такие сайты, как ColourLovers, существуют не просто так.Вы не можете просто выбирать цвета в стиле Рэмбо, стреляя из оружия. Некоторые цвета хорошо сочетаются, другие — нет. Существует множество теорий о цветах и их комбинациях, включая соглашения о монохромных и контрастных схемах, но многое сводится к здравому смыслу и к .
Узнайте, что работает вместе. Используйте как можно больше дизайнов веб-сайтов, например, представленных на любом из множества веб-сайтов-витрин CSS (например, Best Web Gallery), чтобы почувствовать, как цвета взаимодействуют друг с другом. Выберите не более двух или трех основных цветов для вашего дизайна, а затем используйте оттенки (более светлые, смешанные с белым) и оттенки (более темные, смешанные с черным) этих основных цветов, чтобы при необходимости расширить палитру.
Выбор хороших цветов так же важен, как и выбор правильных цветов (то есть правильных цветов для работы). В веб-дизайне уютного ресторанчика подойдут «землистые» тона: красные, коричневые и т. Д. Конечно, безошибочного рецепта не существует. Каждый цвет отправляет сообщение , и вы должны понять это сообщение.
Веб-сайт
Бенс Кучан имеет собственную цветовую схему. В основном это монохроматический (оттенки и оттенки одного цвета) и ахроматический (черный и белый) с выделением цвета (красный):
Черно-белый цвет передает шик и профессионализм, в то время как красный добавляет пикантности, выделяя определенные элементы и не позволяя дизайну выглядеть скучно; Конечно, этот дизайн интересен не только красным.Кстати, именно одна компания популяризировала этот стиль.
Говоря о цвете, WebDesigner Wall от Ника Ла — настоящее блаженство:
Все эти мягкие пастельные тона делают этот дизайн сияющим. На первый взгляд выбор цвета может показаться несколько произвольным, но если вы присмотритесь, вы заметите строго определенную цветовую палитру, которая необходима для того, чтобы все элементы хорошо ладили друг с другом. Веб-сайт, и особенно его фон, также демонстрируют хорошее сочетание цветов и графики, что подводит нас к четвертой позиции…
4.Постарайтесь, чтобы графика хорошо сочеталась.
Хорошо, для отличного дизайна не нужно модной графики. Но плохая графика определенно повредит дизайну. Графика добавляет визуального сообщения. Такие сайты, как WebDesigner Wall, имеют впечатляющие иллюстрации, а другие — заниженные.
Тим ван Дамм использует на своем веб-сайте Max Voltar лишь несколько графических изображений, но он реализует их с величайшей продуманностью и тщательностью. Ненавязчивое фоновое изображение и утонченная корона — вот две части графики.Визуально они не слишком впечатляют, но все они добавляют внешний вид веб-сайту, и нигде нет ничего лишнего.
В течение некоторого времени Max Voltar имеет другой дизайн, чем показанный выше. Но за те два месяца, что он был в сети, он был одним из моих любимых. Из-за этого, а также из-за того, что в нем очень образцово использование графики, я выбрал его вместо последней версии.
Komodo Media от Rogie King намного более насыщен графикой, отлично выполнен как с технической, так и с тематической точки зрения.
Возможно, вы не являетесь хорошим иллюстратором или фотографом, но это не значит, что вы не можете разместить на своем веб-сайте отличную графику. Некоторые базовые навыки Photoshop, возможно, несколько стоковых изображений и отличный вкус — все, что вам нужно. Попробуйте сделать так, чтобы графика хорошо сочеталась с , и убедитесь, что они воплощают стиль, к которому вы стремитесь. Однако не все мы одарены одинаковыми природными способностями. Вы можете научиться чему-то у других, но иногда вам просто нужно выбрать стиль, который вам больше всего подходит (например, чистый стиль, если вы не лучший иллюстратор).
5. Улучшите типографику своего сайта.
Искусство шрифта — сложная тема для разговоров, потому что оно включает в себя очень много элементов. Хотя это можно рассматривать как отрасль дизайна, можно потратить всю жизнь на изучение всех его аспектов. Здесь не место для полной типографской справки, поэтому мы ограничимся обсуждением того, что принесет вам пользу в краткосрочной перспективе.
Веб-типографика хуже по сравнению с печатной типографикой . Самая большая разница заключается в том, что мы не полностью контролируем внешний вид шрифта в Интернете из-за его динамического характера.Очевидно, что у динамического рендеринга есть свои сильные стороны, но веб-дизайнеры мало могут контролировать результаты, по крайней мере, на данный момент. Отсутствие шрифтов на компьютере пользователя, различия в рендеринге в браузерах и платформах и, как правило, некачественная поддержка CSS делают типографику в Интернете сложной, если не разочаровывающей, задачей. Но хотя нам, возможно, придется подождать, пока CSS 3 для веб-типографики полностью раскрывает свой потенциал, теперь у нас есть средства, чтобы сделать его интересным и, что более важно, красивым .
Стеки шрифтов
Есть несколько довольно простых способов значительно улучшить типографику вашего веб-сайта, три из которых мы рассмотрим здесь.Один из них — стопок шрифтов .
Стеки шрифтов — это просто базовый CSS. Они позволяют вам определять порядок, в котором должны отображаться шрифты. Если быть точным, мы говорим здесь о гарнитурах, а не о шрифтах. Чтобы получить хорошее резюме по этому поводу, обратитесь к шрифту Джона Тана! = Шрифт.
body {font-family: "Helvetica Neue", Helvetica, Arial, без засечек; }
Указанное выше свойство придаст основной копии шрифт «Helvetica Neue». Однако для этого необходимо, чтобы на компьютере пользователя был установлен именно этот шрифт.В настоящее время Mac поставляется с предустановленной Helvetica (Neue), но на большинстве компьютеров с Windows ее нет.
Прелесть стеков шрифтов заключается в том, что вы можете определять «резервные». означает, что всякий раз, когда определенный шрифт отсутствует, браузер просто ищет следующий в строке. Конечно, это означает, что дизайн не будет выглядеть одинаково для всех, и поэтому мы снова теряем контроль. Но для тех, кто не хочет прибегать к другому решению (например, замене изображений), это лучшее, что на данный момент предлагает чистый CSS (до того дня, когда мы сможем с комфортом использовать @ font-face).
Wilson Miner использует стек шрифтов, который мы цитировали выше. Helvetica Neue — это усовершенствованная версия Helvetica. И хотя Arial установлен почти на каждом компьютере (по крайней мере, на компьютерах с Windows и Mac) и поэтому является популярным выбором для Интернета, большинство дизайнеров предпочитают Helvetica Arial. Таким образом, вы получаете лучшее из обоих миров: Helvetica для тех, у кого она есть, и Arial на случай, если Helvetica недоступна.
Джон Тан использует еще один интересный набор шрифтов для своих заголовков:
body {font-family: baskerville, 'palatino linotype', 'times new roman', засечки; }
Заголовки в Baskerville увидит лишь относительно небольшое количество посетителей, но это не проблема.Это придает дизайну дополнительную индивидуальность, не причиняя вреда тем, у кого его нет. Опять же, стеков шрифтов не идеальное решение, но они дают вам преимущество .
Измерение и ведение
Мера — это длина строк, а интерлиньяж — это высота строк (или вертикальный интервал). В CSS мерой можно управлять, задав ширину содержащего поля (например, элемента абзаца). Оба влияют на читаемость .Если строки слишком короткие или слишком длинные, пользователям будет неудобно читать контент; эту проблему часто можно встретить с гибкими макетами. Идеально от 40 до 80 символов в строке.
Интерлиньяж можно увеличить (или уменьшить, если вы действительно хотите), определив свойство line-height CSS. Как правило, для абзацев лучше всего подходит высота строки 1,5. Это означает, что при размере текста 12 пунктов высота строки становится 18 пунктов (12 × 1,5), что дает тексту некоторую передышку .
Висячие цитаты и пули
Третий способ улучшить читаемость — это висящие кавычки и маркеры. Вместо того, чтобы оставлять текст маркированных списков и кавычек с выравниванием по умолчанию, выровняйте его по горизонтали с остальным текстом на странице .
Тим ван Дамм использует подвесные пули для своей последней модификации Max Voltar:
Мы добавили красную линию, чтобы подчеркнуть выравнивание всего текста по горизонтали. Просто установив CSS-свойство padding-left маркированного списка на 0 , вы можете добиться того же результата.
С другой стороны, получение висящих кавычек не так просто. Большинство дизайнеров используют фоновое изображение для кавычек, а затем выравнивают его соответствующим образом, как это сделал Мэтью Бьюкенен:
Висячие кавычки здесь не нарушают поток текста . Это деталь, которой не часто уделяют внимание, но она стоит вложенных средств.
Правила печати, которые не применяются
Печать и Интернет — это не одно и то же. Это кажется довольно очевидным, но многие люди относятся к ним так, как будто они такие же.Печать фиксирована, а Интернет — динамичен. Невозможно полностью контролировать то, как ваш веб-дизайн будет выглядеть для всех. .
Вертикальный ритм, правильно выровненный текст (с переносами и без линий) и многоколоночный макет — это лишь некоторые из функций печати, которые (почти) невозможны в Интернете. Таким образом, нам есть чего ожидать от CSS 3. CSS 3, вероятно, не будет, однако, комплексным решением, и, вероятно, пройдут еще несколько лет, прежде чем мы сможем полностью использовать его преимущества.На данный момент мы просто должны принять эти различия: не смотрите на Интернет как на онлайн-версию печати; скорее используйте внутренний потенциал Интернета в полной мере.
Несколько слов о замене изображения
А как насчет замены изображений (техники замены шрифтов изображениями)? Мы говорили о наборах шрифтов, но разве они не уступают замене изображений? Что ж, это зависит от того, что вы считаете более важным: возможность отображать именно тот шрифт, который вы хотите, или наличие динамического, доступного и оптимизированного для SEO контента? Некоторые методы замены изображений стали довольно продвинутыми, но они все еще не так гибки, как обычный текст.Замена изображений хорошо подходит для заголовков и отрывков, но вряд ли является решением для основного текста.
6. Выделите элементы, добавив вокруг них пустое пространство.
Пустое пространство или отрицательное пространство связано с , а это , а не с . Как и мера и интерлиньяж, пустое пространство дает тексту передышку и пространственный мир . Вы можете выделить элементы , добавив вокруг них пустое пространство. Копия, например, не должна выглядеть тесной.Чтобы обеспечить удобочитаемость, убедитесь, что абзацы имеют достаточный отступ.
Реклама парфюмерии — или любая реклама предметов роскоши в этом отношении — известна тем, что в них используется пустое пространство… его множество; и шрифт с засечками для удобства.
Полагаю, пришло время бесстыдной розетки. На скриншоте выше изображен мой собственный сайт Shift (px). Дизайн в значительной степени опирается на типографику и пустое пространство. Белое пространство, вероятно, занимает около 50% страницы. Пустое пространство — один из самых простых (потому что вы на самом деле ничего не добавляете, не так ли?) И самых эффективных способов создать визуально приятный и читаемый дизайн.
Пустое пространство придает дизайну изящности. Не бойтесь оставить открытыми некоторые дыры, даже зияющие. Неопытные дизайнеры склонны вкладывать что-то в каждый уголок. Дизайн — это передача сообщения. Поэтому элементы дизайна должны поддерживать это сообщение, а не добавлять к нему шум.
Еще один хороший пример большого количества белого пространства:
«Астерия» Кайла Мейера показывает, что для приятного дизайна нужно немногое. Некоторые люди могут спутать «минимализм» с «простым».Но реализовать такой стиль непросто и непросто (даже если не нужно хорошо разбираться в графике или иллюстрациях).
7. Подключите все элементы.
«Связь» здесь в некоторой степени выдуманный термин, но, похоже, он лучше всего подходит для того, что мы имеем в виду. Соединение здесь относится к веб-дизайну, который имеет как единство, так и последовательность. . Эти два атрибута демонстрируют профессионализм дизайна (и, следовательно, его дизайнера). Это очень широкие атрибуты. Дизайн должен быть последовательным в использовании цветов, набора шрифтов, значков и т. Д.Все эти аспекты имеют значение; дизайн может выглядеть великолепно и по-прежнему иметь несоответствия.
Когда дизайн непоследователен, пользователь может потерять его единство. Единство немного отличается от последовательности. Единство относится к тому, как различные элементы дизайна взаимодействуют и сочетаются друг с другом. Например, совпадают ли цвета и графика? Все ли способствует единому сообщению? Согласованность, с другой стороны, находится между страницами дизайна.
Единство, пожалуй, более важное из двух.Без единства сложно создать хороший дизайн. Однако несогласованность может выглядеть немного «небрежно», но не может сделать дизайн «плохим».
Из семи принципов, рассматриваемых в этой статье, подключение является наиболее важным. Связь связана с тем, как сочетаются все элементы: баланс, сетка, цвета, графика, шрифт и пустое пространство. Это что-то вроде , клей, который связывает все воедино . Без этого клея конструкция разваливается. У вас может быть красивый шрифт и блестящая и тщательно подобранная цветовая палитра, но если графика ужасна или просто не совпадает, или если все сложено без раздумий, дизайн не удастся.
Это самая сложная часть проектирования. Это не то, чему можно легко научить или чему вообще можно научить. Требуется немного природных способностей и опыта. Но это то, что есть, и это в конечном итоге делает дизайн привлекательным.
Ранее мы хвалили WebDesigner Wall Ника Ла за прекрасную графику, но это также хороший пример связи. Если внимательно присмотреться к графике и стилю в целом, все выглядит нарисованным вручную акварелью: изображения статей, акварельные фоновые изображения, нарисованные от руки каракули и значки, стиль опроса и т. Д. на.Внимание к деталям делает этот дизайн непревзойденным.
Дополнительные ресурсы
Дополнительный ресурс
Если вы новичок в веб-дизайне, наше руководство по , как создать веб-сайт , поможет вам с самого начала.
Заключение
Хороший веб-дизайн не ограничивается семью ключевыми принципами, обсуждаемыми здесь. Также играют роль такие аспекты, как доступность, удобочитаемость и удобство использования.
Это причина того, почему веб-дизайн настолько сложен.Разобраться в дизайне легко, особенно сегодня, когда доступно так много систем управления контентом, инструментов и тем для ведения блогов. Но по-настоящему овладение всеми аспектами веб-дизайна требует времени и, честно говоря, таланта. Возможность создавать красивые дизайны — это всего лишь один аспект, но очень важный.
Эта статья изначально опубликована 15 октября 2009 г. и обновлена 11 мая 2021 г.
Получите идеальный макет веб-сайта за 27 шагов
Создание макета веб-сайта не должно быть сложной задачей, особенно если вы знаете типичных ошибок, которых следует избегать.В этом посте мы рассмотрим шаги, которые необходимо предпринять, чтобы создать идеальный макет веб-сайта. Мы расскажем, что каждый новый разработчик веб-сайтов должен знать и делать перед тем, как начинать новый проект, и на что им следует обратить внимание, чтобы избежать ошибок.
Эти шаги охватывают не только аспекты дизайна, но и общие советы по рабочему процессу. На этой странице мы узнаем, как начать работу и основные этапы рабочего процесса дизайна, а на странице 2 вы найдете общие советы по подходу к дизайну макета веб-сайта и советы по завершению проекта.Следуйте этому совету, и вскоре вы будете на пути к созданию профессиональных макетов веб-сайтов. Вы также можете прочитать об атомном дизайне как способе структурирования вашего сайта.
Все еще ищете хозяина? Взгляните на наше руководство по лучшим услугам хостинга веб-сайтов и лучшим конструкторам веб-сайтов прямо сейчас. И это не описано здесь, но не забудьте свои страницы с ошибками! Взгляните на нашу подборку лучших страниц 404 для вдохновения.
Начало работы
01. Определите, что означает успех
Добраться до сути цели вашего дизайна
Перед тем, как начать работу, вам нужно знать, для чего вы разрабатываете.Помимо описания сайта, вам нужно знать, чего от него ждут. Возьмем, к примеру, новостной сайт. Какая цель? Для того, чтобы сделать как можно больше показов рекламы или для лучшего восприятия чтения? Как будут измеряться эти цели?
Хороший редизайн — не обязательно самый яркий, но тот, который со временем улучшает производительность. Поговорите со своими клиентами перед тем, как приступить к дизайну, — это ключ к определению всего этого. Вам необходимо узнать, что их заботы и цели помимо письменного SOW (техническое задание).
02. Понимание текущего сайта
Чаще всего участие дизайнера в проекте не происходит изолированно. Клиенты не всегда будут связываться с вами, чтобы начать что-то с нуля. В большинстве случаев вам нужно будет понять существующую систему, и если ваш проект призван бросить ей вызов, найти возможности для ее развития или следовать ей как есть.
Возможности безграничны. Понимание того, что происходит с точки зрения дизайна, является ключевым моментом, если вы хотите быстро двигаться и распознавать возможности для инноваций, в отличие от необходимости оспаривать то, что было установлено, и вывести из себя человека, неспособного понять требования.
03. Обменивайтесь дизайном с клиентами на ранней стадии.
Предлагая интерактивную концепцию или дизайн, «внешний вид и ощущения», вы должны убедиться, что вы и клиент как можно скорее попадете на одну и ту же страницу. Не тратьте слишком много времени на концепцию, прежде чем поделиться ею с клиентом.
После утверждения первоначальной концепции можно немного расслабиться и начать производство. Но после представления первой концепции, если клиент не влюбляется в нее, вы должны собрать достаточно отзывов, чтобы представить вторую, более подходящую концепцию.
Рабочий процесс проектирования
04. Сначала займитесь компоновкой
Это кажется очень очевидным, но я слишком часто обнаруживал, что дизайнеры сразу же приступают к работе, прежде чем задумываться о проблеме, которую они пытаются решить. Дизайн — это решение проблем, и эти проблемы не могут быть решены с помощью градиентов или теней, а скорее с помощью хорошего макета и четкой иерархии.
Подумайте о содержании, макете и функциональности. Убедитесь, что эти мысли соответствуют целям вашего клиента, и не стесняйтесь делиться ими.
05. Начните рисовать каркас верхнего уровня
Базовый каркас поможет вам структурировать макет (щелкните значок в правом верхнем углу, чтобы увеличить)
Когда меня попросят создать внешний вид макета веб-сайта, Первое, что я делаю, — это создаю фреймворк верхнего уровня, который решает все проблемы проектирования. Фреймворк — это пользовательский интерфейс, который окружает контент и помогает пользователю выполнять действия и перемещаться по нему. Он включает в себя навигацию и такие компоненты, как боковые панели и нижние панели.
Если вы подойдете к своему дизайну с этой точки зрения, у вас будет четкое представление о том, что потребуется вашему макету при разработке разделов за пределами главной страницы.
06. Добавьте сетку
Пример сетки 978 с базовой линией 10 пикселей
Это так просто, как кажется. Перед тем, как что-либо проектировать, вам понадобится подходящая сетка. Нет веских оправданий для начала без сетки — и если вы этого не сделаете, могу вас заверить, дизайн будет выглядеть не так хорошо. Сетка поможет вам структурировать макет различных разделов; он проведет вас через конкретные требования к размеру экрана и поможет вам создавать адаптивные шаблоны, чтобы вы были едины с точки зрения интервалов, а также многих других проблем дизайна.
Чтобы узнать, как это сделать, ознакомьтесь с этим руководством по созданию сетки, которая адаптируется ко всем размерам экрана.
07. Выберите типографику
Практическое правило — использовать не более двух разных гарнитур в макете веб-сайта.
Изучение различных шрифтов и цветов является частью этапа открытия проекта. Как правило, я бы рекомендовал не использовать более двух разных шрифтов на веб-сайте, хотя это действительно зависит от его характера. Выберите шрифт, который легко читается для больших кусков текста, и будьте более игривы с заголовками и призывами к действию.Ищете вдохновение? Взгляните на наш обзор идеальных сочетаний шрифтов или список бесплатных шрифтов. Не бойтесь использовать большие шрифты, будьте изобретательны и последовательны при использовании типографики.
08. Выберите свою цветовую тему
Инструменты, такие как Color Hunt, разработаны, чтобы помочь вам выбрать палитру.
В процессе выбора набора гарнитур вы должны начать изучать, какие цвета вы будете использовать в интерфейсе, фонах и тексте. . Я рекомендую ограниченный набор цветов и тонов для общего пользовательского интерфейса.
Важно применять их последовательно во всем макете веб-сайта, в зависимости от функциональности каждого элемента. Подумайте о макете таких сайтов, как Facebook, Twitter, Quora и Vimeo. Помимо пользовательского интерфейса, не должно быть никаких ограничений по цвету для иллюстраций или графических деталей, если они не мешают функциональности компонентов.
Если вы застряли, взгляните на наш список лучших цветовых инструментов для веб-дизайнеров.
09. Упростите макет
Простые макеты, как правило, легче ориентироваться
Чем проще структура сайта, тем легче пользователям ориентироваться.Каждый раздел должен рассказывать историю; ему нужна причина и конечный результат для пользователя. Макет должен помогать контенту выделять наиболее важные части этой истории.
На самом деле на странице не должно быть слишком много призывов к действию — все должно приводить к финалу: «Что я могу здесь сделать?»
Подумайте о самом простом макете, который вы можете себе представить для простой цели, и начните добавлять необходимые компоненты. В конце концов вы удивитесь, насколько сложно сделать это простым.
10. Усовершенствуйте каждый компонент
Клаудио Гульери работал над дизайном пользовательского интерфейса в Microsoft Music
Относитесь к каждому компоненту так, как если бы он был представлен на конкурсе дизайна. Если вы обратите внимание на каждый компонент, целое будет больше, чем сумма его частей. Я должен признать, что это не мой совет. Я слышал это в предыдущем агентстве и был шокирован тем, насколько ясным и правдивым было это утверждение.
Каждый компонент должен быть спроектирован так, как если бы он мог стоять отдельно, как лучший компонент на свете.Иногда дизайнеры оставляют определенные части сайта до последнего в своем списке дел и в конечном итоге не проявляют к ним особого уважения.
11. Ознакомьте клиентов с вашими решениями
Избегайте больших откровений о своей работе. Одна из целей частого общения с клиентом — избежать сюрпризов при раскрытии своей работы. Когда я представлял свой прогресс, мне было более полезно взять их с собой в путешествие и показать, откуда я начал, соображения, которые у меня были при навигации по тому или иному испытанию и где я наконец приземлился, вместо того, чтобы просто показывать конец путешествия без контекста.
Сделав это, вы обнаружите, что они либо согласны с вашими выводами, либо в какой-то момент во время вашего прохождения укажут на недостаток или дополнительный вариант, который вы, возможно, не рассмотрели. В любом случае вы поговорите, и клиент почувствует себя более заинтересованным, поскольку он является частью процесса.
12. Думайте в движении.
Движение необходимо при разработке интерактивного взаимодействия.
Движение необходимо при разработке интерактивного взаимодействия. Ни один дизайн больше не может быть оценен сам по себе или как статическая композиция; Каждый компонент определяется своими отношениями с системой, и это отношение требует правильной передачи движения.Движение может иллюстрировать динамические эффекты на контент или интерактивные состояния в вашем макете. Для этой второй цели я рекомендую немного углубиться в прототипирование ваших дизайнов.
13. Прототип, прототип, прототип
Прототипирование — лучший способ проверить взаимодействия
Прототипирование — лучший способ проверить взаимодействия и технологии. В настоящее время существует множество инструментов для создания прототипов, которые упрощают задачу, и вам не нужно быть гуру программирования, чтобы создавать эффективные прототипы.Это еще один способ заинтересовать клиента и познакомить его с концепциями и идеями, которые в противном случае потребовали бы много объяснений.
Следующая страница: Дизайн и завершение
Как создать макет веб-сайта, который преобразуется за 10 простых шагов
Помимо быстрой загрузки сайта, полезно знать, как разработать макет веб-сайта, который преобразуется, если вы надеетесь добиться наибольшего успеха в Интернете.
Когда дело доходит до макета, хорошо работающий — это больше, чем просто «красивый» или простой в использовании.
Средний посетитель решит, нравится ему ваш сайт или нет, менее чем за полсекунды. Если вы хотите получить преимущество в своей области, ваш макет должен быть основан на науке о конверсии.
Вот что это значит.
Все тонкости создания работающего макета веб-сайта
Шаг 1. Думайте просто
Закон Хикса гласит, что чем больше вариантов вы даете людям, тем больше времени им потребуется, чтобы принять решение о выборе. Хотя более длительное пребывание на сайте может быть полезно для бизнеса, слишком большое количество вариантов может расстроить посетителей, что прямо противоположно тому, что вам нужно.
Урок состоит в том, чтобы сделать ваш макет интуитивно понятным. Меню должно включать общие термины, такие как «О нас» или «О нас», «Связаться с нами» или «Связаться с нами», а также, например, «Блог», «Часто задаваемые вопросы» и «Услуги».
Неправильный способ составить список своего меню — называть свой блог «Размышлениями», а свои услуги — «Нашим хлебом и маслом». Загадочный сайт никогда не преуспевает в конвертации.
Вместо этого используйте элементы меню и общий язык на вашем сайте, который ваши посетители быстро и легко поймут.
Шаг 2. Использование отрицательного пространства
Частью упрощения макета вашего сайта является интенсивное использование отрицательного пространства.
Это не просто означает оставлять пробелы между изображениями и абзацами, что, конечно, важно. Это также означает использование отрицательного пространства для привлечения посетителей в ожидаемом вами направлении, например, призыв к действию.
Хорошая иллюстрация того, что негативное пространство используется с пользой, — это главная страница Google. Здесь очень ясно, что ожидают от посетителей, и нет беспорядка, который их смущает.
Нет ничего проще. Не добавляя больше изображений, текста и других элементов на свою домашнюю страницу, посетители точно знают, как перейти к следующему шагу, который, конечно же, является конверсией.
Шаг 3. Поймите, что цвета имеют значение
85% покупателей считают, что цвет в значительной степени влияет на их решение о покупке. Психология цвета имеет значение для маркетологов, особенно когда речь идет о веб-дизайне и верстке.
Предлагаем вам изучить и протестировать цветовые схемы, на которые ваша аудитория может больше всего откликнуться. Правильные цвета могут вызывать определенные эмоции. Кроме того, такие вещи, как демографические данные, могут влиять на то, как посетители воспринимают ваш сайт.
Чтобы найти подходящую цветовую схему, используйте цветовое колесо и ищите дополнительные цвета (те, которые противоположны на колесе) или аналогичные цвета (те, которые находятся рядом друг с другом на колесе).
Эти цветовые схемы могут придать глубину макета вашего сайта и сделать его более интересным, удерживая людей на сайте достаточно долго, чтобы принять положительное решение о покупке.
Шаг 4. Правильно отформатируйте убедительную копию
Как веб-дизайнер, вы могли бы предпочесть оставить веб-копию фактическому копирайтеру. Однако вы все равно должны знать, где разместить текст для максимального преобразования, даже если это временно lorem ipsum.
Заголовок имеет первостепенное значение и должен быть в центре внимания на главной странице, чтобы донести ценностное предложение бренда.Каждая последующая страница должна содержать заголовок, свидетельствующий об актуальности содержания этой страницы.
После заголовка исследование показывает, что размещение текста буквой «F» работает лучше всего, поскольку люди обычно читают контент в Интернете.
Если вы хотите, чтобы на вашем веб-сайте было много текста, разложите его по полям и отформатируйте для скиммеров, чтобы чтение было легким и удобным для всех посетителей сайта.
Обратите внимание, как State Farm решила разбить свое содержание на приятные маленькие разделы, чтобы упростить поиск того, что вы хотите, для глаз и для разума.
Шаг 5. Четко сформулируйте результат
Веб-макет с высокой степенью конвертации — это макет, ориентированный на действия, которые вы хотите, чтобы ваши посетители выполняли.
Лучшие макеты действительно помогают вашим посетителям пройти через этот процесс. Ваши призывы к действию должны быть размещены на видном месте, чтобы они выделялись и были замечены без особых усилий.
Если вы хотите, чтобы посетители звонили по телефону, заполняли форму или делились вашим контентом в социальных сетях, ваш макет должен действовать как дорожная карта, которая ведет посетителей из точки A в точку B, при этом точка B, конечно же, окончательное преобразование.
Шаг 6. Не бойтесь брать взаймы
Вместо того, чтобы изучать все нюансы создания макета веб-сайта, взгляните на другие веб-сайты, работающие в том же пространстве. Таким образом, вы сможете воспользоваться преимуществами всех исследований и тестов, в которых, возможно, участвовали ваши конкуренты.
Если вам нравится их макет, скорее всего, вы смотрите на довольно успешные сайты. Скопируйте эти дизайны, чтобы сделать макет еще более предсказуемым и интуитивно понятным.
Шаг 7. Переходите на отзыв
Посетители вашего сайта в пять раз вернутся обратно, если ваш сайт не оптимизирован для мобильных устройств.Поскольку люди регулярно переключаются между устройствами, становится важным обеспечить бесперебойную работу на всех устройствах, подключенных к Интернету.
Ключ состоит в том, чтобы убрать столько необходимости, чтобы прокручивать, щелкать и смахивать, сколько необходимо. Разместите наиболее важную информацию о сгибе, но создайте возможности для посетителей, которые хотят узнать больше.
Обратите внимание, что Dropbox не оставляет вопросов о том, что от вас ожидает. Вы можете зарегистрироваться справа, щелкнуть простое двухэтапное меню навигации или прокрутить вниз, чтобы узнать больше.Даже на мобильном телефоне нет причин для прокрутки или пролистывания. Вы просто делаете свой выбор.
Убедитесь, что ваш сайт предлагает такие же возможности на всех устройствах, как и CrazyEgg. Посетителям предлагается один и тот же простой выбор и приятный для глаз дизайн — от настольных компьютеров до самых крошечных экранов.
Шаг 8: Расскажите о своих предложениях и улыбающихся лицах
Исследования показывают, что более крупные и привлекательные изображения приводят к более высокому коэффициенту конверсии.
Помимо размера и качества изображения, которые вы выбираете для макета своего сайта, должны быть целенаправленными.Они должны продемонстрировать ваши продукты или услуги в лучшем свете и всех людей с улыбающимися лицами в теплой и позитивной обстановке.
Шаг 9: стратегически разместите знаки доверия и элементы социального доказательства
Посетители вашего веб-сайта хотят знать, что вашей организации можно доверять, например, с помощью их файлов cookie, а также личных данных и данных кредитной карты.
Вы можете укрепить доверие, добавив эмблемы доверия и элементы социальной защиты.
Знаки
Trust включают логотипы популярных брендов, которые пользуются вашими услугами или продуктами. Примеры социального доказательства могут включать логотипы клиентов, отзывы довольных клиентов, ссылки на тематические исследования клиентов и видеоролики с рассказами клиентов.
Платформа для повышения производительности
Asana включает в себя как отзывы довольных клиентов, так и известные логотипы брендов, повышая фактор доверия со стороны всех посетителей сайта.
Content Analyzer Grammarly — еще один бренд, который сообщает своим посетителям, что они будут в лучшей компании, предоставляя отзывы довольных пользователей прямо на их главной странице.
Используйте эти примеры, чтобы улучшить фактор доверия, который вы передаете своей аудитории, и вы можете увидеть хороший рост количества подписчиков и покупок.
Шаг 10: Продолжайте тестирование!
Независимо от того, сколько исследований вы проводите, только ваша аудитория может сказать вам, какой макет они предпочитают.
Если вы хотите больше конверсий, ваша задача — последовательно тестировать каждый элемент вашего сайта. Например, простое изменение кнопок с призывом к действию может привести к значительному увеличению числа регистраций или покупок.
Hubspot обнаружил, что изменение CTA страницы с зеленого на красный привело к увеличению коэффициента конверсии на 21%. Эти результаты были бы невозможны без надлежащего тестирования.
Будьте внимательны, и всегда тестирует с использованием новейших инструментов и процессов.
Хорошие и простые примеры макета веб-сайта
Вот несколько веб-сайтов, которые добились простого и удобного макета.
Unbounce использует дополнительные цвета (оранжевый и синий).Сайт использует пустое пространство, чтобы привлечь внимание к заголовку. И посетителям сайта предоставляется два основных выбора. Или они могут нажать на четко обозначенный призыв к действию в правом верхнем углу.
Есть и другие варианты, но они для тех, кто может их искать. И когда они ищут, эти элементы найти не составит труда. Понятно, что должны делать посетители, и сайт, несомненно, получает много натуральных конверсий.
Платформа электронной коммерции
Shopify также предоставляет простое меню и использует много пустого места для привлечения посетителей к конверсии.Изображения большие и качественные, а призывы к действию выделяются и привлекают внимание.
Вам также предлагается перейти на другие ваши любимые веб-сайты. Все это время думайте о том, как эти сайты разработаны, и как вы можете использовать примеры для добавления в свой собственный макет.
10 советов и идей по созданию более привлекательного сайта
Нет необходимости переделывать ваш сайт, чтобы сделать его более привлекательным. Подытоживая пост, вот десять простых приемов для создания более привлекательного макета, который можно конвертировать.
Используйте реальных людей
Обменяйте любые общие или стоковые фотографии на фотографии реальных людей, особенно когда речь идет о внедрении таких знаков доверия, как отзывы и тематические исследования.
Посетители вашего сайта будут больше сопереживать реальным людям, чем фотографиям общего характера.
Упростите свое меню
Если вам кажется, что ваше меню слишком сложное, сократите его.
Добавьте подменю для создания иерархии тем, например, поместите все ваши продукты под заголовком «Продукты» или услуги под заголовком «Услуги».Должны быть видны только самые важные пункты меню, но даже глубокие страницы должны быть легко найдены.
В качестве примечания включите функцию поиска, чтобы посетителям было еще проще находить интересующий их контент.
Удалить дополнительные параметры
Никогда не создавайте более одного призыва к действию на странице, если можете. Чем меньше вариантов, тем быстрее и с большей вероятностью будут действовать ваши посетители. Если в настоящее время вы предлагаете слишком много вариантов, удалите некоторые из них, чтобы прояснить, чего вы ожидаете от своей аудитории.
Удалить и увеличить изображения
Если у вас слишком много изображений, ваш сайт может ошеломить вас. Попробуйте вырезать некоторые из них, чтобы упростить просмотр страниц.
Если у вас есть изображения, увеличьте их, чтобы их было удобнее просматривать на экране любого размера.
Измени свою цветовую схему
Используйте цветовое колесо и экспериментируйте с различными цветовыми схемами, принимая во внимание предпочтения посетителей и последовательно тестируя различные цветовые схемы, чтобы найти наиболее подходящую.
Учитывать намерение посетителя
Люди, посещающие ваш веб-сайт, скорее всего, думают об одном действии.
Они хотят узнать больше или, например, купить. Примите во внимание эти мотивы при выборе макета своего сайта. Если им нужна информация, сами подробности, которые они ищут, должны быть в центре внимания в момент перехода на эту конкретную страницу.
Добавить знаки доверия
Соберите положительные отзывы и добавьте изображения и видео этих людей на свой веб-сайт.Создавайте тематические исследования и добавляйте логотипы тех, с кем вы ведете бизнес, и других деловых партнеров.
Они могут улучшить конверсию, заставляя людей чувствовать себя в безопасности при просмотре, подписке и покупке.
Сделайте это ясно Как связаться
Посетителям никогда не придется искать способы связаться с вашей организацией, особенно если им нужна помощь. Подумайте о добавлении чат-бота, чтобы помочь посетителям, даже если никто не может ответить на важные вопросы.
Увеличьте количество конверсий с помощью иерархии контента
Думайте, как один из ваших посетителей, заходите на свою домашнюю страницу и ищите по своему сайту, чтобы найти то, что вам нужно.Легко ли найти информацию, которую вы ищете, или вы нажимаете слишком много раз, чтобы перейти на более глубокие страницы своего сайта?
Эти типы ролевых упражнений помогут вам сократить макет вашего веб-сайта до такого, который будет направлять ваших клиентов к информации, которую они ищут, а затем, в конечном итоге, к конверсии.
Узнайте мнения посетителей
Если вы хотите знать, как создать преобразующий макет веб-сайта, почему бы не получать информацию прямо от посетителей?
Вот несколько способов сделать это.
Как узнать, нравится ли посетителям макет вашего веб-сайта
Обратите внимание на высокоуровневые метрики сайта
Google Analytics дает представление о том, сколько у вас новых и постоянных посетителей, сколько времени они проводят на той или иной целевой странице и как часто они возвращаются после посещения только одной страницы.
Начать просмотр пользовательской навигации
Crazy Egg позволяет легко увидеть, как посетители взаимодействуют с вашим веб-сайтом, когда это происходит. После подписки на бесплатную 30-дневную пробную версию вы сможете анализировать свой веб-сайт с помощью тепловых карт.
Тепловые карты показывают, где посетители вашего сайта наводят курсор, нажимают на него и какие формы заполняют.
A / B тест различных элементов макета
Основываясь на ваших наблюдениях за поведением пользователей, вы можете легко протестировать различные элементы сайта, такие как размещение текста, размеры изображений и заголовки, без необходимости разбираться в коде.
После применения приведенных выше советов продолжайте тестирование своего сайта, а затем сохраняйте те самые элементы, которые повышают конверсию.
В конце концов, вы получите супер-сайт, который сочетает в себе все лучшие элементы для максимального успеха.
Заключение
Дизайнеры сайтов и маркетологи должны знать, как разработать макет веб-сайта для максимальной конверсии.
Это значит узнать о своей аудитории и о том, чего они хотят. Это означает понимание того, как доставлять важную информацию естественно и интуитивно. Прежде всего, это означает простоту и беспорядок.
Если вы чувствуете, что ваш сайт сейчас не на высоте, не волнуйтесь.Начните вносить небольшие изменения в свой сайт, основываясь на реальном поведении клиентов, и вы все равно сможете выйти вперед.
Если учесть, что простое обновление вашего веб-сайта для отражения более современного дизайна может повысить конверсию до 33%, может помочь всего одно действие.
Затем продолжайте добавлять и тестировать элементы в макет своего веб-сайта, чтобы сделать его еще более удобным для пользователей.
В свою очередь, вы обязательно ощутите значительный рост конверсий на вашем сайте.
Как сделать ваш сайт красивым, когда вы не дизайнер
(Последнее обновление: 13 января 2021 г.)
Это может показаться не таким уж большим делом, но внешний вид вашего веб-сайта имеет большое значение. В недавнем исследовании Forrester Research они обнаружили, что хорошо разработанный интерфейс может увеличить коэффициент конверсии на вашем веб-сайте на 200%.
Но создать собственный веб-сайт сложно.
С чего начать? Какой шрифт выбрать? Какой цвет? Куда должно идти меню? Эти — и многие другие вопросы — могут заставить вас сдаться еще до того, как вы начнете.
В этом посте мы покажем вам несколько стратегий (и пять советов) по созданию собственного веб-сайта.
Шаг 1. Выберите инструменты, которые вы будете использовать для создания своего веб-сайта
Множество инструментов, доступных в Интернете, — это то, что позволяет вам спроектировать и создать свой собственный веб-сайт, не нанимая веб-дизайнера.
Прямо сейчас есть два идеальных типа программного обеспечения, которые вы можете использовать для создания своего веб-сайта:
Система управления контентом (CMS) : Система управления контентом, такая как WordPress, является самым простым инструментом, с помощью которого вы можете создать свой веб-сайт.Это потому, что он поставляется с шаблонами, которые представляют собой готовые дизайны веб-сайтов, которые вы можете просто установить и настроить, пока не получите желаемый вид.
Конструкторы веб-сайтов : Конструкторы веб-сайтов — это инструмент перетаскивания, который позволяет вам профессионально создавать веб-сайты без каких-либо специальных знаний. Вы контролируете внешний вид каждого элемента (текстовое поле, виджет, кнопку и т. Д.) И можете изменить его дизайн и расположение, просто используя мышь.
Если вы хотите быстро разработать свой веб-сайт, вам следует выбрать CMS.Но если вы хотите иметь больший контроль над дизайном своего веб-сайта, вам следует выбрать конструктор веб-сайтов.
Шаг 2. Подготовьте каркас своего веб-сайта
Примечание. Если вы собираетесь использовать CMS и ее шаблоны для дизайна своего веб-сайта, вы можете пропустить этот шаг. Но если вы собираетесь создавать веб-сайты с нуля, читайте дальше.
Если вы действительно стремитесь создать уникальный дизайн для своего веб-сайта, вам следует начать с создания каркаса.
Каркас — это структурное представление, показывающее, как будет выглядеть ваш веб-сайт. Думайте об этом как о проекте своего веб-сайта, который, как проект дома, поможет вам создать свой веб-сайт.
Вот пример каркаса для веб-сайта Back To My Body:
Этот простой каркас дает четкое представление о том, как будет выглядеть приборная панель.
Показывает:
Структура сайта
Навигационная иерархия веб-сайта
Какие части контента пойдут куда
Для создания каркаса веб-сайта не нужно использовать сложное программное обеспечение.Вы можете просто использовать старый добрый лист бумаги и ручку, чтобы создать каркас вроде этого:
Кредит изображения: Блог Graybox
И прежде чем вы начнете создавать каркас своего веб-сайта, вы должны добавить этот букмарклет Wirify в свой браузер. Он покажет вам макеты ваших любимых веб-сайтов, когда вы их посетите. Это отличный способ вдохновиться, прежде чем приступить к созданию своего первого каркаса.
Вот основная идея основных компонентов, которые вы должны разместить на главной странице своего веб-сайта:
1.Логотип: разместите свой логотип в самом верху вашего сайта.
2. Основное и дополнительное меню: Затем добавьте строку меню, которую посетители будут использовать для просмотра вашего веб-сайта.
3. Заголовок: О чем ваш веб-сайт? Напишите здесь одно короткое предложение, объясняющее, чего посетители могут ожидать от вашего веб-сайта или вашего предложения.
4. Подзаголовок: Сразу под основным заголовком напишите еще несколько предложений, объясняющих, какую ценность ваш веб-сайт или ваш продукт / услуга принесет вашим посетителям.
5. Кнопка призыва к действию: Какое действие номер один вы хотите, чтобы ваши посетители выполняли? Покупайте продукты, подписывайтесь на рассылку новостей, подписывайтесь на ваши услуги? Поместите кнопку рядом с подзаголовком, чтобы посетители увидели его в первую очередь.
6. Фоновое изображение: Поместите фоновое изображение, которое представляет предлагаемый вами продукт / услугу. При желании можно также поставить скользящую карусель с несколькими изображениями.
7. Продукты / услуги: Внизу страницы (часть вашего веб-сайта, которую посетители должны прокрутить, чтобы увидеть), покажите им список продуктов или услуг, которые вы предлагаете, с возможностью щелкнуть по нему, чтобы они могли получить больше Информация.
8. Контент: Если ваш контент составляет большую часть вашего веб-сайта, вы можете пропустить раздел продуктов / услуг (который может перейти на другую страницу)
и прямо перечислить ваши последние статьи.
9. Отзывы: Чтобы завоевать доверие, постарайтесь собрать несколько положительных отзывов от ваших прошлых клиентов и поместить их в самом конце вашего веб-сайта (вместе с любыми гарантиями, которые вы, возможно, захотите предложить).
Для ясности: эта структура размещения контента не является строгим набором правил, а скорее является общим руководством, которому вы должны следовать при создании своего первого каркаса.
Шаг 3. Определите, какие страницы будут на вашем веб-сайте
Прежде чем вы начнете процесс каркаса (или отредактируете шаблон), вы собираетесь решить, какие страницы будут на вашем веб-сайте. А для этого вам нужно спросить себя, что в первую очередь должно делать ваш веб-сайт.
Хотите, чтобы он продавал товары? Витрина информации и статей? Расскажите, на что способны ваши услуги или продукты? Представьте свою компанию или бизнес?
Как только вы ответите на этот вопрос, вам станет легче решить, какие страницы вы хотите разместить на своем веб-сайте.
Вот некоторые общие страницы, которые есть на многих веб-сайтах:
Домашняя страница
Блог
О нас
Контакт
Стоимость
Из этих страниц наиболее распространенной страницей на каждом веб-сайте (которая также будет на вашем веб-сайте) является домашняя страница. Традиционно домашняя страница делится на следующие части:
Заголовок: Заголовок обычно включает логотип вашей компании / бизнеса, дополнительное меню и другие элементы, такие как поле поиска, виджет корзины или что-то еще.
Главное меню: Главное меню включает в себя навигационные ссылки на страницы, которые будут наиболее интересны вашим посетителям, и является центральным для вашего веб-сайта. Это может включать ссылки на ваши продукты, услуги, статьи и многое другое. Главное меню обычно включает ссылки на целые категории или основные разделы.
Дополнительное меню: Дополнительное меню содержит ссылки на дополнительные страницы, которые не являются центральными для вашего веб-сайта, но все же должны быть там. Некоторые второстепенные пункты меню — это «реклама», «политика конфиденциальности», «условия использования» и т. Д.
Основное содержание: Это основная область вашего веб-сайта. Он познакомит читателей с вашим веб-сайтом, а также выделит ваши последние продукты, объявления, услуги и контент.
Боковая панель: Боковая панель может включать в себя виджеты, такие как форма подписки, архив, кнопки социальных сетей и другие призывы к действию, по которым посетители могут действовать. Причина в том, что элементы боковой панели остаются в поле зрения независимо от того, на какой странице находятся ваши посетители.
Нижний колонтитул: Нижний колонтитул действует как последняя подстраховка для вашего веб-сайта.Здесь вы можете разместить навигационные ссылки, карту сайта, формы подписки, виджеты и другие вещи, на которые ваши посетители могут нажимать перед тем, как покинуть ваш сайт. Вы также можете добавить политику конфиденциальности, условия использования и другие важные страницы в нижний колонтитул.
После того, как вы перечислите нужные страницы, вы можете приступить к созданию каркаса вашего веб-сайта — или начать добавлять страницы в свой шаблон на WordPress.
Пять советов, которые помогут вам создать красивый веб-сайт
Теперь, когда вы знаете основы структурирования своего веб-сайта, вот несколько советов, которые следует учитывать при его разработке.
1. Начните со структуры навигации вашего веб-сайта
Когда посетители попадают на ваш сайт, они должны легко и быстро находить то, что ищут. За это отвечает хорошая навигация.
Для этого нужно разделить контент на категории и поместить ссылки на эти категории в основное и дополнительное меню.
Например, если вы планируете создать магазин электронной коммерции для продажи чемоданов, ваша структура навигации может выглядеть примерно так:
1.Домашняя страница (или целевая страница)
2. Товары стр.
а. Ручная кладь
и. Конкретная марка 1 Landing Page
ii. Конкретная марка 2 Landing Page
iii. Конкретная марка 3 Landing Page
г. Средний
и. Конкретная марка 1 Landing Page
ii. Конкретная марка 2 Landing Page
iii.Конкретная марка 3 Landing Page
г. Большой
и. Конкретная марка 1 Landing Page
ii. Конкретная марка 2 Landing Page
iii. Конкретная марка 3 Landing Page
3. О нас
а. Кто мы
г. Что мы делаем
4. Касса
5. Блог
6. Политика магазина
а.Политика конфиденциальности
г. Доставка и возврат
г. Часто задаваемые вопросы
При разработке навигации по веб-сайту не забывайте отображать на своем веб-сайте только основные пункты меню. Хорошая практика — ограничить ссылки в основном и дополнительном меню семью или менее элементами.
Веб-сайт Microsoft — отличный тому пример.
В их главном меню всего четыре ссылки: Магазин, Устройства, Программное обеспечение и Приложения. Каждый пункт меню имеет собственное раскрывающееся меню, которое ведет к другому меню , показанному справа.
Этот интеллектуальный способ категоризации пунктов меню позволяет пользователям легко находить то, что им нужно, и в то же время предотвращает информационную перегрузку.
Разумно используя категории и подкатегории — и создавая раскрывающиеся меню — вы тоже можете упростить навигацию по сайту и упростить для посетителей просмотр вашего сайта.
Plus, создание навигационной структуры поможет вам решить, сколько страниц вам нужно для вашего веб-сайта и куда должна идти каждая страница.Это будет особенно полезно, если вы создаете каркас своего веб-сайта.
2. Создайте руководство по стилю для своего веб-сайта
Потратить время на создание руководства по стилю для своего веб-сайта — один из самых эффективных способов сделать свой веб-сайт красивым.
Ваше руководство по стилю определяет не только то, как будет выглядеть ваш веб-сайт, но и то, как будут выглядеть ваши страницы в социальных сетях, рекламные баннеры и другие цифровые медиаресурсы.
Руководство по стилю состоит из пяти основных компонентов.Давайте кратко обсудим каждый из них:
История бренда
Первое, что вам нужно сделать, это представиться миру:
Кто ты? Зачем вы существуете? Какая у тебя миссия? Какое у тебя видение?
Эти вопросы важны, потому что история вашего бренда не только поможет вам привлечь нужную аудиторию, но также поможет вам заложить основу для «индивидуальности» вашего веб-сайта.
Будет ли это шикарно и весело? Тепло и профессионально? Круто и корпоративно? Весело и энергично?
Единственный способ решить это — иметь историю бренда, сопровождаемую видением, миссией и набором основных ценностей.
Логотип
Следующее, что вам нужно решить для своего веб-сайта, — это ваш логотип. Существует множество инструментов, позволяющих бесплатно создать свой логотип. Но если вы хотите выбрать что-то более профессиональное, вы можете нанять дизайнера на таких торговых площадках, как Fiverr, Upwork и 99Designs.
Цветовая палитра
Ваш веб-сайт должен иметь цвет, который вы будете добавлять в такие элементы, как логотип, меню навигации, фон, изображения и иллюстрации.
Для начала вам следует выбрать для своего сайта комбинацию из трех цветов:
A Основной цвет
A Дополнительный цвет
Третичный цвет
Эта полезная таблица от BrightSide показывает отличный способ выбрать комбинацию из трех цветов для вашего веб-сайта. Для идеального сочетания все три ваших цвета должны быть на равном расстоянии друг от друга по кругу, которые при соединении образуют идеальный треугольник.
По их словам, такое сочетание цветов « даст эффект высокой контрастности при сохранении» гармонии.Такая композиция выглядит яркой даже при использовании бледных и ненасыщенных цветов. ”
Вы можете применить основной цвет с разными оттенками к фону и элементам вашего веб-сайта. Ваш шрифт может иметь вторичный цвет и должен быть темным. Ваши третичные цвета можно использовать в сочетании с основными и вторичными цветами, чтобы выделить их, и поэтому они должны быть нейтральными.
Вот краткая шпаргалка, любезно предоставленная 99designs, о различных эмоциях, вызываемых определенным цветом, чтобы вы могли выбрать тот, который подходит вашему веб-сайту:
Красный — страсть, важность, внимание
Апельсин — игривость, дружелюбие, бодрость
Желтый — счастье, оптимизм, предупреждение
Зеленый — природа, стабильность, благополучие (рост)
Голубой — спокойствие, доверие, открытость
Темно-синий — профессионализм, безопасность, формальность
Purple — роялти, творчество, роскошь
Pink — женственность, молодость, невинность
Коричневый — грубый, землистый, старомодный
Белый — чистый, добродетельный, здоровый
Серый — нейтральный, мрачный, приглушенный
Черный — мощный, изысканный, стильный
Типографика
В веб-дизайне шрифты являются важной частью общего дизайна вашего веб-сайта.Это потому, что они «разговаривают» с вашими посетителями и показывают им, какой характер у вашего сайта.
Хотите выглядеть роскошно, стильно, важно или непринужденно? Выбор хорошей типографики — лучший способ передать этот образ.
Кредит изображения: MarkoSimić
Как правило, вы должны выбрать для своего веб-сайта три шрифта. Если больше, то ваш сайт запутает ваших посетителей.
Первый шрифт — ваш основной шрифт.Этот шрифт будет использоваться в заголовках повсюду на вашем веб-сайте, поэтому он должен выглядеть большим, жирным и привлекать внимание всех, кто его просматривает.
Следующий шрифт — ваш дополнительный шрифт. Это будет использоваться для текста. Этот шрифт должен быть легко читаемым, с большим интервалом, не должен быть курсивом или иметь странный дизайн. Однако это должно быть легко сканировать.
Наконец, последний шрифт, который вы хотите на своем веб-сайте, — это акцентный шрифт. Этот шрифт будет использоваться в кнопках CTA, строках меню и в качестве акцента для ваших основных и дополнительных шрифтов.
Следует иметь в виду, что хотя шрифты будут разными, они должны дополнять друг друга. Чтобы понять, как это сделать, вы можете просмотреть такие сайты, как Dribbble и Awwwards, чтобы получить представление о том, как профессиональные дизайнеры комбинируют разные шрифты.
Изображения и иллюстрации
Вашему сайту потребуются изображения или иллюстрации — или их комбинация. Изображения на вашем веб-сайте будут непосредственно вызывать эмоции ваших посетителей.
Вот почему выбор правильного типа изображений имеет решающее значение для вашего веб-сайта, чтобы задать правильный тон вашей аудитории.
Например, если вы продаете обувь в своем интернет-магазине, вам нужны яркие изображения людей, которые бегают, ходят в походы, скалолазания и занимаются другими интенсивными видами деятельности. Вам не нужно изображение человека, спящего на своей кровати.
Важно не только выбрать правильное изображение, но и убедиться, что оно высокого качества и выглядит искренним.
3. Убедитесь, что дизайн вашего веб-сайта выглядит чистым и использует пробелы
Сегодня у людей очень низкая продолжительность концентрации внимания. Вот почему вам нужно следить за тем, чтобы ваш веб-сайт выглядел чистым в момент, когда на него заходят посетители.
Если посетители находят ваш веб-сайт сбивающим с толку, они больше не вернутся. И из людей, которые покидают ваш сайт из-за плохого опыта, 88% с меньшей вероятностью когда-нибудь вернутся снова. Но с другой стороны, если вы сделаете свой веб-сайт чистым, то повысите коэффициент конверсии до 400%.
Чтобы ваш веб-сайт выглядел чистым, используйте много пробелов в изображениях продуктов, элементах навигации и типографике.
Это позволяет посетителям легко «сканировать» ваш веб-сайт и переваривать представленную на нем информацию. Это поможет вам сосредоточиться на тех частях веб-сайта, которые вам нужны.
Черный фон, который вы видите здесь, на веб-сайте Apple, не бесполезен. Он действует как пробел, который фокусирует внимание на том, что важно, то есть на меню навигации, заголовке и изображении iPhone.
4. Найдите «голос» своего веб-сайта
В реальной жизни тон, которым вы пишете маме и папе, вероятно, отличается от того, как вы пишете своему лучшему другу. Точно так же «тон» вашего веб-сайта будет отличаться в зависимости от аудитории, которую он обслуживает.
Если он нацелен на миллениалов и предназначен для повышения продуктивности, вы можете говорить «веселым» голосом. С другой стороны, если вы имеете дело с руководителями компаний из списка Fortune 500, вы можете захотеть, чтобы ваш веб-сайт говорил в более профессиональном тоне.
Опять же, история вашего бренда играет большую роль в принятии решения.
Здесь вы можете увидеть, как Basecamp, сайт, предлагающий программное обеспечение для повышения производительности, обращается к своей аудитории, то есть техническим специалистам и стартапам.
Чтобы эффективно задать тон вашему сайту, мы рекомендуем вам нанять копирайтера, который будет писать содержание вашего сайта. Они могут работать с вами и помочь вам найти лучший тон голоса для вашего веб-сайта.
5. Оптимизируйте взаимодействие с пользователем (UX) вашего веб-сайта
Стив Джобс однажды сказал, что «дизайн — это не то, как он выглядит, а то, как он работает».
То же самое и с дизайном вашего веб-сайта.
Неважно, насколько красив ваш веб-сайт или сколько на нем анимации и графики; если он не загружается должным образом, вы потеряете посетителей и, что еще более важно, ваши продажи.
Чтобы этого не произошло, важно оптимизировать свой веб-сайт по скорости и производительности. Вот три способа сделать это:
Создайте мобильную версию своего веб-сайта. Сегодня все больше людей выходят в Интернет со своих телефонов.Вот почему так важно сделать ваш веб-сайт «адаптивным», то есть загружать мобильную версию при доступе с телефона.
Используйте сеть CDN для быстрой загрузки вашего веб-сайта: сеть CDN хранит ваши мультимедийные файлы на серверах по всему миру, поэтому, когда пользователи запрашивают доступ к вашему веб-сайту, они перенаправляются на сервер, который находится ближе к их региону. Благодаря этому ваш сайт быстро загружается для всех посетителей, где бы они ни находились.
Сжимайте изображения с помощью компрессора изображений: компрессор изображений просто уменьшает размер изображений и графики на вашем веб-сайте, чтобы они загружались быстро.
Сосредоточив внимание на дизайне и производительности своего веб-сайта с помощью этих советов по дизайну, вы сможете сделать просмотр своего веб-сайта приятным для посетителей.
И хотя эти советы не превратят вас в профессионального веб-дизайнера в одночасье, они помогут вам создать красивый веб-сайт для вашего следующего онлайн-бизнеса или побочного проекта.
Вы разрабатываете свой веб-сайт самостоятельно? Сталкивались ли вы с какими-либо проблемами? Расскажите об этом в комментариях!
См. Как создать веб-интерфейс и пользовательский интерфейс
Шаг 2.Исследования и зарисовки
Когда мы завершили этап планирования, мы можем перейти к этапу исследования. Мы можем проверить другие существующие веб-сайты, чтобы увидеть, как они созданы, какие элементы там используются , и мы можем обсудить с заказчиком, можно ли использовать соответствующие веб-сайты в качестве примера для его или ее настраиваемого веб-сайта.
Эскиз как первый шаг к созданию веб-дизайна
Кроме того, мы всегда подсказываем нашим клиентам, что они всегда должны знать своих конкурентов.Это означает, что мы изучаем и анализируем веб-сайты конкурентов и принимаем решение о том, как сделать дизайн нашего веб-сайта лучше и привлекательнее.
В результате мы можем сделать несколько эскизов в любом графическом редакторе, чтобы обсудить их с клиентами. Наброски наших идей помогают нам найти правильное направление, и многие творческие идеи могут проявиться во время наброска. Пошаговый процесс веб-дизайна обязательно включает этот шаг.
Шаг 4. Навигация и верстка главной страницы
Домашнюю страницу нужно делать с умом, так как это первое, что увидят ваши клиенты.Поэтому мы уделяем пристальное внимание этой проблеме в процессе рабочего процесса веб-дизайна, поскольку домашняя страница сообщает вашим пользователям, о чем этот веб-сайт и что он им предлагает. Поэтому мы должны правильно создать макет домашней страницы и сделать процесс навигации простым и интуитивно понятным.
Что касается макета домашней страницы, необходимо распространять информацию, которая будет располагаться выше и ниже сгиба.
Над сгибом — вся информация в этой части видна пользователям в первую очередь.Как правило, сюда мы добавляем самую важную информацию для пользователя, поэтому пользователям не нужно искать ее на сайте. Все интересные предложения и бонусы также должны быть размещены здесь.
Внизу сгиба — здесь должна содержаться более подробная информация о вашем бренде или продукте, который вы предлагаете. Например, список услуг, которые вы предоставляете пользователям, и подробное описание каждой услуги. Чтобы увидеть эту информацию, пользователям необходимо прокрутить страницу вниз.
В большинстве случаев, мы помещаем логотип над сгибом , чтобы все увидели его первыми, когда они зайдут на ваш веб-сайт.
Что касается навигации , большинство веб-сайтов включают строку меню в верхней части страницы, которая позволяет пользователям легко перемещаться по веб-сайту. Обычно строка меню содержит основные ссылки на О компании, Услуги, Часто задаваемые вопросы, Контакты, Отзывы и так далее.
Навигация на сайте Cleveroad
Когда мы создаем дизайн веб-сайта и строим навигацию, мы учитываем видимость каждого элемента, создаем короткие заголовки, поскольку длинные заголовки обычно раздражают пользователей.Кроме того, все ссылки должны иметь определенный заголовок. Пользователи не хотят тратить свое время на то, чтобы разбираться в том, что вы хотели сказать. Итак, панель навигации обычно находится в верхней части веб-сайта, и мы всегда соблюдаем этот принцип.
Шаг 5. Дизайн дополнительных элементов сайта
В дополнение к обычному дизайну веб-сайта мы часто добавляем различные мелкие элементы, которые обогащают веб-сайт и делают его полноценным.
Анимации. Чтобы сделать веб-сайт более ярким, при создании веб-дизайна можно добавлять различные анимированные объекты, это хорошо влияет на пользовательский опыт и повышает доверие и лояльность к веб-сайту со стороны ваших потенциальных клиентов.
Погрузчики. Когда пользователь щелкает ссылку на любую страницу на веб-сайте и ждет, пока страница загрузится, на экране может появиться значок загрузчика. Такие вывески вы можете видеть в мобильных приложениях, которыми пользуетесь, а также украшают сайт, делая его более интересным и ярким.
Баннеры. Если мы создаем веб-сайт для торговой площадки или какого-либо веб-сайта электронной коммерции, то такие веб-сайты должны содержать баннеры. Обычно баннеры представляют собой прямоугольные изображения, содержащие промо-видео или изображение с релевантной рекламой.
Подсказки. Windows с полезными подсказками, которые всплывают при навигации по веб-сайтам — это очень удобно, особенно когда вы впервые заходите на сайт и хотите найти что-то конкретное. Подсказки содержат полезную информацию о веб-сайте.
Шаг 6. Цветовая схема и типографика
Имейте в виду, что почти 90% веб-пользователей подтвердят, что правильно выбранные цвета для веб-сайта будут иметь прямое влияние на их решение купить ваш продукт.
Вот почему цветовую схему нужно составлять с умом в процессе разработки веб-сайта. Обычно мы продумываем, какой цвет должен содержать фон сайта, цвет кнопок и других элементов, их согласованность. Также мы помним, что определенный цвет может повлиять на решение пользователя. Например, веб-сайт не должен быть насыщен черными или красными цветами — они раздражают и злят людей.
Пример цвета и оформления на сайте
Подбирать цвет необходимо для каждого товара отдельно, так как общая цветовая гамма напрямую зависит от тематики сайта.
Категории: Дизайн
Навигация по записям
Назад
Вперед
Оставить комментарий
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

© 2019 Штирлиц Сеть печатных салонов в Перми
Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.
Карта сайта

Как сделать дизайн сайта: Как сделать дизайн сайта / Skillbox Media

Дизайн сайтов. Как самостоятельно сделать шаблон дизайна сайта?

Теги:

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

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

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

Шаг 1

Шаг 2

Шаг 3

Шаг 4

Шаг 5

Шаг 6

Шаг 7

Шаг 8

Шаг 9

Шаг 10

Шаг 11

Шаг 12

Шаг 13

Step 14

Шаг 15

Шаг 16

Шаг 17

Шаг 18

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

Нужен ли вообще уникальный дизайн?

Способы придания шаблону уникальности

Выводы

Как сделать дизайн сайта в фотошопе с нуля – Блог opengs.ru

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

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

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

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

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

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

Дизайн сайта в фигме за 15 минут: делаем макет с иллюстрациями

Когда вам следует (или не следует) нанимать веб-дизайнера

Нужно ли мне нанимать веб-дизайнера?

Сравнение пользователей: конструктор и конструктор сайтов

0 нанять профессионального дизайнера?

Test Prep Insight (построено с помощью веб-дизайнера)

Urban Bikes Direct (создано с помощью конструктора веб-сайтов)

Есть еще вопросы о профессиональном дизайне веб-сайтов?

Чем именно занимается веб-дизайнер?

Что не может сделать веб-дизайнер?

Существуют ли разные типы веб-дизайнеров?

Сколько времени это займет?

Как правильно нанять веб-дизайнера

Когда у вас есть деньги

Совет пользователя: Минди Грин, MG Beauty

Когда у вас есть стратегия бренда

Совет пользователя: Афома Умеси, Среднего уровня чтения, созданный с помощью WordPress

Как мне нанять веб-дизайнера и работать с ним?

Совет эксперта: Ана Абрантес, дизайнер пользовательского интерфейса

Выбор дизайнера

Совет эксперта: Маттео Миле, UI-дизайнер

Составление бюджета для дизайнера

Стоимость найма дизайнера: пример из практики

Работа с дизайнером: основные советы

Джейк Ирвинг, Willamette Life Insurance:

Ethan Taub, Creditry:

Не слишком беспокойтесь о местонахождении

Где я могу найти лучшего веб-дизайнера?

А как насчет локального поиска?

Каковы альтернативы найму веб-дизайнера?

Как работают конструкторы сайтов?

Пользовательский обзор конструктора веб-сайтов: Дэйв Нильссон, ConvertedClick

Как выбрать конструктор веб-сайтов?

Хотите сэкономить еще больше времени?

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

Найм веб-дизайнера: последние мысли

Вам следует нанять веб-дизайнера, если…

Вам следует использовать конструктор веб-сайтов, если…

Как создать веб-сайт [2021]

Что такое веб-дизайн?

Что означает «взгляд»

Цвета

Шрифты

Графика / Изображение / Видео

Письменные материалы