Макеты сайтов: Готовые PSD макеты сайтов

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

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году

50 бесплатных ресурсов для ваших проектов графического дизайна в 2020 году | Творческий бум

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

Изображение предоставлено Death to Stock

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

Чтобы облегчить вам жизнь, наши дизайнеры и преподаватели из Шиллингтона вновь объединились с командой Creative Boom, чтобы предоставить вам полный список рекомендуемых ресурсов, который вы можете скачать бесплатно (на момент написания статьи).

Бесплатные стоковые изображения

1. pexels

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

pexels.com

2. StockSnap

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

stocksnap.io

3. landingstock

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

landingstock.com

4. nappy.co

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

nappy.co

5. photos.icons8

Хотите фото для своего сайта, которого больше ни у кого нет? Photo Creator от Icons8 позволяет комбинировать различные стоковые фотографии для создания собственного уникального изображения. Комбинируйте собственные объекты, людей, фоны и даже изображения, используя интерфейс перетаскивания в браузере, который очень быстрый и простой в использовании. Нам особенно нравится, как вы можете добавлять фильтры в ваш поиск.

photos.icons8.com/creator

подгузник

Бесплатные иллюстрации

6. Drawkit

DrawKit – это коллекция бесплатных, красивых, настраиваемых лицензированных на MIT иллюстраций SVG в двух стилях для использования на вашем следующем веб-сайте, в приложении или проекте.

drawkit.io

7. Humaaans

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

humaaans.com

8. UnDraw

Описывая себя как «иллюстрацию с открытым исходным кодом для любой идеи, которую вы можете себе представить и создать», unDraw – это постоянно обновляемый дизайн-проект Катерины Лимпитсуни, в котором представлены красивые изображения SVG, которые вы можете использовать совершенно бесплатно и без указания авторства. Нам особенно нравится возможность быстро добавлять свой собственный шестнадцатеричный код, чтобы адаптировать иллюстрации к вашим собственным проектам.

undraw.co

9. Openpeeps

Нужно что-то более рисованное? Open Peeps – это библиотека иллюстраций для вас. Созданные Пабло Стэнли, плоские SVG и PNG-ресурсы с открытым исходным кодом доступны для Sketch, Figma, Studio и XD. Вы даже можете сделать пожертвование, если сможете поддержать Пабло. Немного проходит долгий путь.

openpeeps.com

10. lukaszadam.com

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

lukaszadam.com

Open Peeps

Бесплатные иконки

11. thenounproject.com

Сооснователь Софья Поляков, Эдвард Боутман и Скотт Томас, The Noun Project объединяют более двух миллионов курируемых иконок, созданных мировым сообществом и доступных для использования дизайнерами бесплатно.

thenounproject.com

12. ionicons.com

Ionicons – это премиальные иконки для использования дизайнерами в веб, iOS, Android и настольных приложениях. Созданные командой Ionic Framework, все они бесплатны и имеют открытый исходный код.

ionicons.com

13. simpleicons.org

Начиная с Дэна Лича, Simple Icons делает бесплатные иконки SVG для популярных брендов доступными для скачивания бесплатно.

simpleicons.org

14. icons8.com

Этот невероятный ресурс, предоставленный icons8.com, предоставляет вам целую библиотеку бесплатных иконок в PNG и SVG. Они тоже на высоте, так как они только что выпустили раздел «Поиск, связанный с коронавирусом» для тех из вас, кто требует чего-то очень актуального.

icons8.com

15. animaticons.co

Animaticons – это набор анимированных GIF-файлов высокого разрешения, которые вы можете настроить. Они имеют небольшой размер файла, совместимы со всеми основными браузерами, электронными письмами и смартфонами и не требуют специальных плагинов или библиотек.

animaticons.co

Animaticons

Бесплатные шрифты

16. Google Fonts

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

fonts.google.com

17. Используйте и модифицируйте

Use & Modify – персональный выбор «классных, панковских, профессиональных, неполных и странных шрифтов» – предоставляет шрифты с открытым исходным кодом, которые можно использовать бесплатно и… как вы уже догадались, изменить.

usemodify.com

18. Fontfabric

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

fontfabric.com

19. Дафон

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

dafont.com

20. fontsquirrel.com

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

fontsquirrel.com

Fontfabric

Бесплатные стоковые видео

21. Coverr

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

coverr.co

22. Mixkit

Представленный Envato, Mixkit – это курируемая галерея высококачественных видео и анимации, созданных одними из самых талантливых авторов в мире, со всем контентом, лицензируемым бесплатно.

mixkit.co

23. Videezy

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

videezy.com

24. Vids

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

lifeofvids.com

25. Видево

Videvo предлагает множество бесплатных видео, которые можно бесплатно использовать как в личных, так и в коммерческих целях. Видеоклипы, на которые распространяется лицензия Creative Commons 3.0, должны быть переданы первоначальному автору.

videvo.net/stock-video-footage

Coverr

Бесплатные инструменты графического дизайна

26. Crello

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

crello.com

27. pencil.evolus.vn

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

pencil.evolus.vn

28. Канва

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

canva.com

29. Inkscape

Inkscape, созданная некоммерческой организацией, представляет собой программное обеспечение для работы с векторной графикой профессионального качества, работающее в Windows, Mac OS X и GNU / Linux. Это с открытым исходным кодом и бесплатно скачать.

inkscape.org

30. Gravit Designer

Gravit Designer – это полнофункциональное приложение для векторного графического дизайна, которое работает на всех платформах. Бесплатная версия поставляется с 500 МБ облачного хранилища.

designer.io

Crello

Бесплатные инструменты макета

31. Shotsnapp

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

shotsnapp.com

32. Screely

Screely позволяет мгновенно превратить снимок экрана в макет без использования шаблонов Sketch или Photoshop. Просто загрузите свое изображение, и приложение сделает все остальное.

screely.com

33. Screenpeek

Скопируйте и вставьте URL в Screenpeek, и он создаст привлекательный макет всего за 10 секунд. Это приложение, созданное Хансом Пейджелом и Филиппом Куном, бесплатно только для макетов iPhone.

screenpeek.io

34. MockupsJar

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

mockupsjar.com

35. Макет Мира

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

mockupworld.co

Shotsnapp

Бесплатные инструменты для редактирования изображений

36. Удалить фон

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

remove.bg

37. Социальные размеры

Social Sizes, созданная Питером Ассенторпом, предоставляет дизайнерам наилучшие размеры для использования в социальных сетях для изображений и видео. Шаблоны для Sketch, Adobe XD и Photoshop, все включены и загружаются бесплатно.

socialsizes.io

38. фотор

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

fotor.com

39. Пиксельный редактор X

Pixel Editor имеет большой послужной список в качестве основного, но надежного фоторедактора, который можно бесплатно использовать в браузере. Они только что выпустили новую версию, Pixel Editor X, которая быстрее, имеет больше инструментов для редактирования и интегрируется с Dropbox.

pixlr.com/x

Fotor

Бесплатные инструменты для скриншотов

40. Коллабшот

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

collabshot.com

41. Giphy Capture

Это бесплатное приложение для Mac позволяет легко захватывать части экрана и экспортировать их в файлы GIF или MP4. Захват GIF до 30 секунд всего за пару кликов.

giphy.com/apps/giphycapture

42. ScreenToGif

Это бесплатное приложение с открытым исходным кодом для Windows сочетает в себе экран, веб-камеру и диктофон с интегрированным редактором.

screentogif.com

43. ShareX

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

getsharex.com

44. Снаппи

Snappy – профессиональное приложение для создания и совместной работы над снимками для iPhone, iPad и Mac. (Версия для Windows “скоро”.)

snappy-app.com

45. Лайтшот

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

itunes.apple.com

Collabshot

Дизайн вдохновение

46. ​​Беханс

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

behance.net

47. Дриббл

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

dribbble.com

48. Хттпстер

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

httpster.net

49. Микроскопия вдохновения

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

microcopyinspirations.com

50. InspoFinds

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

inspofinds.com

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

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

О, Arngren.net. Детка, что ты делаешь?

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

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

Подробнее о:

• Что такое макет веб-сайта?
• 10 макетов веб-сайтов для вашего следующего дизайна
• 3 типа веб-сайтов и макеты, которые они используют

Давайте начнем.

Что такое макет веб-сайта?

Во-первых, важно понимать, что такое макет веб-сайта .

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

В целом, хороший макет веб-сайта обычно соответствует важному принципу: Делайте это просто, глупо (или KISS).

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

На что это похоже? Я рада, что вы спросили.

10 макетов сайта для вашего следующего дизайна

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

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

1.F-образная

F-образный макет веб-сайта невероятно распространен, он построен на основе исследования, проведенного Nielsen Norman Group, консалтинговой фирмой, занимающейся исследованиями UX, которая провела исследование с отслеживанием взгляда и обнаружила, что люди обычно читают блоки текста и ресурсов в F-образном образе .

Тепловая карта из исследования глаз Nielsen, показывающая некоторые общие результаты

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

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

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

2. Z-образная (или зигзагообразная)

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

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

Вот пример Z-образного веб-сайта с учетом этого.

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

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

3. Журнал

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

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

Если на вашем веб-сайте много контента — подумайте о блоге или публикации новостей — подумайте о макете в стиле журнала.

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

4. Фотография целиком (или избранное изображение)

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

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

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

5. Разделенный экран

Этот макет относится к экранам, которые разделены либо по горизонтали, либо по вертикали — или по обоим, как указано выше!

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

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

6. Карты

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

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

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

[ЗАГОЛОВОК: О боже. Почему?]

7. Асимметричный

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

Asymmetry отлично подходит для добавления напряжения и динамики в макет веб-сайта и может помочь дизайнерам привлечь внимание пользователей к одной конкретной части макета веб-сайта.

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

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

8. Одноколонный

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

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

Это популярный макет веб-сайта для минималистичных платформ блогов, таких как Tumblr и Medium, или платформ социальных сетей, таких как Instagram и Twitter, где сообщения автоматически сортируются по одному фактору: дате.

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

9. Рамки (или эскизы)

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

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

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

10. Фиксированная боковая панель (или фиксированная навигация)

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

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

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

3 типа сайтов и их макеты

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

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

1. SaaS
2. Редакция
3. Личный

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

Макеты SaaS

Веб-сайты для продуктов SaaS обычно имеют один макет: Z-образную форму.Это помогает привлечь внимание пользователя к призыву к действию на странице.

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

Evernote (Z-образная)

Mailchimp (Z-образная форма)

Hubspot (Z-образная)

Слабина (Z-образная)

Salesforce (Z-образная)

Редакционные макеты

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

The Verge (Журнал)

ПРОВОДНОЙ (Журнал)

LA Times (Журнал)

Макеты личных сайтов

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

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

Джеральдин ДеРуитер (Полное фото / Миниатюра)

Гэри Шэн (Полное фото / Миниатюра)

Тони Д’Орио (Полное фото / Изображение)

Ник Джонс (Сетка)

Выберите правильную планировку

Теперь мы хотим знать: какой ваш любимый макет веб-сайта и почему? Сообщите нам и приведите пример. Мы могли бы включить его в будущий пост о дизайне веб-сайтов.

Хотите узнать больше о дизайне веб-сайтов?

Оригинальные и инновационные веб-макеты — Smashing Magazine

Об авторе

Шавон изучал журналистику и медиа-исследования и специализировался на коммуникационном дизайне в Университете Родса в солнечной Южной Африке.Она интересуется… Больше о Шавон ↬

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

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

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

Дополнительная литература по SmashingMag:

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

Оригинальные веб-макеты

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

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

Гостиная Мне нравится этот макет, простой, но очень интересный визуально. Работы студии представлены в форме ромбов разных размеров, которые подходят друг другу. Центральный ромб — это табличка с именем, которая не слишком заметна и не отвлекает от работы. Когда вы наводите курсор на алмаз, он заполняется описанием работы. Этот одностраничный веб-сайт имеет оригинальный и чистый макет, которым легко пользоваться.

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

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

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

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

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

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

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

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

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

Neue Yorke Макет сетки для портфолио Дэви Рудольфа прост и минималистичен — довольно прост и естественен для пользователя. Каждая страница имеет только два цвета, уникальные для этой страницы. Когда вы нажимаете на один из его проектов, витрина имеет приоритет, а главная панель навигации исчезает.Что мне нравится в этом подходе к веб-сайту-портфолио, так это то, что, несмотря на его индивидуальность, личность не отвлекает от работы дизайнера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Contad Все здесь — CSS, HTML, JavaScript и SVG — анимируется при прокрутке. Это безумие! Яркие цвета вдохновляют, а дизайн состоит из замысловатых иллюстраций. Обратной стороной является то, что сайт разрабатывался только для настольных компьютеров с мышью и работает только в Chrome.

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

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

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

Друг дизайнера Не совсем то, что вы ожидали от веб-сайта дизайнера, верно? «Друг дизайнера» выглядит как HTML-код самого веб-сайта. Все, что вам нужно знать, находится прямо в коде, а теги действуют как заголовки. Коробка «Совет дня» — это замечательное устройство, которое направляет пользователя по веб-сайту.

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

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

В Арктику Макет Into the Arctic привлекает пользователей и включает их взаимодействие. Видео на заднем плане увлекает пользователя и иллюстрирует его причину. Стиль навигации другой — когда вы наводите на него курсор, она раскрывается с дополнительной информацией, как брошюра.Типографика также привлекательна, а цитаты особенно сильны. Дизайн сайта просто очень хорошо выполнен.

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

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

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

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

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

Заключение

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

(al) (il)

Что содержат общие веб-макеты? — Изучите веб-разработку

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

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

Даже сейчас, с новым акцентом на мобильный Интернет, почти все основные веб-страницы состоят из этих частей:

Заголовок

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

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

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

Вещи сбоку

1) Информация, дополняющая основное содержание; 2) информация, совместно используемая подмножеством страниц; 3) альтернативная система навигации. Фактически, все, что не является абсолютно необходимым для основного контента страницы.

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

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

Эти элементы встречаются довольно часто во всех форм-факторах, но их можно расположить по-разному.Вот несколько примеров ( 1 представляет верхний колонтитул, 2 нижний колонтитул; A основное содержимое; B1, B2 элементов сбоку):

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

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

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

Настоящее веселье начинается, когда вы начинаете смешивать их все вместе:

…

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

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

Рассмотрим еще несколько конкретных примеров с известных сайтов.

Одноколоночный макет

Приложение Invision .Типичный одноколоночный макет, в котором вся информация отображается линейно на одной странице.

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

Двухколонная компоновка.

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

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

Это ловушка

MICA . Это немного сложнее.Похоже на трехколоночную раскладку …

… но это не так. B1 и B2 плавают вокруг основного контента. Запомните слово «float» — оно станет сигналом, когда вы начнете изучать CSS.

Почему вы думаете, что это макет из трех столбцов? Поскольку изображение в правом верхнем углу имеет L-образную форму, потому что B1 выглядит как столбец, поддерживающий смещенное основное содержание, и потому что буквы «M» и «I» логотипа MICA создают вертикальную силовую линию.

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

Более сложная планировка

Парижская опера.

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

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

Как настроить и разработать страницу с макетом разделов