Как сверстать сайт по макету: как сверстать сайт по макету

Верстка макета — Принципы — Контур.Гайды

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

• Системно мыслить. Лучше продумывать детали реализации и краевые случаи ещё на этапе дизайна.

• Ускорять разработку. Разработчик видит закономерности и иерархию сущностей. Это уменьшает количество ошибок на этапе разработки и количество правок при тестировании.

• Сокращать текстовые описания. Самодокументируемый* макет требует меньше пояснений и комментариев на полях.

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

• Дорабатывать дизайн в будущем

  . Легче поддерживать и дорабатывать макет, особенно когда проектировщиков в команде несколько.

• Снижать нагрузку на компьютер. «Лёгкие» макеты быстрее загружаются, в них быстрее сохраняются изменения.

Блочная модель

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

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

По умолчанию у элементов нет отступов внутри и снаружи, но их можно настроить. Для этого есть специальные css-атрибуты:

• Padding — это отступ от контента до края блока.
• Border — обводка.
• Margin — отступы до соседних элементов.

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

Figma позволяет верстать очень близко к html-коду. Используйте это, включайте автолейауты и констрейнсы, чтобы помочь разработчику быстрее понять задумку дизайнера и точнее воспроизвести вёрстку макета средствами html и css.

Названия слоев и фреймов

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

Например, здесь названия слоев однозначного говорят о том, что перед нами список пунктов с буллитами:

А здесь, что перед нами не просто картинка, а аватарка:

Размеры элементов

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

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

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

Группировка элементов

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

Группируя с помощью фреймов и автолейаутов, можно показать, какая область ховера у элемента, и объяснить логику отступов между элементами:

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

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

Компоненты

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

Организация конкретного компонента

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

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

Организация множества компонентов

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

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

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

Инстанс (instance) — так разработчики называют экземпляр объекта, который наследует характеристики родительского объекта

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

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

Стили

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

Как шутят фронтендеры — в макете неопытного дизайнера по пятьдесят оттенков серого

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

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

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

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

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

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

Как рисовать без лишних элементов

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

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

Как описывать разные состояния интерфейса

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

Don’t repeat yourself (DRY) — это принцип разработки, направленный на повторное использование кода. Но его также можно использовать и при вёрстке макетов. Следование правилу «не повторяйся» повышает читаемость и консистентность макетов.

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

Неправильно

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

Правильно

Именуйте корневые фреймы. Их названия видны даже при зумировании. С осмысленными названиями проще найти нужный фрагмент макета.

Если хотите собрать кликабельный прототип, но он портит читабельность макета — собирайте его на отдельной странице.

Как вовремя остановиться

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

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

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

Как сверстать шаблон сайта из PSD в HTML и CSS

Совсем недавно я на блоге рассказывал как в Photoshop  сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.

Так же по теме

• Как сделать макет или дизайн сайта в Photoshop
• Как простой HTML шаблон сверстать под WordPress

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

Подготовка

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

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

Всё. В принципе мы первый шаг уже сделали. 🙂 Переходим к добавлению кода HTML.

Добавляем разметку HTML

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1. 4.2/jquery.min.js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header>
<div>

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section>
<div>
<div>
<div>

</div><!-- Конец коллефт -->

<aside>

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

• id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
• id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
• id=»colLeft» — левая сторона сайта (Посты)
• id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<!-- Начало футер -->

<footer>
<div>

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Вёрстка HTML и CSS

Для начала нужно выбрать HTML редактор. Я всегда использую редактор в обычном браузере Опера версии 12.16. Очень расстроился, что в новой Опере 16 его нет 🙁 Он очень простой, и сразу же можно посмотреть изменения, безумно удобно.

После того как Вы вставили код в наш текстовый документ index, его нужно сохранить.

Нажимаем на «Файл» и «сохранить как», далее выбираем кодировку «UTF — 8» и сохраняем.

Когда файл сохранился, переименуйте его разрешение с .txt в .html. Теперь открываем наш файл с помощью браузера опера. У нас появится простое белое поле, на нём нажимаем правой кнопкой мыши, выбираем «Исходный код» и мы попадём в редактор. Чтобы посмотреть изменения после редактирования кода, нужно нажать на «Применить изменения».

CSS

Стили рекомендую писать тут же. Потом их просто можно перенести в отдельный файл и прикрепить к код html. Перед тегом </head> ставим теги <style> … </style>, а между ними, соответственно будет располагаться код CSS.

Добавляем вот этот код CSS

* {
 margin: 0;
 padding: 0;
}

body {
 width: 100%;
 height: 100%;
 color:#333;
 background: #fff;
 font-family: "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size:0.
  94em;
 line-height:135%;

}

aside, nav, footer, header, section { display: block; }

ul {
 list-style:none;
}

a {
 text-decoration:none;
}

a:hover {
 text-decoration: none;
}

Тут мы задали несколько стилей для тега body. Ширину и высоту в 100%. Цвет для текста #333. Шрифты, и его размер, а так же расстояние между строчек.

Для списков мы отключили точки, а для ссылок отменили подчеркивание.

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

Главные блоки (верх, середина и низ)

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

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '. ';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content  будет выравнивать сверху левую и правую сторону сайта.

#colLeft  отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Открываем наш PSD макет. В слоях ищем группу «Хидер», затем группу «Меню верхнее» далее «Линии». И выбираем любой слой с линией, нажимаем на нём правую кнопку мыши, и выбираем «Преобразовать в смарт-объект». Потом слой поменяет иконку, нужно кликнуть два раза левой кнопкой именно по иконке стиля, не по названию, именно по иконке. Затем Вас перекинет на новый слой уже с вырезанной линией.

Переходим во вкладку «Файл»  и «Сохранить для web» Желательно выбираем формат PNG-24, нажимаем «сохранить», и сохраняем нашу линию под именем line в папку images.

А вот теперь мы можем смело добавить стили для нашего меню, вот они:

/* Верхнее правое меню */

.topMenuRight {
 height:57px;
 position:absolute;
 left:0px;
 top:0px;
 border: 0px solid #1FA2E1;
 }

.topMenuRight ul li {
 background: url(images/line.png) 0px 0px no-repeat;
 float:left;
 height: 57px;
 }

.topMenuRight ul {
 padding-left:0px;
 }

. topMenuRight ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:16px 20px 21px 20px;
 }

.topMenuRight ul li a:hover{
 background: #fff;
 color:#555;
 }

Вот, что должно получиться:

Иконки социальных закладок

Данные иконки вырезаются так же как и линия для меню. Открываем группу «Хидер» далее «Соц закладки». У нас там будет три иконки.

Слой иконки от rss преобразовываем в смарт объект и сохраняем под именем rss-variation. Тоже самое делаем и для остальных двух иконок, только иконку от mail называем «email-variation», от Твиттера «twitter-variation» не забываем всё сохранить в папку images.

Теперь под HTML кодом меню добавляем вот этот код:

<div>

<a href="#" title="Следить в Twitter!" target="_blank"></a>
<a href="#" title="Подписаться на rss" target="_blank"></a>
<a href="#" title="Подписаться по e-mail" target="_blank"></a>

</div>

А в стили CSS нужно добавить вот это:

. share-new {
 z-index: 1;
 position:absolute;
 right:0px;
 top:14px;
 }
 .share-new a { display:inline-block; width: 19px; height: 19px; margin: 2px 0px 2px 0; }

 .share-new .icon-twitter {
 background: url(images/twitter-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 3px;

}

.share-new .icon-rss {
 background: url(images/rss-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

.share-new .icon-mail {
 background: url(images/email-variation.png) 0 center no-repeat;
 padding:4px 0px 0px 5px;
 font-size:17px;
 margin-right: 0px;

}

Вот результат:

Логотип

В PSD макете ищем группу «Лого». Слой с логотипом преобразовываем в смарт объект, нажимаем по иконке лого два раза, и сохраняем его с именем logo. После код социальных закладок вставляем HTML код:

<div>
<a href="#"><img src="images/logo. png" alt="Блог" /></a>
</div>

А вот и стили:

/*----------------------------
 Логотип
------------------------------*/

.logo {
 position:absolute;
 left:0px;
 top:90px;
 }

Главное, выпадающее меню

Под кодом логотипа добавляем код главного меню:

<!-- Начало #bottomMenu -->
 <nav>
<ul>

 <li><a href="#">Категория</a>
 <ul>
 <li><a href="#">Подменю #1</a></li>
 <li><a href="#">Подменю #2</a></li>
 <li><a href="#">Подменю #3</a></li>
 <li><a href="#">Подменю #4</a></li>
 </ul>
<li><a href="#">Категория 1</a></li>
<li><a href="#">Категория 2</a></li>
<li><a href="#">Категория 3</a></li>
<li><a href="#">Категория 4</a></li>

 </ul>
 </nav><!-- конец #bottomMenu -->

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

Для этого в Photoshop приближаем с помощью лупы фон меню (Тёмный):

Выбираем инструмент «Рамка»

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

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

Ну а сейчас можно смело добавлять CSS:

.bottomMenu {
 width:1200px;
 height: 70px;
 position:absolute;
 left:0px;
 bottom:0px;
 background: url(images/bgmenu.png) 0px 0px repeat-x;
 }

#dropdown_nav {
 font-weight:bold;
 display:inline-block;
 list-style:none;
 border-bottom:0px solid #777;
 margin-top:18px;
 }

#dropdown_nav li {
 float:left;
 position:relative;
 display:inline-block;

 }

#dropdown_nav li a {

 font-weight:100;
 font-size:18px;
 color:#fff;
 padding:15px 22px 20px 22px;
 background: url(images/linemenu. png) right no-repeat;
 -moz-transition: background-color 0.3s 0.01s ease;
 -o-transition: background-color 0.3s 0.01s ease;
 -webkit-transition: background-color 0.3s 0.01s ease;
 }
 #dropdown_nav li a:hover {
 background: #000;
 text-decoration:none;
 color:#0dbfe5;
 }

 #dropdown_nav li a.first {
 -moz-border-radius:5px 0px 0px 5px;
 -webkit-border-radius:5px 0px 0px 5px;
 }

/* Выпадающее меню */
 #dropdown_nav .sub_nav {
 z-index: 4;
 width:180px;
 padding:0px;
 position:absolute;
 top:42px;
 left:0px;
 border:0px solid #ddd;
 border-top:none;
 background: #000;
 }

#dropdown_nav .sub_nav li {

 width:180px;
 padding:0px;
 }

#dropdown_nav .sub_nav li a {
 background: none;
 font-weight: normal;
 font-size:15px;
 display:block;
 border-bottom:0px solid #e5e0b3;
 padding-left:10px;
 color:#fff;

 }
 #dropdown_nav . sub_nav li a:hover {
 background:#222;
 color:#0dbfe5;
 }

Результат:

Блок «Последние записи»

Сразу после тега </header> нужно добавить HTML код, который будет отображать серый блок:

<div>

<h3>Последние записи</h3>

</div>

Левый блок с последними записями

Теперь будем добавлять блоки с последними записями. После тега <div id=»colLeft»> пишем следующий код:

<!-- Начало .postBox -->
<article>

<div><a href="#"><img src="images/tumb.png"/></a></div>

<h3><a href="#">Скачать бесплатно 15 HTML5 и CSS3 шаблонов</a></h3>

<div>
Александр // <a href="#">Метки: метка, метка 2</a> // Апр.10.2012. // Комментариев: <a href="#">238</a>
</div>

<div>

<p>Приветствую Вас, уважаемые читатели блога.  Сегодня спешу представить Вам очередную бесплатную подборку шаблонов на CSS3 и HTML5, а также здесь есть несколько шаблонов с большими и встроенными JQuery слайдерами изображений. В общем, я надеюсь, что Вы здесь найдёте то что Вам нужно. Наслаждайтесь.</p>
</div>

<div><a href="#">Далее</a></div>

</article>
<!-- Конец .postBox -->

<div></div>

Заметьте, что в данном случае картинка (миниатюра) имеет размер 800 на 300 пикселей. Желательно подготовить такую картинку сразу.

Самая последняя строчка в коде <div class=»raz»></div> отвечает за разделитель между постами.

И конечно же не забываем про CSS для постов:

.raz {
 margin:0 auto;
 border:0px solid #333;
 background: #fff;
 width:116px;
 height:29px;
 margin-bottom:50px;
 background: url(images/raz.png) 0px 0px no-repeat;
 }

.postBox {
 border:0px solid #333;
 background: #fff;
 width:700px;
 margin-top:0px;
 margin-left:0px;
 margin-bottom:50px;
 }

. postBox h3 a {
 font-family: "Segoe UI Semilight", "Segoe UI", Tahoma, Helvetica, Sans-Serif;
 color:#000;
 font-style:normal;
 font-weight:100;
 font-size:33px;
 line-height:35px;
 -moz-transition: all 0.3s 0.01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.postBox h3 a:hover {
 color:#0dbfe5;
 }

.postBox .textPreview {
 border:0px solid #333;
 width:800px;
 margin-bottom:30px;
}

.postBox .textPreview p{
 margin-top:0;
 }

.postBox .postThumb{
 margin:0px 0px 15px 0;
 }

.postBox .postMeta {
 padding-bottom:15px;
 clear:left;
 overflow:hidden;
}

.more-link a {
 border-radius: 3px;
 background: #0dbfe5;
 margin-top:30px;
 font-weight:600;
 color:#fff;
 font-size:17px;
 padding:6px 25px 9px 25px;
 -moz-transition: all 0.3s 0. 01s ease;
 -o-transition: all 0.3s 0.01s ease;
 -webkit-transition: all 0.3s 0.01s ease;
 }

.more-link a:hover {
 background:#000;
 color:#0dbfe5;
 }

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

Правая часть (Сайдбар)

Добавляем поиск. После тега <aside id=»colRight»> вставляем следующее:

<form method="get" action="/search" target="_blank">
<input name="q" value="" placeholder="Поиск...">
<input type=submit value="">
</form>

И стили для поиска:

#form-query {
 position:relative;
 background:#eeeeee;
 border:0px solid #e4e4e4;
 width:335px;
 height:31px;
 padding:8px 10px 7px;
 font-weight:100;
 font-size:18px;
 color:#000;
 margin-bottom: 30px;
}

#form-querysub {
 position:absolute;
 right:15px;
 top:15px;
 width:17px;
 height:17px;
 background:url(images/search. png) 0px 0px no-repeat;
 border:0px dashed #333;
 }

#form-querysub:hover {
 cursor: pointer;
}

Виджет

После кода поиска вставляем:

<div>

<h3>Виджет 2</h3>
<ul>

<li><a href="#" title="Плавная анимация объектов только с помощью CSS (5 примеров)">Плавная анимация объектов только с помощью CSS (5 примеров)</a></li>

 <li><a href="#" title="Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб &#8211; проектов</a></li>

 <li><a href="#" title="Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery">Бесплатные всплывающие и модальные окна с использованием CSS3 и JQuery</a></li>
 <li><a href="#" title="500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов">500+ бесплатных Photoshop фигур (Shapes) для Ваших новых проектов</a></li>
 <li><a href="#" title="Бесплатные PSD и CSS3 меню для Вашего веб проекта">Бесплатные PSD и CSS3 меню для Вашего веб проекта</a></li>
 <li><a href="#" title="Примеры идеального сочетания цветов в веб &#8211; дизайне">Примеры идеального сочетания цветов в веб &#8211; дизайне</a></li>
 <li><a href="#" title="Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS">Классная стрелка плавной авто прокрутки вверх страницы с JQuery и CSS</a></li>
 <li><a href="#" title="Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей">Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей</a></li>
 <li><a href="#" title="Примеры игр которые сделанные с помощью html5 canvas">Примеры игр которые сделанные с помощью html5 canvas</a></li>
 <li><a href="#" title="Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов">Бесплатные CSS и xHTML шаблоны с тёмным дизайном для Ваших проектов</a></li>
 </ul>

</div>

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

CSS код виджетов:

.rightBox {
 margin-top:0px;
 margin-left:0px;
 width:330px;
 margin-bottom:30px;
 }

.rightBox h3 {
 width:335px;
 background:#f7f7f7 url(images/h3img.png) 320px 14px no-repeat;
 font-size:18px;
 font-family: "Segoe UI Semibold", Tahoma, Helvetica, Sans-Serif;
 color:#333;
 display:block;
 padding:10px 0 15px 20px;
}

.rightBox ul li{
 width:350px;
 padding:10px 0px;
 border-bottom:1px solid #f6f6f6;
 font-size:14px;
 line-height: 16px;
 }

.rightBox a {
 color:#333;
 }

.rightBox a:hover {
 color: #0dbfe5;
 }

Футер

После тега <div id=»footerInner»> вставляем код для логотипа и нижнего меню:

<div>
<a href="#"><img src="images/logo. png" alt="Блог" /></a>
</div>

<nav>

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

CSS

#footer {
 margin-top:50px;
 height:100px;
 width:100%px;
 background: #0dbfe5;
 }

#footerInner {
 position:relative;
 border:0px solid #000;
 width:1200px;
 margin:0 auto;
 height:100px;
 }

#footerlogo {
 position:absolute;
 left:0px;
 top:25px;
 }

.footernav {
 position:absolute;
 right:0px;
 top:35px;
 }

.footernav ul li {
 float:left;
 }

.footernav ul li a{
 margin-top:0px;
 font-weight:100;
 border-right:0px solid #adadad;
 display:block;
 color:#fff;
 text-decoration:none;
 line-height:20px;
 font-size:18px;
 padding:0px 0px 0px 25px;
 }

. footernav ul li a:hover{
 color:#333;
 }

В конечном итоге получаем вот такой шаблон:

Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂

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

До скорых встреч.

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

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

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

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

Вот что это значит.

Все тонкости разработки макета веб-сайта, который работает

Шаг 1. Думайте просто

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

Урок состоит в том, чтобы сделать макет интуитивно понятным. Меню должно включать общие термины, например, «О нас» или «О нас», «Свяжитесь с нами» или «Свяжитесь с нами», а также «Блог», «Часто задаваемые вопросы» и «Услуги».

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

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

Шаг 2. Используйте пустое пространство

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

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

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

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

Шаг 3. Осознайте, что цвета имеют значение

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

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

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

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

Шаг 4: Правильное форматирование убедительной копии

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

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

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

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

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

Шаг 5: Четко определите результат

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

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

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

Шаг 6: Не бойтесь брать взаймы

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

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

Шаг 7. Активируйте ответ

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

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

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

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

Шаг 8. Расскажите о своих предложениях и улыбающихся лицах

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

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

Шаг 9: Стратегическое размещение эмблем доверия и элементов социального подтверждения

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

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

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

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

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

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

Шаг 10: Продолжайте тестирование!

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

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

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

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

Хорошие и простые примеры макетов веб-сайтов

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

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

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

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

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

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

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

Использовать реальных людей

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

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

Упростите свое меню

Если вы считаете, что ваше меню слишком сложное, сократите его.

Добавьте подменю для создания иерархии тем, например, поместите все свои продукты под заголовком «Продукты» или услуги под заголовком «Услуги». Только самые важные пункты меню должны быть видны, но даже глубокие страницы должны быть легко найдены.

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

Удалить дополнительные параметры

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

Удалить и увеличить изображения

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

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

Изменение цветовой схемы

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

Учитывать намерения посетителей

Люди, посещающие ваш веб-сайт, скорее всего, думают об одном действии.

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

Добавить эмблему доверия

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

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

Объясните, как связаться с вами

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

Увеличьте количество конверсий с помощью иерархии контента

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

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

Узнайте мнение ваших посетителей

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

Вот несколько способов сделать это.

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

Обратите внимание на высокоуровневые показатели сайта

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

Начните следить за навигацией пользователя

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

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

A/B-тестирование различных элементов макета

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

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

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

Заключение

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

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

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

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

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

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

Как создать макет и дизайн веб-сайта (без каких-либо дизайнерских навыков!)

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

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

Кроме того, если вы новичок в HTML, ознакомьтесь с этим руководством о том, как написать очень простой HTML-сайт с нуля! (с пошаговым видео)

Вот несколько вариантов:

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

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

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

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

Этот метод включает:

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

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

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

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

Вот основные этапы этого процесса:

• Определитесь с основами вашего веб-сайта
• Спланируйте макет своего веб-сайта
• Соберите дизайн
• Создание конечного продукта

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

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

1. Определите основы вашего веб-сайта

Прежде чем вы начнете выбирать цвета или шрифты, давайте ответим на несколько общих вопросов об этом веб-сайте:

1. Какой бизнес будет продвигать веб-сайт?

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

Для наших целей мы выберем вымышленную кофейню под названием Central Coffee. Потому что все любят кофе, верно?

2. Какие страницы будут на сайте?

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

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

2. Изучите существующие веб-сайты

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

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

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

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

Вот пример одной кофейни из темы, которую я нашел.

The7

Страниц:
Одностраничный сайт с разделами: Главная, О нас, Местоположение, Предложения, Меню, Новости, Пресса, Сообщения в блоге

Стиль:
Современный и чистый, с хорошими фотографиями

Навигация:
Простая навигация

А вот несколько веб-сайтов, которые я нашел по запросу «кофейня в Чикаго»:

The Wormhole Coffee

Страницы:
Домашняя страница, Блог, Местоположение/Контакты, Вакансии

Стиль:
Что-то вроде современного; фотографии магазина более ностальгические

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

Caffe Streets

Страницы:
Одностраничный сайт, разделы: Home, Caffe (О нас), Меню, Обжарка, Time Machine (соки), Контактная форма

Стиль:
Простой и современный (Squarespace)

Навигация:
Довольно простая навигация; Мне нравится липкая строка меню вверху, которая прокручивает вас до каждого раздела.

Build Coffee

Страницы:
Одностраничный веб-сайт, разделы: Домашняя страница, О нас, Часы работы, Расположение, Магазин, Питание, События, Контакты

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

Навигация:
Довольно легко навигация

Sawada Coffee

Страницы:
Дома в основном о фотографии, и текст кажется почти запоздалым

Навигация:
Немного сложно ориентироваться — почти не видел гамбургер-меню в правом углу.

3. Запишите заметки для вашего собственного веб-сайта

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

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

Для Central Coffee, я думаю, мы будем придерживаться простого одностраничного веб-сайта со следующими разделами:

• Заголовок
• Дом
• О
• Меню
• Местоположение/контакт
• Нижний колонтитул

4. Спланируйте макет вашего веб-сайта

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

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

Заголовок

Мне нравится верхняя панель навигации на демонстрационной странице Seven Coffee и на веб-сайте Caffe Streets.

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

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

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

Домашняя страница

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

Я думаю, здесь у меня будет фоновое изображение (например, Build Coffee) с текстом поверх него. Это будет одинаково как на десктопе, так и на мобильном телефоне.

О нас

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

Меню

Каждый из веб-сайтов обрабатывает меню по-разному:

• Seven Coffee имеет сетку пунктов меню с ценами,
• Caffe Streets просто список предметов,
• и Build и Sawada ссылаются на PDF-файлы меню.

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

Местоположение/контакт

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

Призыв к действию внизу ответит на вопрос «Что теперь?» Это поможет посетителям принять меры, в частности, узнать, как добраться до кафе и, надеюсь, посетить его!

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

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

5. Создайте свой полный каркас

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

Он довольно прост в использовании, и мне нравится вариант схематичного стиля, потому что это весело 🙂

(Щелкните миниатюры, чтобы просмотреть полные изображения в новой вкладке)

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

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

Цветовая схема

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

Если вам нужно цветовое вдохновение, в Canva есть образцы цветовых палитр, которые вы можете попробовать.

Для веб-сайта Central Coffee я буду использовать осеннюю коллекцию по этой ссылке Canva — это теплая цветовая палитра, основанная на коричневых тонах.

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

Шрифты

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

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

Изображения/фотографии

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

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

• Canva
• Вектор
• Снэппа

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

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

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

Вот как я обычно подхожу к созданию внешнего интерфейса веб-сайта:

1. Настройка файлов веб-сайта
2. Создайте и структурируйте папки и файлы.
3. Запустите средство запуска задач. (Для этого проекта я использую Gulp.)
4. Создайте отдельный файл HTML для каждого шаблона.

Затем выполните следующие шаги для каждого HTML-шаблона:

1. Создайте каркасную структуру с основными элементами HTML.
2. Создайте элементы страницы один за другим.
3. Для каждого элемента добавьте стили CSS, предварительно убедившись, что каждый раздел расположен правильно.
4. Проверяйте, как страница выглядит в браузере во время работы, продолжая вносить исправления.

Убедитесь, что ваш веб-сайт адаптивен

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

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

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

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

• Responsinator.com (бесплатно)
• Screenfly от Quirktools (бесплатно)
• Browserstack (платный) — Browserstack позволяет тестировать виртуальные машины на реальных устройствах.

Готовый продукт!

Вот скриншот готового веб-сайта Central Coffee:

Вы можете сами проверить настоящий сайт на моей странице Github.io.

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

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