Популярные стили WEB-дизайна. Какой выбрать?
Обновлено: 10.01.2022
Не знаешь, как начать рисовать дизайн сайта? Выбери стиль, подходящий тематике проекта, изучи его основные требования и выстраивай весь контент согласно выбранному плану. Единство дизайна элементов позволит создать гармоничный результат, который наверняка понравится заказчику. Информацию о том, какие бывают стили web-дизайна и для каких проектов они подходят, смотри в данной статье.
Web-дизайн новый тип искусства по сравнению с архитектурой, рисунком, художественной графикой. Он не успел обрасти достаточно обширной теоретической базой для того, чтобы иметь список устоявшихся стилистических решений. Да и это невозможно в силу быстро меняющихся технологий и предпочтений пользователей. Однако, существует ряд популярных стилей web-дизайна, востребованных в настоящее время.
Содержание
- Минимализм
- Рисованный (эскизный) стиль
- Flat дизайн
- Гранж
- Organic & Natural
- Реализм (скевоморфизм)
- Красивая типографика
- Сочетание стилей
Один из самых популярных и в тоже время сложных стилей. Мало кто может его использовать в чистом виде, потому что слишком велик соблазн добавить больше элементов.
Как правило, минимализм это:
- Простые геометрические формы
- Простые цвета (черный, белый, серый) – не более трех на проект
- Однотонный фон.
- Минимум шрифтов – простая типографика.
- Отсутствие теней, градиентов или их незначительное присутствие.
- Понятный, функциональный UI.
Чтобы лучше понять принципы минимализма стоит обратиться к его первым приверженцам – представителям русского конструктивизма, японской школы дизайна, швейцарской школы дизайна.
Сайт натуральной косметики в минималистичном стиле
Минимализм подойдет для интернет-магазинов, сайтов с большим количеством динамически подгружаемого контента.
Скорость загрузки страниц оказывает большое влияние на конверсии сайта, поэтому минимализм так востребован сегодня.
«Программы становятся медленнее куда шустрее, чем компьютеры становятся быстрее» Закон Вирта, демонстрирующий проблему медленного роста быстродействия сайтов и программ по сравнению с аппаратным обеспечением.
Blog and form by Bogdan Nikitin
Такие сайты удобнее всего делать в Figma и использовать классические приемы формирования шрифтовой пары.
ЧИТАЙТЕ ТАКЖЕ |
Figma – первое знакомство Узнайте о самом популярном бесплатном сервисе проектирования интерфейсов, в котором можно создавать дизайн сайтов в стиле минимализм и не только! |
Визуальный, лучше всех приковывающий внимание пользователей. Изобилует авторской графикой и изображениями, объединенными общим сценарием. Отлично подходит для проектов с неординарным контентом, портфолио творческих групп, детских студий, сайтов с инфографикой и тех, кто не боится привлечь внимание пользователей оригинальным способом.
Графика может быть выполнена в виде рисунка от руки, переведенного потом в цифровой вид
Сайт фитнес клуба в рисованном стиле
векторных или 3d иллюстраций, что делает данный стиль очень похожим на Flat дизайн.
Website design / 3D & 2D Edition by Mike
Flat дизайнДанному стилю посвящен отдельный пост на моем блоге и вполне заслуженно. Именно Flat стал новатором, разрушившим господство градиентов и теней в web-дизайне. Если кратко, то ему характерны следующие черты:
- Двумерная графика.
- Интуитивно-понятный интерфейс
- Акцент на типографике
- Сочные, сочетающиеся цвета.
Впервые данный стиль был представлен Apple в 2012 году для операционной системы Ios и стал фаворитом среди дизайнеров, уставших от реализма. С тех пор он претерпел много изменений, но остается популярным и по сей день.
Business Manegment by Stien
Flat отлично подходит для проектов, где на первом плане стоит удобство интерфейса и систематизация информации. Различные бизнес-приложения, социальные сети, чаты, сайты для сбора информации, банковский сектор и многое другое.
Данный стиль удобен тем, что в нем используется векторная графика. Это дает ряд преимуществ:
- Быстрота загрузки такого приложения или сайта (векторная графика весит меньше, чем качественный растр)
- Экономия на разработке, так как не нужно сохранять изображения под расширения разных устройств. Достаточно сохранить их в формате SVG.
«Keep it simple, stupid» — принцип проектирования KISS, утверждает, что большинство систем работают лучше всего, если они остаются простыми, а не усложняются. Был впервые сформулирован специалистами ВМС США, но получил свое распространение в анимационных фильмах и дизайне.
ЧИТАЙТЕ ТАКЖЕ |
Особенности FLAT — дизайна Узнайте еще больше информации о flat дизайне. Цветовая палитра, примеры рисования иконок, еще больше примеров сайтов и визуальных образов. |
Получил свое развитие благодаря одноименному направлению в музыке. Стиль бунтарства, молодости, урбанизации. Ему характерно неподчинение общепринятым законам, тяжеловесность. Среди характерных черт web-дизайна выполненного в данном стиле, следующие:
- Природные цвета – черный, коричневый, песчаный.
- Фон в виде потертых текстур, кирпичной кладки, каменной стены, бумаги
- Искусственная состаренность
- Шрифты причудливые, гротескные (не переусердствуйте в их выборе! Лучше остановиться на замысловатых вариантах для заголовков, а для остального текста выбрать читаемые рубленные шрифты)
Такой стиль не подойдет для проектов с серьезным контентом, а вот для салонов красоты, пекарен, ресторанов, барбер шопов и других будет уместен.
Мокап сайта пиццерии в стиле гранж by Too Gallus
Organic & NaturalДанный стиль предполагает использование природной тематики в дизайне:
- Природные текстуры – трава, дерево, земля
- Природные фоны и цвета – зеленый, голубой, коричневый и другие.
- Изображения флоры и фауны.
- Шрифты природной направленности.
Тематика сайтов разнообразна. Туристические сайты, сайты ресторанов, интернет-магазинов натуральной продукции и косметики, сайты о здоровье, сайты социальных проектов, жилых комплексов и многое другое.
Natural Creation by Higher Studio
Nature Landing Page Concept by Grapp
ЧИТАЙТЕ ТАКЖЕ |
Как создать дизайн успешного сайта Узнайте какие принципы в дизайне сайтов будут всегда актуальны и востребованы. Секреты, которые |
Главная задача данного стиля — реалистичное изображение объектов с помощью света и тени. Он зародился в начале двухтысячных годов и стал понятным для большинства пользователей, относившихся с опаской ко всем интернет-проектам.
Мы все еще помним изобилие бликов, текстур и теней в дизайне сайтов того времени. Это было господство Photoshop. Умение работать с параметрами наложения слоев гарантировало 50% успеха в профессии веб-дизайнера.
Значки в стиле скевоморфизм by Seunghyun
Интерес к данному стилю угас по нескольким причинам:
- Сейчас доступ к интернету есть практически у каждого. Мы выбираем те сайты, которые быстро отвечают на поставленные вопросы и нет времени рассматривать отдельные элементы.
- На маленьких экранах схематичные изображения стали лучше смотреться чем реалистичные.
Скевоморфизм потерял лидирующие позиции со времен появления плоского дизайна, но не исчез совсем. Он трансформировался.
Неоморфизм – это концепция, которая предполагает выделение элементов дизайна без четких контуров с помощью теней. Насколько приживется данная идея – покажет время.
Neumorphic UI Kit
Material Design объединил в себе плоский дизайн и элементы реализма. Блоки информации представлены в виде листов бумаги, отбрасывающих тени.
Gallery UI by Pierluigi Giglio
Cards UI by Pierluigi Giglio
В чистом виде реализм подходит для дизайна посадочных страниц, сайтов-визиток, встречается в мобильных приложениях.
Красивая типографикаОсновой данного стиля является креативная типографика. Она проявляется не только в крупных надписях, о которых говорилось ранее, но и в сочетании различных шрифтов с изображениями. Шрифты должны сочетаться и соотвествовать характеру и тематике сайта. Информационный текст оформляется в виде колонок.
Reform by Isaac Powel
Это один из самых сложных стилей в веб-дизайн, который подходит для оформления новостных сайтов, блогов.
Сочетание стилейРассмотренные стили редко встречаются в чистом виде. Чаще всего присутствует их сочетание. Если вы решили выбрать для своего проекта несколько концепций, то нужно учесть, что не все они совместимы друг с другом.
Например, гранж вряд ли будет хорошо смотреться с элементами реализма. А рисованный стиль с Organic&Natiral.
Гармоничного визуального эффекта можно добиться в таких сочетаниях как:
- Рисованный стиль и плоский дизайн;
- Красивая типографика и минимализм;
- Гранж и красивая типографика.
Вот несколько примеров таких сайтов.
Wemakefab.school by Alexander Laguta – Красивая типографика + Минимализм
Zendesk Support Ticketing System UI/UX Design for Web App by Extej Design Agency– Рисованный стиль + Реализм
Подписывайтесь на обновления блога «Дизайн в жизни» по e-mail или социальных сетях и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна |
Современный дизайн и стиль сайта. Консультации по изготовлению сайтов
Современный дизайн сайта — понятие это достаточно широкое, и весь смысл работы дизайнера заключается том чтобы визуальными средствами подать информацию так, чтобы привлечь посетителя на страницу сайта и сделать его, из простого гостя постоянным пользователем.
Обратившись в дизайн студию АВАНЗЕТ вы всегда можете получить консультации по изготовлению сайтов и рекомендации по выбору современного дизайна и стиля сайта. Бесплатная консультация поможет выбрать цветовую оптимальную гамму сайта в зависимости от направления бизнеса, определиться со стратегией развития ресурса, для быстрого достижении ключевых коммерческих целей.
Основные требования современного web дизайна
Качество веб-дизайна всегда имеет первостепенное значение, так как от него во многом зависит успех сайта. Команда дизайнеров веб-студии АВАНЗЕТ не просто следит за современными трендами, мы постоянно их тестируем и применяем самые успешные для того, чтобы создавать такие решения, которые помогают нашим клиентам конвертировать посетителей в постоянных клиентов. И в любом проекте соблюдаем эти правила:
- интуитивно понятное графическое оформление сайта
- разработка интуитивно понятной навигации (визуальной структуры)
- формирование простой логики сайта
- комфорт взаимодействия пользователя с сайтом
Стиль современного сайта должен соответствовать актуальным тенденциям в развитии веб дизайна. Постоянно развивающиеся технологии и все увеличивающееся количество мобильных пользователей диктуют соблюдение определенных правил для современных сайтов.
Как взаимосвязаны дизайн и стиль сайта?
Понятия стиля и дизайна крепко связаны между собой. Однако, нельзя их объединять полностью. Дизайн коммерческих сайтов является тем, что обеспечивает их функциональность. Это тот фундамент, который позволяет пользователям на всевозможных уровнях комфортно взаимодействовать с сайтом.
Дизайн сайта должен выполнять следующие функции:
- подсказать, где Вы находитесь в данный момент;
- проинструктировать Вас о возможных действиях на сайте;
- помочь Вам делать то, что доступно делать на данном ресурсе.
Стиль – только один из аспектов дизайна. Однако, он передает его фирменные отличия. Если сравнивать сайт с многоэтажной постройкой, получится, что дизайн отвечает за то, сколько в доме будет окон. А вот какие занавески повесить – за это отвечает стиль.
Интересные публикации по теме современного веб дизайна
- 7 тенденций веб-дизайна: создание интерактивного сайта
- Разработка web сайта в стиле Flat дизайна
- Выбор цвета для дизайна сайта. ПРИМЕРЫ: 50 великолепных цветовых схем
- 10 базовых принципов эффективного дизайна веб-сайта
- Функциональный дизайн в дизайне бизнес сайта
Разновидности стилей дизайна по тематике
Веб дизайн сайтов и их стиль тесно взаимосвязаны с текстовым наполнением. То есть, от содержания контента, его тематической направленности, во многом будет зависеть и стиль. Среди тематических разновидностей стилей можно выделить:
- классический стиль;
- футуристический;
- ретро;
- винтаж;
- web 2.0 и другие.
Классификация стилей дизайна по цвету и графике
В зависимости от цвета, доминирующего в оформлении сайта, стили дизайна подразделяют на:
- светлый;
- темный;
- цветной;
- разноцветный стиль.
Есть также практика разделения стилей сайтов, исходя из графической насыщенности страниц ресурса. Такие стили называются:
- чистый – минимум графики;
- стандартный – средняя насыщенность;
- художественный – высокая графическая насыщенность.
Полезная информация по теме дизайн сайтов
- Дизайн сайтов и интернет магазинов — портфолио веб-студии АВАНЗЕТ
- Дизайн веб сайтов — рекомендации Яндекса для коммерческих сайтов
- Дизайн сайта и эмоции пользователей
- Дизайн сайта — важный элемент имиджа компании
- Лаконичный дизайн сайта — основа юзабилити
Вам нужен красивый современный дизайн сайта и выбираете исполнителя?
Тогда не теряйте время, напишите нам прямо сейчас!
Оставить заявкуКлассификация стилей по назначению дизайна
При разработке сайтов применяется еще одна классификация стилей веб дизайна сайтов, которая родилась от соотношения с иными видами дизайна.
В такой классификации можно выделить следующие стили:- СТИЛЬ МИНИМАЛИЗМА. Для него характерно практически полное отсутствие графики, наличие текстовой навигации и всего одного-двух шрифтов.
- ИНФОРМАЦИОННЫЙ ВЕБ-ДИЗАЙН. Наряду с минимализмом в графике, этот стиль выделяется легкостью и простотой в подаче информации.
- БИЗНЕС СТИЛЬ, получивший широкое распространение за рубежом, бизнес стиль приобрел стандартные отличия: фиксированную ширину, расположение элементов, использование баннерной рекламы. Все это преследует единую цель – продавать товары и не отвлекать пользователя от этого дела.
- ПРОМО СТИЛЬ — это стиль для сайтов рекламной направленности. Здесь визуальная графика доминирует над контентом.
- ЭКСЦЕНТРИЧНЫЙ СТИЛЬ дизайна применяется тогда, когда необходимо создать нечто абсолютно необычное — что по функциональности, что по внешнему виду. Этот стиль характерен размещением большого количества фото и видео, а также имеет обширную палитру эффектов.
Бесплатная консультация по изготовлению сайта — отличный вариант всех, кто еще не определился и затрудняется с выбором лучего решения для своего бизнеса. Наши эксперты проконсультируют по всем аспектам веб-разработки, это поможет избежать лишних вложений и сэкономит ваше время.
Дизайн сайта в стиле Веб-2
Относительно новый стиль дизайна сайтов, примеры которому все чаще встречаются в Сети, это стиль Веб-2. Стиль развился параллельно с развитием технологий RSS-потоков, CMS и Ajax, а также появлением тегов-ключевиков. Благодаря Веб-2 появилась возможность моментального добавления/обновления контента без перезагрузки сайта.
Особенности Веб-2:
- Простота: все элементы используются только для дела, ничего лишнего
- Простая навигация
- Использование градиентов
- Крупный текст
- Использование шапки
- Колонки
- Выделение нужных областей цветом
- Минимальные 3D эффекты
Веб-студия «АВАНЗЕТ» в своей практике применяет самые современные решения веб-дизайна. Мы подберем подходящую цветовую гамму или используем ваш корпоративный стиль при разработке сайта. Если Вы не знаете, какой именно стиль и дизайн нужен Вашему сайту, обращайтесь за консультацией и наши специалисты предложат Вам лучшие варианты!
09.05.2020
← Поделиться с друзьями !
7 популярных стилей в Веб дизайне
Тренды в веб дизайне постоянно меняются, появляются новые стили, а какие-то изживают себя и уходят на второй план. В этом потоке очень сложно уследить за всеми новинками, поэтому в этой статье я сделаю обзор на популярные стили сайтов в веб дизайне, которые на мой взгляд долгое время будут актуальны. Помимо этого, я разберу пару трендовых стилей на 2020 год и отдам дань уважения старым стилям, с которых все начиналось.
Начнем, пожалуй, с «ретро» стиля, с которого начинался современный веб дизайн и далее по нарастающей дойдем до современных трендов.
Содержание статьи:
Скевоморфизм — «ретро» стиль в веб дизайне
Скевоморфизм — это стиль в дизайне, концепция которого заключается в том, чтобы повторять реалистичные формы и вид объектов из настоящей жизни (свет, тени, блики, текстуры) в виртуальном пространстве.
Зародился он в начале 2000-х годов и стал довольно популярным направлением. Как раз в это время в повседневную жизнь людей начали стремительно входить персональные компьютеры и смартфоны. Одними из первых подобную концепцию стали использовать представители компании Apple в своих продуктах.
На картинке видно, как приложение калькулятора повторяет точные формы настоящего калькулятора из реальной жизни. За счет добавления теней и света, кнопки кажутся выпуклыми и довольно реалистичными. То же самое и с иконками: блики, зеркальное отражение и тени. Все как в настоящем мире.
Я прекрасно помню времена середины 2000-х, когда в тренде были сайты со «стеклянными» меню и кнопками. Это был прям «писк моды» и все дизайнеры старались делать подобные макеты.
Это конечно не совсем «чистокровный» скевоморфизм, но отголоски его присутствуют.
Почему раньше стиль скевоморфизма был популярен в дизайне
Во-первых, потому что раньше, пользователи были совсем не опытными в цифровом пространстве. Чтобы пользователь понял, что перед ним находится кнопка, которую можно нажать, нужно было делать кнопку, похожую на настоящую. И так во всем.
Во-вторых, в то время это было чем-то «сверхъестественным» и крутым. То есть для новых пользователей скевоморфные интерфейсы казались красивыми и впечатляющими. Можно было часами любоваться на все эти иконки и кнопки с бликами и тенюшками. Красота интерфейса была одним из главных критериев для пользователей того времени.
Почему скевоморфизм устарел
Потому что со временем веб дизайн пошел по пути упрощения сущностей. Пользователи становились все более опытными в виртуальном мире и уже не было необходимости подражать реалистичным объектам.
Все стали привыкать к элементам интерфейса, таким как кнопки, иконки, формы и так далее. Достаточно было нарисовать прямоугольник с текстом, и все пользователи понимали, что перед ними кнопка.
Изменились и потребности пользователей. Нужны были простые интерфейсы, которые быстро загружались. Недостатком скевоморфизма было то, что он создавал много визуального шума в виде теней, бликов и текстур. Это стало отвлекать пользователей и усложняло восприятие интерфейса.
Так зародился новый стиль в веб дизайне.
Metro — «подземный» стиль в веб дизайне
Поскольку появился спрос на упрощённые интерфейсы, появилось и предложение — стиль Metro. Зачинщиком стала компания Microsoft, которая решила «освежить» свои платформы новым дизайном. Изначально этот стиль разрабатывался с целью обновления популярных ОС Windows. Если мне не изменяет память, то первым примерила на себя обновку ОС Windows 8.
Философия стиля Metro была заимствована из информационных интерфейсов транспортных путей, суть которых базируется на высокой читаемости, легком восприятии информации и отсутствии отвлекающих факторов. Собственно, и названия стиля намекает нам на «подземку».
Главные принципы Metro:
- Фокусировка пользователя на контенте
- Интерфейс — это проводник пользователя к нужным функциям
- Красота не должна быть в ущерб удобству
Сами Microsoft назвали стиль Metro «Our new design language», что в переводе означает «наш новый язык дизайна». Под все это дело был разработан даже уникальный шрифт — Segoe. Уклон делался на удобство чтения даже при маленьких размерах.
Cо временем стиль Metro мигрировал из операционной системы виндоус в веб пространство, где нашел своих последователей.
К слову сказать, именно Metro стал «тренд стартером» популярных на сегодня стилей минимализма, Material и Flat design.
Flat design — это кардинальная противоположность стилю скевоморфизма. Зародился он примерно в 2012 году и главной его особенностью стало создание «плоских» элементов дизайна без бликов, теней и текстур.
В отличии от Metro, стиль Flat стали сразу применять в веб пространстве и поскольку Metro в то время был уже довольно популярным направлением, то и Flat сразу стал востребованным стилем. К слову сказать, он и по сей день пользуется популярностью в пользовательских интерфейсах.
Всю эту движуху подхватила компания Google и выкатила свой стиль под названием Material.
Material — популярный стиль в веб дизайне
Material — это нечто среднее между скевоморфизмом и стилем Flat. В нем используются плоские элементы интерфейса, но некоторые из них могут отбрасывать тень. То есть единственное, что осталось от скевоморфизма — это тень, все остальное — плоский дизайн.
Material применяется во всех продуктах Google и на мобильных платформах Android. Помимо этого его охотно используют и на сторонних проектах.
Material обрел свою популярность за счет своих гайдлайнов. На сегодняшний день material design guidelines является самой удобной и понятной дизайн-документацией. Даже Apple не может похвастаться такими подробными дизайн-системами.
Вообще, сейчас уже очень тонкая грань между современными стилями в виде Metro, Flat и Material, потому что везде используется плоский дизайн. Поэтому пришли к объединяющему стилю под названием минимализм.
Минимализм в дизайне сайтов — больше чем просто стиль
Минимализм — это стиль в веб дизайне, который помогает создавать простые, лаконичные и эффективные интерфейсы, где внимание пользователей акцентируется исключительно на важной информации.
Тренд минимализма пришел к нам совсем недавно и за короткое время он стал действительно культовым направлением. Если раньше было модно делать пестрые дизайны с огромным количеством различной графики, то сейчас стараются все упрощать.
По различным исследованиям, пользователи в интернете отдают предпочтения минималистичным дизайнам с понятной структурой, потому что они выглядят более стильно и на них легче ориентироваться и находить нужную информацию.
Это подкрепляется и тем фактом, что человеку свойственно абстрагироваться от беспорядка в пользу простоты и структурности. Философия минимализма именно про это.
Должен сказать, что минимализм актуален не только в диджитал среде, но и в обычной жизни. Многие крупные компании отдают предпочтения минимализму в своих продуктах и ярким примером является компания Apple. Их логотип, стиль и девайсы по-настоящему минималистичны, но в то же время они элегантны и эстетичны.
Если раньше Apple были сторонниками скевоморфизма, то сейчас все изменилось.
Суть минимализма в веб дизайне заключается в том, чтобы создавать простые и понятные интерфейсы без лишних элементов, используя простые геометрические формы.
Как сказал французский писатель Антуан де Сент-Экзюпери: «Совершенство достигнуто не тогда, когда нечего добавить, а когда нечего убрать».
Что характерно для минимализма в веб дизайне:
- Свободное пространство
- Минимальное количество используемых цветов и шрифтов
- Лаконичные и понятные формы
- Минимальное количество визуального шума (градиенты, тени, графика и т.д.)
Преимущества минималистичного дизайна
1. Акцент на главном. Минималистичный дизайн помогает сфокусировать внимание посетителей на действительно важной информации, тем самым увеличивая конверсию сайта.
2. Отсутствие беспорядка. Убирая лишнее, дизайн обретает понятную и простую структуру, которая легко воспринимается посетителями.
3. Быстрая загрузка сайта. Поскольку минимализм исключает все лишнее, ресурс получается «легким» и поэтому быстро грузится в интернете. Таким образом, повышается конверсия, потому что посетители остаются на сайте.
4. Простота разработки. Минимальный набор элементов и простые, лаконичные формы — это залог быстрой и дешевой разработки.
Многие считают, что работать в стиле минимализма — это просто, но на самом деле это далеко не так. Нужно иметь хорошее чувство вкуса и композиции, чтобы из минимального количества элементов, создавать простые, понятные и удобные интерфейсы.
Лично для меня, минимализм является не просто стилем, а отдельным правилом веб дизайна, на ряду с правилами композиции, компоновки, типографики, цветом и другими.
Брутализм в веб дизайне — стиль со своими странностями
Вообще брутализм существует давно, но мейнстримом он стал совсем недавно. Если взять любой сайт начала 2000-х годов, то в какой-то мере можно сказать, что большинство из них было выполнено в стиле брутализма.
Брутализм — это стиль бунтарства, который идет в разрез с уже устоявшимися принципами UX UI дизайна.
Основные принципы:
- Вызывающий дизайн
- Отсутствие логики построения композиции
- Большие шрифты и нечитабельные надписи
- Отсутствие смысла повествования
- Безбашенные дизайн-решения
- Отсутствие выравниваний и визуальной привлекательности
Да да, все это и есть брутализм. Конечно, всерьез его воспринимать нельзя, потому что если вы сделаете сайт или приложения для больших масс в подобном стиле, то никто не будет им пользоваться. Просто потому, что там полностью будут отсутствовать элементы удобства.
Этот стиль используют дизайнеры просто ради потехи и выражения своего «креатива». Ведь иногда бывает скучно делать однотипные проекты. Поэтому душа просит самовыражения и ухода от границ и рамок.
В веб дизайн этот стиль пришел из архитектуры. Там это целое направление, которое зародилось в 50-х годах прошлого века, сразу после Второй Мировой Войны. Брутализм отличался простотой, примитивностью форм и материалов. Оно и понятно, потому что после войны не было сил, времени и ресурсов на архитектурные изыски.
Неоморфизм в веб дизайне — все новое хорошо забытое старое
Здесь даже лучше сказать, что неоморфизм — это стиль UX UI дизайна, а не веб дизайна, потому что в основном его применяют в мобильных приложениях.
Читайте также: UX UI дизайн — что это и чем отличается от веб дизайна
Неоморфизм — это трендовый стиль 2020 года, но по большому счету, это старый добрый скевоморфизм, только немного «осовременненый». Все те же выпуклые элементы дизайна, которые в какой-то степени повторяю объекты из реальной жизни.
Разница лишь в том, что при создании неоморфизма используют исключительно тени. Все выпуклости — это работа с тенями. Безусловно, неоморфизм визуально выглядит намного «чище», чем скевоморфизм, но принципы примерно одни и те же.
Неоморфизм не является каким-то прорывным и уникальным стилем, потому что еще в начале 70-х годов, итальянский дизайнер Марио Беллини изобрел физический инструмент с похожим «интерфейсом».
Как видите, очень даже похож на современный неоморфизм. Все эти стили появляются лишь от того, что некоторым дизайнерам становится скучно и они дают волю своему креативу.
Можно ли применять неоморфизм в реальных проектах? На мой взгляд нет, потому что у него есть один существенный недостаток — слабый контраст. Это противоречит принципу доступного дизайна и принципу контраста и иерархии.
Еще больше практической информации вы можете получить на курсе «Веб дизайн с нуля до PRO».
Заключение
В этой статье я рассказал вам про стили сайтов в веб дизайне, а именно про Скевоморфизм, Metro, Flat, Material, Минимализм, Брутализм и Неоморфизм. Надеюсь, данная статья была для вас полезна и интересна.
Автор: Георгий Тимофеев
🔥 Не забудьте скачать мою книгу
«от Курьера до Дизайнера интерфейсов»В ней я рассказываю свою историю, как мне удалось стать дизайнером с полного нуля и как бы я сегодня действовал, если бы начинал все с «чистого листа».
Стили в веб-дизайне — как дизайнеру найти собственный стиль
В дизайне, как и в других сферах, есть тенденция подражания более успешным специалистам. Кто-то копирует стиль у именитых дизайнеров, кто-то берет идеи у топовых веб-студий, однако, копирование и вдохновение чужими работами не всегда приводит к желанным результатам. Стать настоящим профессионалом и получать удовлетворение от своей работы можно только создавая что-то уникальное и выделяясь среди других собственным почерком. Особый стиль есть у музыкантов, художников и других творческих профессий. Веб-дизайнер также может найти свой стиль. Об этом мы и поговорим в нашей статье.
Как дизайнеру найти собственный стиль
Прежде чем дать ответ на этот вопрос, разберемся, что такое стиль с точки зрения дизайна.
Стиль — основное направление в оформлении сайта, которое прослеживается в большинстве элементов страницы.
- цветовую гамму;
- типографику;
- расположение элементов;
- стиль изображений и другого графического контента и прочее.
С помощью стиля мы можем сформировать общее впечатление от дизайна, создать нужное настроение у пользователя.
Под индивидуальным стилем дизайнера мы обычно понимаем художественное единство созданных ресурсов, позволяющее выделить характерные уникальные черты.
Почему это так важно — найти собственный стиль и создавать уникальный продукт? Рассмотрим несколько принципов, соблюдая которые можно найти собственный стиль и разрабатывать особенные проекты.
Принцип 1. Уникальность
Несмотря на то, что каждый дизайнер решает задачи по-своему и процесс создания дизайна никогда не повторяется в точности, есть вероятность, что мы подражаем другим специалистам или копируем элементы (а порой и даже весь макет) сайта. Подробнее о копировании в дизайне и его влиянии на окончательную версию дизайна мы писали в этой статье. Чтобы не скатиться в откровенный плагиат, дизайнер должен разработать уникальную концепцию, которая как раз будет толчком к пониманию индивидуального стиля. Соблюдая принцип уникальности и придумывая отдельные элементы, а впоследствии и всю страницу, мы разрабатываем собственные особенные представления, которые будут отличать работы от других проектов.
Принцип 2. Техника
Если веб-дизайнер плохо владеет программным обеспечением, не знает теорию дизайна и не обладает достаточным опытом, он не сможет делать свою работу на высоком уровне и, как следствие, создать собственное видение оформления сайтов. Плохо проработанные детали, недоработанный макет — некачественная работа не может быть ориентиром для других и основой создания своего стиля.
Постоянное обучение — лучший способ узнавать и открывать для себя новые направления в творчестве. Чем больше дизайнер учится и совершенствует свою технику работы, тем быстрее он станет свободным в творчестве и найдет свой стиль.
Принцип 3. Понимание
Вряд ли у дизайнера получится создать идеальный проект, если у него нет понимания основных задач клиента и сути его бизнеса. Общение с заказчиками, анализ информации, поиск лучших решений проблем клиента — все это также входит в создание уникального дизайна и процесс поиска стиля. Разработка дизайна без изучения основных потребностей клиента делает работу дизайнера неактуальной и бесполезной.
Как использовать принцип понимания на практике? Собственный стиль можно создать с помощью общения со своими клиентами и исследования бизнес-процессов. Опыт решения проблем заказчика как правило применяется в дальнейших работах и влияет на общее понимание дизайна. Например, есть различные способы повышения конверсии сайта с помощью дизайна, применив которые единожды, можно внедрять их в другие работы и, тем самым, создавать собственный подход к решению проблем с продажами.
Принцип 4. Баланс
Поиск собственного стиля часто ассоциируется с креативностью, созданием оригинальных и необычных решений. Однако, не стоит забывать об основах цвета, правилах использования типографики, пользовательском опыте и других аспектах дизайна, позволяющих пользователям сайта легче воспринимать информацию, ориентироваться на ресурсе и совершать целевые действия.
Баланс между креативностью и юзабилити, оригинальными решениями и удобством пользователей должен быть одним из принципов поиска стиля. Слишком необычный дизайн может оттолкнуть пользователя и понизить уровень конверсии ресурса, что делает работу дизайнера бесполезной с практической точки зрения. Поэтому при поиске собственного стиля следует учитывать юзабилити и потребности посетителей страницы. В нашем блоге мы писали о значении баланса между креативностью и юзабилити.
Принцип 5. Тренды и направления в веб-дизайне
При поиске собственного стиля можно опираться не только на создание чего-то абсолютно уникального, но и на уже существующие направления в дизайне. Не случайно дизайнеры используют в своих работах элементы различных направлений: это помогает оставаться в тренде, улучшает восприятие пользователей и пользовательский опыт.
Рассмотрим различные стили в веб-дизайне, которые можно брать дизайнеру на вооружение.
Стили и направления в веб-дизайне
Единой классификации по стилям в веб-дизайне не существует, однако, можно выделить отдельные черты, по которым можно провести классификацию. Из десятков вариантов мы выделили 7 наиболее часто встречающихся стилей и привели реальные примеры сайтов.
Классика
Как в архитектуре, литературе и живописи, в веб-дизайне тоже есть классика. В классическом стиле дизайнеры чаще всего оформляют сайты, рассчитанные на большую аудиторию: информационные порталы, крупные коммерческие организации. К особенностям классики можно отнести:- лаконичные формы;
- симметричная, колоночная структуру;
- неброские цвета, обычно светлые оттенки;
- строгую стилистику;
- привычное расположение основных элементов: логотип в верхнем углу, горизонтальное меню;
- сдержанные шрифты;
- отсутствие ярких иллюстраций и так далее.
В таком стиле можно оформить сайт любой компании, это наиболее привычное пользователям направление, предназначено для восприятия информации без привлечения внимания на другие элементы.
Журнальный (газетный)
Данный стиль пришел в веб-дизайн из журнальной и газетной верстки, сам сайт напоминает одну большую газету. Дизайн в этом направлении используют различные электронные издания, новостные порталы. К основным особенностям стиля можно отнести:
- блочное расположение элементов;
- в основном черно-белая цветовая гамма, без лишних цветовых акцентов;
- основной контент — текстовый;
- шрифты подбираются для чтения, нет витиеватых, рисованных шрифтов.
Самый яркий пример — информационный сайт The Times:
Ретро (винтаж)
Сайт, выполненный в данном стиле, обычно содержит на страницах элементы, которые использовались в прошлом или оформлены с помощью графики прошлых годов. Характерные особенности:
- допускаются вензеля, витиеватые узоры, рамки;
- много декоративных элементов;
- цветовая гамма обычно пастельная, черно-белая, приглушенных тонов;
- используются тематические изображения, иллюстрации в винтажном стиле;
- стилизованная типографика (например, готические шрифты).
Гранж
Этот стиль раньше использовался в оформлении сайтов рок-групп и других музыкальных исполнителей. Используется как противоположность классике и другим строгим стилям. Включает в себя:
- «потертые» текстуры;
- стилизованные изображения;
- декоративные шрифты;
- приглушенные цвета.
Рисованный
Это направление любят дизайнеры, которые хорошо разбираются в иллюстрации. Дизайн состоит из уникальных «нарисованных» элементов. Характерные особенности:
- уникальная графика;
- большой разброс цветовой гаммы: могут быть как яркие оттенки, так и пастельные тона, в зависимости от тематики;
- часто присутствуют декоративные шрифты.
Именно это направление проще всего использовать, если дизайнер хочет выделиться и создать авторский стиль.
Минимализм
Главная особенность направления — простота. На сайте нет лишних элементов, много белого пространства, информация краткая и лаконичная. Наиболее важные элементы выделяются типографикой или с помощью композиции. Особенности стиля:
- простые качественные изображения;
- строгая типографика;
- много пустого пространства;
- как правило, 2-3 используемых цвета.
Flat
«Плоский» дизайн — направление, в основе которого лежит двумерная графика. Этот стиль как будто упрощает цифровое пространство, важную роль играет типографика и цветовые решения. Характеристики стиля:
- минимум фотографий;
- контрастная цветовая гамма;
- двумерные изображения;
- значительную роль играет типографика, текстовый контент;
- как правило однотонный фон.
Промо-дизайн
Направление, которое представляет собой яркую презентацию какого-либо продукта, обычно рекламного характера. В основе сайта лежит рекламные материалы, описывающие преимущества товара, призывающие к целевым действиям. Особенности направления:
- качественные и крупные фото продукта;
- контрастные тона, выделяющиеся элементы призыва к действию;
- использование пространства;
- крупная типографика.
Изучая стили, тренды веб-дизайна, мы понемногу увеличиваем свой визуальный опыт и формируем представление о собственном стиле. Комбинируя различные стили, просматривая работы профессиональных дизайнеров, создавая новые цветовые гаммы и графику, дизайнер развивается, растет как профессионал. Поиск авторского стиля — одна из ступеней, которую проходили все успешные специалисты.
Еще 5 идей для поиска стиля
Чтобы найти оригинальные решения, иногда необходимо наблюдать за чужими работами и перенимать опыт. В каких сферах дизайна можно поискать вдохновение для создания «авторского почерка»?
1. Типографика
Значимость типографики доказана неоднократно. С помощью шрифтов можно не только передавать текстовую информацию, но и создавать стильные решения. Есть веб-дизайнеры, которые работают исключительно с типографикой и с помощью текста создают минималистичный и оригинальный дизайн.
2. Навигация
Вертикальный скроллинг привычен пользователям, однако, некоторым дизайнерам удается менять шаблонную навигацию и применять креативные решения. Например, навигацию 360 градусов:
Изменения навигации также может стать фишкой веб-дизайнера и частью его авторского стиля.
3. Композиция
Расположение элементов на странице тоже можно сделать необычным. Нестандартная композиция является отличительной чертой многих дизайнеров, и вы также можете использовать ее как особенность авторских проектов.
4. Иллюстрации
Оригинальные иллюстрации способны сделать проект по-настоящему уникальным. Дизайнеры-иллюстраторы особенно ценятся в веб-дизайне, так как создают неповторимые работы.
5. Цветовая гамма
Выбранные оттенки цветов также могут стать авторской задумкой и отличать проект от остальных. Поиск нестандартных сочетаний, комбинирование пастельных тонов и ярких акцентов, использование контрастных изображений — все это поможет найти изюминку в своих работах и создать неповторимый авторский стиль.
Часто дизайнеры не придают особого значения поиску собственного стиля и создают проекты, копируя чужие работы или используя базовые принципы одного из существующих направлений. Однако, такой подход не позволяет дизайнеру самовыражаться в творчестве и становиться лучшим в своей сфере. С другой стороны, дизайнеры слишком привязываются к созданной концепции — используют одни и те же цвета, делают все проекты с винтажными узорами и прочее. Поэтому важно постоянно находиться в поиске, даже если собственное представление об идеальном проекте сформировалось.
Студия дизайна IDBI использует различные направления в своих работах. В нашем портфолио можно ознакомиться с проектами как в классическом стиле, так и с использованием иллюстраций и других авторских элементов. В своих работах мы делаем упор на юзабилити и повышение уровня конверсии ресурса.
ТОП-40+ Лучших Сайтов с Красивым Дизайном – Plerdy
Обустраивая свой дом, вы заботитесь о том, чтобы он был чистым и опрятным, чтобы все детали были на своих местах, добавляете свои любимые картины, выбираете уютную мебель и т.д. Ведь без всего этого вы получите просто голые и холодные стены, которые сложно назвать домом. То же самое происходит и с вашим сайтом. Если забрать с домашней страницы полезный контент, красивые цветовые решения и картинки, оставить без контактов и полезностей, то остается обычная страница.
Конечно, эстетика не является единственным условием для конвертации пользователей, но она выступает в роли мостика, который привлекает клиента и должен сделать все, чтобы у него не было желания отступать. Помните, современный креативный дизайн в первую очередь простой и интуитивно понятный. Люди не выберут вас, если вы не дадите им стимул сделать подобный выбор.
Почему макет вашего сайта должен быть современным и креативным?
Шаблон, определяющий структуру сайта, называют макетом. Благодаря ему вы получаете четкие пути для навигации по веб-ресурсу и можете понять, где разместить наиболее важные элементы. Ваши пользователи останутся на сайте, если вы выберете хороший макет, где легко найти важную информацию на интуитивном уровне. Если информация на домашней странице размещена неправильно, дизайн слишком яркий или тусклый, идет долгая загрузка страницы, то пользователи точно покинут этот веб-ресурс.
Поведение пользователей на сайтах и их макеты очень тесно связаны. Лучший современный дизайн способен привлечь внимание к вашей домашней странице и повысить конвертацию. Поэтому лучше потратить больше времени на разработку идеального макета, чем впоследствие терять пользователей, которые не готовы жертвовать даже лишней минуты.
Хорошо продуманная домашняя страница – это лицо вашей компании. Именно дизайн главной страницы приветствует аудиторию и демонстрирует все преимущества. Только креативный макет сайта способен заинтересовать пользователей и дать им стимул изучить весь сайт.
Увы, не всегда так просто найти вдохновение и создавать что-то новое, интересное и креативное. В таком случае веб-дизайнеру стоит поискать идеи на самых популярных и эффективных сайтах, которые дизайнеры со всего мира используют в качестве вдохновения. Ведь лучший учитель – это пример, а мы предлагаем вам список из 46 лучших сайтов для поиска идей.
Обзор 37 ресурсов вдохновения веб-дизайнера UI сайтов
AWWWARDS
Веб-сайт AWWWARDS создан для того, чтобы признавать талант и усилия лучших мировых веб-дизайнеров, разработчиков и агентств. Он сосредоточен именно на красивом пользовательском интерфейсе, выделяя лучших веб-дизайнеров. Кроме того за заслуги авторы работ получают интересные награды. Новости и блог постоянно обновляются, и любому дизайнеру точно будет интересно следить за этим веб-ресурсом.
Sitesee
Ищите целую галерею современных сайтов, тогда вам сюда. Sitesee уже на домашней странице предлагает вам увидеть подборку красивенных пользовательских интерфейсов на примере лучших сайтов со всего мира. Кроме того здесь есть удобный фильтр, который позволит вам сразу выделить тематику, которая вас заинтересовала.
Dribbble
Dribbble – это площадка, где каждый может поделиться своим опытом, узнавать мнение других профессионалов о своих работах и черпать вдохновение. Здесь собрана огромная коллекция качественных работ веб-дизайнеров, фотографов и других авторов. Попасть на сайт не очень просто, для этого нужен код доступа от дизайнеров, которые уже представлены, что позволяет фильтровать и оставлять только лучшее. Уже на домашней странице пользователи видят лучшие и интересные примеры для вдохновения.
A List Apart
A List Apart – это веб-ресурс, где тщательно анализируется и исследуется дизайн, разработка и контент сайтов, уделяя особое место инновационным методам. Если вы в поисках списка лучших тем для разработки, то вам не сюда. Но здесь вы найдете современный взгляд на разные моменты дизайна в нашем цифровом мире от ведущих мировых дизайнеров и разработчиков. Интересные новости постоянно обновляются, и этот онлайн-журнал стоит добавить в закладки.
Mobbin
Создатель Mobbin, как и многие дизайнеры, искал вдохновения среди тысяч бездарных шаблонов. Именно поэтому он решил создать веб-сайт, где собрано более 170 приложений и 1000 шаблонов из приложений разных стран. Здесь вы сможете не только сразу увидеть подборку лучших решений, но и подобрать интересные идеи для воплощения собственных целей.
Flickr
Flickr – это хостинг для различных видео и изображений, где дизайнеры могут найти практически все, что угодно. Многие дизайнеры пользовательского интерфейса используют этот ресурс для обмена и хранения снимков. При этом веб-ресурс продолжает развиваться. В блоге вы увидите последние интересные новости в мире дизайна, а эстетическая красота просто сама призывает подписаться на них.
Land-book
Land-book – это место, где вы можете найти множество советов и примеров лучших целевых страниц для дизайнеров, веб-разработчиков и тех, кто хочет сделать собственный стартап. Здесь собрано множество веб-сайтов, в блоге постоянно обновляются новости, поэтому вы точно найдете то, что вдохновляет именно вас.
SiteInspire
SiteInspire – это отличная платформа для веб-дизайнеров и разработчиков. Здесь вы найдете примеры лучшего пользовательского интерфейса, интерактивного дизайна и не только. Искать то, что вам нужно можно с помощью удобных фильтров, например, по стилю, типу, предмету. Все сайты тщательно подбираются, поэтому вы получаете только лучшие, но также можете предложить разработчикам веб-ресурсы, которые вы считаете достойными.
99designs’ Discover
Найти вдохновение для создания веб-дизайна можно именно здесь. Сайт 99designs ‘Discover собрал тысячи талантливых дизайнеров со всего мира и еще больше вдохновляющих дизайнов, поэтому это отличная платформа, как для новичков, так и для опытных дизайнеров и разработчиков. Кроме того здесь есть удобная функция поиска, которая упростит ваш путь поиска именно того, чего не хватает вам для воплощения дизайнерской идеи.
Ecomm.design
Найти вдохновение для реализации коммерческого проекта в сети теперь будет гораздо проще. Вас ждет проект Ecomm.design, который объединил в одном веб-ресурсе около 2500 тысяч лучших сайтов в данной области. Они разделены по платформе, категориям, трафику и технологиям. Как только вы попадаете на домашнюю страницу, сразу видите, куда двигаться дальше в поисках идей.
Behance
Если вы ищите пример отличного дизайна пользовательского интерфейса, то обязательно загляните на этот веб-сайт. Здесь собраны лучшие работы дизайнеров со всего мира, которые проходят очень тщательный отбор. Вдохновение могут найти не только веб-дизайнеры, но и стилисты, архитекторы, фотографы и все, кто интересуется дизайном в разных областях. Кроме того в их блоге можно найти много полезной информации.
Lapa
Проект Lapa Ninja был создан специально для дизайнеров, которые ищут вдохновение, только начинают свой путь или хотят повысить свои профессиональные навыки. Здесь проходит тщательный отбор контента, и на веб-сайт попадают только лучшие дизайны. Обратите внимание, что новости и каталог обновляются ежедневно, так что этот сайт стоит внести в свой список любимых веб-ресурсов.
Pttrns
Создатели Pttrns сумели собрать на своем веб-сайте просто отличную коллекцию шаблонов дизайна и лучших примеров пользовательского интерфейса. Здесь дизайнеры смогут легко найти любые необходимые элементы, выбирая среди двух основных блоков на панели управления – соответственно к устройству и другие категории.
One Page Love
One Page Love – это витрина самых красивых веб-сайтов, шаблонов и других веб-ресурсов. Здесь очень удобные разделы для вдохновения, сделаны по отдельным тематикам, блог, в котором ежедневно обновляются новости и много полезностей. Помимо самого вдохновения, вы можете найти на этом веб-сайте большое количество шаблонов для собственной работы.
CollectUI
CollectUI является отдельной платформой, где можно найти вдохновение для создания лучшего пользовательского интерфейса. Они работают на базе Dribbble, используя исключительно их снимки, поэтому для комментирования и взаимосвязи, вам нужно будет перейти на этот веб-сайт. Хотя новости в блоге и коллекции обновляются ежедневно, и сайт имеет огромное количество собственных поклонников.
Creative Bloq
Creative Bloq – одна из лучших профессиональных платформ для UX-дизайнеров. Здесь вас ждет удачная смесь с ежедневных новостей, советов и примеров для вдохновения. Также сюда могут заглядывать художники 3D и VFX, иллюстраторы, веб-дизайнеры и все, кто считает себя причастным к творчеству. Благодаря этому блогу вы всегда будете в курсе всех последних тенденций и сможете легко реализовывать свои идеи.
Smashing Magazine
Smashing Magazine – это отличное место для UX-дизайнеров и тех, кто хочет расширить свои навыки. Здесь собраны интересные статьи, цифровые книги, расписание конференций, и даже вакансии для дизайнеров. Благодаря постоянному обновлению новостей, множеству работ и подборке лучших примеров для вдохновения вы сможете совершенствовать свои навыки проектирования и разработки, а также найти баланс между красотой и функциональностью.
Mockplus blog
Mockplus блог создан для того, чтобы максимально улучшить инструменты быстрого создания шаблонов для дизайнеров UX/UI, разработчиков разных веб-приложений, менеджеров и собственников онлайн-проектов. Над этим работает опытная команда специалистов в сфере программной разработки. Здесь есть много полезных новостей и инструментов для веб-дизайнеров, которые помогут превратить ваши идеи в полезные продукты.
Designer News
Designer News – это просто огромное сообщество людей, которые работают в сфере веб-дизайна и разработки или просто интересуются данной тематикой. Новости Дизайна открыли для многих дизайнеров отличную возможность поискать не только вдохновение, но и полезные советы, и критику от опытных коллег со всего мира. Можете быть уверены, что найдете здесь что-то интересное для себя.
UX Magazine
Если вы интересуетесь UX-дизайном, тогда блог UX Magazine именно для вас. Это отличная платформа, где всегда можно найти свежие новости о дизайне и тенденциях UX в современном мире. Кроме того у вас есть возможность подать здесь же заявку на работу. Многие дизайнеры уже давно знакомы с этим блогом, не поленитесь и вы, здесь есть, что почерпнуть.
Одна из самых известных и качественных платформ для работы с изображениями и видео – это Pinterest. Здесь огромное количество пользователей открывают для себя новые идеи, ищут вдохновение и развиваются в своем любимом деле, в их числе и веб-дизайнеры. Домашняя страница сразу показывает вам темы, которые будут интересны, но вы всегда можете добавлять или менять их. Также здесь есть возможность взаимодействовать с другими пользователями через комментарии и переписки.
UX Design Edge
Веб-сайт UX Design Edge является местом, где дизайнеры могут не только найти полезную информацию и прочитать все новости в мире цифровой разработки, но и записаться на курсы и отдельные консультации по UX-дизайну. Блог на сайте постоянно обновляется и может стать местом для поиска новостей и вдохновения, поэтому, если даже вас не интересует обучение, то стоит заглянуть сюда.
Medium
Этот веб-сайт является комплексной платформой, где вас ждет огромная галерея ресурсов по UX-дизайну и не только. На Medium новости обновляются несколько раз в день, поэтому у вас всегда найдется, что почитать в блоге. Все статьи связаны с веб-дизайном и новыми тенденциями в данном направлении.
User Experience Stack Exchange
На сайте User Experience Stack Exchange вы найдете целый сборник вопросов и ответов для тех, кого интересует UX –дизайн. Обратите внимание, что пользователи со всего мира могут задать здесь свои вопросы и получить квалифицированный ответ от экспертов в данной области, также отвечать могут любые другие пользователи. Есть награды за лучшие интересные ответы. В любом случае дизайнеры смогут найти здесь множество полезного, а чего нет – просто спросить.
Good Web Design
На этом веб-сайте собраны все лучшие и хорошо продуманные целевые страницы. Целью сотрудников стало помочь дизайнерам, разработчикам и маркетологам со всего мира извлекать полезные уроки из лучших примеров. Сайты и новости постоянно обновляются, поэтому вы можете смело добавлять этот веб-ресурс себе в закладки в качестве источника вдохновения.
Best Website Gallery
На этом веб-сайте собраны наиболее красивые и интересные сайты, начиная с 2008 года. Его создателем является дизайнер и разработчик Девид, который сделал этот ресурс в качестве коллекции лучших визуальных примеров. Галерея этого веб-сайта может стать источником вдохновения для новых проектов или просто заставить вас понять, что делает работу дизайнера уникальной.
Hover States
Hover States является одним из лучших отраслевых блогов, где вы найдете ярчайшие примеры альтернативного цифрового дизайна. Создатели отмечают, что здесь вы сможете найти и собрать большое количество полезной информации, а также поделится собственными работами. Новости постоянно обновляются, и количество дизайнеров растет, поэтому не стоит упускать этот веб-сайт из виду.
CSS Nectar
Лозунг этого веб-ресурса – мы собираем нектар веб-дизайна. Уже по нему можно понять, что здесь собраны примеры лучших веб-дизайнов. Ежедневно в галерею добавляются новые интересные работы, которые вы можете оценивать, а также просто вдохновляться. Галерея включает работы дизайнеров со всего мира.
ABDUZEEDO
Abduzeedo – это сообщество специалистов, которые пишут новости о дизайне, фотографие и пользовательском опыте. Изначально это был личный блог, но сегодня он собрал профессионалов со всей планеты, которые работают независимо друг от друга и выдают огромное количество полезной информации. Это однозначно один из самых популярных блогов о дизайне.
Interaction Design Foundation
Веб-сайт IDF – это целая организация интерактивного дизайна. Они в своем лозунге говорят о том, что стремятся дать возможность всем получить высококачественное дизайнерское образование, уровня лучших университетов. У них собрана просто огромная коллекция UX и интерактивного дизайна. Для тех, кто хочет учиться и совершенствоваться этот веб-ресурс может стать просто незаменимым.
The Great Discontent
TGD – это не только онлайн-журнал, но и печатное издание, в котором вы найдете много интересных новостей и бесед с лучшими современными художниками, фотографами, дизайнерами и не только. Все внимание здесь сосредоточено на вдохновении, креативности и понимании искусства. Помимо блога, они также снимают фильмы и делают множество вдохновляющих вещей. Этот веб-сайт однозначно стоит вашего времени.
UI Movement
UI Movement – это отдельный ресурс, который сосредоточен на лучшем пользовательском интерфейсе. Его разработчики отбирают лучшие работы в области UI дизайна. У них более 25 тысяч подписчиков и эти цифры постоянно растут благодаря множеству полезной информации и новостям. Если вы интересуетесь дизайном пользовательского интерфейса, то вам сюда. Здесь вы найдете вдохновение и подсказки для собственных работ.
Template Monster
Да, это магазин, и мало, кто думает о таком месте, как о способе найти творческое вдохновение. Тем не менее, этот веб-ресурс демонстрирует действительно хорошее строение и акцентирует на лучших практиках. В качестве вдохновения используйте темы, просматривая структуру контента и шаблоны дизайна. Поверьте, воплощая собственные проекты, вам обязательно пригодится подобный опыт.
Designspiration
Designspiration постоянно развивается, обновляет блог и дополняет галерею сайтов. Он чем-то напоминает Pinterest, так как предлагает просто массу информации, созданную большим сообществом. Здесь нет какой-то одной конкретной темы для вдохновения дизайнеров, но вы получаете фильтры, чтобы во всем этом разнообразии определить то, что нужно вам сейчас. Этот веб-сайт дизайнерам и разработчикам точно стоит добавлять в закладки.
Calltoidea
Calltoidea – это хорошая платформа для дизайнеров, которая позволяет специалистам в данной области найти вдохновение, которое они ищут в эту минуту. Проект запущен еще в 2011 году и уже успел завоевать множество поклонников. Специалисты тщательно отбирают каждое изображение, чтобы предложить вам что-то уникальное. Они поддерживают концепцию простоты в интернете. Информация обновляется очень часто, поэтому вы всегда найдете здесь что-то новое и интересное.
Pentagram
Pentagram – это одна из самых крупных мировых дизайнерских студий. В их команде лучшие специалисты со всего мира, поэтому у них всегда есть чему поучиться. На сайте вы можете не просто ознакомиться с их лучшими работами, но и зайти в блог, где постоянно появляется актуальная информация из мира веб-дизайна.
ResponsiveDesign.is
ResponsiveDesign.is – это отличный источник вдохновения для дизайна веб-сайтов, где вы можете также проверить, как выглядит любой сайт на разных устройствах, включая планшеты и смартфоны. В блоге вы найдете много полезных рекомендаций по дизайну и разработке, а также стратегическому контенту. Кроме того у них есть свой подкаст. Хотя примеров здесь не большое количество, сравнивая с другими ресурсами из нашего списка, но они достойны вашего внимания.
Обзор 9 ресурсов вдохновения веб-дизайнера программ для смартфонов
Snapseed
Snapseed – интересное мобильное приложение для iOS и Android, с помощью которого можно редактировать фото. Если вы любите делать снимки на телефон, то это приложение точно будет вам по вкусу, ведь в нем много особенностей и оно достаточно простое, интуитивно понятное. Минималистический дизайн также привлекает внимание.
Lifesum
Казалось бы, что Lifesum просто очередное мобильное приложение о здоровом образе жизни, но оно очень красиво оформлено. Такими должны быть подобные приложения. Здесь красиво использован градиент цветов на экране. Есть несколько простых и понятных страниц с красочным фоном, который очень сбалансирован и не мешает доступу к информации. Приложение доступно для iOS и Android.
Headspace
Мобильное приложение Headspace разработано для того, чтобы помогать людям медитировать. С помощью этого занятия можно уменьшить стресс, расслабится, сосредоточится и не только. Благодаря красивому дизайну и полезностям, это приложение очень ценится во всем мире. Дизайн пользовательского интерфейса очень привлекательный, легкий и приятный. Приложение можно скачать для iOS и Android.
Lola Travel
Lola Travel точно может стать примером лучшего дизайна для мобильного приложения. Здесь вас ждут не только отличные функции, но и простой и изысканный дизайн. Изображения и графика очень дружелюбны и просто воспринимаются. Типография подобрана практически идеально и все вписывается в разные экраны устройств. Пока приложение доступно только для iOS.
Qapital
Отличное бесплатное приложения для контроля финансовых расходов и доходов Qapital. Оно попало в наш список благодаря интересному и оригинальному дизайну, который может вдохновить на создание лучшим мобильных приложений. На сегодня оно бесплатное и доступно, как для iOS, так и для Android. Многие пользователи уже оценили его за интересные функции, а дизайнеры обязательно оценят пользовательский интерфейс.
HotelTonight
С помощью мобильного приложения HotelTonight вы сможете быстро и легко забронировать себе отель, даже в последнюю минуту. В нашем списке оно благодаря изысканному дизайну, особенно, когда речь заходит об их темной цветовой гамме (фиолетовый и черный просто попадают в самое сердце). Продукт продает и очень успешен, а его дизайн отыгрывает в этом не последнюю роль, поэтому обратите на него внимание. Приложение доступно для iOS и Android.
Day One Journal
Day One Journal – это платформа для ведения дневника. Это мобильное приложение для iOS и Android существует уже несколько лет, но постоянно развивается и становится более полезным и умным. UX-дизайн здесь на высоте. Пользователь может сохранить на экране местоположение, учитывать скорость передвижения. Можно даже сохранять песню, которую слушали в этот момент. Подобные веб-ресурсы могут стать отличным примером для вдохновения дизайнеров.
Verse
Это мобильное приложение для совершения платежей. Оно просто шикарное благодаря своему пользовательскому интерфейсу. Здесь вас ждут большие и жирные цифры на экране, простота, чистота и понятность. Для подобных приложений такое использование монотонных цветов и отлично продуманной типографии – просто находка. Обратите на него внимание, оно доступно, как для iOS, так и для Android.
Keezy
Keezy – это мобильное приложение для iOS, которое поможет вам немного развлечься с друзьями или детьми. Это своеобразная музыкальная игра, пользовательский интерфейс в которой до безобразия простой. Эта простота и работает на приложение, ведь вы не отвлекаетесь на массу ненужных элементов на экране, а просто играете и веселитесь. Дизайнерам стоит обратить на него внимание и делать больше подобных интерфейсов.
Выводы
Мы живем в цифровой эпохе, когда без уникального фирменного веб-сайта сложно обойтись. Именно дизайн сайта может стать лицом компании, привлекающим клиентов. Для этого дизайнеры постоянно учатся и исследуют пользовательский опыт, чтобы предложить вам только лучшие решения. Увы, не всегда достаточно только знаний, иногда веб-дизайнерам, разработчикам и маркетологам нужно немного вдохновения, и мы надеемся, что с помощью нашего списка они теперь легко смогут найти его.
Сайты, которые вошли в наш список помогут вам начать работу над воплощением новых идей, учитывая современные тенденции. Все они разные, поэтому каждый сможет подобрать то, что ему необходимо.
Кроме того мы предложили список из десяти мобильных приложений с лучшим пользовательским интерфейсом, которые вы также можете использовать, как пример для вдохновения. Ведь придумать не просто полезное, но цельное и красивое приложение для небольших экранов не так уж просто. Помните, что важно не гонятся за оригинальностью, а предложить пользователю простое и удобное решение, которое будет доступно для скачивания на iOS и Android.
Twitter LinkedIn Facebook Адрес электронной почты
- Статья
- Чтение занимает 3 мин
В современном интерфейсе SharePoint можно с легкостью менять внешний вид и функции сайтов в соответствии с фирменным стилем вашей компании или организации. Вы можете настраивать логотип, цвета и навигацию без написания единой строки кода. Символику можно применять на уровне сайта, к группе сайтов или ко всем сайтам в организации.
Примечание
Фирменная символика сайта SharePoint не изменит общий внешний вид службы Microsoft 365. Дополнительные сведения о фирменной символике в Microsoft 365 см. в статье Настройка темы Microsoft 365 для организации.
Фирменный стиль сайтов в классическом интерфейсе
В классической SharePoint есть набор стандартных тем, для которых может потребоваться значительное количество настроек, чтобы они соответствовали фирменной символике вашей организации. Кроме того, они не отличаются высокой адаптивностью, поэтому интерфейс на разных устройствах будет несогласованным. Для большинства элементов фирменной символики сайтов требуется использовать пользовательские эталонные страницы или альтернативные конфигурации CSS. Эталонные страницы обеспечивают высокий уровень гибкости, но они могут создавать проблемы. Например, при каждом изменении в SharePoint те или иные модификации эталонной страницы могут переставать работать или не отвечать ожиданиям. SharePoint игнорирует эти модификации, если только не используется режим классического интерфейса, так как они несовместимы с современным пользовательским интерфейсом. Во избежание этого используйте только рекомендуемые современные подходы к созданию фирменного стиля сайтов SharePoint.
Фирменный стиль современного сайта
SharePoint включает обновленный набор стандартных тем, которые отличаются адаптивностью и отлично смотрятся на любом устройстве. С помощью тем сайтов вы можете настраивать логотип и цвета сайта в вашем фирменном стиле. Шаблоны сайтов предоставляют определенные макеты и другие функции для вашего сайта. Дополнительную фирменную символику можно реализовать с помощью пользовательских тем или шаблонов сайтов, не беспокоясь о SharePoint обновления. Пользовательские темы позволяют создавать дополнительные цветовые схемы, помимо стандартных. Пользовательские шаблоны сайтов позволяют управлять темой сайта и другими настройками, такими как навигация по сайту, приложения по умолчанию и другие параметры. Настраиваемые темы или шаблоны сайтов можно применять к новому сайту при его создании или применении к существующему сайту или группе сайтов.
Фирменный стиль центральных сайтов
Применяя фирменный стиль к центральному сайту SharePoint, вы можете настроить его так, чтобы фирменная символика применялась ко всем сайтам, связанным с ним. К ним относится любая тема сайта или шаблон сайта, используемый на центральном сайте. Это позволяет применять общие средства навигации и фирменный стиль к набору сайтов, а также использовать контрастный цвет для выделения важных элементов.
Примечание
Настраиваемые темы и логотипы в SharePoint не будут автоматически применяться к сайтам групп, подключенным к группе, которые связаны с центром, к которой применена пользовательская тема. Для сайтов групп, подключенных к группе, необходимо вручную применить пользовательскую тему или логотип.
Классический интерфейс и современный интерфейс
Ниже представлена сводка различий между фирменным стилем сайта в классическом интерфейсе и фирменным стилем в современном интерфейсе SharePoint.
Классический интерфейс | Современный интерфейс |
---|---|
Неадаптивные готовые темы, которые можно настраивать | Адаптивные темы, которые отлично смотрятся на любом устройстве и могут быть настроены в соответствии с вашим фирменным стилем |
Использование пользовательских эталонных страниц и CSS, которые игнорируются в современном интерфейсе | Используйте SharePoint Framework для добавления верхних и нижних колонтитулов. Шаблоны сайтов и параметры клиента предлагают некоторые настраиваемые параметры |
Подготовка
Прежде чем применять фирменный стиль к классическим сайтам в SharePoint, рассмотрите перечисленные ниже вопросы.
Нужен ли вам согласованный фирменный стиль на всех сайтах или у каждого подразделения, отдела или группы в организации есть собственный стиль?
Следует составить список всех текущих сайтов, используемых ими шаблонов, изменений, внесенных в эталонные страницы или CSS, и решить, какие из этих модификаций требуется оставить. Вы можете запустить сканер «современного» пользовательского интерфейса SharePoint, который выполнит углубленный анализ всех сайтов в организации и создаст отчеты с подробными сведениями о сайтах, в том числе о несовместимых эталонных страницах или альтернативных параметрах CSS. SharePoint по-другому обрабатывает фирменный стиль для классических шаблонов сайтов, таких как сайт публикации. Вам потребуется исправить все возникшие проблемы с пользовательскими темами.
Какие области нужно настроить (логотип, цвета, шрифты, верхний и нижний колонтитулы, навигацию)?
Кто в вашей организации может применить фирменный стиль к сайту? Вам потребуется убедиться, что у этих пользователей есть разрешения дизайнера сайта (или более высокий уровень разрешений), чтобы внести эти изменения.
В приведенных ниже ресурсах представлены дополнительные сведения о том, как использовать современный интерфейс SharePoint для применения фирменного стиля к сайту.
Фирменный стиль в SharePoint: новая норма
Изменение внешнего вида сайта SharePoint
Настройка тем SharePoint
Модернизация фирменного стиля сайта
Модернизация классических сайтов SharePoint
Схема JSON
Генератор тем
Основы Squarespace: использование стилей сайта
Пре-с. Новичок в Squarespace? Вы можете подписаться на бесплатную пробную версию здесь ! О, и я также сделал вам небольшую скидку, используйте код PAIGE10 для 10% от вашего первого года. (Да, это партнерская ссылка!)
Окей! Продолжая с того места, где мы остановились на основах Squarespace: что такое блоки? и Основы Squarespace: страницы и параметры навигации , пришло время погрузиться в настройку стилей для вашего сайта!
Есть два способа внести изменения в стили вашего сайта. Один находится на панели дизайна вашего сайта, а другой — с помощью значка карандаша или редактора стилей в каждом разделе страницы, которую вы создаете.
Когда я впервые начал использовать Squarespace для создания веб-сайтов, я тратил кучу времени на дизайн страницы, добавляя все свои фрагменты, текстовые блоки и кнопки, а затем используя настройки панели дизайна, чтобы вносить любые изменения в их стиль. .
Когда я был доволен тем, как это выглядело, я переходил к дизайну своей второй страницы. Только для этой страницы я хотел, чтобы мой текст выглядел немного иначе, поэтому я быстро возвращался в панель дизайна и вносил эти изменения. Легко, не так ли?
Когда я думал, что все выглядит довольно хорошо, я возвращался на свою первую страницу, чтобы полюбоваться своей работой, и вдруг обнаруживал, что мои шрифты, кнопки и фоны стали не такими, какими я их оставил!
Оказывается, любые изменения, сделанные с помощью настроек панели дизайна, распространяются на весь сайт. ♀️
Итак, мораль этой истории? Не забудьте установить эти младенцы с самого начала. Затем вам нужно только внести изменения, используя значок карандаша или редактор стилей в каждом разделе вашей страницы.
Настройка стилей шрифтов для вашего сайта в SquarespaceГотовы к серьезному лайфхаку, который сэкономит вам часы потерянного времени (и, возможно, даже несколько слез) на каждом веб-сайте Squarespace, который вы когда-либо создавали?
Это позволяет просматривать все изменения, сделанные в режиме реального времени, и видеть, как все эти элементы будут сочетаться друг с другом. По сути, думайте об этом как о своей доске настроения для своего сайта!
Вот пример добавления одного шрифта каждого типа в первый раздел страницы вашей доски настроения:
Я записал названия каждого типа шрифта, а затем использовал панель инструментов текстового поля, чтобы назначить каждому тексту примера его правильное форматирование (например, «Дополнительно увеличенный заголовок» был установлен на очень большой формат заголовка).
Вы также можете добавить по одной кнопке каждого типа для оформления. Итак, в том же разделе используйте блок кнопок, чтобы вставить три кнопки.
Назовите их малыми, средними и большими (я добавил дополнительные eee’s , чтобы увеличить ширину кнопки для примера), а затем измените их настройки в редакторе блока кнопок, чтобы они соответствовали.
Теперь, когда у нас есть по одному шрифту и кнопке каждого типа, пришло время сделать их красивыми!
Давайте начнем со шрифтов, хорошо? Идите вперед и перейдите к дизайн > шрифты .
Вы заметите, что у Squarespace есть такие пакеты шрифтов, которые помогут вам выбрать шрифты, дополняющие друг друга.
Теперь вы определенно можете использовать их, если они подходят для вашего сайта, но если ничего не бросается в глаза, вы можете настроить любой пакет, щелкнув значок шестеренки .
К вашему сведению, к сожалению, это не изменит название пакета на ваше новое имя шрифта. Он будет добавлять слово «пользовательский» только для того, чтобы помочь вам отслеживать, к какому из них вы внесли изменения.
Теперь у вас есть возможность редактировать стили шрифтов заголовков и абзацев, а также шрифты, используемые для ваших кнопок. В нашем примере мы будем использовать заголовочные шрифты.
Вот краткое руководство по настройкам, которые вы можете изменить:
Семейство : фактический тип шрифта (например, Times New Roman)
Вес : насколько тонким или полужирным будет отображаться ваш шрифт.
Стиль: независимо от того, будет ли этот шрифт автоматически отображаться обычным или курсивом.
Высота строки: пробел между каждой строкой текста.
Обязательно оставьте это значение на уровне 1.0 или выше, иначе вещи начнут перекрываться!
Межбуквенный интервал: пробел между каждой буквой
Преобразование текста: независимо от того, будет ли ваш шрифт строчными, прописными и т. д.
Размер: Просто используйте эти ползунки, чтобы установить для каждого типа шрифта нужный размер!
Когда дело доходит до веса вашего шрифта, подумайте о том, чтобы сделать его более тонким. Вы всегда можете выделить любой фрагмент текста, который вы выбрали, используя панель инструментов текстового блока!
То же самое касается выбора стиля шрифта и « 9Преобразование текста 0004». Вы можете использовать текстовую панель инструментов, чтобы сделать шрифт курсивом, и кнопку блокировки заглавных букв на клавиатуре, чтобы все заглавные буквы выглядели, если вы того пожелаете!
Теперь, когда вы знакомы с параметрами оформления шрифтов, внесите любые изменения в шрифты абзацев и кнопок, вернувшись к настройкам пользовательского пакета шрифтов.
Настройка цветовых тем вашего сайта в SquarespaceХотите, чтобы посетители вашего сайта не перегружались и не прыгали с корабля? Разбейте свой контент на легко усваиваемые разделы!
Самый простой способ сделать это — использовать фон другого цвета для обозначения начала нового раздела.
Есть только одна проблема… этот красивый розовый шрифт, который вы выбрали для основного заголовка? Да, это не будет так хорошо отображаться на соответствующем розовом фоне!
Итак, вам нужно настроить несколько разных цветовых тем для использования на вашем сайте! По крайней мере, вам понадобится цветовая тема для использования в шапке/основной навигации вашего сайта (подробнее о том, почему это происходит позже в этом посте), одна для нижнего колонтитула, одна для использования на светлом или белом фоне и одна для темный или цветной фон.
Настройка цветовых тем заголовка сайта/основной навигацииПредполагая, что вы выполнили шаги из раздела Основы Squarespace: страницы и параметры навигации , у вас уже должно быть несколько страниц (и, следовательно, несколько ссылок), появляющихся в вашей основной навигации.
Далее нам нужно сделать несколько вещей, чтобы подготовить шапку нашего сайта к изменению цветовой темы!
На странице доски настроения нажмите редактировать , затем нажмите редактировать шапку сайта вверху. Редактор шапки сайта находится по адресу:
- .
Загрузите свой логотип
Добавление или удаление элементов из основной навигации (кнопки, корзина, социальные иконки и т. д.)
Изменить стиль и положение главной панели навигации
Выберите цветовую тему для основной навигации
Откройте цвета 9Панель 0009. Видите эту прозрачную настройку?
Это просто означает, что фон заголовка вашего сайта будет соответствовать первому разделу на вашей странице. Это может быть удобно для изменения внешнего вида вашего сайта от страницы к странице, но это не всегда хорошо сочетается с вашим логотипом. Вот почему для шапки вашего сайта нужна собственная цветовая тема!
Отключив две верхние настройки, прокрутите список вариантов цветовой темы вниз и найдите ту, которая больше нигде на вашем сайте не упоминается.
Что бы вы ни выбрали, это будет темой для редактирования на вашей панели дизайна для оформления цветовой темы заголовка!
Но пока не заходите в панель дизайна! Нам все еще нужно назначить другие ваши цветовые темы для их разделов примеров!
Настройка светлого фона, темного фона и цветовых тем нижнего колонтитулаНажмите изменить на странице вашего мудборда и щелкните значок карандаша или настройки стиля в разделе, где в настоящее время находятся ваши примеры шрифтов и кнопок.
Затем нажмите цветов и выберите тему белого цвета. Этот раздел будет тем, на который следует обратить внимание при внесении изменений в цветовую тему для использования с белым фоном.
Добавьте дополнительные пустые разделы на свою страницу для любых других цветовых тем, которые вы хотите начать настройку.
Скопируйте и вставьте все образцы шрифтов в новый текстовый блок в новом разделе, создайте три кнопки, а затем с помощью значка карандаша присвойте им цвет этому разделу.
Сделайте то же самое для нижнего колонтитула, нажав изменить нижний колонтитул > значок карандаша. На вкладке цветов отключите настройку цвета по умолчанию, чтобы открыть параметр цветовой темы. Выберите тему, которая еще не назначена.
Теперь, когда вы назначили цветовую тему для каждого из ваших примеров разделов и областей навигации верхнего и нижнего колонтитула, пришло время получить стиль!
Для начала перейдите на дизайн > цвета , , а затем щелкните значок карандаша рядом с цветовой темой, которую вы хотите изменить. Установите цвет фона для этой темы, а затем приступайте к стилизации остальных!
Если у вас уже есть установленные цветовые коды для вашего бренда (например, те цветовые коды html, которые выглядят примерно так: #FAAF99), тогда скопируйте и вставьте их прямо в цветовую панель каждого элемента.
Все еще экспериментируете с цветами и атмосферой вашего бренда?
Не беспокойтесь, Squarespace вас прикроет! Просто перемещайте курсор внутри цветовой панели каждого элемента, пока не найдете оттенок, который вам нравится!
О, и меньше определенно больше , когда дело доходит до цветных шрифтов. Есть много других способов добавить красок на ваш сайт!
Что касается остальных настроек цвета в каждой теме, у вас есть буквально бесконечные возможности.
Но прежде чем вы начнете слишком радоваться цветам, вот что нужно иметь в виду…
Предположим, вы редактируете заголовки своего сайта. Вам действительно нужно отредактировать только те фрагменты этой темы, которые будут отображаться в шапке вашего сайта!
Пс. отсутствуют параметры для редактирования определенного элемента? Вероятно, это потому, что вы еще не добавили этот элемент на свой сайт!
После того, как вы закончите редактирование всех своих цветовых тем, они готовы к использованию в любом месте вашего сайта!
Просто добавьте пустой раздел на свою страницу и с помощью значка карандаша выберите, какие из новых пользовательских широких цветовых тем вашего сайта будут использоваться в этом разделе!
О, и еще кое-что, прежде чем вы уйдете!
КнопкиВы уже установили шрифты кнопок в разделе дизайн > шрифты и цвета кнопок в разделе дизайн > цвета . Остается только стиль самой кнопки! Итак, голова под дизайн > кнопки . Здесь вы можете редактировать:
независимо от того, сплошные ли ваши кнопки или просто контур
независимо от того, имеют ли ваши кнопки квадратную, округлую или форму пилюли
сколько отступов (иначе пробелов) между текстом вашей кнопки и краями вашей кнопки
Впервые в Squarespace? Вы можете подписаться на бесплатную пробную версию здесь ! О, и я также сделал вам небольшую скидку, используйте код PAIGE10 для 10% от вашего первого года. (Да, это партнерская ссылка!)
Хотите узнать больше об основах?
Основы Squarespace: что такое блоки?
Основы Squarespace: страницы и параметры навигации
Основы Squarespace: подключение домена и запуск сайта
Основы Squarespace: ведение блога
Основы Squarespace: интернет-магазин электронной коммерции
50 примеров веб-сайтов Squarespace, созданных студентами курса Square Secrets
Как начать создавать сайт на Squarespace в 2020 году
Термины Squarespace объясняются простым английским языком, который вы можете понять
5 шагов, чтобы стиль и атмосфера вашего сайта понравились вашему идеальному клиенту
Это самое простое, что вы можете сделать, чтобы оптимизировать свой сайт для SEO
10 различных стилей веб-сайтов, которые будут соответствовать типу вашего бизнеса
Точно так же, как мы позволяем себе одеваться в стильные наряды, веб-сайтам тоже нужен стиль.
Существуют различные типы стилей веб-сайтов, которые предприятия используют для привлечения клиентов и достижения определенной цели.
Со статических веб-сайтов, которые служат исключительно для передачи информации, на более гибкие веб-сайты электронной коммерции, к которым можно…
…доступ через смартфон.
От внешнего вида вашей домашней страницы до страницы контактов ваш сайт должен быть хорошо сформулирован, чтобы улучшить взаимодействие с пользователем.
И мы даже не начали упоминать о важности таких факторов, как карты сайта SEO, согласованность ключевых слов и теги alt изображений.
Мы понимаем, что управление собственным бизнесом требует большой страсти и преданности делу.
Возможно, вы наняли лучшее агентство интернет-маркетинга, чтобы помочь вам разработать идеальный маркетинговый план для привлечения большего числа клиентов.
Но, возможно, вы упустили одну основную вещь. Стили сайта!
В этой статье мы стремимся рассказать владельцам бизнеса о различных стилях веб-сайтов, которые могут подойти для их бизнеса и повысить продажи.
Вы можете подумать: «Зачем мне знать стили сайта?»
Ваш веб-сайт — это всего лишь пара изображений, привлекательная копия и страница с контактной информацией, и она прекрасно работает, верно?
Если это то, о чем вы подумали, то вы ошиблись еще больше. Вы можете упустить потенциал, который может дать вам новый стиль веб-сайта.
На изображении ниже представлено дерево сервисов, которое мы предпочитаем использовать при подключении клиентов.
Это помогает им понять, какая инфраструктура им нужна для развития бизнеса в Интернете.
Позвольте нам Увеличьте свой доход…✅ Увеличьте доход с помощью маркетинговой стратегии «сделано для вас»
✅ Индивидуальная маркетинговая стратегия, подкрепленная данными и результатами
контрактИ, не заблуждайтесь, создание стиля веб-сайта находится в центре этого.
Это ваш счастливый день, потому что мы не показываем это клиентам, если они не зарегистрируются у нас 😉
Бонусный контент — загляните в наш блог, чтобы узнать об основных элементах создания веб-сайтов, которые должен иметь каждый бизнес.
Независимо от того, начинаете ли вы новый бизнес или модернизируете старый бренд, вы не можете отрицать, что ваш веб-сайт необходим.
Веб-сайты сделали возможными транзакции электронной торговли одним нажатием кнопки.
Наша команда имеет опыт создания веб-сайтов с хорошим дизайном в зависимости от типа бизнеса, который они обслуживают. И это, вероятно, то, с чего вы должны начать в любом случае.
Итак, зачем вообще нужен веб-сайт?Недавние исследования показывают, что около 88% потребителей ищут продукт или бизнес в Интернете, прежде чем принять решение о покупке.
Это говорит о том, почему владельцы бизнеса выделяют достаточно ресурсов для создания своих веб-сайтов. И стили веб-сайтов находятся в центре этого.
Не секрет, что потребительские предпочтения смещаются от обычных магазинов к интернет-магазинам.
Мы живем в мире, где мобильные телефоны, ноутбуки и планшеты могут выполнять задачи намного эффективнее, чем когда-либо ожидалось.
Эта растущая тенденция вынуждает владельцев бизнеса иметь сильное присутствие в Интернете, где проживает большая часть их целевой аудитории.
Некоторые предприятия даже решили полностью перейти на цифровые технологии, отказавшись от своих физических магазинов и продавая только через Интернет.
Имея это в виду, подумайте о своем корпоративном веб-сайте как о онлайн-демонстрационном зале, где можно продемонстрировать свои продукты и рассказать об их характеристиках.
Штаб-квартира находится не в торговом центре, а в виде онлайн-сайта.
Куда ваш потенциальный покупатель может прийти, чтобы найти товар, прочитать отзывы и даже совершить покупку.
Все одним щелчком мыши и не выходя из дома.
Но почему дизайн сайта так важен?Простой поиск в Google «пиццерии рядом со мной» дает нам не менее 185 миллионов результатов веб-сайта примерно за секунду.
Все настраивается в зависимости от местоположения поиска и поведения пользователя в Интернете.
И даже на основе лучших стилей веб-сайтов, которые дадут пользователю лучший пользовательский опыт.
С ростом конкуренции просто иметь целевую страницу или статический веб-сайт недостаточно.
Не менее важно иметь привлекательные стили веб-сайта, которые учитывают все факторы и в сумме обеспечивают отличное взаимодействие с пользователем.
Хорошие стили веб-сайтов удерживают внимание пользователей, дольше удерживают их на вашем сайте и, в конечном счете, предоставляют им настолько замечательные впечатления, что они не только решают совершить покупку, но и возвращаются, чтобы сделать это снова и снова.
Это подводит нас к следующему разделу нашей статьи, где мы говорим о различных типах стилей веб-сайтов и их использовании в вашем бизнесе.
Какие существуют типы стилей веб-сайтов?Выбор между различными стилями веб-сайта — это не то решение, к которому следует относиться легкомысленно.
Предприятия тратят много времени и ресурсов на выбор наиболее подходящего стиля веб-сайта.
На основе таких вещей, как тип их бизнеса и профиль их клиентов.
Прежде чем выбрать «более необычные» стили, вы должны сначала решить, какой макет лучше всего подходит вам и посетителям вашего сайта.
Имея в виду, что ваш макет формирует основу стиля вашего веб-сайта и общего пользовательского опыта.
Давайте рассмотрим две основные формы макетов, когда речь идет о стилях веб-сайтов.
Статический макет страницыМы создали десятки стилей статического веб-сайта для владельцев бизнеса, которым нужен простой бизнес-сайт.
Дизайн от одной целевой страницы до 100 страниц.
Эта форма макета веб-сайта обеспечивает фиксированную ширину содержимого веб-сайта и не может быть изменена в зависимости от различных веб-браузеров или устройств.
Это означает, что опыт, который пользователь получает на настольном компьютере, будет таким же, как и на мобильном телефоне.
Это самая простая форма макета веб-сайта, которая использовалась для создания первых веб-сайтов до того, как использование мобильных устройств стало массовым.
Эти сайты обычно создаются для простых целей, таких как объявление или обмен информацией о пользователях.
Хотя мы больше не рекомендуем этот дизайн-макет, он имеет дополнительное преимущество.
Из-за природы этого статического макета веб-сайта он чрезвычайно легок в коде, поэтому он загружается быстрее, чем другие формы стилей веб-сайта.
Если вы читали какие-либо наши статьи о поисковой оптимизации, то знаете, что быстрое время загрузки — это то, что нравится поисковым системам.
Но если сравнивать быстрое время загрузки страницы с пользовательским интерфейсом, это определенно отходит на второй план.
При выборе стиля веб-сайта вашей конечной целью всегда должно быть максимально положительное впечатление от сайта.
Адаптивный макет веб-сайтаЗа последние несколько лет мы наблюдаем оцифровку почти всех отраслей.
А с ростом адаптации веб-технологий возможности безграничны.
Это экспоненциально расширило способы ведения бизнеса сегодня брендами.
Чтобы привлечь пользователей и обеспечить простой процесс транзакций в Интернете, предприятия начали внедрять более надежные стили и макеты веб-сайтов.
Один из таких макетов — адаптивный.
Динамичный по своей природе, этот тип стиля веб-сайта может легко адаптироваться к размеру браузера или устройства зрителя и передавать содержимое веб-сайта в соответствии с его размерами.
Существует примерно три устройства, на которых пользователь потребляет контент в любое время: настольный компьютер, мобильный телефон и планшет.
Каждый имеет свои размеры и размер.
Благодаря этому разработчики веб-сайтов начали создавать адаптивные макеты, которые могут адаптироваться к различным устройствам. Иметь этот стиль веб-сайта не составляет труда.
Особенно с блуждающими алгоритмами поисковых систем, которые хотят показывать в результатах поиска только те компании, у которых есть отзывчивый веб-сайт.
Это обеспечивает гораздо лучший пользовательский интерфейс.
Наиболее полезные стили веб-сайтов для увеличения числа посещений веб-сайтовТеперь, когда мы объяснили два наиболее важных основных макета, когда мы думаем о стилях веб-сайта.
Давайте перейдем к изменениям, которые вы можете внести в общий вид стиля вашего веб-сайта.
Мы выбрали семь лучших стилей веб-сайтов за все время, которые повысят вашу деловую привлекательность в Интернете.
И поверьте нам, когда мы говорим, что у нас за плечами опыт работы с сотней стилей.
1. Стили веб-сайтов на основе шрифтовРасширение стилей веб-сайтов и методов проектирования дало таким дизайнерам, как мы, достаточно возможностей для…
…творческого подхода при создании пользовательского веб-интерфейса.
Одним из таких популярных методов является использование специального шрифта для передачи сообщения.
Мы помогли многим брендам заявить о себе в Интернете в виде доминирующего нового шрифта. Подгонять только под свой деловой стиль.
Имея собственный шрифт, который един для всех сообщений, бренды могут избавиться от беспорядка и привлечь больше внимания пользователей в Интернете.
Возьмем, к примеру, изображение выше.
Пока вы пролистывали этот абзац, вы, вероятно, задавались вопросом, почему Калифорния была написана шрифтом Coca-Cola или…
…почему Happy Birthday было написано шрифтом Disney.
Цель, которую пытались здесь достичь, была именно тем, что произошло.
Вы узнали шрифт, принадлежащий определенному бренду, по произвольному слову еще до того, как увидели название бренда.
Это именно то, что нужно для стилей веб-сайтов, основанных на шрифтах.
2. Мультфильмы и иллюстрацииЕще один отличный способ привлечь внимание пользователей — использовать мультфильмы или иллюстрации на своем веб-сайте для передачи сообщения. Это отличный способ воплотить ваши проекты в жизнь и добавить индивидуальности вашему бренду.
Лучшая часть стиля этого веб-сайта заключается в том, что здесь нет предела воображению. Компании используют это, чтобы выделиться с помощью этого легко узнаваемого дизайна.
Как заметил один эксперт, мультфильмы вызывают у пользователя массу эмоций — воспоминания, простоту и т. д.
Неудивительно, что этот стиль веб-сайта оказался в нашей семерке лучших.
3. Фирменные цветаС тех пор как в 1876 году был зарегистрирован первый бренд, фирменные цвета всегда играли важную роль в привлечении внимания людей.
Но какое значение имеют цвета?
Обычно красный означает страсть и акцент. Это цвет, связанный с такими эмоциями, как любовь или гнев.
Желтый символизирует мотивацию и позитив.
Аналогичным образом синий используется для успокоения или доверия.
Сегодня бренды используют эффекты цветовой психологии в своих интересах и в своих фирменных цветах.
Это было перенесено в их сообщения, включая стили веб-сайта.
Ярким примером этого является финансовая индустрия.
Финансовые учреждения, такие как Chase и American Express, используют синий цвет…
… (физиологический цвет доверия) для распространения доверия среди клиентов.
Фирменные цвета и их адаптация в бренд-коммуникациях играют важную роль в привлечении внимания пользователя и, в некоторых случаях, доверия.
4. Основное фото или видеоГлавное изображение или видео относится к основному изображению или видео на главной странице веб-сайта, которое привлекает внимание пользователя.
Это также делает сайт более интересным. Это центральная тема, на которой впоследствии основаны все остальные изображения.
Этот стиль веб-сайта построен вокруг главного изображения и идеально соответствует продукту или услуге.
Снимок нашей домашней страницы выше, на котором изображено наше главное изображение, показывает, что наше агентство всегда готово…
…работать вместе как одна команда, чтобы помочь нашим клиентам расти.
Эволюция цифровых технологий и новых браузеров позволила брендам экспериментировать с различными стилями медиа, а не только с изображениями.
Прошли те времена, когда у дизайнеров веб-сайтов была возможность создавать статические одностраничные веб-сайты. Или максимум многостраничный текстовый.
Сегодня веб-дизайнеры предпочитают реалистичность. В основном это означает использование фотографий в качестве основного элемента веб-сайта.
Это относится к людям, еде, продуктам, моде и т. д.
Целью бренда является демонстрация прозрачности для своих клиентов. Это принцип «что видишь, то и получаешь».
Запланируйте время, чтобы пообщаться с экспертом по различным стилям веб-сайтов.
5. ПрозрачностьИспользование стилей веб-сайтов на основе прозрачности — эффективный способ выделить текст и…
… сделать его более читабельным при использовании вместе с другими изображениями и видео.
Дизайнеры используют этот стиль на веб-сайтах, где одинаково важно показать как изображение, так и копию.
Используя элемент прозрачности за текстом, дизайнеры сохраняют видимость изображения, которое отображается сразу за текстом.
При этом убедитесь, что текст читается зрителем. Это умная тактика, которая также использует визуальное сообщение.
6. АнимацияАнимация играет огромную роль в передаче сложного сообщения в краткой и интересной форме.
Он используется разработчиками веб-сайтов для увлекательного преобразования сложных сообщений в простое пояснительное видео с использованием иллюстрированных изображений.
Наши дизайнеры всегда основывали свои теории дизайна на создании стиля веб-сайта, который является информативным, но достаточно привлекательным, чтобы удерживать клиентов.
И анимация идеально соответствует всем требованиям. Они передают сообщение бренда гораздо более привлекательным способом по сравнению со статическими изображениями.
Количество инструментов, доступных дизайнерам для создания такой анимации, увеличивается с каждым днем.
Сделать этот стиль одним из наших абсолютных фаворитов, когда речь идет о различных стилях веб-сайтов для вашего бизнеса.
7. На основе данныхВ этом году мы увидели рекордное количество брендов, использующих данные, чтобы влиять на свои бизнес-решения.
Настолько, что аналитика данных превратилась в целую карьеру.
Компании все чаще регистрируют данные о своих потребителях, а затем используют эти данные для принятия обоснованных бизнес-решений.
Бизнес-аналитика, называемая бизнес-аналитикой, помогает предпринимать продуманные действия, включая, но…
…не ограничиваясь таргетингом, маркетингом и рекламой, чтобы привлечь потребителей неожиданными фактами.
Наличие инструментов бизнес-аналитики дало разработчикам веб-сайтов возможность создавать целые веб-сайты на основе этого набора данных.
Дизайнеры начали использовать выделение данных в центре стиля своего веб-сайта, чтобы привлечь внимание к своему продукту.
Ниже приведено изображение веб-сайта тренажерного зала, который с первого взгляда привлекает внимание пользователей.
Если вы внимательно заметите, сайт вообще не начинается с разговора об их услуге.
Вместо этого они выдают интересные данные о физических упражнениях и фитнесе в целом.
Стили веб-сайтов и взаимодействие с пользователемСтили веб-сайтов определяются двумя основными принципами.
- Дизайн веб-сайта должен основываться на опыте конечного пользователя.
- Как правило, пользователи быстро сканируют веб-сайты, а не анализируют их.
Сегодня пользователи предпочитают просматривать веб-сайт, а не читать его содержимое целиком.
Вот почему мы рекомендуем использовать инфографику, изображения с текстом, видеоклипы и другие формы креативных материалов для передачи контента на вашем веб-сайте.
В то время как второй принцип легко понять, первый требует некоторого объяснения.
Итак, что такое пользовательский опыт?Пользовательский опыт — это путь, который пользователь совершает на вашем веб-сайте прямо с главной страницы до завершения транзакции.
Будь то заказ продукта или заполнение контактной формы.
Пользовательский опыт, также известный как UX, определяет взаимодействие пользователя с вашим брендом в Интернете.
Если UX, предлагаемый вашим сайтом, далеко не идеален, вы можете ожидать, что пользователи покинут ваш сайт, не совершив покупку.
И они, вероятно, отважатся зайти на сайт вашего конкурента, если он предложит лучший UX.
Но если пользовательский опыт будет гладким и интересным, пользователи не только сделают покупку, но и расскажут об этом своим друзьям.
Но они продолжат делать покупки и в будущем.
Графика, изображения, видео и анимация могут стать неэффективными, если конечный пользователь не удовлетворит их потребности.
Недостаточно просто выделить свою страницу среди армии конкурентов.
Чтобы по-настоящему оставаться впереди конкурентов, требуется плавный пользовательский интерфейс.
Возьмем, к примеру, стиль веб-сайта Amazon. Они построили бизнес, ориентированный на удовлетворение потребностей клиентов.
Вероятно, они протестировали десятки стилей веб-сайтов, прежде чем нашли формулу победы.
Но, в конце концов, все, что касается их веб-сайта, красноречиво говорит об удобстве работы пользователей.
От простой сортировки продуктов до общения с представителем службы поддержки клиентов. С тех пор многие бренды переняли этот стиль веб-сайта.
Различные стили веб-сайтов в зависимости от типа вашего бизнеса 8. Стили веб-сайтов для местных магазиновНачиная с обычных предприятий.
Таким предприятиям необходимо привлекать пользователей на свои веб-сайты и поддерживать их интерес. Здесь лучше всего подходит стиль веб-сайта типа брошюры.
Одними из лучших примеров этого типа бизнеса являются автомойки, местный ресторан, кондитерские и т. д.
Поскольку требуется не так много страниц и не слишком много контента, этот стиль лучше всего подходит для этих типов бизнеса.
В таких случаях лучше всего подойдет привлекательная фотография и уникальное описание бизнеса.
Цель здесь должна состоять в том, чтобы оказать сильное влияние в течение короткого промежутка времени. Ключевым здесь является предоставление пользователю именно того, что он ищет.
9. Стили веб-сайтов для крупных предприятийДля некоторых предприятий требуется более активное участие пользователей и подробный дизайн веб-сайта в журнальном стиле.
Примерами таких предприятий являются финансовые учреждения, сервисные компании, производители автомобилей и т. д.
Здесь бизнес основан на концепции, что пользователю может понадобиться больше узнать о продукте или услуге, которую он покупает.
Вот почему им может понадобиться использовать видео, инфографику и/или сообщения в блогах на нескольких страницах, чтобы рассказать о преимуществах своей продукции.
Здесь наши творческие дизайнеры находят больше всего возможностей для самовыражения.
И это правильно. Поскольку контент разбросан по разным страницам, дизайнеры могут показать здесь свои стили несколькими способами.
Имея достаточно места и страниц, мы можем провести A/B-тестирование различных страниц и посмотреть, какие из них лучше всего подходят для вашего бизнеса.
10. Веб-сайт электронной коммерцииНаконец, мы хотим поговорить о стиле веб-сайта электронной коммерции.
Технологические усовершенствования позволили клиентам совершать сделки с брендами онлайн.
Это дало предприятиям дополнительный канал продаж, который позволяет пользователям искать продукты, размещать заказ и выбирать варианты доставки и оплаты.
Все в одном интерфейсе онлайн.
Это стало возможным благодаря стилям веб-сайтов, основанным на электронной коммерции.
Этот стиль веб-сайта в основном используется предприятиями, у которых есть каталог различных продуктов, которые они хотят продать потенциальным клиентам.
Вы можете подумать, что управлять своим широким ассортиментом товаров и размещать их все на веб-сайте сложно.
Но конструкторы веб-сайтов на основе электронной коммерции теперь доступны и более просты, чем раньше.
Наши дизайнеры имеют большой опыт в создании дизайна веб-сайтов электронной коммерции.
Такие инструменты упростили создание веб-сайта, полностью основанного на электронной торговле.
Получите эксклюзивные советы по маркетингу!
Присоединяйтесь к более чем 50 000 маркетологов, которые получают эксклюзивные советы по маркетингу, которыми мы делимся только с нашими подписчиками.
РЕГИСТРАЦИЯ
Предоставляет вам все ресурсы и инструменты, необходимые для создания полнофункционального веб-сайта, обслуживающего довольных клиентов.
Место, где ваши клиенты могут легко найти и купить ваш продукт. Все по нажатию кнопки или касанию пальца.
Приведенная выше информация может оказаться чрезвычайно важной для понимания различных стилей веб-сайтов.
Но следующий вопрос, который, скорее всего, придет на ум: какой стиль веб-сайта подойдет моему бизнесу?
Выбор правильных стилей веб-сайта для вашего конкретного типа бизнеса может быть сложной задачей.
И тот, который требует исследования и понимания вашей целевой аудитории.
Наша команда дизайнеров поможет вам создать новый стиль веб-сайта с самого начала или оптимизировать существующий веб-сайт.
Это задача, требующая много размышлений и брендинга. Доверьтесь экспертам, и они сделают вам профессиональный веб-сайт, который понравится вашим клиентам.
Какой бы ни была ваша бизнес-цель, у нас есть опыт создания веб-сайта с высокой конверсией для вашего бизнеса.
Свяжитесь с нами сегодня, чтобы начать создавать различные стили веб-сайта.
Как создать полное руководство по стилю веб-дизайна + шаблон
При разработке веб-сайта очень важно, чтобы все использовали один и тот же визуальный язык для достижения согласованного и связного конечного результата. Здесь в игру вступает руководство по стилю. В этой статье наш дизайнер продукта обсуждает, почему и как вам следует создать собственное руководство по стилю.
Об авторе: Алина Хазанова, дизайнер продукта @ Elementor
Алина — дизайнер продукта в Elementor. Ее страсть состоит в том, чтобы предоставить пользователям ценный и приятный опыт работы с продуктом.
Проекты веб-дизайна могут быть сложными, требующими участия многих разработчиков, дизайнеров и других заинтересованных сторон с течением времени. Кроме того, развивающиеся технологии и стандарты могут потребовать многочисленных модификаций в ходе проекта. Сохранение общего внешнего вида вашего веб-сайта, независимо от этих факторов, может быть затруднено.
Один из способов облегчить эту задачу для всех участников — вложить средства в создание руководства по стилю веб-дизайна. Это, в свою очередь, может повысить эффективность и продуктивность, а также стать незаменимым ресурсом для поддержания согласованности бренда.
В этой статье мы обсудим, что такое руководство по стилю, а также зачем и как его создавать. Мы также укажем на существующие примеры, которые вы можете использовать при компиляции своих. Давайте начнем!
Содержание
- Шаблон руководства по стилю
- Что такое руководство по стилю веб-дизайна?
- Почему вы должны создать руководство по стилю?
- Преимущества создания руководства по стилю
- Как создать руководство по стилю веб-дизайна
- Шаг 1: Изучите свой бренд
- Шаг 2: Определите правила использования вашего логотипа
- Шаг 3: Определите свою цветовую палитру
- Шаг 4: Создайте правила для типографики
- Шаг 5: Установите правила макета и интервалов
- Шаг 6: продумайте стиль значка
- Шаг 7: Определите рекомендации для иллюстраций и изображений
- Шаг 8: Обрисуйте стилистические соображения
- Шаг 9: Развивайте голос вашего бренда
- Шаг 10. Включите конкретные правила и запреты
- Шаг 11. Не забывайте о загружаемых ресурсах
Шаблон руководства по стилю
Нужна отправная точка? Наш шаблон руководства по стилю поможет вам начать работу в кратчайшие сроки; он включает в себя примеры использования:
- Логотипы
- Шрифты
- Цвета
- Кнопки
- Иконки
И другие визуальные элементы, необходимые для создания собственного руководства по стилю — загрузите его прямо сейчас!
Что такое руководство по стилю веб-дизайна?
Руководство по стилю — это справочный источник, в котором вы собираете и представляете все дизайнерские решения для своего веб-сайта. Это включает в себя его цветовую схему, типографику, интервалы, значки, изображения и весь визуальный язык, используемый на вашем сайте.
Руководство по стилю и система дизайна
Как веб-дизайнер, вы, вероятно, много слышали термины «руководство по стилю» и «система дизайна». Хотя это родственные понятия, между ними есть и существенные различия.
Можно сказать, что руководство по стилю — это младший брат дизайн-системы. В дизайн-системе вы попытаетесь определить каждое маленькое правило и элемент, задействованный в вашей работе, принимая во внимание все возможные состояния компонентов.
С другой стороны, руководство по стилю — это скорее отправная точка для определения цифрового имиджа и голоса вашего бренда. Здесь вы сосредоточитесь на демонстрации только самых важных компонентов, возможно, с намерением разработать дизайн-систему позже.
Зачем создавать руководство по стилю?
Если над одним сайтом работает несколько веб-специалистов, важно объединить все ваши дизайнерские решения в единый справочный источник. Это помогает сохранить единообразие вашего видения на всех страницах и элементах.
Как вы уже знаете, дизайн веб-сайта может быть сложным. Когда над проектом работает много людей и требуется так много итераций и изменений, крайне важно, чтобы все использовали один и тот же визуальный язык, чтобы конечный результат был последовательным и цельным.
Преимущества создания руководства по стилю
Хорошо составленное руководство по стилю принесет пользу не только вам, но и всей вашей команде веб-дизайнеров. В процессе проектирования этот ресурс помогает всем участникам максимально повысить свою эффективность и свести к минимуму утомительные задачи, такие как поиск «этого точного цвета» или «этого точного стиля кнопки» для использования для определенных элементов.
Кроме того, руководство по стилю может служить справочным материалом для принятия правильных решений для будущего дизайна. Вам не нужно мучиться с выбором подхода к определенным функциям, потому что вы уже определили правила их использования. Это экономит время и снижает беспокойство по поводу правильности результата.
Кроме того, если вы сделаете свое руководство по стилю общедоступным, это может стать эффективным способом повысить узнаваемость бренда. Посетители смогут создать впечатление о ценностях и индивидуальности вашего бренда.
Они также могут получить представление о рабочем процессе вашего веб-сайта. Наконец, ваше руководство по стилю может стать удобным местом для обмена загружаемыми активами бренда с клиентами, партнерами и прессой.
Как создать руководство по стилю веб-дизайна (11 шагов)
Мы обсудили, что такое руководство по стилю и почему вы должны создать его для своего веб-сайта. Далее, давайте взглянем на все необходимые шаги, о которых следует помнить, когда вы начнете компилировать этот ключевой исходный код.
Шаг 1: Изучите свой бренд
Во-первых, вам нужно познакомиться со своим брендом и целевой аудиторией. Вы можете подумать о создании доски настроения в качестве отправной точки. Ваша цель — пересмотреть свои основные ценности и перевести их на визуальный язык, собрав по пути все активы и компоненты, которые его определяют.
Uber демонстрирует ценности своего брендаРазумно включить ценности и миссию вашего бренда в руководство по стилю, чтобы оно служило ориентиром.
Шаг 2. Определите правила использования логотипа
Следующим шагом является определение правил использования вашего логотипа во всех его вариантах. Если в вашей команде есть графический или бренд-дизайнер, вам следует проконсультироваться с ним по поводу любых соответствующих руководящих принципов, которые могут уже существовать.
Они могут включать сетку вашего логотипа, шрифт, цвета, правильный интервал и размещение, внешний вид на разных фонах и многое другое.
Руководство по использованию логотипа SpotifyКроме того, не забудьте указать, что можно и чего нельзя делать в отношении использования логотипа третьими лицами, например аффилированными лицами.
Шаг 3. Определите цветовую палитру
Цвет играет жизненно важную роль в восприятии и запоминании вашего веб-сайта и вашего бренда. Поэтому вы должны убедиться, что определили свои основные основных цветов , обычно максимум три .
Чтобы завершить цветовую палитру, вам также необходимо включить вторичный , третичный и нейтральный цветов.
Руководство по цвету от YelpКроме того, вам нужно будет представить эти цвета в своем руководстве по стилю, используя как их внешний вид, так и технические значения. Например, при добавлении «синего» вы также будете включать его эквиваленты RGB и шестнадцатеричных чисел.
Создание правильной комбинации цветов для вашего бренда требует много усилий. Вам нужно ознакомиться с основными терминами и узнать больше о теории цвета, чтобы добиться успеха в этой области.
Шаг 4: Создайте правила для типографики
Типографика, как и цвет, является неотъемлемой частью веб-дизайна. Чтобы ваш сайт был привлекательным и последовательным, вам нужно создать иерархию типографики в вашем руководстве по стилю.
Во-первых, вам необходимо указать семейства и размеры шрифтов для основных заголовков , h2-H6:
Иерархия типографики от MailchimpПомимо заголовков, вам нужно включить стили для бегущий (тело) текст , а также формы , предупреждающие сообщения и многое другое. Эти стили будут включать семейств шрифтов , которые представляют собой наборы шрифтов, таких как Roboto, Lato или Montserrat, и размеров.
Размеры шрифта должны указываться в пикселях (px) и оставаться одинаковыми для всех элементов. Вы также захотите, чтобы ваши разработчики были довольны, используя прогрессивные размеры, такие как 14 пикселей, 16 пикселей, 18 пикселей или 20 пикселей, и избегая промежуточных размеров, таких как 15 пикселей.
Шаг 5. Установите правила компоновки и интервалов
Другими важными частями руководства по стилю являются макет , сетка и интервалы правила, большинство из которых можно реализовать с помощью HTML и CSS. Они будут определять структуру ваших страниц. Для начала вы можете создать несколько основных шаблонов для своих основных макетов.
Правила интервалов из Firefox Photon Design SystemЭто значительно упростит расширение вашего веб-сайта и добавление новых страниц в будущем.
Шаг 6. Выберите стиль значка
Иконография — еще один важный стилистический выбор для вашего веб-сайта, и вы захотите определить некоторые основные правила ее использования. Это включает в себя такие решения, как использование готовой библиотеки значков, такой как Font Awesome, или собственные пользовательские значки, а также стиль значков — цветные или монохромные, заполненные или контурные и т. д.
Геометрия значков в Руководстве Google по дизайну материаловКак и в случае со шрифтами, вы также захотите включить основные значков размером , которые следует использовать. Имейте в виду, что для пользовательских значков может потребоваться включение определенных сеток значков или правил создания графики.
Шаг 7. Определение правил для иллюстраций и изображений
Чтобы добавить уникальности вашему сайту и его брендингу, вы можете создать собственные иллюстрации. Это может придать вашему веб-сайту уникальный внешний вид и голос. Обязательно включите ссылок на стиль и цвет за тип иллюстраций, которые вы используете.
Руководство Atlassian по иллюстрациямВозможно, вам также потребуется создать некоторые строгие правила и рекомендации относительно того, какие изображения использовать на вашем веб-сайте. Например, вы можете включить некоторые рекомендации и запреты для включения стоковых фотографий.
Кроме того, чтобы обеспечить визуальное соответствие изображений на вашем веб-сайте, вы можете включить настройки редактирования фотографий для фона, фильтров, яркости, контрастности и т. д.
Правила изображения из языка бренда Audi. Также важно указать общий тон и сообщение, которое должны нести изображения . Например, ваш личный вкус может склоняться к откровенным фотографиям, а не к чрезмерно отредактированным изображениям. Или, возможно, вам нравятся определенные фоны больше, чем другие. Во время этого процесса также помните о предпочтениях вашей целевой аудитории.
Шаг 8. Определение стилистических соображений для основных компонентов веб-сайта
После того, как вы определили базовые стили, пришло время ввести основные компоненты веб-сайта в руководство по стилю. Это касается появления , размеров и штатов из кнопок , Form Fields , Элементы формы , Меню навигации , Уведомления и оповещения , карты , Модальные модалы , и оповещения , карты , . более.
Чтобы продвинуться дальше для каждого типа кнопки, вы можете включить ее различные состояния, такие как обычное, наведение, активное или сфокусированное. Вы также должны определить стили для различных элементов формы, таких как переключатели или флажки.
Состояния кнопок из IBM Carbon Design SystemЛучше всего обращаться к библиотеке компонентов, такой как Google Material Design или Alibaba Ant Design, для определения любых важных элементов, отсутствующих в вашем собственном руководстве по стилю.
Шаг 9: Создайте голос вашего бренда
Эффективное руководство по стилю охватывает не только внешний вид вашего сайта, но и его сообщения и озвучку. Чтобы зафиксировать их в письменной форме, вам, возможно, придется проконсультироваться с маркетологами и копирайтером, чтобы создать рекомендации для вашего веб-сайта и другого контента.
Пример фирменного голоса от Beeline Design SystemВ конце концов, тон и голос копии на вашем сайте — это то, как вы обращаетесь к своим посетителям и потенциальным клиентам, поэтому важно сделать это правильно.
Шаг 10. Включите конкретные рекомендации и запреты
Иногда понятия в вашем руководстве по стилю трудно объяснить одним текстом. Вот почему часто лучше использовать конкретные примеры, такие как наглядные рекомендации и запреты, чтобы проиллюстрировать фактическую реализацию правил, определенных в документе.
Что нужно и что нельзя делать с плавающей кнопкой действия в Руководстве Google по дизайну материаловЧеткие примеры эффективно показывают, как следует использовать руководство по стилю на практике.
Шаг 11. Не забывайте о загружаемых ресурсах
Помимо правил в вашем руководстве по стилю, иногда может быть необходимо включить некоторые загружаемые ресурсы. Это может включать:
- Ваш логотип во всех его различных форматах, подходящих для Интернета и печати
- Пресс-кит с необходимыми фирменными материалами
- Краткое представление вашего брендбука
- Руководство по стилю в формате PDF
Эти ресурсы полезны для различных целей, включая работу с партнерами , преобразование лидов, адаптация новых членов команды и многое другое.
Загружаемые активы бренда UberХотя руководство по стилю необходимо для внутренних нужд, оно также очень важно для узнаваемости бренда среди пользователей, клиентов, аффилированных лиц, прессы и широкой публики. Если вы считаете, что ваш бренд может быть представлен за пределами вашего веб-сайта, например, в публикациях в прессе, вам нужно убедиться, что активы бренда легко запрашиваются и доступны.
Найдите вдохновение для своего руководства по стилю
Исследования — лучшая отправная точка для любого дизайнерского проекта. Это означает, что прежде чем приступить к созданию своего руководства по стилю, вам нужно ознакомиться с лучшими практиками, а также ссылками, которые вдохновят вашу работу.
Чтобы помочь вам в этом, мы собрали несколько красивых примеров руководств по стилю, чтобы дать вам представление о том, как разные бренды представляют свою идентичность в Интернете. Другими источниками вдохновения могут быть онлайн-каталоги, такие как Style Guides.io или Design Systems Repo, где вы можете найти различные примеры руководств по стилю и систем дизайна от ведущих компаний и брендов.
Поддерживайте свое руководство по стилю в актуальном состоянии
Веб-технологии и тенденции дизайна постоянно развиваются. Это относится и к бизнесу, поэтому со временем вам нужно будет обновить язык своего бренда. В результате ваше руководство по стилю не останется статичным. Скорее, вы должны ожидать, что с самого момента его создания вы будете регулярно вносить в него изменения.
Это требует от дизайнера гибкости и внимания к деталям. Вам нужно быть в курсе последних отраслевых тенденций и быть готовым адаптироваться к ним.
Чтобы помочь вам сохранить согласованность языка дизайна, Elementor 3.0 представляет Глобальные настройки сайта . Теперь вы можете управлять всем своим сайтом в редакторе. Новая панель Site Settings предоставляет множество инструментов настройки и дает вам центральное место для изменения всех параметров вашего сайта.
На любой странице, которую вы редактируете с помощью Elementor, перейдите на левую панель и щелкните значок в верхнем левом углу. Это приведет вас к панели Global Settings . Здесь вы можете получить доступ ко многим настройкам вашего сайта, таким как настройки лайтбокса, а также к настройкам макета по умолчанию.
Вы также найдете варианты Идентификация сайта для настройки вашей межсайтовой идентификации с параметрами, связанными с вашим логотипом, фавиконом, заголовком, слоганом и многим другим. В разделе Design System раздела Site Settings , Global Colors и Global Fonts также можно обеспечить единообразие дизайна для всего сайта.
Макет позволяет вам определить настройки макета Elementor по умолчанию, такие как ширина контента и макет страницы. Lightbox позволяет установить стиль по умолчанию для лайтбоксов Elementor. Стиль темы предоставляет глобальные настройки для определения стиля по умолчанию для различных элементов, не связанных с Elementor, таких как заголовки, кнопки, изображения и поля формы.
Благодаря этим новым функциям вы можете обеспечить согласованность дизайна и узнаваемость бренда на своем веб-сайте.
Поддержание согласованности бренда с помощью руководства по стилю
Сохранение согласованности дизайна большого веб-сайта, несмотря на то, что над ним работает много людей, может быть непростой задачей. Вот тут и приходит на помощь руководство по стилю. Это центральная точка отсчета для всех ваших дизайнерских решений, помогающая держать всех на одной волне. Это может повысить эффективность, а также помочь в узнаваемости бренда для вашей целевой аудитории.
В этой статье мы обсудили несколько шагов, связанных с созданием руководства по стилю веб-дизайна. К ним относятся изучение вашего бренда, определение цветовой палитры, создание рекомендаций по типографике и многое другое. Практический способ начать — использовать глобальные настройки Elementor для настройки правил дизайна для всего сайта.
У вас есть вопросы по созданию руководства по стилю веб-дизайна? Дайте нам знать в комментариях ниже!
Поделиться на facebook
Поделиться в Twitter
Поделиться на linkedin
Поделиться в WhatsApp
Поделиться по электронной почте
Ищете свежий контент?
Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.
Вводя свой адрес электронной почты, вы соглашаетесь с нашими Условиями обслуживания и Политикой конфиденциальности.
Алина Хазанова
Алина — продуктовый дизайнер в Elementor. Ее страсть состоит в том, чтобы предоставить пользователям ценный и приятный опыт работы с продуктом. Она любит рисовать и рисовать, читать книги и ходить в художественные музеи в свободное время.
Вам также может понравиться
Комментарии
Запустите свой облачный веб-сайт
Ресурсы руководства по стилю веб-сайта
- репозиторий GitHub
- Обновления Твиттера
- Авторы
Библиотеки шаблонов из реальной жизни, документы стандартов кода и руководства по стилю контента.
Система углеродного дизайна
К IBM
Carbon — это система проектирования для продуктов IBM Cloud. Это набор отдельных стилей, компонентов и руководств, используемых для создания унифицированного пользовательского интерфейса.
- внешний интерфейс
- код
- шаблоны
- голос и тон
Код для Америки
- интерфейс
- шаблоны
Шаблоны проектирования Codepen
Старые шаблоны проектирования Codepen, которые теперь устарели для fractal.build.
- шаблоны
Дизайн-система Finastra
Финастра
Проектируйте и стройте будущее финансов. От прототипа до продукта: создавайте готовые к использованию финансовые приложения быстрее и качественнее с помощью нашей системы проектирования.
- узоры
- компоненты
- интерфейс
- код
Руководство Гарри Робертса по CSS
Автор: Гарри Робертс
Советы и рекомендации высокого уровня по написанию разумного, управляемого, масштабируемого CSS
- код
Одинокая планета
- интерфейс
- шаблоны
Библиотека шаблонов Mailchimp
- интерфейс
- шаблоны
Голос и тон Mailchimp
Mailchimp
- голос и тон
- письмо
- язык дизайна
Руководство по стандартам Марка Брауна
По Марк Браун
Чтобы помочь общему пониманию лучших практик разработки интерфейса в PUP.
- код
- интерфейс
Макс Кваттромани
- интерфейс
- модели
Продажи
- язык дизайна
- внешний интерфейс
- шаблоны
Руководство по стилю Sass
Автор: Крис Койер
Личное руководство по стилю написания Sass от Криса Койера
- код
- интерфейс
Больница Саут-Тис
Руководство по стилю для веб-сайта больницы NHS
- интерфейс
- шаблоны
Старбакс
- интерфейс
- шаблоны
Система веб-дизайна США
Система дизайна для федерального правительства США. Система веб-дизайна США упрощает создание доступных и удобных для мобильных устройств правительственных веб-сайтов для американской общественности.
- интерфейс
- узоры
- код
Визг
- интерфейс
- шаблоны
Вещи, которые люди писали о руководствах по стилю.
Поддерживаемое руководство по стилю
Автор Ян Перо
Объяснение принципа Rizzo: руководство по стилю Lonely Planet
- жилой
Руководство по стилю жизни для GOV.UK
Автор: Эдд Соуден, GDS
Атомный дизайн
Автор Брэд Фрост
Атомарный дизайн — это методология создания эффективных систем проектирования интерфейсов.
Создание руководств по стилю
Сьюзан Робертсон
Руководства по стилю интерфейса пользователя
Автор: Анна Дебенхэм
Введение в руководства по стилю внешнего интерфейса.
Система живого дизайна
Зёнке Роде
Как команда Salesforce UX создала кроссплатформенную систему проектирования
Шаблон узора.
Итан Маркотт
Итан Маркотт делится своими мыслями о шаблонах проектирования и способах их лучшего представления в библиотеках шаблонов.
Рекомендации по стилю
Автор Брэд Фрост
Советы, как сделать руководство по стилю читабельным, доступным, полезным и долговечным.
Руководство по стилю и шаблоны шаблонов
Автор: Тайлер Стика
Сравнивает набор шаблонов в разных руководствах по стилю.
Системный дизайн
Федерико Хольгадо
Федерико Хольгадо из Mailchimp объясняет, как системы модульного проектирования из других отраслей применимы к созданию наших собственных интерфейсов.
Книг, написанных о руководствах по стилю.
Язык шаблонов — города, здания, строительство
Автор: Кристофер Александр, Сара Исикава, Мюррей Сильверстайн, Макс Джейкобсон, Ингрид Фиксдал-Кинг, Шломо Энджел
Язык шаблонов помогает заложить основу для совершенно нового подхода к архитектуре, строительству и планированию, который, как мы надеемся, полностью заменит существующие идеи и практики.
Атомный дизайн
Автор Брэд Фрост
Atomic Design подробно описывает все, что нужно для создания и поддержки надежных систем проектирования, что позволяет вам быстрее, чем когда-либо, развертывать более качественные и согласованные пользовательские интерфейсы. В этой книге представлена методология представления наших пользовательских интерфейсов как продуманных иерархий, обсуждаются качества эффективных библиотек шаблонов и демонстрируются методы преобразования рабочего процесса проектирования и разработки вашей команды.
Шаблоны проектирования — элементы повторно используемого объектно-ориентированного программного обеспечения
Автор: Эрих Гамма, Ричард Хелм, Ральф Джонсон, Джон Влиссидес
Обладая богатым опытом разработки объектно-ориентированного программного обеспечения, четыре первоклассных дизайнера представляют каталог простых и лаконичных решений часто встречающихся проблем проектирования.
Дизайн-системы
By Алла Холматова
Справочник по системам проектирования
Автор: Марко Суарес, Джина Энн, Кэти Силор-Миллер, Дайана Маунтэр, Рой Стэнфилд
Проектирование интерфейсов
Автор Дженифер Тидуэлл
Собирая лучшие практики пользовательского интерфейса и повторно используемые идеи в качестве шаблонов проектирования, Designing Interfaces предлагает решения общих проблем проектирования, которые вы можете адаптировать к конкретной ситуации.
Системы выразительного дизайна
By Есения Перес-Крус
Научитесь создавать целенаправленные системы дизайна, которые поддерживают и укрепляют творческий потенциал вашей команды.
Руководства по стилю интерфейса пользователя
Автор: Анна Дебенхэм
Узнайте, как создавать всеобъемлющие руководства по стилю для Интернета, независимо от того, начинаете ли вы с нуля или собираете руководство для существующего сайта.
Архитектура внешнего интерфейса для систем проектирования — современный план масштабируемых и устойчивых веб-сайтов
Мика Годболт
Эта книга знакомит опытных веб-разработчиков с новой дисциплиной архитектуры внешнего интерфейса, включая новейшие инструменты, стандарты и лучшие практики, которые подняли веб-разработку внешнего интерфейса на совершенно новый уровень.
Галерея шаблонов мобильного дизайна, 2-е издание
Тереза Нил
Этот удобный справочник содержит более 90 шаблонов проектирования мобильных приложений, иллюстрированных 1000 снимками экрана из текущих приложений для Android, iOS и Windows Phone.
Веб-анатомия — работающие фреймворки дизайна взаимодействия
Автор: Роберт Хукман младший, Джаред Спул
Web Anatomy предоставляет полное руководство по использованию фреймворков интерактивного дизайна, изучение психологии основных фреймворков и тщательный анализ того, как фреймворки изменят вашу работу к лучшему.
эпизода из различных подкастов, где обсуждаются руководства по стилю.
Процесс проектирования с Самантой Уоррен
Большие изменения в веб-технологиях заставляют всех нас обратить внимание на то, что многие уже давно говорят — рабочий процесс веб-дизайна, закрепленный за последнее десятилетие, на самом деле не работает. Создатель Style Tiles Саманта Уоррен присоединяется к Джен Симмонс, чтобы поговорить о рабочих процессах, процессах проектирования и о том, как новые идеи о наших инструментах могут помочь всем нам лучше разрабатывать веб-сайты для современной эпохи.
Джереми Кейт во всем Интернете
Джереми Кейт присоединяется к Джен, чтобы поговорить о Mobilewood, перспективных веб-сайтах, методах адаптивного дизайна, цифровом сохранении, семантике html5, Firefox 7 и многом другом.
Модульная конструкция
Итан и Карен объясняют, как модульный процесс проектирования, в котором на первое место ставится моделирование содержимого и шаблоны проектирования.
Старбакс
Starbucks считает мобильные устройства первой точкой взаимодействия с клиентами. Линкольн Монгилло рассказывает нам, почему управление «одной сетью» заставляет их сосредоточиться на том, что важно, и ставит производительность, доступность и безопасность в центр своего процесса проектирования.
- отзывчивый
Успешный дизайн продукта, pt. 4 — Атомный дизайн с Брэдом Фростом
Брэд обсуждает Atomic Design, системы проектирования, Pattern Lab, руководства по стилю и почему это хорошие практики.
Презентации на конференции о руководствах по стилю.
Ориентированные на будущее руководства по стилю
Автор Люк Брукер по адресу Интернет-направления
Как руководства по стилю могут помочь в рабочем процессе адаптивного дизайна.
- Руководства по стилю
— это новый Photoshop
Стивен Хэй в Fronteers 2012
Использование графических редакторов для создания макетов веб-дизайна работало до сих пор, но адаптивный дизайн вынуждает нас искать альтернативы, поскольку мы не можем просто создавать больше макетов, разрабатывая дизайн для большего количества экранов… Давайте взглянем на один из самых важные аспекты этого метода: создание понятных, полуавтоматических, самообновляющихся руководств по стилю.
Разработка на основе руководства по стилю
Мэтт Фордхэм на Сиэтлской интерактивной конференции 2014
Вещи, которые помогут вам составить собственное руководство по стилю.
Начальная загрузка
Автор Твиттер
Элегантный, интуитивно понятный и мощный фреймворк для быстрой и простой веб-разработки.
- HTML
- CSS
Фонд
По ЗУРБ
Front-end framework, созданный для разработки полностью адаптивных веб-приложений.
КСС
К Кайл Нит
Структурированная документация для (предварительно обработанной) CSS с созданными динамическими руководствами по стилю
KSS-узел
По kss-узел
Реализация Node. js таблиц стилей Knyle (KSS), «синтаксиса документации для CSS».
Лаборатория выкройки
Брэд Фрост и Дэйв Олсен
Создание систем атомарного проектирования
Закуска
Закуска
Библиотека для запуска веб-проекта с опцией Style Guide.
Прототипы стиля
Автор Сэм Ричард
Инструмент для создания библиотек шаблонов и систем атомарного проектирования
Плитка стиля
Саманта Уоррен
Style Tiles — это результат дизайна, состоящий из шрифтов, цветов и элементов интерфейса, которые передают сущность визуального бренда для Интернета.
Основы Интернета
Гугл
Комплексный ресурс для веб-разработки для нескольких устройств.
Веб-стартовый комплект
Гугл
Web Starter Kit от Google включает в себя HTTP-сервер, адаптивный шаблон, динамическую перезагрузку и руководство по стилю компонентов.
Ресурсы на этом сайте были добавлены следующими участниками:
Посмотреть на GitHub
Add
Руководство по форматированию и стилю MLA // Purdue Writing Lab
Резюме:
Стиль MLA (Modern Language Association) чаще всего используется для написания статей и цитирования источников в области гуманитарных и гуманитарных наук. Этот ресурс обновлен, чтобы отразить Справочник MLA (9 th ed.), предлагает примеры для общего формата исследовательских работ MLA, цитирования в тексте, примечаний/сносок и страницы цитируемых работ.
Следующий обзор должен помочь вам лучше понять, как цитировать источники с использованием MLA 9 th edition, в том числе как форматировать страницу «Процитированные работы» и ссылки в тексте.
Пожалуйста, используйте пример внизу этой страницы, чтобы указать Purdue OWL в MLA. Смотрите также нашу серию видеокастов MLA на YouTube-канале Purdue OWL.
Примечание: Для получения дополнительной информации об услугах для сообщества Университета Пердью, включая индивидуальные консультации, разговорные группы ESL и семинары, посетите сайт Writing Lab.
MLA — это стиль документации, который может применяться ко многим различным типам письма. Поскольку тексты становятся все более цифровыми, а один и тот же документ часто можно найти в нескольких разных источниках, следование набору жестких правил уже недостаточно.
Таким образом, текущая система основана на нескольких руководящих принципах, а не на обширном списке конкретных правил. Хотя в руководстве по-прежнему описывается, как цитировать источники, оно организовано в соответствии с процессом документирования, а не самими источниками. Это дает писателям гибкий метод, применимый почти повсеместно.
Ознакомившись с этим методом, вы сможете использовать его для документирования любого типа источника, для любого типа бумаги, в любой области.
Вот обзор процесса:
Решая, как цитировать источник, начните со списка основных элементов. Это общие сведения, которые MLA предлагает включать в каждую запись Works Citation. В цитате элементы должны быть перечислены в следующем порядке:
- Автор.
- Название источника.
- Название контейнера,
- Другие участники, Версия
- ,
- Номер,
- Издатель,
- Дата публикации,
- Местоположение.
За каждым элементом должен следовать соответствующий знак препинания, показанный выше. В более ранних изданиях справочника указывалось место публикации и требовалась различная пунктуация (например, номера журналов в скобках и двоеточие после номеров выпусков) в зависимости от типа источника. В текущей версии пунктуация упрощена (элементы разделяются только запятыми и точками), а информация об источнике сведена к основам.
АвторНачните запись с фамилии автора, запятой и оставшейся частью имени, представленной в произведении. Завершите этот элемент точкой.
Бхабха, Хоми К. Место культуры. Routledge, 1994.
Название источникаНазвание источника должно следовать за именем автора. В зависимости от типа источника он должен быть указан курсивом или в кавычках.
Книга должна быть выделена курсивом:
Хенли, Патрисия. Дом колибри . MacMurray, 1999.
Отдельные веб-страницы должны быть заключены в кавычки. Название родительского веб-сайта, который MLA рассматривает как «контейнер», должно быть выделено курсивом:
Lundman, Susan. «Как приготовить вегетарианский перец чили». eHow, www.ehow.com/how_10727_make-vegetarian-chili.html.*
Статья в периодическом (журнале, журнале, газете) должна быть в кавычках:
Bagchi, Alaknanda. «Противоречивые национализмы: голос подчиненного в Башай Туду Махасветы Деви». Талса Исследования женской литературы , том. 15, нет. 1, 1996, стр. 41-50.
Песня или музыкальное произведение в альбоме должны быть заключены в кавычки. Затем следует название альбома, выделенное курсивом:
Beyoncé. «Молись, поймай меня». Lemonade, Parkwood Entertainment, 2016, www.beyonce.com/album/lemonade-visual-album/.
*Справочник MLA рекомендует включать URL-адреса при цитировании онлайн-источников. Дополнительные сведения см. в разделе «Необязательные элементы» ниже.
Название контейнераВосьмое издание справочника MLA представило так называемые «контейнеры», которые представляют собой более крупные объекты, в которых находится источник. Например, если вы хотите процитировать стихотворение, указанное в сборнике стихотворений, отдельное стихотворение является источником, а более крупное собрание — контейнером. Название контейнера обычно выделено курсивом и сопровождается запятой, поскольку следующая за ним информация описывает контейнер.
Кинкейд, Ямайка. «Девочка.» Старинная книга современных американских рассказов, под редакцией Тобиаса Вольфа, Vintage, 1994, стр. 306-07.
Контейнер также может быть телесериалом, состоящим из эпизодов.
«94 встречи». Parks and Recreation, , созданный Грегом Дэниелсом и Майклом Шуром, перформанс Эми Полер, сезон 2, серия 21, Deedle-Dee Productions и Universal Media Studios, 2010.
Контейнер также может быть веб-сайтом, который содержит статьи, посты и другие работы.
Уайз, ДеВанда. «Почему телешоу заставляют меня чувствовать себя менее одиноким». НАМИ, 31 мая 2019 г., www.nami.org/Blogs/NAMI-Blog/May-2019/How-TV-Shows-Make-Me-Feel-Less-Alone. По состоянию на 3 июня 2019 г.
В некоторых случаях контейнер может находиться внутри более крупного контейнера. Возможно, вы читали книгу рассказов в Google Книгах или смотрели телесериал в Netflix . Возможно, вы нашли электронную версию журнала на JSTOR. Важно цитировать эти контейнеры внутри контейнеров, чтобы ваши читатели могли найти точный источник, который вы использовали.
«94 встречи». Парки и зоны отдыха , сезон 2, серия 21, NBC , 29 апреля 2010 г. Netflix, -2d9d868b9f64-12120962.
Лангхамер, Клэр. «Любовь и ухаживание в Англии середины двадцатого века». Исторический журнал , том. 50, нет. 1, 2007, стр. 173-96. ProQuest, doi:10.1017/S0018246X06005966. По состоянию на 27 мая 2009 г.
Другие участникиВ дополнение к автору могут быть другие участники источника, которые должны быть указаны, например, редакторы, иллюстраторы, переводчики и т. д. Если их вклад имеет отношение к вашему исследованию или необходим для идентификации источника , включите их имена в свою документацию.
Фуко, Мишель. Безумие и цивилизация: история безумия в эпоху разума. Перевод Ричарда Ховарда, Vintage-Random House, 1988.
Вульф, Вирджиния. Комната Джейкоба . С аннотациями и введением Vara Neverow, Harcourt, Inc., 2008.
ВерсияЕсли источник указан как издание или версия работы, включите его в ссылку.
Библия . Авторизованная версия короля Якова, Oxford UP, 1998.
Кроули, Шэрон и Дебра Хоуи. Древняя риторика для современных студентов. 3-е изд., Пирсон, 2004 г.
НомерЕсли источник является частью пронумерованной последовательности, например, многотомная книга или журнал с номерами тома и номера выпуска, эти номера должны быть указаны в вашем цитировании.
Долби, Надин. «Исследования в области молодежной культуры и политики: текущие условия и будущие направления». Социальная работа и общество: Международный онлайн-журнал, vol. 6, нет. 2, 2008 г., www.socwork.net/sws/article/view/60/362. По состоянию на 20 мая 2009 г.
«94 встречи». Парки и зоны отдыха, , созданный Грегом Дэниелсом и Майклом Шуром, исполнение Эми Полер, сезон 2, серия 21, Deedle-Dee Productions и Universal Media Studios, 2010.
Quintilian. Институт оратории. Перевод Х. Э. Батлера, том. 2, Loeb-Harvard UP, 1980.
ИздательИздатель производит или распространяет исходный код среди общественности. Если имеется более одного издателя, и все они имеют отношение к вашему исследованию, перечислите их в цитате, разделив косой чертой (/).
Клее, Пол. Твиттерная машина. 1922. Музей современного искусства, Нью-Йорк. Архив, www.artchive.com/artchive/K/klee/twittering_machine.jpg.html. По состоянию на май 2006 г.
Женское здоровье: проблемы пищеварительной системы . Американский колледж акушеров и гинекологов, 2006 г.
Дэниелс, Грег и Майкл Шур, создатели. Парки и зоны отдыха . Deedle-Dee Productions и Universal Media Studios, 2015.
Примечание : Имя издателя не обязательно должно быть включено в следующие источники: периодические издания, произведения, опубликованные их автором или редактором, веб-сайты, название которых совпадает с названием их издателя, веб-сайты, которые делают произведения доступными, но фактически не публикуют их (такие как как YouTube , WordPress или JSTOR ).
Дата публикацииОдин и тот же источник мог быть опубликован более чем в одну дату, например, онлайн-версия оригинального источника. Например, телесериал может быть показан в сети вещания в один день, но выпущен 9 0004 Netflix на другую дату. Если в источнике указано более одной даты, достаточно использовать дату, которая наиболее актуальна для вашего письма. Если вы не уверены, какую дату использовать, используйте дату первоначальной публикации источника.
В следующем примере Mutant Enemy является основной производственной компанией, а «Тише» был выпущен в 1999 году. Ниже приведена общая цитата для этого телевизионного эпизода:
«Тише». Баффи — истребительница вампиров , создано Джоссом Уидоном, исполнение Сары Мишель Геллар, 4 сезон, Mutant Enemy, 1999.
Однако, если вы обсуждаете, например, исторический контекст, в котором эпизод изначально транслировался, вы должны указать полную дату. Поскольку вы указываете дату выхода в эфир, вам следует использовать телевизионную сеть WB (а не Mutant Enemy), потому что именно сеть (а не продюсерская компания) транслировала эпизод в указанную вами дату.
«Тише». Баффи, истребительница вампиров, созданная Джоссом Уидоном, исполнение Сары Мишель Геллар, 4 сезон, 10 серия, WB Television Network, 14 декабря 1999.
МестонахождениеВы должны быть как можно более конкретными в определении места работы.
Эссе в книге или статья в журнале должны содержать номера страниц.
Адише, Чимаманда Нгози. «В понедельник прошлой недели». Вещь вокруг вашей шеи, Альфред А. Кнопф, 2009 г., стр. 74–94.
Местоположение онлайн-работы должно включать URL-адрес. Удалите все теги «http://» или «https://» в начале URL-адреса.
Уилис, Марк. «Расследование вспышек заболеваний в соответствии с Протоколом к Конвенции о биологическом и токсинном оружии». Emerging Infectious Diseases , vol. 6, нет. 6, 2000 г., стр. 595-600, wwwnc.cdc.gov/eid/article/6/6/00-0607_article. По состоянию на 8 февраля 2009 г.
При упоминании физического объекта, с которым вы столкнулись лично, укажите место его нахождения.
Матисс, Анри. Бассейн. 1952, Музей современного искусства, Нью-Йорк.
Дополнительные элементыДевятое издание максимально упрощено. Автор должен включать любую информацию, которая поможет читателям легко идентифицировать источник, не включая ненужную информацию, которая может отвлекать внимание. Ниже приведен список необязательных элементов, которые могут быть включены в документированный источник по усмотрению автора.
Дата первоначальной публикации:
Если источник был опубликован более чем в одну дату, автор может включить обе даты, если это предоставит читателю необходимую или полезную информацию.
Эрдрих, Луиза. Любовное лекарство. 1984. Perennial-Harper, 1993.
Город издания:
В справочнике седьмого издания требуется город, в котором находится издатель, но в восьмом издании говорится, что это необходимо только в определенных случаях, например, в произведение, опубликованное до 1900. Поскольку произведения до 1900 года обычно ассоциировались с городом, в котором они были опубликованы, в вашей документации название издателя может быть заменено названием города.
Торо, Генри Дэвид. Экскурсии . Boston, 1863.
Дата доступа:
Когда вы цитируете онлайн-источник, Справочник MLA рекомендует указывать дату доступа, когда вы получили доступ к материалу, поскольку онлайн-работа может измениться или переместиться в любое время. .
Бернштейн, Марк. «10 советов по написанию живой сети». A List Apart: для тех, кто делает веб-сайты, , 16 августа 2002 г., alistapart.com/article/writeliving. По состоянию на 4 мая 2009 г.
URL-адреса:
Как упоминалось выше, несмотря на то, что руководство MLA рекомендует включать URL-адреса при цитировании онлайн-источников, вам всегда следует консультироваться со своим преподавателем или редактором и включать URL-адреса по их усмотрению.
DOI:
DOI, или цифровой идентификатор объекта, представляет собой последовательность цифр и букв, которая указывает местонахождение онлайн-источника. Статьям в журналах часто присваиваются DOI, чтобы гарантировать, что источник можно найти, даже если URL-адрес изменится. Если ваш источник указан с DOI, используйте его вместо URL.
Алонсо, Альваро и Хулио А. Камарго. «Токсичность нитрита для трех видов пресноводных беспозвоночных». Экологическая токсикология , том. 21, нет. 1, 3 февраля 2006 г., стр. 90-94. Интернет-библиотека Wiley, doi: 10.1002/tox.20155.
Создание цитирований в тексте с использованием предыдущего (восьмого) изданияХотя справочник MLA в настоящее время находится в девятом издании, некоторая информация о цитировании в тексте с использованием более старого (восьмого) издания сохраняется. Цитата в тексте — это краткая ссылка в вашем тексте, указывающая на источник, к которому вы обращались. Он должен правильно соотносить любые идеи, парафразы или прямые цитаты с вашим источником и должен направлять читателей к записи в списке цитируемых работ. По большей части цитирование в тексте — это имя автора и номер страницы (или просто номер страницы, если автор указан в предложении) в скобках :
Империализм — это «практика, теория и отношение господствующего столичного центра, управляющего отдаленной территорией ( Саид 9 ).
или
Согласно Эдварду У. Саиду , империализм определяется «практикой, теорией и установками доминирующего столичного центра, управляющего отдаленной территорией» ( 9).
Процитированная работа
Саид, Эдвард В. Культура и империализм. Knopf, 1994.
При создании цитат в тексте для медиафайлов, которые имеют время выполнения, таких как фильмы или подкасты, укажите диапазон часов, минут и секунд, на которые вы планируете ссылаться. Например: (00:02:15-00:02:35).
Опять же, ваша цель — указать источник и дать ссылку, не прерывая текста. Ваши читатели должны иметь возможность следить за ходом ваших рассуждений, не отвлекаясь на дополнительную информацию.
Как цитировать Purdue OWL в MLA
Весь веб-сайт
The Purdue OWL . Purdue U Writing Lab, 2019.
Индивидуальные ресурсы
Имена авторов. «Название ресурса». The Purdue OWL , Purdue U Writing Lab, дата последнего редактирования.
В новом OWL больше не указаны авторы большинства страниц или даты публикации. Таким образом, в большинстве случаев цитаты будут начинаться с названия ресурса, а не с имени разработчика.
«Руководство по форматированию и стилю MLA». Purdue OWL, Purdue U Writing Lab. По состоянию на 18 июня 2018 г.
Веб-источники // Purdue Writing Lab
Резюме:
Этот раздел содержит информацию о методе форматирования и цитирования документов. Эти ресурсы соответствуют семнадцатому изданию The Chicago Manual of Style , выпущенному в 2017 году.
Общая модель цитирования веб-источников в чикагском стилеЗаголовки для веб-источников:
Заголовок веб-сайта, который аналогичен традиционному печатному произведению, но не имеет (и никогда не имел) печатного аналога, может рассматриваться как заголовки других веб-сайтов. Например, Википедию можно рассматривать как веб-сайт, а не как обычную энциклопедию. Это отход от предыдущих выпусков CMOS .
Названия веб-сайтов должны следовать заглавным буквам и обычно пишутся латинскими буквами без кавычек. Разделы веб-сайта, такие как определенный заголовок, отдельная страница, отдельная запись в блоге и т. д., должны быть написаны латинскими буквами 9.0006 с кавычками. Однако есть некоторые исключения: названия блогов выделены курсивом, а названия книг, журналов, телевизионных шоу, фильмов и других типов работ должны рассматриваться одинаково, независимо от того, цитируются ли они как печатная или онлайн-версия. Например, при ссылке на веб-сайт телевизионной новостной станции CNN заголовок выделяется курсивом. Кроме того, в таких случаях, когда веб-сайт не имеет отличительного названия, его можно указать на основе лица, ответственного за веб-сайт, например, CNN онлайн. Если вы сомневаетесь, следует ли использовать прямой шрифт или курсив, римский шрифт является более безопасным выбором.
Авторы веб-источников:
Автор части веб-контента часто не сразу ясен. Если указано имя, используйте его, как в любом другом источнике. Если контент публикуется под псевдонимом, псевдонимом в Интернете или псевдонимом, а настоящее имя автора недоступно, используйте его вместо имени автора. Вы также можете использовать название издательской организации, если на веб-странице не указан автор, но она связана с какой-либо корпорацией, ассоциацией или профессиональной группой. Если невозможно определить автора веб-страницы и нет четкой издательской организации, просто сначала укажите название. Используйте первую букву первого слова в заголовке, которое не является статьей (например, «а», «ан» или «эт»), чтобы определить алфавитный порядок записи в библиографии. Так, например, если заголовок страницы «Руководство по выпечке яблочных пирогов», «G» следует рассматривать как первую букву для целей алфавитного алфавита.
Даты для веб-источников:
Если источник, который вы цитируете, имеет четкую дату публикации, используйте ее в качестве даты источника, следуя стандартным рекомендациям. В противном случае ищите дату редакции; многие веб-сайты отмечают, когда они были в последний раз изменены, отредактированы или пересмотрены. Если вы используете дату редакции, а не дату публикации, четко укажите: «Последнее изменение: 17 мая 2019 г.». Вы можете использовать оба по своему усмотрению, и в этом случае вы должны различать два: «Опубликовано 26 апреля 2019 г.; последнее изменение: 17 мая 2019 г.». Если дата вообще отсутствует, используйте дату доступа к источнику для получения данных: «Проверено 7 августа 2019 г.». Если сайт снова модифицируется, так что данные, которые вы первоначально получили, изменены или удалены, вы должны добавить примечание на этот счет либо в текст, либо в цитату, указав, по возможности, «по состоянию на [дата]».
Примеры веб-источников в чикагском стиле Сноска или концевая сноска (N):дата, если другая дата недоступна, URL.
Соответствующая библиографическая запись (B):Фамилия, Имя. «Название веб-страницы». Название веб-сайта. Издательская организация, дата публикации или редакции, если таковые имеются. Доступ к дате, если нет другой доступной даты. URL .
Электронные книги и книги, с которыми можно ознакомиться в ИнтернетеЭлектронные книги (электронные книги) цитируются точно так же, как их печатные аналоги, с добавлением маркера носителя в конце цитаты: Kindle, PDF, EPUB и т. д. в Интернете также цитируются точно так же, как и их печатные аналоги, с добавлением DOI (или URL) в конце цитирования. См. также Книги.
Примечание: Стабильные номера страниц не всегда доступны в электронных форматах; поэтому вместо этого вы можете указать номер главы, раздела или другой легко узнаваемый указатель.
Уэстон, Энтони. Свод правил аргументации , 4-е изд. Индианаполис: Хакетт, 2010. Разжечь.
N:
1. Дональд Дэвидсон, Essays on Actions and Events (Oxford: Clarendon, 2001), https://bibliotecamathom. files.wordpress.com/2012/10/essays-on-actions- и-события.pdf.
B:
Дэвидсон, Дональд. Очерки действий и событий. Оксфорд: Кларендон, 2001. https://bibliotecamathom.files.wordpress.com/2012/10/essays-on-actions-and-events.pdf.
Интернет-периодические издания (журналы, журналы и газетные статьи)Интернет-периодические издания цитируются точно так же, как их печатные аналоги, с добавлением DOI или URL-адреса в конце цитаты. См. также Периодические издания. Также имейте в виду, что хотя даты доступа не требуются для официально опубликованных электронных источников (например, журнальных статей), они могут быть полезны для неофициально опубликованных электронных источников или могут требоваться некоторыми дисциплинами для всех неофициально и официально опубликованных электронных источников. Даты доступа должны располагаться непосредственно перед DOI или URL.
Для четырех или более авторов укажите первого автора в примечании, а затем et al. Для соответствующей библиографической записи укажите всех авторов (до 10).
N:
1. Kirsi Peltonen et al. «Родительское насилие и психическое здоровье подростков», Европейская детская и подростковая психиатрия 19, вып. 11 (2010): 813-822, doi: 10.1007/s00787-010-0130-8.
B:
Пелтонен, Кирси, Ноора Эллонен, Хельмер Б. Ларсен и Карин Хельвег-Ларсен. «Родительское насилие и психическое здоровье подростков». Европейская детская и подростковая психиатрия 19, вып. 11 (2010): 813-822. doi: 10.1007/s00787-010-0130-8.
Веб-страница с известным автором и датойN:
7. Ричард Кимберли Хек, «About the Philosophical Gourmet Report», последнее изменение 5 августа 2016 г., http://rgheck.frege.org/ философия/aboutpgr.php.
B:
Черт возьми, Ричард Кимберли. «О философском отчете для гурманов». Последнее изменение: 5 августа 2016 г. http://rgheck.frege.org/philosophy/aboutpgr.php.
Веб-страница с известной датой, но без известного автораN:
.cnn.com/2009/POLITICS/01/30/illinois.governor.quinn/.
B:
«Губернатор Иллинойса хочет «окурить» правительство штата». CNN онлайн, 30 января 2009 г. http://edition.cnn.com/2009/POLITICS/01/30/illinois.Governor.quinn/
Веб-страница с неизвестной датой публикации и авторомN:
B:
«Группа». Каса-де-Калексико . По состоянию на 27 октября 2017 г. http://www.casadecalexico.com/band.
БлогЗаголовки блогов должны быть выделены курсивом, а записи в блогах должны быть заключены в кавычки. Как правило, записи в блогах цитируются только в качестве примечаний. Однако, если вы часто цитируете блог, вы можете включить его в свою библиографию. Примечание: если слово «блог» включено в название блога, нет необходимости повторять его в круглых скобках после этого названия.
N:
1. Дж. Роберт Леннон, How Do You Revise?, Ward Six (блог), 16 сентября 2010 г., http://wardsix.blogspot.com/2010/09/ как-вы-пересматриваете.html.
Социальные сети
Сообщения в социальных сетях часто будут цитироваться только в качестве примечаний, хотя, если вы намерены подробно обсудить содержание, вы также должны указать ссылку в библиографии. Поскольку сообщения в социальных сетях легко и часто исчезают без особого уведомления, рекомендуется сделать снимок экрана или аналогичную запись всего, что вы собираетесь цитировать, чтобы будущие изменения или удаления не подорвали вашу работу. Обратите внимание, что все это относится только к общедоступный контент в социальных сетях. Частный контент, такой как прямое сообщение или сообщение в группе с ограниченным членством, следует указывать как личное сообщение.
Сообщения в социальных сетях обычно не имеют заголовков, поэтому, если заголовок не указан, просто используйте текст сообщения, сохраняя все исходные заглавные буквы, орфографию и т. д., набранные латинскими буквами в кавычках. Не включайте в этот раздел цитаты более 160 символов; если сообщение длиннее этого, обрежьте его (с многоточием) в разумной точке до того, как будет достигнута отметка в 160 символов. Цитирование сообщения в социальной сети должно соответствовать следующему формату:
N:
1. Имя Фамилия (Псевдоним), «Текст публикации», сервис социальных сетей, указание формата/носителя, дата публикации, отметка времени, URL
B:
Фамилия, Имя (Ник). «Опубликовать текст». Сервис социальных сетей, указание формата/носителя, дата публикации, отметка времени. URL.
В идеале сообщение должно цитироваться по официальному имени автора и псевдониму/псевдониму в Интернете, но если нет доступного псевдонима (например, в сообщении Facebook) или официального имени (например, в сообщении Twitter), используйте независимо от того, что у вас есть. Также обратите внимание, что вам не нужно указывать формат/носитель, если сообщение состоит только из текста, и вы должны включать отметку времени только в том случае, если это имеет отношение к вашей точке зрения или необходимо для различения нескольких цитат в один и тот же день. Кроме того, если вы процитировали весь пост в основном тексте, вы можете убрать его из примечания.
N:
2. Билл Най (@BillNye), «Хотя я не очень люблю прогуливать школу, я определенно выступаю за то, чтобы привлечь внимание к серьезности изменения климата. Наши студенты видят проблему…», «Твиттер», 14 марта 2019 г., https://twitter.com/BillNye/status/1106242216123486209.
Б:
Най, Билл (@BillNye). «Хотя я не против прогуливать школу, я определенно выступаю за то, чтобы привлечь внимание к серьезности изменения климата. Наши студенты видят проблему…». Твиттер, 14 марта 2019 г.. https://twitter.com/BillNye/status/1106242216123486209.
Форумы и списки рассылкиЦитаты для интернет-форумов или списков рассылки очень похожи на цитаты в социальных сетях с некоторыми отличиями. Вместо текста поста используйте название темы или тему в качестве заголовка цитирования; Кроме того, в дополнение к хост-сайту или сервису следует добавить название списка или форума.
N:
3. u/labtec901, «Мегатред «Принятые вопросы студентов», r/Purdue, Reddit, 14 января 2019 г., https://www.reddit.com/r/Purdue/comments/ag3841/accepted_undergrad_questions_megathread/.
Б:
u/labtec901. «Мегатред «Принятые вопросы студентов». r/Purdue, Reddit, 14 января 2019 г. https://www.reddit.com/r/Purdue/comments/ag3841/accepted_undergrad_questions_megathread/.
КомментарииИногда бывает необходимо процитировать комментарий, сделанный кем-то в записи блога, онлайн-статье, сообщении в социальной сети и т. д. Как правило, комментарий будет цитироваться только как примечание, а не в библиографию, если только вы не считаете, что по какой-либо серьезной причине ее следует рассматривать как отдельный источник, отдельный от работы, на которую она отвечала. Цитирование комментария должно содержать только имя автора комментария (и/или отображаемое имя, как указано выше), дату комментария (отметка времени необязательна) и ссылку на работу, на которую он отвечает.
N:
2. Сьюзан Вудринг, 17 сентября 2010 г. (3:40 утра), комментарий к Леннону, «Как вы пересматриваете?».
B:
Вудринг, Сьюзан. 17 сентября 2010 г. (3:40). Прокомментируйте Леннон, «Как вы пересматриваете?».
Интернет-мультимедиаИнтернет-мультимедиа следует цитировать в общем формате, приведенном ниже. Обратите внимание, что название работы должно быть выделено курсивом или прямым шрифтом с кавычками, будет варьироваться от одного носителя к другому, как указано в начале этой страницы. Дополнительные рекомендации по цитированию видео, песен и мультимедиа в целом см. в разделе Аудиовизуальные записи и другие мультимедиа.
N:
1. Имя Фамилия автора, Название работы , дополнительные соавторы, издательская организация, дата публикации, указание формата/носителя, время работы, URL.
Б:
Фамилия, Имя Создателя. Название работы . Дополнительные участники. Издательская организация. Дата публикации. Указание формата/носителя, времени работы. URL.
ПодкастПри цитировании подкаста название подкаста выделяйте курсивом, а название выпуска (и номер, если оно входит в название выпуска) латинскими буквами в кавычках. Дата публикации должна быть указана после названия эпизода, а не перед средством, как показано ниже.
Примечание: Включение слова «подкаст» следует тем же правилам, что и включение слова «блог» выше. «Подкаст, MP3-аудио» используется ниже в качестве примера-заполнителя и не обязательно требуется для этого конкретного примера.
N:
1. Шон Коул и Айра Гласс, «622: Кому ты собираешься позвонить?», 4 августа 2017 г., в This American Life , производство WBEZ, подкаст, аудио в формате MP3, 1:00 :27, https://www.thisamericanlife.