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


Верстка сайта из PSD макета

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

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

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

Подготовительный этап

Итак, создайте где угодно (хоть на Рабочем столе, хоть в отдельной папке) файл index.html. В этот же каталог добавьте директорию images. Она будет содержать все картинки, используемые в шаблоне и на странице. Так как графические элементы мы вырезали заблаговременно, сразу скопируем их в папку images и дадим такие названия:

В папке со страницей index.html создайте файл styles.css — в нём будут размещены таблицы стилей шаблона.

Блокнот для редактирования кода использовать не рекомендуется. Гораздо лучше для этой цели подходит редактор Notepad++. Это подсвечивающая синтаксис разных языков (HTML и CSS — в том числе) программа, заниматься разработкой в которой гораздо удобней, чем в простых редакторах текстовых документов.

Делим документ на блоки

Откройте документ index.html и впишите в него следующий код:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шаблон сайта</title> <meta name="keywords" content=""> <meta name="description" content=""> <link href="styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> </body> </html>

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

Блоков у нас 7, перечислим их по идентификатору (значению атрибута id):

1. content — блок, внутри которого будут храниться остальные блоки.

2. header — блок шапки, внутри которого будут:

2.1. menu — верхняя навигация.

2.2. logo — картинка с текстом.

3. right — основная часть страницы.

4. left — панель слева.

5. footer — низ сайта.

Так и запишем (в контейнер <body> вставьте следующий код):

<div> <!-- Шапка --> <div> <div> </div> <div> </div> </div> <!-- Конец шапки --> <!-- Основной блок --> <div> </div> <!-- Конец основного блока --> <!-- Левая панель --> <div> <div> <!-- Конец левой панели --> <!-- Ноги сайта --> <div> </div> <!-- Конец --> </div>

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

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

* { margin: 0px; padding: 0px; }

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

a:link { color: #D72020; } a:hover { text-decoration: none; color: #FF0000; } a:visited { color: #D72020; }

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

body { background: #FFD723 url(images/back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #333333; }

Определение блока content:

#content { margin: 0 auto; background: #ffffff; width: 786px; text-align: left; }

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background класса body.

Оформляем горизонтальное меню

Начало есть, и теперь можно приступать к вёрстке уже непосредственно основных блоков.

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

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

#header { background: #ffffff; height: 306px; text-align: left; }

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

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

#menu { border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url(images/header_top.gif) repeat-x; }

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

Теперь можно добавить и само меню в файл index.html:

<table> <tr> <td><a href="#" title="">Главная</a></td> <td><a href="#" title="">Галерея</a></td> <td><a href="#" title="">Договор</a></td> <td><a href="#" title="">Прайс</a></td> <td><a href="#" title="">Образцы</a></td> <td><a href="#" title="">Контакты</a></td> </tr> </table>

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

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

#menu a { float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding-top: 35px; } #menu a:hover { color: #D72020; text-decoration: underline; }

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover).

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

#logo { background: #ffffff url(images/big_pic.jpg) no-repeat; width: 738px; height: 146px; text-align: left; padding-top: 80px; padding-left: 40px; border-left: 4px solid #ffffff; }

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo файла index.html, чтобы получилось:

 <div> <h2><a href="#">Имя сайта</a></h2> <h3><a href="№">Слоган сайта</a></h3> </div>

Текст появился, но его тоже нужно оформлять.

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

#logo a { text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 36px; color: #FFFFFF; } #logo h3 a { font-size: 24px; }

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

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right { float: right; width: 500px; padding-right: 10px; } #right h5 { margin: 0; padding: 0px; font-size: 12px; color: #D72020; } #right a { color: #D72020; text-decoration: none; } #right p { margin: 0; padding: 0; padding-bottom: 10px; } #right h3 { margin: 0; padding: 0; padding-top: 10px; color: #D72020; }

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

Заполним контейнер right. Изображения поместим в простую таблицу.

<h3>Галерея</h3><br /> <h3>Кухни</h3><br /> <table cellspacing = 40> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> </table>

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

Создание левой панели

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

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

В файл CSS впишите следующий код.

#left { padding: 10px; width: 237px; padding-right: 1em; } #left h4 { width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding-top: 15px; text-transform: uppercase; color: #ffffff; background: url(images/title.gif) no-repeat } #left ul { margin: 0; padding: 10px; list-style: none; width: 100px; font-size: 18px; } #left li ul { position: absolute; left: 90px; top: 0; display: none; } #left ul li { position: relative; margin-bottom:20px; } #left ul li a { display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; } #left li:hover ul { display: block; } #left li li { margin-bottom:0px; width: 150px; } #left p { padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid #D72020; }

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

В контейнер left HTML-документа добавим сначала информационный блок без меню.

<h4>Информация</h4> <p>Мы предлагаем Вам праздничные скидки. <a href="http://test1.ru/news.php">Далее...</a></p><br /> <h4>Меню</h4>

Белый фон распространился ещё ниже по странице.

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

<ul> <li><a href="#">Галерея</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Договор</a></li> <li><a href="#">Прайс</a> <ul> <li><a href="#">Кухни</a></li> <li><a href="#">Кровати</a></li> <li><a href="#">Стенки</a></li> <li><a href="#">Прихожие</a></li> <li><a href="#">Шкафы-купе</a></li> <li><a href="#">Компьютерные столы</a></li> </ul> </li> <li><a href="#">Образцы</a> <ul> <li><a href="#">Стекло</a></li> <li><a href="#">ДСП</a></li> <li><a href="#">Фурнитура</a></li> <li><a href="#">И т.д.</a></li> </ul> </li> <li><a href="#">Контакты</a> <li><a href="#">Важно</a> </li> </ul>

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

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

Делаем ноги

Завершающая часть шаблона — футер. Простое оформление, из элементов только абзацы и ссылки.

#footer { height: 44px; clear: both; padding-top: 20px; background: url(images/footer.gif) repeat-x; border-top: 5px solid #A6640E; } #footer p { margin: 0; font-size: 10px; text-align: center; color: #ffffff; } #footer a { color: #ffffff; }

Обычно в футере размещается вспомогательная информация, добавим её в HTML-код (контейнер footer).

<p>Copyright © 2016. <a href="http://test1.ru/" title="Адрес сайта">Адрес сайта</a> | <a href="#">Слоган сайта</a></p> <p>+7-(777)-777-77-77 | <a href="#">Москва</a></p> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вот пример кофейни из найденной мной темы.

The7

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

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

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

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

Кофе с червоточиной

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

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

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

Caffe Streets

Страницы:
Одностраничный веб-сайт, разделы: Главная, Кафе (О нас), Меню, Обжарка, Машина времени (соки), Контактная форма

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

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

Билд кофе

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

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

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

Кофе Савада

Страницы:
Домашняя страница, О компании, Еда и напитки

.

Получите идеальный макет веб-сайта за 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. Прототип, прототип, прототип

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

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

Следующая страница: Дизайн и упаковка

.

15 уникальных макетов сайта | Блог Webflow

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

1. Heco Partners

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

Нам просто не хватает этого сайта! Когда вы заходите на сайт Heco Partners, дизайнерского агентства из Чикаго, вы сталкиваетесь со словами: «Мы превращаем информацию в жизненный опыт, который волнует людей», парящие над волнистой волной.

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

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

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

О, и мы упоминали, что он полностью построен на Webflow?

2. Балбесы

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

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

Джозеф Берри решил взять один из своих любимых фильмов, классику 1980-х «Балбесы», и превратить его в веб-сайт в рекламном стиле. Обладатель награды "Почетное упоминание" и "Сайт дня" от Awwwards, The Goonies - отличный пример скроллтеллинга, в котором используются возможности современного веб-дизайна и повествования.

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

3. Портфель Нелу Чеботарь

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

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

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

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

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

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

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

4. Сноуборды Never Summer

Макет
: полноэкранное фоновое видео обеспечивает переход на более традиционные страницы электронной коммерции

Never Summer концентрируется на своих продуктах, не теряя при этом чувства удовольствия.

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

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

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

5. Soul Jazz Records

Макет: Сетевое воспроизведение обычного магазина пластинок.
‍‍Sound of the Universe дает вам реальный опыт посещения музыкального магазина в цифровом формате.

Sounds of the Universe - это цифровое ответвление эклектичного звукозаписывающего лейбла Soul Jazz. От переиздания малоизвестного фанка, джаза и панка до выпуска новых релизов - они следят за тем, чтобы музыка, которая может не привлекать большого внимания, была услышана.

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

Я сам фанат музыки, поэтому много времени просматривал альбомы в музыкальных магазинах. Что мне нравится в этом макете веб-сайта электронной коммерции, так это то, что он передает ощущение пребывания в музыкальном магазине. Вы можете пролистывать различные выпуски в галерее.Если какое-либо произведение привлекает ваше внимание, вы можете нажать на обложку, чтобы рассмотреть его поближе. Это все равно, что перелистывать стопку воска, хватать то, что сразу же хватает, и вынимать для дальнейшего осмотра. Переводя физический процесс просмотра записей в цифровой формат, Sounds of the Universe выделяется среди других музыкальных магазинов, которым не хватает такой знакомой интерактивности.

‍Sounds of the Universe позволяет перелистывать музыку из музыкального магазина на экран компьютера простым наведением курсора.

6. Музей современного искусства Сан-Франциско

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

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

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

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

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

7. R2D3

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

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

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

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

R2D3 использует привлекательную анимацию, чтобы показать нам, как работает машинное обучение.

8. Peerspace

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

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

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

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

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

9. Презентация

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

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

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

10. Интенсив

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

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

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

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

11. Bike Time Bali Road Bike Camp

Макет
: Герой с полным кровотечением переходит в довольно жесткую сетку, которая кажется сломанной .
‍‍В основе дизайна Bike Time лежат великолепные изображения и тщательное использование самых разных размеров шрифтов.

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

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

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

12. Superimpose Studio

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

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

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

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

13. Портфолио Лорен Виквар

Макет: переходы героев без полей при прокрутке в «карточки проекта с разделенным экраном».”

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

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

14. Коллектив Поулоса

Макет
: макет в стиле каменной кладки с отдельными картами, которые исчезают при прокрутке

Poulos Collective - консультант по дизайну, специализирующийся на дизайне и стратегии UX. Его сайт обеспечивает чистый, простой и, что самое главное, функциональный интерфейс. Мое внимание привлекла простота веб-сайта, созданного Стефаном Поулосом.Цветовая палитра приятная, текст легко читается, а легкий внешний вид обеспечивает чрезвычайно высокую скорость загрузки, обеспечивая отличное взаимодействие с пользователем.

Веб-сайт кажется… гладким.

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

15. Дэн Перрера

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

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

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

Найдите вдохновение и продвиньте свой собственный дизайн дальше

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

.

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


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


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


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

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

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

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

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

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

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

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

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

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


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

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

Пример




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



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

Мой веб-сайт


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


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

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