- 40+ примеров блестящего дизайна домашних страниц
- Продавцы: примеры домашних страниц сайтов eCommerce
- Профессионалы: примеры домашних страниц графических дизайнеров
- Бренды: примеры главных страниц компаний-ритейлеров
- Индустрия развлечений: домашние страницы знаменитостей и средств массовой информации
- «Технари»: примеры домашних страниц
- Поставщики услуг: главные страницы профессиональных сервисов
- Вместо заключения: что дальше?
- 20 шагов к идеальному дизайну сайта
- Проектируем макет корпоративного сайта / Хабр
- Калькулятор стоимости дизайна многостраничного сайта
- Экономия
- Подробнее о дизайне
- Этапы работы
- Результатом работы будет проект в программе Figma
- Размеры макетов сайтов
- Примеры возможных разрешений:
- Что же такое «прототип» сайта?
- Что такое когнитивная беглость?
- Что происходит, когда вы оправдываете ожидания?
- Визуальная обработка информации и сложность сайта
- Почему простой дизайн с научной точки зрения легче обрабатывать
- Каждый элемент передает тонкую информацию
- «Рабочая память» и Святой Грааль обращения
- 7 способов создать простой сайт
- Заключение
40+ примеров блестящего дизайна домашних страниц
Вы никогда не получите второй шанс произвести первое впечатление. Вот почему домашняя страница, несомненно, является одним из самых важных элементов — именно с нее начинается знакомство с вами. А с учетом того, что средняя продолжительность концентрации внимания составляет менее 8 секунд, новые посетители сайта нуждаются в простой и убедительной причине, чтобы задержаться на нем. Если ваш сайт не вступает с ними в контакт незамедлительно, или они знают, что делать на вашей странице, их рефлекторной реакцией будет нажать кнопку «назад» и просто уйти.
Не позволяйте этому случиться. Если вы планируете перестройку вашего сайта — или просто хотите увидеть отличный дизайн — ознакомьтесь с примерами домашних страниц, чтобы вдохновиться на собственный редизайн, поскольку каждый из приведенных кейсов достоин изучения.
Продавцы: примеры домашних страниц сайтов eCommerce
NoBull
Чему мы можем научиться: простая навигация и красивый дизайн могут (и должны) работать вместе. Хорошо организованный набор интерактивных «плиток» делает этот сайт удобным для «сёрфинга».
Lega-Lega
Чему мы можем научиться: это нормально, если вы не показываете посетителям все ваши товары сразу! В то время как большинство интернет-магазинов предлагают одновременно множество товаров (просто посмотрите на Amazon), этот сайт фокусирует внимание пользователя на лучших продуктах, подобранных, возможно, на основе их популярности у клиентов.
Urban Originals
Чему мы можем научиться: перед нами образец простого и эффектного дизайна главной страницы. Чистый фон и простая навигация безошибочно приводят посетителя к продуктовым лендингам.
Uncrate
Чему мы можем научиться: сайт Uncrate, несмотря на многочисленные уровни навигации, следует строгому эстетическому единству. Даже при использовании нескольких путей конверсии он фокусируется на одном ключевом продукте.
Scotch and Soda
Чему мы можем научиться: «плиточный» дизайн этой домашней страницы подчеркивает границы между различными областями веб-сайта, в то время как «фирменные» иконки социальных сетей позволяют легко делиться ссылками на контент. Вкладка «Последние публикации» предлагает посетителям больше контента, если они заинтересованы углубиться в пользовательский опыт, предоставляемый сайтом Scotch and Soda.
Подсказка 1: упростите ваш язык
Не тратьте впустую драгоценное онлайн-пространство, пытаясь выглядеть умнее. Вместо этого используйте на сайтах/лендингах тексты и изображения, передающие в ясной и лаконичной форме оффер вашей компании.
Профессионалы: примеры домашних страниц графических дизайнеров
Jib
Чему мы можем научиться: великолепное использование простой иллюстрации, отличное, очень уместное чувство цвета, кристально ясный текст и единственный призыв к действию — всё это, взятое вместе, делает этот сайт одним из лучших в списке.
Hello Monday
Чему мы можем научиться: этот дизайн, удостоенный приза «Сайт Года» (Site Of The Year) на конкурсе профессиональных веб-дизайнеров и разработчиков AWWWards, фокусируется на общем виде страницы. Минимальный текст хорошо работает в случае этой дизайнерской фирмы, потому что ее конкурентные преимущества лучше всего передаются визуально, но компаниям из других отраслей может потребоваться размещение на главной странице более четко сформулированного ценностного предложения.
Ride for the Brand
Чему мы можем научиться: этот сайт выбирает единую эстетику и применяет ее к каждому элементу страницы. Следует также отметить функцию непрерывной боковой прокрутки, обеспечивающую посетителям интересный пользовательский опыт.
Andy Patrick Design
Чему мы можем научиться: этот монохромный сайт использует единственный цветовой акцент. На странице также имеются отличная типографика, способствующие созданию простого, но приятного веб-дизайна.
This is the Brigade
Чему мы можем научиться: эта домашняя страница добивается успеха за счет большого баннера, точно передающего информацию о специализации компании, и сегментирования секций для «чанкинга» контента.
Galpin
Чему мы можем научиться: чтобы показать характер своей деятельности, дизайнер Тайлер Галпин (Tyler Galpin) на домашней странице применяет изысканную типографику. Обратите внимание, что страница в совсем малой степени ориентируется на изображения — для передачи маркетинговых сообщений в основном используется текст.
Made by Vadim
Чему мы можем научиться: высокоинтерактивный сайт общается с пользователем лаконично и в точности по существу дела. Навигация и CTA выделены четко, поэтому посетитель точно знает, куда идти дальше.
Art & Code
Чему мы можем научиться: иногда «меньше» значит «лучше». Использование нетрадиционных «всплывающих» иконок, чередующихся «сентенций» и сбалансированной компоновки придает сайту Art & Code ясный и привлекательный внешний вид.
Riley Cran
Чему мы можем научиться: здесь мы видим еще один пример привлекательного дизайна, базирующегося на применении «плиток».
Подсказка 2: упростите ваш дизайн
Чистый дизайн столь же важен как понятный текст. Грамотная компоновка может улучшить пользовательский опыт, не создавая противоречий маркетингу. Элементы сайта, будучи даже визуально привлекательными, могут вводить в заблуждение, что в конечном счете снизит эффективность страницы.
Избегайте общих ошибок, таких как непонятная иерархия, отсутствующая навигация или что-либо еще, что может создать конверсионное трение на сайте/лендинге.
Читайте также: Дизайн лендингов: преимущества минимализма с точки зрения психологии восприятияБренды: примеры главных страниц компаний-ритейлеров
REI
Чему мы можем научиться: эта домашняя страница сайта компании REI привлекает внимание пользователей контентом, демонстрируя фотографии, скомпонованные по принципу «плиточного дизайна».
Austeen Beerworks
Чему мы можем научиться: этот сайт четко передает основные цели страницы — рассказать посетителю, что это за компания и что она делает. Чистый светло-голубой фон в сочетании с изображениями высокого разрешения выделяет наиболее важный элемент: пиво!
Jaquet Droz
Чему мы можем научиться: страница швейцарского часового дома Jaquet Droz основана на визуализации главной «рабочей лошадки» компании — часах The Bird Repeater. Роскошное изображение в высоком разрешении также привлекает внимание посетителей к продукту — очевидно, самому важному элементу этой страницы.
Grey Goose
Чему мы можем научиться: домашняя страница должна продемонстрировать индивидуальность и эстетику бренда. В случае Gray Goose речь идет об элегантных изображениях с высоким разрешением и «отполированной» композиции страницы. Миссия выполнена.
Toyota
Чему мы можем научиться: Toyota создала веб-страницу по принципу «плиточного дизайна», посвященную новому представителю модельного ряда Camry. Минималистичная и точная визуальная презентация уникально нацелена на широкий круг потенциальных покупателей автомобиля.
Jacqui Co
Чему мы можем научиться: эта страница является одной из лучших в списке. Дизайн придает сайту блестящий внешний вид и вызывает чувство восторга, а интерактивные элементы страницы действительно поднимают ее на другой уровень.
Buffalo Wild Wings
Чему мы можем научиться: перед нами отличный пример веб-страницы, созданной для продвижения имиджа бренда. Цвета, стили дизайна и шрифты совпадают с аналогичными у спортивного клуба Buffalo Wild Wings.
Подсказка 3: создайте пользовательский опыт бренда
Сайт должен выражать индивидуальность вашей компании. Каков лучший способ усилить брендинг? Создайте единую унифицированную эстетику и убедитесь, что каждый элемент страницы поддерживает этот опыт.
Читайте также: 13 идеальных, с точки зрения дизайна, посадочных страниц известных брендовИндустрия развлечений: домашние страницы знаменитостей и средств массовой информации
Clouds over Cuba
Чему мы можем научиться: простая и приятная, эта страница выполняет единственную цель — подтолкнуть посетителя к просмотру документального фильма.
Pottermore
Чему мы можем научиться: здесь Sony передает впечатления и ощущения франшизы о Гарри Поттере, для чего используются знакомые образы, а также интерактивные элементы сайта. Все это в совокупности работает на дальнейшее вовлечение посетителя.
Heath Life
Чему мы можем научиться: на этом сайте без лишней навязчивости представлены несколько интерактивных и визуальных элементов (например, иконки и интеграция с Google Maps). Сайт не только выглядит великолепно, но еще и полезен.
Magic Leap
Чему мы можем научиться: несмотря на кажущуюся простоту Magic Leap, эта страница располагает к себе яркими изображениями и хорошо продуманной типографикой, привлекающими посетителей.
Life and Times
Чему мы можем научиться: если кто-то знает, как развлекать, так это Jay Z. Эклектичный характер персонального сайта воплощает реальный бренд его владельца на этой домашней странице, состоящей из интерактивных «плиток».
TV Safety
Чему мы можем научиться: визуализации в мультипликационном стиле на этой странице работают как противовес серьезному характеру сообщения, представляя серьезную информацию от TV safety в доступной манере.
Подсказка 4: проявляйте креативность
Хороший дизайн и ничего больше — это плохой способ выделить вашу компанию на фоне остальных 633 миллиардов сайтов в мире. Экспериментируйте с творческими способами представления стандартной информации без причинения ущерба функциональности и юзабилити сайта. С помощью нетрадиционного дизайна можно возвысить над конкурентами домашние страницы своей компании.
«Технари»: примеры домашних страниц
Rezdy
Чему мы можем научиться: Rezdy активно использует визуальные элементы — такие, как иконки и стрелки, — что позволяет компании объяснить предназначение ее продукта, не прибегая к сложным объяснениям.
Prezi
Чему мы можем научиться: эта страница устанавливает четкую иерархию информации и логическую последовательность действий. Все, что вам нужно знать, предоставляется в нескольких пикселях через видео, слоган компании и понятный призыв к действию. Также видео является разумным дополнением на тот случай, если целевая аудитория Prezi захочет получить более глубокую информацию.
Function Point
Чему мы можем научиться: сайт Function Point последовательно поддерживает единый стиль на протяжении всей страницы. Иллюстрации, стиль и выбор цветов сайта помогают улучшить дизайн и построить визуальную иерархию.
CSS Riffle
Чему мы можем научиться: единственный CTA на этой странице (плавающая красная кнопка) привлекает внимание посетителей и заставляет их кликнуть по иконке. Хотя мнения экспертов по оптимизации насчет использования красного цвета для кнопок призыва к действию различаются, здесь он хорошо работает в сочетании с общим цветовым решением фона страницы.
Urban Bound
Чему мы можем научиться: расположение CTA почти по центру на переднем плане, как это делает Urban Bound на своем сайте, является еще одним великолепным примером веб-дизайна, ориентированного на размещение самой важной информации в середине страницы.
Подсказка 5: оптимизируйте для пользователей
Каждый элемент вашего сайта должен разрабатываться для человека, находящегося по другую сторону монитора — посетителя. Существует множество дизайнерских инструментов, которые вы можете использовать для решения этой задачи, включая верстальную сетку (взгляните на страницу Scotch and Soda), иконки и стрелки, указывающие путь взгляду посетителя (это хорошо сделано на сайте Rezdy), и интерактивные элементы для вовлечения читателя (как у Rei).
Читайте также: 15 образцовых примеров мобильного веб-дизайнаПоставщики услуг: главные страницы профессиональных сервисов
Who Is Wildlife
Чему мы можем научиться: этот сайт почти полностью сфокусирован на брендинге. Оба главных элемента — эмоционально мощное, визуально уникальное изображение и нетрадиционный текст CTA — соответствуют общей эстетике сайта. Можно лишь предложить маленькое улучшение: уточнить для посетителей, желающих «уйти в отрыв», что они на самом деле получат обещанное.
Silktricky
Чему мы можем научиться: еще одним убедительным примером организации контента в интерактивные визуальные плитки может служить сайт Silktricky.
Sagmeister & Walsh
Чему мы можем научиться: эта страница предлагает поистине уникальный способ для навигации по сайту. Симулируется дополненная реальность — по каждому элементу на окне можно кликнуть, чтобы переместить пользователей по разделам сайта, визуализация которого определенно отличает его от всех прочих.
Madwell NYC
Чему мы можем научиться: используя превосходные графические и дизайнерские работы, Madwell представляет чистую домашнюю страницу, которая просто, но эффективно демонстрирует качественное портфолио компании.
Woodwork
Чему мы можем научиться: превосходное минималистическое решение сайта, осуществленное за счет великолепной типографики. Пользователь не будет перегружен информацией, но и не ощущит ее недостатка: за счет интерактивности заголовков, возможности интерфейса заметно расширены.
Ryan Edy
Чему мы можем научиться: поскольку перед нами сайт профессионального фотографа, дизайн хорошо играет именно ту роль, что ожидают от него посетители: показывает потрясающие изображения. Сайт также предлагает простую навигацию и демонстрирует серию фотографий, чтобы посетители могли видеть больше работ.
New Breed
Чему мы можем научиться: сайт New Breed эффективно уравновешивает различные сегменты контента и представляет их на хорошо организованной, легко воспринимаемой странице.
Oliver Russell
Чему мы можем научиться: комбинация простого понятного меню и интерактивных изображений-плиток, служащих фоном, делают эту страницу прекрасным примером того, как можно использовать привлекательные визуальные эффекты, не отвлекая посетителя от навигации.
Fancy Rhino
Чему мы можем научиться: еще один веб-сайт, демонстрирующий оффер при помощи видео, встроенного на главную страницу. Навигация достаточно проста, чтобы выделяться, не отвлекая посетителя от четко обозначенной главной цели.
Blind Barber
Чему мы можем научиться: этот веб-сайт отлично справляется с тем, чтобы сосредоточить посетителя на самом важном аспекте сайта — кнопке в центре страницы. Данная комбинация заголовка и CTA привлекает внимание и вдохновляет узнать больше об этом загадочном «Слепом парикмахере» (Blind Barber).
Подсказка 6: отойдите на шаг назад
Как только вы закончите дизайн сайта/лендинга, сделайте шаг назад. Спросите себя: пройдет ли ваш сайт блинк-тест? Может ли кто-то, посмотрев на ваш сайт в течение 3–5 секунд, узнать: что у вас за компания, что вы делаете и что вы хотите, чтобы посетитель сделал на вашей странице? Если ответ был «нет», пересмотрите ваши текст и дизайн для того, чтобы с их помощью выделить самое важное.
Вместо заключения: что дальше?
Мы надеемся, что эти примеры помогут вам найти стиль, достойно представляющий ваш бренд. Эффективный веб-сайт хорошо делает 3 вещи: он объясняет, что вы за компания, что вы делаетн, и предлагает ясное указание — при помощи единственного CTA или четко определенных опций, — которое сообщает посетителям, что они должны делать на вашем сайте. Наконец рассмотрите поведения пользователя на каждом этапе дизайна. Удовлетворите их потребности самым очевидным образом, и у вас будет действительно великолепная домашняя страница.
Высоких вам конверсий!
По материалам: hubspot.com
12-08-2017
20 шагов к идеальному дизайну сайта
Пока я размышлял о том, как рассказать о создании дизайна сайта, я вспоминал те распространенные ошибки, с которыми встречался на протяжении многих лет, занимаясь веб-дизайном. Особенно допускаемые новичками и молодыми веб-дизайнерами, незнакомыми с тренингами по веб-дизайну.
В этом коротком перечне шагов к идеальному дизайну сайта я постараюсь раскрыть те аспекты, которые, как я считаю, должен узнать каждый веб-дизайнер новичок, работающий в веб-студии, прежде чем приступать к новому проекту. И то, на что дизайнеры должны обратить внимание в процессе работы.
Эти принципы охватывают не только элементы дизайна, такие как дизайн целевой страницы, но и общие вопросы процесса разработки, которые обеспечат достижение конечного результата. Следуйте им, и очень скоро вы сможете создавать профессиональные сайты отличного качества.
Предварительные наброски для проекта серии о городах мира
Это вроде бы очевидно, но я слишком часто вижу, как дизайнеры открывают сразу Photoshop. Вместо того, чтобы сперва подумать над проблемой, которую они пытаются решить.
Решение проблем дизайна заключается не в определении градиентов или подборе оттенков — решение проблем дизайна в планировке элементов и в создании четкой иерархии. Прежде чем переходить к оттенкам, подумайте о содержании, компоновке и функциональности.
Эскиз общей структуры поможет вам решить проблемы взаимодействия и структурировать макет страницы
Если вы спросите меня, что я делаю в первую очередь, когда начинаю разработку дизайна, я отвечу — определяюсь с элементами верхнего уровня фреймворков, которые решают все проблемы проектирования.
Фреймворк является интерфейсом, который заключает в себе весь контент и помогает редактировать его, определять местоположения на странице и т. д. Он включает в себя меню навигации и такие компоненты, как боковые панели и подвал страницы.
Если подходить к дизайну с этой точки зрения, то у вас будет четкое понимание того, какие элементы нужны вашему проекту, какие разделы должен иметь сайт помимо главной страницы.
Пример 978-разрядной сетки с базовой линией в 10 пикселей
Это действительно так же просто, как кажется. Перед тем, как начинать делать что угодно в Photoshop, нужно создать соответствующую сетку.
Я не знаю ни одного случая, когда бы такая сетка была бы не нужна. И да, если вы этого не сделаете, я могу заверить вас, что так или иначе, ваш дизайн не будет столь же хорош, как мог бы быть.
Сетка поможет вам структурировать различные разделы макета, она обеспечит возможность работы с разными размерами экрана пользовательского устройства, поможет создать адаптивный дизайн, станет подспорьем в работе с другими элементами масштабирования страницы, а также во многих других вопросах разработки веб-сайта.
Общее правило заключается в том, чтобы использовать в макете сайта не более двух различных шрифтов
Подбор шрифтов и цветовой гаммы является составной частью подготовки проекта. Я не рекомендовал бы использовать более двух различных шрифтов, но это действительно зависит от каждого конкретного случая.
Вы можете использовать и более, и менее двух. Общая идея — выбрать шрифт, который легко читается на больших объемах текста, хорошо смотрится в заголовках и может быть применен в вызовах действий.
Не бойтесь использовать большие шрифты, и в целом подходите к этому вопросу творчески, но последовательно.
Используйте ограниченный набор цветов и тонов, чтобы избежать визуальной перенасыщенности
Параллельно с подбором шрифтов вы должны определиться, какие цвета будут использованы для текста, фона, элементов интерфейса. В этом плане я бы посоветовал использовать ограниченный набор цветов и оттенков.
Важно быть последовательными при определении цветовой гаммы основных элементов интерфейса и зависящих от них объектов.
В качестве примера можно взять такие сайты, как Facebook, Twitter, Quora и Vimeo.
В принципе не существует особых ограничений по применению различных графических и декоративных элементов, если только они совсем не диссонируют со стилями функциональных компонентов сайта.
Чем проще структура сайта, тем легче пользователям ориентироваться в ней
Каждый раздел вашего сайта должен иметь свою идею. Он должен нести посетителю определенную пользу, предоставлять конкретный результат. Дизайн сайта должен быть построен так, чтобы пользователь видел основные его составляющие.
На самом деле не нужно размещать огромное количество панелей перехода к другим разделам — все должно быть подчинено идеологии «Что я могу сделать здесь?».
Представьте себе самую простую структуру, какая только возможна — всего с одним элементом. А затем добавляйте необходимые разделы по одному, при этом стараясь сохранять простоту. Вы будете удивлены, как трудно это сделать.
Нужна ли нам кнопка «Поиск»? Практика показывает, что в большинстве случаев ответ будет отрицательным
Как дизайнеры мы формируем тот путь, который пользователи будут проходить, просматривая страницы интернета, поэтому мы должны четко определить, сколько шагов займет у посетителя простое действие, и насколько эффективен будет наш сайт.
Шаблоны проектирования и конвенции применяются в веб-разработках, потому что они работают.
Но иногда их применяют только потому, что никто не потратил немного времени, чтобы оценить их или переосмыслить. Очень важно каждый раз переосмысливать применение исторически сложившихся компонентов и оценивать, как мы можем их улучшить.
Я призываю каждого дизайнера в каждом проекте бросать вызов самому себе. Инновации не всегда привносятся, когда без них проект не может быть реализован.
Поэтому нам нужно постоянно придумывать что-то новое в дизайне или функционале. Примерами различных вызовов могут служить использование новой системы сеток, создание нового компонента или даже незначительные вызовы, типа устранения наложения режимов или применения специфического цвета.
Игра в стадии разработки: взгляд на детали
В последнее время многие провозглашают этот тезис, однако на самом деле в конечных продуктах мы часто видим, что разработчики не следуют ему. В зависимости от концепции, лежащей в основе проекта, «любовь» к деталям может реализоваться по-разному.
Это может быть небольшое взаимодействие, неожиданное анимационное решение или эстетический штрих в виде рамки маленькой кнопки или мелких декоративных элементов в фоновом изображении страницы.
Но в целом этот штрих имеет важное значение, да и внесение таких уникальных элементов естественно для вас, если вы получаете удовольствие от своей работы.
Обращайте внимание на каждый компонент, и тогда общий дизайн будет больше, чем просто сумма всех элементов
Я должен признать, что этот совет принадлежит не мне. Я услышал его в свою бытность в Fantasy Interactive, и я был потрясен тем, насколько верно и фундаментально это утверждение. Каждый компонент должен разрабатываться так, как будто это отдельный проект, который нужно исполнить наилучших образом.
Иногда дизайнеры откладывают доводку некоторых частей сайта в долгий ящик, и только в конце, если остается время, уделяют им немного внимания.
Чтобы избежать размытых пикселей, попробуйте установить правильный контраст между цветами элементов и фона или между цветами фона
Кроме эстетики, есть чисто практические причины обеспечивать четкость и корректность элементов.
Для увеличения четкости и читаемости элементов вы должны оптимизировать рамки, размытые кромки, опции отображения шрифтов (некоторые шрифты в зависимости от размера лучше всего читаются в определенных режимах визуализации), а также отдельные графические детали, которые плохо просматриваются и сливаются с фоном.
Это лишь несколько основных элементов, на которые вы должны обращать внимание, но в действительности этот список можно продолжать до бесконечности. Оценивайте ваш дизайн в целом, чтобы убедиться, что все работает хорошо. А затем более тщательно анализируйте каждый компонент по отдельности.
Это (наряду с использованием сетки) один из наиболее важных советов при проектировании в Photoshop. Независимо от масштаба проекта и количества задействованных в нем дизайнеров, необходимо содержать ваши файлы в порядке.
Это позволит в дальнейшем легче экспортировать различные разделы, ускорит процесс проектирования и работу с общими файлами, а также улучшит взаимодействие с другими дизайнерами.
Учитывайте, как ваш макет будет работать на различных устройствах и экранах разного размера
Работа дизайнера заключается также в том, чтобы решать проблемы, связанные с разного рода ограничениями. От ограничений, связанных с концептуальными и техническими вопросами, до вопросов содержания.
Нам нужно создать сайт, который будет работать не только при идеальных условиях, но и учитывать неблагоприятные сценарии. Например, у устройства пользователя может быть действительно очень маленький экран, и открыв страницу, он может увидеть, что ее структура поплыла.
Однако когда дело касается презентации нашей работы, я всегда настоятельно рекомендую исходить из оптимальных условий.
Это дает возможность раскрыть все преимущества проекта. Поэтому нам нужно показать идеальное количество текста на странице сайт в идеальном окне браузера — это будет наиболее распространенным сценарием для большинства пользователей нашего сайта.
Если вы увлечены дизайном, я уверен, что вы уже это делаете. Всякий раз, когда я выключаю компьютер, я почти всегда горжусь тем, что я сделал — это часть моей жизни. Я делаю скриншоты своих проектов, проверяю их на разных устройствах, я даже делаю обои на рабочий стол из своих дизайнов и развешиваю снимки на стену.
Однако каждый раз я стараюсь дойти до точки, когда, наконец, начинаю ненавидеть проект; и тогда я могу увидеть свои недочеты, и могу их исправить.
Отсутствие восхищения своим проектом является признаком зрелости. Это значит, что вы уже можете учиться на своих собственных ошибках.
При внесении предложений по улучшению концепции проекта или эскиза «внешнего вида» сайта, вы должны как можно скорее достичь одинакового видения с клиентом. Как только это случится, и первоначальная концепция будет утверждена, вы можете немного расслабиться и взяться непосредственно за работу.
Но если после презентации первоначальной концепции вы видите, что клиент не в восторге от нее, вы должны тут же получить от него все пожелания и замечания, чтобы как можно скорее представить ему новую концепцию.
Девелоперы — творческие люди, и они любят свою работу точно так же, как вы. Но они не всегда вовлечены в процесс создания сайта от и до.
Зачастую их участие заканчивается в том момент, когда окончательная концепция утверждена и их творческое видение более не нужно. Я считаю такое положение дел неправильным, так как очень часто отличные идеи исходят именно от команды девелоперов.
Поэтому старайтесь с самого начала объединить с ними свои усилия. Совместное обсуждение и реализация концепции будет способствовать генерации наилучших решений, и в конечном итоге приведет к выполнению работы наилучшим образом.
Презентация проекта так же важна, как и проделанная над ним работа. Ваш лучший дизайн может быть проигнорирован или отклонен, если вы не представите его должным образом.
Всегда имейте в виду — то, что кажется вам абсолютно понятным, может быть не столь очевидно кому-то другому, кто видит ваш дизайн впервые.
Существует тонкая грань между тем, чтобы отстаивать свою точку зрения, и тем, когда вы не прислушиваетесь к чужим мнениям при существующих разных видениях проблемы. Как разработчик вы должны твердо верить в то, что делаете.
Но вы также должны быть открыты для свежих идей. Не забывайте, что практически всегда существует больше, чем одно уникальное решение.
Если вы работаете в большом агентстве, вы, возможно, обратили внимание, как легко вы забываете о проекте, как только вы передали его и взялись за новую работу. Вопреки распространенному заблуждению ваша работа над проектом не заканчивается, когда вы передали заказчику PSD-макет и эскизы стилей.
Если вы действительно переживаете за свои проекты и хотите, чтобы ваши идеи были реализованы наилучшим образом, связывайтесь время от времени со своими старыми заказчиками-девелоперами, интересуйтесь, не нужна ли им какая-либо помощь, старайтесь сделать так, чтобы каждый пиксель вашего проекта был совершенен.
Поделитесь с общественностью стилями и компонентами, которые были разработаны вами в ходе развития проекта
В нашем сообществе дизайнеров все мы любим не только увидеть окончательные результаты работы, но и посмотреть, что получается по ходу работы.
Иногда лучшие элементы проекта по тем или иным причинам оказываются в папке «Архив». Как только проект сдан, и вы получили добро от клиента на его запуск, если это возможно, создайте кейс, в который войдут промежуточные наработки, а также элементы дизайна, которые оказались незадействованными в окончательной версии.
Таким образом, вы внесете свой вклад в развитие сетевого сообщества, а взамен получите ценные отзывы от его участников.
Данная публикация представляет собой перевод статьи «20 steps to the perfect website layout» , подготовленной дружной командой проекта Интернет-технологии.ру
Многие разработчики считают, что быть хорошим дизайнером — это врожденная способность, что творческий подход — это то, с чем вы сразу родились. На самом деле, дизайн — это навык, который можно освоить, как и любой другой. Для создания красивого сайта не обязательно родиться художником, нужно только попрактиковаться, хорошо так попрактиковаться. Эта статья расскажет о том, как практиковать дизайн через процесс создания персонального сайта с нуля и превращения его в код.
Зачем проектировать самостоятельно?
Зачем проектировать сайт самостоятельно, если можно использовать библиотеку пользовательского интерфейса, такую как Bootstrap или ещё лучше готовый шаблон? Ниже приведены некоторые из преимуществ самостоятельного дизайна вашего сайта.
1. Выделяться из общей массы
- Многие блоги разработчиков используют похожие шаблоны, и легко заметить, что это не пользовательский, не авторский дизайн. Если цель личного сайта — продемонстрировать свои возможности, то использование шаблона может отвлечь внимание от этой цели и испортить впечатление.
2. Практикуйтесь в своем мастерстве
- Разработка поможет вам применить на практике алгоритмы, принципы разработки, инструменты, HTML и CSS. Вам будет удобнее разрабатывать пользовательские интерфейсы и выводить их в Интернет.
3. Повышение производительности приложений
- Ваши веб-сайты будут легковесными и будут лучше работать с пользовательскими CSS. Если вам нужно включить библиотеку пользовательского интерфейса или шаблон, он может содержать большое количество кода, охватывающего различные возможные настройки, которые вы не используете. Если неиспользованный код будет отправлен пользователю, это негативно скажется на производительности вашего сайта.
4. Развивать профессиональные навыки
- В роли веб-разработчика вам, возможно, не придется реализовывать весь дизайн сайта с нуля, но вы должны быть в состоянии сделать достойный внешний вид интерфейса, который соответствует существующим дизайнам. Быть «полнофункциональным разработчиком» часто означает владеть внутренним языком или фреймворком JavaScript, одновременно имея возможность работать с дизайном, HTML и CSS. В итоге, работа выполняется, но результат может не быть эстетически привлекательным, и может быть несовместимым с остальными приложениями или быть недоступным на некоторых устройствах. Полнофункциональные разработчики должны обладать некоторыми базовыми знаниями в области проектирования и суметь обучить пользователя.
5. Это может быть весело
- Создание того, чем вы гордитесь, — это полезный опыт. Это доставит удовольствие, если вы найдете достаточно времени для практики. Вам не обязательно быть художником, чтобы получать от этого удовлетворение.
Чтобы приступить к разработке своего сайта, выполните поэтапные шаги. Трудно визуализировать дизайн из редактора кода, поэтому сначала я рекомендую работать в визуальном инструменте дизайна, а затем переводить полученный результат в код. Сначала легче сосредоточиться на дизайне, чтобы вы могли видеть его и вносить коррективы, без необходимости переписывания кода.
Создание каркаса модели
Первый шаг — создание приблизительного каркаса сайта. Создание каркаса помогает определить структуру страницы до добавления визуального дизайна и контента. Каркас не обязательно должен быть красивым, он должен фокусироваться на компоновке контента. Вы можете нарисовать его вручную или воспользоваться основными функциями инструмента разработки. Чтобы создать каркас (прототип), я представляю дизайн как серию прямоугольников. Элементы веб-страницы представляют собой прямоугольные блоки, которые строятся сверху вниз. Начните с прямоугольников, для этого вам точно не потребуются никакие художественные таланты.
Структура веб-сайта
Элементы, которые вы добавлять в каркас, зависят от вас. Вы можете добавить панель навигации, заголовок, записи в блоге и нижний колонтитул. Для начала, возможно, вам не понадобятся все эти элементы, вы можете оставить их базовыми и добавить их позже. Решите, что вы хотите включить, и добавьте эти секции в ваш каркас. Если у вас возникли проблемы с этим шагом, вы можете просмотреть аналогичный веб-сайт, копировать структуру контента и модифицировать его в соответствии с вашими запросами.
Каркас не обязательно должен быть идеальным. Как только структура вашего сайта будет вас устраивать, вы сможете перейти к визуальному дизайну.
Применяйте визуальный дизайн
Для преобразования приблизительного каркаса в конструкцию можно использовать бесплатный инструмент разработки, такой как графический редактор Figma. Если вы никогда не пользовались программой разработки, может потребоваться некоторое время, чтобы привыкнуть к ней, но вам не нужно быть в ней специалистом. Для начала достаточны основные функции, такие как добавление прямоугольников, изменение размера и настройка свойств.
Реализация макета
Для начала создайте пустое полотно, на котором будет представлена пустая страница браузера. Добавляйте свой каркас в инструмент разработки, создавая контейнеры для вашего содержимого. Я рекомендую сначала начать с черно-белых вариантов, чтобы вы могли сосредоточиться на макетах. Откорректируйте макет таким образом, чтобы элементы были соответствующего размера, выровнены и между ними оставалось свободное пространство.
Добавление разделов и содержимого хранилища
После того, как вы сделаете его похожим на веб-сайт, сделайте его красивее. Имитируйте стили других веб-сайтов, выясняя, за счет чего элементы выглядят привлекательными.
На данном этапе рассмотрим форму, размер, границы и тени. Постепенно обновляйте основные прямоугольники до нужного вам стиля.
Обновление графики
Шрифты и расстояние между ними имеют большое значение для придания дизайну безупречного вида. Даже простой дизайн может быть высококачественным, если хорошо выполнена графика. Опять же, вы можете копировать другой веб-сайт или искать шрифт и графические ресурсы для добавления в ваш дизайн.
Добавьте цвет
Затем добавьте цвет на сайт. Придайте вашему сайту особенность, создав свой бренд. Подумайте о том, как вы хотите, чтобы сайт попал к читателю. Если вы хотите, чтобы он выглядел чистым и минималистичным, выбирайте не слишком яркие цвета, следите за тем, чтобы градиенты были едва заметными, и выбирайте легко читаемые шрифты. Если вы хотите, чтобы он выглядел забавно, то выберите яркие цвета, используйте яркие градиенты, применяйте текстуры фона, используйте закругленные элементы, и выберите шрифты, которые выделяются.
Добавление цвета может показаться пугающим, но для этого вам не нужно знать теорию цвета. Если ваш дизайн начался в черно-белом цвете, вы можете выбрать один цвет для акцентирования элементов, чтобы придать дизайну немного жизни. Если вы хотите выйти за рамки этого, я рекомендую выбрать один или два цвета, которые вам нравятся, а затем использовать различные варианты освещенности этого цвета. Это помогает создать связующую тему, не являясь экспертом в данной сфере. При выборе цвета фона и переднего плана следует помнить о читаемости, проверяя цветовой контраст.
Примером может служить установка темно-синего цвета для фона, затем использование более светлой версии того же синего цвета для текста. Для белых цветов фона можно использовать среднюю яркость синего для заголовков.
После того, как вы добавили цвет, переходите к обзору общего дизайна и внесению изменений.
Уточнение
При разработке вам следует сделать шаг назад, отстраниться и абстрагироваться, чтобы взглянуть на ваш проект в целом и доработать его. Критикуйте свой проект, описывая то, что вы видите простым языком, а затем переведите это в техническую проблему, которую необходимо решить.
— Выглядит тесновато?
- Увеличьте отступы и поля
— Трудно читать текст?
- Выберите более четкий шрифт или увеличьте его размер
- Увеличьте цветовой контраст между фоном и передним планом
— Трудно разобрать содержимое?
- Добавьте заголовки с более крупным шрифтом
- Добавьте больше интервалов между заголовками и абзацами
— Выглядит небрежно или непоследовательно?
- Выравнивайте элементы по прямой линии горизонтально и вертикально. Настройка направляющих в программе разработки может помочь обеспечить правильное выравнивание элементов.
- Отрегулируйте отступы и поля для сохранения постоянного вертикального расстояния.
- Сделайте текст последовательным, установив шрифт и размер шрифта для заголовков и абзацев. Избегайте слишком большого количества вариантов текста.
- Убедитесь, что все цвета соответствуют вашей цветовой палитре.
Как только вы закончите разработку дизайна, вы можете начать переводить его в код.
Создание HTML–структуры
- Разместите все HTML элементы на странице, пока не волнуйтесь о добавлении CSS.
- Это позволит вам увидеть естественный поток HTML документа и рамочную модель. Создание структуры страницы в HTML облегчит понимание того, что нужно добавить в CSS, чтобы разместить и стилизовать элементы в соответствии с дизайном.
- После создания HTML-кода перейдите к расстановке и стилизации с помощью CSS.
Стилизуйте его с помощью CSS
Поскольку HTML-документы добавляются сверху вниз, вы можете начать с верхней части документа и работать вниз. Используя созданный вами дизайн, постарайтесь скопировать его как можно ближе в HTML & CSS.
Помните, что это не должно быть по принципу «все или ничего», вы можете реализовать части, необходимые для начальной версии сайта. Для моего сайта мне было необходимо только введение, ссылки и способ размещения блогов, так что, это все, что я начал воплощать. Если вы не готовы к воплощению раздела, вы можете удалить его, пока не будете готовы.
Расположение секций и элементов
Я рекомендую сконцентрироваться на компоновке элементов и сохранить эстетические аспекты на более поздний срок. Если вы расставляете и стилизуете элементы одновременно, это может привести к метанию вперед и назад, что может приостановить ваш прогресс. Примером может служить раскладка навигационной панели при попытке задать тип и размеры шрифтов. Возможно, у вас все удобно скомпоновано, но затем настройка шрифта все сбрасывает. Это может заставить вас изменить панель навигации, чтобы она снова подошла по размеру. Но что если навигационная панель теперь слишком высокая? Вы можете изменять это несколько раз, что может привести к огорчению. Вместо этого я рекомендую в первую очередь сконцентрироваться на компоновке элементов и попытаться заставить их работать с различными размерами контента. Это может потребовать метод проб и ошибок в CSS, но чтобы убедиться, что ваши элементы имеют достаточную ширину, для удобного добавления в него содержимого.
При превращении макета в полноценный дизайн я предпочитаю думать о горизонтальных линиях, которые разрезают дизайн на секции сверху вниз. Навигационная панель наверху может быть первым кусочком. Вы можете сосредоточиться только на HTML и CSS, которые необходимы для навигации, не беспокоясь о разделах ниже. Внутри навигационной панели вертикальные фрагменты могут быть разделены на элементы, составляющие навигацию. Сосредоточьтесь на элементе, расположенном в крайнем левом углу, а затем следуйте направо. Когда навигационная панель будет установлена, перейдите к разделу под ней.
Добавьте визуальные стили
Стилизуйте элементы, основываясь на вашем дизайне и добавляя одинаковые лица шрифтов, размеры шрифтов, вес шрифтов, цвета и изображения. При размещении результата дизайна в Интернете может потребоваться корректировка, так как визуализация в браузере и в разных браузерах может отличаться.
Сделайте его отзывчивым
Сделайте его быстро реагирующим, чтобы пользователи на экранах различных размеров могли легко просматривать содержимое. Сделать сайт быстро реагирующим не обязательно будет тяжело. Ему не нужно перемещать элементы или иметь меню только для мобильных устройств. Простой способ сделать базовый дизайн быстро реагирующим — это иметь точку останова, когда элементы начинают обрезаться или сжиматься, создавать стек и делать их по всей ширине страницы.
Когда ваш проект реализован, все готово! Теперь вы можете решить, что хотите с ним делать.
Следующие шаги
- Теперь, когда сайт спроектирован и закодирован, вы можете добавлять контент и размещать его.
- Вы можете продолжать использовать его в качестве учебного проекта, создав внутренний модуль или добавив дизайн к внешнему модулю.
- Продолжайте тренироваться, совершенствуйтесь. Для комфортной разработки может потребоваться время. Я надеюсь, что это руководство стало шагом в правильном направлении.
Заключение
- Сам дизайн сайта поможет вам отработать навыки дизайна и выделиться на фоне остальных.
- Создайте каркас для структурирования содержания и функциональности.
- Превратите каркас в визуальный дизайн с помощью инструмента для разработки. Получите вдохновение от дизайна, который вам нравится.
- Кодируйте HTML-структуры страницы, чтобы понять, какие CSS необходимо применить для преобразования этих элементов.
- Стилизуйте страницы с CSS в соответствии с вашим дизайном.
- Переведите его на следующий уровень, развернув его, используя в качестве практического проекта или продолжая совершенствовать дизайн.
Шрифты
- Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни.
- 1001 Free Fonts — библиотека шрифтов. Имеет удобную навигацию – шрифты отсортированы как по алфавиту, так и по типам. Имеется раздел русских шрифтов.
- Fontstruct – онлайн конструктор шрифтов. Очень простой инструмент, позволит создать собственный шрифт. Рисовать можно не только стандартными квадратами, но и другими фигурами – точки, закругленные углы и пр. Для начинающего идеальный инструмент, чтобы попробовать и увидеть типографику в действии.
- Font Squirrel – одна из самых больших библиотек шрифтов. Кроме этого можно загрузить рисунок и получить названия шрифтов, используемых на нем. Есть магазин шрифтов, и даже магазин одежды с логотипами.
- Type light – полнофункциональный редактор шрифтов. Позволяет создавать, редактировать и конвертировать шрифты OpenType, TrueType и PostScript. Необходимо скачивать и устанавливать. Бесплатная версия имеет ограниченный функцуонал по сравнению с бесплатной. Но для создания простого шрифта хватает.
- What Font is – онлайн сервис для подбора шрифтов сайта. Загружаем файл шрифтов, указываем url сайта и выидим как загруженный шрифт будет выглядеть на сайте. Удобнцый сервис.
- 1001 Fonts – библиотека шрифтов (более 15000). Удобная навигация – шрифт можно выбрать по размеру, типу, теме, дизайну и т.д. Меню позволяет настроить вывод, что дает возможность увидеть каждый шрифт в разных опциях: размер, начертание и т.д.
- Font Flame – онлайн сервис подбора пары сочетаемых шрифтов. Действует очень просто – на главной странице предложен листок с двумя надписями, сделанными разными шрифтами. Понравилось – жмите «Love», нет – «Hate». Потом выбранные можно просмотреть еще раз. Клик по названию шрифта открывает Google Fonts.
- Typecast – выбор шрифта для прототипа. Можно просмотреть как шрифт будет выглядеть на любых устройствах. Необходимо обозначить разные типы текста – заголовки, кавычки и т.д. Можно выбрать гарнитуру, размер, начертание, установить отступы. Вы увидите вашу будущую страницу в тех шрифтах, которые установили. Большой плюс – выбор макета (одна колонка или несколько, разные расположения блоков).
- Wordmark — позволяет подобрать шрифт, установленный на компьютере пользователя, для текста, логотипа или заголовка. При вводе текста в поле показывает его различными шрифтами. Можно выбрать размер, регистр, отображение черно-белое или наоборот. Понравившиеся варианты публикуются в триттере или на фейсбуке – по выбору пользователя. Можно отправить на email.
Стоки фотографий
- Unsplash – постоянно пополняемый сток фото. Коллекции разделены на темы. Можно найти все что угодно, от «Афроамериканцы» до «Природа». Каждая фотография имеет свою оценку, можно посмотреть лучшие или новинки.
- FoodiesFeed – фото еды. Изображения разбиты по категориям. Можно выбрать лучшие, эксклюзивные, иконки, мокапы и пр.
- Free Refe Photos — огромный список изображений «Real life». Главным образом пейзаж и фотографии природы. Неудобная навигация, все фото на главной странице, появляются при скроллинге.
- Little Visuals – качественные фото ландшафтов и зданий. Можно скачать архивом лучшие фото, выложенные за неделю. Фотографии обозначены хештегами, но не разбиты по категориям.
- Gratisography – огромная библиотека бесплатных фото. Все фото разбиты на шесть тем: люди, гримасы, города, предметы, природа и животные. Можно искать по словам.
- Death to the Stock Photo – сток фотографий. Просто посмотреть и выбрать нельзя. Они делают подборку за месяц и дают ее скачать после ввода email. Архив весит около 11 Мб. На почту присылают лучшие фото и ссылку на скачивание.
- Superfamous – большая коллекция фото с необычного ракурса. Набор небольшой, но интересный.
- The Pattern Library – шаблоны и текстуры. Набор достаточно велик, шаблоны необычны. Сменяются прокруткой, причем постепенно. Можно увидеть как шаблон будет выглядеть на весь экран или на его часть.
- New Old Stock – винтажные фото из архивов. Бесплатных фото немного, но регулярно появляются новые.
- Pexels – большое количество фото на все случаи жизни. Разбиты по темам, очень удобно искать.
- Jay Mantri — большой набор фотографий. Классификации как таковой нет, можно посмотреть по месяцам.
Стоки графики
- Brusheezy – бесплатные кисти, шаблоны, текстуры и прочее для фотошопа. 12 категорий, в каждой из которых подкатегории. Выбор огромен.
- Iconfinder – иконки, как платные, так и бесплатные. Скачать можно в форматах ICO, PNG, ICNS, SVG.
- Brushez – большая коллекция кистей для фотошоп. Кроме них еще векторные примитивы, формы, шаблоны, стили. Каждый раздел разбит на подразделы. Например, для кистей более 20 категорий.
- Vecteezy – бибилотека векторной графики, включая изображения и иллюстрации. Большое количество категорий и огромное – графики.
- Iconbird — русскоязычный сервис по поиску иконок. Можно ввести тему и получить набор иконок, а можно просматривать по категориям.
- Icons8 — русскоязычный сервис, предлагающий более 42000 иконок по разным тематикам.
Инфографика
- Vizualize – онлайн сервис для создания инфографики «О себе». По сути, создает графическое резюме.
- Canva – простой инструмент для создания любого дизайна. Позволяет оформить презентацию, плакат, запись в соцсетях, книги, письма, материалы и многое другое. Все делается на основании шаблонов, меняется текст. Но шаблонов очень много, есть из чего выбрать.
- Easelly – создание инфографики на основании шаблонов. Встроенный онлайн редактор позволяет менять оформление, размещать дополнительные жлементы, менять текст.
- Infogram – онлайн сервис для создания инфографики и интерактивных диаграмм. Не все функции доступны, придется покупать аккаунт.
- Visage – простой инструмент для создания любого визуального контента (диаграммы, инфографика, изображения для блога и пр.). Множество шаблонов, простой редактор. Некоторые функции платные.
- Gliffy – онлайн сервис для создания диаграмм. Редактор действует по принципу Microsoft Visio.
- Visme – онлайн инструмент для создания презентаций и инфографики. Более 1000 шаблонов. Редактор позволяет добавлять текст (заголовки, списки, кавычки и обычный), анимированный текст и виджеты. В бесплатном аккаунте можно скачать как JPG файл.
- Piktochart – создание высококачественной графики – презентации, инфографика или печатный материал. Выгружается PNG, JPG разных размеров.
- Drawio – удобный онлайн сервис для создания диаграмм. Можно сохранять в dropbox и подобные сервисы, можно на диск.
- Venngage – простое создание инфографики, плакатов, отчетов, материалов для соцсетей и пр. В бесплатной версии дает только ссылку на публикацию. За скачивание надо платить.
- Cacoo —онлайн сервис для рисования диаграмм и карты сайта. Пожалуй, самый лучших по возможностям. Большое количество инструментов и шаблонов. Экспортировать можно в PNG, PDF, SVG, PPT и др.
- Creately – онлайн сервис рисования диаграмм. Доступны только для публикации. Скачивание платное.
- Lucidchart — онлайн сервис создания диаграмм и чертежей. Есть возможность импортировать диаграмму Microsoft Visio. Экспортируется в PDF, PNG и JPG. Имеется платный функционал.
Цвета
- Color Hunt – подбор сочетаний цвета. Можно подбирать до четырех цветов. Есть готовые решения для выбора.
- TinEye – анализирует сайт и выводит список ресурсов, на которых используется картинка с сайта.
- ColorZilla – позволяет создавать цвета и градиенты. Выводит css свойства для них.
- Adobe Color CC – создание цветовых схем.
- Colicious – нажимайте на пробел и генерируйте новый цвет.
- Colorscheme — подбор цветовых схем. Есть версия на английском и на русском. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.
- Paletton – инструмент для создания комбинаций цветов. Ничем не отличается от Colorscheme.
- Pictaculous – анализирует палитру изображения PNG, JPG или GIF. Загружайте изображение и получите набор всех цветов, которые в нем присутствуют.
- Hex Color Tool – инструмент выбора цвета. Ползунками настраивается цвет, можно выбрать яркость. Затем выбранный цвет сохраняется. Можно подобрать палитру.
- (Un)clrd – плагин для браузера, который удаляет все цвета и оставляет сайт в черно-белом цвете.
- BrandColors — самая большая коллекция официальных фирменных цветовых кодов. Выбираете название бренда и скачиваете названия его цветов, в том числе и в css- файл.
- Colortyper — подбор цветов с необычного ракурса. На экране показываются разноцветные символы, которые пересекаются. Результат пересечения – новый цвет. Выглядит интересно.
Вдохновение
- Dribbble — Самое многочисленное сообщество дизайнеров. Работы, сообщества, общение – здесь можно найти все что угодно.
- Freebbble – шаблоны и дизайны из Dribbble. Что-то можно скачать бесплатно, что-то купить. Можно найти шаблоны для CMS, конструкторов, иконки, мокапы, сверстанные шаблоны сайтов и многое другое.
- Muzli — Ежедневное вдохновение дизайна. Ресурс для дизайнеров с примерами самых необычных работ.
- Awwwards – лучшие разработки дизайнеров. Организован как сообщество, где можно проголосовать сайт. Выбираются сайт дня, месяца, года и пр. Большое количество дизайна, видео, разработок.
- Design You Trust — сообщество дизайнеров, совместно использующее последние тенденции, новости, портфолио, дизайны и творческие объявления.
- Really Good Emails — огромная коллекция хорошо разработанных электронных писем. Выбираете шаблон и получаете его код html, css и js. Можно менять текст, рисунки и пр.
- Fubiz – публикации из области дизайна и креатива. Можно найти фотографии, дизайн, графику, видео и др. Все разбито по категориям.
- Designspiration – коллекция дизайнов в стиле Pinterest. Огромное количество идей и примеров – типографика, логотипы, письма и многое другое.
- Behance – коллекция портфолио от профессионалов. Можно оставить вакансию или резюме.
- Mobile-patterns – библиотека скриншотов iOS и Android. Все разбито по разделам. Можно найти много идей.
- One Page Love – галерея лучших дизайнов web-страниц. Можно купить шаблоны и темы. Есть и бесплатные.
- Uispace — ресурс для дизайнеров. Можно бесплатно скачать psd, sketch, шрифты, мокапы и пр.
Графические редакторы
- DAZ 3D — 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
- Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым — можно скачать дополнительные плагины.
- Blender — 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
- Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
- Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
- BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
- Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG — работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
- IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
- Falco GIF Animator — программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
- Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
- Boxy-SVG — редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
- Photopos — многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
- 5Dfly — бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
- PaintStar — бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
- PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.
- Pablo — онлайн редактор, создающий изображения для социальных сетей. Можно загрузить изображение, посмотреть его для разных устройств, наложить эффект и и текст.
- Internet Marketing Ninjas – онлайн сервис для быстрой обрезки изображений. Очень удобно, если надо сделать быстро.
- Meme Generator — генератор мемов. Можно выбрать картинку, создать подпись или сгенерировать ее автоматически. Не скачивается, только публикуется в соцсетях.
Программы для создания логотипа
- Free Logo Maker – онлайн редактор для создания простых логотипов. Позволяет рисовать с нуля. Бесплатно сохраняет в PNG.
- DesignMantic – сервис, генерирующий логотип. В редакторе можно изменить, добавив новую форму или текст.
- Logotype Maker – сервис, генерирующий логотип на основании шаблона. Потом можно поменять в редакторе. Сохраняет в JPG и PNG форматах.
- Jeta Logo Designer — позволяет быстро создать красочный логотип. Очень проста в обращении. Имеет набор из более чем 10000 фигур и иконок. Возможности стилизации достаточно велики. Объекты, как и текст, можно трансформировать и поворачивать, добавлять эффекты сглаживания, свечения, обводки, тени и т.д. Всего имеет около 200 стилей для фигур. Ручное рисование не предусмотрено, но можно загружать рисунки. Имеет собственные шаблоны логотипов.
- Flaming Text — онлайн сервис для разработки дизайна логотипа. Основан на шаблонах, но имеет встроенный редактор. Сохраняет в PNG формате.
- Logo Ease — программа для создания логотипов. Логотип можно создать на основании шаблона, редактировать.
- Online Logo Maker — онлайн сервис создания логотипов. Простой редактор, легко скачать. Бесплатно только вариант на 300px.
Прототипирование
- Napkin – десктопное приложение для быстрого создания мокапов для iPhone.
- HTML5 UP – отзывчивые и адаптивные шаблоны HTML5.
- Inkbrush — Онлайн инструмент для проектирования шаблонов писем электронной почты. Совмещается с почтовыми службами.
- Marvelapp – онлайн сервис для создания интерактивного прототипа. Можно создать прототипы для разных устройств. Позволяет загружать готовые макеты, просто перетаскивая их в указанную область. В качестве рисунков используйте mockup. Загружайте, выделяйте области, настраивайте переходы. Интегрирован с DropBox и ГуглДиск, Sketch.
- MockPlus – программа для создания прототипов на всех платформах. Скачивайте и создавайте. Досьупно для всех устройств.
- InVision – приложение для совместной работы над прототипом проекта. Инструмент для компании любого размера. Разработка программного продукта с общим доступом — все этапы могут видеть и контролировать как разработчики, так и менеджмент компании.
- Pencil – десктопный инструмент создания прототипов и интерфейсов. Имеет большой набор инструментов, в том числе диаграммю
- iPlotz — создание управляемых каркасов сайта или приложения. Для шаблонов можно получить код HTML. Есть онлайн версия, есть десктопная.
- MockFlow — создание моделей интерфейсов пользователя. Бесплатный доступ ограничен одним пользователем на один проект.
- Pictofon – быстрое создание мокапа для любого устройства. Выбираем макет, загружаем картинку и получаем мокап в PNG формате.
- Placeit — Бесплатные шаблоны и мокапы для всех типов устройств. Выбираем макет (от него зависит ракурс просмотра), указываем имя сайта и видим как он будет выглядеть.
- Pixli – платформа для web-дизайна. Есть бесплатный аккаунт, в котором можно создать мокап, прототип и на его основании сразу сайт.
В нашей подборке мы собрали 101 инструмент для дизайна. Не все сервисы абсолютно бесплатные, некоторые имеют платные аккаунты. Тем не менее, свободными версиями тоже можно пользоваться, получая результат.
Мы планируем расширять эту подборку новыми сервисами и разделами. Будем благодарны, если вы поделитесь своими находками!
Проектируем макет корпоративного сайта / Хабр
Привет, Хабраюзер! В интернете полно статей на тему, каким должен быть идеальный дизайн сайта, много примеров уже отрисованных макетов, но почти никогда ты не увидишь, как именно этот макет рисовался, какие правки переносил и насколько изначально был далек от финального варианта. Сегодня я приглашаю тебя разобрать процесс отрисовки главной страницы корпоративного сайта фирмы, с нуля. Мы рассмотрим 13 промежуточных вариантов, предшествовавших финальной версии главной страницы и подробно разберем все вводимые в макеты изменения.
Постановка задачи
Наша задача: создать макет главной страницы сайта для фирмы, которая занимается производством и доставкой строительного грунта. Тему умышленно беру довольно узкую и не самую удобную для дизайнера в плане эстетики. Но, так обычно и бывает, тематика в сайтостроении редко ограничивается парфюмерией, белыми облачками и пушистыми котятами, в реальности все прозаичнее. Разумеется, это не причина заранее снижать качество дизайна, по сравнению с котиками.
Технические моменты
Я умышленно опускаю все технические детали отрисовки макета, с которыми всегда можно ознакомиться отдельно (сетка, методы отрисовки в фотошопе и тд), я заостряю внимание исключительно на проектировании дизайна.
Кроме того, макет и его варианты, которые будут представлены ниже, рисовались специально для этой статьи. Тоже касается и логотипа фирмы, которая, естественно, является вымышленной. Пост несет исключительно учебный характер.
Определение границ сайта
Назовем фирму заказчика «Company». Эта компания занимается производством и распространением своего строительного грунта. Необходим сайт, который будет продвигать продукцию. То есть, нам нужно проектировать не интернет-магазин, а корпоративный сайт с каталогом, предложениями и описанием предоставляемых услуг.
Принимая во внимание тематику сайта, мы не сможем использовать слишком много качественных красивых изображений высокого разрешения, поэтому, в первую очередь, делаем акцент на лаконичную подачу информации, в виде дробных блоков с небольшими изображениями.
Макет должен быть пригоден для адаптивной верстки, а при просмотре на мониторах Full HD полезное пространство сайта не должно растягиваться на всю ширину экрана, дабы сохранить читабельность и адекватное восприятие небольших изображений. Таким образом, при ширине монитора больше 1280 пкс, сайт будет сохранять фиксированную ширину полезного пространства, а при меньших разрешениях, полезное пространство будет пропорционально уменьшаться.
PS. Все скрины, приведенные ниже, кликабельны.
- Для рекламы продукции на сайте разумно использовать небольшой слайдер с сопутствующими блоками изображений, которые ознакомят пользователя с основными разделами.
- Целевой аудиторией фирмы являются, преимущественно, мужчины 25-50 лет, занимающиеся поиском поставщиков грунта для своих строительных компаний, поэтому сайт должен выглядеть респектабельно (высокий достаток аудитории), современно и легко (для молодой части аудитории). Мы будем использовать светлые тона для основы и немного темного с оранжевым для контрастности и акцентировании внимания на важных элементах сайта.
Итог: Цветовая схема, основные элементы стиля определены, продолжаем.
- Играем с шириной шапки и добавляем главное меню. Все это пока выглядит просто, но наша задача сейчас, определиться со стилем, поэтому на первых шагах мы будем экспериментировать, выбирать направление.
- Убираем оранжевую подводку для шапки. Без нее сайт выглядит серьезнее, нам нужна респектабельность.
- В дизайне используем острые углы и простоту форм для большего расположения со стороны респектабельной аудитории.
- Сразу под шапкой располагаем дополнительную навигацию, которая будет актуальна при посещении других разделов сайта. Под навигацией отводим место небольшому информационному блоку с последней новостью или выгодным предложением. Этот блок можно выполнить в виде бегущей строки.
- Для наглядности, вставляем в слайдер изображение. В идеале, оно должно хорошо контрастировать со светлым фоном. Начинаем прорисовку элементов слайдера.
Итог: Наш сайт стал чуть сочнее и серьезнее – неплохо.
- Можно начинать думать о логотипе, если фирма нам его не предоставила. В любом случае, его наличие сделает шапку визуально более законченной. В данном случае, мы отрисовываем свой логотип в виде ковша, копающего грунт, с сохранением угловатости и простоты форм – стало лучше.
- Пробуем менять расположение главного меню. С ним пока явно что-то не так, оно совершенно не обращает на себя внимание. Можно попытаться сделать для логотипа более темный фон. Визуально, это раздробит шапку на 2 части. Под шапку пробуем вернуть оранжевую подводку – результат посредственный, но мы экспериментируем.
- Продолжаем отрисовку элементов слайдера и начинаем думать о том, что где-то на видном месте, мы обязательно должны сделать акцент на каталоге продукции, чтобы пользователь не бился в попытках отыскать цены на все типы грунтов.
- Используем бэкграунды для дополнительной навигации. Результат: навигация дополнительная, и не должна слишком сильно акцентировать на себе внимание пользователя.
Итог: Сайту не хватает респектабельности, нужно определяться со стилем.
- Небольшая коррекция логотипа и меню. Шапка стала спокойнее.
- Коррекция дополнительной навигации. Теперь она не акцентирует на себе столько внимания.
- Блок с бегущей строкой стал визуально легче, за счет использования оранжевого цвета. Пробуем немного скруглять углы.
- Помимо кнопки для скачивания каталога, на сайте должен быть доступен блок, в котором перечисляются основные предоставляемые услуги. В данном случае мы будем использовать горизонтальный скроллер под слайдером.
Итог: Мы, однозначно, приблизились к желаемому результату. Дизайн повзрослел и полегчал.
- Избавляем логотип от округлого элемента, сохраняя основную идею. Результат достойный.
- Небольшая коррекция по цвету: переходим от оранжевого к насыщенно рыжему.
- Очень важное решение: перенести меню под шапку. Таким образом, мы визуально отделяем меню и делаем на нем больший акцент – это то, что нам было нужно.
Итог: Шапка сайта стала лучше по всем параметрам. Мы, наконец, определились с расположением главного меню.
- Используем второй цвет в логотипе (белый). Это делает его ярче и читабельнее.
- Размещаем кнопку скачивания каталога в шапке, после переноса меню у нас появилось для этого свободное пространство.
Итог: Хорошая работа — логотип стал ярче, а шапка еще лаконичнее.
- Выравниваем пункты главного меню по левой границе шапки (по аналогии с логотипом), а справа у нас освобождается место для панели поиска. Используем рыжий цвет для текущего раздела меню и светло-серый для ховер-эффекта.
- Возвращаем бегущей строке рыжий цвет с острыми углами.
Итог: Главное меню более рационально использует пространство своего блока, что добавляет порядка шапке.
- Очень важное изменение, касающееся удаления боковых полей с полезного пространства сайта. Также мы убираем лишние отступы над главным меню и между блоками слайдера.
- Выравниваем панель поиска с правой границей кнопки «Скачать каталог».
- Вместо стрелок в дополнительной навигации мы используем окружности.
- Мы также используем надписи на слайдере без отступа слева.
- Начинаем подбирать текстуру для фона.
Итог: Удаление полей делает дизайн более техничным и простым. С этого момента можно считать, что мы нащупали стиль будущего сайта и двигаемся в верном направлении.
- Пробуем перенести кнопку скачивания каталога из шапки в область слайдера. Наполняем слайдер информацией. Перемещаем стрелки прокрутки слайдов к левой границе сайта для создания равномерного информационного шума.
- Продолжаем работу над скроллером. Используем жирные заголовки и бледные описания к ним. Вместо иконок пока используем окружности.
- Доставка – важная часть работы фирмы, поэтому не стесняемся уделить этой теме особое внимание. Немного графики, информирующей клиента о быстрой доставке к дому из любой точки России. В дальнейшем мы можем сделать эту графику интерактивной: пользователь указывает пункт доставки (город, район), а сайт выдает примерные сроки.
Итог: Слайдер принимает почти законченный вид, а скроллер и графика доставки делают сайт более информативным, при этом, не перегружая его.
- Прикидываем примерное расположение блока с последними новостями фирмы.
- Отрисовываем предположительные границы футера.
Итог: Сайт увеличился по высоте, а темный футер утяжеляет низ, делая дизайн в целом более сбалансированным (темная шапка балансирует с темным футером).
- Графика с доставкой становится контрастнее за счет осветленного фона.
- По аналогии со слайдером, убираем лишние поля у ленты новостей.
Итог: Теперь верх и низ сайта выполнены в едином стиле.
- Запомните, любую информацию на сайте лучше подкреплять графикой, хотя бы в минимальном объеме. Так уж устроен человек. Добавляем 3 блока с изображениями и один с текстом, это и будет наша новостная лента. По-прежнему игнорируем боковые поля для изображений (на этот раз справа).
- Слайдер под блоками используем для представления выгодных предложений фирмы. Предложения будут автоматически перещелкиваться. Соответственно, к каждому из трех предложений, будет соответствовать своя иллюстрация.
- Пробуем использовать более контрастный фон для сайта.
Итог: Сайт стал еще выше и еще информативнее. Графикой не перегружен, но слишком контрастный задний фон слегка отвлекает пользователя от изучения главной страницы.
- Активное предложение выделяем рыжим цветом и добавляем светло-серый ховер-эффект. Поясняющая полоса на иллюстрации должна плавно перемещаться вслед за активным пунктом предложения.
- Под футером оставляем немного пространства для предполагаемого копирайта.
- Обрати внимание, что изображения новостей и предложений строго выровнены относительно друг друга, а также соответствуют ширине трех категорий верхнего скроллера.
Итог: Нижняя половина сайта приобретает законченный вид.
- Небольшая коррекция по цвету в сторону еще более насыщенного рыжего.
- Корректируем логотип, удаляя небольшие отступы между оранжевым и белым элементами. Теперь логотип еще лучше вписывается в общий стиль сайта без боковых полей.
- Мы подобрали менее контрастный фон, он состоит из треугольников, отлично перекликаясь со схематичным образом гор, и не делает на себе слишком сильный акцент.
- Дабы использовать больше свободного пространства шапки – возвращаем туда кнопку скачивания каталога. Добавляем в нее пиктограмму и возможность скачивания в двух форматах на выбор (pdf и doc).
- В слайдере используем размытие для фона информационного текстового блока, откуда мы перенесли кнопку каталога. Вместо этой кнопки мы располагаем кнопку просмотра фотографий с образцами грунта. Прижимаем ее к нижней границе слайдера для соответствия общему стилю.
- Добавляем тематические пиктограммы к скроллеру с ховер-эффектом в оранжевый цвет.
- Небольшая коррекция графики с доставкой, добавляем горизонтальную линию, символизирующую путь от точки отправки до пункта назначения.
- Добавляем фотографии к ленте новостей. Используем тонкие стрелки для заголовков. А для просмотра полной ленты отрисовываем рыжую кнопку.
- Заполняем футер четырьмя столбцами: контактами, иконками социальных сетей (соответствующих общему стилю), мнениями клиентов о компании, типами грунта и формой обратной связи. Используем пунктирные разделители для более четкого визуального разделения на столбики.
Итог: Главная страница сайта выглядит полностью законченной. Вся основная информация по фирме доступна и легко читается. Нескольких секунд изучения достаточно, что бы понять сферу деятельности фирмы. Дизайн прост и информативен – поставленная задача выполнена!
PS.
Мы получили визуально простой, но информативный макет с хорошо выверенным стилем, основной особенностью которого являются отсутствие боковых отступов и простота форм. Обрати внимание, что, не смотря на отсутствие полей, у любых текстовых блоков всегда должны быть отступы – текст должен дышать, независимо от стиля. По всей высоте макета прослеживаются вкрапления рыжего цвета, который хорошо оживляет общий дизайн. При наличии готовой главной страницы, нам не составит большого труда отрисовать другие разделы сайта, но это уже совсем другая история.
Уникальный и эффективный дизайн с учетом тематики, целевой аудитории вашего проекта и принципов юзабилити.
Точную цену и сроки я смогу назвать вам, видя ваше тех. задание/прототип/заполненный бриф. Чтобы узнать цену типового проекта – воспользуйтесь калькулятором.
Калькулятор стоимости дизайна многостраничного сайта
Дизайн главной страницы
Адаптив главной страницы
Внутренние страницы
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Адаптив внутренних страниц
*Адаптивная верстка на WP
Обращаюсь не первый раз
Надо очень срочно!!!
Стоимость:
Цены на сайте не являются публичной офертой.*Адаптивная верстка с подключением CMS WordPress является дополнительной услугой и не оказывается отдельно. То есть, верстку чужих макетов мой верстальщик не делает.
При заказе сайта с интеграцией CMS вы получаете полную настройку и базовую SEO оптимизацию.
Экономия
- Всплывающие окна, формы и т.д. бесплатно.
- В дизайне макетов стараюсь использовать иллюстрации с фотостоков, а не из поиска. Доплату за стоковые фото не беру если их не больше 5 шт.
- При заказе сайта с версткой, дизайн всех адаптивов можно не заказывать. Мой программист адаптирует сайт без отрисовки всех состояний. Самостоятельно, с моими устными уточнениями.
Скачать БРИФ на дизайн сайта
Дополнительно читайте: «Сколько стоит дизайн сайта и от чего зависит цена»
Подробнее о дизайне
Дизайн сайтов разрабатывается на основе брифа + схемы (прототипа). Wireframe делаю бесплатно. Прототипирование крупных проектов, оплачивается отдельно. Поэтому, отсутствие прототипа – увеличивает стоимость вашего проекта.
Дизайн многостраничного сайта состоит из главной страницы и нескольких внутренних. Количество внутренних страниц зависит от функционала сайта.
Сайт-визитка обычно состоит из 1-3 страниц. Интернет магазин, имеет много внутренних страниц, таких как корзина, карточка товара, акции и т.д.
Стоимость зависит от количества уникальных по структуре страниц.
Этапы работы
- Изучение предоставленной информации.
- Определение задач, которые сайт должен выполнять.
- Анализ структуры сайта и списка необходимых страниц.
- Проработка навигации и юзабилити сайта в целом.
- Анализ сайтов конкурентов.
- Прототипирование страниц. Wireframe или прототип. (если не предоставлен заказчиком).
- Макет главной и внутренних страниц в программе Figma.
- Макет адаптивов.
Результатом работы будет проект в программе Figma
На данный момент дизайн сайтов в Photoshop не делаю! Только Figma.
- Вы получаете ссылку на проект в программе Figma или файл формата .fig
- UI гайд с состояниями всех активных элементов сайта
- Файлы использованных шрифтов (если требуется)
Этой же ссылкой (на макет), вы делитесь с вашим верстальщиком. Он точно знает, что с этим делать 🙂
Размеры макетов сайтов
По умолчанию, я делаю дизайн сайта под экран 1920px с контентной частью 1200px.
Адаптив под 4 разрешения: 1000px, 768px, 480px, 320px.
Дополнительные разрешения оплачиваются отдельно.
Примеры возможных разрешений:
- Пользователю нужно всего 1/50 до 1/20 секунды, чтобы оценить, красивый сайт или нет.
- «Визуально сложные» сайты оцениваются как менее красивые, чем их простые аналоги.
Другими словами, исследование показало — чем проще дизайн, тем лучше.
Но почему?
В этой статье мы на примерах рассмотрим роль когнитивной беглости и теории обработки визуальной информации, которые играют важную роль в упрощении вашего веб-дизайна и помогут увеличить конверсию.
Приступим!
Что же такое «прототип» сайта?
Если я скажу «мебель», какой образ появится у вас в голове?
Если вы похожи на 95% людей, вы подумаете о стуле.
Если я спрашиваю, какой цвет ассоциируется с «мальчик», вы думаете «синий» (а девочка — «розовый» и т.д.)
Прототип — это основной ментальный образ, который ваш мозг создает для классификации всего, с чем вы взаимодействуете. От мебели до сайтов у вашего мозга есть шаблон того, как все должно выглядеть и чувствовать.
В сети прототипы распадаются на более мелкие категории. У вас есть разные, но конкретные психологические образы для социальных сетей, сайтов, электронной коммерции и блогов. Если на каком-либо из этих сайтов что-то отсутствует в вашем ментальном образе, вы закрываете сайт на сознательном и подсознательном уровнях.
Если бы я сказал «сайт модной женской одежды», вы могли бы представить что-то вроде этого:
А теперь посмотрим на прототип сайтов «интернет-магазина одежды», заметили, что они все очень похожи и имеют схожую структуру сайта? (даже если этот сайт из другой страны).
Сходство совсем не означает, что сайтам не хватает оригинальности или что они «украли» друг у друга. Такой структурой они оправдывают ваши ожидания относительно того, как должен выглядеть сайт электронной коммерции.
Что такое когнитивная беглость?
Основная идея, лежащая в основе когнитивной беглости, заключается в том, что мозг предпочитает думать о вещах, о которых легко думать. Вот почему вы предпочитаете посещать сайты, дизайн и структура которых вам инстинктивно понятны.
Когнитивная беглость проистекает из другой области поведения, известной как «Эффект простого воздействия», которая гласит, что люди предпочитают знакомые им вещи.
Это правило действует и онлайн. Мы привыкли, что подписка на сайте размещена в правом углу сайта, а логотип компании в верхнем левом углу.
Если ваши посетители обусловлены определенным дизайном сайтов в вашей категории, отклонение от них может подсознательно поставить вас в категорию «менее красивых».
Это вовсе не означает, что вы должны просто «делать то, что делают все остальные». Вы должны знать, какие варианты дизайна сайта являются прототипами для вашей категории. Обязательно проверьте и найдите доказательства, что именно этот дизайн является прототипом в вашей категории.
Не проводя исследования, многие дизайнеры делают плохой выбор. Например, многие сайты электронной коммерции используют автоматический слайдер прокрутки изображений продуктов, но исследование за исследованием показывает, что автоматический слайдер губит конверсию.
Что происходит, когда вы оправдываете ожидания?
Сайт с высоким уровнем беглости будет чувствовать себя достаточно знакомым, так что посетителям не нужно тратить умственные усилия на поиск нужного продукта или кнопки, и вместо этого они могут сосредоточиться на том, зачем пришли на ваш сайт.
Однако, когда уровень беглости низкий, вы сразу это почувствуете. Возьмите онлайн-магазин галстуков Skinny Ties, который до редизайна не выглядел как сайт электронной коммерции:
До:
После:
Несколько ключевых изменений привели к огромным результатам:
- Простой и понятный дизайн и структура сайта;
- Гораздо более «открытый» дизайн с грамотным использованием пробелов;
- Изображения содержат один продукт с высоким разрешением и контрастными цветами.
Давайте ознакомимся со статистикой этого редизайна.
Всего через две с половиной недели результаты были ошеломляющими:
Сам по себе редизайн, хотя и симпатичный, не является революционным. Сайт точно соответствует ожиданиям того, каким должен быть современный интернет-магазин одежды. Он «открытый», отзывчивый и имеет единую стилистику на всех страницах.
Визуальная обработка информации и сложность сайта
В этом совместном исследовании Гарвардского университета, Университета Мэриленда и Университета Колорадо, исследователи обнаружили сильную корреляцию «эстетически привлекательных» сайтов среди различных демографических групп.
Например, участникам с докторской степенью не понравились очень красочные веб-сайты.
В результате исследования не было разработано никаких конкретных универсальных принципов проектирования. Единственное, что было универсальным — это визуально сложный веб-сайт имел меньшую визуальную привлекательность.
Почему простой дизайн с научной точки зрения легче обрабатывать
Причина, по которой «визуально лёгкие» веб-сайты считаются более красивыми, отчасти объясняется тем, что при низкой сложности не требуется, чтобы наши глаза и мозг работали так же усердно, чтобы декодировать, хранить и обрабатывать информацию.
Посмотрите это короткое видео о том, как глаз посылает информацию в мозг, чтобы понять, что я имею в виду:
По сути, ваша сетчатка преобразует визуальную информацию из реального мира в электрические импульсы. Затем эти импульсы направляются через соответствующие фоторецепторные клетки для передачи информации о цвете и свете в мозг.
Чем больше цветовых и световых вариаций на странице (т. е. чем больше визуальная сложность), тем больше работы приходится выполнять глазу для передачи информации в мозг.
Каждый элемент передает тонкую информацию
При разработке сайта знайте, что каждый элемент — текст, логотип и выбор цвета — передает тонкую информацию о бренде.
Когда эти элементы не выполняют свою работу, веб-мастер часто компенсирует это добавлением ненужных элементов или изображений, что увеличивает визуальную сложность веб-сайта и ломает общую эстетику.
Оптимизация страницы для обработки визуальной информации, в частности, упрощение прохождения информации от глаза к мозгу, — это передача как можно большего количества информации минимальным количеством элементов.
Рассмотрим на примере редизайн логотипа MailChimp.
Когда они хотели, чтобы бренд «вырос», они не добавили обычное «Мы работаем с электронной почтой с 2001 года! Три миллиона человек доверяют нам! Вот почему мы классные! Бла бла бла…»
Было:
Стало:
Вместо этого они упростили написание, упростили веб-сайт (верхний заголовок просто читается как «Отправьте лучший E-mail») и добавили еще более простую анимацию для основного продукта.
Mailchimp прошел еще один редизайн логотипа в 2018 году:
Каковы были руководящие принципы для второго крупного редизайна?
Простота была первостепенной:
Значок Фредди уже давно является основной маркой нашего бренда.
Мы немного упростили его, внесли изменения в его форму и проработали мелкие детали, чтобы он выглядел великолепно при любом размере.В процессе итерации и уточнения мы разработали шрифт, который гармонирует со значком Фредди.
«Рабочая память» и Святой Грааль обращения
Согласно исследованию психолога из Принстона Джорджа А. Миллера, мозг взрослого человека способен хранить от пяти до девяти «кусочков» информации в своей краткосрочной или «рабочей» памяти.
Рабочая память — это часть вашего мозга, которая временно хранит и обрабатывает информацию в течение нескольких секунд. Это то, что позволяет вам сосредоточить внимание, противостоять отвлекающим факторам и, самое главное, направлять процесс принятия решений.
На «веб-сайте с низкой сложностью и прототипами» пять-девять «кусочков» рабочей памяти могут обрабатывать такие вещи, как гарантии, описания продуктов, цены или предложения, вместо того, чтобы тратить время на выяснение, куда нажать.
Когда вы отклоняетесь от ожиданий — цена оказалась выше, чем ожидалось, негорманичная цветовая схема и нет симметрии, сайт загружался долго, фотографии были плохого качества — рабочая память обрабатывает эти ненужные «куски» вместо того, чтобы заниматься важными вещами.
Это потому, что рабочая память вызывает долговременную память, чтобы использовать то, что она уже знает, для выполнения задачи. Когда долговременная память не может помочь в обработке информации, поток прерывается, а рабочая память отключается и движется дальше.
Вот почему очень важно знать ваших посетителей, если вы хотите «взломать» их рабочую память с помощью дизайна.
Блоги, которые они читают, сайты, на которых они делают покупки, их браузер, возраст, пол и физическое местоположение — все это поможет вам сделать дизайн «знакомым» и создать правильное первое впечатление.
7 способов создать простой сайт
- Исследуйте свою аудиторию и сайты, которые они посещают больше всего.
Посмотрите тематические исследования об изменениях дизайна в вашей категории. - Создайте коллаж для своего сайта со всеми «рабочими» компонентами, которые вы обнаружите.
- Соблюдайте правила когнитивной беглости.
Расположите элементы там, где посетители ожидают их найти. - Не добавляйте лишние элементы, если они не сообщают о том, что волнует вашего посетителя.
- Меньше значит больше. Одно большое изображение обычно лучше, чем несколько маленьких; один столбец вместо трех; больше пробелов вместо большего количества «элементов».
- Убедитесь, что ваш сайт соответствует ожиданиям по ценам, эстетике, скорости и т. д.
- Сохраняйте оригинальность. «Прототип» сайта не означает, что каждый аспект вашего сайта должен соответствовать этой форме.
Не думайте о своем сайте, как об уникальном произведении искусства.
Сделайте его простым и знакомы для пользователей.
Заключение
Если посетитель при взаимодействии с вашим сайтом не может полагаться на свой предыдущий опыт, он не задумывается, насколько инновационным является ваш сайт. Он просто задается вопросом, почему вещи не там, где они «должны быть».
Создавая дизайн с когнитивной беглостью, вы позволяете посетителям обрабатывать более важные вещи своей рабочей памятью, чтобы им было легче сказать «да».
Больше подобных статей можно читать на моём Telegram-канале
«Я Маркетолог». Пишу о digital-маркетинге и веб-аналитике.
Или на сайте proroas.ru
Высоких вам конверсий!
90000 Web Page Design 90001 90002 What is to design? 90003 90004 Designing is a process of creating a plan and originating the development of a specific product. Once the product is designed, its design is used to start the production. Design often refers to the creation of a product prototype. In most cases the meaning of «product design» refers only to the product’s appearance rather than to its construction, architecture and technical specifications. 90005 90002 Web page design 90003 90004 Web design itself refers to the process of creating a web page’s appearance and to the choice of a right color scheme, page layout, fonts and more.Every single web page in a website has different content, but all the pages are using a similar graphic design. Often sites will use website templates, which contain all the basic elements of web design — the website’s CSS style, buttons, backgrounds, borders and various graphic elements like hover images, bullets and header banners. When the website template is applied to the website, all the pages assume its appearance, using the same styles, background and other graphical elements. 90005 90004 But most of the pages in a website have their own design elements.This is needed because every page has to present a different content, and the basic website style is not fully applicable for all the web pages. For example, designing a contact form will sometimes require a custom layout and design elements with which to handle the form’s fields, buttons, drop-down menus, etc. All these styles, layouts, images, etc. are often not applicable for the other website pages. So, the contact page uses the basic website template for the menus, backgrounds, header images, etc.but also has its own web page design, including the contact form’s design itself and all the other elements specific for that page. 90005 90002 How to design a web page 90003 90004 Before you start designing your web page, you have to figure out what sort of a web page it’s going to be and what contents it should have. All this information is needed in order to successfully design a web page. 90005 90004 You need to know the type of the page, because there are different methods of approach when you design a static or a dynamic web page.90005 90004 You also need to know the contents of the web page, because you need to arrange them within the page’s layout. There are different types of content — text, images, videos, animations and other dynamic elements. In order to create a successful web page you need to put the right content in the right place. 90005 90020 90004 It is very important to consider what the page’s purpose will be when you start sketching it. Creating the basic layout, color scheme and arranging the content, is the second important step.Now, when you come up with some basic design idea you may discuss it with your client. If the client has some notes about the design it’s good to consider them, but remember — you are the web designer. You have the knowledge and you are the one who has to tell the client how the web page should look. 90005 90004 Once you have an approved design conception you can proceed with revising the current basic layout, designing the page’s specific elements and putting some final touches to your web page design.90005 .90000 18 Unique and Successful About Us Page Design Examples 90001 90002 An effective «about us» page is not just about filling a page with the brand logo, company, and team information, or sharing the company’s philosophy. You need to think of the team and the product as a whole in order to present a unique style imbued with personality that will make your design stand out in a user’s mind. 90003 90002 If you are unsure on how to design an effective «about us» page, take a look at these 18 examples and find out what makes them tick.90003 90006 Here are 10 practical tips for designing an engaging «about us» page: 90007 90008 90009 Tell the user what you do. 90010 90009 Create a clear information layout. 90010 90009 Add location and data for more authenticity. 90010 90009 Show the company’s accomplishments to enhance user trust. 90010 90009 Display real photos of the team and individual members. 90010 90009 Use obvious CTAs to make it easy for users to use your products. 90010 90009 Do not include lengthy information which does not add practical value.90010 90009 Present information in a unique way. 90010 90009 Make a good impression with stylish design. 90010 90009 Keep your layout clean and simple. 90010 90029 90006 10 unique and engaging real-life examples of «about us» pages 90007 90032 1. Website 90033 90002 A clean layout and simple design appeals more to users. This «about us» page is dominated by grey tones, it clearly shows us the company’s brand story, value, and real data support. Furthermore, the blue CTA stands out as you scroll down the page.90003 90002 90037 90003 90032 2. Starbucks 90033 90002 Starbucks ‘ «about us» page is very simple. Their philosophy taps into human emotions: «We make sure everything we do honors that connection — from our commitment to the highest quality coffee in the world.» The old picture on the left highlights its long history (the first Starbucks store was established in 1971). Furthermore, clicking on the link on the right will showcase specific company information and culture. Although the entire page does not have a lot of text, the product is effectively embedded into people’s consciousness.90003 90002 90044 90003 90032 3. Tumblr 90033 90002 Tumblr’s «about us» page is standardized, with attention-grabbing rotating images behind a logo. Below the image is specific website data: the current total number of blogs and posts. The latest recommended published posts are highlighted at the bottom of the page. This is highly effective in keeping users on the site. 90003 90002 90051 90003 90032 4. Salsa 90033 90002 Salsa is an online clothing store. Its «about us» page features a 2.5-minute video which provides company information and conveys the store’s excellent craftsmanship. Since video appeals more to humans, this «about page» design is more likely to keep users on site and increase conversions. 90003 90002 90058 90003 90032 5. Thoughtworks 90033 90002 Every «about us» page exists to let users know about the company and what they do. The about page of Thoughtworks page definitely does this. The team photo tells visitors that real people — not machines — are the driving force behind the company.The information layout is done smoothly, sharing the company philosophy and how it operates. For additional credibility, photos of the company’s leadership is displayed. The latest news at the bottom of the page helps keep readers on site. 90003 90002 90065 90003 90032 6. Odoo 90033 90002 Do you want users to know more about your company? Do you want their trust? Show your accomplishments but do not go overboard. With a low key presentation of your achievements, you encourage users to trust you, which, in turn, increases conversion rates.And this is exactly what Odoo has done with its «about us» page. 90003 90002 90072 90003 90032 7. Sulzer 90033 90002 The «about us» page of Sulzer must be easy to navigate. It must provide useful information succinctly and contain no fluff. Sulzer does this by using a clever typesetting method which makes use of picture text links to present company information. To see details, users simply have to click. If they do not need the information, they simply ignore it. By giving users a choice, Sulzer’s «about page» becomes more effective.. 90003 90002 90079 90003 90032 8. Kittie’s Cakes 90033 90002 We love retro design for its warm colors and fun illustrations, not to mention its compatibility with traditional layout techniques. 90003 90002 Kittie’s Cakes ‘ «about us» page is filled with simple but extremely cheerful and interesting illustrations. These imaginative drawings are not only stylish but also add a personal touch. The retro color scheme and richly-structured page gives users a surprise here and there while going through useful information.90003 90002 90088 90003 90032 9. Dropbox 90033 90002 The information is displayed in the form of an animation with bold colors and a distinctive personality, which makes for an impressive page. Text typesetting is mainly based on black and red. Since red exudes a warm vibe and signifies important content, this color scheme works perfectly. Go check the About Us page of Dropbox now. 90003 90002 90095 90003 90032 10. Feather and Stone 90033 90002 This «about us» page of Feather and Stone stands out from the others due to hand-drawn illustrations.Feather and Stone relies heavily on these illustrations to express their uniqueness. Since they offer wedding photography services, this is a brilliant design match. 90003 90002 90102 90003 90006 8 best «About Us» interface designs on Dribbble 90007 90032 About Page 90033 90002 90109 90003 90032 Auri About Page 90033 90002 90114 90003 90032 DGiT — About us design 90033 90002 90119 90003 90032 Digital Agency About Page 90033 90002 90124 90003 90032 Dustin-putnam 90033 90002 90129 90003 90032 IIoT Corporate Website About Us Page Animation 90033 90002 90134 90003 90032 Namibia Park About Us Page 90033 90002 90139 90003 90032 Unfold — About Page 90033 90002 90144 90003 90002 Now, it’s time for you to design a stylish and effective «about us» page.You only need a simple and easy-to-use prototyping tool to help you get it done. 90003 90002 Mockplus is a simple and easy-to-learn web prototyping tool for creating web projects, free projects, custom projects, APP projects, and more. Whether you need help in layout design or page scrolling, you’ll find it easy to create an interactive page with Mockplus ‘200 built-in components. 90003 90006 Conclusion 90007 90002 The «about us» page can make or break a business website. If you want to leave a good impression on users, you need to take it very seriously.We hope this article helps you design the best «about us» page possible to get you the results you want. 90003 .90000 Landing Page Design — Boost Sales With Custom Landing Pages 90001 90002 1. Tell us what you want 90003 90004 Our interactive creative brief makes it simple to describe your design challenge and set your budget. 90005 90002 2.Get dozens of landing page designs 90003 90004 Our global community of professional designers present their ideas. You provide feedback. 90005 90002 3. Pick your favorite 90003 90004 Seven days later, choose your winning landing page design. It’s like picking your favorite child.90005 .90000 Products for Architects and Interior Designers 90001 Copyright © 2020 Designer Pages Data Inc. All rights reserved. Proudly Made in NYC. 90002 There are infinite elements that make up any given space. Accessories, including area rugs, decorative screens, drapery hardware, artwork and mirrors are the finishes touches, and sometimes defining elements in residential and commercial spaces alike. 90003 Boards / Easels 90004 Includes whiteboards, dry-erase boards, tackboards, cork boards, display easels, tabletop easels, and flip-chart holders.Hardware 90004 Try making an office building, house, school or hotel without hardware — it’s the glue that holds it all together and adds style, cultural context and personality. Hinges, handles, chains, locks and latches are now available in a multitude of metals, plastics, wood, synthetics and recycled materials. Miscellaneous Accessories 90004 Includes other products that support individual or group needs, such as reading stands, desk organizers, coat racks / hooks, signage.Privacy / Boundary Screens 90004 Freestanding, movable screens that define space and provide visual privacy; not part of a systems offering. Carts 90004 Utility carts, printer stands, flat-panel TV stands, and other freestanding products that hold and / or transport equipment or other items. Usually mobile, with lockable casters. Lecterns / Podiums 90004 Stand-up, mobile, and tabletop products that hold a presenter’s notes on a slanted surface.Podiums — Elevated platforms where people can stand when speaking or presenting. Reception Stations 90004 Desks or work surfaces, usually set within low-height walls or panels, that serve as welcoming sites in reception areas or lobbies. Recycling Stations 90004 Bins, carts, or other containers placed in areas where people can deposit materials to be recycled. 90002 Undeniably the most important facet to great architectural and interior projects is the detailed design that goes into the building and construction.From facade systems, windows and doors, to architectural woodworking and finish carpentry, building elements are constantly updated to be more durable, environmentally-friendly, and intuitive to the needs of our modern society. 90003 Concrete 90004 As simple as water, aggregate and cement, concrete has a plethora of applications for both exterior and interior use. Browse our selection of reinforcing products, chemicals, precast concrete and maintenance materials.Doors and Frames 90004 While the most popular doors seem as if they enter and exit the outside world, the best architecture has shown that garage doors, sliding doors, French doors or patio doors made from materials like wood, glass and steel are just a few ways to allow air , light and energy to harmoniously flow throughout a building. Exterior Glazing 90004 From minimal interior renovations to large architectural facades, glazing can be more than a stunning visual — it’s key for thermal performance, protection from moisture, acoustics, and safety.Using one of numerous types of glazing to guide your project — like laminated, tempered, tinted, coated, or insulated glazes — to achieve the look or efficiency desired. Fireplaces / Mantels 90004 Old-fashioned to contemporary, fireplaces are in style year-round. That’s why rustic, wood-burning fireplaces and modern gas or renewable fuel-burning types are as popular as ever. Consider a new built-in wall fireplace or freestanding fireplace to accentuate the ambiance indoors or on an outdoor patio.Windows 90004 Among their most important functions, windows puncture the facade to provide daylight, views and often fresh air and cross-ventilation. Window units can be fixed, operable or a hybrid between the two. Moisture protection and thermal performance are fundamental considerations, influencing the material choice for the window frame, the glazing and perimeter details. 90002 Flooring covers a substantial amount of square footage in any given project, so it goes without saying that it has substantial impact on the end result.Consider the desired level of comfort, durability, longevity, maintenance and cost when making your selection. Wood flooring, laminate flooring, masonry flooring, vinyl and resilient flooring offer long-lasting solutions, carpeting is a soft alternative, and area rugs provide a less permanent option with a transformative capacity. Do not be afraid to mix and match. 90003 Area Rugs 90004 Small or large, area rugs provide an impermanent means of introducing color, pattern and texture into a project: from hand-knotted rugs in traditional Oriental and Persian designs to wool / silk blend floral print rugs produced with high-tech machinery.Carpet 90004 Likely the most comfortable flooring (and the best insulator too), carpeting is widely used everywhere from hotels and homes to educational institutions and commercial settings. Modular carpeting (carpet tiles) allows for more customization and ease of installation than traditional broadloom. Hardwood Flooring 90004 Natural, beautiful, and easy to clean, wood flooring comes in many shapes, sizes, and species.Newly milled or reclaimed, local or exotic, wood floors vary in color from dark browns to rich reds, pale golds to weathered greys. With options like strip, plank, and parquet formats, as well as solid, antique, or engineered wood, wood flooring offers something for everyone — for commercial or residential spaces, in traditional, transitional, or contemporary styles. Laminate Flooring 90004 Laminate flooring offers a less expensive alternative to the real thing, often mimicking wood (or stone) flooring in appearance.Multiple layers of synthetic flooring are fused together with a lamination process and topped with a photographic applique image under a clear protective layer. The inner core is generally comprised of melamine resin and fiber board compound. Masonry Flooring 90004 Known for its exceptional strength and raw aesthetic, masonry flooring is made from rugged stone and clay in its authentic versions of marble and slate, or in the manmade flooring of brick or terrazzo.Masonry flooring boasts a higher price point, but its heat retaining and pure aesthetic properties allow this tough flooring to maintain popularity. Raised Flooring 90004 Modular products that are installed on architectural floors to provide routing and easy access to wiring, cables and / or HVAC. Resilient Flooring 90004 Stain-resistance and durability, vinyl and resilient flooring are available at a variety of price points ranging from affordable to luxurious.The most widely known resilient flooring is made using linoleum, cork, rubber, and of course, vinyl — and each option is a natural shock-absorbing floor that can be made even more comfortable with a subfloor placed underneath. Bariatric Seating 90004 Chairs and seating modules with increased weight capacities for use by heavily built people. Caregiver Stools 90004 Stools, usually mobile and height-adjustable, for use by caregivers during interactions with patients.Hip Chairs 90004 Chairs with elevated seats that lessen the need for people to lower their bodies into a sitting position. Overbed Tables 90004 Mobile, height-adjustable tables / trays that extend over a patient’s bed; may be used for meals, personal items, or caregiver tools. Patient Chairs 90004 Chairs that provide adjustable ergonomic support for patients; designed to allow easy access to patients by caregivers.Patient Room Casegoods 90004 Cabinets and dressers, often in matching surface treatments, for the storage of patients ‘possessions. Recliners 90004 Patient-room chairs, for use by patients or guests, with reclining backs and adjustable footrests. Rockers / Gliders 90004 Chairs with rockers or gliding mechanisms that allow easy, healthful movement.Sleepover Seating 90004 Sofas or settees in patient rooms that can fold out to provide a place for guests to recline and sleep; storage drawers / compartments are often included. Technology Carts / Cabinets 90004 Carts, usually with lockable casters and height adjustability, and cabinets, either mobile or stationary, that support and / or transport laptops, PCs, flat-screen monitors, keyboards, and CPUs.Technology Wall Stations 90004 Wall-attached products that support computer stations for shared use among clincians. May be height-adjustable. Treatment Chairs 90004 Adjustable chairs, usually with reclining backs and adjustable footrests, that allow caregivers to position patients for treatment. Bathroom Faucets 90004 Beyond style and finish options, bathroom faucets are available in single-hole, center set, widespread or wall-mount faucet type.Bathroom Vanities 90004 Bathroom cabinetry, vanities and console tables range from solid, storage-driven solutions to delicate, lightweight forms. From traditional to classic modern and utilitarian, bathroom furniture spans all styles. Consider space, storage and style. Bathtubs 90004 Ranging from freestanding objects to sunken or enclosed basins, there is a vast range of styles and sizes for bathtubs.The varying material choices for bathtubs include typical porcelain or polycomposites, copper, cast iron, brass, stone, wood, acrylic and Cristalplant. Kitchen Faucets 90004 Traditional kitchen faucets have been outnumbered by contemporary, tech-savvy, functional kitchen faucets with innovative spray mounts, touch solutions, and water-saving features. While stainless steel and brushed aluminum remain popular, matte black and white offer trendier options.Kitchen Sinks 90004 Scale, depth, location, materiality: from simple single bowl, stainless steel undermount sinks to granite, porcelain and fireclay options featuring drainboards and preparation zones, double bowls, and even innovative color ranges, there’s a broad range of kitchen sink options. Urinals 90004 We can thank Marcel Duchamp for bringing the urinal to the forefront.Despite its seemingly standard shape and form, it’s been slimmed down and redesigned in recent years — leading to new options for new (and old) spaces. 90002 Most spaces require a mix of lighting typologies, from ambient lighting to task lighting and accent lighting. Consider the types of activities that will take place in a given space, and develop a lighting plan accordingly. 90003 Accent Light / Track Light 90004 Almost always adjustable, designed to provide a focused beam of light to accent or highlight an object.Also called «adjustable» or «spot». The fixture has optics and throws light. Direct / Indirect 90004 Luminaire designed to provide both uplight and downlight, sometimes with multiple lamp sources. Also called «up / downlight», «ambient». Downlight / Surface Mount 90004 Luminaire designed to light an area directly below the fixture. Variable beam distributions / widths, not adjustable.Industrial 90004 High-efficiency, fluorescent luminaire consisting of a strip light with side-mounted reflectors. Also called «shop light». Linear 90004 A Luminaire whose dimension along a line is significantly greater than its other dimensions. Outdoor Lighting 90004 Outdoor lighting is available in many of the same designs as indoor lighting, but is built to withstand rain and wear.Outdoor ceiling lights illuminate spaces under the roof of an outdoor patio or porch. Outdoor wall lamps, floor lamps and landscape lighting provide illumination throughout the yard or along the store-front. Sconce / Wall Mount 90004 Sconces are designed to provide a sense of brightness at a wall and marker lights provide brightness (blob of light) for other surfaces for decorative or wayfinding purposes. Step Light 90004 Luminaire designed specifically for stair / ramp lighting applications, where the luminaire is recessed in the stair riser or an adjacent wall.Task Light / Undercabinet 90004 Luminaire designed to focus light directly on a work surface, mounted at or very close to the work surface itself. «Desk lamp», «undercabinet», «undercounter» Uplight 90004 Luminaire designed to provide indirect lighting only. Also called «indirect», «ambient». Wallwasher / Wall Grazer 90004 Luminaire designed to light a wall from the ceiling.Wallwash applications and specialized luminaires include single wall, corner, and double (two opposing walls). 90002 Unlike furniture, the applications for materials are undefined and abstract, lending to more creative endeavors. Marked by innovation and sustainability, materials can be used for everything from custom furnishings to unique finishes and more. 90003 Glass 90004 Transparent, semi-transparent; smooth, textured, three-dimensional; single ply, double ply — simple as the material may at first seem, there are infinite variations and types.Options include: tempered glass, laminated glass, float glass. Metal 90004 Customized metal materials and metal work can produced easily and cost-effectively. Perforated metal is often used in cases where weight reduction, optimized acoustic properties, and improved heat dissipation are desired. Resin Panels 90004 Plastics are synthetic polymers. Plastics are soft and moldable during production, so nearly any object can be formed from plastic.They exist as hard plastics and soft plastics, clear and colorful plastics, and plastics that resemble leather, wood, or metal. Synthetic resin is one type of plastic. Tile 90004 For exterior and interior applications, tile adds luxury and personality to a space. From large-scale outdoor fabrication in terracotta to detailed finishing work in kitchen and bathroom, tile is easy to maintain and clean. Umbrellas / Shade Systems 90004 Umbrellas keep people shady and comfortable while they lounge outdoors.From standard single-pole umbrellas to contemporary shapes like leaves and waves, umbrellas today offer nearly endless variety. Umbrellas are also a great way to add a splash of color outdoors. Bench Seating 90004 Typically used in lounge or reception areas. Benches, with or without backs and padding, that can seat people side by side. Education Specialized Seating 90004 Specially configured or customized to accommodate students in education settings.Includes chairs with tablet arms, tripod bases, and swivels. Fixed Seating 90004 Typically used in auditoriums, concert halls, stadiums, and entertainment venues. Multiple adjoined seating units, attached to the floor. With or without arms. Lounge Seating 90004 Typically used in lounge or reception settings. Includes sofas, lounge chairs, chaises, ottomans, and modular seating. Modular Seating 90004 Typically used in lounge or reception settings.Units, with or without arms and legs, that fit together as modules to form various configurations. Multi-use Guest Chairs 90004 Typically used away from a desk and shared by multiple users for shorter-term sitting. With arms. May have stacking or nesting capability. Outdoor Seating 90004 Typically used on patios or other outside areas. With or without backs and padding. May or may not be weather-resistant.Public Seating 90004 Typically used in airports, bus / train terminals, courthouses, and other places where people gather and often wait. With or without arms or ganging capability. Self-supported Seating 90004 Without backs or arms, designed to improve posture and spinal alignment by having sitters engage their core muscles for self-support and balance. Stacking / Nesting Chairs 90004 Typically used in common meeting areas for shorter-term sitting.With or without arms. Can be stacked or nested when not in use. Bookcases / Open Storage 90004 Products designed with shelves to hold books or other items. May include doors. Usually not lockable. Credenzas 90004 Typically a low storage unit with drawers and open spaces, credenzas provide functional and display storage in residential and commercial environments. From hand-carved wood to polymer plastics, credenzas come in many materials.With or without legs, credenzas can be used in dining rooms to hold dinnerware, in offices to store supplies, or in virtually any room for additional storage. High-density Filing 90004 Stationary shelving that provides large-capacity, high-density, space-efficient storage. Miscellaneous Filing 90004 Various filing products including lateral and vertical files and other miscellaneous storage products.Storage Cases / Cabinets 90004 Cases, often with trays or dividers, and cabinets, often with drawers or shelves, for storage of miscellaneous items. Conference Tables 90004 From statement pieces to more subtle options, conference tables vary in form and function. Choose from glass conference tables, solid wood conference tables, mixed material options and more. Power and data features exist in some contemporary conference tables.Education Specialized Tables / Desks 90004 Includes study carrells (partially enclosed spaces with a table or work surface), ergonomically designed student desks, and other tables designed for education settings. Occasional Tables 90004 Designed for infrequent and varied use. Small, light, sometimes decorative tables of varying heights that can be easily moved as the occasion requires. Outdoor Tables 90004 Designed for use on patios or other outside areas.Usually weather-resistant. May include casters or glides. 90002 Beyond aesthetics, textiles vary in strength and durability. These materials, made of interlacing fibres, include wool, silk, cotton, flax, jute, asbestos, glass fibre, nylon, polyester, and acrylic. Leather is inherently durable, created via the tanning of animal skin. 90003 Movable / Demountable Walls 90004 Space-delineating walls that extend from floor to architectural ceiling.Includes demountable walls, unitized movable walls, and movable frames and skins. Wall Panels 90004 Whether you need a hand with acoustics, durability or are looking to make a visual statement, wall panels offer a brilliant solution. Height-Adjustable Tables / Systems 90004 Height-adjustable tables that allow the user to alternate between sitting and standing positions.May be part of a freestanding furniture system. Integrated Technologies 90004 Products that integrate technology within office environments; includes technology / video walls, teleconferencing systems, and sound-masking products. Open Plan Workstations 90004 For the modern office, open plan workstations are a necessity. Tight, isolating cubicles and closed offices no longer work for today’s collaborative working environments — choose modular and paneled systems that allow for workers to interact, brainstorm and create new solutions..