60 Трендов Веб-дизайна в 2021 году (+115 примеров)
Автор Илья Чигарев На чтение 30 мин. Просмотров 438 Обновлено
Привет.
Перед вами подборка трендов веб-дизайна, которые будут актуальны в 2021 году. Идеи собраны из работ топовых дизайнеров и digital-студий. Некоторые повторяются с трендами, которые мы уже рассматривали в Трендах 2020, некоторые только набирают популярность, а какие-то возрождаются в новых красках, как феникс из пепла.
Главный тренд 2021
3D определенно главный тренд 2021, потому что он присутствует во всех сферах дизайна. Новизна заключается в том, что его стали применять в пользовательском интерфейсе, где до этого главенствовал плоский дизайн.
Более частое применение 3D объясняется еще и тем, что появились новые, простые в использовании инструменты, иногда еще и бесплатные (например, Figma — она бесплатна для фрилансеров и использует плагины, с которыми легко создавать 3D). Многие ли из нас не были обескуражены, столкнувшись с такими сложными программами, как C4D, 3D Studio Max и Maya? Сейчас с помощью инструментов Figma или Dimensions CC любой дизайнер может быстро научиться создавать красивые 3D сценарии.
Другим фактором, способствующим более активному применению 3D, является предстоящий релиз от Apple, новая информационная система для Mac — Big Sur. На время написания статьи Apple Big Sur еще не выпущена и даже не имеет официальной даты релиза.
Вам наверное интересно, как этот релиз повлияет на мир дизайна. Apple продемонстрировала предварительную версию нового интерфейса для Mac. Наиболее важные изменения в дизайне — появление 3D элементов (иконок), областей с прозрачностью и отказ от серых оттенков.
Проект: Collab. / Автор: Tran Mau Tri Tam
Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.
Проект: macOS Big Sur 3D icons / Автор: Vivian niu
Проект: Website design / 3D & 2D Edition / Автор: Mike
Проект: FMCG Packaging / Part 3 / Автор: Mike
Проект: Bankia Humanismo digital / Автор: CLV Madrid
Безлимитная графика для ваших проектов
Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы.
Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес.
Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.
ПОСМОТРЕТЬ СЕРВИС ENVATO ELEMENTS
1. Пользовательский интерфейс и интерактивный дизайн (Ui & IxD Design)
Приложения vs Мобильный веб (App vs Mobile web)
Нельзя не согласиться, что в 2021 году сайты, сделанные не по стандарту mobile-first (мобильная версия приоритетна), совершенно устарели. В большинстве деловых сфер наилучший результат дает использование приложений, поэтому именно на их разработку и применение направляются все ресурсы.
Интернет магазины, социальные сети, торговые площадки предпочитают переориентировать потребителей на использование приложений, чтобы предоставить им более качественный пользовательский опыт и повысить конверсию.
Мобильный сайт или мобильное приложение? Как понять, что лучше для вас и ваших клиентов?
Согласно исследованиям, пользователи предпочитают мобильные приложения, а не мобильные версии сайтов. Платформы, ориентированные на веб версии проектов, проигрывают как в самопрезентации, так и в развитии.
Согласно Forbes.com пользователи мобильных устройств проводят почти 90% времени в приложениях и только 10% в браузерах на мобильных сайтах.
У приложений есть и недостатки, например, более высокая стоимость разработки и технического обслуживания.
Цвета на белых поверхностях (Colors on White Surfaces)
Цвета являются одним из самых важных визуальных элементов дизайна пользовательского интерфейса. Они способны выделить ваш контент и укрепить стиль бренда. Цветовая схема должна разрабатываться так, чтобы быть гармоничной. С ее помощью UI элементы и поверхности должны легко отличаться друг от друга.
Поверхности — это плитка, карточки, полотна и компоненты, которые наложены поверх фона. Эти поверхности белые и имеют мягкую тень, которая создает «плавающий» эффект. При этом фон обычно белый или светло-серый.
Если вы не хотите тратить время на подбор цветовой палитры, существуют сайты, с помощью которых можно сгенерировать красивые и яркие сочетания. Например, сайты https://flatuicolors.com/ и https://colorsupplyyy.com/app/
Проект: Health Fitness Mobile App UI UX Kit / Автор: Grace Saraswati
Проект: Analytics — Mobile App / Автор: Tran Mau Tri Tam
Проект: 3D Wallet App Exploration / Автор: Kostia Varhatiuk
Проект: Tenant App Case study / Автор: Prakhar Neel Sharma
Проект: Live Game Streaming App / Автор: Wahab
Размер виджета (Widget sizing)
Вышла IOs 14, принеся с собой новые изменения, которые отразятся на UI дизайне.
Теперь виджеты представлены в 3 размерах: маленький, средний и большой, и вы можете ловко перемещать их между значками приложений. Дизайнер должен рисовать иконку приложения в трех размерах, чтобы у пользователь был выбор. Каждый размер виджета позволяет отразить разное количество информации, поэтому нужно определиться и предоставить подходящий контент. Стоит помнить, что чем больше виджет, тем больше сведений и информации на нем можно разместить.
Проект: iOS Widgets for iPhone / Автор: Aleksey Bondarev
Проект: IOS 14 / Автор: Varya Panyukova
Проект: Apple Widgets UI Kit for Figma / Автор: Alex Muench
Анимация и взаимодействия (Animations & Interactions)
Анимация — важная часть дизайна приложения и пользовательского опыта. Сегодня дизайн смотрится незаконченным и статичным, если в него не включена анимация. Существует много способов создания анимации, вот некоторые из них:
JSON (запись в формате объектов Javascript) берет изображения и анимации, и преобразует их в код. Преимущество JSON анимаций в том, что они весят в несколько раз меньше, чем GIF, и поддерживают полную прозрачность (фон не обязателен).
Несколько лет назад ребята из Airbnb разработали инструмент с названием Lottie, который с легкостью создает небольшие анимации, используя JSON файлы. Lottie — библиотека с открытым кодом для iOS, Android и React Native, которая создает анимацию в режиме реального времени. Если вы еще не знакомы с ней, вам определенно стоит обратить на нее внимание.
Проект: Treasure Truck — Logo Animations / Автор: Jonathan Tipton-King
Проект: Animated animals / Автор: Alexandra Golde
Проект: Classmo — Virtual Classroom UI/UX / Автор: Daniel Tan
Эффект глубины в веб дизайне (Depth Effect in Web Design)
Все более и более вероятно, что 2021 год будет годом 3D, настанет его звездный час. Зарождению этого тренда способствовало развитие программного обеспечения для дизайна — отличный пример взаимосвязанной работы дизайна и технологий.
Мы являемся свидетелями подъема 3D повсюду — от типографики до изображений. Глубина и ощущение полного присутствия, которые создает 3D, приковывают внимание пользователя к дизайну. Использование градиентов, затемнения и теневых эффектов создает великолепную четкость и удерживает внимание посетителя на странице.
При добавлении других трендов, например, движения и анимации, сайты становятся все более и более гипнотическими. Для лучшего понимания, что мы имеем в виду, ознакомьтесь с этой прекрасной подборкой примеров.
Проект: delassus.com
Проект: hoang.moe
Проект: adidaschile20.com
Кастомизированные 3D иконки (Custom made 3d Icons)
Думаем, все уже осознали, что 3D является важной категорией в дизайне. Сейчас его влияние на UI сегмент велико, как никогда. 3D иконки — новый UI тренд 2021 года, потому если вам надоели плоские иконки, которые преобладали в пользовательских интерфейсах на протяжении последнего десятилетия, попробуйте объемные. Готовый проект будет выглядеть свежо и современно.
Проект: App icon using Adobe Dimension / Автор: gary liu
Проект: Instagram 3d Icon Concept / Автор: Alexander Shatov
Проект: Skeuomorphism? / Автор: Seunghyun Kang
Искажение, помехи, шум в веб дизайне (Distortion, Glitch, Noise in Web Design)
Искажение, помехи, шум — давайте добавим несочетаемость, случайность, несовершенства, неполадки, размытость, нечеткость — одним словом, ХАОС.
Сильным веянием в трендах веб дизайна 2021 будет появление ощущения, что все не так, как должно быть или не так, как ожидалось. Реакция на тревожные времена, отражающий реальность дизайн — нет необходимости углубляться в эту тему, достаточно сказать, что это чрезвычайно интересный ход.
Мы увидим смешанную типографику, случайности в интервалах и изображениях, сайты со странными цветовыми схемами (или скорее с отсутствием каких-либо схем), которые связывает только то, что их ничего не связывает. Не совсем анти-дизайн, но очень похоже. 2021 делает потенциально масштабное заявление о нашей сегодняшней жизни, стимулируя наблюдателя делать собственные выводы об увиденном. По-настоящему захватывающий тренд дизайна!
Проект: PUMA — This is my flow / Автор: Danilo Gusmão Silveira
Проект: THREE WHALES — PHOTO / Автор: Nikita Enes
Проект: adasokol.com
Опыт 90-х в веб дизайне (90’s Experience in Web Design)
Времена неопределенности часто выливаются в сильную ностальгию об ушедших днях и розовых очках, через которые все казалось прекрасным и безоблачным. 90-е — это не совсем винтаж, но точно олдскул: появление Windows, распространение компьютеров, которое все изменило, — они было достаточно давно, чтобы помнить хорошее, но не настолько давно, чтобы забыть их причуды.
Интеграция стиля 90-х в веб дизайн — реальный претендент на самое креативное использование ретро на сегодняшний день. В этом есть что-то неотъемлемо классное, странным образом чуждое для молодого поколения и достаточно знакомое, чтобы вызвать понимающую улыбку на лице старшего. Все это отлично выполняет работу по стильной комбинации самых базовых структур и кодов прошлого, и технологий настоящего, гениальным образом. Будет ли 2021 годом, когда этот тренд попадет в мейнстрим? Мы надеемся, что да.
Проект: boards.boldare.com
Проект: 90s nostalgia. Paper craft and photography / Автор: Iryna Donska
Проект: ON & ON — WILASCO (Cover Art) / Автор: Raphael de Luca
Проект: SYNTHWAVE ARTWORKS BY DENNY BUSYET / Автор: Denny Busyet
Хендмейд стиль в веб дизайне (Hand-made style Web Design)
В противоречии дизайна всегда есть что-то классное и интересное. Все равно что найти сочетание продуктов, которое не должно нравиться, но нравится. Тренды веб-дизайна 2021 возьмут встроенный компьютерный стиль сети и смешают с более расслабленным эффектом ручной работы, который прекрасным и элегантным образом может быть эффективен там, где компьютерная холодность иногда не справляется.
2021 может стать годом, когда этот самодельный стиль, который известен уже нескольких лет, сделает шаг вперед. Более свободный, расслабленный, дружелюбный, менее формальный. Посмотрите на применение рукописных шрифтов, рисованных изображений, подчеркиваний и отметок маркером, личных фото, дневников, журнальных записей, — очень тщательно обработанных для создания впечатления совершенно необработанных. Что-то домашнее и манящее.
Проект: lessnoros.com
Проект: passionevino.co.uk
Минимализм в веб дизайне (Minimalism in Web Design)
Старый фаворит, который никуда не собирается уходить, да и зачем? Минимализм доводит ранее известные идеи простоты до крайности. Редко когда момент настолько идеален для того, чтобы хаотичный и безумный мир сделал шаг назад. В 2021 существует реальный шанс, что этот излюбленный тренд веб-дизайна придется по нраву многим.
Проект: Stuff / Автор: Polina Rykova
Проект: Design concept of Archetype test / Автор: Bang Bang Education
Проект: baruchpi.com
Проект: pchico.es
Иллюстрации (Illustrations)
Тонкое контурирование в иллюстрациях (Thin Outline in Illustrations)
В 2020 в иллюстрациях преобладал именно этот стиль рисовки, он продолжит доминировать и в 2021. По причине того, что данный стиль стремительно набирал обороты, особенно в последнем семестре этого года, мы решили назвать его главным трендом 2021 года в категории иллюстраций.
Проект: Styleframes for animation / Автор: Nahuel Bardi
Проект: S t e m / Автор: Meme .
Проект: Revolut — Animated Loops / Автор: Odd Bleat *
Проект: Revolut — Animated Loops / Автор: Odd Bleat *
Проект: Fresh Prince / Автор: Odd Bleat *
3D
Неудивительно, что за последние несколько лет 3D завоевал сферу дизайна. 3D сильно эволюционировал и теперь представлен невероятно изысканными иллюстрациями, которые впечатляют зрителя. Используемые цвета могут быть насыщенными или пастельными в зависимости от посыла, который они призваны передать. В отличие от предыдущих лет, сейчас 3D иллюстрации более минималистичны, словно на них оставила отпечаток простота плоского дизайна.
Проект: 3D illustration / Автор: Titi Lyao
Проект: 3D illustration / Автор: Titi Lyao
Проект: Box. / Автор: Tran Mau Tri Tam
Проект: Ghost – Sign In / Автор: Tran Mau Tri Tam
Проект: 3D illustration / Автор: Titi Lyao
Иллюстрации, вдохновленные мультфильмами 70-80-х (70’s & 80’s Cartoons Inspired Illustrations)
Помните Черепашек Ниндзя, Икс-Мен и властелинов вселенной, Громовых Котов и Инспектора Гаджета? Если почувствовали ностальгию, для вас есть хорошие новости: в этом году данный стиль вернулся с новой силой и будет преобладать в 2021. Классический стиль мультяшной рисовки использует контурирование и простые формы с небольшим количеством деталей.
Проект: Bonniers Book | A trip to the future / Автор: Fago Studio
Проект: Bonniers Book | A trip to the future / Автор: Fago Studio
Проект: Xing Tian / Автор: Xulia Vicente
Проект: 30 Days / 30 Characters / Автор: MUTE / Nathaniel Rueda
Проект: 30 Days / 30 Characters / Автор: MUTE / Nathaniel Rueda
Сумасшедшие формы и цвета (Crazy Shapes & Colors)
Любители рисовать оценят эту уникальную технику создания иллюстраций. На первый взгляд она может показаться незаконченной, но все формы очень тщательно продуманы и вписаны в композицию. Наложение форм и насыщенные цвета создают яркие иллюстрации, способные вдохновить любого зрителя.
Проект: Quartz / Автор: Bernardo Henning
Проект: Los Cazafantasmas / Автор: Totoi Semerena
Проект: Tropical — Geo V / Автор: Totoi Semerena
Проект: Woman, Bird, Horse / Автор: Nate Williams
Иллюстрированные видео презентации (Illustrated Video Presentations)
Мы рассказывали про этот тренд в прошлом году в статьях о тенденциях 2020, но с учетом его важности решили упомянуть о нем снова.
Проект: Punto Poste Da Te / Автор: Giordano Poloni
Моушн дизайн и взаимодействия (Motion Design & Interactions)
TikTok и Instagram ролики (TikTok & Instagram Reels)
Ролики — это короткий и развлекательный формат видео контента. Эти короткие видео могут быть частью эффективной маркетинговой стратегии. С запуском Инстаграм роликов в качестве альтернативы ТикТоку крупные компании начали применять данный инструмент для своего продвижения и расширения аудитории.
Теперь короткие видео — это не только развлечение для подростков, крупные бренды нанимают агентства для создания таких роликов. Если вы уже используете социальные сети для продвижения своего бизнеса, стоит попробовать Instagram Reels или Tiktok.
Классические мультфильмы (Classic Cartoons)
Да, мультфильмы нашего детства популярны в 2021. Мы это уже говорили и снова повторяем, потому что очевидно, что данный жанр проникнет и в моушн дизайн.
Проект: USE ELO / Автор: Zombie Studio
Проект: Conditions / personal project / Автор: Nick Zaychenko
Проект: UNINTERRUPTED / Автор: Dale Edwin Murray
Ультра реалистичные 3D VFX (Ultra Realistic 3D VFX)
VFX, или Визуальные Эффекты, смешивают отснятый видео контент и созданные на компьютере цифровые изображения, чтобы получить реалистичные сцены. Это анимации, которые добавляют в отснятый на камеру материал.
С появлением множества легких в использовании программ визуальные эффекты стали доступнее и начали применяться в видео и короткометражных фильмах. Просто невероятно, какого реализма удается достичь, еще несколько лет назад мы о таком только мечтали.
Проект: Gillette — J20 / Автор: He Yang, Chiu Ho, Track Dong, Yuko Hung
Проект: REALME NARZO 20PRO / Автор: UoU Studio
Проект: The Orville / Автор: VoxelWolves PT & UK
3D иллюстрации (3D Illustrations)
Честно говоря, это не новый тренд, но он настолько важен, что заслуживает упоминания. Влияние 3D охватывает все сферы дизайна настолько сильно, что можно с уверенностью заявить — в 2021 году он будет преобладать абсолютно в любом цифровом контенте.
С проникновением дополненной реальности во все большее количество приложений, сайтов и программ, 3D продолжит укреплять свои позиции. Как мы уже говорили в своих статьях о дизайне за предыдущие годы, мы наблюдаем, что дизайнеры сочетают 3D с фотографией и 2D, создавая эклектичный дизайн. Все эти техники в паре с моушн создают уникальную финальную концепцию.
Проект: SICREDI CONECTA / Автор: Pé Grande Animation
Проект: Jacks Patch / Автор: The Rusted Pixel
Анимированные логотипы (Animated Logos)
Анимированные логотипы на виду уже несколько лет, но сейчас они стали особенно заметны и проникли во всё, что связано с брендингом, поэтому заслуживают упоминания. Логотип — первое, что мы видим при входе в приложение, поэтому он должен запоминаться, используя всего лишь символ или шрифт. Дополнив логотип плавной и изящной анимацией, любая компания может добиться впечатляющего результата в плане запоминаемости.
Проект: Travelspot logo / Автор: Nikola Matošević
Проект: Bench / Автор: Daniel Bodea / Kreatank
Проект: COOK — Logo animation / Автор: Fede Cook
Проект: Consultly logo animation / Автор: Vadim Carazan
Дополненная и виртуальная реальность (Augmented Reality & VR)
Дополненная Реальность (AR) и Виртуальная Реальность (VR) сами являются обширной категорией с собственными трендами, поэтому мы расскажем только о некоторых тенденциях, которые вы точно увидите в 2021.
С учетом ограничений Covid19, компании обратились к технологии Дополненная Реальность, чтобы донести свой товар до потребителя. Художественные галереи использовали VR и AR, чтобы пользователям было проще просматривать картины. Ожидалось, что в 2020 как минимум 100 миллионов пользователей будут применять для покупок технологии, основанные на AR (источник — Gartner), и это предсказание было озвучено еще до локдаунов по всему миру.
В будущем мы видим широкое применение AR, подкрепленное влиянием Искусственного Интеллекта и машинного обучения — во всех сферах от медицины до искусства, в торговле, в сфере обслуживания, в системе навигации.
Проект: Google IO 2019 / Автор: Peter Tarka
Видео презентации в быстром темпе (Fast Paced Presentation Videos)
Зрители запоминают 95% послания из видео, но только 10%, если им нужно читать экранный текст. Какой бы посыл вы ни хотели передать, информационный, мотивационный, демонстративный, для этого стоит выбрать видео в быстром темпе.
Примеры таких видео
Графический дизайн и принты (Graphic Design & Printing)
Крупная и броская типографика (Big and Bold Typography)
Типографика — самый важный элемент в дизайне. Умелый дизайнер может создавать визуальную айдентику, используя только типографику. Задача типографики — создать послание, установить сильную визуальную иерархию, передать информацию и в целом обеспечить великолепный пользовательский опыт.
Крупная и броская типографика существует с самого зарождения дизайна, так что в ней нет новизны, но она очень важна. Даже если дизайнеры используют кинетическую, искаженную, 3D, анимированную или статичную типографику, внушительные большие буквы являются и всегда будут являться горячим трендом в дизайне.
Проект: Yeah!Club Redesign / Автор: Quim Marin Studio
Проект: ISOTYPE / Автор: Mario De Meyer
Проект: Displacement Maps and Actions / Автор: Anna D
Проект: KYIV TYPE — book / Автор: Sebastian Schubmehl
Проект: SOMA Brewing / Автор: Quim Marin Studio
Геометрические формы (Geometric shapes)
Есть что-то уникальное в создании сложного дизайна с использованием очень простых форм. Геометрические формы появились в визуальном искусстве с начала прошлого века, поэтому нельзя сказать, что это новый тренд. В 2021 графический дизайн, будь то постеры, принты, упаковка или брендовая айдентика, сконцентрируется на геометрических формах.
Проект: Kariiou – Branding Project / Автор: Toormix Design Agency
Проект: Stationery posters / Автор: 陈 俊贤
Проект: Poster Collection/Retro Brands/Videotape / Автор: Xavier Esclusa Trias
Тонкие контуры и штриховая графика (Thin Outlines & Lineart)
Супер тонкие линии популярны, это мы уже выяснили. Поэтому продолжим упоминать этот тренд в каждой категории дизайна, чтобы показать, как легко он походит каждой из них.
Проект: Dictionary.com: A World Beyond Words / Автор: Tolleson Design
Проект: Oval monsters/Character design/Graphics & poster design / Автор: zimm wang
Проект: Institut Ramon Llull – Rebranding & Visual code Project / Автор: Toormix Design Agency
Проект: 五观 / Five — Observe / Автор: 陈 俊贤
Дизайн продукта и упаковки (Product Design & Packaging)
Когда Covid-19 захватил новостные ленты в 2020, упаковка продукции стала играть еще более важную роль. Потребители демонстрируют опасения по поводу возможности инфицирования пищевых продуктов, что выливается в повышенные требования к упаковке.
Популярность сервисов доставки еды и интернет магазинов также возросла в этом году. Для этих сфер большое значение имеет упаковка, узнаваемость бренда во многом достигается за счет нее.
Проект: Park Hyatt Kyoto | Takeout Packaging Design / Автор: Mitsutaka Nakao
Проект: Moccia | Brand Identity / Автор: Micael Micmas
Проект: Ghallab brand design. / Автор: Baianat
Экологичность (Sustainability)
Мы осознаем, что COVID-19 оказал значительное влияние на нашу планету, поэтому индустрия упаковки должна принять меры по уменьшению воздействия на окружающую среду.
Бизнес должен начать использовать биоразлагаемые материалы: картон, биопластик или материалы, сделанные из кукурузы, картофеля, грибов. На обычном пластике сохраняется большое количество бактерий, что дает экологичным материалам еще одно преимущество.
Проект: The Troupe / Автор: Lavernia & Cienfuegos
Проект: Bantu Vegan Branding & Packaging / Автор: Shaivalini Kumar
Проект: Side — Ceramics Product Design and Packaging / Автор: Jieru Chen
Собственные уникальные иллюстрации (Custom made illustrations)
Хорошо продуманная уникальная иллюстрация может создать отличную историю для вашего бренда. Нужно выбирать графику, которая наилучшим образом передаст историю бренда. Она должна быть выразительной и придавать бренду целостность.
Проект: Hombre Cometa / Автор: Eduardo Ramón
Проект: 12 Spirits — OfDarkness™ / Автор: Sanh Nguyen
Проект: OFFBLAK Tea / Автор: Thomas Hedger
Проект: Mejo / Автор: lucia del zotto
Повествование (Storytelling)
Это совершенно не новый тренд, но он актуален как никогда, поэтому мы решили добавить его в список. Если вы продаете продукт, инвестируйте в качественный дизайн упаковки, который расскажет увлекательную историю о вашем бренде.
Упаковка товара может подтолкнуть нас к его покупке. Начиная от текста на упаковке до шрифта, материала, размера и формы — все должно создавать уникальный опыт при распаковке продукта.
Проект: CBD Coffee — Branding & Packaging / Автор: Cubic Orange
Проект: The Preservatory / Автор: Chad Roberts
Проект: Rascal tastebuddies / Автор: Stef Hamerlinck
Интерактивная упаковка (Interactive Packaging)
Люди любят сидеть в телефоне, поэтому упаковка должна быть адаптирована таким образом, чтобы удерживать интерес потребителя. Умная Упаковка создает новые впечатления, позволяя потребителям взаимодействовать с продуктом, повышая узнаваемость бренда. QR-коды и дополненная реальность — всего лишь пара примеров идей для создания «умной упаковки».
Дизайн продукции очень подвержен влиянию технологий, большинство новых разработок вращается вокруг идеи смартфона и того, каким образом продукт может предоставить интерактивный опыт.
Проект: Pepsi
Проект: MINI PHA | LAMP & CHARGER | PRODUCT DESIGN / Автор: Max Mysechko
Проект: ENERGY TUBE HAND WARMER / Автор: Enterfun _official
3D печать упаковки (3D Printed Packages)
После революционного появления 3D принтеров стала возможна упаковка необычной формы. Данная технология упростила печать упаковки причудливой формы, и дизайнеры дали волю своему воображению. Недостатком является все еще высокая цена такой упаковки по сравнению с классической. Этот метод очень полезен для подготовки макета и предлагает быстрые прототипы с меньшими затратами.
Трендовые инструменты
Substance
Этот новый инструмент от Adobe призван сделать 3D доступным для любого дизайнера. Substance представляет собой полный набор инструментов для текстурирования объектов и создания материалов для 3D проектов. Набор в сущности является экосистемой, ориентированной на дизайнеров, создателей стоковых изображений и иллюстраторов. Недостаток этого нового инструмента заключается в том, что Adobe предлагает его в качестве отдельной подписки, как Adobe Cloud, и для начинающего дизайнера ее стоимость может показаться довольно высокой. Полный пакет стоит $19.99 в месяц.
Substance Painter располагает «умными» материалами и масками, а также встроенными заготовками. Вы можете использовать «умные» материалы, подстраивающиеся к любому объекту, чтобы продемонстрировать реалистичный износ в результате эксплуатации. Применяйте готовые маски, адаптирующиеся к любой форме, и рисуйте легко настраиваемыми кистями (substance3d.com).
Substance Alchemist позволяет художникам вручную дополнять материалы финальными штрихами с помощью некоторых процедурных методов. Примечательно то, что новый инструмент использует мощность Искусственного Интеллекта. Это даст возможность, к примеру, корректировать сканы высветлением для достижения более реалистичного вида.
Substance Designer больше используется для создания плиточных, динамических и модульных текстур. Его часто применяют для сборки библиотеки базовых материалов, которые могут использоваться в других приложениях, например, Substance Painter.
Substance Source — библиотека материалов на физической основе, оснащенная ресурсами, которые позволяют вывести текстурирование, создание материалов и 3D искусство на еще более высокий уровень. Каждый найдет что-то для себя в Substance Source: от процедурных материальных субстанций, материалов с ручной росписью до сканов на 100% физической основе.
Проект: Textile Techniques / Автор: Zachary Corzine
Проект: Bold shapes and colors — craft & art store illustration / Автор: Danil Tabacari
Проект: Never Been Done / Автор: Sebastian Marek
Adobe Aero
Aero — новый инструмент от Adobe, помогающий создавать интерактивные опыты Дополненной Реальности с эффектом полного погружения и делиться ими. Самое лучшее в этом инструменте то, что для работы с ним не требуется знаний кода или 3D дизайна. Aero можно найти в составе Adobe Creative Cloud.
Проект: Hope / Автор: BÜRO UFHO
Fresco
«Adobe Fresco — бесплатное приложение для рисования, созданное специально для Apple Pencil и iPad, и ориентированное на художников, которые занимаются рисованием профессионально или в качестве хобби.»
Этот инструмент является ответом Adobe на возросшую за последние годы популярность Procreate.
Adobe Fresco доступен в условно-бесплатном режиме — вы можете начать с бесплатного начального тарифа и затем перейти к платной версии с премиальными опциями. Adobe выбрала ежемесячный тариф Fresco для Ipad, его стоимость $9,99. Интересный выбор, учитывая, что Procreate доступен для единоразовой покупки. Что вы думаете по этому поводу?
Проект: The Monster Mash 2020 / Автор: Tavo Montañez
Проект: Mayan Gods — Adobe Creative Residency Community Fund / Автор: Cleonique Hilsaca
В заключение
Тренды веб дизайна в 2021 будут креативны как никогда, сейчас не время стоять на месте. Даже при движении вперед вам придется постараться ускорить шаг. Веб-дизайн стирает границы между искусством и пользовательским опытом, пользовательским взаимодействием, выразительностью, функциональностью и практичностью с интересом и вовлеченностью. Это непростая задача, но если вы не готовы за нее взяться, найдется тот, кто готов.
Вдохновляйтесь фактом, что рынок сильнее, чем когда-либо, пусть конкуренция мотивирует вас, позвольте трендам веб дизайна 2021 двигать вас и ваших клиентов вперед.
Статья собрана с помощью источников:
Поделитесь статьёй в соцсетях, вы мне очень поможете, спасибо 🙂
Очаровательный дизайн веб-сайтов с минимальным набором цветов: лучшие решения
Подход с использованием цветовой дифференциации – это самый простой способ создания фокуса на выбранном участке экрана, а также локализации взгляда пользователя непосредственно на ключевых блоках, разбиения однообразного контента на усваиваемые части, и выделения естественным образом необходимых сообщений.
Словом, являясь элементарным, вездесущим и весомым инструментом украшения — цвет, в умелых руках, может легко заменить любую чудесную иллюстрацию, эффектное изображение или обильный орнамент, позволяя создавать стильный и сложный дизайн. Не говоря уже о том, что эффект, производимый в результате искусной комбинации различных основных декоративных приемов, может превзойти все ожидания.
Цвет, сам по себе, это действительно мощный инструмент, поэтому даже минималистская цветовая гамма может добавить много контраста в проект, делая его правильно сбалансированным, гармоничным, энергичным и даже выглядящим достаточно замысловато.
Мы рассмотрим различные примеры дизайна, которые соответствуют разным оригинальным, распространенным и классическим наборам цветов, помогающим вывести веб-дизайн на новый уровень.
Ниже вы найдете наш свежий список дизайнов веб-сайтов, искусно использующих минимум цветов.
Solasie
Веб-сайт Solasie создает жаркую летнюю атмосферу. Дизайнер использует палитру теплых приглушенных оттенков, чтобы мастерски поддержать теплые картинки морского пейзажа.
Derek Boateng
Онлайн портфолио Дерека Боатенга (Derek Boateng) главным образом базируется на сером цвете, монотонность которого время от времени нарушается зеленым и красным цветами, использующимися для выделения важных элементов.
Lukas ‘NK’ Nikitczuk
Дизайнер использует синий и светлый оттенок цвета мокко как основные в цветовой схеме, чтобы придать сайту Lukas ‘NK’ Nikitczuk нежный и изысканный вид. Абстрактный фон с трехмерными струями жидкости в сочетании с множеством круглых элементов умело создает атмосферу элегантности.
1300 Just Dial
Этот веб-сайт, в отличие от предыдущего, выглядит достаточно жестким и резким, главным образом за счет поразительного контраста между желтым и черным, поддерживаемым обильными декорациями в стиле «гранж» и строгим цифровым оформлением.
Panna’s en Akka’s
Этот веб-сайт имеет, бесспорно, мрачный вид. Дизайнер использует однотонно-черный фон, преднамеренно затемненные изображения и темную текстуру для создания загадочного дизайна, который красиво оттеняется с помощью нежно-розового цвета.
Последний задействован в создании определенной траектории взгляда от начала до конца сайта.
Rscollab
Синий тон (определенно преобладающий на этом сайте) задает должное деловое настроение и в сочетании с простыми плоскими геометрическими иллюстрациями создает ощущение детской непосредственности. Дизайнер использует три основных цвета, удивительным образом дополняющих друг друга.
Snapwire
Веб-сайт Snapwire имеет изящную, неперегруженную посадочную страницу, которая содержит только колоритное изображение, пропитанное городским настроением, и пару кнопок, которые легко притягивают внимание пользователя своим контрастным однородным фоном.
Bitwip
Дизайнер этого веб-сайта строго придерживается трехцветной палитры, которая украшает весь сайт. Так, насыщенный пурпурный цвет служит фоном, белоснежно-белый используется для шрифта и графики, а желтый – для выделения ключевых моментов.
The Pete Design
Веб-сайт The Pete Design – это стильное, акцентированное на шрифтах мини-портфолио, которое завораживает зрителя своей простотой и утонченностью. Дизайнер хорошо поработал, скомбинировав сильно размытый коричневый фон с обычным и рукописным шрифтами. В целом, сайт выглядит как краткое и очень милое онлайн резюме.
PITCH Festival Amsterdam
PITCH Festival Amsterdam имеет довольно необычный, но действительно привлекательный веб-сайт, который создает это чувство посредством нетрадиционного выбора цветов. Теплые приятные оттенки зеленого и оранжевого гармонично сочетаются друг с другом.
MoreSleep
Смесь черного и красного цветов может быть легко отнесена к классической цветовой гамме, которая создает лаконичный, сбалансированный дизайн. Эффективная реализация двухмерного стиля придает сайту организованный и аккуратный вид.
Red Pen
Red Pen – это еще один удивительный веб-сайт в нашей коллекции, в котором минималистический подход был умело реализован на практике. Дизайнер применил правила минимализма не только к верстке и внутренней структуре (веб-сайт состоит только из одной посадочной страницы), но и к оформлению, используя всего два основных цвета и отказавшись от всей графики, за исключением маленькой иконки в центре и логотипа.
Kerem Suer
Kerem Suer имеет чертовски опрятный и красивый веб-сайт, который основан на изящной и спокойной светло-серой цветовой гамме. Светло-голубой оттенок гармонично сочетается с основной темой и улучшает дизайн в целом.
Wanderio
Веб-сайт Wanderio имеет довольно стандартную разметку одностраничного сайта, основанного на вертикальном смещении. Дизайнер украсил сайт с помощью ярко-голубого и глубокого оранжевого цветов, отлично сочетающихся друг с другом. Преобладающий белый цвет создает ощущение чистоты и воздушности.
Radiuus
Этот простой веб-сайт построен на идее минимализма, которая охватывает как разметку, так и цветовую гамму. Белый шрифт помогает эффективно отделить текст от сочно-фиолетового фона.
Biere du Sorcier
На этом сайте вы не сможете оторвать взгляд от кислотно-зеленного пятна рекламируемого продукта и основного меню, не обращая внимания ни на что другое. Ярко-зеленый тон сразу же притягивает взгляд читателя благодаря мощному контрасту между чисто-черным фоном и элементами кричащего цвета на переднем плане. Определенно, в этом случае двух цветов более чем достаточно.
Kyle Thacker
Портфолио Кайли Трэкера (Kyle Thacker) имеет эффектный монохромный фон с небольшим добавлением шума, который занимает всю секцию приветствия для того, чтобы эффективно привлечь внимание к огромным кнопкам приглушенно оранжевого цвета. И все это искусно вписывается в белый фон.
Rezo Zero
Несмотря на то, что этот сайт наполнен контентом, он выглядит хорошо организованным и удобным для поиска. Дизайнер справился с большим объемом контента за счет правильного размещения и использования минимального количества цветов, что помогло не загромоздить сайт информацией.
Romain Briaux
Дизайнер умело использует светлый жирный шрифт, поля с тонким светлым контуром и светлый лаконичный логотип в противовес эффектного фона с темным изображением. Отсутствие ярких цветов придает веб-сайту сдержанный и изящный вид.
Smith
Смит (Smith) использует классическую черно-белую гамму с целью поддержания наглядности контента, подчеркнув его естественным образом. Привычное, проверенное временем цветовое сочетание делает веб-сайт строгим и удобным для чтения.
Kendu
Веб-сайт Kendu имеет чистый монохромный дизайн с набором специально обесцвеченных изображений. Ярко-голубой цвет, используемый в качестве инструмента для выделения, легко вламывается в ход мыслей читателя и привлекает внимание.
Enso
Этот веб-сайт притягивает внимание своим очень непривычным и необычным видом. С помощью комбинации энергичного желтого и нежного розового цветов дизайнеру прекрасно удается сочетать контент с двухмерной черной графикой и однородно-серым фоном.
Font You
Сайт Font You выглядит ярким и привлекает внимание. Гармоничный и действительно исключительный выбор цвета – вот что придает сайту неповторимый облик. Хотя дизайнер и использует всего два цвета, сайт получился ярким и визуально привлекательным.
Как правило, использование минимального количества цветов подразумевает применение двух или трех сочетаемых или, наоборот, контрастных цветов. Однако, если макет сайта основан на приглушенной палитре цветов, или используются разные оттенки одного цвета, его также можно отнести к дизайну с минималистической гаммой.
Данная публикация является переводом статьи «Charming Website Designs with Minimal Coloring: Best Practice» , подготовленная редакцией проекта.
Курсы дизайна сайтов и веб-дизайна в Йошкар-Оле
Что вы узнаете на курсе
Научитесь создавать красивые интерактивные проекты в вебе: сайты, лендинги и интернет-магазины с интересными текстами, удобной навигацией и уникальным стилем. Красивые и функциональные. Готовые к запуску
В программе упражнения: на композиции c характером, анимации, сторителлинг и проектирование маршрутов с отзывчивой навигацией, плюс элементы маркетинга.
Цель всех упражнений — научить вас вовлекать пользователей в покупку товаров на сайте.
Траектория подготовки включает следующие модули: эстетика, уникальный стиль, анимация, проектирование, копирайтинг и разработка сайтов в конструкторах.
О профессии
Веб-дизайнер умеет рассказывать интересные истории, выстраивать навигацию и делать дизайн страниц с выразительной подачей продуктов и услуг
Сайт помогает привлекать клиентов из интернета 24/7, рассказывая о пользе товаров/продуктов/услуг. Коммерческие сайты разрабатывают в команде. Минимальный состав команды:
- Интернет-маркетер — придумывает концепцию подачи продукта и выстраивает систему привлечения клиентов из интернета
- Веб-дизайнер — создает выразительный дизайн сайта и помогает подать продукт в интернете так, чтобы клиент понял, что это «то, что нужно»
- Веб-разработчик — придумывает, как воплотить дизайн сайта с помощью технологий HTML/CSS/JavaScript/CMS и запускает его в плавание
На курсе перед учащимися ставится задача — максимально наглядно,
интересно и с ценностью для клиентов подать продукт/товар/услугу в сети.
Особенности курса
Кому будет полезен курс
Для тех, кто интересуется digital-дизайном, обожает творчество, и тянется к удобным, красивым и гармоничным системам
Начинающим дизайнерам. У которых за плечами есть несколько работ и которые хотят освоить новые навыки в сфере веб-дизайна и добавить пару ярких работ в портфолио.
Новичкам. Далеким от сферы дизайна, которые хотят сделать первые шаги в востребованной профессии и окунуться в мир веб-дизайна. Научиться с помощью графических редакторов создавать внешний вид и оформление сайтов, мобильных приложений, интернет-сервисов.
Менеджерам проектов. Курс поможет понять, как устроена работа дизайнера, сколько часов нужно на создание сайта или баннера и как правильно выстраивать работу дизайнеров.
Веб-дизайн — всё по этой теме для программистов
Боль фронта, или Что нам нужно от дизайнеров
Разбираем некоторые проблемы в отношениях дизайнеров и фронтендеров и ищем способы их решения.
Тест «Что делает эта кнопка?»
Иногда то, что вы видите на иконке кнопки даже близко не ассоциируется с её назначением. Из таких иконок мы и собрали этот тест.
Харизматичный дизайн или использование эмпатии для вовлечения пользователя
Пробиться к сознанию пользователя становится всё сложнее, поэтому нужно иметь не просто сайт, выполняющий задачи, а продукт с приятным глазу дизайном.
Инструменты для создания макета сайта для новичков: чем отличаются и какой выбрать
Новичкам в дизайне важно найти инструменты с достаточной функциональностью, но не требующие много времени для освоения. Составили подборку таких инструментов.
Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть вторая: разрабатываем визуальную концепцию сайта
Гайд, который поможет сделать красивый сайт без дизайнера и опыта. Во второй части разбираемся, как выбрать общий стиль сайта, цвета и шрифты.
Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен
Гайд, который поможет сделать красивый сайт без дизайнера и опыта. В первой части разбираемся в типах сайтов и собираем нужную информацию.
«Лучший UX ever», насос для pop-up окон и немного браузерных игр — необычные веб-проекты для развлечения и вдохновения
Творческие веб-проекты, чтобы потыкать, отдохнуть и вдохновиться.
Какие типичные ошибки в дизайне сайта допускают новички — рассказывают эксперты
Разработка дизайна — штука непростая, что выливается в разные ошибки начинающих. О том, какие ошибки можно допустить, узнали у экспертов.
Как раскрутить сайт — отвечают эксперты
Для многих свой сайт давно перестал быть роскошью, а стал необходимостью. Но сделать его — полдела. Как раскрутить сайт? Узнаем у экспертов.
Подборка сайтов, которые застряли в нулевых
Веб-дизайн 90-х и 00-х годов — это ребёнок, который учится ходить. Ему пока неведомо абстрактное мышление, а информацию он усваивает только в максимально простом изложении: много картинок, яркие цвета, простые…
Подборка книг для начинающего веб-разработчика
В перечне книг вы найдёте материалы по JavaScript, Node.js, React.js, CSS, HTML, паттернах проектирования и адаптивному веб-дизайну.
Русскоязычный видеокурс «Vue.js для начинающих»
Vue.js — это JavaScript-фреймворк для создания динамичных сайтов и одностраничных веб-приложений. Серия видеоуроков познакомит с его возможностями.
Как украсить свой сайт к Новому году?
Мы собрали подборку из нескольких скриптов, которые создадут атмосферу Нового года на вашем сайте. Внедряйте и радуйте своих посетителей.
Основы CSS: блочная модель
Блочная модель CSS — одна из основ веб-дизайна, которая в дальнейшем помогает лучше кастомизировать страницы. Разбираемся, как она устроена.
Создание анимированного компонента навигации на сайте
Существует множество классных готовых компонентов навигации. А что насчёт своего собственного? Разбираемся, как создать такой с помощью Vue.js и TweenMax.
Дизайн будущего: как делать современные макеты веб-сайтов
Раньше было лучше — сегодня все сайты как под копирку, а ведь порой так хочется разнообразия. Разбираемся, как исправить ситуацию.
Резюме быстро и легко — обзор инструмента best-resume-ever
Этот инструмент предназначен для быстрого составления красивого резюме с помощью Vue и LESS.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2
Продолжение серии обучающих статей по работе с Anime.js. В этой части вы узнаете, как использовать Anime.js для правильного тайминга анимации разных элементов, используя определённые параметры.
Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 1
В чем разница между веб-разработчиком и веб-дизайнером
Веб-дизайнера и веб-разработчика объединяет только «веб-», в остальном — это очень разные профессии. Объясняем, почему и как обучиться этим специальностям.
Вёрстка и дизайн: подборка книг для начинающих веб-разработчиков
Здесь мы собрали подборку книг, которые помогут прокачать свои навыки начинающим веб-программистам. Рассматриваются HTML, CSS, JS, PHP и веб-дизайн.
Старые дизайны известных веб-страниц: популярные сайты вчера и сегодня
Покопались в архивах, вспомнили, как популярные ресурсы выглядели несколько лет назад, и сравнили их старые дизайны с обновленными.
Семь ужасных грехов старомодного веб-дизайна
Вы видели их… Вы знаете, как они выглядят… Да, мы говорим именно о них — сайтах, которые выглядят так, будто они застряли во временах Netscape 1996 года и модемов 56k. В то время подобные сайты были чем-то самим собой разумеющимся — у людей, их создающих, выбор инструментов был сильно ограничен. Но сегодня, когда красивый и удобный сайт может сделать самостоятельно даже школьник, подобные образчики вызывают скорее ужас, чем ностальгию. Дизайн сайта и отдельных его элементов влияет не только на восприятие вашего бизнеса, но и на SEO. Ниже мы привели самые ужасные элементы старомодного веб-дизайна, которые иногда встречаются и сейчас.1. Old School Ads — баннерная реклама Не спешите закрывать статью после прочтения подзаголовка. Да, современная баннерная реклама может быть привлекательной и даже полезной для пользователя: Говоря же об Old School Ads, мы подразумеваем старые ужасные рекламные баннеры на сайтах, которых было слишком много: Фактически, Google обесценивает страницы, на которых слишком много рекламы. Поэтому важно, чтобы ваши объявления располагались естественным образом. Как правило, это место — справа от имеющегося контента или внизу. У вас также может быть одно рекламное объявление в верхней части над меню навигации. Нужна еще одна причина, по которой необходимо избегать слишком большого количества баннерной рекламы? Пользователи! Они не любят рекламу, особенно яркую и всплывающую, окно которой трудно закрыть. И даже если кто-то перейдет по ней, скорее всего, это будет случайный клик. Однако не стоит отказываться от баннерной рекламы полностью. Если это красивое гармоничное изображение с действительно выгодным предложением, пользователи будут переходить на целевую страницу, увеличивая конверсию. Главное правило в этом случае — органичное сочетание баннера с дизайном сайта и его контентом.2. Неподходящие размеры Еще один «ребенок» конца 90-х — слишком узкие изображения. Одна из целей веб-дизайнеров — сделать дизайн доступным для просмотра на большинстве устройств. В 90-х годах это были ЭЛТ-мониторы с разрешением 800×600. Сегодня разброс устройств и их разрешений так велик, что создаются специальные сайты, на которых вы можете проверить, как будет отображаться ваш сайт на том или ином устройстве. Наш совет: при создании сайта используйте адаптивный веб-дизайн.Это означает, что вашему веб-сайту не нужно распознавать тип устройства, он просто выводит и отображает содержимое в зависимости от размера экрана. На сегодняшний день это самое оптимальное решение проблемы различных устройств.3. Таблицы Когда-то сайты были структурированы с помощью таблиц. Это позволяло ускорить разработку и создание сайта и помогало поддерживать код. Со временем появились более эффективные методы структурирования контента, и таблицы стали исчезать. Современные методы кодирования, а также использование плагинов, обеспечивают более гибкий дизайн. Поисковые системы могут хорошо читать таблицы, но это делает ваш сайт похожим на допотопного монстра.4. Заставка Заставка — это страница, которая появляется перед загрузкой домашней страницы. При этом пользователи обычно должны нажать кнопку «Войти на сайт». Существует множество причин, по которым вы никогда не должны использовать заставку. Мы перечислим самые основные:Читайте также: Адаптив, отзывчивость или мобильная версия — что выбрать
- При первом посещении пользователь может увидеть в заставке всего лишь необычный эффект. Но если вы показываете ее постоянным пользователям каждый раз при переходе на сайт, они захотят вернуться сюда с меньшей вероятностью;
- Какое-то количество посетителей не будет нажимать кнопку входа на сайт, а уйдут сразу. Вы потеряете значительную часть трафика;
- Дополнительный слой для сканирования поисковыми системами. Чем сложнее будет его индексация, тем хуже будут ваши SEO-результаты.
- вы не сможете отслеживать страницы, с которых люди попадают на ваш сайт, а также их путь по сайту;
- пользователям категорически не нравятся динамические URL-адреса, так как они доверяют целевой надписи, а не набору бессмысленных символов;
- поисковые системы не в восторге от динамических URL-адресов, потому что они не могут сохранять их для индексации. Поисковая система считает, что у вас есть несколько страниц с одинаковым содержанием, одна из них может быть заблокирована.
- Поисковым системам не нравится Flash, потому что они не могут анализировать его содержимое;
- Люди ненавидят Flash, потому что сайты, созданные с его использованием, часто имеют функции автозапуска (например, музыка). поэтому вместо того, чтобы сосредоточиться на сайте, человек судорожно ищет кнопку отключения музыки или просто закрывает сайт;
- Пользователям не нравится просматривать сайты со множеством движущихся частей, мигалочек, пульсирований и т.д. Им нравится то, на что приятно смотреть и легко читать;
- Flash не работает на устройствах iOS, а на платформе Android, пользовательский интерфейс Flash выглядит весьма удручающе. Вы действительно хотите потерять почти 20% трафика?
13 основных правил веб-дизайна — что должен знать заказчик сайта
Что такое современный сайт? Удобная навигация, красивые картинки, графика и видео и… много других опций, которые подчиняются определенным правилам. Сегодня расскажем об основных правилах веб-дизайна, которые актуальны сейчас. Проверьте, соответствует ли им ваш сайт!
Сразу оговоримся: сегодня расскажем об основных правилах, этакой библии каждого веб-дизайнера. Есть и более тонкие нюансы — о них речь пойдет в следующих статьях. Кстати, если вам попался специалист, который утверждает, что не признает никаких правил и любит креативить — сто раз подумайте, а еще лучше — посмотрите его портфолио и оцените работы лично. Представьте, что вам попался каменщик, который отвергает строительные нормы и кладет кирпичи как попало — доверите вы ему свой дом? Вот то-то же. Итак, 13 главных правил хорошего веб-дизайна перед вами.
Основные правила веб-дизайна
Правило 1. Хорошая скорость загрузки страницы
Казалось бы, причем здесь веб-дизайн? Объясняем. Многие специалисты так увлекаются графическими экспериментами, что не обращают внимания на скорость загрузки. А она, если напичкать сайт виджетами, анимацией и видео, неизбежно будет падать. Если сайт будет грузиться медленно — не у каждого посетителя хватит терпения ждать, половина просто покинет ваш ресурс, не успев ничего толком посмотреть. С другой стороны, без графических эффектов тоже никуда. Скучную серую простыню текста никто читать не будет — если у вас, конечно, не “Википедия”.
Подумайте: что вам важнее: визуализация или скорость. Мы советуем искать золотую середину: графика, разумеется, нужна, но попросите веб-дизайнера действовать без фанатизма. Ну и делайте сайт на хорошем движке: от него тоже многое зависит.
Правило 2. Юзабилити, или удобство использования сайта
Ваш сайт может быть современным и красивым, но какой в этом толк, если он безнадежно, отчаянно неудобен? Под юзабилити подразумевается удобство ресурса для посетителя. Например, заходит он на главную страницу и видит краткое описание: ага, это интернет-магазин спортивных товаров, все понятно. Хочет посмотреть меню, там все разложено по полочкам: вот каталог, вот условия заказа, здесь сведения о доставке, а тут контактная информация. Идет в каталог, видит категории и подкатегории товаров. Если на сайте действует правило трех кликов (добраться до нужного товара пользователь должен не более чем за три клика. Если действий предполагается больше — юзабилити хромает, надо исправлять) — замечательно.
Идем дальше. На сайте есть окно поиска — прекрасно, человек может найти нужный товар в один момент. Имеется большая кнопка корзины, как положено, в правом верхнем углу, видимая с каждой страницы? Замечательно: посетителю не придется возвращаться на главную и искать корзину среди иконок и пунктов меню. Ну и так далее.
Если всего этого нет — сайт неудобен, посетитель с большой вероятностью покинет его и будет искать другой, в котором позаботились о юзабилити. Никто не будет сидеть и разбираться, где же на сайте находится раздел “Распродажи” — проще закрыть вкладку и вернуться в поисковик. Конкуренты скажут вам за это спасибо, а вот бюджет на продвижение помашет ручкой и скажут “прощай”: считай, деньги улетели в трубу. Да и конверсия падает: посетитель ушел и не успел совершить никаких целевых действий.
Правило 3. Читаемые шрифты
Давно миновала эпоха, когда чем заковыристее были шрифты — тем круче считалось. Случалось, что буквы были такими затейливыми, что слова просто не читались. А на стандартные шрифты накладывались эффекты и цвета. Сейчас тренды сменились: чем шрифты проще, тем лучше. Посмотрите, как оформляют сайты крупные компании и интернет-магазины: они используют крупные читаемые шрифты, которые разберет даже младенец. Еще одно правило: на странице должно быть не более 2-3 разных шрифтов. Если больше — это граничит с аляпистостью и безвкусицей. Допустимо использовать в логотипе один шрифт, оффере — второй, в тексте — третий, и достаточно.
Еще лучше разработать фирменный стиль, в который будут входить определенный набор корпоративных шрифтов. Как правило, при разработке заказчику выдается брендбук, в котором прописаны эти шрифты. Это очень удобно для дальнейшей работы с дизайнерами, типографией, которая изготовит вам визитки, буклеты и другие промо-материалы. Согласно условиям договора, они будут обязаны использовать в работе только эти шрифты — без всякой самодеятельности. Впоследствии, если вы поменяете веб-дизайнера, просто дадите брендбук другому исполнителю — он все поймет.
Правило 4. Умеренная цветовая палитра
Тут тоже действует правило: не более 3 цветов на странице. Допускаются оттенки и полутона, но не более. Черный, красный, желтый и зеленый — это уже перебор: пожалейте бедного посетителя. За буйством красок он просто не заметит полезную информацию или будет продираться сквозь ваши светофоры с лупой в руках. И снова будем советовать фирменный стиль: помимо шрифтов, вам подберут еще и корпоративные цвета, которые в дальнейшем вы будете использовать для любых промо-материалов, в том числе и оформлении сайта, паблика в соцсетях, ютуб-канала и других.
Правило 5. Современный фон
Еще один привет из девяностых: сложносочиненный фон, или подложка, для сайта. До сих пор используется в среде начинающих веб-дизайнеров, на бюджетных сайтах доменов второго и третьего уровня, очень активно — в “Живом журнале”. Наивно думать, что если вы продаете украшения — фоном должны идти золотые россыпи, если продукты — груды еды. Все это слишком очевидно и банально. Нет, картинки в тему всегда актуальны, но для фона лучше выбрать что-то необычное, неизбитое. Чистые тона и градиенты, трехмерные изображения, виртуальная реальность — вот что модно сейчас.
Правило 6. Единый стиль
Шрифты — строгие, цвета — веселенькие, а картинки надерганы из разных стоков по принципу “пусть будет, да побольше”? Одна форма заказа горизонтальная, другая — вертикальная, и в каждой разные шрифты? Стоп, так не пойдет: продающий дизайн предполагает единство стиля. Как сказал классик, “в одну телегу впрячь не можно коня и трепетную лань!”
Правило 7. Золотое сечение
Это альфа и омега любого дизайна — правило золотого сечения дает идеальные пропорции, дизайн выглядит гармонично и естественно. Золотое сечение выглядит визуально вот так:
Если не заморачиваться с формулой, пропорции золотого сечения отдельных элементов составляют 3/2, или 5/3, и так далее. По этому принципу делаются основные элементы сайта. Например, когда при разработке лендинга нужно разместить на странице несколько блоков, золотое сечение приходит на помощь. Идеальная пропорция ширины каждого блока выглядит примерно так:
То же самое касается типографики: колонок текста, размеров заголовка по отношению к шрифту основного текста, размера рекламного баннера и текста под ним и так далее. Золотая спираль может быть как вертикальной, так и горизонтальной.
Правило 8. Правило третей
Еще одно незыблемое правило дизайна, которое применяется в разметке страниц и наполнении их контентом. Каждая страница делится на три одинаковые части по горизонтали и вертикали. На месте пересечения этих частей мысленно поставьте точки — это и будут ключевые места, куда чаще всего падает взгляд посетителя.
Следовательно, рядом с этими точками нужно размещать самую важную информацию — чтобы наверняка увидели. Это может быть кнопка с call to action — призывом к действию, или форма заказа. Считается, что самая “активная” точка — левый верхний угол. Присмотритесь: именно там на сайтах по традиции располагается логотип. Совпадение? Не думаю!
Правило 9. Знание эффекта “баннерной слепоты”
Наверняка вы слышали об этом понятии. Люди так привыкли к обилию рекламы, что баннеры и прочие рекламные блоки просто игнорируют — сразу ищут глазами актуальную информацию. Скажем, если посетитель зайдет на страницу карточки товара, он сразу найдет глазами самое главное — цену, фото, описание. Если даже эта информация окажется в плотном кольце рекламы — ее не заметят или отмахнутся, как от назойливой мухи.
Согласно исследованию Якоба Нильсена, мы просматриваем информацию примерно вот так, как на этой картинке. Красно-желтые пятна — то, что привлекает внимание посетителей. Зеленым выделены рекламные блоки — как видите, на них совсем не обращают внимания.
Что же делать? Хороший веб-дизайнер знает несколько правил, как бороться с баннерной слепотой, и обязательно порекомендует их заказчику. Впрочем, прочитав эту статью, вы и сами будете в курсе. Итак, правила:
- размещать рекламу чем выше — тем лучше. Огромный баннер на главной с информацией о скидках точно не пройдет незамеченным;
- играть на контрасте: выделять рекламу ярким цветом, делать контрастные кнопки призыва к действию. — и все сразу понятно. Так вы экономите время пользователя и делаете сайт более удобным.
Правило 11. Новая ссылка — та же вкладка
Любая внутренняя ссылка с вашего сайта (баннер на главной, ведущий на страницу распродаж, статья в блоге, которая отсылает посетителя в карточку товара, видео на “Ютубе”, иконка соцсетей, в которых представлен ваш ресурс — что угодно) должна открываться в том же окне. Много копий сломалось на эту тему: пользователям удобнее, когда ссылка открывается в новом окне, особенно когда ссылок много. Но в этом случае они могут не нажать кнопку “назад” и не вернуться на самую первую страницу, а то и забыть, о чем там вообще говорилось. А это значит, что они могут покинуть ваш сайт, не досмотрев важную информацию. Поэтому мы советуем внутренние ссылки открывать во внутренних же окнах, а внешние — в новых. Например, если ссылки ведут на дружественный сайт — пожалуйста, пусть открывается в новом. Если направляют на свой же паблик в соцсети — тоже без проблем.
Правило 12. Больше визуализации!
Если на сайте и так много информации, облегчите жизнь пользователям: там, где можно применять иконки или анимацию — применяйте. Например, уже повсеместно используются кнопки соцсетей, корзина для складывания товара, значок лупы — для поиска, и так далее.
Наш совет: используйте понятные распространенные картинки и иконки, чтобы не запутать посетителя. Особенно это касается сайтов, нацеленных на продажи. Здесь чем проще, тем лучше: процесс покупки должен быть как можно легче, чтобы не отбить охоту вообще что-то покупать.
Правило 13. Адаптивная верстка
И последнее: веб-дизайнер должен уметь делать адаптивную верстку. Не просто мобильную версию — а именно адаптивную, которая одинаково хорошо отображается со всех устройств. Все больше людей заходят на сайты со смартфонов и ноутбуков — важно, чтобы сайт отлично загружался и читался. Также нужно обратить внимание на то, что один и тот же ресурс может по-разному отображаться даже на разных браузерах. Поэтому нужно проверять макет будущего сайта на каждом браузере и устройстве.
И это еще только начало! Веб-дизайн — целая наука, которой мы овладели, смеем надеяться, на твердую пятерку. В этом блоге мы постараемся рассказать вам обо всех тонкостях нашей работы. Давайте общаться!
Курсы веб-дизайна. Онлайн-школа обучения дизайна сайтов.
Курсы веб-дизайна. Онлайн-школа обучения дизайна сайтов.Бесплатный мастер-класс
Регистрируйся бесплатно
Помогай другим людям создавать и запускать сайты на Tilda, и зарабатывай на этом удаленноОбучение онлайн
в любое удобное времяОбучение прошли
более 436 учениковСертификат
по окончанию курсаПроекты наших выпускников
Кто наши ученики
Новички
Если вы очень хотите научиться делать красивый и понятный дизайн сайтов, но слова «параллакс эффект» или «флэт дизайн» вводят вас в ступор, а мысль освоить фотошоп заставляет вас тихо страдать. Освоите азы профессии и сможете с нуля создавать современный веб-дизайн.
Дизайнеры
Вы уже двигаетесь в каком-то направлении дизайна и вы хотите развиваться дальше, вам интересны современные тенденции.
Освоите создание современного веб-дизайна.Предприниматели
У вас не так много времени, но вам очень нужно разобраться в принципах создания хорошего дизайна сайтов.
Разберетесь в основах, сможете правильно ставить задачи дизайнеру и оценивать уровень работы.
Художники
Вам нравится творить. Вы хотите создавать красивый веб-дизайн. Возможно ваши предыдущие попытки были не очень успешны. Сможете применить свои навыки в веб-дизайне, многократно усилив свой потенциал. Создадите свой первый профессиональный проект под руководством наставника.
Web-мастера
Вы хорошо разбираетесь в вебе, но чувствуете, что вам не хватает навыков и умений в веб-дизайне.
Значительно увеличите эффективность своей работы за счет практических знаний и практики в грамотном дизайне.Фотографы
Вам интересно создавать качественные и красивые сайты самостоятельно, опираясь на свой контент.
Разберетесь в правильном подходе создания веб-дизайна. Освоите инструменты по самостоятельному созданию сайта.
Итоги курса
Получишь доступ и поддержку в закрытой группе web-дизайнеров
Освоишь работу в программе Photoshop
Сможешь самостоятельно создавать PRO дизайн сайтов
Получишь Сертификат и полный комплект учебного материала
Принципы красивого веб-дизайна
Эта статья была написана в 2007 году и остается одним из наших самых популярных постов. Если вы хотите узнать больше о веб-дизайне, вы можете найти эту недавнюю статью об использовании lorempixel.
Для многих веб-разработчиков, включая меня, самая пугающая часть процесса проектирования — это начало. Представьте на мгновение, что вы сидите за своим столом с чашкой кофе и визитной карточкой потенциального клиента, которому нужен базовый корпоративный веб-сайт.Обычно визитная карточка многое говорит об идентичности компании и может быть использована в качестве вдохновения для дизайна.К сожалению, это не относится к карте Smith Services на рис. 1.1. Он черно-белый, весь текст, без символов, мля. Поговорим о чистом холсте! Итак, куда вы идете отсюда? Вам нужен план… и вам нужно связаться с мистером Смитом. Получив критический отзыв от клиента о том, чем на самом деле занимается его компания, и собрав информацию о контенте, с которым вам нужно работать, вы сможете разработать успешный макет и дизайн.
Рисунок 1.1: Простая визитная карточка клиентаЛюбой, независимо от уровня его художественного таланта, может создать дизайн, который будет хорошо работать и хорошо выглядеть — все, что требуется, — это небольшой опыт и практические знания некоторых основных принципов верстки. Книга, из которой взята эта статья, The Principles of Beautiful Web Design , охватывает каждый из этих принципов по очереди, показывая даже самым малоизвестным из нас, как создавать красивый, элегантный, функциональный дизайн — см. Оглавление для подробностей.Вы можете скачать эту статью — главу 1 книги — в формате PDF для чтения в автономном режиме. Итак, давайте начнем с основ, и вскоре у вас будет база, необходимая для создания веб-сайтов галерейного качества.
Процесс проектирования
В книге по веб-программированию, которую я недавно прочитал, автор представил вымышленный сценарий, чтобы объяснить, почему читателям необходимо разработать макет страницы и создать таблицу стилей для примера приложения. По сути, он сказал, что веб-дизайнер компании откуда-то черпал вдохновение и вернется не раньше, чем в этом году.Это звучало так, как если бы он имел в виду, что дизайнеры склонны терять сознание и месяцами идти на поиски видения, но я собираюсь предположить, что автор сделал этот комментарий милым образом, и представлю тот же сценарий.
Вот гипотетические детали этого сценария: Джиму Смиту из Smith Services нужен веб-сайт. У нас есть его визитная карточка, и он очень хочет начать. К сожалению, дизайнера нет в городе … подождите, это плохой предлог. Допустим, он был ранен во время уродливой давки молочной коровы во время посещения фестиваля South by South West Interactive (SXSWi) в Остине, штат Техас.Да, это правдоподобно. Как бы то ни было, он отсутствует на несколько месяцев, а вы сами по себе. Так с чего же начать? Фактический процесс разработки всего сайта или веб-приложения включает в себя множество шагов, но процесс создания дизайн-компиляции сводится только к двум задачам: обнаружению и реализации.
Дискавери
Компонент открытия в процессе проектирования — это встреча с клиентами и выяснение того, что они делают. Это может не казаться «дизайнерской задачей», но сбор информации о том, кто ваши клиенты и как они ведут свой бизнес, — это единственный способ разработать соответствующий и эффективный дизайн.
Прежде чем планировать первую встречу с клиентами, уделите несколько минут тому, чтобы выяснить, что они делают и как они это делают. Если они попросили вас разработать для них веб-сайт, возможно, в настоящее время у них его нет, но все равно погуглить. Если вы не можете найти какую-либо конкретную информацию об их бизнесе, постарайтесь узнать немного больше об их отрасли до первой встречи. По возможности первая встреча с клиентом должна быть реальной личной встречей. Иногда расстояние диктует необходимость первой встречи по телефону, но если клиент в городе, назначьте время для встречи.
Имейте в виду, что эта встреча не предназначена для того, чтобы произвести впечатление на клиента, продать себя или продать веб-сайт. Первая встреча с клиентом — это общение. Старайтесь больше слушать, чем говорить, и возьмите с собой блокнот, на котором вы можете делать записи. Не берите с собой ноутбук. У компьютеров есть экраны, и люди обычно смотрят на них. Если клиент не смотрит на экран все время, вы будете писать заметки. Если вам нужно перетащить на собрание какие-то технологии, принесите диктофон.Тем не менее, по моему опыту, блокнот менее опасен для зачастую не очень технически подкованного клиента.
Вот несколько вопросов, которые я люблю задавать на первых встречах с клиентами, даже если я уже ответил на них сам через поисковую систему:
- Чем занимается компания?
- Какова ваша роль в компании?
- Есть ли у компании существующий логотип или торговая марка?
- Какова ваша цель при разработке веб-сайта?
- Какую информацию вы хотите предоставить в Интернете?
- Кто составляет вашу целевую аудиторию? Есть ли у его членов общие демографические данные, такие как возраст, пол или физическое местонахождение?
- Кто ваши конкуренты и есть ли у них сайты?
Иногда я начинаю с большего количества вопросов, чем перечислено здесь — используйте свое воображение и попытайтесь придумать несколько творческих запросов, которые действительно дадут вам больше понимания организации клиента.Если вы программист, избегайте технического жаргона. Если вы дизайнер, не говорите конкретно о дизайне. Конечно, это может быть все, о чем вы думаете, но семантическая разметка, гибкие и фиксированные макеты и цветовые схемы, скорее всего, будут очень мало значить для клиента. Что еще хуже, такие разговоры могут принести вам ошибочные мнения о дизайне еще до того, как вы начнете думать о дизайне самостоятельно.
Реализация
Следующий шаг в процессе проектирования — взять то, что вы узнали от клиента, и использовать это для создания дизайна.Независимо от проекта, постарайтесь не увлекаться технологиями, связанными с созданием веб-сайтов — по крайней мере, сначала. На этом этапе не имеет значения, будет ли сайт содержать простой HTML, шаблон для системы управления контентом или приложение Ruby on Rails; Суть в том, что у нас есть интерфейс для дизайна и чистый лист бумаги. «Бумага?» Правильно, бумага. Вы действительно думали, что я позволю вам вернуться к вашему драгоценному компьютеру сразу после окончания встречи с клиентом? Ни за что.И вот почему: легко потерять внимание к дизайну, если вы начнете думать о макете перед компьютером. Если вы начнете с бумаги, вы можете игнорировать технические ограничения браузеров и CSS и сосредоточиться на том, как вы хотите, чтобы конечный продукт выглядел. Теперь вы можете подумать, что все хорошие дизайнеры носят с собой модные альбомы с набросками в твердом переплете, в которых они используют дорогие маркеры и краски для создания шедевральных макетов веб-страниц. Для меня эквивалент — записная книжка в спиральном переплете за 79 центов и любой пишущий инструмент, который я могу найти на своем столе, который все еще работает.
Я начинаю с набросков нескольких возможных макетов. После нескольких из этих набросков я выбираю тот, который мне нравится, перехожу в Photoshop и использую инструмент прямоугольник, чтобы заблокировать области, которые я отметил на бумаге. Определив свой макет, я экспериментирую с цветами переднего плана и фона, пока не получу сплошную цветовую схему. Я продолжаю крутить ручки Photoshop и перемещать пиксели, пока, наконец, не получу комп, который нужно показать клиенту.
Просто, правда? Хорошо, возможно, я пропустил несколько шагов в этом кратком описании.Честно говоря, когда люди спрашивают меня, как я делаю то, что делаю, они обычно получают аналогичное объяснение. Правда в том, что есть связки подсознательной информации из моего прошлого опыта и тех старых курсов дизайна и искусства в колледже, которые помогли мне определить свой собственный процесс дизайна.
Изучение дизайна похоже на обучение программированию. У некоторых людей к этому есть немного сноровки, но научиться может любой. Так же, как есть хороший код и уродливый код, есть хороший дизайн и уродливый дизайн.Изучение некоторых принципов и условностей, связанных с дизайном, поможет вам понять разницу между хорошим и уродливым и поможет вам создать свой собственный процесс проектирования.
Определение хорошего дизайна
Есть две основные точки зрения, с которых большинство людей определяет, является ли дизайн веб-сайта «хорошим» или «плохим». Существует строгая точка зрения на удобство использования, в которой основное внимание уделяется функциональности, эффективному представлению информации и эффективности.Затем есть чисто эстетическая перспектива, которая связана с презентацией, горячей анимацией и сексуальной графикой. Некоторые дизайнеры увлекаются эстетикой и графикой и забывают о пользователях, а некоторые гуру юзабилити теряются в пользовательском тестировании и забывают о визуальной привлекательности. Чтобы привлечь внимание людей и сохранить их интерес, важно максимально использовать и то, и другое.
Самое важное, что нужно иметь в виду, — это то, что дизайн — это коммуникация. Если вы создаете веб-сайт, который работает и хорошо представляет информацию, но выглядит некрасиво или не соответствует бренду клиента, никто не захочет им пользоваться.Точно так же, если вы создадите красивый веб-сайт, который не будет использоваться и недоступен, люди не смогут им пользоваться. Действительно, элементы и функциональность готового дизайна веб-сайта должны работать как единое целое, так что:
Пользователи довольны дизайном, но их привлекает контент
Шаблон
Одна из самых больших проблем среди профессионалов в области юзабилити — время, необходимое пользователям для сканирования страницы в поисках нужной информации, будь то часть контента или ссылка на другую. страница или поле формы.Дизайн не должен быть помехой; он должен действовать как канал между пользователем и информацией.«Автобус, полный хиппи» Джона Окстона (изображенный на рис. 1.2) — отличный пример красивого и удобного дизайна. Красочная графика растет вокруг блоков контента, возвращая взгляд к информации, не мешая читабельности или организации страниц.
Рисунок 1.2: Шаблон «Автобус, полный хиппи»
Пользователи могут легко перемещаться с помощью интуитивной навигации
Подробнее о размещении навигации мы поговорим позже, но сам основной блок навигации должен быть четко виден на странице , и каждая ссылка должна иметь описательный заголовок.Структура навигации, которая не только меняет внешний вид при наведении курсора мыши, но также указывает на активную страницу или раздел, как это делает меню, показанное на рисунке 1.3, помогает пользователям распознать, где они находятся и как добраться туда, куда они хотят перейти.
Рисунок 1.3: Меню навигации из темы Halloween 2006 IconfactoryДополнительная навигация, поля поиска и исходящие ссылки не должны быть доминирующими элементами страницы. Если мы упростим поиск этих элементов и визуально отделим их от контента, мы позволим пользователям сосредоточиться на информации, хотя они будут знать, где искать, когда будут готовы перейти к другому контенту.
Пользователи распознают каждую страницу как принадлежащую сайту
Даже если есть существенная разница между макетом домашней страницы и остальной частью сайта, единая тема или стиль должны существовать на всех страницах сайта, чтобы помочь удерживать проектируем вместе.Взгляните на скриншоты списка заказов Стива Смита на рис. 1.4. Хотя блоки содержимого на этих страницах разделены по-разному, есть несколько визуальных индикаторов, которые позволяют пользователям узнать, что это страницы с одного сайта.Во многом это единство связано с повторением блоков идентификации и навигации. Последовательное использование очень ограниченной цветовой палитры (черный, белый, зеленый и голубой) также помогает унифицировать страницы.
Рисунок 1.4: Страницы из упорядоченного спискаАнатомия веб-страницы
Рисунок 1.5: Анатомия веб-страницыДаже с точки зрения не дизайнера, определение дизайна, удовлетворяющего всем требованиям, которые я изложил выше, является простой задачей.Это похоже на создание фразы на холодильнике из стихотворных слов. Хотя есть миллионы способов расположить слова, только некоторые из них имеют смысл. Слова магнитной поэзии подобны компонентам или блокам веб-страницы. Хотя количество этих необходимых блоков зависит от размера и тематики сайта, большинство веб-сайтов имеют следующие компоненты, как показано на рисунке 1.5.
Содержащий блок
У каждой веб-страницы есть контейнер.Это может быть тег тела страницы, полностью содержащий тег div или (и я действительно не хочу этого говорить, но) таблица. Без какого-то контейнера у нас не было бы места для размещения содержимого нашей страницы. Элементы будут перемещаться за пределы окна браузера и уходить в пустое пространство. Ширина контейнера может быть жидкой, то есть он расширяется, чтобы заполнить ширину окна браузера; или фиксированный, чтобы содержимое было одинаковой ширины независимо от размера окна.
Логотип
Когда дизайнеры говорят об идентичности, они имеют в виду логотип и цвета, которые используются в различных формах маркетинга компании, таких как визитные карточки, фирменные бланки, брошюры и т. Д.
Идентификационный блок, который появляется на веб-сайте, должен содержать логотип или название компании и располагаться в верхней части каждой страницы веб-сайта. Блок идентификации повышает узнаваемость бренда и позволяет пользователям узнать, что просматриваемые ими страницы являются частью одного сайта.
Навигация
Важно, чтобы систему навигации по сайту было легко найти и использовать. Пользователи ожидают увидеть навигацию прямо вверху страницы. Планируете ли вы использовать вертикальное меню внизу страницы или горизонтальное меню вверху страницы, навигация должна располагаться как можно ближе к верхней части макета.По крайней мере, все основные элементы навигации должны отображаться «в верхней части страницы».
Содержание
Контент — король. Типичный посетитель веб-сайта входит и покидает веб-сайт за считанные секунды. Если посетители не могут найти то, что ищут, они, несомненно, закроют браузер или перейдут на другой сайт. Важно, чтобы основной блок контента оставался центральным элементом дизайна, чтобы не тратить драгоценные секунды на то, чтобы посетители просматривали страницу в поисках нужной информации.
Нижний колонтитул
Нижний колонтитул, расположенный внизу страницы, обычно содержит информацию об авторских правах, контактную и юридическую информацию, а также несколько ссылок на основные разделы сайта.
Если конечный контент отделен от нижней части окна браузера, нижний колонтитул должен указывать пользователям, что они находятся внизу страницы.
Пробел
Термин «пробел» в графическом дизайне (или отрицательное пространство) буквально относится к любой области страницы, не покрытой шрифтом или иллюстрациями.Хотя многие начинающие веб-дизайнеры (и большинство клиентов) чувствуют необходимость заполнить каждый дюйм веб-страницы фотографиями, текстом, таблицами и данными, наличие пустого места на странице не менее важно, чем наличие содержимого. Без тщательно спланированного пространства дизайн будет казаться замкнутым, как переполненная комната. Пробелы помогают дизайну «дышать», направляя взгляд пользователя по странице, но также помогают создать баланс и единство — две важные концепции, которые мы обсудим более подробно позже в этой главе.
На этом этапе у нас состоялась первая встреча с г-ном.Смит, наш теоретический клиент, и это очень помогло. Он очень подробно объяснил, что он делает и чего хочет, чтобы сайт достиг. Несмотря на то, что у нас еще нет фактического контента, мы можем использовать стандартные блоки анатомии веб-страницы, чтобы начать разработку макета. Хотя другие блоки, специфичные для сайта, встроены в дизайн многих макетов веб-сайтов, анатомия веб-страницы позволяет суммировать наиболее распространенные блоки.
Теперь, когда у нас есть эта информация, как мы можем использовать ее для создания основного макета для Smith’s Services? Пришло время немного теории сеток.
Теория сеток
Когда большинство людей думают о сетях, они думают о проектировании и архитектуре. Однако сетка также является важным инструментом графического дизайна.
Использование сетки — это не только квадрат и выстраивание объектов, но и пропорции. Вот где «теория» входит в теорию сеток. Многие историки искусства считают голландского художника Пита Мондриана отцом графического дизайна за его изощренное использование сеток. Тем не менее, классическая теория сетки влияла на успешные художественные усилия на протяжении тысячелетий.Концепция разделения элементов композиции восходит к математическим идеям, установленным Пифагором и его последователями, которые определяли числа как отношения, а не как отдельные единицы.
Пифагорейцы наблюдали математическую закономерность, которая так часто встречалась в природе, что они считали ее вдохновленной Богом. Они называли этот образец золотым сечением или божественной пропорцией. Основная идея проиллюстрирована на рисунке 1.6. Линию можно разделить пополам с помощью золотого сечения, разделив ее длину на 1.62. Это магическое число 1,62 на самом деле 1,6180339… Это иррациональное число, которое обычно обозначается как Φ (произносится как фи). Объяснение математики, использованной для вычисления этого числа, слишком сложно для этого обсуждения и на самом деле не поможет вам стать лучшим дизайнером, поэтому я избавлю вас от деталей. Кроме того, моя математика немного ржавая.
Рисунок 1.6: Золотое сечениеИтак, какое отношение это соотношение имеет к графическому дизайну? В целом композиции, разделенные линиями, пропорциональными золотому сечению, считаются эстетически приятными.Художники эпохи Возрождения использовали божественные пропорции при создании своих картин, скульптур и архитектуры, точно так же, как сегодня дизайнеры часто используют это соотношение при создании макетов страниц, плакатов и брошюр. Вместо того, чтобы полагаться на художественные идеи, божественная пропорция дает нам логические руководящие принципы для создания привлекательных макетов.
Правило третей
Упрощенная версия золотого сечения — это правило третей или, с родным акцентом одного из моих профессоров графического дизайна, «правило какашек».Линия, разделенная пополам золотым сечением, делится на две части, одна из которых примерно в два раза больше другой. Разделение композиции на трети — простой способ применить божественную пропорцию, не доставая калькулятора.
Чтобы начать карандашную и бумажную версию макета, нарисуйте прямоугольник. Вертикальные и горизонтальные размеры не имеют значения, но постарайтесь сохранить прямые линии и углы в 90 градусов.
Теперь разделите прямоугольник по горизонтали и вертикали на трети.Как я уже сказал, пока не стоит думать о технологиях.
Затем снова разделите верхнюю треть макета на трети.
Наконец, разделите каждый столбец пополам, чтобы создать немного большую сетку.
У вас должен быть квадрат на бумаге, похожий на сетку по правилу третей на последней диаграмме на рис. 1.7. Идите вперед и повторите вышеуказанные шаги, чтобы у вас было несколько сеток с правилом третей, в которых можно попробовать различные варианты макета.
Установив эту простую сетку, мы можем начать раскладывать наши элементы.Большой основной прямоугольник представляет собой контейнер, о котором мы говорили в разделе «Анатомия веб-страницы». При использовании этого метода макета я предпочитаю размещать самый большой блок первым. Обычно этот блок представляет собой контент. В моей первой сетке с правилом третей я помещаю блок содержимого в пределах двух третей макета в правом нижнем углу. Затем я помещаю свой блок навигации в среднюю треть левого столбца. Я размещаю текстовую часть идентификационного блока над левой стороной контента, а графическую часть идентификационного элемента — над меню.Наконец, я раздвигаю блок авторских прав под контентом в правом столбце сетки. Результатом является верхний левый из четырех возможных компоновок, показанных на рисунке 1.8.
Рисунок 1.8: Четыре макета в сетках, которые следуют правилу третейПо мере того, как вы экспериментируете с различным расположением, используйте линии, образующие три основных столбца, в качестве направляющих для выравнивания блоков идентификации, навигации, содержимого и нижнего колонтитула. Очень заманчиво расположить все элементы по одной линии, но постарайтесь не допустить этого — визуально это не очень интересно.Вместо этого рассмотрите возможность проталкивания части блока над этой линией, как я поступил с блоком идентификации в примерах на рис. 1.8.
Другая тенденция для не дизайнеров, работающих над макетами, — выровнять все на странице по центру. Система сеток не позволяет нам делать это, но есть причина, по которой мы стремимся все сосредоточить. Причина в стремлении к равновесию.
Весы
В переносном смысле концепция визуального равновесия аналогична концепции физического равновесия, иллюстрируемой качелями.Как физические объекты имеют вес, так и элементы макета. Если элементы с обеих сторон макета имеют равный вес, они уравновешивают друг друга. Есть две основные формы визуального баланса: симметричная и асимметричная.
Симметричные весы
Симметричный баланс, или формальный баланс, возникает, когда элементы композиции одинаковы по обе стороны от осевой линии. Цифровая картина «Созерцание» Дэвида Лэнхэма, показанная на рисунке 1.9, является прекрасным примером этой концепции. Обратите внимание, что мужские и женские фигуры на этой картине почти одинаковы по положению и пропорциям. Даже закрашенные фоновые рамки являются зеркальным отображением друг друга.
Рисунок 1.9: Симметричный баланс — размышление Дэвида ЛэнхэмаХотя это может быть практично не для всех проектов и клиентов, этот тип симметрии, называемый горизонтальной симметрией, может применяться к макетам веб-сайтов путем центрирования содержимого или балансировки его между столбцами.Веб-сайт Grow Collective является примером такой симметрии. Обратите внимание на странице, показанной на рисунке 1.10, что области содержимого переходят от одного столбца в самом верху страницы к двум столбцам и трем столбцам в нижней части окна; тем не менее, макет по-прежнему сохраняет симметричный баланс. Большая часть остального контента сайта также разделена на симметричные столбцы.
Рисунок 1.10: Веб-страница Grow CollectiveДве другие формы симметричного баланса менее распространены в дизайне веб-сайтов из-за природы среды.Однако они обычно используются в логотипах и в полиграфическом дизайне. Это:
- двусторонняя симметрия, которая существует, когда композиция сбалансирована более чем по одной оси
- радиальная симметрия, которая возникает, когда элементы равномерно расположены вокруг центральной точки
Асимметричный баланс
Асимметричный баланс, или неформальный баланс, немного более абстрактный и, как правило, более интересный визуально, чем симметричный баланс.Вместо того, чтобы иметь зеркальные изображения по обе стороны макета, асимметричный баланс включает объекты разного размера, формы, тона или расположения. Эти объекты расположены так, что, несмотря на их различия, они уравнивают вес страницы. Если у вас есть большой объект на одной стороне страницы, и вы объединяете его с несколькими более мелкими предметами на другой стороне, композиция все равно может казаться сбалансированной.
Афиша концерта моего друга Джереми Дарти, представленная на рис. 1.11, является прекрасным примером асимметричного баланса.Визуальный вес большого розового фламинго слева уравновешивается совокупным весом меньших фламинго и небольших текстовых блоков в правой части макета. Обратите внимание также на то, что Джереми использует правило третей. Голубое облако за заголовком Pop Sucks занимает одну треть вертикального пространства и охватывает две трети горизонтального.
Взгляните на фотографию трех камней на рис. 1.12. Возможно, это не особенно захватывающая картина, но что касается баланса, она потрясающая! Если бы вы использовали лист бумаги, чтобы покрыть любой из трех камней ниже, вся фотография выглядела бы несбалансированной и незаконченной.Обычно так работает баланс. Это как если бы вся композиция была в рамке для картины, висящей на единственном гвозде на стене. Не требуется большого веса с одной или другой стороны, чтобы нарушить равновесие всей картины.
В отличие от симметричных весов, асимметричные весы очень универсальны, и поэтому их гораздо чаще используют в Интернете. Если вы посмотрите на большинство макетов веб-сайтов с двумя столбцами, вы заметите, что столбцы большего размера часто имеют очень светлый цвет — тактика, которая создает хороший контраст для текста и основного содержания.Крошечный столбец навигации часто темнее, имеет какую-то границу или выделяется другим способом, чтобы создать баланс в макете. Сайт Джона Хикса, Hicksdesign, показанный на рис. 1.13, является прекрасным примером асимметричного баланса. Тяжелая коричневая боковая панель, содержащая логотип и основную навигацию сайта, остается на правой стороне макета даже при прокрутке содержимого. Этот вездесущий элемент обеспечивает интерес и уравновешивает остальной контент на странице.
Рисунок 1.13: Hicksdesign — пример асимметричного балансаВ дизайне сайта Джона Хикса задействовано множество принципов — это не просто асимметричный баланс. На сайте есть большая гармония, которая достигается за счет повторяющихся ярких маркеров, одинаково окрашенных заголовков и согласованных шрифтов. Частично эта гармония возникает из-за того, что сайт соответствует принципам единства.
Единство
Теория дизайна описывает единство как способ взаимодействия различных элементов композиции друг с другом.Единый макет — это макет, который работает как единое целое, а не как отдельные части. Возьмем, к примеру, обезьян на рис. 1.14. Их похожие цвета и формы означают, что их можно легко распознать как группу, а не просто четыре обезьяны.
Хотя в наши дни это не такая уж проблема, единство — одна из многих причин, по которым веб-дизайнеры всегда презирали фреймы HTML. Важно, чтобы единство существовало не только в каждом элементе веб-страницы, но и во всей веб-странице — сама страница должна работать как единое целое.Мы можем использовать несколько подходов для достижения единства в макете (помимо избегания фреймов): близость и повторение.
Рядом
Близость — очевидный, но часто упускаемый из виду способ заставить группу объектов ощущаться как единое целое. Размещение объектов близко друг к другу в макете создает фокус, к которому будет притягиваться взгляд. Взгляните на цифровую картину на рис. 1.15. Будучи составленными из, казалось бы, случайного набора штрихов, пять наиболее близких друг к другу штрихов образуют единый объект.
Рисунок 1.15: Создание группы с помощью близостиМы практикуем концепцию близости в Интернете, когда начинаем устанавливать поля и отступы для элементов. Например, когда я определяю правила стиля CSS для большинства сайтов, я обычно изменяю поле по умолчанию, которое существует между общими элементами HTML, такими как заголовки (h2, h3, h4…), абзацы, цитаты и даже изображения. Изменяя эти значения, я могу вызвать большее или меньшее пространство между элементами, тем самым создавая группы.
Если вы посмотрите на два столбца текста на рис. 1.16, то заметите, что они очень похожи. Единственное отличие заключается в размещении заголовков. В столбце слева слово «Unkgnome» равноудалено от верхнего и нижнего абзацев. В результате заголовок больше похож на разделитель, чем на заголовок следующего абзаца. Во втором столбце заголовок «Гноменклатура» помещается ближе к следующему абзацу. В соответствии с правилами близости, этот заголовок принадлежит этому блоку текста.
Рисунок 1.16: Близость между заголовками и содержимым
ПовторениеСтая гусей, косяк рыб, гордость львов. Каждый раз, когда вы собираете вместе набор одинаковых предметов, они образуют группу. Точно так же повторение цветов, форм, текстур или подобных объектов помогает связать дизайн веб-страницы вместе, чтобы он ощущался как единое целое. Пример на рисунке 1.17 иллюстрирует повторение. Несмотря на то, что вокруг есть другие похожие штрихи, девять красных штрихов слева кажутся единой группой, потому что они повторяют форму, цвет и текстуру.Штрихи справа от этой группы не имеют повторяющегося узора, поэтому они кажутся изолированными, даже если рядом есть другие формы.
Рисунок 1.17: Создание группы с использованием повторенияЗаметили вы это или нет, но повторение часто используется в дизайне веб-сайтов для унификации элементов макета. Хорошим примером использования этой концепции среди неизмененных HTML-элементов является маркированный список. Маркер перед каждым элементом списка является визуальным индикатором того, что элементы маркера являются частями единого целого.Повторяющиеся узоры и текстуры также могут помочь унифицировать дизайн. Взгляните на скриншот Left Justified, личного сайта австралийского дизайнера Эндрю Креспаниса. Этот макет содержит множество привлекательных элементов, но многократное использование текстуры красного дерева в заголовке, меню и границах страницы буквально скрепляет этот дизайн.
Рисунок 1.18: Выровненная по левому краю главная страницаАкцент
Тесно связана с идеей единства концепция акцента или доминирования.Вместо того, чтобы сосредотачиваться на том, чтобы различные элементы дизайна соответствовали друг другу, упор делается на том, чтобы конкретный элемент привлекал внимание зрителя. Когда вы разрабатываете макет веб-страницы, часто вы определяете в содержании или самом макете элемент, который хотите выделить. Возможно, это кнопка, которую вы хотите, чтобы пользователи нажимали, или сообщение об ошибке, которое вы хотите, чтобы они прочитали. Один из способов добиться такого акцента — сделать этот элемент центром внимания. Фокус — это все на странице, что привлекает внимание зрителя, а не просто ощущается как часть страницы в целом или сливается с окружающей средой.Как и в случае с единством, есть несколько проверенных и надежных методов достижения фокуса.
Размещение
Хотя ограничения практического веб-дизайна часто не позволяют этого, непосредственный центр композиции — это точка, на которую пользователи смотрят в первую очередь, и всегда наиболее сильное место для создания акцента. Чем дальше от центра находится элемент, тем меньше вероятность того, что он будет замечен первым; в качестве примера см. Рисунок 1.19.
Рисунок 1.19: Продолжение и размещение — создание акцентаПродолжительность
Идея непрерывности заключается в том, что когда наши глаза начинают двигаться в одном направлении, они, как правило, продолжают двигаться по этому пути, пока не появится более доминирующая особенность. Рисунок 1.19 демонстрирует этот эффект. Несмотря на то, что нижнее пятно больше и сразу бросается в глаза, ваш мозг не может не сказать: «Эй, посмотри сюда, стрелка!» Вскоре вы обнаружите, что смотрите на меньший объект.
Continuance также является одним из наиболее распространенных методов, которые веб-дизайнеры используют для унификации макета. По умолчанию левый край заголовков, копий и изображений, размещенных на веб-странице, образует вертикальную линию вниз по левой стороне страницы до того, как будет применен какой-либо стиль. Простой способ расширить эту концепцию — использовать правило третей, чтобы выровнять другие элементы страницы по линиям вашей сетки.
Изоляция
Точно так же, как близость помогает нам создать единство в дизайне, изоляция способствует выделению.Предмет, который выделяется на фоне своего окружения, будет требовать внимания. Несмотря на то, что ему грустно, что на другой странице его нет со своими приятелями, изолированная обезьяна на рис. 1.20 выделяется на этой странице как центр внимания.
Контрастность
Контрастность определяется как сопоставление разнородных графических элементов и является наиболее распространенным методом, используемым для создания акцента в макете. Концепция проста: чем больше разница между графическим элементом и его окружением, тем больше этот элемент будет выделяться.Контраст можно создать, используя различия в цвете (о котором я расскажу более подробно в главе 2), размере и форме. Взгляните на рисунок 1.21.
Рисунок 1.21: Woot — использование оранжевого для контрастаЭто Woot, веб-сайт электронной коммерции, на котором продается только один товар в день. Когда вы смотрите на этот макет, что первое, что привлекает ваше внимание? Я предполагаю, что это, вероятно, продукт, который они продают. Однако продукты в Woot меняются каждый день, так что же после этого бросается в глаза? Для меня это то, что я хочу! кнопка.Хотя те же цвета используются в других частях дизайна, овальная форма — нет. Когда кнопка размещается на белом фоне, кнопка имеет как контраст, так и изоляцию, чтобы подчеркнуть ее. Владельцы Woot очень хотят, чтобы вы нажали эту кнопку.
Доля
Один интересный способ создания акцента в композиции — использование пропорций. Пропорции — это принцип дизайна, связанный с различиями в масштабе объектов. Если мы поместим объект в среду большего или меньшего масштаба, чем сам объект, этот объект будет казаться больше или меньше, чем в реальной жизни.Эта разница в пропорциях привлекает внимание зрителей к объекту, так как это кажется неуместным в данном контексте.
На рис. 1.22 я взял свою обезьяну и наложил ее на горизонт Манхэттена, чтобы доказать свою точку зрения. Между резким контрастом в цвете и разницей в пропорциях ваш мозг сразу же говорит: «Эй, здесь что-то не так», и вы остаетесь смотреть на обезьяну, пока не заставите себя отвести взгляд.
Рисунок 1.22: Пропорция — обезьяна на МанхэттенеЭтот принцип работает и для миниатюризации.Если вы взглянете на мой личный веб-сайт Jasongraphix, изображенный на рис. 1.23, первое, что вы можете заметить на странице, — это маленькое я, прислонившееся к моему рисунку прямо под логотипом. Как и в случае с тем, что хочу! на Woot, этот маленький парень выделяется контрастом и изолированностью, но также привлекает внимание пропорциями.
Рисунок 1.23: Jasongraphix — мой личный сайт, на котором есть mini-me!Несколько стандартных тегов HTML и свойств CSS были разработаны для использования преимуществ предыдущих теорий для создания акцента на веб-странице даже без настройки.Для изоляции контента рассмотрите элемент цитаты. Этот элемент делает отступы слева и справа от любого текста, помещенного в него, намеренно разрывая линии продолжения содержимого страницы и привлекая к себе внимание. Для позиционирования рассмотрите свойство position в CSS. Абсолютно позиционируя объект с помощью CSS, вы извлекаете его из потока содержащего его блока, поэтому вы можете разместить его стратегически, чтобы привлечь внимание. И когда вы думаете о контрасте, подумайте о мигании.Просто шучу! Никогда не думайте о блинк-теге. Да, это создает контраст… снова и снова. Пожалуйста, не используйте это. Не знаю и об использовании тега marquee. Дизайн — это не только то, что мы упускаем, но и то, что мы вкладываем.
Далее мы рассмотрим несколько хорошо протестированных примеров дизайна, с которыми вы можете работать.
Макеты хлеба с маслом
Большая часть того, о чем мы говорили до сих пор, было теорией дизайна. Теория хороша, но она может только увести нас далеко в сторону понимания того, почему одни идеи работают, а другие нет — в дизайне веб-сайта.На мой взгляд, гораздо ценнее примеры и практика. Большинство академических программ графического дизайна включают учебный план, богатый историей искусства и изобразительным искусством. Эти классы обеспечивают отличную основу для понимания графического дизайна с точки зрения искусства, но они мало что делают, чтобы подготовить вас к конкретным проблемам, с которыми вы сталкиваетесь, когда размещаете свои проекты в Интернете.
Пабло Пикассо однажды сказал: «Я всегда делаю то, чего не могу, чтобы я мог научиться это делать.«Хотя мне нравится использовать этот подход при разработке нового веб-сайта, для начала важно знать, что вы можете сделать. Когда вы посмотрите в Интернете, вы увидите, что возможности для верстки действительно безграничны. Но, как я уже сказал, только некоторые из этих возможностей имеют смысл с точки зрения дизайна. Вот почему мы снова и снова видим определенные конфигурации идентификации, навигации и контента.
В этом разделе мы поговорим о нескольких наиболее распространенных макетах и рассмотрим некоторые из их преимуществ и недостатков.
Навигация в левом столбце
Независимо от того, говорим ли мы о макете с фиксированной шириной или с фиксированной шириной, формат навигации в левом столбце является стандартом де-факто. Сайт ThinkGeek, изображенный на рис. 1.24, является классическим примером такой конфигурации. Многие сайты, которые вписываются в эту форму, не обязательно используют левый столбец в качестве основного блока навигации — иногда вы увидите навигацию в верхней части страницы — но они по-прежнему разделяют макет под заголовком на узкие (одно- третий или меньше) левый столбец и широкий правый столбец.Это статус-кво, вроде защитного одеяла или той удобной рубашки с дырками в подмышках, которую вы носите раз в неделю, даже если это сводит с ума вашего супруга. По этим причинам макет с навигацией в левом столбце является безопасным выбором для любого проекта.
Рисунок 1.24: Навигация в левом столбце ThinkGeekОбратной стороной сайтов, использующих навигацию в левом столбце, является недостаток креативности. Их делали так много раз и разными способами, что они, как правило, выглядят одинаково.Это не значит, что вам не следует использовать навигационный макет с левым столбцом. Я полагаю, что 75% сайтов, которые я разработал, основаны на модели навигации в левом столбце, но я стараюсь делать что-то другое, когда это возможно.
Говоря о другом, как насчет того, чтобы поднять левый столбец и прикрепить его с другой стороны контента? Тогда у вас будет макет навигации в правом столбце.
Навигация в правом столбце
Хотя сложно найти сайты, подобные сайту Audi (изображенному на рис. 1.25), на которых основная навигация по сайту размещается в правой части макета, довольно легко найти сайты, которые используют правый столбец для суб-навигации, рекламы или вспомогательного содержания. Поскольку в западных культурах наши глаза сканируют слева направо, это позволяет зрителям в первую очередь видеть основное содержание страницы.
Рисунок 1.25: Навигация в правом столбце на веб-сайте AudiЯ не понимаю, почему не так много сайтов, которые используют правый столбец.Исследования, которые я видел, имеют тенденцию колебаться в обоих направлениях в отношении удобства и практичности меню с правой стороны. По моему собственному опыту, мой курсор в любом случае имеет тенденцию зависать в правой части окна браузера, поэтому я могу быть ближе к полосе прокрутки.
В конечном счете, это суждение о потребностях ваших клиентов и о том, как они хотят, чтобы люди воспринимали их присутствие в Интернете. Навигация в левом столбце знакома и более стандартна, но не всегда это приоритет номер один при разработке нового сайта.Одно можно сказать наверняка: если вы хотите, чтобы ваш дизайн отличался от обычного веб-сайта, но все же хотите, чтобы пользователи могли найти вашу навигацию, вам следует попробовать макет с правой колонкой.
Трехколоночная навигация
Типичная трехколоночная компоновка имеет широкую центральную колонку, окруженную двумя крошечными навигационными колонками. Веб-сайт Apple Store, показанный на рис. 1.26, является примером этого стандартного макета веб-страницы. Хотя три столбца могут быть необходимы на страницах с множеством элементов навигации, короткими фрагментами контента или рекламой для отображения, важно помнить, что пробелы необходимы, если мы хотим, чтобы макет не выглядел загроможденным.К счастью, в Apple Store три столбца существуют только на домашней странице, а в центральном столбце есть пробелы, которые помогают продвигать движение глаз.
Рисунок 1.26: Трехколоночная навигация в Apple StoreВдохновение
Тот факт, что конфигурация макета с левой, правой и тремя столбцами является основой большинства дизайнов веб-страниц, не означает, что вы должны ограничиваться этими макетами. Было создано множество — да, множество — сайтов-витрин и галерей дизайна, где представлены новые и инновационные идеи, которые могут помочь вам мыслить нестандартно, включая следующие (и это лишь некоторые из них):
- CSS Zen Garden по адресу http: // www.csszengarden.com/ — этот сайт является оригинальной демонстрацией свежих идей для CSS. Даже если вы не собираетесь разрабатывать шаблон CSS Zen Garden, это отличный источник вдохновения.
- CSS Beauty на http://www.cssbeauty.com/ — CSS Beauty — это одновременно галерея хорошо спроектированных веб-сайтов CSS и портал для сообщества разработчиков CSS.
- Галерея Stylegala на http://www.stylegala.com/archive/ — Stylegala — отличный источник информации о веб-дизайне и стандартах, но в галерее представлены только лучшие из лучших новых дизайнов CSS.
- CSS Vault на http://cssvault.com/ — Архив галереи CSS Vault восходит к ноябрю 2003 года, так что это не только отличный источник вдохновения, но и историческое хранилище великолепного дизайна CSS.
- Сайт недели по взаимодействию с дизайном по адресу http://www.designinteract.com/sow/. На всякий случай вот одна галерея, которая не концентрируется на дизайне на основе CSS. Design Interact — это мультимедийная и технологическая дочерняя компания Communication Arts, ведущего отраслевого журнала по визуальной коммуникации и графическому дизайну.Design Interact выделяет (и архивирует) новый и уникальный веб-сайт каждую неделю с января 1998 года.
Использование файла морга
Я знаю, о чем вы думаете: «Отлично, у меня есть куча галерей, чтобы посмотреть, что теперь?» Один из самых полезных приемов, которым меня научил мой первый профессор графического дизайна, было создание файла морга всякий раз, когда я работал над большим проектом. Идея довольно проста: если вы делаете иллюстрацию или маркетинговый проект, связанный с поездами, вы вырезаете и распечатываете все, что может найти вдохновение, и храните все это в папке.Это помогает в вашем текущем проекте, и если вам когда-нибудь понадобится выполнить еще один проект с поездами, у вас будет много вдохновения.
Идея файла морга ускользнула от меня несколько лет назад, когда я работал над макетом веб-сайта. Я обнаружил, что ищу макет, похожий на тот, который я хотел создать — в частности, я хотел посмотреть, как другие дизайнеры обрабатывают текстуры фона для такого дизайна. Именно тогда я решил начать свой цифровой файл в морге. Я начал делать скриншоты сайтов, которые видел в некоторых из перечисленных выше галерей, и сортировал их по папкам с такими названиями, как «leftnav», «rightnav», «3column» и «oddball».«Наличие хранилища дизайнов веб-сайтов, которое я могу просмотреть в любое время, было полезным ресурсом в бесчисленных случаях, когда я искал вдохновения.
Свежие тенденции
Если вы чувствуете себя настолько перегруженным вышеперечисленными ресурсами, что не можете даже подумать о том, чтобы создать файл морга для вдохновения, просто потратьте несколько минут, чтобы просмотреть эти сайты. Не обращая внимания на цвета и текстуры, обратите внимание на коробки, составляющие макет, и попытайтесь определить общие идеи и тенденции дизайна.Поступая так, я начал замечать несколько тенденций, которые, кажется, проявляются в макетах веб-сайтов.
Расширенная навигация по нижнему колонтитулу
Если вы прокрутите до конца страниц на многих сайтах с недавно измененным дизайном, вы, вероятно, заметите новую интересную тенденцию. Вместо того, чтобы использовать нижний колонтитул для основных ссылок и уведомления об авторских правах, многие сайты расширяют эту забытую часть страницы, чтобы включить контактную информацию, расширенную навигацию по сайту и дополнительный контент, такой как списки блогов, ссылки, значки Flickr и т. Д.Хотя размещение основного элемента навигации по сайту внизу страницы — не лучшая идея, концепция включения «бонусной» навигации и контента в это пространство в последнее время стала популярной. Как показано на рис. 1.27, JeffCroft.com — лишь один из сайтов, пробующих этот подход.
Рисунок 1.27: Представление дополнительного контента в нижнем колонтитуле на JeffCroft.comСм. Также:
Три столбца с первым содержанием
Большинство свежих дизайнов сайтов с тремя колонками, которые были созданы в последнее время, ставят контент на первое место.Под первым я подразумеваю, что они находят контент в крайнем левом углу экрана. Как видно на рис. 1.28, такой подход придает Vivabit очень современный и профессиональный вид.
Рисунок 1.28: Размещение контента в первую очередь на Vivabit.comХотя на самом деле это не новая идея, в последнее время она набирает обороты в конструкциях сайтов с жидкой и фиксированной шириной. Большинство макетов с тремя столбцами обычно переключаются на структуру с двумя столбцами за пределами главной страницы.При размещении содержимого слева переход от трех столбцов к двум становится более естественным, поскольку столбец содержимого может просто расширяться, а не перемещаться полностью. Например, если вы посещаете любую из других основных страниц сайта Vivabit, ширина области контента кажется просто расширяется вверх и вправо при переходе с домашней страницы на сайт.
См. Также:
Изменение размера: фиксированная ширина по сравнению с шириной жидкости
Раньше, когда мы рисовали блоки макета карандашом и бумагой, я объяснил, что первым элементом страницы, о котором мы должны были подумать, был содержащий блок, и будет ли он расширяться, чтобы заполнить страницу.Это решение мучило веб-дизайнеров на протяжении сотен, если не тысяч лет, вплоть до тех времен, когда мы использовали таблицы и файлы spacer.gif для компоновки содержимого веб-страниц. Хорошо, может быть, это было не тысячи лет назад, но, тем не менее, это давняя дискуссия. Фактически, споры о фиксированной или жидкой модели вызвали немало ажиотажа еще в декабре 2003 года, когда два очень влиятельных дизайнера, Дуглас Боуман из Stopdesign и Дэн Седархольм из SimpleBits, одновременно переключились с жидких макетов на макеты фиксированной ширины.Это вызвало мгновенную и неоправданную панику среди сообщества дизайнеров и веб-стандартов, члены которого опасались, что этот шаг означает смерть жидких макетов.
С тех пор большинство дизайнеров выработали собственное мнение в отношении спора о фиксированной и жидкой фазах. Решение об использовании одного типа макета над другим должно действительно определяться целевой аудиторией и целями доступности каждого отдельного веб-сайта. Плюсы и минусы каждого типа макета довольно четко определены, как показано в таблице 1.1 иллюстрирует.
Таблица 1.1: Макеты фиксированной и жидкой ширины — плюсы и минусыПомня об этих плюсах и минусах, я разработал больше макетов фиксированной ширины, чем жидких. Мне нравится контролировать, как будет отображаться контент, и работать с фоновым пространством. С другой стороны, мне иногда нравятся проблемы, с которыми сталкиваются жидкие макеты. Но, независимо от личных предпочтений, важно ставить потребности клиента на первое место. Если вы выбираете ширину макета с фиксированной шириной, вы должны подумать об аудитории, для которой вы разрабатываете, и создать макет, отвечающий потребностям этих пользователей.
Альтернатива: изменяемая компоновка фиксированной ширины
Несколько ироничный термин макет переменной фиксированной ширины был придуман Ричардом Раттером в статье, которую он написал для каталогизации своих открытий об этой новой тенденции. Это отличное обсуждение темы с отличными примерами.
Домашняя страница Colly Logic Саймона Коллисона демонстрирует лучшее воплощение этой новой тенденции, которое я когда-либо видел. Когда вы расширяете окно браузера с 800 пикселей до 1024 пикселей в ширину, правый столбец разделяется на третий столбец.На рис. 1.29 показано, как это работает.
Рисунок 1.29: Просмотр Colly Logic при ширине 800 и 1024 пикселейColly Logic выступает посредником между конструкциями фиксированной и жидкой ширины. Горстка дизайнеров раздумывала над этой идеей; CSS Beauty, один из сайтов галереи CSS, о котором я упоминал ранее, использует подход переменной фиксированной ширины для отображения функций и рекламного контента.
Разрешение экрана
По сравнению с дебатами о фиксированном и жидком, аргументы о проектировании для конкретных разрешений экрана гораздо более банальны.Когда дизайнеры говорят, что сайт разработан или оптимизирован для определенного разрешения экрана, на самом деле они имеют в виду разрешение монитора зрителя. Дебаты сосредоточились вокруг того, следует ли нам разрабатывать сайты таким образом, чтобы люди, использующие разрешение монитора 800 monitor600 пикселей, могли видеть всю ширину области содержимого в своих браузерах в полноэкранном режиме. Учитывая, что мы должны учитывать боковые панели и границы браузера, при таком подходе мы создадим область контента шириной примерно 750 пикселей (или размер которой можно изменить примерно до 750 пикселей).
По состоянию на июль 2006 года статистика разрешения экрана W3Schools показала, что количество пользователей W3Schools, которые установили разрешение экрана на 800Ã — 600 пикселей, упало, но не до такой степени, что это можно было бы игнорировать — см. Рис. 1.30.
В то время это разрешение все еще составляло 17% пользователей, но это число уменьшалось на 3-5% каждые шесть месяцев в течение предыдущих двух лет. Означает ли это, что как только эти дисплеи, настроенные на 800Ã600, будут заменены, мы все сможем начать проектировать сайты шириной 1024 пикселя? Едва.Даже если все использовали разрешение 1024–768 пикселей или более, не все будут использовать ваш сайт с развернутым окном браузера.
Рисунок 1.30: Статистика разрешения экрана W3SchoolsХотя статистика, подобная той, что предоставляется W3Schools, помогает нам разрабатывать дизайн для более высоких разрешений, наиболее важным фактором в веб-дизайне является конечный пользователь. Если веб-сайт, который вы создаете, предназначен для веб-профессионалов и людей, которые, вероятно, будут использовать новейшее компьютерное оборудование и высокое разрешение, может быть безопасно выйти за рамки дизайна и создать дизайн, ширина которого превышает 800 пикселей.Однако цель состоит в том, чтобы не допустить, чтобы пользователям приходилось выполнять прокрутку слева направо для чтения содержимого. Таким образом, даже если вы решите разработать дизайн, выходящий за рамки стандарта 800 пикселей, не отталкивайте несколько 800–600 пользователей, заставляя их постоянно выполнять прокрутку слева направо и обратно только для того, чтобы прочитать содержание вашего сайта. Вы только заразите их морской болезнью!
Редизайн веб-сайта A List Apart в августе 2005 года представляет собой отличный пример того, как дизайн, ширина которого превышает 800 пикселей, может оставаться доступным для пользователей с дисплеями с разрешением 800Ã600 пикселей.Несмотря на то, что на сайте отображается горизонтальная полоса прокрутки с разрешением 800Ã600 пикселей, вы можете видеть весь реальный контент без прокрутки. При разрешении 1024Ã768 пикселей горизонтальная полоса прокрутки исчезает, и справа появляется другой столбец, в котором отображаются функции поиска, ссылки на темы и реклама. Этот дополнительный столбец добавляет функциональность и структуру к дизайну сайта, но не всегда должен быть видимым.
Применение: Плитка
ФлоридыКак я кратко объяснил в разделе «Процесс проектирования», большая часть того, что я делаю, когда разрабатываю новый веб-сайт или печатаю, является подсознательным.Обычно я могу рассказать вам от выбора к выбору, почему я принял конкретные решения, но не всегда получается вербализовать процедуры, которым я следую. Итак, для меня немного сложно объяснить, как я применил принципы графического дизайна, например, для создания макета нового веб-сайта, если у меня нет примера, который поможет мне разбить процесс на этапы.
Введите: Florida Country Tile, реальная компания и реальный клиент. Florida Country Tile — это небольшая компания из Флориды, занимающаяся установкой плитки и камня, владельцы которой разрешили мне использовать проект дизайна веб-сайта, над которым я работал с ними, в качестве примера.В настоящее время компания не представлена в Интернете; единственное реальное удостоверение личности, которое он имеет, — это логотип, который вы видите на визитной карточке на рис. 1.31.
Рисунок 1.31: Визитная карточка «Эда» из Florida Country TileЯ изменил контактную информацию компании на визитной карточке выше, но это все — кроме этого, эта карточка идентична карточкам, которые использует компания. Как вы понимаете, этот сценарий не сильно отличается от того, что я представил в начале этой главы: у организации не сформировалась сильная визуальная идентичность.
Обычно у клиентов есть конкретные представления о том, как должен выглядеть сайт. В зависимости от клиента эти предубеждения могут либо помочь, либо помешать процессу проектирования — чаще последнее. Однако в этом проекте мне была предоставлена полная свобода действий, чтобы принимать все дизайнерские решения, и я планирую разработать сайт, используя принципы, которые мы рассмотрим в каждой главе этой книги. Надеюсь, «Эд клиент» будет доволен результатами, а «Ты, читатель» получит более четкое представление о процессе проектирования, о котором я так смутно описал ранее в этой главе.
Начало работы
Для начала я договариваюсь о встрече с клиентом, чтобы обсудить его потребности и желания в отношении веб-сайта. К сожалению, я нахожусь в Южной Каролине, а Эд во Флориде, поэтому встреча должна проходить по телефону. Несмотря на то, что я уже очень хорошо знаю этого клиента и могу ответить на многие из моих собственных вопросов о его бизнесе, я все равно ему звоню. В отличие от подхода, который я использую в большинстве клиентских проектов, я буду общаться с Эдом о каждом компоненте веб-сайта, который я создаю; Я буду делать это ближе к концу каждой главы этой книги.Поскольку эта глава посвящена макету, у меня есть три ключевых вопроса:
- Сколько контента вы хотите разместить на веб-сайте?
- Какой контент вы хотите разместить на веб-сайте?
- Постоянно ли используется логотип на визитной карточке во всех материалах для брендинга вашей компании?
Я хочу получить представление о том, со сколькими страницами я буду работать, чтобы предвидеть, насколько большим будет мое главное меню навигации. Прежде чем позвонить Эду, я записываю список страниц, которые я ожидал бы увидеть на небольшом веб-сайте: «Главная», «О нас» и «Контакты».Поразмыслив еще немного об индустрии плитки и просмотрев другие веб-сайты, связанные с плиткой, я решил добавить страницы Галерея, Услуги и Запрос на оценку.
Когда я разговариваю с Эдом, ему нравится этот список страниц, но он хочет знать, может ли он добавить еще одну или две страницы в будущем. Я заверяю его, что внесу некоторую гибкость в макет, чтобы учесть возможность дополнительных страниц, и объясню, что он также может включать подстраницы в каждый из этих основных разделов.
Я также объясняю, что причина, по которой я хочу узнать о логотипе компании, заключается в том, что текущий фон прямоугольной плитки ограничивает доступные нам возможности дизайна.Он это понимает и говорит, что на футболках компании используется упрощенный узор, показанный на рис. 1.32, и используются только слова «Country Tile». Он предлагает мне использовать этот стиль логотипа, если я думаю, что он будет работать лучше.
Разговор полезный. Я получаю необходимую мне информацию о содержании, и похоже, что у меня есть небольшая гибкость в представлении логотипа. Имея список навигации всего из шести-восьми страниц, я мог бы использовать боковую панель навигации, но у меня достаточно места, чтобы разместить навигацию в верхней части страницы.На самом деле, для меня это звучит неплохо. Думаю, пора переходить к сетке.
Рисунок 1.32: Вышитый логотип Country TileВместо того, чтобы придерживаться моей записной книжки со спиральной линией 79 Â, я вытаскиваю из лотка принтера лист чистой бумаги и вытаскиваю четыре сетки 3 —3. Я не совсем понимаю, как я хочу представить логотип. На данный момент это не имеет значения — я просто пытаюсь решить, как настроить свои блоки. После всех этих разговоров о том, что макеты правого столбца не находят широкого применения, я думаю о многоцелевой боковой панели в правой части экрана.Я вижу, как мы используем эту область для контента на некоторых страницах, для галереи или избранного элемента на домашней странице и, возможно, в качестве раздела поднавигации на странице «Службы». Я могу использовать свойства выделения, о которых мы говорили ранее, чтобы выделить раздел содержимого, но я буду иметь в виду наше обсуждение единства, чтобы убедиться, что этот подколбец вписывается в общий дизайн страницы.
Чтобы продолжить чтение Принципы красивого веб-дизайна , посетите Learnable и просмотрите первую главу бесплатно!
5 советов по веб-дизайну для выдающегося сайта
Этот пост последний раз обновлялся 5 мая 2020 г.
Когда дело доходит до дизайна веб-сайтов, существует так много разных стилей и направлений, в которых может развиваться ваш веб-сайт: от классного до минималистичного, от игривого и яркого до элегантного и современного.
Хотя ваш окончательный внешний вид должен исходить из вашего личного стиля, направления работы и фирменного стиля, есть несколько основных правил, которые всегда применимы.
Отличный веб-дизайн влияет на ваш пользовательский интерфейс и функциональность, при этом его легко понять с первого взгляда.Ниже мы собрали пять простых советов по дизайну веб-сайтов, которые помогут сделать ваш сайт эффективным и привлекательным:
Советы по веб-дизайну для выдающегося веб-сайта
Сделайте свою домашнюю страницу минималистичной и свободной от беспорядка
Дизайн с визуальной иерархией
Создавайте легко читаемое содержание веб-сайта
Обеспечьте удобство навигации по вашему сайту
Оставайтесь мобильными
01.Сделайте свою домашнюю страницу минималистичной и свободной от беспорядка
Домашняя страница вашего веб-сайта должна мгновенно передавать ваше основное сообщение. В конце концов, мы редко читаем каждое слово на веб-сайте. Вместо этого мы быстро сканируем страницу, выбирая ключевые слова, предложения и изображения. Помня об этом известном поведении, лучше обращаться к эмоциям, чем к подсчету слов.
Чем меньше посетителей сайта будут читать, нажимать или запоминать, тем лучше они смогут обработать и оценить ваш контент.Если вы спроектировали так, чтобы уменьшить продолжительность концентрации внимания, пользователи с большей вероятностью будут делать то, что вы от них хотите.
При изучении дизайна веб-сайта эти простые советы по дизайну помогут разделить содержание и создать презентабельный и привлекательный дизайн домашней страницы:
Разместите свой контент: Используйте пробелы между элементами. Оставив некоторые области пустыми, вы придадите дизайну более просторный и сбалансированный вид. Что касается текста, пишите небольшими, удобочитаемыми абзацами.
Добавьте изображения: Высококачественные мультимедийные функции, такие как красивые фотографии, векторная графика или значки, будут творить чудеса как альтернативные способы выразить вашу точку зрения.
Включите призыв к действию: От совершения покупки до регистрации побуждайте посетителей сайта выполнить задуманное вами действие, разместив кнопку с призывом к действию (CTA) на главной странице вашего сайта.
02. Дизайн с учетом визуальной иерархии
Иерархия — важный принцип дизайна, который помогает отображать ваш контент ясно и эффективно.За счет правильного использования иерархии вы сможете направлять внимание посетителей сайта к определенным элементам страницы в порядке приоритета, начиная с самого важного.
Основными компонентами визуальной иерархии являются:
Размер и вес: Выделите свои главные активы, такие как название вашей компании и логотип, сделав их крупнее и визуально заметнее. Читатели, как правило, сначала тяготеют к крупным и жирным заголовкам, а уже потом переходят к тексту меньшего размера.
Размещение элемента: Используйте правильный макет веб-сайта, чтобы направить взгляд посетителей в правильном направлении. Например, вы можете разместить важную кнопку с призывом к действию в самом центре экрана или разместить свой логотип в заголовке.
После того, как вы установите четкую иерархию для своей информации, читатели не смогут помочь, но неосознанно будут следовать за хлебными крошками, которые вы им оставили. Затем примените цвет, контраст и интервал для дальнейшего акцентирования, не забывая о том, что привлекает больше всего внимания, и убедитесь, что это всегда преднамеренно.
Некоторые мощные элементы веб-дизайна, которые помогут вам достичь строгой визуальной иерархии, — это полосы или макеты сетки, такие как в Wix Pro Gallery. Чтобы получить больше идей и вдохновения, ознакомьтесь с нашими дизайнерскими шаблонами веб-сайтов.
03. Создавайте легко читаемое содержимое веб-сайта
«Читаемость» определяет, насколько легко люди узнают слова, предложения и фразы. Когда читаемость вашего сайта высока, пользователи смогут без труда просмотреть или бегло прочитать его.Таким образом, получение информации становится легким.
Добиться удобочитаемости веб-сайта относительно легко; попробуйте следующие ключевые правила:
Контраст — это ключ: Достаточный контраст между цветом текста и цветом фона важен для удобочитаемости, а также для доступности веб-сайта. Хотя цветовая схема вашего веб-сайта, скорее всего, будет соответствовать цветам вашего бренда, убедитесь, что между вашими элементами есть достаточный контраст. Для этого попробуйте использовать онлайн-инструмент, например Contrast Checker.
Размер больших букв: Большинству людей будет сложно увидеть мелкие шрифты. Типичное практическое правило веб-дизайна — поддерживать основной текст не менее 16 пунктов. Это хорошее место для начала, но имейте в виду, что это число полностью зависит от шрифтов, которые вы выбираете для своего веб-сайта.
Типы шрифтов: Мир типографики предлагает множество типов шрифтов в нашем распоряжении. Вы можете выбирать между шрифтами с засечками (с небольшими выступающими линиями на концах букв, как Times New Roman) и без засечек, что буквально означает «без засечек».” Шрифты без засечек обычно лучше всего подходят для длинных онлайн-текстов, например того, который вы сейчас читаете. Вы также можете создавать интересные сочетания шрифтов, смешивая эти разные типы вместе. Есть также много экранных шрифтов, которые имеют больше декоративной составляющей, например шрифты сценария, которые выглядят рукописными. Если вы собираетесь использовать один из них, не используйте его слишком часто, чтобы избежать ошеломляющего эффекта.
Ограничьте количество шрифтов: Не используйте более трех разных шрифтов на одном веб-сайте.Некоторые проекты могут требовать более сложных сочетаний шрифтов, но слишком много разных шрифтов обычно выглядят загроможденными, отвлекая от идентичности вашего бренда.
Используйте темы текста: Чтобы установить четкую иерархию, убедитесь, что письменный контент вашего веб-сайта различается по размеру и весу — от большого заголовка до более мелких подзаголовков и до еще меньшего размера абзаца или основного текста. Этот удобный совет по дизайну веб-сайта поможет вам привлечь внимание читателей к чему-то.
04. Убедитесь, что по вашему сайту легко ориентироваться.
Возможно, вам свойственно ломать стереотипы, но навигация по сайту — не место для авангарда. В конце концов, вы хотите, чтобы ваши пользователи легко находили то, что они ищут. Кроме того, сайт с надежной навигацией помогает поисковым системам индексировать ваш контент, значительно улучшая взаимодействие с пользователем:
Свяжите ваш логотип с домашней страницей: Этот совет по дизайну веб-сайта — обычная практика, которую ваши посетители будут ожидать, экономя им несколько драгоценных кликов.Если у вас его еще нет, настоятельно рекомендуется создать собственный логотип в рамках усилий по продвижению бренда.
Следите за своим меню: Выбираете ли вы классический горизонтальный список, гамбургер-меню или что-то еще, меню вашего веб-сайта должно быть заметным и легко доступным. Кроме того, убедитесь, что он структурирован в соответствии с важностью каждого раздела.
Предложите некоторую вертикальную навигацию: Если у вас есть сайт с длинной прокруткой, например одностраничный, используйте якорное меню.Одним щелчком мыши зрители смогут быстро перейти в любой раздел сайта. Еще один вариант, который следует рассмотреть, — это кнопка «Вернуться к началу», которая направляет посетителей в верхнюю часть страницы, где бы они ни находились на вашем сайте.
Работа над нижним колонтитулом: Нижний колонтитул вашего сайта, вероятно, последнее, что можно увидеть на вашем сайте, и неплохо было бы разместить там все важные ссылки. Это может быть ваша контактная информация, значки социальных сетей и сокращенная версия вашего меню, а также любые другие релевантные ссылки, которые могут понадобиться посетителям.
05. Оставайтесь мобильными
Все посетители вашего сайта должны иметь возможность наслаждаться вашим профессиональным сайтом в лучшем виде, независимо от того, какое устройство они просматривают. При разработке веб-сайта Wix автоматически создает мобильную версию вашего сайта, чтобы вы могли идти в ногу с растущим мобильным миром.
Просмотрите мобильную версию своего сайта, поставив себя на место пользователя, и протестируйте каждую страницу, действие пользователя и кнопку.
Ваш мобильный веб-сайт должен быть чище и менее загроможденным, чем версия для настольных компьютеров, поэтому рассмотрите возможность минимизации элементов страницы и уменьшения некоторых ресурсов, например меню. Есть также уникальные мобильные функции, которые можно использовать для улучшения своего мобильного дизайна.
Последний совет в дорогу: Один из самых важных советов по дизайну веб-сайтов на самом деле самый простой — ищите вдохновение для веб-сайтов! Просмотрите некоторые из лучших дизайнов веб-сайтов и узнайте о последних тенденциях веб-дизайна.Вы также можете изучить некоторые из этих выдающихся веб-сайтов Wix, чтобы развить свой творческий потенциал.
Чейз Лепард
Менеджер сообщества и социальных сетей
Эден Спивак
Эксперт и писатель по дизайну
30 красивых примеров веб-дизайна от Behance и Deviantart
Вдохновение • Примеры веб-сайтов Андриан Валеану • 12 января 2012 г. • 4 минуты ПРОЧИТАТЬ
Behance и Deviantart — это веб-сайты, которые предлагают трехмерное или фантастическое искусство для ваших проектов веб-дизайна.На этих веб-сайтах работает веб-дизайнеров и художников, которые демонстрируют свою большую коллекцию изображений и произведений искусства. Художники, занимающиеся веб-дизайном, могут продавать любые виды искусства на этом веб-сайте, а также есть возможность получить обратную связь от посетителей сайта, чтобы получить концептуальное представление об их отображаемом искусстве. На сайте должно быть произведение искусства, прежде чем любой художник сможет продать свой продукт.
В этом онлайн-сообществе дизайнеров есть несколько категорий искусств, таких как традиционное искусство, дизайн и интерфейсы, фотография, цифровое искусство, фан-арт, фильмы и анимация.Есть также некоторые лучшие макеты веб-дизайна, созданные исключительно Deviantart, которые могут быть довольно привлекательными для зрителей. Этот сайт стал одним из последних законодателей моды. Некоторые из талантливых веб-дизайнеров Deviantart создали несколько вдохновляющих макетов, которые очень информативны.
По вышеуказанным причинам веб-сайт Deviantart является одним из ведущих арт-сайтов среди различных веб-сайтов, посвященных веб-дизайну. В настоящее время наиболее перспективные веб-дизайны от Deviantart — это футуристические дизайны, которые также могут быть известны как гибридные дизайны с последними тенденциями и технологиями.В наши дни эти дизайны стали довольно востребованными, и этот тип примеров веб-дизайна является выдающимся среди различных примеров искусства. Такие типы художественного оформления обычно используются в игровых портфолио или на порталах и имеют совершенно иную концепцию, заимствованную из классических веб-сайтов.
Любой веб-дизайн становится очень привлекательным, если в нем есть соответствующие элементы дизайна, такие как цветовая схема, верхние и нижние колонтитулы и стиль сетки. Такие макеты кажутся более привлекательными и привлекательными, и считается, что на Deviantart есть таких привлекательных примеров веб-дизайна .Каждое искусство, представленное на веб-сайте, представляет собой уникальный атрибут высочайшего качества. Форматы веб-дизайна обычно время от времени меняются, а обновленные тенденции и дизайны всегда периодически загружаются на этот веб-сайт. Deviantart содержит такие вдохновляющие художественные проекты веб-дизайна, которые ошеломят любого посетителя сайта с первого взгляда.
примеров веб-дизайна от Behance и Deviantart
Себастьян Бургольд
Adobe — Лучше от тебя
Конструктор шаблонов электронной почты в Интернете
С Postcards вы можете создавать и редактировать шаблоны электронных писем онлайн без каких-либо навыков программирования! Включает более 100 компонентов, которые помогут вам создавать собственные шаблоны электронных писем быстрее, чем когда-либо прежде.
Попробуйте бесплатноДругие продуктыКонцепция пользовательского интерфейса IMDB
Глобальная гуманитарная помощь
Трансформаторы 3
Nike 6.0 — Surfca.li
Маркус Хунд
Сети National Geographic
Поцелуй Фионы Беннетт
КУСКУС
Фотография Пьеро Д’Авила
Пользовательский интерфейс Futurico Pro
Найк — Bloed Oranje
Abstrakt branding 2011
Петр Яворовский ’09
БЕЗУМНЫХ АРХИТЕКТОРОВ
Вишня без косточек
Веб-разработчик
Гайя
Nike + Active
Шоколад Sagres Preta
Cadillac BLS
где живут голавли
Великий Пакистан
Finestate
sense-design вер. 1
Ресторан Pastorant
карта комиссии
Magic Dream Site
Верстка торговой площадки
Renueva Consultores
Нравится то, что вы читаете? Подпишитесь на наши главные новости.
Лучшие 62 визуально привлекательных веб-сайта, использующих входящий маркетинг (обновление 2018 г.)
Если вы ищете хорошо спроектированные, визуально привлекательные веб-сайты, созданные на HubSpot, или практикуете входящий маркетинг, вы попали в нужное место. Вот 62 самых привлекательных веб-сайта, использующих входящий маркетинг.
Как вы знаете, недостатка в веб-сайтах, практикующих входящий маркетинг в Интернете, нет. Но мы решили отделить пшеницу от плевел и дать вам абсолютные сливки урожая.Независимо от того, являетесь ли вы агентством или армией из одного мужчины (или женщины), эти веб-сайты вдохновят вас на создание собственного хорошо продуманного веб-сайта.
Что делает хороший веб-сайт визуально привлекательным?На самом базовом уровне, с точки зрения дизайна и теории, есть шесть элементов, которые необходимо учитывать при разработке визуально привлекательного веб-сайта.
Цвет: Цвет сайта должен соответствовать цвету вашего бренда и присутствовать на всем сайте.Цвет действительно играет роль в пробуждении эмоций в сети у вашей аудитории, и это следует учитывать при выборе цветовой палитры. Однако цвета на вашем веб-сайте должны быть легко читаемыми и приятными для глаз. Часто бывает очень сложно смотреть на экран, полный ярких цветов.
Шрифт: Шрифт сайта не обязательно должен соответствовать бренду или логотипу. Самая важная цель — убедиться, что шрифт разборчивый. Вы также можете варьировать шрифт на всем сайте, чтобы увеличить интригу и добавить визуальную привлекательность.При изменении шрифтов убедитесь, что они хорошо дополняют друг друга. Меняйте шрифты только между заголовками и основным шрифтом. В заголовках можно использовать два разных типа шрифтов: один для h2, а другой для h3 или h4. Очень важно, чтобы основной шрифт был единообразным на всем сайте.
Изображений: Не используйте стоковые фотографии из iStock или Fotolia. Вместо этого используйте стоковые фотографии, которые не подходят для таких сайтов, как Unsplash или Death to Stock Photos. Изображения придадут вашему сайту внешний вид, который выделит ваш сайт среди конкурентов.
Простота: Чем проще, тем лучше. Простой дизайн позволяет получить «чистый» вид, который ищут люди.
Юзабилити: Сделайте функциональность ключевой на своем сайте. Визуально привлекательный веб-сайт не должен приносить в жертву простоту использования в пользу лучшего визуального качества. Создание удобных веб-сайтов с простой для понимания навигацией и макетом страниц — вот что определяет, как пользователи взаимодействуют с веб-сайтом.
Согласованность: Как упоминалось в некоторых разделах выше, сохраняйте согласованность дизайна.Если у вас есть одна подстраница с наиболее популярным фоном, вероятно, все они должны иметь раздел с основным фоном. Цвета веб-сайта, шрифты, стили кнопок, размеры заголовков, стили изображений, размеры изображений и фон — это те элементы, которые необходимо поддерживать.
Хотя все эти элементы являются частью того, что делает веб-сайт визуально привлекательным, все они относительны. Тенденции дизайна веб-сайтов часто меняются, и тенденции приходят и уходят из года в год.
Это 62 лучших дизайна веб-сайтов для входящего маркетинга, перечисленные в произвольном порядке.
Без лишних слов, узнайте, что отличает хороший веб-сайт от этих веб-сайтов входящего маркетинга …
Награды за самые привлекательные веб-сайтыСайты агентств входящего маркетинга
Отраслевые веб-сайты, использующие входящий маркетинг
Сайты агентств входящего маркетинга 1. Потому чтоПотому что макет домашней страницы, основанный на изображениях и тематических исследованиях, выглядит феноменально.Фиксированные фоновые изображения, расположенные вплотную друг к другу, всегда выглядят довольно круто.
Их блог довольно обширен, поэтому их фильтры работают с темами HubSpot и не только важны, но и действительно просты в использовании и понимании.
HubSpot COS кричите, потому что имеет гамбургер-меню, которое работает с прокруткой и использует собственные навигационные меню HubSpot, которые могут быть сложными для выполнения, но здесь хорошо выполнены.
2. Square 2 MarketingКогда вы попадете на Square 2 Marketing, вы увидите очаровательное фоновое изображение человека, держащего красный флаг.Это изображение идеально подходит для их сообщения «Покорите свои цели в области продаж и маркетинга».
Мне также нравится их призыв к действию в навигации. Они заранее сообщают посетителям, сколько времени займет маркетинговая оценка. С точки зрения оптимизации коэффициента конверсии это гениально, поскольку устраняет беспокойство посетителей и устраняет предполагаемый временной барьер.
3. NectafyNectafy имеет ярко-оранжевый в качестве основного цвета, который действительно выделяется на странице. Выбор этого цвета в качестве фона делает их сайт ярким, чистым и минималистичным.
Однако вы должны отметить, что они не используют этот оранжевый цвет для предоставления своего контента. Вместо этого они используют для сравнения более приглушенный синий цвет, с которым легко читать текст.
Они также делают на своей домашней странице несколько действительно крутых вещей, которые заслуживают признания. В первом разделе контента под героем есть интерактивный калькулятор в реальном времени, который сообщает вам количество посещений и потенциальных клиентов, которые вам нужно генерировать на своем веб-сайте для достижения целей ваших клиентов.
4. VitalКогда загружается домашняя страница Vital, вы видите визуальное отображение цветов, форм и шрифтов в красивой анимации, которая кажется потрясающей.
Их цветовой фон и призывы к действию — это градиентный фон, соответствующий их логотипу, что является приятным штрихом последовательности и брендинга.
Но лучшая работа Vital — это их навигация, и они это знают.
Они используют мега выпадающее меню, удобное для пользователя. Он открывается при наведении курсора и не привередлив. Раздел «Что мы делаем» имеет цветовую маркировку, что упрощает работу с их множеством услуг.
5. Lynton WebLynton использует другой подход к текущему дизайну призыва к действию, к которому мы все уже привыкли.Вместо того, чтобы делать свои призывы к действию похожими на кнопку, они использовали простое подчеркивание: при наведении курсора граница подчеркивания перемещается по тексту, образуя рамку.
Plus, их служебные страницы невероятно удобны для пользователя с их липкой навигацией по страницам, которая приведет вас туда, куда вы хотите.
6. УДАРIMPACT применил новый подход к своей домашней странице для агентства входящего маркетинга. Ни для кого не секрет, что во входящем мире был популярен блог IMPACT, теперь это их домашняя страница.
Ярко-синий призыв к действию на боковой панели определенно выделяется, а оранжевая кнопка отправки контрастирует с этим. Действительно обращаю на это ваше внимание. Он также не тратит впустую места, потому что прилипает к прокрутке.
Они также приняли решение уйти от тенденции использования шрифтов без засечек в пользу шрифта с засечками «Merriweather», который придает их сайту уникальность в мире входящих веб-сайтов.
HubSpot COS кричит, в их списке блогов есть разделы контента с другими призывами к действию в них, разделяющими сообщения.
7. SpinWebSpinWeb отлично справляется с размещением своего корпоративного видео на своей домашней странице. Они используют его в качестве фона для видео с четкой кнопкой воспроизведения над заголовком, чтобы фактически воспроизвести видео во всплывающем окне со звуком.
Их основной красный цвет хорошо отработан на заднем плане. Вместо того, чтобы использовать сплошной красный цвет, они имеют прозрачное красное наложение поверх фонового изображения. Что делать, если вы хотите использовать красный в качестве цвета фона.Престижность.
Если говорить о фоновых изображениях, их фоновые изображения не являются стоковыми фотографиями. На самом деле это фотографии людей, которые там работают.
8. Медиа узелЦветной градиентный фон, который Media Junction использует на своих страницах сайта, просто прекрасен. Переход от синего к фиолетовому с зеленым призывом к действию легко заметить и позволяет призыву к действию исчезать с экрана.
Их содержимое имеет эффект плавного затухания при прокрутке, что также добавляет визуальной интриги и выглядит особенно привлекательно в разделах содержимого с текстом и изображениями.
9. Семья ЗеландииКто сказал, что вы должны быть в Соединенных Штатах, чтобы попасть в этот список? Никто. Семья Зеландии находится в Финляндии, и они сразу же поразили вас ярким желтым цветом в сопровождении креативного набора графики, и мне это нравится.
Их графический стиль и выбор цвета выполняются по всему сайту и выделяют их с визуальной точки зрения.
Я также большой поклонник их семейства шрифтов Gilroy, которое хорошо смотрится при любом весе шрифта и легко читается в блоге.
10. Форма повестки дняДругой сайт за пределами Соединенных Штатов, на этот раз из Дании; это форма повестки дня. У них есть множество визуально привлекательных элементов, на которые стоит обратить внимание, но взгляните на их отдельные тематические исследования.
Они изложили свои тематические исследования таким образом, чтобы ваш взгляд направил ваш взгляд на информацию по блокам за раз, с их использованием цвета и макета.
Не повредит и то, что у них есть отличные изображения для каждого тематического исследования.
11. Lean LabsОбратите внимание на заголовок Lean Labs, когда вы прокручиваете их сайт. Они отлично справляются с уменьшением размера логотипа и меню, чтобы повысить удобочитаемость. Кроме того, цвета логотипа и меню меняются с черного на белый в зависимости от цвета фона контента, который вы просматриваете в данный момент.
Мне также нравится, насколько велики их элементы навигации при открытии слайд-меню с плавной анимацией слайдов.
12. Squaredot На домашнюю страницуSquaredot очень интересно смотреть.Над сгибом есть фон, который меняет цвет, а их логотип превращается из квадрата в круг! Это задает тон остальной части страницы и веб-сайта, который полон потрясающей анимированной графики.
Кроме того, у них есть навигация по разделам сбоку от домашней страницы, которую вы не часто видите на сайтах HubSpot.
Они отлично справляются с применением темы фонового рисунка ко всему сайту. Их графика и командная часть имеют одинаковый пиксельный стиль.
13. Надежные клиентыCredible Customers использует «закулисный» видео фон, который действительно заставляет вас чувствовать себя прозрачным. У них больше контента в верхней части страницы, чем на большинстве входящих в наши дни веб-сайтов, но я думаю, что они заставляют его работать.
Веб-сайт имеет простую, но яркую цветовую схему, которая объединяет все воедино.
14. OverGo StudioOverGo Studio использует некоторую тонкую анимацию наведения, чтобы заинтересовать вас использованием их веб-сайта.На их домашней странице логотип наклоняется, отзывы переводятся чуть выше, награда HubSpot Impact Award наклоняется, а их сплошные призывы к действию растут. Их клиенты, ресурсы и страницы портфолио также используют анимацию, и это действительно работает для единообразия сайта.
15. Inturact УInturact есть отличные сообщения на своем веб-сайте. Вам не нужно смотреть дальше их заголовка на их домашней странице. «Просыпайся. Убей Сааса. Повтори». Они используют удобный для Интернета шрифт в «Open Sans», что еще больше подчеркивает их содержание.
Их видео-фон прост, но увлекателен.
У них отличная цветовая схема с зеленым и желтым, которая отлично смотрится как полупрозрачные кнопки вместо традиционных или призрачных кнопок.
16. Куно КреативKuno Creative использует тонкие эффекты наведения и прокрутки, чтобы удержать ваше внимание, но настоящим нововведением здесь является скользящая навигация.
Перемещение слайд-навигации упрощает просмотр сайта, обеспечивая при этом обширную навигацию.Вы можете утверждать, что люди не умеют щелкать по строке меню, но сейчас 2018 год. Я думаю, что большинство людей, особенно люди из их идеальной клиентской базы, знают, как использовать скользящую навигацию.
17. NextinyNextiny избегает использования выпадающей навигации, которая может стать беспорядочной, за счет наличия на странице суб-навигации для своих услуг. Он поставляется в комплекте с иконками, что, на мой взгляд, приятно.
Их фоновые изображения тоже на высшем уровне. Взгляните, например, на их домашнюю страницу, она идеально соответствует их заголовку и направляет ваш взгляд прямо на их призыв к действию.
18. VIEOVIEO Design имеет другой, но привлекающий внимание дизайн с призывом к действию. Каждый призыв к действию, даже их кнопки отправки, красные с красной внешней рамкой и отрицательным пространством, которое заполняется при наведении курсора.
Их блог привлекателен и удобен для пользователей. На странице со списком блога вы можете увидеть похожие сообщения, и в нем есть раскрывающийся список фильтров, чтобы найти нужную тему контента.
19. протокол 80, Inc.protocol 80 имеет красивую цветовую палитру, которая начинается с 4 значков на их домашней странице.Остальная графика на сайте имеет одинаковую цветовую палитру для единообразия.
У них есть слайдер для раздела с героями на главной странице, но это не автопрокрутка, и это здорово.
Их выпадающая навигация оформлена хорошо, так как она появляется с белым фоном и красновато-оранжевой рамкой.
20. Это агентствоЭто агентство использовало другой подход к навигации по сайту, вместо того, чтобы располагать его вверху страницы, они выбрали боковую навигацию.Также бывает полупрозрачным. Это помогает открыть пространство для просмотра домашней страницы, чтобы они могли рассказать свою историю.
21. MedEd Web SolutionsMedEd Web Solutions отлично демонстрирует то, что они могут предложить.
Есть два продукта / предложения? Вы можете разделить свой раздел героев и позволить посетителю выбрать для него правильный выбор.
HubSpot COS кричат, они используют призыв к действию HubSpot в заголовке для отслеживания кликов, и когда вы переходите на их страницу службы «MedEd Manager», призыв к действию динамически меняется с «Свяжитесь с нами» на «Демо». MedED Manager Now ».
22. Группа маркетинга White Space Дизайн веб-сайтаWhite Space Marketing Group очень хорошо сочетается с их логотипом. Если дизайн не был вдохновлен напрямую, то это было случайным совпадением.
У них высокий логотип, поэтому их большой заголовок и разделенная навигация работают. Дизайн сайта состоит из макета сетки для их маркетинговых услуг и тематических исследований, в то время как есть множество элементов, заключенных в рамку, которая напоминает вам об их логотипе.
В целом дизайн веб-сайта отличается согласованностью и версткой.
23. Raka CreativeRaka предлагает отличное сочетание шрифтов на своем веб-сайте. Они используют шрифт с засечками для заголовков «Roboto Slab» и шрифт без засечек для основного текста «Roboto». Это упрощает сканирование и чтение их содержимого.
Они также создали множество пользовательских значков и графики, которые используют красочную палитру, сохраняя при этом единообразие.
24.ТонTone знает, что ищут их идеальные клиенты, на конкретных примерах. У них есть ползунок с медленным зумом на каждом фоновом изображении, который создает приятное ощущение.
Их скользящая навигация также гладкая, шрифт, границы и интервалы упрощают использование после ввода.
Однако этот блог — один из самых крутых блогов агентств. Страница со списком демонстрирует каждого автора вместо избранного изображения сообщения, что является уникальным вариантом, который вы не найдете везде.
25. PR 20/20Веб-сайт PR 20/20 демонстрирует их основное предложение на каждой странице. Настоящая книга «The Marketing Performance Blueprint», написанная основателем компании Полом Ретцером.
Их основной призыв к действию имеет единообразный дизайн и размещение, но другое сообщение или цитату в зависимости от того, где вы перемещаетесь на сайте.
26. Web Canopy StudioWeb Canopy Studios использует анимацию практически на каждой странице для действительно увлекательного интерактивного взаимодействия.Все это сопровождает суб-навигацию на странице, которая застревает на прокрутке вместо основной навигации, чтобы помочь вам пройти по их страницам.
Единственное, что вы должны убрать с их сайта, — это их страницу с ценами. Если вы изо всех сил пытаетесь создать страницу с ценами или хотите более интерактивный способ для клиентов просматривать ваши цены, вы можете реализовать что-то вроде их ползунка, который будет иметь забавное сообщение, когда вы его максимизируете.
Отраслевые веб-сайты, использующие входящий маркетинг
27.Навеего На странице продуктаNaveego по качеству данных используется видео, которое вы можете щелкнуть, чтобы воспроизвести, чтобы объяснить их продукт, но если вы его не смотрите, они используют GIF-файлы, когда вы прокручиваете страницу вниз, чтобы продемонстрировать, как работает их продукт.
В блоге Data Digest также есть отличная система фильтров с вкладками, которая очень понятна с точки зрения пользовательского опыта.
28. Данные о коренных породахBedrock Data эффективно использует цветовую схему из 4 цветов. По большей части вы будете видеть только 3 цвета за раз, поскольку они используют салатовый или желтый в качестве акцентных цветов.
HubSpot COS выкрикивают, в нижнем колонтитуле они замаскировали контактную форму с нетрадиционным макетом, который вам нужно увидеть.
29. CivicPlusCivicPlus последовательно просматривает страницы своего сайта в зависимости от цвета компании и продукта. Как компания, у них есть 6 разных цветов в своей цветовой схеме, но поскольку каждый из них привязан либо к компании, либо к конкретному продукту, он работает и делает сайт невероятно удобным для пользователя.
Дизайн их блога демонстрирует 5 последних сообщений в слайдере и предоставляет вам ссылку для получения дополнительной информации.Остальная часть страницы со списком блогов использует стиль сетки, который собирает самые последние сообщения из 5 их блогов.
HubSpot COS кричите, если вы нажмете ссылку «Измерить мой веб-сайт» в нижнем колонтитуле, вы перейдете на целевую страницу, которая использует форму микрообязательства для ввода вашего «URL-адреса веб-сайта» и всплывающее окно для сбора остальной части вашего Информация.
30. ГардеробнаяCloset Works использует уникальный подход к онлайн-формам бесплатных консультаций. Вместо того, чтобы иметь ссылку, которую вы должны щелкнуть в их навигации, у них есть форма в их навигации.
Их дополнительная пурпурная и зеленая цветовая схема хорошо реализована и подходит для их бизнеса.
Выбранная ими пара шрифтов тоже работает хорошо. Используя шрифт без засечек, Playfair Display, для заголовков они делают визуальный акцент на них, не используя лишний жирный шрифт.
31. Оригами Логика На главной страницеOrigami Logic есть стильный раздел о героях. Анимация текста, телефона и графики при загрузке впечатляет сама по себе, но внутри телефона есть слайдер.
Их дизайн с призывом к действию с уголком с вкладками для оригами выделяет их, при этом они остаются брендом и соответствуют своему логотипу. Это моя любимая часть их сайта, и надеюсь, что она не останется незамеченной.
32. PonduranceЛучшая часть веб-сайта Pondurance — это кнопка «Запрос ответа на инцидент», которая дает вам номер службы экстренной помощи, когда он вам нужен.
Это самый привлекательный элемент над сгибом, как и должно быть, потому что вы не хотите, чтобы посетитель искал этот номер, если он им действительно нужен, что является огромной частью удобства использования.
33. Игра готоваGameReady предлагает одни из лучших самодельных стоковых фотографий, которые вы увидите. Каждое изображение отлично демонстрирует свой продукт.
Затем есть реальные изображения продуктов, которые действительно выделяются из-за того, насколько минималистично оформлена остальная часть сайта. У них много белого пространства и черного текста, чтобы их красные продукты и логотип привлекали ваше внимание.
34. CareATCCareATC использует большие жирные сообщения, чтобы донести свою точку зрения.Размер и вес их заголовков позволяют легко сканировать их содержимое и представлять легко отслеживаемую информационную иерархию с различным весом шрифта между заголовками, подзаголовками и текстом абзаца.
HubSpot COS кричите, страница списка блогов на самом деле состоит из 3 отдельных списков блогов, каждый со своим собственным столбцом и системой вкладок для переключения между блогами в любое время.
35. EnvisionRXEnvisionRX имеет хорошо продуманную страницу со списком блогов, по которой легко перемещаться.Здесь хорошо работает опция фильтра, потому что их темы сфокусированы.
HubSpot COS кричите, что хорошо в фильтре, так это то, что он также изменяет сообщение в блоге о функциях в разделе героя списка. Большинство блогов HubSpot этого не делают.
36. Clum CreativeClum Creative имеет отличную цветовую схему, которая делает каждый призыв к действию ярким зеленым цветом.
Они также включают два основных цвета, синий и желтый, в свой макет, где им нужно разбить свое содержимое.Мне здесь нравится смелый выбор цвета. Это уникальный выбор, поскольку их логотип может быть белым или черным, каждый цвет в их цветовой схеме был создан для Интернета.
Clum также использует тонкую анимацию текста при прокрутке вниз, чтобы не терять интерес к страницам их сайта; что приятно и добавляет ощущение последовательности.
37. Общество стрингеровStringers Society — король этого списка, когда речь идет об использовании языка, который использует ваша аудитория, «Не спи об этом, братан».
С точки зрения дизайна, их тематические посты в верхней части страницы имеют другую компоновку, чем остальные их посты, что увеличивает воспринимаемую ценность. С точки зрения удобства использования значок воспроизведения видео, который действительно выделяется в списке, — отличная идея.
38. RhythmOneRhythmOne имеет две разные аудитории: рекламодателей и издателей. Когда вы наводите курсор на призыв к действию в разделе героев на их домашней странице, вы заметите, что цвет фона при наведении отличается.Страницы, относящиеся к этому сегменту аудитории, будут соответствовать этому цвету, что облегчит просмотр сайта с точки зрения посетителей.
На их домашней странице есть невероятно привлекательный раздел, посвященный героям, с интерактивными линиями и точками, с которыми, на самом деле, довольно увлекательно поиграть, но в них содержится их сообщение «Установление важных связей».
Весь сайт имеет чистый вид с разрывами содержимого и большими красочными заголовками, которые упрощают сканирование страниц.
39. Databox УDatabox есть несколько невероятно привлекательных изображений на своем сайте, некоторые иллюстрации, некоторые макеты продуктов, но все они работают вместе, чтобы показать потенциальным пользователям, чего им следует ожидать.
В заголовке их домашней страницы используется функция набора текста, которая привлекает ваше внимание. Это не только для галочки, они используют это, чтобы действительно интересно определить, на что способен их продукт.
40. Virtasktic УVirtaskic есть забавные изображения, призванные сделать рабочий день посетителей не таким уж утомительным. У всех есть чувство юмора.
Использование стилизованного шрифта для заголовков и подзаголовков делает их веб-сайт уникальным, делая выбор шрифта без засечек для основного текста подходящим.
41. HubSpot Цвета градиентаHubSpot выглядят потрясающе, особенно от зеленого к синему.
Вы также найдете их тему концентрических кругов почти на каждой странице, что добавляет им целостности, несмотря на большое количество страниц.
На их страницах программного обеспечения их скриншоты расширяются за края страницы, чтобы вы могли подробно рассмотреть, что их программное обеспечение может делать, не занимая при этом большого количества места на странице.
42.Apptus УApptus есть отличные элементы на главной странице. Начиная с их раздела героев, в котором есть функция пишущей машинки, которая изменяет первую строку текста в h2, а также отзывчивый список воспроизведения видео, вложенный в ноутбук! Система вкладок, используемая для демонстрации своего продукта, отлично справляется со своей задачей, показывая, что вы можете щелкнуть внутри каждой вкладки, чтобы изменить изображение, используя эффекты цвета и наведения.
Если вы посмотрите на примеры их клиентов, то заметите, что у всех логотип одинакового серого цвета, пока вы не наведете на него курсор.Вот как это делается.
HubSpot COS кричать, их меню довольно сладкое. Это не совсем полноценное мегаменю, но довольно симпатичное.
43. Teazzers Строка заголовкаTeazzers визуально захватывающая, как и должно быть. Выбор цвета и шрифт Bungee Inline идеально подходят для бренда.
Визуальный баланс пурпурного, бирюзового и коричневого цветов выполнен хорошо. Сосредоточьте свое внимание на областях, в которых он должен быть.
Наклонить пакетики с чаем в секции под их героем одновременно и тематично, и визуально увлекательно.Престижность.
44. agileSI ™agileSI ™ использует мою любимую цветовую схему — черный, белый и красный — и использует ее, чтобы сделать их призывы к действию яркими. Мне нравится, как красный был получен из их логотипа, и они решили использовать его вместо оранжевого в индустрии кибербезопасности.
На каждой странице есть один и тот же визуально отличный раздел героя с вырезом под углом в левом верхнем углу, что придает сайту целостность.
45. Insivia Веб-сайтInsivia имеет индивидуальный подход, который знакомит вас с их командой почти на каждой странице, создавая фактор доверия среди посетителей.Они также используют несколько изящных видео-приемов на своей домашней странице и странице своих услуг, которые стоит проверить.
Insivia действительно задумала стать королем или королевой видео, и это очевидно из их страницы «Insights». Все их идеи, по крайней мере, недавние, представляют собой видеоролики, благодаря которым их содержание быстро и легко усваивается.
46. Майк УолшМайк Уолш использует эффект параллакс-прокрутки на своей домашней странице, который выглядит гладко.
Сайт использует прозрачный заголовок на подстраницах, за исключением блога, чтобы сохранить единообразие, и использует внутреннюю под-навигацию, чтобы основная навигация оставалась чистой и простой.
47. AfflinkAfflink использует разделенный заголовок, чтобы упростить поиск номера телефона и входа в систему, что является ключевой частью их взаимодействия с пользователем.
Их панель доверия также привлекает внимание. Добавив оранжевую секцию со стрелкой, указывающей вправо, они изменили то, что могло быть выброшенной секцией, на ту, которая требует вашего внимания.
Раздел тематических исследований прост на верхнем уровне, но хорошо оформлен и предоставляет вам информацию, которую вы хотите узнать больше.Внутренняя страница тематических исследований хорошо сделана и демонстрирует влияние, которое они оказали на своих клиентов.
48. Среда обитания для человечества Сан-ФранцискоHabitat for Humanity Greater San Franscisco имеет лучший слайдер с точки зрения стиля и удобства использования, который я когда-либо видел. С самого начала ясно, что вам расскажет каждый слайд, и на нем есть ссылка, по которой можно щелкнуть нужную информацию.
49. Моте НаMote есть несколько удивительных изображений.Это здорово, потому что это то, что заставит вас захотеть поддержать аквариум. В этом случае изображения говорят громче, чем слова.
Кроме того, их веб-сайт огромен. В нем много страниц, поэтому наличие панели поиска в навигации имеет важное значение.
50. Murphy & PrachthauserВеб-сайт Murphy & Prachthauser разработан, чтобы помочь посетителям найти то, что они ищут. С очевидной, но не навязчивой функцией живого чата и стилизованным окном на главной странице, которое направит вас к нужной информации.
Они отлично справляются с удобством использования сайта.
51. Бассейны и спа с горячими источникамиHot Springs Pools & Spas имеет большой заголовок для размещения их большого логотипа, но это не пустая трата места. Пробел над основной навигацией направляет взгляд посетителей на номера телефонов и информацию об учетной записи в правом верхнем углу, где находятся деньги.
52. Окно в мир УWindow World есть отличная интерактивная графика на своей домашней странице, которая отправит вас на нужную страницу сайдинга, окон, дверей и водостоков, что является забавным и интерактивным.Он также кратко демонстрирует их услуги.
53. ЛескоLesco, компания, работающая в сфере отопления, вентиляции и кондиционирования воздуха и сантехники, использует настоящую фотографию в качестве фона для своего главного раздела на каждой странице. Что очень важно для этой отрасли. В этом пространстве есть множество веб-сайтов, которые используют стоковые фотографии вместо настоящих.
Они используют выпадающий переключатель, чтобы направить вас к нужной информации, и делают это прямо в разделе своего героя. Основываясь на цвете и размере, он в конечном итоге привлекает внимание.
54. Транслайн Групп УTransline Group одна из самых интересных навигационных систем, с которыми мне приходилось сталкиваться. Когда вы нажимаете на элемент навигации, вы получаете всплывающее окно, заполненное суб-навигацией с этими элементами и изображениями.
Еще один изящный элемент дизайна находится на их странице «Кто мы». У них есть временная шкала своих вех, которую вы можете прокручивать слева направо. Обязательно проверьте это, если вы не знаете, как использовать временную шкалу на своем веб-сайте.
55. Компания Gebauer Компания Bebauer отклоняется от прямых разрывов линий между разделами контента в пользу наклонных. Вы можете найти разделы контента с наклонной линией по всему сайту для единообразия. 56. BizibleBizible имеет четкий последовательный вид на всей своей странице, но я хочу обратить ваше внимание на раздел «Запросить демонстрацию Bizible Today» внизу страницы.
Наличие такой интерактивной формы, которая выглядит как MadLibs, чрезвычайно креативно.
57. Катапуш УCatapush есть анимированная графика на своей домашней странице, которая привлекает ваш интерес и демонстрирует, что вы можете сделать с их продуктом.
С точки зрения дизайна они решили разместить рядом кнопку-призрак и сплошную кнопку, чтобы сделать акцент на той, которую они хотят, чтобы вы щелкнули, и предоставили вам дополнительный вариант для удобства использования.
58. 4Сон У4Sleep есть забавное фоновое видео, которое побуждает вас продолжить просмотр, интерактивная графика на главной странице, чтобы продемонстрировать особенности их матраса, но вам нужно посмотреть их страницу продукта и процесс оформления заказа.
Любой, кто создал веб-сайт HubSpot, знает, что он не предназначен для электронной коммерции, поэтому процесс оформления заказа 4Sleep довольно прост.
59. LanguageLineLanguageLine использует свой логотип и применяет его ко всем призывам к действию, чтобы создать единообразное впечатление на веб-сайте. Их призывы к действию в сочетании с однотонной цветовой палитрой ярко-синего и желтого привлекают внимание.
60. Entrust GroupEntrust Group имеет простой дизайн за пределами раскрывающейся навигации по расширению, но на их страницах сайта есть боковая навигация, которая также поможет вам в навигации.
Настоящая жемчужина их веб-сайта — «Учебный центр». Раздел обзора позволяет легко увидеть, что они могут предложить, несмотря на то, что у них не так много наворотов, это просто чисто и просто.
61. Люди Doc Домашняя страницаPeople Doc впечатляет видео, встроенным в ноутбук, показанным в разделе героев. Их подстраницы одинаково впечатляют последовательным макетом и навигационными ссылками, которые меняют цвет в зависимости от того, темный или светлый фон.
62. UrbanBound Страницы программного обеспеченияUrbanBound имеют отличный дизайн с макетом, демонстрирующим программное обеспечение на ноутбуке, чтобы вы могли заглянуть под капот, прежде чем запросить демонстрацию.
HubSpot COS кричит, в нижнем колонтитуле у них есть раздел «Последние сообщения в блоге», который показывает по одному сообщению за раз, но прокручивает их последние сообщения.
Теперь ваша очередь …Используйте эти веб-сайты для создания собственного визуально привлекательного веб-сайта, независимо от того, являетесь ли вы начинающим агентством по входящему маркетингу или пытаетесь самостоятельно внедрить входящий маркетинг на своем веб-сайте.
Есть вопросы по веб-дизайну?
Или, может быть, вам просто нравится один из этих сайтов.
В любом случае, оставьте быстрый комментарий ниже.
Я буду рядом, чтобы отвечать на комментарии и вопросы …
Задайте вопрос и оставьте свои мысли здесь или загрузите наш Контрольный список эффективности входящего маркетинга, чтобы убедиться, что ваш веб-сайт тоже хорошо выглядит 🙂
Как использовать основные принципы веб-дизайна, чтобы сделать ваш сайт красивым
«Не бойтесь совершенства — вы никогда его не достигнете.»- Сальвадор Дали, художник
Веб-дизайн включает в себя множество различных навыков и дисциплин, которые помогают создавать и поддерживать веб-сайты.
Различные области веб-дизайна включают веб-графический дизайн, дизайн пользовательского интерфейса (UI-дизайн), разработку, включая стандартизованный код. и проприетарное программное обеспечение, дизайн пользовательского опыта (UX-дизайн) и поисковая оптимизация (SEO) .
Часто многие люди работают в командах, которые охватывают различные аспекты процесса проектирования, хотя некоторые дизайнеры охватывают их все.
Термин «веб-дизайн» обычно используется для описания процесса проектирования, относящегося к внешнему (клиентскому) дизайну веб-сайта, включая написание разметки. Однако в этой статье мы подробно обсудим некоторые принципы дизайна UI / UX, как добиться в них успеха и как сделать наши веб-сайты красивыми.
Короче говоря, если вы хотите овладеть дизайнерскими навыками, эта статья для вас. Итак, не теряя времени, приступим.
Как разработать продукт
Для не дизайнеров немного страшно начинать с разработки продукта.Этот продукт может быть чем угодно, например, логотипом, веб-сайтом, приложением или чем угодно, что связано с дизайном.
Веб-дизайн — многообещающая, но невероятно сложная область. Чтобы стать успешным веб-дизайнером, вам необходимы как технические знания, так и творческие навыки. Как дизайнер, я хотел бы поделиться тем, что я узнал до сих пор.
Как использовать цвета и теорию цвета в веб-дизайне
Хотя мы не должны судить о чем-либо только по внешнему виду, это правда, что первое впечатление всегда имеет значение.Это особенно верно для бренда, поскольку в этом загруженном мире большинство ваших клиентов увидят цвет (а) вашего бренда.
Цвета вызывают эмоции, чувства и передают определенную информацию. Это позволяет клиентам сформировать первое впечатление, даже не зная, о чем ваш продукт.
Если вы решили отделиться от компании и начать свой собственный бизнес / стартап, понимание влияния цвета на поведение потребителей поможет вашему бренду добиться успеха.
Исследования показывают, что до 85% потребителей считают, что цвет является самым большим мотиватором при выборе определенного продукта, а 92% считают, что внешний вид является наиболее убедительным маркетинговым фактором в целом.
Все мы знаем, что красный цвет ассоциируется с опасностью, а зеленый — с природой, но оба имеют дополнительные значения и ассоциации. Психология цвета — это изучение того, как цвета влияют на восприятие и поведение. Это позволяет нам понимать цвет и использовать его в своих интересах, особенно когда дело касается маркетинга и брендинга.
Теория цвета была посвящена большим исследованиям. Вы определенно можете заблудиться в кроличьей норе, узнав историю каждого цвета. Итак, вот краткое резюме, чтобы дать вам представление:
- Красный: опасность, волнение, сила, любовь, энергия
- Оранжевый: уверенность, успех, общительность, жизненная сила
- Желтый: творчество, счастье, тепло, радость, оптимизм
- Зеленый: природа, исцеление, свежесть, качество, устойчивость
- Синий: доверие, мир, верность, компетентность, депрессия
- Розовый: сострадание, изысканность, сладкий, женственный
- Фиолетовый: королевская власть, роскошь, духовность, амбиции
- Коричневый : надежный, прочный, заслуживающий доверия, простой, земной
- Черный: формальность, драматичность, изысканность, безопасность, роскошь
- Белый: чистый, простота, невинность, честный, минималистичный
- Многоцветный: единый, открытый для всех, разнообразие, fun
Конечно, в этом спектре есть масса дополнительных цветов.Различные оттенки, такие как нежно-голубой, ярко-розовый или темно-синий, также вносят свой вклад в цветовую историю.
Прежде чем использовать любой из этих цветов, вам необходимо сначала определить суть вашего бренда, его цели, услуги и то, как вы хотите, чтобы ваши целевые клиенты думали о нем. Таким образом вы сможете еще больше сузить цветовую схему.
В большинстве случаев мы можем сказать, какие цвета и комбинации не являются профессиональными, просто взглянув на веб-сайт, но мы все равно можем не применить подходящие цвета к нашим собственным творениям.
Скажите, на каком веб-сайте цвета используются более профессионально?
Как использовать контраст в веб-дизайне
Веб-дизайн состоит из различных элементов, включая типографику, цвета, формы, пробелы и так далее. Когда дело доходит до синхронизации этих элементов, возможно, самое основное — это контраст.
Когда мы говорим о контрасте, первое, что приходит в голову, — это цвета. Выбор правильного цветового контраста — это часть нашей повседневной жизни, например, когда речь идет о покупке одежды, аксессуаров и носимых устройств.Но когда дело доходит до веб-дизайна, принципы контраста выходят за рамки простого цвета.
Каждый начинающий дизайнер знает, что важно использовать контрастные цвета. Принципиально то, что использование черного текста на переднем плане на темно-синем фоне затрудняет чтение текста.
Цветовой контраст также означает, как один элемент на веб-странице контрастирует с цветом других элементов на той же странице.
Кто бы мог подумать, что контраст размера также имеет значение в веб-дизайне? Ну… это не удивительно.Контраст размера может быть здесь самым основным.
Возьмем для примера размер заголовка и абзаца. Заголовок имеет больший размер шрифта, чем абзац, поэтому он выделяется на фоне остального текста.
Когда я говорю о контрасте, я всегда показываю эту картинку.
Думаю, это многое говорит о важности контраста.
Как использовать пробелы в веб-дизайне
В общем, большинство не-дизайнеров и начинающих дизайнеров боятся пробелов.Они часто думают, что все должно что-то содержать. Но это часто кажется неуклюжим и слишком загруженным.
Помните одну вещь очень четко: чем больше ваш веб-сайт читается, тем больше у ваших клиентов будет впечатление от посещения веб-сайта.
Использование пробелов позволяет нам сделать наш дизайн намного лучше, приложив совсем немного усилий.
Фактически, Whitespace в дизайнерской композиции — это то же самое, что использование тишины в музыкальной композиции.Без пропорционального использования тишины музыка неструктурирована — некоторые могут назвать ее шумом. Точно так же без пробелов веб-дизайн неструктурирован и труден для восприятия.
Дизайнеры не зря используют пробелы как неотъемлемую часть своего дизайна. При правильном использовании он может изменить не только дизайн, но и бизнес, для которого он создан. Пробелы значительно улучшают не только UI (пользовательский интерфейс), но и UX (пользовательский интерфейс) страницы.
Равномерное использование пробелов позволяет легко сканировать контент в дизайне и значительно улучшает читаемость.Исследование показало, что правильное использование пробелов между строками абзацев и их левого и правого полей может улучшить понимание до 20%.
Пробелы очень помогают направлять пользователей по странице и расставлять приоритеты в области фокусировки для пользователя.
Пробелы помогают нам, увеличивая скорость взаимодействия, направляя пользователей через логические группировки, устанавливая стиль брендинга и дизайна и создавая передышку для пользователей.
Подскажите, какая статья читабельнее?
Как использовать типографику в веб-дизайне
Сегодня дизайнерам доступны тысячи различных гарнитур и шрифтов.Большинство из них доступны в цифровом формате и могут быть легко использованы с помощью современных компьютерных технологий.
Огромное количество доступных гарнитур затрудняет классификацию каждого из них. Но важно понимать основные стили шрифтов, чтобы сузить круг исследований и выбрать правильный шрифт.
Каллиграфические шрифты
Буквы, связанные с искусством каллиграфии, и шрифты, созданные на их основе, можно отнести к каллиграфическим.
Каллиграфические буквы могут быть, но не обязательно, классифицированы как канцелярские, этрусские или унциальные.
Шрифты Blackletter
Шрифты Blackletter — это письменный стиль каллиграфии, популярный в немецком языке. Очень орнаментальный стиль типографики, разные стили часто связаны с разными регионами, в которых они были разработаны и использовались.
Основные классификации включают Textura, Schwabacher, Cursiva и Fraktur.
Шрифты с засечками
Шрифты с засечками были популярны намного раньше, чем шрифты без засечек, и включают частично структурные детали на многих буквах.Люди часто называют их ступнями, хотя это никоим образом не является подходящим анатомическим термином, когда речь идет о типографике.
Существует множество различных классификаций шрифтов с засечками, часто называемых в честь их происхождения, включая греческий, латинский, шотландский, современный скотч, французский старый стиль, испанский старый стиль, кларендон и тосканский.
Шрифты без засечек
Слово «без засечек» означает «без засечек», то есть без засечек.
Как и шрифты с засечками, для шрифтов без засечек существует множество различных классификаций, включая готический, гротескный, дорический, линейный, швейцарский и геометрический.В наши дни шрифты без засечек очень популярны среди веб-дизайнеров.
Шрифты-скрипты
Шрифты-скрипты основаны на формах, созданных с помощью гибкой кисти или пера, и часто имеют различные штрихи, напоминающие рукописный текст.
Существует множество различных классификаций, включая Brush Script, English Roundhand и Rationalized Script.
Пиксельные шрифты
Пиксельные шрифты были разработаны с изобретением компьютера и основывались на формате пикселей на экране.Они основаны на массиве пикселей, часто называются растровыми шрифтами и часто предназначены только для определенного размера точки.
Многие текстовые фабрики предлагают выбор растровых шрифтов, а некоторые, например «Шрифты для Flash», создают только растровые шрифты.
Декоративные шрифты
Хотя гарнитуры с засечками и без засечек часто можно использовать для набора текста, существует подавляющее большинство шрифтов и гарнитур, чья разборчивость ухудшается при использовании меньшего кегля.
Эти гарнитуры часто разрабатываются с учетом специфики использования и предназначены для использования более крупным шрифтом в заголовках, плакатах и рекламных щитах.Декоративный — это не такая уж классификация, и он может включать в себя самые разные гарнитуры под этим термином.
Так как выбрать шрифт?
Что ж, я согласен с вами, что часть типографики — самая скучная часть этой статьи. Однако важно знать, что предлагает нам каждый шрифт.
Существует так много гарнитур и шрифтов, которыми злоупотребляют, поэтому дизайнеры в наши дни никогда их не используют. Когда вы выбираете набор шрифтов для своих веб-сайтов, вам необходимо внимательно изучить его содержимое.Если это образовательный сайт, вы можете использовать шрифт с засечками. Если сайт посвящен моде, выбирайте декоративный или каллиграфический. Если сайт для развлечения, вы можете использовать шрифт с засечками или пиксель.
Для общих целей я рекомендую использовать шрифты без засечек и формальные шрифты, потому что они могут оказать сильное влияние на сознание пользователя.
Как создать визуальную иерархию
После объединения всех этих принципов, таких как цвет, контраст, пробелы и типографика, веб-дизайнеры пытаются создать визуальную иерархию.
Правильная визуальная иерархия обеспечивает лучший пользовательский опыт и улучшает читаемость веб-сайта. Часто говорят, что пользователи покидают веб-сайт всего за 10 секунд, если им не нравится его визуальная иерархия.
Давайте посмотрим на веб-сайт и обсудим, как дизайнер реализовал правильную визуальную иерархию.
Вымышленный веб-сайтКак видите, первое, что вы заметите на этом веб-сайте, — это большой заголовок «Мы делаем ваш бизнес великолепным». Это привлекает нас больше всего из-за использования контрастности размеров.
Затем вы заметите кнопку «Наша работа», пример цветового контраста. Подзаголовок «Дизайн, отмеченный наградами» менее заметен из-за использования контраста цвета и размера. Иллюстрация, используемая рядом с названием, хотя и не имеет смысла для этого веб-сайта, делает его просто красивым.
Вы также заметите, что цвета использовались профессионально. Основной цвет — голубоватый, второстепенный — белый, а черный / не совсем белый / серый также используются на всем веб-сайте.Правильный интервал используется повсюду на веб-сайте, а фон делает его необычным.
На панели навигации первое, что вы заметите, это название бренда, затем кнопка «Получить цитату» и, наконец, гиперссылки на разные страницы.
В целом, если вы скажете мне отметить этот дизайн, я поставлю ему твердые 8 из 10. Этот веб-дизайн в значительной степени чистый и профессиональный, подсказывает пользователям, на чем больше сосредоточиться, и тем самым производит впечатление. Кстати, вы заметили, что одинаковые поля используются с обеих сторон этой веб-страницы?
Вы видели, как разные принципы, такие как цвет, контраст и пробелы, играют жизненно важную роль в формировании визуальной иерархии страницы.Теперь вопрос в том, как вы можете использовать эти принципы на своем веб-сайте, как профессионал?
Что ж, в наши дни профессиональные веб-дизайнеры используют разные инструменты. Figma, Adobe XD, Adobe Illustrator, Canva, Google Web Designer — популярные инструменты для работы с веб-дизайном. Мне лично нравится и использую Figma, потому что она предлагает большинство функций в бесплатной версии, а также имеет хорошую библиотеку плагинов.
Однако все эти инструменты неплохие. Они предоставляют необходимые функции от написания текста до создания трехмерных фигур и сложной анимации.
Используя эти функции и возможности, вы можете легко и эффективно создать веб-страницу, подобную этой. Однако, если вы хотите узнать, как реализовать эти функции на практике, в Интернете есть так много качественных аварийных курсов и руководств по Figma / Adobe XD. Просто имейте в виду, что:
- Вы не должны использовать слишком много шрифтов / цветов
- Вы должны стараться поддерживать пробелы между каждым элементом
- Вы должны использовать правильные иллюстрации / изображения
- Вы не должны пытаться сделать каждый элемент привлекательный
- Вы должны использовать правильную и визуальную навигацию
- Вы должны использовать тени / размытие вместо использования другого цвета
- Вы должны использовать контраст для привлечения пользователей к определенному элементу, который нуждается в их привлечении
- Вы должны поддерживать правильные поля
Я гарантирую, что если вы будете следовать этим общим правилам и применять их с помощью этих инструментов, дизайн вашего веб-сайта обязательно улучшится.
Заключение
В этой статье я попытался поделиться своими знаниями о принципах веб-дизайна, насколько это возможно.
Эта информация не уникальна, потому что вы можете найти одни и те же советы повсюду в сети. И это распространенный сценарий, когда после применения всех этих принципов веб-дизайнеры не могут сделать свои веб-сайты тем, что им на самом деле нужно, хотя они и достаточно красивы.
Итак, мой последний совет будет таков: не расстраивайтесь, если вы не можете сразу сделать свой веб-сайт супер крутым — всегда учитесь на своих ошибках и развивайте привычку посещать разные типы веб-сайтов ежедневно, чтобы вы может узнать больше о последних тенденциях в дизайне.Дизайн — это часть нашей культуры, и культурные тенденции сильно меняются.
Если вам понравилась эта статья, поделитесь ею со своими друзьями / товарищами по команде, которые тоже сочтут ее полезной. Наконец, я буду счастлив связаться с вами в LinkedIn и Twitter. Хорошего дня 🙂
Эти источники очень помогли мне при исследовании этой статьи:
7 красивых дизайнов веб-сайтов, которые вдохновят вас
Получите больше дизайнерских идей из 7 красивых дизайнов веб-сайтов
Вы изо всех сил пытаетесь создать красивый дизайн веб-сайта ? Если вы сказали «да», то в этом посте есть все, о чем вы должны знать, так как здесь мы поговорим о 7 красивых дизайнах веб-сайтов, из которых вы можете черпать вдохновение для своего веб-сайта.
Мы также рассмотрим один из самых эффективных и надежных инструментов для создания красивых веб-сайтов, который поможет вам создать новый инновационный дизайн для вашего веб-сайта без каких-либо передовых знаний в области разработки.
- Часть 1: 7 красивых дизайнов веб-сайтов, которые вдохновят вас
- Part2: Хороший инструмент, который поможет вам создать красивый дизайн веб-сайта
7 красивых дизайнов веб-сайтов, которые вдохновят вас
Вот список из семи выбранных нами вручную вариантов, из которых вы можете вдохновиться несколькими факторами, которые необходимо учитывать при разработке своего веб-сайта.
1. Морган Стэнли
Первый вариант из списка красивых дизайнов веб-сайтов, который вдохновляет вас на создание лучшего веб-дизайна, — это веб-сайт Morgan Stanley, который является веб-сайтом для управления финансами и поставщика услуг. Главный мотив с помощью своего веб-сайта — дать людям понять, насколько хороши их услуги и как они могут на них положиться.
Таким образом, чтобы укрепить доверие между своими клиентами, разработчик этого веб-сайта прекрасно сумел интегрировать реальную статистику своих предыдущих клиентов на главную страницу веб-сайта.Зайдя на сайт, вы сможете заметить высококачественное изображение вверху, которое показывает, что они решают проблемы и решают их с помощью стратегий и записей, основанных на доказательствах.
Прокручивая веб-сайт вниз, мы сможем найти различные разделы, такие как «Что мы делаем?» и «Реальные обзоры». Наряду с этим, наконец, вы получите кнопку с призывом к действию для подписки на рассылку новостей.
2. Повышенный
Здесь у нас есть следующий вариант из списка, который разработан компанией Boosted, занимающейся разработкой электрических скейтбордов.Если вы пытаетесь найти вдохновение для красивого дизайна веб-сайта, этот веб-сайт для вас. Посетив этот веб-сайт, вы заметите, что они разработали четкий брендинг своих продуктов, используя высококачественное изображение продуктов в верхней части главной страницы.
Не только это, но они также выбрали цветовую схему темы на основе цветов своего продукта. С помощью которых они связывают весь веб-сайт со своими продуктами и услугами, поэтому этот небольшой шаг очень помогает в повышении коэффициента конверсии.
В верхнем разделе вы сможете увидеть все виды продуктов и аксессуаров, предлагаемых компанией Boosted. В этом разделе посетители смогут делать выбор и покупать товары.
3. Возбер
По третьему варианту у нас есть веб-сайт Wozber с привлекательным дизайном. Вы не только сможете заметить отличную графическую интеграцию внутри сайта, чтобы он выглядел еще лучше?
Это веб-сайт для создания резюме, поэтому они разместили кнопку призыва к действию только вверху.Пользователям просто нужно нажать на кнопку, чтобы создать свое резюме и заполнить все детали. Но как только вы взглянете на их контент, вы влюбитесь в него, вы сможете заметить, что они очень много работали над дизайном своего веб-сайта, но при этом они не оставили позади контент.
Нам понравился дизайн их веб-сайтов, потому что на них было показано несколько названий компаний, таких как Google и другие. Следовательно, заявлено, что люди из этих компаний использовали Wozber, который является прекрасным способом продвижения вашего бизнеса.
4. Opus растет
Здесь у нас есть фантастический и красивый вариант веб-дизайна для производства и продажи органических почв, с помощью которого пользователи могут эффективно выращивать растения. Посетив этот веб-сайт, вы заметите, что он сделан с использованием естественных цветовых схем, поэтому их работа и дизайн веб-сайта могут быть связаны друг с другом.
В верхней части своей домашней страницы они добавили высококачественное изображение растений, с помощью которого они хотят изобразить лучший рост растений с их органической почвой.Мало того, вы найдете призыв к действию только на картинке с надписью Shop Soils.
, с помощью которого пользователи могут просматривать все доступные варианты и делать покупки для себя. Прокрутив немного вниз, вы заметите, что они использовали графическую интеграцию, такую как видео и все остальное, для того, чтобы люди знали о своих продуктах.
5. Zero Financial
Следующий вариант из списка прекрасных дизайнов веб-сайтов, которые могут вас вдохновить, — это Zero Financial, веб-сайт, помогающий финансам, и одна вещь, которую вам нужно узнать об этом веб-сайте, заключается в том, что у них есть кристально четкие условия работы, такие же Таким образом, у них есть четкий дизайн веб-сайта, который выглядит потрясающе и соответствует их работе.
Прокрутите вниз и посмотрите на их услуги; они использовали впечатляющий способ продемонстрировать различные карты, доступные с графической интеграцией. Они также заявили, как их услуги могут помочь пользователям эффективно экономить больше денег, что является необычным подходом и дополнением к дизайну веб-сайта для завоевания доверия между пользователями.
Они также добавили изображения своего приложения для смартфонов, которые помогут посетителям узнать об их приложении. Следовательно, он продвигал свое приложение без каких-либо дополнительных усилий.
6. КРЫШКА HPI
CAP HPI — это веб-сайт, с помощью которого вы можете эффективно просматривать широкий спектр данных об автомобилях. Следовательно, это было причиной, по которой разработчики хотели сделать дизайн веб-сайта и простой в использовании,
Более того, это причина, когда вы посещаете этот сайт; вы сможете получить все продукты и услуги в одном месте. Благодаря этому посетители смогут только с первого взгляда узнать обо всех услугах, предоставляемых CAP HPI.
Одним из важных моментов является то, что этот сайт наполнен соответствующим количеством анимации и графики, которые улучшают общий вид этого сайта.Более того, вы также сможете найти их номер и другие подобные контактные данные напрямую с сайта.
7. Колчан
Теперь мы рассмотрим последний вариант из списка прекрасных дизайнов веб-сайтов, а именно веб-сайт Quiver. Это безопасная и надежная платформа для делового общения. Следовательно, при разработке своего веб-сайта разработчики имели в виду одно: посетители должны иметь возможность почувствовать, что наши услуги в конечном итоге безопасны и надежны.
Они использовали впечатляющий шаблон со светлой цветовой схемой, улучшающей общий вид. Вы также сможете обнаружить, что дизайн, цветовая схема и другие дополнения делают этот веб-сайт более удобным и надежным.
Хороший инструмент, который поможет вам создать красивый дизайн веб-сайта
Как мы уже обсуждали выше, мы собираемся поговорить об одном из самых эффективных инструментов, которые могут помочь вам создавать красивый дизайн веб-сайтов: Wondershare Mockitt.С помощью этого инструмента вы сможете воспользоваться множеством функций и преимуществ, давайте рассмотрим их один за другим:
- Вы сможете разрабатывать высокоэффективные дизайны и шаблоны веб-сайтов. В пакете вы получите несколько встроенных опций, которые вы можете использовать.
- Этот инструмент поставляется с интеграцией облачного хранилища с помощью эффективного хранения каждого файла данных в вашем облаке. Следовательно, доступ к нему из любого места легко.
- Пользователи смогут получать регулярные обновления с помощью инструмента Mockitt.
11 главных тенденций веб-дизайна, которые будут править в 2020 году | от студии PopArt | NYC Design
Можете ли вы вспомнить, как выглядел дизайн Facebook в момент своего появления, полтора десятилетия назад? По современным меркам — не очень лестно. Так что, если вам случится сегодня встретить такой дизайн веб-сайтов, признайте это, вы, вероятно, сразу же потерялись бы.
Быть в курсе последних тенденций в дизайне полезно независимо от того, являетесь ли вы профессиональным веб-дизайнером, новичком в отрасли или предпринимателем, который хочет, чтобы его бизнес-сайт отличался высоким качеством.
Кроме того, включение последних и самых популярных тенденций веб-дизайна гарантирует, что ваш веб-сайт будет выглядеть современным, обновленным и действительно ухоженным — большой плюс, когда дело доходит до создания впечатления надежности в глазах ваших клиентов.
Мы обозначили тенденции веб-дизайна, которые будут доминировать в 2020 году, а также несколько профессиональных советов о том, как успешно реализовать их в своем дизайне.
Как может такая простая вещь, как размещение светлого текста, значков и элементов пользовательского интерфейса на темном фоне, быть настолько мощной? Темный режим — это тенденция веб-дизайна, которая, несомненно, доминировала в 2019 году, и маловероятно, что ее господство закончится в 2020 году.
Темный режим покоряет онлайн-мир с появлением лучших приложений и веб-сайтов, таких как Facebook Messenger, YouTube, Instagram, Viber, WhatsApp и Chrome, а также последних выпусков операционных систем Android и Apple. свет гаснет один за другим.
Популярность цветовой схемы заключается в ее многочисленных преимуществах, от предложения пользователям более элегантной и элегантной рабочей среды до положительного влияния на срок службы батареи и энергопотребление устройства. Между тем, так называемый ночной режим также удобен, потому что он уменьшает использование светлых пикселей, что, в свою очередь, снижает общую яркость экрана, вызывая меньшее напряжение глаз и облегчая чтение.
Совет. Чтобы создать визуально потрясающий веб-сайт, смешайте темный режим с минималистичными белыми элементами и чистой графикой и типографикой. Для большей эстетической привлекательности добавьте несколько ярких акцентных цветовых схем, светящуюся неоновую типографику или футуристические элементы.
Источник: https://dribbble.com/shots/66-Furniture-e-commerce-app Источник: https://dribbble.com/shots/4992178-Reuters-News-Night-Mode Источник: https://dribbble.com / shots / 8565906-The-Energetic-Tumbler-Landing-PageВзрыв из прошлого, минимализм — это классическая тенденция веб-дизайна, которая останется неизменной.Несмотря на то, что формы и особенности минимализма с годами изменились, его основы остались прежними, завоевывая сердца как дизайнеров, так и конечных пользователей своей элегантностью, удобством использования и простотой.
Минимализм в веб-дизайне может означать множество вещей — от минималистичных графических элементов и узких цветовых палитр до минимума текста и навигации по сайту.
Эта тенденция приобрела известность как способ приспособиться к уменьшающимся размерам экрана и продолжительности внимания. Удобство использования и навигация по веб-сайту облегчаются благодаря чрезвычайно минималистичному меню, которое устраняет большую часть трудностей, смещая фокус посетителей с того, как найти определенную информацию, на использование самой информации.
Хороший способ достичь минимализма в веб-дизайне — отказаться от тяжелого абзаца для высококачественного изображения или видео, которое передало бы смысл текста более заманчиво и прямо.
Совет: минимализм и функциональность идут рука об руку, поэтому при разработке навигации по веб-сайту избегайте втискивания несвязанной информации в один раздел. Сделайте так, чтобы ваши посетители могли легко найти услуги, которые вы предлагаете, страницу контактов или часто задаваемые вопросы, сохраняя при этом легкость.
Источник: https: // dribbble.com / shots / 3583923-Mono-WeatherSource: https://dribbble.com/shots/8622369-Mobile-app-Vegan-mealSource: https://dribbble.com/shots/8631208-Unix-Banking-App2020 будет быть годом минимализма даже в цветовой гамме веб-сайта. Черный и белый в сочетании с очень узким спектром оттенков серого неизменно элегантны, эстетичны и современны.
Чтобы ваш веб-сайт не выглядел скучным, добавьте несколько высококачественных черно-белых фотографий или художественных иллюстраций.
Совет: 50 оттенков серого могут быть литературным бестселлером, но в дизайне веб-сайтов это провал.Если вы выбираете черно-белый веб-сайт с элементами в оттенках серого, придерживайтесь двух-трех оттенков серого.
Источник: https://dribbble.com/shots/5179726-Lookbook-Black-White Источник: https://dribbble.com/shots/7117245-HI-RISE-BUILDERS-DEVELOPERSS Источник: https://dribbble.com/shots /14-Week-31-Photo-Discovery-App-Concept
Напротив, светящиеся цветовые схемы станут шагом вперед в изометрической тенденции в веб-дизайне. Светящиеся неоновые цвета, такие как синий, фиолетовый и розовый, сделают ваш сайт современным и футуристическим.В сочетании с более глубокими и темными оттенками эти яркие цвета будут появляться с экранов, создавая смелый и дерзкий вид вашего сайта.
Совет. Элементы неонового цвета хорошо сочетаются с любой из вышеупомянутых тенденций веб-дизайна (темный режим, минимализм, черный и белый), поскольку более темный, не красочный фон делает эти светящиеся цвета еще более заметными.
Источник: https://dribbble.com/shots/5577531-Atomic-DNA-Manifesto-Introduction Источник: https://dribbble.com/shots/47-Landing-Page-ICO Источник: https: // dribbble.com / shots / 4827534-Saving-Animals-IllustrationОриентированный на человека подход в дизайне в последнее время переживает период возрождения, и нет лучшего примера этого, чем рисованные элементы. Будь то карикатурные иллюстрации, нарисованные значки или рукописные надписи, технологии последних лет — это все, что связано с эмоциями, человечностью и индивидуальностью.
Кроме того, нарисованная от руки графика излучает позитив, душевность и легкость, поэтому эта тенденция является обязательной для 2020 года, если вы стремитесь показать своим клиентам, насколько вы креативны и изобретательны.
Совет. Художественные иллюстрации добавят немного аутентичности и непринужденности вашему веб-сайту, но будьте осторожны — иллюстрированный веб-сайт принесет пользу не всем профессионалам. Чтобы ваша веб-презентация выглядела детской, легкомысленной или легкомысленной и, следовательно, отпугивала как существующих, так и потенциальных клиентов, обратитесь за советом к профессионалу в области веб-дизайна.
Источник: https://dribbble.com/shots/7160309-Snapsound-Homepage-In-progress Источник: https://dribbble.com/shots/6685757-Vacation-House-Cooking-Landing-Page Источник: https: // dribbble .com / shots / 9220552-Landing-page-NatureВ последние годы основной целью веб-дизайнеров было обеспечение приятного взаимодействия с пользователем. Один из самых важных аспектов хорошего UX — чистая, разборчивая типографика. Жирные шрифты с заглавными буквами, монохромные цвета или прозрачные с контуром — самая популярная тенденция сегодня.
Курсивные шрифты трудно читать, и очень легко смешивать похожие на вид буквы, поэтому такая типографика не имеет ничего общего с новым, современным веб-сайтом, который нацелен на хороший UX.
Совет. Крупный шрифт отлично подходит для привлечения внимания посетителей, но убедитесь, что размер букв правильный на всех устройствах, от настольных компьютеров до смартфонов. Одна буква, занимающая весь экран смартфона, — плохой пользовательский опыт.
Источник: https://dribbble.com/shots/6103123-Thrive-Conference-Promo-March-15-16 Источник: https://dribbble.com/shots/7725993-Funky-Fresh Источник: https://dribbble.com / shots / 7088514-TenВероятно, одна из самых заманчивых тенденций веб-дизайна выходит на широкую ногу благодаря огромным технологическим достижениям последних лет.Трехмерные элементы — это весело, увлекательно и, как правило, дольше удерживают посетителей на сайте.
Depth добавляет ощущение реализма, качество, которое может быть особенно полезно для электронной коммерции, где трехмерные изображения могут использоваться для представления продуктов с различных точек зрения или для практического использования.
Совет. 3D-элементы могут быть довольно тяжелыми для загрузки, поэтому не волнуйтесь, добавляя их на свой веб-сайт. Умеренно занятые, они могут творить чудеса; чрезмерно они могут снизить эффективность SEO вашего сайта.
Источник: https://dribbble.com/shots/6759955-Pastel-Pink-Lighting-Material-StudySource: https://dribbble.com/shots/6247971-Push-WeightSource: https://dribbble.com/shots / 8811213-3D-Design-Shoes-for-Commercial-Characters Источник: https://dribbble.com/shots/7779269-OttoУменьшите хвастовство 3D, используя тени, слои и плавающие элементы. Это шаг вперед по сравнению с тенденцией материального дизайна, которая может превратить простое изображение в великолепный элемент. Этот псевдо-3D-эффект может быть применен также к значкам, графике и тексту.
Еще одна приземленная тенденция, которая может создать иллюзию глубины, — это перекрытие слоев. Размещение нескольких элементов, таких как текст, изображения, видео, значки и т. Д., Может превратить переполненный и загруженный веб-сайт в веб-презентацию с продуманным расположением и бесперебойным потоком.
Совет: здесь определенно применимо старое доброе «меньше значит больше». Если ваш веб-сайт начинает напоминать презентацию PowerPoint со всеми доступными эффектами, такими как затухание, (исчезновение) появления, изменение размера, отбрасывание теней и т. Д.- прервать миссию.
Источник: https://dribbble.com/shots/6762159-Reimagining-99pi Источник: https://dribbble.com/shots/4677040-Porcelanosa-web-designhttps://dribbble.com/shots/6768450-99pi-Miss -ManhattanДо недавнего времени анимация веб-сайтов в основном происходила сама по себе, независимо от действий посетителей на самом сайте. 2020 год изменит это с появлением анимации, запускаемой пользователем.
Вышеупомянутые тренды трехмерных, плавающих или многослойных элементов можно включить в анимацию, запускаемую пользователем.Щелчки, наведение и другие действия посетителей могут привести к изменению цвета, размера, дизайна и т. Д. Эти анимации полезны, когда вы хотите, чтобы ваш веб-сайт был более увлекательным и стимулирующим, но при этом сохранял свою простоту и элегантность.
Совет: не переусердствуйте — одной или двух анимаций, запускаемых пользователем, вполне достаточно. Большое количество анимаций может привести к тому, что каждое движение мыши пользователя будет делать что-то на веб-сайте, создавая путаницу и неудовлетворенность.
Источник: https: // dribbble.com / shots / 7885798-Pet-food-website-design Источник: https://dribbble.com/shots/8493535-Book-Festival-Website-InteractionsГрадиенты снова в моде, сильнее, чем когда-либо. В 2020 году появятся смелые разноцветные градиенты на всем, от фона до текстовых заливок. Сочетание нескольких цветов, создающих контраст и иллюзию глубины, — это выигрышная комбинация для гладкого, ультрасовременного внешнего вида веб-сайта.
Совет. Избегайте монотонных градиентов, поскольку они выглядят неряшливо, скучно и не стильно.
Источник: https://dribbble.com/shots/8660936-Birds-Guide-APPS Источник: https://dribbble.com/shots/5635469-Hero-image-illustration-for-music Источник: https://dribbble.com / shots / 7013067-App-concept«Картинка стоит тысячи слов». Верно для 2019 года, но благодаря высокоскоростному подключению к Интернету статические изображения героев исчезли. Вместо этого высококачественные видеоролики, которые создают впечатление фильма, являются отличным способом приветствовать, вовлекать и развлекать посетителей в 2020 году. Изображения имеют решающее значение в визуальном дизайне, потому что они позволяют доставлять сообщение быстро и прямо, и нет лучшего способа показать это чем использование видео.
Au contraire, есть только текстовые герои. Большая, жирная, жирная типографика, без фотографий и видео, оформленная в монохромной цветовой схеме, — новая горячая тенденция 2020 года. Удаление части веб-сайта, которую посетители увидят первой, — смелый эксперимент, но тенденция, которая обязательно будет очевидна. его пик в текущем году.
Совет. Для загрузки видео требуется время, поэтому, если вы выбрали один из главных разделов, убедитесь, что он имеет правильный размер и не отстает от времени загрузки вашего веб-сайта.Поместить видео с YouTube в героя — большой запрет — либо интегрируйте его на свой веб-сайт, либо полностью избегайте видео.
Источник: https://dribbble.com/shots/3169448-Type-color2020 будет годом разнообразия, когда дело доходит до тенденций, доминирующих в мире веб-дизайна. От абсолютной простоты до чрезмерных сочетаний цветов и элементов, у дизайнеров будет широкий выбор того, как создать веб-сайт, который будет выделяться среди всех других привлекающих внимание дизайнов.
Дизайнеры, которые стремятся к лучшему UX и привлекательному внешнему виду веб-сайтов, должны учитывать некоторые из тенденций веб-дизайна, которые будут доминировать в 2020 году:
- Темный режим
- Минимализм
- Черно-белый
- Световые цветовые схемы
- Рисованные элементы
- Жирная типография
- 3D-элементы
- Тени, слои и плавающие элементы
- Анимация, запускаемая пользователем
- Разноцветные градиенты
- Видео или текстовые герои
Уже в этом году выглядит многообещающе, как для дизайнеров, которые будут заняты объединением этих тенденций, так и для маглов веб-дизайна, которые получат возможность наблюдать и наслаждаться ими по всей сети.