16 лучших примеров дизайна главной страницы сайта
Содержание:
- 10 самых красивых сайтов в Мире
- Виды дизайна
- Креативные, творческие, дизайнерские сайты
- Анимация оживляет дизайн и делает акценты на главном
- Кастомные иллюстрации
- Демо
- Сайты знаменитых фрилансеров
- Сайты дизайнеров-фрилансеров
- Асимметричные макеты и «ломаная» сетка
- Главные заголовки сжимаются
- Jivrus Technologies – сайт компании
- Примеры удачного оформления главной страницы сайта
- Брутализм
- Брутальный веб-дизайн
- Зачем необходимо еще и ТЗ на разработку дизайна сайта
10 самых красивых сайтов в Мире
1) rainforest.arkivert.no
Этот сайт сделан в виде 3D панорамы, что позволяет его выделить среди аналогичных площадок схожей тематики. Мягкие цвета и не загроможденный дизайн заставляют как можно дольше задержаться на этих страницах.
2) www.gruny.net
Очень красивый блог на движке WordPress. Именно к такому красочному дизайну (шапке блога) должен стремиться каждый.
3) www.sensisoft.com
Очень мощный сайт. Навигация по сайту выполнена в виде «афишной тумбы». Нажимая на стрелочки внизу, вы будите путешествовать по всему миру. Окажетесь даже на Красной площади.
4) houseofborel.com
Этот проект меня зацепил тем, что шапка на главной странице создана из приветственного видео, раскрывающего тематику сайта.
5) cpeople.ru
Креативное агентство, входящее в десятку лучших агентств России.
6) www.2advanced.com
Мне понравилась загрузка самого сайта, выполненная в виде процентов. Сам сайт посвящен гаджетам продукции Apple.
7) saizenmedia.com
Еще одно креативное агентство. Потрясающая детализированная графика.
8) www.gnosh.co.uk
Необычный кулинарный блог G’NOSH одного из ресторанов Великобритании.
9) www.macaronibros.com
Дизайн говорит о том, что здесь будет что-то про еду, но на самом деле это визитка одной из популярнейших компаний по веб-дизайну, графике, видео и других творческих течений.
10) quakequizsf.org
Это интернет-симулятор землетрясений. Обучает взрослых и детей правилам поведения во время природной стихии. Скажу честно, но я так и не смог понять, как он работает.
Виды дизайна
Каждый бизнес – от продаж французской косметики до ремонта грузовых автомобилей – отличается своим сегментом рынка, целевой аудиторией и особенностями продвижения. В связи с этим в сфере разработки дизайна сайтов существует большое количество вариаций оформления. Их все можно условно разделить на следующие группы.
Рисованный дизайн — Hand Draw
При таком оформлении используются различные техники рисования: акварель, графика, карандашные рисунки и так далее. Этот стиль допускает буйство красок, градиентов, теней, смешение форм и направлений. У посетителя должно создаться впечатление, что все картинки были выполнены вручную художником с последующей оцифровкой.
Для кого подойдёт: сайты-визитки креативных и нестандартных специалистов и компаний (тату-мастера, стилисты, имиджмейкеры, дизайнеры интерьеров, PR-менеджеры), сайты различных компаний, использующих креатив в своей работе.
Плоский дизайн — Flat Design
Этот стиль предполагает использование максимально простых и понятных цветов и форм. Здесь полностью отсутствует игра с цветовой гаммой, тенью, градиентом и так далее. Главный акцент делается на контенте, который разбавляют яркими акцентами. Флэт дизайн хорош тем, что на его создание уходит меньше времени, так как отрисовывать какие-то художественные элементы не нужно. При создании сайта с плоским дизайном можно использовать корпоративные цвета фирмы.
Для кого подойдёт: для любого бизнеса. Простота и минимализм – это отличное решение как для начинающих предпринимателей, которые боятся экспериментов и ошибок при позиционировании бренда и фирмы, так и для крупных компаний, которые уже пользуются авторитетом на рынке. Такой дизайн широко применяется как при создании многостраничных сайтов, так и лендингов (о том, каким должен быть дизайн landing page, читайте ЗДЕСЬ).
Материальный дизайн — Material Design
Создателем этого дизайна является компания Google, креативные менеджеры которой в 2014 году приняли решение об отказе упрощённого интерфейса в пользу возвращения к более реалистичным объектам. Была разработана «квантовая бумага» — объект на экране устройства, который подчиняется законам физики. Такой подход позволил разработчикам создать понятный интерфейс для всех пользователей.
После успешного внедрения материального дизайна в интерфейс техники, работающей на операционной системе Android, он стал широко использоваться при создании сайтов различных фирм и компаний.
К его особенностям можно отнести:
- насыщенную цветовую палитру,
- тщательность прорисовки элементов оформления,
- полную визуализацию объектов из окружающего мира.
Отдельно стоит упомянуть об интерактивности. Каждая кнопка и элемент сайта при нажатии на него активируется и трансформируется в что-то новое. К примеру, осуществляется переход между страницами сайта или включается презентация, или видео. Можно сказать, что таким способом происходит активное взаимодействие пользователя с сайтом.
Это, в свою очередь, способствует лучшему изучению контента, поскольку заинтересованный гость внимательно просмотрит всё содержимое. Как показывает практика, поведенческие факторы на таких сайтах улучшаются за счёт того, что просматривается больше страничек и увеличивается время нахождения пользователя на ресурсе. А это, в свою очередь, приводит к поднятию в поисковой выдаче.
Работа над таким дизайном потребует слаженной работы графического иллюстратора, программиста и верстальщика.
Для кого подойдёт: материальный дизайн подходит для сайтов малого, среднего и крупного бизнеса, которые хотят привлечь не охваченные ранее сегменты рынка за счёт такого маркетинга. Также его можно внедрять в процессе ребрендинга, поскольку совершенно новый подход к подаче контента лучше запомнится аудитории и поможет им быстрее освоить изменения.
Креативные, творческие, дизайнерские сайты
Jess Marks Photography
Одноколоночный дизайн в стиле современного ретро. Этот веселый сайт буквально напичкан персональностью. После редизайна и долгих поисков хорошего движка был выбран WordPress. Главная причина: WP прост, WP впереди планеты всей по доступности полезных плагинов.
Team Les Chameaux
Перед вами темный веб-сайт команды жаждающих приключений и путешествий. Любителям острых ощущений ненавязчивый дизайн захватывающе демонстрирует активный образа жизни. Эффект неожиданности создается анимацией с обводкой, открывающей затемненное изображение, раскрывающимися контрастными блоками контента и осветлением фото в окружении утонченных элементов.
We are CMYK
Необычный сайт с интересным доменным неймингом (увязано с оформлением) и плоским стилем дизайна. В агентстве Адама Шера (специалиста по UI/UX и моушн-графике) концентрируются на эстетической привлекательности & опыте взаимодействий. Идея, креативным контентом и уникальностью показать – у нас нет клише-решений. Интересные «фишки» в неизбитом web-дизайнерами виде: персонификация, многоцветные страницы с анимациями, графика с разбивкой на квадратики – пиксели.
Анимация оживляет дизайн и делает акценты на главном
Яркие анимированые кнопки чаще всего применяются на посадочных страницах для привлечения внимания пользователя к нужному действию. В этом случае оправдано применение трех разных состояний кнопки – обычное, при наведении и при нажатии.
При создании дизайна обычной веб страницы для практического воплощения такого функционала потребуются 3 или 4 разных графических файла для каждой кнопки. Каждый из этих файлов будет отвечать за определенное состояние (обычное, при наведении и при нажатии). Загрузка той или иной картинки будет происходить посредством правил CSS, которые описаны ниже:
- a – обычная ссылка, для которой задается цвет и первое фоновое изображение.
- a:hover – ссылка при наведении на нее мышки (также описывается цвет и путь ко 2-ой фоновой картинке).
- a:active – здесь описываются параметры ссылки в непосредственный момент нажатия на нее.
- a:visited – указываются параметры уже посещенной ранее ссылки в состоянии, когда на нее не наведена мышь.
ВЫВОД: Слишком яркие анимированные кнопки целесообразно использовать только для посадочных страниц, в остальных случаях вполне достаточно анимации при наведении.
Готовы ли вы поднять дизайн сайта на новый уровень? Мы являемся командой специалистов по разработке веб-сайтов и с экспертами UX-дизайна, которые готовы помочь сделать именно это!Если вашему бизнесу требуется создание современного сайта, не пренебрегайте анимацией, она сделает его более живым и интересным. Только помните про чувство меры, оно никогда не бывает лишним.
Вы хотите создать современный, удобный оригинальный веб-сайт? Обращайтесь к профессионалам в области веб-дизайна, звоните в веб студию АВАНЗЕТ, мы всегда рады помочь и проконсультировать. Красивая анимация в сочетании с UX дизайном дают поразительный эффект.
29.11.2020
Кастомные иллюстрации
Творчески проиллюстрированные коммерческие сайты пользуются популярностью, потому как их стремление к индивидуальности не остается без внимания. Уникальная иллюстрация в фоне, способна создать особый настрой и даже повлиять на эстетику сайта.
Эстетичные сайты с уникальными иллюстрациями:
getonboardbrt.com – красивое применение акварельной иллюстрации в плоском дизайне
bostonbrt.org – инновационную систему транспорта, бостонский сайт иллюстрирует акварелью
mamyfactory.com – рисованным изображением процесса вязки французский e-Commerce сайт привлекает целевого посетителя
lattice.com – стартапу важно показать фото с рабочим процессом, однако призывы к действию они усилили позитивными иллюстрациями
Демо
Еще один отличный способ личного продвижения — создать сайт с демонстрацией навыков в кодировании, дизайне, разработке и т.д. Он может быть интерактивным или анимированным. Этот формат отличной подойдет для разработчиков, UX -дизайнеров, контент-менеджеров и иллюстраторов.
Тоннина демонстрирует свои продвинутые навыки разработчика, но при этом он использует понятные изображения и иконки. Также в самом начале он предлагает ознакомиться с его резюме, на случай, если у посетителя не будет времени или желания просматривать анимацию.
Сайт Кейна невероятно красивый. Благодаря замечательному фоновому фото и минималистичному дизайну, его опыт действительно запоминается. В качестве демонстрации своих навыков в дизайне и кодировании он запрограммировал смену фона сайта. Это делает демо более интерактивным и захватывающим. Нажмите на стрелку вверху сайта, чтобы обновить фон.
На своем потрясающем сайте Леонарди использует анимацию и демонстрирует свои навыки разработчика, превратив при этом свое резюме в видео игру для посетителей. Отличный брендинг и уникальный подход к передаче информации делает этот опыт запоминающимся.
На своем сайте Рид от начала до конца демонстрирует, как создается сайт. Начинается все с белой страницы, а заканчивается полностью интерактивным сайтом, который автор создает самостоятельно на глазах пользователей. Его навыки просто нельзя не заметить и не запомнить.
Сайт Стэнк демонстрирует дизайнерские навыки автора, а также рассказывает о себе, своем агентстве и профессии. В нем идеально сочетается демо и мини-резюме.
Лучшие практики для демо
- Используйте собственный брендинг, уникальные логотипы и цвета, которые помогут вам выделиться и запомниться.
- Не добавляйте слишком много визуального контента, особенно если вы используете анимацию.
- Сделайте изображения понятными пользователям.
Сайты знаменитых фрилансеров
Их талант знают на рынке, а эксклюзивные работы высоко ценят. Свежие идеи, качество и индивидуальность – вот, что привлекает именитых заказчиков.
Malika Favre
После пяти лет работы в студии Малика стала независимым иллюстратором. Талантливая француженка оставляла свое имя под все новыми идеями. «Никогда не жалела о выборе» – скажет в интервью спустя еще 5 лет.
Потомственная художница прошла путь от иллюстрирования кино-постеров / книжных обложек до редакторства «New York Times» и признает, что конкуренция высока. Ее работы выделяют:
- Смелое сочетание негативного пространства и ярких цветов
- Капелька озорного юмора
Diane Martel
Известная клипмейкер живет в Нью-Йорке и Лос-Анжелесе. Инновационное портфолио Дайан Мартел привлекает навигацией с 3D-скроллинг эффектом.
The Story Of Telling
Сайт консультанта, ведущей и автора бестселлеров. В отличии от агрессивных современников, Бернадетт Джива – радушный брендинговый эксперт. Основная идея в заголовке: «Не нужно конкурировать, если известно кто ты такой». Индивидуальность выражена цветовой схемой, типографикой и всем дизайном.
Сайты дизайнеров-фрилансеров
Эффектность дизайна ориентирует на качество услуг, расширяет аудиторию (приводя заказчиков с большими возможностями). К независимым специалистам обращаются Google, Apple… Отобраны самые модные и запоминающиеся персональные сайты разработчиков продукции, интерфейсных- и веб-дизайнеров.
Kaleys
Графический и веб-дизайнер разрабатывает на заказ интернет-витрины, лендинги, баннеры, eCommerce сайты. Француженка заявляет об эксклюзивности услуг яркой выразительностью в стиле Material Design с 3D-графикой.
Coraline Colasse
Независимый французский продакт-дизайнер и арт директор главными элементами дизайна сделала инициал собственного имени и свободное пространство. Возможностью «заглянуть» через букву-трафарет Коралина вовлекает посетителя.
Ludmilla Maury
Людмила – французский Web и UI/UX дизайнер. После 6–лет работы в агентствах Парижа / Мадрида / Леона ушла во фриланс. Личный сайт в стиле модного минимализма.
Pauline Osmont
Персональный сайт фриланс UX/UI дизайнера Полины Осмонт. Неотразимость французского обаяния нашло воплощение в художественном самовыражении. Сбалансированный дизайн с множеством изображений воздействует мощно, но не подавляет.
Anat Kalinski
Анат Калински начинала с SEO, продолжила в дизайне. Независимая дизайнер цифровых продуктов увлекается UX-исследованиями и оптимизацией. Ее разработки включают изучение конкурентов, персонального, трендов с технологиями и даже маркетинговых стратегий.
Бодрый и нестандартный сайт фрилансера:
- Главная страница с горизонтальной сменой сочных экранов
- В «по-спортивному» стильном портфолио иконки-плитками c флип-переворотом
Графический фриланс-дизайнер из США разрабатывает логотипы & принты, отрисовывает сайты для стартапов и малого бизнеса с 2005 года. При полной прозрачности услуг, удаленно / встречаясь с клиентами Гвен Кэнфилд создает брэндинг-материалы и доступный креатив в Арканзасе, Теннесси, юго-восточных штатах.
Emily Mabry
Графический дизайнер Эмили Мабри создает бренд-айдентику, сайты и принты. Черно-белый стиль повышает заметность визуальных образов, разработанных американкой для сферы малого бизнеса.
Aisling
Отмеченная наградами графический и бренд дизайнер из Дублина. Эшлинг с отличием закончила Арт-школу, изучив визуальные коммуникации. Визуальный брендинг стал основным направлением ее фриланс-деятельности.
Ines Maria Gamler
Интерфейсные изящества в винтажность, увязанные с духом времени – отлично характеризуют услуги австрийского иллюстратора и скрин-дизайнера. Мария специализируется на Вордпрессе, UX/UI разработках и визуализации данных.
Melanie Daveid
Мелани Дейвид из Берлина – «несносный ребенок» цифрового авангарда. На однстраничнике демонстрирует работы, принципы…, завершая секцией «Дай пять». UX-дизайнер, арт-директор и талантливая иллюстратор прошла путь от карандаша до цифрового искусства. Готова фрилансить и сотрудничать в разработке.
Закончив парижскую школу Gobelins работала арт-директором в Амстердаме, но ей определенно хотелось больше солнца и творческой независимости. Вернувшись в Париж ушла во фриланс, так как требовалось свободное время для экспериментов. Сейчас Луис Анса в команде Мake me Pulse, но привычка подрабатывать на стороне осталась.
Juliette Neveu
Модное портфолио высококлассного креативного & цифрового дизайнера: элегантная главная в один экран, бесшовный переход к работам
Джульетта любит минималистичную эстетику с вниманием к деталям. Парижский фрилансер разрабатывала одежду для fashion-брендов
Marija Zaric
Сербский веб-дизайнер специализируется на простых, дружественных к пользователю дизайнах, выражая это понятным портфолио-сайтом. Мария Жарич разрабатывет разные шаблоны на Bootstrap и увлечена фотографией.
Veerle Pieters
Графический и веб-дизайнер начинала с принтов логотипов, брошюр, канцтоваров. Бельгийка Вирли Питерс: «По своей природе я люблю цвета. Мой персональный онлайн-журнал отражает видение дизайна, web-а и жизни». Она украшала журнал Smashing Magazine, рассылку новостей MailChimp и дизайны WordPress-тем.
Асимметричные макеты и «ломаная» сетка
Ломаное размещение элементов – набирающий популярность web-тренд, для реализации которого не требуются экстра ресурсы разработки. Нестандартную сетку применяют, чтобы сайт не походил на другие из своей ниши. Вместе с направлением асимметричного дизайна, стиль наслаивания элементов порождает особую эстетику и свои правила. Нетипичная, как и любая другая верстка, подразумевает необходимость поддерживать визуальный баланс. Тут нужно будет планировать пересечения так, чтобы уравновесить асимметричную структуру оформления сайта.
Дизайны с асимметричной разметкой и наслаиванием элементов:
welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса
techstyle.com – черно-бело-синий дизайн с анимацией и параллаксом. Полупрозрачные плашки поверх фото с реалистичными тенями перекрывают собой синие круги, наезжающие на гранжевые фоны. Множественное наслаивание асимметричных flat-элементов создает объем, а вертикальное свободное пространство добавляет креатива и стильности
originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный
imsproductions.com – красивое применение тренда на сайте американской продакшн компании
heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка
Главные заголовки сжимаются
Недавно правилом оформления hero-хедера было – чем заметней массивный заголовок, тем лучше. Веб-пользователи сталкивались с огромными надписями поверх hero-изображения
Гигантские буквы с главных экранов приковывали внимание. Но, «визуально кричащее» создает не лучший User eXperience
Недостатки драматической типографики:
- Не смотрится при малых разрешениях
- Адаптация дизайна нарушает его эстетику
С умеренным шрифтом потери не столь велики. К счастью, габариты надписей уменьшаются.
Без шрифтового гигантизма:
- Проще разрабатывать под мобильные
- Больше мотивирующего вмещается до линии сгиба
Смотрите, главной страницы Dollar Shave Club.
Jivrus Technologies – сайт компании
Jivrus.com – мощный сайт-визитка компании, предоставляющей услуги по софтверной автоматизации бизнес-процессов. Красивое фото на весь первый экран в шапке впечатляет, задаёт тон восприятия остального дизайна. Оно добавлено через HTML-код – блока с такими характеристиками просто нет в наборе виджетов редактора. Страницы имеют довольно сложную структуру – множество иконок, описаний, кнопок и ссылок. Выглядят достойно. Богатство внешнего вида обеспечивается большим количеством различных изображений (иконок, фото и графики). Есть кнопки социалок, но смотрятся грубовато – слишком большие и яркие.
На самом деле, ничего сложного в оформлении страниц нет – они построены из многократно повторяющихся одинаковых блоков «картинка+текст», но работа выполнена на хорошем уровне. Каждая секция сопровождаются грамотным маркетинговым описанием, красные акценты добавляют структурности, визуально разделяют поток информации на смысловые блоки. Страниц около 10, все они оформлены качественно, есть даже простенький блог. Многие ссылки ведут на поддомен с дополнительными материалами – сайт имеет огромный масштаб по меркам Google Sites. За счёт качественной подачи контента проект выглядит богато по меркам платформы – практически эталон.
Примеры удачного оформления главной страницы сайта
1. Пример удачного оформления отзывов
Слагаемые успеха:
- Заголовок продает не окна, а тишину и уют в доме, подзаголовок гарантирует короткий срок выполнения работ.
- Визуальное оформление создает спокойное гармоничное настроение, а креативный призыв к действию вызывает желание последовать ему.
- Отзывы располагаются на главной странице и включают не только имена и фото реальных покупателей, но и карточки, на которых они писались. Все это работает на рост доверия и поддержание лояльности пользователей.
2. Эко Хлеб
- Фотографии продуктов и отрисовка элементов выполнены с высоким качеством.
- Цветовая гамма, логотип и детали оформления соответствуют ретро-стилю.
3. CloudPassage: видео на главной странице
Секреты удачной главной страницы:
- Лаконичный дизайн без ненужных элементов. Текст, в котором заключена суть деятельности CloudPassage. Интересная дизайнерская находка для размещения видеоролика.
- Единственный призыв к действию и работа на опережение: потенциальные сомнения пользователей развеиваются фразами «Без кредитных карт», «Без обязательств».
4. Персона
Слагаемые успеха:
- Интересный логотип и продуманный слоган, продвигающий в первую очередь товар-локомотив – томатный кетчуп.
- Элементы оформления подобраны и отрисованы с пониманием цели – поддержание имиджа компании, производящей достойный продукт.
- Прокрутка страницы позволяет познакомиться с разными видами кетчупа, при этом меняется окружающая картинка.
5. Carbonmade
- Стилистика иллюстрации из детской книжки создает доброжелательное и искреннее настроение.
- Цифры, список преимуществ добавляют серьезности и убедительности.
- Картинки, подобранные для иконок меню, предполагают наличие чувства юмора. Общее впечатление от главной страницы шутливое, но многообещающее.
6. Крошка Картошка
Известный бренд фастфуда на своем промо-сайте использовал сразу несколько интересных находок:
- Общий позитивный настрой благодаря логотипу, цветовому решению и графике.
- HotSpot тултип-подсказки расширяют кругозор пользователя интересными сведениями и картошке.
- Доступен для прослушивания гимн компании (аудиомаркетинг).
7. Evernote.com: пример страниц описания сайта
Слагаемые успеха:
Идеальный заголовок главной страницы – краткий и емкий. Сочный зеленый цвет фона создает деловой настрой, а три основных предложения воспринимаются как готовый алгоритм действий для любой работы
CTA «Попробуй Evernote бесплатно» расположена удачно – на стыке полей разного цвета, поэтому привлекает внимание деликатно, но настойчиво
8. Бургер Кинг: шрифт как главный герой
- Удачное сочетание массивных букв, качественных фотографий и стилизованных элементов UI.
- Динамическая подгрузка твитов выводит социальные доказательства во flip-блоки.
9. Unlocking
Мы считаем эту главной страницу достойной подражания, потому что:
- У пользователя не вызывает сомнений назначение этого сайта. Блокировка телефона – проблема, знакомая многим, и на странице есть краткая инструкция по ее решению.
- Удачное цветовое решение, основанное на контрасте. Социальные доказательства убеждают в эффективности ресурса: «Доверие миллионов: разблокировано более 4 млн. телефонов».
- Вместо элемента CTA пользователю сразу предлагается заполнить краткую лид-форму: не надо переходить на следующую страницу и ждать ее загрузки.
Подробнее
10. Apidura – бренд велотоваров из Великобритании
- Эффектный фон с манящей вдаль дорогой, необычные иконки в виде шестигранников, графичные полупрозрачные изображения меню и изысканный футер.
- Тот случай, когда дизайн стал главной движущей силой для роста популярности бренда.
11. eWedding
К главной странице этого сайта стоит присмотреться, потому что:
- На ней нет ничего лишнего, все по делу, кратко и информативно.
- Призыв к действию подтверждается размещенной рядом фразой «Создайте свой бесплатный свадебный сайт за 5 минут».
12. Moosend. Пример успешного редизайна главной страницы
- Для заголовков и UI выбран одинаковый шрифт, благодаря чему содержание воспринимается легче и лучше запоминается логотип.
- Веб-дизайнеры внесли удачные коррективы в оформление, вынеся поля регистрации на первый экран и добавив новые анимации.
13. Tribute Media — маркетинговое агентство из США
Для указания на выдвижное меню использованы стрелки и анимированные иконки, они же привлекают внимание к дублирующей навигации по вкладкам. CTAрасполагается в первом экране по F-схеме просмотра: лого> цифры> кнопка
Брутализм
Знакомы с архитектурным брутализмом, возникшим в 1950-х – 60-х? Особая гнетущая атмосфера однообразной функциональности: четкие грани, простота и награждение бетонных плит. Брутальный сайт, также лишен украшений – это визуальная коммуникация со своей эстетикой. Брутальные проявления идентичности будут характерны для web среды 2020-х.
Брутальная простота дизайна по французски.
Изысканный брутализм – одностраничный дизайн на основе текста. Параллакс-прокрутка и hover-эффекты с плавным появлением / легким глитч-искажением превью. Сочетание трендов: внушительный размер горизонтальных и вертикальных надписей контурным шрифтом.
Брутальный веб-дизайн
Стиль брутализма в веб-дизайне достаточно многообразен. По сути это незавершенный дизайн и воплощение идеи минималистического контраста. Многих привлекает бруталистская эстетика: гранж, неотесанность, аскетизм. Есть мнение, что в определенных нишах брутальный веб-дизайн повышает конверсию сайта.
Стиль брутализм применяемый в веб-дизайнах:
gift.gucci.com – интерес к брутализму проявляют не только в веб дизайнерской среде: звездный бренд применяет не ради забавы
balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)
Зачем необходимо еще и ТЗ на разработку дизайна сайта
Техническое задание на разработку дизайна сайта представляет собой документ, содержащий детальное описание процесса взаимодействия разработчика с клиентом и нужный результат проекта.
ТЗ необходимо для веб-мастера. Составляя договор с исполнителем, нужно ссылаться на техническое задание. Следует определить ответственность, которую понесет разработчик, если не выполнит условий договора, либо выполнит их некорректно, нарушит сроки. Однако основная цель составления ТЗ – ускорить процесс разработки дизайна сайта компании-заказчика.
ТЗ может содержать:
- Карту ресурса.
- Примеры понравившихся вам сайтов из вашей сферы деятельности.
- Описание контента.
- Технические параметры (размеры изображений и т.п.).
- Список языков.
- Прототипы ресурса (схематичный макет) и утверждение готовой версии проекта.
- Прототипы берутся за основу при разработке дизайн-макетов страниц сайта. Утвержденный готовый вариант передают на верстку, чтобы окончательно интегрировать в движок.
Что нужно обязательно сообщить разработчику?
- Обозначить целевой сегмент пользователей.
- Указать желаемый размер сайта, цветовую гамму.
- Детально описать все индивидуальные пожелания, тогда веб-мастеру будет понятно, насколько ему нужно ограничить полет своей фантазии.