Как вы начинаете вёрстку сайта? — Хабр Q&A
Верстаю не так давно, верстаю не так часто, но все же верстаю.Раз все начали с нуля, а именно с PSD макета, тоже начну с этого момента.
1. Оцениваю макет, составляю для себя базовую разметку, определяюсь какие главные блоки присутствую, и что должно происходить если их нет.
2. Оценив какие блоки необходимы, и прикинув структуру сайта иду csstemplater.com/ генерирую по своей структуре HTML/CSS шаблон, если это конечно не LP
3. Создаю директорию c названием сайта в openserver, в ней создаю директорию HTML , а внутри по шаблону
- psd- что бы не потерялись, мало ли когда нужно дорисовать что то.
- css
- js
- less
- fonts
- img — для компонентов шаблона
- image — для временного наполнения (слайдеры, изображения в статьях и т.п.)
- shop/личный кабинет — иногда делю макет на интерфейсы, и раскидываю по папочкам для дельнейшей навигации
4.
5. Создаю main_site.less — подключаю сюда все все нужные мне less файлы, template.less- прописываю сюда все структурные элементы (header, footer и т.д.), ui.less — обычно если проект не сложный сую сюда все оформление, иногда разделяю все на отдельные блоки, menu/portfolio/modal/btn/ и т.д.
6. Настраиваю компилятор Less в PHP шторме для текущего проекта, что бы компилировался только файл main_site.less в папку css
7. В основном использую getuikit.com, ну больше он мне по душе чем бутстрап, скачиваю и раскидываю файлы по папкам, правлю пути в index.html, попутно добавляю комментарии
8. Открываю и смотрю PSD шаблон сайта на наличии не стандартных шрифтов, если шрифты есть в www.google.com/fonts, то подключаю их, иначе www.fontsquirrel.com, и раскидываю файлики по папкам
9. Дальше используя Emmet создаю базовую разметку если это LP(header/footer/slider и т.д.), если нет, то начинаю с самого верха делать разметку элементов (logo/slogan/phone/login-widjets и т.д.) попутно добавляю less код в нужные из файлов.
10. Верстаю до конца все, что есть в макетах. Затем по необходимости создаю шаблон для CMS.
ЗЫ: Файлики что сделал не минимизирую, только по желанию заказчика, ибо все нормальные фремворки и CMS умеют объединять css и js файлы в 1, попутно минимизируя на лету. Заказчику отдаю все что сделал включая исходники.
Верстка — это примерно как собирать LEGO, и, зачастую, ничуть не сложнее…
Как «собрать» сайт, чтобы было красиво, функционально и по деньгам выгодно? Помогут ли в этом деле готовые решения вроде сервиса с шаблонами и различные движки? А я так хочу научиться верстать, но совершенно не знаю программирования и боюсь кода… Знакомые вопросы и сомнения, не так ли? Как много людей сторонятся верстки только потому, что не находят грамотных ответов. Сегодня мы решили еще раз помочь всем ищущим и интересующимся утвердиться в своем решении и начать верстать. Беседуем с нашим экспертом и преподавателем
Расскажите немного о себе: как вы пришли в верстку? Какие проекты ведете? Чем вообще занимаетесь на сегодняшний день?
Я с детства проявлял интерес к IT-сфере. Даже мечтал стать «хакером», на тот момент меня очень впечатлил фильм «Матрица». Чуть ли не с пеленок я был с компьютером на «ты», занимаясь всем понемногу, разве что до ассемблера не дошло…
Но чтобы заняться этим профессионально, мне до определенного момента не хватало стимула. Как сейчас помню, после очередного ухода с неинтересной, но доступной работы, я отдыхал в баре с другом, и тогда-то он меня и убедил начать профессионально заниматься веб-разработкой, попробовав конкретно с верстки. «Это легко, из дома выходить не нужно, работаешь, когда хочешь» — эти доводы меня убедили, и я научился, не без его помощи, основам верстки. Самым продуктивным способом обучения для меня стал реальный проект, за который заплатили пусть и небольшие, но все-таки деньги. С тех пор я работаю в этой сфере.
На сегодня я решил, что, пока есть возможность работать на себя, буду ей пользоваться. Вернулся к фрилансу, который приносит мне достаточно хлеба и отнимает немного времени, чтобы я мог заниматься тем, что действительно мне интересно — разработкой инди-игр. В этой сфере я только начинаю, дохода мне это не приносит никакого, но все же по-настоящему интересно.
Расскажите, что такое верстка web-страницы? Многие считают ее чуть ли не шаманством над монитором.
Верстка web-страницы — это воплощение фантазий дизайнера в HTML и CSS код. Это примерно как собирать LEGO и зачастую ничуть не сложнее. У вас есть рецепты по созданию «деталек», и нужно просто сложить их вместе, чтобы результат совпал с изображением на картинке. И это реально интересно, но только первое время…
Многие слышали звон «джаваскрипт», «джеквери», но плохо понимают, что это. Расскажите немного об этих инструментах web-разработки.
JavaScript — это полноценный язык программирования, созданный специально для Web. Все интерактивное на странице обычно работает с JavaScript. Если воспринимать веб-страничку как человека, то JavaScript — это его нервная система. Верстка — это сбор монстра Франкенштейна по кусочкам, а JavaScript — способ его оживить. А jQuery — это популярный инструмент, который сильно упрощает работу с JavaScript.
А нужно ли знать основы программирования, чтобы овладеть этим ремеслом? Есть мнение, что без основ программирования в верстке делать нечего. Впрочем, как и без навыков дизайна.
Чтобы начать верстать, нужно только желание, никаких других знаний не нужно. Основами программирования в любом случае придется овладеть, это не так сложно, ведь это только азы. Сейчас верстальщики занимаются не только HTML и CSS, на них же ложится еще и написание небольшого функционала с помощью jQuery. Навыки дизайна пригодились бы верстальщику, но это также необязательно.
Сегодня существует множество конструкторов сайтов, которые позволяют создать «профессиональный сайт за час». Не угроза ли это для верстальщиков сегодня? Многие всерьез считают, что дни верстки как отдельной услуги сочтены.
А в магазинах существует множество полуфабрикатов, но это ведь никак не отражается на востребованности недорогих кафе и престижных ресторанов? Да и многие любят готовить сами, дома.
Конструкторы сайтов позволяют создать шаблонный продукт на скорую руку. То же самое можно сказать и про неплохие движки. В этом нет ничего ужасного, но это не мой путь.
Меня часто спрашивают, почему я совсем не пользуюсь движками? Да, они актуальны и позволяют дешевле и быстрее получить результат. Но движков десятки, если не сотни, и, чтобы изучить их все, мне не хватит никакого времени. Поэтому, на мой взгляд, лучше развиваться в разработке без готовых движков и конструкторов, это снимает многие ограничения и дает простор для творчества.
Давайте все-таки отделим мух от котлет. Чем конкретно должен заниматься верстальщик и что не входит в «пакет» его компетенций?
Дали макет — сверстал, как сказали. Кроме того, придется работать и с JavaScript, иначе никак: есть задачи, которые решаются только с его помощью. Еще очень важно общение с заказчиком, если вы фрилансер. Нужно уметь продавать свои услуги, договариваться на более выгодные вам условия. А вот работа с PHP в обязанности уже не входит (разве что банально отправить почту с помощью заранее заготовленного скрипта в случае с Landing Page), перерисовка макетов тоже вопрос не к верстальщику.
Что нужно знать и уметь верстальщику, чтобы быть востребованным на рынке труда? Помимо портфолио, конечно же.
Как я уже сказал, нужно уметь общаться с людьми и продавать свои услуги. Нужно уметь учиться самостоятельно и развиваться дальше. Ведь верстка — это только начальный этап, и он вам обязательно наскучит. Портфолио — дело десятое.
Сможет ли слушатель по окончании курса сверстать себе или заказчику сайт? И что это будет за ресурс с точки зрения дизайна и функциональности?
Несомненно, все, кто успешно закончит курс будут способны сверстать сайт, мы ведь и на самом курсе пару реальных макетов верстаем. И будет это, на мой взгляд, Landing Page — длинная, обычно красиво оформленная портянка, которая, как минимум, принимает заявки. И это после всего лишь 40 часов курса.
Немного философский вопрос: каков карьерный путь верстальщика?
Верстальщик — это первая ступенька в карьере Web-разработчика. Когда человеку наскучит верстка, он будет развиваться дальше. И тут три варианта: дизайн, frontend-разработка, backend-разработка. А через несколько лет, возможно, вообще не придется работать с кодом.
В заключение, дайте, пожалуйста, пару советов тем, кто хочет стать настоящим верстальщиком.
Не стойте на месте, развивайтесь. Если вам нечем заняться, не плюйте в потолок, а изучите хотя бы тот же JavaScript. IT-сфера развивается очень быстро, и всегда будут находиться интересные вещи, которые стоит изучить.
От себя нам остается добавить, что онлайн-курс верстки сайтов с Николаем Маринкиным начинается и курс верстки сайтов офлайн скоро начнутся! Курс будет проходить в центре города. Торопитесь записаться и начать карьеру в этой по-настоящему увлекательной и всегда востребованной области!
До встречи в стенах Академии!
Что такое верстка сайта и её виды ᐉ Веб-студия Brainlab
Содержание :
Чтобы создать сайт, необходимо проделать колоссальную работу. Конечно если вы хотите хороший, функциональный ресурс. Один из важнейших процессов — верстка, в ходе которой макет страницы превращается в полноценный веб-документ. Как правило, с помощью графического редактора специалист создает макет лишь после чего производится верстка, где создается код страницы HTML и CSS. Именно благодаря этому, браузер и “узнает” сайт. Пользователь уже видит его с контентом, блоками, картинками и пр. В данной статье мы как раз и расскажем, что такое верстка и зачем она вашему сайту.
Что включает в себя верстка сайта
Мы уже писали, что задача верстки — написать код, трансформирующий макет в страничку, которую может считать браузер. Программиста, который занимается данным процессом называют back-end разработчиком. Он работает с HTML — единой системой стандартов отображения элементов веб-страницы.
Например:
- <h2> </h2>. Первый тег ставится перед началом заголовка, второй — закрывает его.
- <img> — тег для изображения.
- <p> </p>. Обозначает параграф.
- <body> </body> — тег открывает и закрывает содержимое страницы.
Мы не будем углубляться в теги верстки, но суть в том, что каждый из них описывает определенный элемент страницы. К слову если нужно выделить цвет слова или его жирность, то тоже используется специальный тег.
Также верстальщик:
- разрабатывает страницу сайта в соответствии с дизайн-макетом;
- собирает шрифты для корректного отображения;
- из дизайн-макета вырезает графику (картинки, значки и т.д.) и собирает в отдельную папку;
- подключает JS-библиотеку;
- верстает страницы в HTML и CSS.
Виды верстки сайтов
Существует несколько типов верстки. Рассмотрим подробнее каждый из видов.
Блочная верстка
Современный тип верстки, который позволяет создавать качественный и функциональный сайт. Суть метода в том, все элементы располагаются в блоках (контейнерах). Блоки не зависимы, но при это регулируются. Программист может задавать их размер, цвет и пр. Ресурс на блочной верстке лучше воспринимается браузерами, при этом сами блоки гарантируют адаптивный дизайн, то есть он читается с любого устройства (планшета, смартфона). Кроме того, поисковые системы лучше распознают блочную вёрстку, что положительно влияет на ранжирование сайта.
Блоки создаются при помощи тега <div>.
Табличная верстка
Один из первых типов верстки, где верстальщик использует тег <table> (задает параметр таблицы) и <tr> и <td> (новая строка и новый столбец соответственно). Внешне сайт на такой верстке смотрится красиво, его все элементы уравнены. Однако, ресурс будет долго подгружаться — это минус. Особенно если на нем есть много картинок, видео и пр.
Слоевой метод
Данный метод верстки подразумевает под собой простое накладывание слоев. В таком случае используется всего один тег — layer. Специалисты не особо берутся за такую верстку, так как она еще не доработана.
Семантическая вёрстка
Основная задача такой верстки — уменьшить количество тегов, при этом создать читабельный код. Благодаря этому страница будет быстрее грузиться и ранжироваться в поисковой системе. Используя такую верстку стоит помнить лишь про одно правило — использовать теги, которые будут более точно передавать тип контакта.
Можно разделить самые важные элементы сайта на такие группы:
- текстовые теги;
- медиа теги;
- теги структуры документа;
- корреляционные теги.
Валидная вёрстка
Под данным понятием подразумевается соответствие стандарту W3C, а также корректное отображение сайта на всех устройствах. Добиться валидности просто, достаточно соблюдать правила построения кода, а также его оптимизации и минимизации. Используя валидную верстку сайт может занимать более высокие позиции SERM.
Какой программой верстается сайт?
Специалисты по верстке в своей работе могут использовать несколько типов программ:
- Различные программы для работы с изображениями. Это может быть
Фотошоп, Gimp или Krita. Они необходимы для того, чтобы взять элементы из макета и работать с визуальным контентом.
- Различные редакторы кода. Чаще всего используют:Notepad++, Adobe DreamViewer, CSS3 Generator, UltraEdit, SublimeText, C и другие.
- Программы для тестирования. А именно: CrossBrowserTesting, Markup Validator, IETester, Validator.w3, Dr Watson, CSS Validator.
Какой должна быть верстка
Безусловно верстка — это не бездумный набор букв. Здесь есть свои правила и законы. Если вы будете писать сочинение из тегов, то ваш сайт будет работать, как минимум не корректно.
Критерии правильной верстки:
- Она должна быть кроссбраузерной. То есть сайт должен нормально отображаться в разных браузерах (Хром, Опера и т.д.)
- В коде не должно быть никаких ошибок. Все теги закрыты, код имеет четкую структуру.
- Самым лучшим вариантом считается блочная верстка. Но важно, чтобы она была адаптивная под все устройства.
- Содержимое НТМL и CSS должно быть прописано только строчными буквами.
- Все заголовки, абзацы, цитаты правильно структурированы, их стили нужно продумать заранее.
- Сохранен изначальный макет.
Если соблюдать эти правила, то сайт будет работать правильно и быстро. При необходимости другие специалисты смогут разобраться в вашем коде.
Какие сложности есть в верстке сайтов
Если посмотреть на код страницы, то можно подумать, что верстка по силам даже тем, кто никогда не сталкивался с написанием сайтов. Достаточно просто уметь пользоваться парочкой программ и знать основные теги. Но если бы это было так легко, все сайты были бы идеальны, да и каждый бы третий человек был верстальщиком.
Можно выделить несколько проблем с которым сталкивается back-end разработчик:
- Не всегда то, что рисует дизайнер можно реализовать технически.
- Нет единого стандарта. К сожалению каждый браузер по-разному отображает одни и те же элементы. Верстальщику необходимо потратить время на постоянную проверку одного и того же элемента на разных платформах.
- Если макет содержит нестандартные шрифты, то это тоже может вызвать небольшие сложности.
- Делая адаптивный сайт, стоит учесть особенность каждого устройства, так как не вся анимация будет отображаться корректно.
Проверка верстки
После завершения верстки необходимо протестировать ее. Базовая проверка включает в себя прогон сценария в нескольких браузерах и устройствах. А для того, чтобы быть уверенным в корректности проделанной работы проверьте:
- Соответствует ли верстка заданному макету. Можете использовать инструмент Pixel Perfect.
- Проверка кроссбраузерности. Это проделывается вручную.
- Корректность работы на экранах с разным расширением. Если у вас будут проблемы с фоновым изображением, такая проверка позволит это определить.
- Проверка адаптивности на разных устройствах. Для этого достаточно использовать getbootstrap.com.
- Проверка JavaScript. Для этого достаточно просто открыть браузер и посмотреть код страницы, если будут ошибки, они будут выделены красным цветом.
- Проверить валидацию кода и скорость загрузки страницы.
- Проверить корректно ли отображаются шрифты на Windows, Linux и Mас.
Сколько стоит верстка сайта
Логично, что стоимость верстки зависит от сложности самой задачи. Также на цену влияет и то, к кому вы обратитесь: к фрилансеру или в агентство. В среднем цена часа работы верстальщика — от 100 до 600 грн (профессионал).
Примерные цены на верстку сайта:
- Верстка лендинга — от 4000 грн;
- Верстка интернет-магазина — 11 500 грн;
- Верстка сайта по макету PSD — от 2000 грн;
- Верстка интернет-магазина — от 4000 грн;
- Верстка одной страницы сайта — от 400 грн;
- Верстка одного блока на странице — от 200 грн.
Колесников Дмитрий
Технический директор, студии BRAINLAB
Как сверстать шаблона сайта из PSD в HTML и CSS
Совсем недавно я на блоге рассказывал как в Photoshop сделать не сложный макет сайта. Если Вы его не видели, здесь Вы его сможете увидеть. Теперь этот макет мы будем верстать в HTML и CSS. Хочу сразу сказать, что это не лёгкая работа, но вполне выполнимая. Возможно по этой причине выход этого поста немного затянулся. Но Вы не волнуйтесь, я попробую Вам всё подробнее рассказать, как можно сильнее облегчить вам задачу. Ну а теперь поехали.
Так же по теме
Друзья, для того, чтобы было понятнее обязательно скачайте файлы уже готового шаблона. Так же в архив входит и 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 шаблонов для Ваших новых идей и веб – проектов">Скачать бесплатно 15 HTML5 и CSS3 шаблонов для Ваших новых идей и веб – проектов</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="Примеры идеального сочетания цветов в веб – дизайне">Примеры идеального сочетания цветов в веб – дизайне</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;
}В конечном итоге получаем вот такой шаблон:
Друзья, я надеюсь, что Вам понравился этот урок, я старался как можно понятнее объяснить. Ещё самое главное, нужно делать самому, пробовать, изменять. Не получилось, переделать. Не нравится, ещё раз переделать. В конечно итоге всё получится 🙂
В общем если у Вас будут вопросы спрашивайте в комментариях.
До скорых встреч.
Раздел 1: Введение | |||
| Лекция 1.1 | Что такое верстка? | 10:06 | |
| Лекция 1.2 | Необходимое ПО | 15:30 | |
Раздел 2: HTML | |||
| Лекция 2.1 | Что же такое HTML? | 11:20 | |
| Лекция 2.2 | Создание HTML-страницы | 13:36 | |
| Лекция 2.3 | Работа с текстом в HTML | 13:30 | |
| Лекция 2.4 | Работа со списками в HTML | 6:37 | |
| Лекция 2.5 | Работа с изображениями в HTML | 14:03 | |
| Лекция 2.6 | Работа с ссылка в HTML | 11:55 | |
| Лекция 2.7 | Работа с таблицами в HTML | 17:57 | |
| Лекция 2.8 | Работа с формами в HTML | 21:55 | |
| Лекция 2.9 | Работа с блоками | 8:36 | |
| Лекция 2.10 | Спецсимволы | 7:38 | |
Раздел 3: Первая верстка | |||
| Лекция 3.1 | Знакомство с шаблоном | 6:43 | |
| Лекция 3.2 | Создание структуры HTML-кода | 8:55 | |
| Лекция 3.3 | Реализация структуры HTML-кода | 11:35 | |
| Лекция 3.4 | Кроссбраузерность | 9:50 | |
| Лекция 3.5 | Адаптация под разные разрешения экрана | 13:35 | |
| Лекция 3.6 | Проверка валидности | 7:45 | |
Раздел 4: CSS | |||
| Лекция 4.1 | Что такое CSS? | 3:48 | |
| Лекция 4.2 | Синтаксис CSS | 11:26 | |
| Лекция 4.3 | Подключение стилей к странице | 13:19 | |
| Лекция 4.4 | Селектор по элементу | 8:00 | |
| Лекция 4.5 | Контекстный селектор | 8:14 | |
| Лекция 4.6 | Селектор CLASS | 9:49 | |
| Лекция 4.7 | Селектор по ID | 5:39 | |
| Лекция 4.8 | Селектор по параметру | 6:21 | |
| Лекция 4.9 | Псевдоэлементы | 7:52 | |
| Лекция 4.10 | Принцип наследования | 8:45 | |
Раздел 5: Основной набор CSS-свойств | |||
| Лекция 5.1 | Задание вида текста | 15:59 | |
| Лекция 5.2 | Задание цвета | 9:05 | |
| Лекция 5.3 | Задание рамки | 8:23 | |
| Лекция 5.4 | Задание фона | 10:22 | |
| Лекция 5.5 | Задание отступов и полей | 13:34 | |
| Лекция 5.6 | Плавающие блоки | 10:34 | |
| Лекция 5.7 | Выравнивание | 5:31 | |
| Лекция 5.8 | Некоторые псевдоэлементы | 11:13 | |
Раздел 6: Блочная верстка | |||
| Лекция 6.1 | Знакомство с шаблоном | 6:07 | |
| Лекция 6.2 | Подготовка к верстке | 6:47 | |
| Лекция 6.3 | Шапка и фон | 17:23 | |
| Лекция 6.4 | Центральная часть сайта | 15:30 | |
| Лекция 6.5 | Подвал | 4:43 | |
| Лекция 6.6 | Кроссбраузерность | 13:24 | |
| Лекция 6.7 | Адаптация под разные разрешения экрана | 6:25 | |
| Лекция 6.8 | Проверка валидности | 15:37 | |
Раздел 7: Верстка реального сайта | |||
| Лекция 7.1 | Знакомство с шаблоном | 5:58 | |
| Лекция 7.2 | Нарезаем шаблон | 10:42 | |
| Лекция 7.3 | Голова документа | 6:16 | |
| Лекция 7.4 | Добавление логотипа и контактов | 12:53 | |
| Лекция 7.5 | Верхнее меню | 18:17 | |
| Лекция 7.6 | Шапка сайта | 10:41 | |
| Лекция 7.7 | Меню и форма поиска | 19:41 | |
| Лекция 7.8 | Таблица с товарами | 22:58 | |
| Лекция 7.9 | Нумерация страниц | 13:45 | |
| Лекция 7.10 | Подвал | 12:11 | |
| Лекция 7.11 | Кроссбраузерность | 10:46 | |
| Лекция 7.12 | Адаптация | 15:50 | |
| Лекция 7.13 | Проверка сайта под разными разрешениями | 6:54 | |
| Лекция 7.14 | Проверка валидности | 4:52 | |
Раздел 8: Заключение | |||
| Лекция 8.1 | Подводим итоги | 3:10 | |
| Лекция 8.2 | Заключение | 2:56 | |
Раздел 9: Бонусы: Как заработать, верстая сайты | |||
| Лекция 9.1 | Где найти заказчика? | 6:51 | |
| Лекция 9.2 | Важные нюансы и поиск заказчика | 10:23 | |
| Лекция 9.3 | Как правильно писать заказчику | 7:13 | |
Что такое верстка и как сделать ее качественно?
Чему обычно придают особое внимание заказчики при разработке сайта?
- Дизайн. Оформление сайта для заказчиков чаще всего самое важное в сайте. Если разработчик согласовал с заказчиком дизайн, можно сказать, что самая сложная часть пути согласований пройдена.
- Корректная работа сайта. Когда сайт уже сдан и работает, для заказчика важно, чтобы не возникало ошибок в его работе.
- Система управления сайтом. Чаще всего бывает 2 требования: или система управления должна быть удобная для обычного пользователя, либо система управления должна быть распространенная (для продвинутых в программировании заказчиков).
Т.е. основная часть внимания заказчика прикована к самой первой части разработки сайта и к периоду обслуживания (если возникают проблемы).
К сожалению, незнание еще нескольких важных моментов о процессе создания сайта, иногда приводит к тому, что заказчики получают то, что просили, но не совсем то, что хотелось бы.
В данной статье мы хотим обратить ваше внимание на такой этап разработки, как верстка.
Что такое верстка?
Верстка — это процесс описания визуальной части сайта программными кодами. Это значит, что верстальщики (специалисты в верстке) берут макеты оформления страниц сайтов и описывают их буквами, цифрами и другими специальными символами так, чтобы оформление становилось «живым»: каждая деталь выполняла некую функцию.
При этом, вне зависимости от того, каким браузером вы пользуетесь (Internet Explorer, Google Chrome, Opera или Mozilla Firefox), сайт должен выглядеть и работать одинаково в каждом из них при любом разрешении монитора (монитора с различным размером диагонали).
Чем отличается качественная верстка от некачественной?
На самом деле важность чистой и грамотной верстки сайта очень велика. Мы приведем 3 простых факта: «На что влияет качество верстки?»
-
Корректное отображение в различных браузерах и при разных разрешениях мониторов.
(Кросс-браузерная верстка)
К сожалению, часто даже качественные по дизайну сайты имеют «кривую» верстку. Это приводит к тому, что в различных браузерах и на разных мониторах у пользователей возникают ошибки или проблемы с корректным отображением сайта.
Данной проблемой страдают даже сайты известных разработчиков.
-
Восприятие сайта поисковыми системами.
(SEO-оптимизированная верстка)
Чистая и грамотная верстка влияет на качество, скорость и легкость продвижения сайта. Т.к. кроме разработки сайтов мы также оказываем услугу продвижения сайтов в поисковых системах, мы точно знаем, какие ошибки часто допускают безответственные разработчики и как это влияет на продвижение. Иногда нам приходилось переделывать значительную часть программного кода для корректного восприятия сайта поисковыми системами.
Если вы предполагаете, что ваш сайт будет продвигаться в поисковых системах, на стадии разработки сайта обратите внимание на корректность верстки. Это позволит вам сэкономить время и деньги при продвижении сайта.
-
Скорость загрузки страниц.
(Оптимизированная верстка)
Чем чище и качественнее сверстан сайт, тем быстрее загружаются страницы.
Хорошо, если у пользователя сайта высокоскоростной интернет. Но даже у таких пользователей возникают иногда проблемы со скоростью загрузки страниц. Что уже говорить о владельцах dial-up подключения.
Данный пункт также относится и к владельцам мобильных телефонов и смартфонов. Еще не у многих сайтов есть мобильные версии, однако если на обычном сайте верстка сделана качественно, на мобильных устройствах он будет загружаться быстро и выглядеть достойно.
К сожалению, ввиду того, что о важности верстки заказчики знают не много (если вообще знают), разработчики порой не обращают внимание на этап верстки сайта и не придают значения качеству его выполнения (клиент все равно ничего не понимает и не заметит).
В нашей компании есть правило: делать все нужно идеально или не браться за работу вовсе. На всех этапах разработки сайта мы уделяем внимание каждой детали. Это касается не только дизайна, но также верстки, предоставлению полноценной и при этом очень простой и понятной системы управления сайтом.
Также как часть этапа работы с сайтом выступают консультации. Именно консультации, как признаются наши клиенты, оказываются бесценным подарком для наших заказчиков.
Если вы хотите заказать качественный сайт или сделать редизайн существующего сайта, свяжитесь с нами по телефонам:
(017) 2-220-220 или (017) 2-220-120
Статьи по теме:
Как не переплатить за верстку сайта
Часто заказчики недооценивают важность HTML-верстки и воспринимают её как промежуточный этап между дизайном и разработкой сайта. Некоторые команды даже не указывают верстку в смете, чтобы у клиентов не появлялось лишних вопросов.
В этой публикации мы объясним, почему верстка — это не просто перевод дизайнерских макетов в HTML-теги, а важный процесс, от качества выполнения которого зависит успех вашего проекта.
Распространенные заблуждения, связанные с процессом верстки веб-страниц
Под версткой часто понимают перевод макета дизайна в HTML-код: сначала веб-дизайнер создает оформление сайта в графическом редакторе, после чего верстальщик «нарезает» макет на отдельные изображения и переводит их в код с использованием HTML, CSS.
На первый взгляд это кажется неплохой идеей — прежде чем проект уйдет на разработку, заказчик может поэкспериментировать с дизайном и понять, устраивает ли его окончательный вид продукта. Однако такой подход перестает быть актуальным.
Во-первых, сейчас уже сложно представить себе интернет-страницу без закругленных углов, отбрасываемых теней и переливающихся цветов. Однако еще не так давно добиться стабильной работы подобных CSS-эффектов на всех браузерах было непросто, и дизайнерам приходилось создавать все в формате изображений.
Этот портрет, стилизованный под полотна XVIII века, написан чистым CSS-кодом. Если у вас крепкие нервы, откройте ссылку в Internet Explorer 9. Но помните, что мы предупреждали!Во-вторых, если раньше интернет был доступен в основном с персональных компьютеров, и достаточно было создать сайт с разрешением 1024×768, то сегодня пользователи могу войти в сеть с чего угодно, даже с холодильника. Дизайнер больше не может ориентироваться на единое разрешение, а адаптивная верстка стала стандартом отрасли.
Третья причина— индустрия веб-разработки повзрослела. Появилось множество инструментов, которые позволяют проектировать сайты и делать их дизайн прямо в самом браузере. Просто быть верстальщиком уже недостаточно, нужно разбираться в JavaScript и стремиться стать фронтенд-разработчиком. Конечно, об этом ведется множество споров, и не все с этим согласны, однако эту тенденцию сложно игнорировать.
Значит ли это, что верстка в традиционном ее понимании умерла?
Совсем нет. Графические редакторы, вроде продуктов Adobe по-прежнему очень важны для веб-дизайна. А этап верстки также играет большую роль в успехе проекта. Однако, необходимо принимать во внимание современные сложности связанные с проектированием веб-сайтов.
В Photoshop все еще удобно составлять макеты для дизайна сайтов. Высококачественный детальный макет поможет обсудить с заказчиком спорные моменты прежде чем вы приступите к написанию кода.
А верстальщик должен думать наперед, предусматривать стили даже для неиспользуемых элементов, продумывать структуру заголовков исходя из логики документа, а не его внешнего вида, позаботиться, чтобы сайт хорошо отображался на мобильных устройствах, чтобы в версию для печати не попадали ненужные элементы страницы.
Семантика и SEO сайта тоже напрямую связаны с качеством верстки. Браузер быстро выдает по поисковому запросу адрес или телефон предприятия, указанные на сайте, потому что программист правильно прописал отвечающие за эту информацию теги.
Более того, от квалификации верстальщика во многом зависят дальнейшая поддержка и масштабирование сайта: при некачественной верстке страница похожа на набор несвязанных между собой блоков, и чем больше их становится, тем сложнее такой сайт поддерживать. Любое новое изменение может повлечь за собой другие, совсем неочевидные изменения, следуя «принципу домино».
Добавление новых элементов
Качественная верстка должна предусматривать масштабирование сайта. При неправильно составленной верстке даже самая пустяковая задача, вроде добавления нового пункта меню превратится в проблему. Если верстка сайта не предполагала дальнейших добавлений и расширений функционала, то при интеграции нового пункта все элементы начнут «наезжать» друг на друга.
В нашей практики бывали случаи, когда верстальщик для внешне похожих страниц составлял разную структуру. Например, на главной странице у тега body нет класса, но на другой он задан. Таким образом, множество разных стилей отвечали за похожие вещи, что приводило к путанице в наименованиях.
Такое простое задание как, например, продублировать готовый и функционирующий блок «Читайте также» во всех разделах сайта, с неправильной версткой может занять несколько часов. Потому что, если разработчик попытается просто скопировать и вставить этот блок на разных страницах, вся верстка сломается.
В таких случаях приходится прибегать к быстрым решениям, которые не исправляют проблему целиком. Проще говоря, в код сайта приходится вставлять «костыли». Такой подход только утяжеляет сайт и делает его дальнейшую поддержку дороже.
Плохая верстка усложняет работу контент-менеджера. При составлении и редактировании публикаций часто используют заготовленные фрагменты исходного кода, которые отвечают за оформление. Их называют сниппетами. Они должны выглядеть одинаково на всех страницах сайта, но в случае некачественной верстки такое гарантировать сложно. Таким образом, добавив сниппет с текстом контент-менеджер может не по своей вине сломать всю страницу.
Полная переработка верстки
Временные решения мелких проблем могут лишь отсрочить неизбежное. Бывают случаи, когда дизайном занимается одна команда, версткой — другая, а для разработки привлекается третья. Такой подход чреват тем, что за каждый этап заказчику в итоге придется переплатить. При интеграции верстки обнаружится, что прошлый исполнитель задал неправильную структуру и стили.
Одни и те же блоки по разному отображались в зависимости от браузера и при смене разрешения. Поправив один блок для десктопной версии, разработчик замечал новые проблемы в этом же блоке для в мобильной версии. В итоге на переработку верстки и ее повторную интеграцию могут уйти десятки часов из-за чего придется отложить запуск проекта.
Как обезопасить себя от дополнительных расходов и убедиться, что вся работа будет выполнена качественно?
Действительно, во всех описанных случаях заказчик не подозревал о проблемах на своем проекте, и, не обладая нужными техническими знаниями, принимал работу верстальщика по внешнему виду, не заглядывая «под капот».
Конкуренция среди верстальщиков сейчас очень высока, рынок перенасыщен, и, конечно, не всегда понятно, зачем платить больше, если можно сэкономить.
Верстка сайта в обмен на еду — заманчивое предложениеНе стоит думать, что верстальщики специально хотят сделать вашу жизнь сложнее. Они могут даже не понимать свои ошибки из-за недостатка опыта. К сожалению, часто происходит так, что программисты-верстальщики не уделяют достаточно времени тестированию продукта. Не проверяют стабильность работы в разных браузерах с разными разрешениями и так далее.
Помимо прочего, верстка часто начинается не с «чистого листа», а с уже готовых решений, которые использовались на других проектах и подгоняются под нужды новых. Таким образом, на сайте может использоваться множество вещей, которые в действительности не нужны и только мешают стабильной работе и замедляют время загрузки.
Избежать подобных неприятностей можно лишь заказав верстку у профессионалов, которые непросто переводят нарезанные картинки в набор html-тегов, а заботятся о дальнейшей интеграции и технической поддержке. При работе в команде, дефекты будут устранены вовремя. Если разработчик заметит недостатки при интеграции, он вернет код на доработку. Таким образом, не будет потрачено лишнее время на интеграцию и будут предотвращены будущие сложности Такой подход гарантировано убережет от неоправданных расходов и переплат.
Дизайн веб-страницы: 3 шага, которым должен следовать каждый дизайнер
Создание веб-страницы, которая воплощает почти волшебный подвиг сочетания эстетической красоты и яркости вашего сообщения, требует удачного сочетания искусства и науки. Секрет заключается в том, чтобы дать себе немного творческой свободы, придерживаясь проверенной структуры.
Звук невозможен?
Не беспокойтесь, вот краткое руководство по созданию макета веб-страницы, повышающего конверсию, для любого бизнес-сайта.
Трехэтапный процесс разработки макета бизнес-сайта
Шаг 1. Сначала продумайте путь пользователя
Проведение исследования и обдумывание структуры домашней страницы до того, как вы начнете набрасывать идеи, имеет первостепенное значение для процесс проектирования.В процессе исследования убедитесь, что вы постоянно сосредотачиваетесь на первом впечатлении потенциальных клиентов. В конце концов, создание бизнес-веб-сайта, обеспечивающего отличный пользовательский интерфейс, практически невозможно без знания ожиданий целевых пользователей.
А веб-сайт, который не обращает внимания на доступность или не имеет хорошего пользовательского опыта, имеет гораздо меньше шансов привлечь приличный объем трафика — в конце концов, UX и SEO идут рука об руку. Есть выбросы с небрежным UX, которые все еще привлекают множество пользователей — см. Craigslist.Но у компаний с лучшим UX, таких как Uber, Airbnb и Slack, гораздо больше шансов заново изобрести свои отрасли.
Есть много способов исследовать потребности и ожидания пользователей, но интервью и сортировка карточек, вероятно, являются самыми популярными методами. Как только вы получите более глубокое представление о том, что ваша целевая аудитория ожидает от страницы, вы можете начать работу над информационной архитектурой.
Информационная архитектура (IA) — это организация информации на веб-сайте таким образом, чтобы она была ясной, интуитивно понятной и разумной. Подумайте о своем собственном опыте просмотра веб-страниц: переход на плохо спланированную веб-страницу, которая не доказывает свою релевантность за считанные секунды, расстраивает и, вероятно, заставит вас сразу же нажать кнопку закрытия или возврата.
Хороший IA создаст иерархию, которая выделяет наиболее важные элементы и удерживает посетителей.Без прочного «скелета», на котором можно было бы опираться, вы настроите себя на неудачу.
Навигация — один из ключевых аспектов IA, который вы должны учитывать на раннем этапе. Неважно, насколько красив ваш сайт, если пользователи не могут сориентироваться в нем.
Хорошая навигация имеет три основные характеристики:
- Простота
- Четкость
- Последовательность
Ваша цель должна заключаться в том, чтобы направлять пользователей к информации, которую они ищут, за минимальное количество кликов. Вы добиваетесь этого с помощью ясного, краткого и полезного языка панели навигации и единообразного дизайна всего сайта. Добавление функции резервного копирования, такой как хлебные крошки, также может значительно повысить удобство использования вашего сайта, помогая посетителю всегда понимать свое местоположение на сайте.
Шаг 2. Получите правильную визуальную иерархию
Лучшие веб-сайты делают это правильно. Сильная визуальная иерархия определяет разницу между дизайном макета веб-сайта, который направляет пользователей к действиям, которые вы хотите, чтобы они предприняли, и сайтом, который всего лишь выглядит хорошо . Люди — невероятно визуальные существа, и когда дело доходит до потребления контента в Интернете, мы часто просматриваем страницу, чтобы быстро определить, найдем ли мы то, что нам нужно, прежде чем погрузиться в нее.
Как дизайнер, вы можете убедиться, что самая важная информация видел и привлекает пользователей.
Без четкой визуальной иерархии весь контент на странице кажется одинаково важным, что делает его подавляющим.
Различные принципы дизайна помогают создать сильную визуальную иерархию.
Сетки обеспечивают мощную настройку для создания связей между различными элементами на странице и дают ощущение порядка в макете. Сетка показывает, как все элементы взаимодействуют друг с другом на странице, и обеспечивает адаптивный дизайн с четкой структурой для выделения нужной информации.
Есть два основных шаблона сканирования глаз, которые люди используют для быстрого сканирования блоков контента:
- F-образный шаблон
- Z-образный шаблон
Как дизайнер, у вас есть большой контроль над тем, куда будут смотреть посетители веб-сайта при сканировании вашей страницы, поэтому очень важно настроить для них правильные пути. Мы часто встречаем F-образный узор на сайтах с большим количеством текста, таких как блоги и новостные сайты.
Важно отметить, что группа Нильсена-Нормана — люди, открывшие этот паттерн чтения в 2006 году — недавно пересмотрела свое исследование и прояснила некоторые заблуждения, связанные с ним: F-образный паттерн на самом деле вреден для пользователей и бизнеса и следует избегать.
Если пользователи просматривают ваш веб-сайт по F-образному шаблону, это означает, что они отдают предпочтение левой стороне страницы и упускают важный контент в правой.Чтобы предотвратить F-сканирование, вы должны отформатировать контент на своем сайте таким образом, чтобы он направлял их на информацию, которую вы считаете наиболее важной.
Вот несколько способов направить посетителей к чтению наиболее важного содержания:
- Включите наиболее важную информацию в первые два абзаца
- Используйте заголовки и подзаголовки
- Важные слова или фразы, выделенные жирным шрифтом
- Группируйте небольшие суммы связанной информации визуально
- Часто используйте маркированные и нумерованные списки
Старайтесь делать тяжелую работу для ваших пользователей, чтобы свести к минимуму отвлекающие факторы и отговорить их от использования ярлыков.
Дизайн, препятствующий сканированию F-образной формы, хорошо подходит для веб-сайтов с большим объемом текста, таких как блоги и новостные сайты. Z-образный узор лучше подходит для сайтов с минимальным количеством копий и несколькими ключевыми элементами, предназначенными для привлечения внимания пользователя. На целевых страницах часто используется Z-образный узор, чтобы направлять пользователей по пути конверсии.
Этот макет веб-сайта отлично подходит, если вы хотите привлечь внимание пользователей к конкретному призыву к действию или контенту на странице.Источник: Basecamp
Используйте пять основных строительных блоков дизайна, чтобы построить визуальную иерархию с HTML и CSS, понятную с первого взгляда:
1. Размер
В любом дизайне важно соотносить размер с важностью — самая важная информация должна быть самой большой на странице и требовать наибольшего внимания.
2. Цвет
Помните, что цветовая схема может функционировать как организационный инструмент, а также как инструмент брендинга / индивидуальности в дизайне.
3. Макет
Хорошее форматирование побуждает посетителей взаимодействовать с контентом по всей странице и быстрее находить самую важную информацию.
В этом ежеквартальном издании Google используется карточный дизайн для организации содержания на странице и поощрения их основной цели: подписки.Источник: Think with Google .
4. Интервал
Пустое пространство, или отрицательное пространство, — это инструмент дизайна, который дизайнеры используют для привлечения внимания к наиболее важным элементам пользовательского интерфейса
5. Стиль.
Выбор стиля, который соответствует и подчеркивает ваш бренд, поможет вам более эффективно донести ваше сообщение.
Этот принцип требует, чтобы вы разделили дизайн на три части (макет из трех строк и трех столбцов), чтобы увидеть, где пересекаются линии, и выяснить, где находятся фокусные точки дизайна. Это эффективный метод для создания композиции вашего веб-сайта и выбора расположения и обрамления элементов дизайна. Использование сетки — самый простой способ применить эту технику к любому дизайну.
Шаг 3. Сосредоточьтесь на кнопках призыва к действию
Ни один веб-сайт не обходится без кнопок призыва к действию (CTA).Фактически, маркетологи сказали бы, что они — самый важный элемент на странице, и все усилия должны быть сосредоточены на том, чтобы люди переходили по ссылкам. Стратегическое использование хорошо продуманных призывов к действию может значительно улучшить поток страницы и направить пользователя к конверсии, поэтому очень важно понять это правильно.
Вот что нужно учитывать при разработке кнопок.
Это может показаться очевидным, но вы будете удивлены, как часто веб-дизайнеры отказываются от функциональности и ясности в пользу творчества или какой-то новой причудливой тенденции JavaScript (да, я говорю о вас , призрачная кнопка).Чтобы пользователи понимали, что элемент — это кнопка, используйте стандартные визуальные подсказки, которые помогут им определить возможность нажатия, например форму, тени и блики.
Кнопки служат для того, чтобы сообщить пользователям, что им делать дальше.Если текст расплывчатый, люди будут думать, а не действовать. Четко объясните пользователям, что произойдет, если они перейдут по ссылке. Вот умный пример от Netflix.
При разработке четкого призывания к действию необходимо выделить три важных аспекта: цвет, контраст и расположение. Используйте привлекательный цвет с достаточным контрастом, чтобы выделить основные кнопки, и разместите их на видных местах, где пользователи не смогут их пропустить.
Что еще вы хотели бы знать о верстке?
Мы хотим копнуть глубже, чем 101, по этой жизненно важной теме — так что дайте нам знать, что еще вы хотели бы узнать!
Кроме того, не забудьте заглянуть на рынок шаблонов Webflow, чтобы найти множество высококачественных красивых шаблонов веб-сайтов — от электронной коммерции до веб-сайтов-портфолио.
27 советов по веб-дизайну, подтвержденных исследованиями: как создать работающий веб-сайт
Всего посетителей. Это легко увидеть. Каждый маркетолог знает, сколько трафика он получает, потому что он отображается прямо в вашей Аналитике. Но то, что будет дальше, не так очевидно.
Вот почему давать советы по привлечению трафика легко, а советы по веб-дизайну — сложно. Есть так много факторов. Даже после 1000+ успешных проектов в области веб-дизайна нам сложно понять, что подойдет лучше всего.
В этой статье 27 советов по веб-дизайну, которые помогут получить больше пользы от каждого посетителя. Большинство этих советов подтверждено исследованиями. Они предназначены для начинающих дизайнеров и продвинутых профессионалов UX, для малого бизнеса и крупного предприятия.
Вот наши лучшие советы, идеи и вдохновение о том, как создать веб-сайт, который приносит результаты. Сайт, который выглядит красиво, привлекает посетителей и получает больше пользы от каждого из этих с трудом заработанных посещений.
Два наиболее важных исследования, процитированные здесь, находятся в самом конце.Если вы нетерпеливы, переходите вниз!
Структурная схема веб-сайта
Сайты — это две вещи: контейнеры и контент. Контейнер — это две вещи: структура и стиль. Начнем с первого. Эти советы касаются структуры и макета страниц.
1. Используйте визуальную иерархию
Каждая страница имеет визуальную иерархию. Если вы не знакомы с этой концепцией, вот наше определение:
Визуальная иерархия относится к расположению, размеру, цвету и контрасту визуальных элементов.Это определяет их относительную значимость и порядок, в котором они видны человеческим глазом.
Веб-дизайнеры используют визуальную иерархию, чтобы направить внимание посетителей в первую очередь на важные элементы. Макет веб-сайта включает в себя положение (вверху или внизу на странице), размеры (большие или маленькие), визуальные элементы (видео, изображения, значки) и контраст (цвет и пустое пространство).
Объединение аспектов увеличивает их эффект. Все увидят большое видео вверху страницы. Мало кто увидит низкоконтрастный текст в окружении изображений.
Визуальная иерархия — вот почему ваши глаза следуют определенному пути на каждой странице, которую вы посещаете в Интернете. При преднамеренном использовании он направляет внимание посетителя через серию сообщений к призыву к действию.
2. Используйте описательный заголовок, ориентированный на ключевые фразы, в верхней части главной страницы.
Заголовок вверху главной страницы (и каждой страницы) носит описательный характер или нет. В противном случае посетитель не сможет ответить на свой первый вопрос: «Я в нужном месте?»
Это также возможность использовать целевую ключевую фразу и указывать на релевантность.Но вместо этого многие маркетологи пишут что-то умное или расплывчатое. Но яснее лучше, чем умно.
Вместо того, чтобы писать причудливый, но расплывчатый заголовок, напишите что-нибудь описательное. Обязательно объясните, чем занимается компания, вверху страницы, в верхней части страницы.
Источник: Outreach Plus
Подождите, фальц еще есть?Да, фолд есть. Для каждого посещения на каждом экране есть область просмотра.Внизу — знаменитая складка. Чтобы увидеть что-либо ниже этой строки, посетитель должен прокрутить страницу.
Почему и если это имеет значение в веб-дизайне — горячо обсуждаемая тема. Вот два лучших аргумента: «Фолда нет!» Или «Фолд все еще имеет значение».
Конечно, есть тысячи размеров экранов, от крошечных до огромных. За последний месяц этот веб-сайт просматривался на 958 экранах разного размера. Некоторые дизайнеры говорят, что складка уже не актуальна.
Но вот итоги (понятно?) По-прежнему существует кратность для каждого посещения и все еще средняя кратность для всех посещений.Такие инструменты, как Hotjar, четко показывают это в виде линии на тепловой карте прокрутки для настольных компьютеров / ноутбуков, мобильных устройств и планшетов.
Итак, есть складка, и важно, что вы положите над ней и под ней. Одно исследование показало, что посетители проводят 80% своего времени вне страницы.
Так что поместите свое ценностное предложение, эту версию из 8 слов того, что вы делаете, вверху страницы, над сгибом.
3. Но не помещайте все свои призывы к действию вверху
Посетители могут проводить там больше времени, но это не значит, что они готовы действовать.Далее на странице происходит много уговоров.
Когда Chartbeat проанализировал 25 миллионов посещений, они обнаружили, что наибольшая вовлеченность происходит в нижней части страницы. Контент вверху может быть виден, но это не обязательно будет наиболее эффективным местом для призывов к действию.
Одно предостережение относительно этого часто цитируемого исследования: Chartbeat используется в основном новостными веб-сайтами, которые сильно отличаются от маркетинговых веб-сайтов. На новостных сайтах никто не делает ничего особенного! Обычные советы по веб-дизайну неприменимы.
Обязательно размещайте призывы к действию ниже по странице, в любом месте, где может быть высокий интерес.
4. Сделайте страницу высокой. Ответьте на все вопросы посетителей.
Больше пикселей — больше места для ответов на вопросы, рассмотрения возражений и добавления подтверждающих доказательств. Если посетитель не находит ответа на важный вопрос, он может просто продолжить движение вниз по странице. Как только они будут удовлетворены, они просто перестанут читать.
Самые эффективные страницы продаж имитируют разговоры о продажах.
Вы бы никогда не перебили кого-то во время торговой встречи и не перестали бы отвечать на его вопросы, не так ли? Это все, что делает короткая страница; он перестает отвечать на вопросы.
Вот где приходит на помощь знаменитое исследование Crazy Egg. Они опросили свою аудиторию, выявили наиболее важные вопросы и опасения и создали высокую страницу, посвященную всему.
Страница была в 20 раз длиннее. Конверсия выросла на 30%.
| « Прокрутка — продолжение.Щелчок — это решение » — Джош Портер, Rocket Insights |
5. Показывать по одному
«Мне нравится чистый современный дизайн». Это то, что большинство наших клиентов говорят нам, когда мы начинаем проекты по веб-дизайну. В качестве примера они часто ссылаются на веб-сайт Apple.
Посетители не любят беспорядок. Нам нравятся пробелы. Другими словами, нам нравится невысокая визуальная сложность.
В 2012 году Google задался целью выяснить, какие типы веб-сайтов кажутся посетителям красивыми.Это исследование простоты с очень сложным названием: Роль визуальной сложности и прототипичности в отношении первого впечатления от веб-сайтов: работа над пониманием эстетических суждений.
Они узнали, что более сложные конструкции с меньшей вероятностью будут восприниматься как красивые.
Это объясняет тенденцию к использованию макетов в один столбец и высоких страниц. Дизайн с несколькими столбцами (левая панель навигации, область содержимого, правая направляющая) более сложный, с большим количеством визуальных элементов в поле зрения посетителей.
Так что избавьтесь от беспорядка. Сделайте один из двух элементов в фокусе на каждой глубине прокрутки.
6. Придерживайтесь стандартных макетов
То же исследование, проведенное Google, показало, что «высокая прототипичность» также коррелирует с воспринимаемой красотой. Другими словами, странное обычно некрасиво. Веб-сайт, который следует стандартам веб-дизайна, скорее всего, понравится.
Сайты, считающиеся самыми красивыми, обладают как высокой прототипностью, так и низкой визуальной сложностью. Они одновременно простые и чистые.
Подумайте об этом так: выгодно выделять ваш бренд, но макет — не место для этого. Будьте разными в том, ЧТО вы говорите. Но будьте типичны в том, КАК используется ваш сайт.
Некоторые машины выглядят потрясающе. Они разные. Они красивы. Но у них остались двери по бокам, колеса внизу и фары спереди.
А что стандарт? Согласно нашему собственному исследованию, это стандартные элементы для веб-сайта:
«Стандартный» сайт с высокой прототипностью включает в себя:
- Логотип вверху слева
- Горизонтальная навигация в шапке
- Панель поиска вверху
- Социальные иконки внизу
- Мобильный адаптивный дизайн
7.Остерегайтесь «ложного дна»
Современные маркетинговые веб-сайты, особенно страницы продаж, состоят из блоков страниц. Это строки содержимого, часто с изображением с одной стороны и текстом с другой, которые проходят вниз по странице в виде одного столбца.
Вот анатомия типичной страницы услуг на веб-сайте лидогенерации.
Как показано на схеме, нижний колонтитул имеет более темный цвет фона. Так поступают так много сайтов, что посетители теперь ожидают, что переход на более темный фон означает нижнюю часть страницы.
Но если в дизайне есть блок страницы с темным фоном, посетитель может подумать, что он попал в нижнюю часть страницы, и перестает прокручивать страницу. Это ложное дно.
Примечание: я спорю со своими дизайнерами по этому поводу. Курт Круз, наш креативный директор, делает отличное заявление. Изменение цвета фона — отличный способ сообщить посетителям, что тип контента меняется. Я слышу тебя, Курт!
Будьте осторожны при выборе цвета фона для блоков страницы.На всякий случай выбирайте только небольшие вариации или всегда используйте белый или светло-серый цвет. Затем переключитесь на темно-серый или черный цвет в нижнем колонтитуле.
8. Избегайте каруселей и вращающихся ползунков
Они популярны уже много лет, и клиенты их любят. Но есть проблема со слайд-шоу на главной странице: посетители могут увидеть только первый слайд.
Было проведено множество исследований, которые пришли к такому же выводу. Сообщения на последующих слайдах с меньшей вероятностью будут видны, а призывы к действию вряд ли будут задействованы.Просто посмотрите на рейтинг кликов для слайдов на веб-сайте университета.
Они могут быть популярны, потому что их легко получить одобрение. Различные заинтересованные стороны из разных отделов получают несколько пикселей в верхней части страницы. Они хороши для внутренней политики, а не для посетителей.
Слайд-шоу на главной странице хорошо удерживают людей от удара друг друга в конференц-залах.
Так что же делать вместо этого?
- Сложите слайды в стопку , чтобы посетитель мог видеть каждый, прокручивая страницу вниз.Они внезапно станут более заметными.
- Используйте миниатюрное изображение , используя в качестве главного героя один из самых впечатляющих слайдов. Дайте ему хороший призыв к действию!
9. Избегайте табуляторов и гармошек
Вот еще один способ вырваться из укрытия: избегать вкладок и расширяемых блоков содержания.
Зная, что до 76% посетителей веб-сайта сканируют, вы можете сделать свой контент более видимым для них, оставив его открытым без необходимости щелкать мышью, чтобы что-то открыть.
Если бы вкладки и расширяемые аккордеоны были эффективны, вы, вероятно, увидели бы их на Amazon.
Помните, что прокрутка быстрее и проще, чем щелчок. Если посетителям нужно прицелиться и щелкнуть мышью или перейти на вкладку, чтобы увидеть что-то, они с меньшей вероятностью это увидят.
Изображения
Перейдем к визуальному оформлению. Эти советы относятся к изображениям на веб-страницах.
10. Используйте фотографии людей
Лица — это уникальные мощные изображения. С момента рождения мы больше смотрим на лица.Магнитная сила изображений людей очень полезна в веб-дизайне.
Лица не только привлекают внимание, они соотносятся с конверсией. Знаменитое тематическое исследование Basecamp показало огромный рост результатов, когда лица и отзывы были объединены на странице продаж.
Убедитесь, что ваш веб-сайт не похож на «заброшенный космический корабль» без души.
На протяжении многих лет я разговаривал с тысячами компаний об их маркетинге и заметил закономерность.Большие компании всегда стараются выглядеть маленькими, а маленькие компании стараются выглядеть большими. Странно, правда?
На самом деле, каждая компания должна просто стараться быть более личной, более человечной.
11. Но избегайте стоковых фотографий людей
Есть время и место для стоковых фотографий, но я бы избегал стоковых фотографий людей, подобных чуме. Они просто никогда не чувствуют себя искренними, поэтому не укрепляют доверия.
Компании соблазняют стоковые фотографии, потому что качество продукции высокое.Но ваших посетителей больше волнует реальность. Они предпочли бы видеть реальных людей, которые действительно работают в компании.
Подлинность важнее полировки.
Исследования подтверждают это. Исследование, проведенное NN Group, показало, что посетители отключают стоковые фотографии людей и изображения-наполнители, но на самом деле смотрят на фотографии реальных людей.
Так что будьте собой, покажите свою команду и используйте фотографии реальных людей, даже если они идеально отшлифованы.
12.Использовать лица как визуальные подсказки
Фотографии людей дают вам особую возможность привлечь внимание посетителей. Известный феномен «смотришь, куда смотрят».
Когда исследователь Джеймс Бриз продемонстрировал дизайн 106 людям, он продемонстрировал силу правильно расположенных лиц. У них есть способность направлять внимание посетителей на другие элементы.
Это знаменитый этюд с детским лицом. Когда младенец смотрит в камеру, посетители смотрят на него. Когда ребенок смотрит на заголовок, посетители смотрят на заголовок.
Моему другу Оли Гарднеру надоел этот пример с младенцем (прости, Оли!). Если кто-нибудь знает о других исследованиях или хороших примерах, дайте мне знать в комментариях!
Используйте прямую видимость на изображении лица в качестве ориентира, чтобы направить внимание посетителей на заявления о пользе или призывы к действию.
13. Используйте стрелки как визуальные подсказки
Лица могут направлять внимание, но это не единственный способ контролировать глаза посетителей.Маленькие стрелки, нарисованные от руки, могут быть еще более эффективными.
В этом исследовании отслеживания взгляда, проведенном CXL, было обнаружено, что простая стрелка была еще более действенной в побуждении посетителей взглянуть на элемент страницы.
Если вы хотите, чтобы посетители на что-то смотрели, укажите на это стрелкой. Я не уверен, является ли этот совет смехотворно очевидным или глубоко проницательным.
14. Используйте цвет, чтобы направить внимание посетителей на призывы к действию
Цвета имеют эмоциональную окраску (красный — срочно, синий — спокойный), и они являются частью стандартов бренда.Но они также дают возможность привлечь внимание посетителей к кнопкам и призывам к действию.
Исследование цвета кнопок, проведенное Eyequant, подтверждает, что цвет и контраст яркости могут привлекать внимание.
Но исследование показывает, что красочные кнопки не всегда эффективны. Если вы хотите, чтобы ваша кнопка была более заметной:
- Контрастность цвета кнопки с фоном
- Контрастность цвета кнопки и текста кнопки
- Сравните цвет кнопки с соседними элементами на странице (или оставьте вокруг нее много белого пространства)
«Эффект фон Ресторфа»
В 1930-х годах немецкий ученый Хедвиг фон Ресторфф обнаружил, что, когда им показывают список из десяти предметов, люди запоминают предметы, если они отличаются по цвету от других.Это связано с тем, что затылочная доля чувствительна к визуальным различиям или «прерывателям рисунка».
Интернет-маркетологПарас Чопра провел эксперименты, которые показали, что яркие цвета не просто лучше запоминаются, на них больше кликают: на 60% больше!
Совет для профессионалов! Выберите «цвет действия» для всех ваших ссылок, кнопок и эффектов наведения. Сделайте его цветом, отличным от фирменных цветов, используемых в дизайне (это «пассивные цвета»). Используйте цвет действия только в интерактивных элементах.
Навигация и ссылки
Теперь мы переходим к советам по навигации по сайту, включая меню, кнопки и ссылки, которые позволяют вашим посетителям перемещаться.
15. Будьте описательны
Навигация всегда выделяется визуально, поэтому это возможность для общения. Посетители обычно начинают свое посещение со сканирования заголовка. Все, что там есть, в том числе ваше меню, скорее всего, будет видно.
Источник: UX Movement
Когда ярлыки навигации носят общий характер, вы упустили шанс рассказать посетителям, что вы делаете.Сравните эти два примера:
Если ваши навигационные метки являются общими, то они являются общими для тысяч или даже миллионов веб-сайтов. Вы упустили шанс воспользоваться передовыми методами навигации по веб-сайту, помочь своим посетителям и повысить свой рейтинг в поисковой сети.
16. Поместите дом слева, но в остальном не беспокойтесь о порядке пунктов меню.
Если у вас есть домашняя ссылка, поместите ее слева. Это самое обычное место для этого, поэтому посетители ожидают, что найдут его там.
Что касается остальных пунктов меню, исследования показывают, что порядок не так уж и важен. Существуют два различных исследования отслеживания взгляда, которые показывают низкую корреляцию между порядком пунктов меню и успехом посетителей (источник и источник).
Так что не тратьте много времени на то, чтобы беспокоиться о порядке вещей в вашем меню.
17. Будьте осторожны при размещении ссылок со служебных страниц на сообщения блога
Если посетитель находится на странице услуги, цель состоит в том, чтобы превратить его в лида.Если вы добавите большие возможности уйти и пойти читать свой блог, они попадут на страницы, менее ориентированные на привлечение потенциальных клиентов. Посты в блогах, естественно, имеют больше отвлекающих факторов, возможностей для выхода и более низкие коэффициенты конверсии.
18. Будьте осторожны, ссылаясь на что-либо на других сайтах
Когда это уместно, дайте ссылку на то, что помогает посетителю достичь своих целей. В сообщении в блоге это часто ссылка на источник или ссылка на внешние ссылки. Этот пост содержит ссылки на десятки статей и исследований!
Но на служебных страницах и на вашей домашней странице вам следует осторожно размещать ссылки на другие сайты.Для любой страницы, оптимизированной для преобразования посетителей в потенциальных клиентов, спросите себя, действительно ли вы хотите, чтобы посетители переходили по этой ссылке? Помогает ли это вам в достижении ваших целей?
19. Избегайте использования значков социальных сетей в заголовке сайта
Точно так же красочные значки социальных сетей в вашем заголовке не подходят для ваших целей. Если посетители нажимают на любую из этих кнопок конфетного цвета, они попадают на сайт, полный отвлекающих факторов. Они вряд ли вернутся.
Это вообще неправильный способ интеграции в социальные сети.Если вы ссылаетесь на социальную сеть, делайте это из нижнего колонтитула. Посетители могут найти социальные сети, если ищут, но вы не предлагаете им уйти.
Письмо
Давай поговорим о словах. Ранее мы рекомендовали на главной странице заголовок, ориентированный на ключевые фразы. Вот еще несколько советов по написанию на веб-сайте, включая заголовки, подзаголовки и основной текст.
20. Напишите содержательные подзаголовки
Повсюду расплывчатые подзаголовки.Они часто бывают большими и бесполезными, но за ними следуют небольшие, но полезные вещи. Странно, правда? Противоположное имело бы смысл.
Убедитесь, что важные дела значимы и полезны для посетителей. Если в ваших подзаголовках говорится что-то вроде «продукты» или «услуги», спросите себя, не будет ли более полезным более описательный термин. Вот несколько примеров.
Это хорошо для сканеров и удобства использования. Подходит для людей с ослабленным зрением и доступности. Это также передовой опыт SEO.Никогда не упускайте шанс обозначить актуальность!
ProTip: Подзаголовки могут быть совершенно ненужными. Была бы эта страница так же хороша без нее? Будут ли посетители по-прежнему знать, на что они смотрят? Если так, просто удалите его.
21. Избегайте длинных абзацев и длинных строк
Длинные блочные абзацы не соответствуют лучшим практикам цифрового контента. Простое разделение длинных абзацев облегчает восприятие контента. Как правило, не пишите абзацы длиннее 3–4 строк.
| «Короткие абзацы читаются, длинные абзацы пропускаются, очень длинные абзацы пропускаются» — Джейсон Фрид, основатель и генеральный директор Basecamp |
Если строка очень длинная, посетителям может быть сложнее читать. Руководство по веб-стилю рекомендует строки, содержащие не более 12 слов.
22. Избегайте жаргона. Используйте простые слова.
Чем легче его читать, тем успешнее будет сайт.Используйте общие слова, которые ожидают посетители. Длинные предложения и замысловатые слова заставляют височную долю работать больше. Это не хорошо.
| “ Будьте проще! «Когнитивная беглость» — это показатель того, насколько легко мозг вашего посетителя обрабатывает то, на что он смотрит. Когда что-то трудно читать, мы подсознательно считаем это более рискованным и / или отнимающим много времени. Итак, чтобы максимизировать конверсию, используйте короткий текст, простые шрифты и удобный для чтения дизайн. ” — Роджер Дули, автор Brainfluence |
Копия, которая подходит для пользователей с низким уровнем грамотности, подходит всем. Дело не в том, чтобы приглушить его; речь идет об использовании простого языка, понятного каждому. Исследования показали, что снижение уровня удобочитаемости может повысить вероятность успеха для всех посетителей.
Даже доктора наук предпочитают читать на уровне 8-го класса.
Это громкое слово может показаться вам умным, но посетитель может почувствовать себя тупым.Сомневающийся в себе посетитель вряд ли примет меры. Поэтому, когда вы пишете, задавайте себе этот вопрос:
Знают ли 100% посетителей значения слов на этой странице?
23. Порядок в списке и «эффект порядкового номера»
При заказе списков в вашем экземпляре ставьте важные элементы в начало и конец. Внимание и удержание читателя самые низкие в середине любого списка. Когда посетители просматривают страницу, первый и последний элементы, скорее всего, останутся в кратковременной памяти.
Источник: Теория эффектов порядка: первенство против давности
24. Отвечайте на самые частые вопросы посетителей
Они пришли с вопросами. Основная задача сайта — ответить на эти вопросы. Каждый вопрос без ответа — это упущенная возможность укрепить доверие. Вопросы без ответа также увеличивают вероятность того, что посетитель уйдет.
Когда Джоэл Клеттке применил свой процесс поиска вопросов и написания ответов, он смог удвоить коэффициент конверсии на целевых страницах Hubspot.Он брал интервью у клиентов, анализировал их ответы, расставлял сообщения по приоритетам и, в конце концов, использовал слова самих слушателей в новом маркетинговом тексте. Умный!
Вот вопросы, которые использует Джоэл, чтобы найти самые популярные вопросы посетителей:
- Что случилось, что заставило вас искать решение?
- Что еще вы пробовали и что вам в этом не понравилось?
- Что почти удерживало вас от покупки у нас?
- Что придало вам уверенности, чтобы попробовать?
- Что сделало X лучшим решением для вас?
- Что для вас было самым важным при оценке X?
- Что вы можете сделать сейчас (или сделать лучше) из того, что не могли сделать раньше?
- Приведите мне пример, когда X имел значение для вас?
Одним словом, какова цель вашего сайта? Отвечать.
Дополнительное чтение: Идеальный сайт службы B2B Веб-сайт: контрольный список из 13 пунктов
25. Добавьте доказательства и социальные доказательства
«Систематическая предвзятость» — это человеческая склонность делать то, что делают другие люди. Таким образом, свидетельство того, что другие выбрали вас, делает выбор вашей компании хорошим выбором. Цель — сделать так, чтобы любое решение, отличное от использования вашей компании, выглядело выходящим за рамки нормы.
Докажите своим посетителям, что вы легитимны.В идеале каждое из ваших маркетинговых утверждений подтверждено доказательствами.
| «Сколько раз вы переходили на сайт из списка лауреатов премии в области дизайна и закатывали глаза на захватывающий заголовок« Дом »? Это то, что происходит, когда вы доверяете агентству «создать что-то совершенно замечательное и уникальное» вместо того, чтобы выбирать агентство, которое обещает создать что-то, что будет работать так, как нужно вашим клиентам / клиентам, и ожидает, что это будет работать.» — Джен Саламандик, Kick Point |
Самый быстрый и простой способ — добавить характеристики. Вот и другие виды социальных доказательств.
- Подтверждения от соответствующих влиятельных лиц
- Отзывы клиентов о продукте
- Логотипы СМИ «Как видно на…», в которых упоминается ваша компания
- Виджеты социальных сетей, показывающие размер вашего следующего
- Знаки доверия, включая членство в ассоциациях, сертификаты безопасности и награды
Сколько доказательств достаточно? Сколько отзывов нужно добавить?
Очень много.Вполне возможно, что слишком много доказательств не существует. Мы быстро проанализировали одну из страниц с описанием продуктов Amazon и обнаружили, что 43% страницы — это доказательства и обзоры.
Совет для профессионалов! Не создавайте страницу с отзывами. Как правило, это страницы с низким трафиком. Вместо этого добавьте отзывы на каждую страницу услуги.
26. Упомяните о дефиците, активируйте «неприятие потерь»
Люди не умеют эффективно вычислять затраты / выгоды. Мы склонны переоценивать потери и недооценивать прибыль.Другими словами, потери более болезненны, чем прибыль — приятна.
Это верно для онлайн и офлайн и во многом объясняет человеческое поведение. Эта статья хорошо объясняет это: Применение поведенческой экономики и когнитивной психологии в процессе проектирования.
Это неприятие потерь может быть полезно веб-дизайнерам и копирайтерам. Вот несколько советов по написанию текстов, не забывая о том, чтобы не потерять.
- Подчеркните затраты, связанные с неиспользованием вашего продукта или услуги.
- Сгруппируйте затраты вместе, перечислите выгоды отдельно.
- Подчеркните немедленную выгоду.
- Создайте срочность с ограниченными по времени предложениями. Если товара мало, скажите об этом.
Осторожно напомните своим посетителям, что они упустят, рискнут или потеряют, если не предпримут никаких действий прямо сейчас.
27. Оптимизировать формы подписки по электронной почте для подписчиков
Один в конце этого сообщения. Это призыв к действию подписаться. Если вы присмотритесь, вы увидите, что он состоит из трех отдельных элементов.Это 3 P для форм подписки по электронной почте.
- Известность Выделяется в визуальной иерархии
- Promise Он сообщает читателю, что он будет получать и как часто.
- Proof It использует социальное доказательство: количество подписчиков или крошечный отзыв
Когда мы впервые поэкспериментировали с этими изменениями, коэффициент конверсии в старой форме был очень низким, поэтому улучшение было значительным. Количество подписок по электронной почте увеличилось на на 4863%.
При разработке формы подписки по электронной почте сделайте ее видимой, используйте социальные доказательства и расскажите читателям, что они собираются получить.
Больше, чем просто красивый сайт
Все любят красоту. Всем нравятся новые классные особенности дизайна. Все критики. Но нам, посетителям, нужно нечто большее, чем красота. Нам нужна информация. А как владельцам веб-сайтов нам нужны результаты.
Вот два исследования с одним и тем же выводом. Первый — это опрос, проведенный Hubspot, который показывает, что для посетителей важнее простота поиска информации, чем красивый дизайн или модный UX.
Это второе исследование является результатом ряда пользовательских тестов, проведенных NN Group.Это показывает, что когда посетители терпят неудачу, это происходит потому, что они не могут найти информацию, а не потому, что сайт недостаточно красив.
Я люблю красивый дизайн как никто другой. Вот почему я начал заниматься этим бизнесом! И я часто думаю об этой цитате:
| «Жизнь дизайнера — это жизнь борьбы. Боритесь с уродством ». — Массимо Виньелли, легенда дизайна |
Но в веб-дизайне мы создаем контейнеры для контента.И посетители пришли за контентом, а не за контейнером.
Сайты должны быть красивыми. Они должны иметь визуальное или эмоциональное воздействие на посетителей. Но успех вашего сайта выходит далеко за рамки красоты. Речь идет о том, чтобы помочь посетителям найти то, что им нужно. Это суть каждого совета в этой статье. И это истинная цель веб-дизайна.
Помогите посетителю найти то, за чем он пришел, а затем дайте ему то, что вы хотите.
Создание сайта с использованием шаблонов веб-сайтов
Всем нам нужен веб-сайт, который отлично выглядит и хорошо работает.
Сегодня даже самые неопытные пользователи могут добиться этого с помощью шаблонов веб-сайтов.
Шаблоны веб-сайтов позволяют создавать и настраивать веб-сайты, используя работу профессионального дизайнера, при минимальных затратах или бесплатно. Вы можете получить сайт, о котором всегда мечтали, даже не запоминая ни слова кода.
Как такое возможно, спросите вы? Давайте погрузимся в…
Что такое шаблоны веб-сайтов?
Шаблоны веб-сайтов используются практически всеми платформами для создания веб-сайтов и систем управления контентом (CMS).Это готовые веб-сайты, которые можно использовать как есть или настроить.
Некоторые шаблоны разработаны для определенных типов сайтов (таких как журнал / журнал или интернет-магазин), а другие просто делают особый акцент на конкретных спецификациях дизайна.
Шаблоны веб-сайтов, разработанные, чтобы помочь вам создать сайт с минимальным опытом программирования или без него. Шаблоны веб-сайтов WordPress, также называемые темами, часто разрабатываются с учетом популярных тенденций веб-дизайна, что позволяет с легкостью создать современный и эстетичный сайт.
На самом деле, это одна из причин популярности WordPress. Посетите любой сайт WordPress (а поскольку сегодня более 50% веб-сайтов построены на WordPress, есть из чего выбирать), весьма вероятно, что один, если не большинство этих сайтов, был создан по шаблону.
Не все умеют программировать, но почти каждый хочет иметь возможность создать веб-сайт. Вот почему шаблоны так важны.
Что нужно для создания шаблона веб-сайта?
Имея огромное количество различных шаблонов, вы можете задаться вопросом, насколько сложно создать шаблон и стоит ли вам просто попробовать сделать это самостоятельно.Однако и деньги, и процесс создания каждого шаблона могут вас удивить, и его можно разбить на шесть категорий:
- Исследование — Одна из самых основных частей создания нового шаблона — это исследование шаблонов интерфейса и тенденций веб-сайта. Есть причина, по которой веб-сайты выглядят именно так, и средняя стоимость этапа исследования составляет около 400 долларов.
- Прототипирование — Окончательный дизайн веб-сайта фактически определяется на ранних этапах процесса.После завершения исследования дизайнеры шаблонов создают прототип, чтобы оценить, насколько эффективным будет их макет. Это может стоить более 600 долларов.
- Дизайн — Прежде чем будет написана хотя бы одна строка кода, для шаблона выбирается дизайн. Это также требует глубокого знания тенденций и того, как веб-сайт будет выдерживать течение времени. Создание сайта стоит 1000 долларов.
- Front-End Coding — Когда кодирование, наконец, начинается, основное внимание уделяется внешнему интерфейсу.Разработчики создают шаблоны, которые повторяют форму оригинального исследования, прототипирования и дизайна. Этот этап стоит 1000 долларов.
- Внутреннее кодирование — После создания внешнего интерфейса разработчики преобразовывают статический HTML-код в полностью функционирующий веб-сайт. Именно здесь прототип становится наиболее важным, поскольку он используется в качестве схемы для обозначения функции сайта. Затраты на внутреннюю разработку и дополнительные 600 долларов.
- Обеспечение качества — После того, как шаблон готов, он должен быть протестирован инженерами QA, чтобы убедиться, что он функционирует так, как предполагали исходные исследователи.Этот последний шаг стоит около 400 долларов, но стоит каждого пенни, если это означает, что клиенты останутся довольны своей темой на протяжении всего периода использования.
В целом шаблон веб-сайта стоит около 4000 долларов от начала до конца. Это не включает поддержку клиентов, которую предоставляет большинство разработчиков, и непредвиденные расходы, которые могут возникнуть. Большинство тем с трудом окупают свои затраты, а популярные шаблоны — это святой Грааль среди разработчиков.
В следующий раз, когда вы сомневаетесь в цене шаблона, просто запомните, насколько это снижение фактической стоимости.
Выбор платформы для веб-сайта
На этом этапе вам может быть интересно, , как выбрать платформу веб-сайта , которая лучше всего подходит для вас . В зависимости от того, какую услугу вы выберете, ваши варианты использования шаблона будут сильно различаться.
Например, шаблоны веб-сайтов WordPress можно выбрать либо с сайта WordPress, либо загрузить через стороннего поставщика. Если вы решите использовать шаблон от стороннего разработчика, вам нужно будет выполнить некоторые дополнительные действия, о которых мы расскажем позже.Шаблоны можно изменить в любое время, поэтому вам не о чем беспокоиться, если вы решите, что то, что вы выберете сейчас, не сработает в будущем.
Wix, с другой стороны, не имеет возможности переключать шаблоны позже. Это то, что вы захотите иметь в виду при выборе услуги хостинга / создания вашего веб-сайта. С Wix вы получите только один шаблон для каждого сайта. Если вы хотите использовать другой шаблон, вам придется создать совершенно новый веб-сайт. Вы также будете ограничены использованием проприетарных шаблонов Wix.В настоящее время загрузка со стороннего сайта невозможна.
Другие платформы, такие как Joomla, обычно предлагают пользователям возможность выбирать шаблоны со сторонних сайтов или из собственной службы. Убедитесь, что вы провели много исследований, прежде чем погрузиться в выбор сайта для создания веб-сайтов.
Выбор правильного шаблона веб-сайта
Лучшая часть создания собственного веб-сайта — это, конечно, выбор шаблона, который лучше всего подходит для того типа сайта, который вы хотите создать.
Во-первых, вам нужно решить, какова цель вашего сайта. Вы бизнес? Журналист? Дизайнер-фрилансер? Подумайте, что вы хотите, чтобы ваш сайт делал для вас. Это повлияет на внешний вид вашего веб-сайта и на то, какие функции вы захотите использовать в выбранном вами шаблоне.
Взгляните на сайты конкурентов или коллег. Как они спроектированы и структурированы? Вы можете получить несколько дизайнерских идей, взглянув на похожие веб-сайты и сравнив, насколько они соответствуют вашему собственному видению.
Затем вам нужно решить, готовы ли вы платить за шаблон веб-сайта или предпочитаете бесплатные шаблоны. Бесплатное — не всегда плохо, когда дело касается веб-сайтов, хотя вы должны быть уверены, что тестируете как можно больше шаблонов, чтобы убедиться, что они соответствуют вашим потребностям.
Когда вы используете конструктор сайтов, такой как Wix, вы наверняка захотите не торопиться с выбором шаблона. Помните, что Wix не позволит вам изменить шаблон позже, поэтому крайне важно убедиться, что вы нашли лучший шаблон, прежде чем углубляться в разработку своего сайта.
WordPress и сторонние шаблоны и темы
Выбрать шаблон на платформе WordPress так же просто, как нажать на тот, который вам нужен.
Что делать, если вы хотите выбрать сторонний шаблон?
Это будет зависеть от того, используете ли вы WordPress.com или WordPress.org. Если вы используете WordPress.com, вы не сможете использовать сторонние шаблоны. Тот же принцип применяется к использованию расширений.
WordPress.org, однако, позволит вам установить и настроить по своему усмотрению.
Если вы найдете понравившийся шаблон от альтернативного поставщика, просто загрузите его на свой компьютер. Затем, просматривая свой сайт WordPress через вкладку внешнего вида, вы можете просто выбрать файл дизайна шаблона, который вы скачали, и загрузить его прямо на сайт.
Почему вы вообще хотите выбрать стороннюю тему? У вас могут возникнуть проблемы с поиском понравившегося шаблона на сайте WordPress. Это не редкость, особенно если у вас есть очень конкретное видение того, как должен выглядеть ваш сайт.Некоторые из базовых шаблонов WordPress не всегда совместимы с расширениями или не могут быть легко настроены.
Всегда полезно проверять сторонние шаблоны, по крайней мере, чтобы почувствовать возможные варианты при выборе наилучшего варианта для своего сайта.
Бесплатные или платные шаблоны?
Всегда ли выбирать бесплатные шаблоны веб-сайтов или бывают случаи, когда стоит подумать об их покупке?
Выбор за вами, но есть несколько вещей, которые вы захотите рассмотреть.
Вам нравится особый внешний вид вашего веб-сайта? В этом случае может быть разумным решением заплатить за конкретный шаблон, если он хорошо согласуется с вашим первоначальным видением того, как вы хотите, чтобы ваш сайт выглядел.
Вы также можете принять во внимание тот факт, что обычно у вас есть возможность настроить свой сайт по своему желанию. Это хороший аргумент в пользу поиска бесплатных шаблонов веб-сайтов. Существует множество бесплатных шаблонов (особенно если вы ищете сторонние), и, возможно, можно будет найти что-то, что подойдет вам, не заплатив ни копейки.
Опять же, вы захотите рассмотреть свои потребности. Проведите много исследований и, если возможно, протестируйте или просмотрите несколько шаблонов, чтобы увидеть, какие из них лучше всего соответствуют целям вашего веб-сайта и вашим целям в отношении того, как вы хотите, чтобы ваш веб-сайт выглядел и выполнял.
Когда дело доходит до того, какой шаблон использовать, нет правильного или неправильного ответа. Все дело в том, как вы представляете свой веб-сайт и что вы хотите, чтобы он мог делать для вас.
Не торопитесь и при необходимости попробуйте новые шаблоны.Ключ к тому, чтобы шаблон веб-сайта работал на вас, — это увидеть, насколько он соответствует потребностям вашего веб-сайта.
Адаптивный дизайн
В последние годы увеличилось количество различных устройств, используемых для доступа в Интернет. От настольных компьютеров до планшетов, смартфонов и всего, что между ними, нет соответствия ни по размеру, ни по использованию. Однако это не означает, что ваш сайт не может обслуживать всех пользователей.
Концепция адаптивного дизайна очень проста. После реализации макет вашего веб-сайта будет соответствовать любому размеру экрана на любом устройстве.Это достигается с помощью различных средств, основными из которых являются адаптивные сайты и мобильные сайты.
Адаптивные сайты автоматически адаптируются к изменениям размера экрана. Это означает, что один и тот же сайт обслуживается всеми пользователями и соответствует пространству, в котором он отображается. WebsiteBuilderInsider построен на гибкой платформе, и вы можете сами увидеть, как элементы адаптируются, когда вы расширяете и уменьшаете размер своего браузера.
Мобильный дизайн сайта дает посетителям основную информацию.
Мобильные сайты — это версии вашей веб-страницы, которые автоматически вызываются при обнаружении мобильного пользователя. Эти сайты могут иметь более простую компоновку и более ограниченную функциональность по сравнению с их эквивалентами для настольных компьютеров, поэтому для мобильных пользователей важно выбирать наиболее важные элементы. Они могут включать маршруты магазинов, номера телефонов и общую информацию.
Основы компоновки сайта
Большинство веб-сайтов соответствуют стандартному макету, к которому пользователи привыкли и которого ожидают.Редко можно найти веб-сайт, который не соответствует этому базовому дизайну, и больше пользователей лучше всего будут его придерживаться.
Пример заголовка веб-сайта
Заголовок
Заголовок веб-сайта — это панель, которая проходит в верхней части вашего веб-сайта и обычно содержит основные инструменты, которые вам понадобятся для перехода со страницы на страницу, включая панель поиска, ссылки на основные страницы, блог и даже контактную информацию.
Если у вас есть логотип, он обычно размещается в заголовке и обычно служит двойной цели — это кнопка «Домой», которую пользователи могут нажать, чтобы вернуться на главную страницу вашего веб-сайта.
Пример тела веб-сайта
Кузов
Тело — это часть веб-сайта, которая меняется от страницы к странице. Он занимает больше всего места и отображает весь контент, содержащийся на каждой странице.
Это могут быть галереи изображений, блоги и все, что между ними. Когда вы добавляете страницы на свой сайт, вы меняете только тело.
Пример нижнего колонтитула веб-сайта
Нижний колонтитул
Подобно верхнему колонтитулу, нижний колонтитул веб-сайта — это полоса, которая проходит в нижней части страницы.
Нижние колонтитулы содержат такую информацию, как уведомления об авторских правах, контактную информацию, подписку на информационные бюллетени и все остальное, достаточно важное, чтобы быть на каждой странице, но недостаточно важное, чтобы отображаться в заголовке на видном месте.
Шаблон веб-сайта позволит вам легко настроить эти три основных элемента.
Правильный шаблон веб-сайта может сделать контент вашего веб-сайта ярким, создать приятный пользовательский интерфейс и заставить вас выглядеть настоящим профессионалом. Так чего же ты ждешь? Попробуйте сегодня.Мы даже составили списки лучших шаблонов веб-сайтов для всех форматов, включая Weebly, Drupal, Joomla и Magento.
Освоение искусства макета — создание веб-сайта
Дизайн макета — один из самых мощных инструментов, который может иметь каждый. Когда дело доходит до дизайна веб-сайтов, умение знать правильные способы макетов является мгновенным преимуществом среди ваших конкурентов. Возможность создавать современный дизайн макета является преимуществом для привлечения большого числа лоялистов к веб-сайту.Находясь в отрасли, где есть множество вариантов выбора, необходимо выделить себя именно с точки зрения наличия эффективных макетов страниц, которые идеально соответствуют вкусам этого дотошного поколения.Презентация играет большую роль в достижении идеального дизайна веб-сайта. Как человек, занимающийся цифровым маркетингом, вы должны знать, что нужно и что нельзя делать при разработке собственного макета страницы, чтобы добиться успеха в завоевании сердец посетителей вашего веб-сайта.Если вы ищете лучшие способы и советы, которые следует учесть, прежде чем разрабатывать собственные макеты, Strikingly находится всего в одном клике, чтобы создавать вместе с вами.
Топ 5 распространенных типов макетов веб-сайтовПрежде чем приступить к созданию собственного макета страницы, вы должны сначала знать, какую категорию вы пытаетесь заполнить. Какой тип макета веб-сайта вы ищете? Какой современный дизайн макета понравится посетителям вашего сайта?
С этими многочисленными вопросами, которые сейчас волнуют вас, поразительно перечислил наиболее распространенный тип макетов страниц, которые значительно упростят вам задачу.
- Дизайн макета веб-сайта электронной коммерции
Одним из наиболее распространенных типов макетов веб-сайтов являются макеты, разработанные специально для электронной коммерции. Электронная коммерция или просто электронная коммерция — это современный вид торговли, осуществляемый с использованием современных технологий, в частности Интернета. Это одна из главных причин, по которой многие веб-мастера получают больше шансов постоянно создавать различные макеты страниц. В связи с постоянным спросом на более быстрый способ транзакций между фирмами и их потребителями, а также с учетом того типа жизни, с которым мы сталкиваемся в настоящее время из-за пандемии, разработка веб-сайтов для электронной коммерции становилась все более популярной.
Такой вид макета можно считать самым простым. Если вы хотите создать такой макет для своей домашней страницы, вам просто нужно сосредоточиться. Будьте проще. Посетители посещают такие веб-страницы с конкретной целью проверить то, что им действительно нужно. Сделайте дизайн макета страницы удобным для пользователей. Четко и кратко расскажите о своих товарах и услугах. Вы по-прежнему можете добавлять стиль и эстетику в свой дизайн макета, выделяя структуру веб-сайта, в основном предназначенную для электронной коммерции.
- Блог Дизайн макета веб-сайта
Ведение блога различается для каждого человека, так же как и дизайн макета веб-сайта, предназначенный для него. Поскольку он может показаться совершенно свободным от какой-либо конкретной структуры, которую следует учитывать, веб-дизайнерам также следует помнить о том, чтобы все было в порядке. Настоятельно рекомендуется изучить различные типы макетов для этого типа.
Творчество — один из лучших инструментов при разработке дизайна макета сайта блога. Вы можете быть кем угодно и кем угодно.Выражайте себя и идеи в уникальной манере, которая запечатлеет вас в сознании и душе вашего посетителя. Подарите им то, что они никогда не забудут. Открыто демонстрируйте свои мысли и заставьте их полюбить вас. И когда мы говорим о том, как заставить посетителей веб-сайта влюбиться в вас, мы, несомненно, добьемся успеха.
- Дизайн макета страницы портфолио
Помимо блогов, портфолио также стремятся быть специально продемонстрированы. Макет страницы портфолио обычно более индивидуален.Эти типы веб-страниц в основном предназначены для демонстрации личности компании потенциальным клиентам.
Обязательно проявите творческий подход к созданию макетов такого типа. Всегда следует учитывать такие элементы, как цветовая схема, тип шрифта, размеры изображений, а также расположение контактных данных и предыдущие проекты. Таким образом, целевым клиентам и посетителям сайта не будет скучно изучать всю страницу. Дизайн вашего макета должен быть не только вычурным, но и обеспечивать хороший поток информации, распространяемый по всей веб-странице.
- Дизайн макета страницы услуг
Сайты, созданные для предлагаемых услуг, также являются одним из типов, пользующихся спросом на данный момент. Поскольку из-за этой пандемии люди всегда находятся в своих домах, они полагаются на такие веб-сайты.
Когда вы создаете макет страницы услуг, необходимо, чтобы все было упорядочено. Всегда помните о информации, которую вы вкладываете в свой макет. Будьте профессиональны в предоставлении «необходимых сведений» о типе услуг, которые вы предлагаете, и поддерживайте тональность в удобном для пользователя тоне.Заставьте людей помнить вас и ваш бренд. Если вы хотите узнать больше о различных макетах в этом поле, Strikingly упростит вам понимание.
- Дизайн макета веб-сайта по туризму и отдыху
Дизайн макета, предназначенный для туризма и отдыха, может показаться немного сложным. Вы должны сохранить его эстетичный дизайн, функциональность и информативность.
Посетители веб-сайта должны найти дизайн макета вашей страницы более легким для доступа и владеть информацией, которую они ищут.Основная информация о поездках, такая как расписание рейсов, даты продажи / продажи билетов и детали бронирования / рекламные акции, должна быть представлена в ясной, но привлекательной форме. В конце концов, вы поощряете их планировать свое путешествие вместе с вами, так почему бы не сделать это воспоминание гораздо более незабываемым, доверив его вам. Сделайте свой макет одновременно захватывающим и надежным. Кто бы хотел, чтобы отпуск их мечты был испорчен с самого начала?
О чем следует помнить перед созданием макетовТеперь, когда у вас уже есть основные идеи относительно типов макетов, настало время узнать лучшие советы по обеспечению эффективности.Недостаточно просто знать типы макетов этих страниц. Вы также должны знать лучшие советы, которые следует помнить при его создании.
Ниже приведены советы, которые следует учитывать дизайнерам и фирмам, чтобы добиться такого макета, которому все будут завидовать. И если вам удастся узнать больше из этих советов, Strikingly поможет вам достичь этого, не беспокоясь об этом.
- Меньше значит больше
Как бы банально это ни звучало, но чем меньше, тем увереннее работает большую часть времени.В наши дни люди находят более привлекательным, если макет простой. Просто в том смысле, что он не только содержит графическое содержимое, но, самое главное, имеет то, что им нужно. Пользователи веб-сайта найдут вашу домашнюю страницу более привлекательной и интересной, если дизайн макета страницы в первую очередь предоставит им то, что им нужно. Творчество по-прежнему высоко ценится, но, насколько это возможно, не делайте свой дизайн слишком переполненным и беспорядочным.
- Выберите правильные цвета
Цветовая схема играет большую роль в создании безупречной веб-страницы.Выбор подходящего цвета для каждого элемента на вашем веб-сайте — одна из главных вещей, которые нужно помнить при создании макетов. Плохой выбор цветов может затруднить понимание посетителями вашего сайта. В некоторых случаях им может показаться слишком скучным или слишком ярким, что от простого взгляда на них болят глаза. Поэкспериментируйте с цветами, но также подумайте, как один вариант может дополнить другой. Если вы освоите этот шаг, создание идеального макета не составит особой проблемы.
Если вы хотите узнать больше об искусстве выбора лучших цветовых схем и образцов шаблонов для вашего следующего макета веб-сайта, Strikingly собрал для вас «самые лучшие».
- Витрина продуктов и услуг
Веб-страница была бы неполной без продуктов / услуг, предлагаемых компанией. Дизайнеры должны уделять большое внимание тому, как создать дизайн макета, который будет демонстрировать различные продукты / услуги для пользователей. Не только важно, чтобы вся страница была очень художественной.Страница, которая не содержит никакой информации о том, что это такое, не имеет никакого смысла, верно? Продемонстрируйте продукт / услуги в художественной, но правильно организованной манере, чтобы пользователи сочли это забавным и зацепили.
- Исследуй и открой
Создание собственного макета требует от вас воображения. Не бойтесь пробовать новое. Изучите все возможности и сделайте их инструментом для создания наилучшего макета для вас. Существуют различные современные макеты, которые в наши дни рассматривают создатели веб-страниц.Думать шире. Будьте открыты для открытия нового набора идей, и пусть веб-страница будет интересна всем
- Сделайте ее удобной для пользователя
Веб-страница не является веб-страницей, если она не привлекает своих пользователей. Помните, что вы разрабатываете страницу для своих пользователей. Учитывайте их последние пожелания и используйте их в качестве основного ориентира при создании современного макета. Сделайте вещи для них более понятными. Знайте своих целевых пользователей и создайте дизайн, который объединит вас, пользователей вашего веб-сайта и созданную вами веб-страницу.
Существуют различные способы создания современного макета, который идеально подойдет не только вашему вкусу, но и вашим пользователям. Поразительно упрощает установление этой прочной связи между вами и каждым человеком, который посещает ваш веб-сайт.
Создайте свой макет с STRIKINGLYПоразительно, это не просто веб-сайт, где вы можете найти современные шаблоны и другие идеи для дизайна вашего веб-сайта. Это также может помочь вам создать его, как если бы вы консультировались с настоящим экспертом.И теперь, когда создание веб-сайтов стало самой популярной тенденцией в мире электронной коммерции, компания Strikingly сделала свой собственный шаг в развитии игры.
Создание собственного веб-сайта никогда не будет таким простым, как вы думаете. Благодаря новейшей функции редактора сайтов Strikingly, режиму перетаскивания. Эта функция значительно упростит разработку макета. Теперь у вас есть возможность свободно добавлять, удалять и перемещать элементы на вашем собственном веб-сайте. Эта функция станет доступна всем пользователям Strikingly всего через несколько недель.Так что, если вы сейчас ищете ранний доступ к этой специальной функции, поспешите и свяжитесь с [email protected].
Макет веб-сайта: лучшие примеры для вдохновения в 2021 году
Макеты веб-сайтов — ключ к раскрытию потенциала вашего сайта. Благодаря стратегическому дизайну вы можете предоставить своим посетителям исключительный пользовательский интерфейс (UX). И этот пользовательский опыт стимулирует рост вашего бизнеса за счет более высоких конверсий.
Этот рост продолжается за счет постоянного тестирования удобства использования и оптимизации коэффициента конверсии (CRO) с использованием таких инструментов, как A / B-тестирование, тепловые карты и записи сеансов.
Если вы планируете серьезный редизайн или только начинаете работу со своим сайтом, используйте это руководство для вдохновения . Мы рассмотрим некоторые из часто используемых шаблонов и несколько примеров, которые в кратчайшие сроки увеличат ваш рост и конверсию.
Какой у веб-сайта хороший макет?
Есть много способов ответить на этот вопрос. Вы можете получить идеи, просмотреть наборы данных и узнать все, что нужно знать о передовых методах веб-дизайна.
Но на самом деле правда такова:
Хороший макет веб-сайта — это тот, который подходит вашим пользователям. Тот, который помогает им понять ваш продукт / услугу / контент, не прилагая слишком много усилий для навигации по нему
Независимо от того, какой дизайн вы выберете, будьте готовы постоянно настраивать его на основе того, что вы узнаете из реального поведения пользователя.
Советы по созданию макета вашего сайта
Прежде чем проинструктировать своего дизайнера или начать изучать шаблоны веб-дизайна, нужно заранее спланировать три вещи.Эти три элемента должны лежать в основе каждой части дизайна и UX-работы, которую вы когда-либо выполняете, поэтому убедитесь, что они лежат в основе всех ваших обсуждений.
1. Спланируйте путь пользователя
Как вы хотите, чтобы пользователи перемещались по вашему сайту?
Давайте немного вернемся к этому вопросу. Как пользователи ожидают, что будут перемещаться по вашему сайту? Какие вопросы у них возникают?
Хорошей отправной точкой здесь было бы взглянуть на домашнюю страницу и:
- Создайте план информационной архитектуры (IA). Используйте сортировку карточек, чтобы записать все страницы, которые вы хотите разместить на своем веб-сайте, и логически упорядочить их. Подумайте о том, как все эти страницы будут представлены в следующем пункте.
- Спланируйте навигацию. У вас может быть самый красивый веб-сайт из когда-либо созданных. Неважно, если ваши клиенты не знают, куда им идти и как найти то, что они ищут.
Если вы обнаружите, что здесь что-то не так, разбейте процесс, используя следующий вопрос:
Как я могу привлечь моих посетителей к нужной им информации или к точке конверсии за минимально возможное количество кликов?
Конечно, у вас может (вам определенно стоит!) Быть призыв к действию прямо на вашей домашней странице.
Но не следует загружать все страницы одинаковым содержанием.
2. Спланируйте визуальную иерархию с помощью шаблонов сканирования
Каждая страница должна иметь четкую визуальную иерархию или шаблон. Дело в том, чтобы привлечь внимание к наиболее важному контенту на вашей странице.
Это ваша возможность привлечь пользователей и направить их к важной информации или призывам к действию, которым вы хотите, чтобы они следовали.
Планируйте визуальную иерархию в зависимости от типа создаваемого вами веб-сайта.
F-образный узор
F-образный дизайн предназначен для веб-сайтов, на которых основное внимание уделяется тексту или информации . Например, блог, издатель или новостная платформа.
Люди в западном мире читают слева направо. Итак, столкнувшись с текстом, мы начинаем сканировать вниз слева, читая более подробно, если что-то привлекает наше внимание.
Если ваш сайт основан на тексте, выберите дизайн с одной колонкой, ориентированный на аудиторию F-сканирования. Конечно, одним из самых популярных примеров этого в Интернете является платформа для блогов Medium
.Z-образный узор
Если вы продаете товар или услугу, купите с Z-образным рисунком. Это упорядочивает вашу страницу с навигацией по заголовку вверху, коммерческим сообщением и призывом к действию в середине, а затем некоторыми ключевыми статистическими данными и социальными доказательствами внизу. Basecamp делает это блестяще.
Карточные макеты веб-сайтов и разделенные экраны
Вы продаете много товаров? Если это так, вы хотите показывать своим пользователям более одного продукта одновременно. Карточные макеты и разделенные экраны отлично подходят для того, чтобы пользователи могли сравнивать разные продукты, а вы выделять те элементы, которые вы хотите продвигать.На странице женской одежды Target эти элементы дизайна отлично сочетаются.
Работа с «правилом третей»
Старый принцип веб-дизайна — правило третей. При таком подходе вы разбиваете свой дизайн на три строки и три столбца, получая сетку 3 x 3.
В основе правила третей лежат две ключевые идеи. Во-первых, нужно сделать так, чтобы каждая строка и столбец имели одинаковую тему. Это упрощает сканирование для глаз.
Во-вторых, вы получаете эти горячие зоны для внимания в местах пересечения линий. Разместите призывы к действию и ключевые сообщения в этих областях и используйте остальную часть своей страницы, чтобы направлять пользователей в эти области.
На домашней странице Amazon вы часто можете увидеть правило третей в действии.
3. Планируйте кнопки призыва к действию
Призывы к действию (CTA) — ваш лучший способ сообщить пользователям, что вы хотите, чтобы они делали на вашем веб-сайте. Это одна из важнейших вещей, которые вы будете постоянно тестировать и настраивать, но они необходимы для вашего веб-сайта с первого дня.
Следуйте этим трем принципам, чтобы закрепить призыв к действию:
- Убедитесь, что они выглядят интерактивными. Помните, пользователям нужно, чтобы было очевидно, что вы от них хотите. Если ваш CTA не похож на кнопку, вы пропустите клики.
- Убедитесь, что они помечены действием. Если ваш призыв к действию не предлагает пользователям сделать что-то вроде «Зарегистрироваться» или «Попробовать бесплатно», то это вообще призыв к действию?
- Выделите самые важные призывы к действию. Каждый призыв к действию важен, но вам нужно выделить ключевые сообщения. Например, если у вас есть призывы к действию «Бесплатная пробная версия» и «Подписка на рассылку новостей», какой из них вы хотите, чтобы пользователи видели в первую очередь и привлекали их больше всего?
- Как правило, призывы к действию должны быть в верхней части страницы. Вы хотите, чтобы они смотрели прямо на ваших посетителей, когда они впервые заходят на страницу. Это не значит, что вы не должны размещать их позже на своей странице.
Лучшие идеи макета веб-сайтов: 11 примеров сайтов, конвертирующих
Итак, мы рассмотрели несколько ключевых принципов создания веб-дизайна, которые стимулируют рост бизнеса.Давайте применим это к действию и рассмотрим несколько реальных примеров. Вот 11 отличных дизайнов веб-сайтов от успешных компаний.
1. Mailchimp
Mailchimp — это наиболее широко используемый в мире инструмент электронного маркетинга. Тем не менее, несмотря на то, что большинство людей знают, что такое Mailchimp, еще до посещения своего веб-сайта, они не теряют времени на предоставление фантастического UX.
Верх главной страницы предназначен для сканирования Z-образного шаблона. Яркий желтый цвет привлекает внимание и не отпускает их.Разные размеры шрифтов подчеркивают как ключевые сообщения, так и действия, которые они хотят от вас предпринять.
Это четко, ясно и очевидно, что Mailchimp хочет от вас.
2. Омнифицированный
Иногда нужно просто и минималистично. У OMNI это хорошо получается.
Посмотрите эти скриншоты.
Двухколоночный макет с небольшим текстом и красивыми четкими изображениями. Это создает Z-образный узор по всему веб-сайту, который приглашает вас продолжить поиск.Для каждого фрагмента текста есть четкий призыв к действию, который поможет вам перейти к следующему шагу.
Элегантный минималистичный дизайн страницы повторяет чистые линии мебели.
Клиенты электронной торговли любят информацию о продуктах, но действительно продают именно визуальные элементы!
3. Яблоко
Если есть что-то, что Apple знает, так это то, как продавать технологические продукты.
Изображение продукта в центре страницы подчеркивает использование Z-шаблонов и правила третей.На рисунке ниже показан iPhone 12 Pro в центре экрана, охватывающий все точки, где пересекаются линии по правилу третей.
Всплеск синего цвета для CTA не оставляет у посетителей никаких сомнений относительно следующего шага. Apple знает, что вместо того, чтобы бомбардировать посетителей информацией, многие ее потенциальные клиенты все равно хотят иметь телефон. Так что им просто нужно упростить процесс преобразования.
4. Dropbox
ВDropbox используется простой дизайн, сочетающий вводную часть экрана с разделенным экраном и отображение в два столбца при прокрутке.
У него есть пара вещей.
Во-первых, форма регистрации занимает около трети экрана. Во-вторых, с помощью желтой стрелки внизу они дают понять, что есть два варианта для пользователей, но один лучше другого.
Они могут либо зарегистрироваться, либо узнать больше, но на самом деле им нужно просто зарегистрироваться. Как посетителю понять, что делать дальше, несложно.
5. YouTube
Не только электронная коммерция может получить прибыль от макетов на основе карт.Возможно, самый известный пример этого в действии — YouTube.
Что делает YouTube, так это изменение способа представления видео пользователям в зависимости от того, где они находятся на сайте. Например, когда вы попадаете на главную страницу YouTube, вам отображается сетка видео, а также выбор из ваших любимых категорий, в которых используются как Z-шаблоны, так и правило третей.
Напротив, когда вы ищете конкретное видео, вам отображается список, который больше зависит от сканирования F-шаблона.Этот принцип дизайна действует, потому что гигант потоковой передачи знает, что пользователи нажимают на него, основываясь на миниатюре YouTube и заголовке видео, что является фантастическим примером дизайна, основанного на поведении пользователей.
6. Проводной
Хотя Wired использует карточный дизайн для своей домашней страницы и категорий, мы хотим взглянуть на страницы со статьями.
Это отличные примеры F-шаблонов, используемых на текстовых веб-сайтах, что делает их контент доступным, независимо от того, хотите ли вы просмотреть или прочитать подробно.
И это с невероятно простым дизайном. Здесь нет никаких причудливых наворотов — просто простой, чистый дизайн, который приглашает вас продолжить чтение.
7. Yell.com
Yell.com — это онлайн-бизнес-каталог, созданный на основе старых аналоговых желтых страниц. И их веб-сайт отражает то, что он живет за счет рекомендаций других услуг. Благодаря большому фоновому изображению и привлекающей внимание строке поиска они знают, чего хотят их посетители.
И они его доставляют. Вам не нужно нанимать команду дорогих дизайнеров, чтобы изобретать велосипед. В конце концов, лучший макет веб-сайта — это тот, который работает для ваших пользователей.
8. Trefecta
Домашняя страницаTrefecta не соответствует ни одному из принципов веб-дизайна, которые мы выделили ранее, но мы хотим сосредоточиться на фиксированной левой боковой панели.
Помните, когда вы раньше планировали свою информационную архитектуру? Что ж, если на вашем сайте всего несколько страниц, эта конкретная задача будет легкой.Это также может означать, что для вашего сайта можно использовать фиксированную панель навигации, такую как Trefecta.
Он делает ваш дизайн привлекательным и дает пользователям фокус с левой стороны, независимо от того, подписываются ли они на продукт или собирают информацию.
Не только это, он показывает вам, что иногда нарушение правил — это нормально.
9. Milledeux
Если хотите вдохнуть немного сезонного вдохновения, посетите датский сайт электронной коммерции Milledeux. Рождественское настроение сочится со страницы с самого начала.Простая анимация в виде снегопада заставляет задуматься о грядущих уютных временах. И тогда ваш взгляд притягивается к продукту.
Правило третей используется с ⅔ для продукта и ⅓ для CTA. Это способ упростить преобразование, при этом сообщая пользователям, о чем эта страница.
Для тех, кто все еще сомневается, вы получаете карточный макет с большими изображениями. Мы уже говорили об этом раньше, но для электронной коммерции вам нужно сделать изображения центральным элементом вашего дизайна.
10. Shopify
Shopify — еще один фантастический пример веб-сайта, который использует простой дизайн и минимальный обмен сообщениями, но при этом на 100% ясно показывает, что он делает и почему вы должны его использовать.
Когда вы попадаете на сайт, ваши глаза привлекают зеленые кнопки. Приглашаем вас начать работу.
Это также отличный пример хороших призывов к действию. Хороший призыв к действию всегда имеет позитивный, насыщенный содержанием язык. И здесь не только кнопки. На панели навигации есть такие приглашающие категории, как «Начать», «Продать», «Управление» и «Узнать».”
11. Полоса
Многие из представленных нами дизайнов довольно минималистичны. Много белого пространства и не слишком много цветов одновременно.
Введите полосу. На первый взгляд это может показаться хаосом, но в этом безумии есть своя причина. Футуристические волны, анимация и яркое использование цвета лежат в основе их бренда. А то, как экран разделен по диагонали, делает Z-образную схему очень очевидной.
Хотя вы можете не начинать с этого момента, Stripe — отличный пример того, как вы можете использовать различные методы тестирования юзабилити, чтобы довести свой дизайн до того места, где он будет работать для ваших пользователей.Их домашняя страница раньше выглядела совсем иначе, как вы можете видеть ниже!
Благодаря динамическим цветным элементам и четкому обмену сообщениями, Stripe по-прежнему сохраняет все, что вы хотите от отличной страницы, включая простую навигацию и использование CTA.
Использование Mouseflow для оптимизации макета вашего веб-сайта
Большинство платформ аналитики веб-сайтов предоставляют вам информацию о показателе отказов и местах, где люди нажимают. Но вам нужно добавить дополнительный контекст к этим данным, чтобы внести реальные улучшения в удобство использования, UX и дизайн.
Вы можете использовать Mouseflow как традиционный инструмент аналитики, но вы получаете гораздо больше, чтобы помочь вам проанализировать, как пользователи взаимодействуют с нашим веб-сайтом.
Наши тепловые карты и функции записи сеансов помогут вам узнать:
- На какие элементы обращают внимание ваши пользователи
- Пункты колебаний, прежде чем нажать CTA
- Части вашей страницы, которые могут отвлекать пользователей от основного сообщения
- Где можно улучшить свой дизайн
Узнайте больше о том, как Mouseflow может помочь вам оптимизировать дизайн и развивать бизнес, или начните работу с 14-дневной бесплатной пробной версии.
FAQ
Q: Какой у веб-сайта хороший макет?
A: Хороший макет веб-сайта — это тот, который работает на ваших клиентов! Приступая к работе с веб-дизайном, подумайте о навигации и информационной архитектуре, визуальных иерархиях и эффективности ваших призывов к действию, чтобы создать основу для вашего дизайна.
Q: Каким принципам веб-дизайна я должен следовать?
A: Это зависит от целей вашего веб-сайта. Например, дизайн с F-образным рисунком может быть полезен, если вы публикуете информацию на веб-сайте в стиле блога.Напротив, Z-образный узор может быть лучше, если вы продаете товар или услугу.
Q: Что такое правило третей?
A: Правило третей разбивает ваш дизайн на три строки и три столбца, создавая сетку 3 x 3. Идея состоит в том, что каждая строка и столбец имеют определенную тему или фокус. В то же время четыре точки, в которых пересекаются линии вашей сетки, будут основными фокусными точками вашей страницы, где вы можете разместить изображения, важную информацию или призывы к действию.
33 способа сделать макет веб-сайта привлекательным
«Сколько я должен заплатить, чтобы мой веб-сайт стал привлекательным?» — этот вопрос, вероятно, номер 1 в контрольном списке для создания любого веб-сайта.Правда в том, что не существует определенной цены или набора плагинов, которые заставят прохожего остаться на вашем сайте навсегда. Общеизвестно, что о книге судят по обложке, поэтому первое впечатление так важно и определяет все последующие «отношения» между веб-сайтом и посетителем. Если вы управляете веб-сайтом, но у вас есть внутреннее ощущение, что он может выглядеть лучше, продолжайте читать и узнайте, какие простые способы улучшить удобство использования веб-сайта, «добавив несколько оттенков макияжа» в макет.
Приведенные ниже идеи не являются обязательными, и они не гарантируют вам огромного успеха или прибыли, но, если внимательно следовать им, они определенно сделают любой веб-сайт уникальным и, в конечном итоге, профессиональным и заслуживающим доверия.
Бренд говорит объемы
1. Сделайте аккуратный и профессиональный логотип. Это самый первый элемент, с которым сталкивается посетитель, когда заходит на ваш сайт. Убедитесь, что он содержит название вашего продукта / услуги и выполнен в цветах вашей компании.
2. Создайте значок веб-сайта. Это квадратный значок, который вы видите в адресной строке браузера. Хорошо продуманные значки должны соответствовать логотипу или теме веб-проекта, чтобы посетитель мог с первого взгляда узнать ваш веб-сайт.
3. Создайте собственное изображение функции сообщения в блоге. Это тот, который распространяется в Twitter, Facebook, LinkedIn и других социальных сетях. Имея собственный «почерк» в выборе изображений для постов, пользователь с первого взгляда формирует ассоциации и идентифицирует написанные вами посты.
4. Придерживайтесь одной цветовой схемы и используйте ее на всем сайте. Выберите 2-3 основных цвета, и ваш сайт будет выглядеть стильно и не навязчиво одновременно. Новые используют черный цвет, потому что он всегда добавляет темный оттенок вашему сайту. Избегайте нейтрального серого, поскольку он лишает ваш сайт индивидуальности. Вам лучше добавить оттенок красного, синего или желтого, и ваше творение в сети получит свежий слой краски.
Печатайте своим голосом
5. Говорят, что почти 90% веб-сайта — это типографика.Вот почему, чтобы произвести хорошее впечатление на первого посетителя, определите свой ведущий шрифт и используйте его для большей части текста. Не используйте более трех типов шрифтов, так как это выглядит неаккуратно и замедляет работу вашего сайта. Выберите заголовок, печать абзаца и еще один для особых случаев.
6. Используйте типографские элементы, чтобы сделать ваши сообщения визуально привлекательными и структурированными. Здесь идут маркированные и нумерованные списки, подписи, выделенный текст, сокращения и цитаты.
7. На каждом сайте есть элементы, которые появляются довольно часто. Это могут быть логотипы социальных сетей, интерактивная графика, кнопки навигации и так далее. Вместо использования обычных изображений установите собственный шрифт значков, который придаст вашему сайту привлекательный вид.
Интеграция с социальными сетями
8. Лично я не встречал веб-сайта, который бы вообще не использовал социальные сети для своего продвижения и работы. И эта практика даже приветствуется при правильном использовании. Не превышайте ограничение на количество кнопок социальных сетей на страницах вашего веб-сайта, так как это увеличит время его загрузки.1-5 иконок будет вполне достаточно, чтобы проинформировать ваших читателей об основных каналах социальных сетей (например, Facebook, Twitter, LinkedIn, Instagram, Pinterest), не так ли?
9. Установите графику в социальных сетях для вашего Twitter, Facebook и других SM-каналов. Это произведет немедленное положительное впечатление на вашу аудиторию и вдохновит их подписаться, лайкнуть и даже поделиться контентом вашего сайта.
Содержание превыше всего
10. Знаете ли вы, какая страница на любом веб-сайте самая посещаемая? Это домашняя страница и страница о странице.Так. убедитесь, что они наилучшим образом описывают вашу компанию или продукт.
11. Вам также необходимо создать целевую страницу на своем веб-сайте, если вы хотите, чтобы пользователи выполняли определенные действия. Не забудьте настроить его под общий вид вашего веб-сайта (цвета, значки, шрифты и т. Д.)
12. Продаете товары? Убедитесь, что у вас есть красивая страница продаж с броским заголовком, коротким видеороликом о продажах и отзывами ваших клиентов. Используйте нижнюю часть страницы продажи, чтобы направлять людей на покупку.Это не будет выглядеть как чистая реклама, но будет хорошим навигатором для ваших клиентов.
Встречайте первую скрипку — Безопасность
13. Сертификат SSL (Security Sockets Layer) предназначен для установления безопасного и зашифрованного соединения между вашим сайтом и интернет-браузером. Если вы принимаете кредитные карты, большинство программ для оформления заказа требует наличия SSL-сертификата. Более того, согласно Google, этот сертификат улучшает ваше SEO.
14. Продолжайте обновлять плагины и программное обеспечение.Когда ваша платформа CMS объявила о предстоящем обновлении, не торопитесь, чтобы перейти на последнюю версию, в противном случае веб-сайт может быть взломан.
15. Двойная аутентификация входа в систему для вашей страницы администратора — самое мудрое решение, когда дело доходит до безопасности веб-сайта.
16. Имя пользователя администратора по умолчанию — «admin». Никогда, я говорю, никогда не оставляй это так. Вам лучше удалить учетную запись администратора по умолчанию и создать новую с совершенно другим именем пользователя.
17. Регулярное резервное копирование поможет вам восстановить все файлы, если вы потеряете свой сайт. «Я слежу за своим сайтом» — скажете вы, но, поверьте, если вы идете по пути его улучшения, рано или поздно появятся те завистливые хакеры, которые перекроют вам всю вашу работу. Предупрежден — значит вооружен, не так ли?
Скорость страницы имеет решающее значение
18. Имейте в виду «правило 2 МБ». Это означает, что любая страница весом более 2 МБ слишком тяжелая для вашего веб-сайта, и пользователю потребуются годы, чтобы получить информацию, которую он искал.
19. Используйте CSS для отображения таких элементов страницы, как кнопка, форма и т. Д., Вместо фоновых изображений. Каскадные таблицы стилей или CSS загружаются быстрее и являются более гибкими в использовании ответственных макетов.
20. Оптимизируйте изображения перед загрузкой на сайт. Существует множество отличных онлайн-инструментов, например TinyPNG, которые уменьшают размер изображения, но не влияют на качество и разрешение изображения.
21. Установите кеширование браузера, установив срок выполнения для страниц, которые не обновляются регулярно.Это сэкономит место на вашем сайте и увеличит скорость загрузки.
Все о SEO
22. Одно ключевое слово на одной странице. Это идеальная формула для ранжирования SEO. Сосредоточьтесь на оптимизации этой страницы для ключевого слова, но будьте осторожны, потому что слишком много никогда не будет хорошо.
23. Используйте теги заголовков с выбранными вами ключевыми словами. Он отображается как синяя ссылка в результатах поиска Google. Чтобы соответствовать всем требованиям Google, ограничьте тег заголовка 55 символами.
24. Мета-описание — еще один элемент, который приветствует Google. Он отображается в виде краткого обзора страницы под ссылкой. Убедитесь, что вы установили его на каждой странице и также включили ключевую фразу.
25. Используйте Google Analytics, чтобы убедиться, что ваш сайт нравится людям. Это также поможет вам определить слабые и сильные стороны вашего веб-сайта и покажет, что нужно улучшить.
Пользовательский интерфейс — вот что действительно важно
26. Каждая страница создается для определенной цели. Используйте большие и читаемые призывы к действию, чтобы показать пользователю самое важное сообщение. Лучший способ разработать призыв к действию — это придать им вид кнопки.
27. Измените цвета посещенных ссылок, чтобы посетители увидели, что они уже были на этой странице.
28. Укажите текущий год в области нижнего колонтитула авторских прав. Это докажет, что ваш сайт обновлен, и не возникнет никаких сомнений в том, доступна ли услуга / продукт, которые вы предлагаете, или нет.
29. Не секрет, что все меньше и меньше людей выходят в сеть через ноутбуки. Более того, утверждается, что 61% пользователей вряд ли вернутся на веб-сайт после негативного опыта работы с мобильными устройствами. Таким образом, убедитесь, что ваш веб-сайт адаптирован для мобильных устройств и реагирует на любые цифровые устройства. Если веб-сайт правильно оптимизирован для мобильных устройств, он автоматически загружается быстрее и получает более высокий рейтинг в Google и среди пользователей.
Развитие
30. Создайте собственный плагин, чтобы придать уникальную функциональность вашему сайту.Я знаю, что это не так просто поддерживать, но это гарантирует вашему сайту огромное преимущество перед всеми вашими конкурентами вместе взятыми.
31. Старайтесь как можно чаще избегать ручной работы. Вы создали сайт, этого достаточно! Пусть инструменты и автоматизированные службы сделают всю предыдущую работу. Формирование меню, проверка неработающих ссылок и даже перенос сайта — все это можно сделать полностью автоматически.
32. Проверьте свой веб-сайт на кроссбраузерность, чтобы убедиться, что он правильно отображается в разных браузерах.Вы никогда не знаете, к какому веб-порталу Chrome, Firefox, Safari или Internet Explorer прибегает ваш посетитель.
33. Не все изменения хороши, правда? Для этого сценария идеально иметь промежуточную среду, в которой вы можете протестировать внесенные вами изменения. Как только вы будете удовлетворены всеми изменениями, перенесите стадию на рабочий веб-сайт.
Это были лишь несколько основных предложений по улучшению веб-сайта, вы понимаете, капля в море. Если вы хотите добавить пару слов к приведенному выше списку идей, не стесняйтесь делиться ими в разделе комментариев.Давайте вместе сделаем Интернет более привлекательным и работающим!
Следующие две вкладки изменяют содержимое ниже.Валя — яркий обозреватель платформ CMS, поэтому она нашла работу своей мечты менеджером по маркетингу в службе миграции CMS2CMS. Хорошо изучающая английский язык, меломан и страстный автор контента, она постоянно совершенствуется и открыта для сложных задач.
Создание макета сайта | Kentico 11 Учебник
Вы узнаете о:
Ваш веб-сайт с инструкциями скоро появится! На предыдущих шагах вы создали все ресурсы, необходимые для создания приложения MVC.
Чтобы добиться единообразия на вашем веб-сайте, создайте представление макета. Представление будет содержать заголовок веб-сайта, меню навигации и содержимое нижнего колонтитула и обеспечит единообразный вид на всех страницах веб-сайта. Вы также добавите файл _ViewStart , который назначает макет по умолчанию для всех представлений в вашем проекте MVC.
Добавление ресурсов CSS
Базовый дизайн веб-сайта клиники Medio основан на стилях CSS из файла styles.css в ресурсах руководства (вы можете загрузить ресурсы здесь: TutorialWebsite.zip). Мы рекомендуем вам хранить ресурсы, связанные с дизайном, отдельно от остального кода в приложении MVC.
- В Visual Studio выберите проект MedioMVC и добавьте новую папку с именем Content.
- Создайте новую подпапку Styles в папке Content .
- Добавьте файл styles.css , который вы скачали, в папку Styles .
Теперь в вашем проекте есть таблица стилей, которую вы будете использовать для определения дизайна веб-сайта.
Создание макета сайта
На этом шаге вы создадите вид макета.
- В Visual Studio создайте новую папку Shared в папке Views .
Выберите папку Shared и добавьте новый макет с именем: _Layout
Вы можете использовать встроенные шаблоны в Visual Studio. Щелкните правой кнопкой мыши папку Shared , перейдите к опции Добавить и выберите в меню шаблон MVC 5 Layout Page (Razor) .
- Замените код в _Layout.cshtml образцом кода в файле index.html из учебных ресурсов (вы можете загрузить ресурсы здесь: TutorialWebsite.zip).
- Найдите теги
… и замените жестко запрограммированный заголовок страницы Учебный сайт на префикс Medio Clinic — и вызов Razor @ ViewBag.Title . Измените ссылку на таблицу стилей, чтобы отразить расположение стилей .css в вашем проекте.
- Удалите содержимое между закрывающими тегами и открывающими и замените его вызовом Razor @RenderBody ().
Ваш код _Layout.cshtml должен выглядеть так:
@ * Динамически разрешает заголовок страницы * @Medio Clinic - @ViewBag.Заголовок @ * Загружает ресурс style.css * @ <заголовок>@ * Загружает содержимое страниц вашего учебного пособия в виде дополнительных представлений * @ @RenderBody () <нижний колонтитул>Клиника MEDIO
- Адрес: 7A Kentico street, Bedford, NH 03110, USA
- Электронная почта: [email protected]
- Номер телефона: (541) 754-3010
На основе Kentico CMS для ASP.NET- Сохраните изменения
Добавление файла ViewStart
Файл ViewStart позволяет определить общий код Razor, который выполняется в начале рендеринга каждого представления.Мы будем использовать это, чтобы установить _Layout.cshtml в качестве макета по умолчанию для всех представлений на вашем веб-сайте.
- Выберите папку Views и добавьте новое представление Empty с именем: _ViewStart
Замените код по умолчанию следующей разметкой Razor:
@ { Layout = "~ / Просмотры / Shared / _Layout.