Сб, 3/11/18 – 7:09 | One Comment

Было время, когда веб-дизайн напоминал по стилю периодические печатные издания. Колонки и столбцы задавались строками текста и зафиксированными графическими изображениями. Но эволюция HTML, CSS и JavaScript …

Читать статью »
Маркетинг

О маркетинге в Интернете и эффективности сайта

Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Дизайн, Мануалы

Все о веб-дизайне: элементы успешного сайта

15 марта 2013 Нет комментариев

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

Цвет и тени

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

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

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

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

Для теней типичен мягкий и неяркий (недостаточно насыщенный) цвет. Тень, отбрасываемая объектом должна отображать естественность – быть подобной реальной тени, получаемой от натурального света. Следующий шаг – расположение, глубина и угол. Все ли выглядит натурально? Вид изысканный и утончённый или грубый и назойливый? Чтобы избежать несбалансированности задайте для теней единообразие по расположению, стилю и углу наклона.

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

Текстовое оформление и шрифты

Все о веб-дизайне: кратко о шрифтах и текстовом оформлении

Интреактивный микросайт, знакомя с терминологией, обучает азам типографики  

Также как и в случае с выбором цвета, включите в ваш набор шрифтов минимальное их количество.  Как правило, одного двух семейств шрифтов более, чем достаточно для одного проекта. Инвестируя в высококачественную гарнитуру вы получаете все многообразие стилей на выбор по каждому шрифту: bold, light, black, italics, condensed и т.д.

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

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

Взгляд читающего текст пользователя все время скользит от большего и более жирного текста к наименьшему

Современный дизайн сайта: основные элементы

Все об элементах хорошего веб-дизайна

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

Продумайте как организовать форму регистрации / новостной рассылки или сделать плашки для сайта, врезки в посты, разместить различные счетчики, соц. иконки, значки (эмблемы доверия, CopyRight, RSS фид и т.д). Для современного сайта функциональные возможности в сочетании с новизной и качеством контента, имеют не меньшую значимость, чем сам дизайн. Для веб-элементов важен единый стиль и не обязательно их создавать с нуля. Многие дизайнеры предпочитают начинать с UI KIT (набор элементов интерфейса), что помогает им запускать проекты вовремя. Ключевым моментом здесь будет возможность кастомизации. Убедитесь, что UI KIT позволяет вам изменять цвета, шрифты, базовые характеристики иконок и наборов элементов – так, чтобы дизайн сайта выглядел «вашим» и соответствовал эскизному проекту.

The Bricks – наиболее популярный фреймворк для создания пользовательского интерфейса. Представляет собой бесплатный набор компонентов UI, упрощающий разработку дизайна сайта. The Bricks имеет три замечательных add-ons благодаря которым вы можете получить единообразные по стилю настраиваемые пиктограммы и наборы элементов.

Words UI

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

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

UI форм

Forms UI: Большинство сайтов выглядят незавершенными при отсутствии форм. Вспомните их основное назначение – склонить посетителя к совершению определённого действия, будь то покупка, подписка или запрос консультативной информации. Набор элементов Form UI Kit предоставляет большой выбор форм (от элементарного запроса пароля до полного оформления заказа), внешний вид которых часто современнее, чем у многих сайтов, их также отличает ясность и определённость, о чем нередко забывают в процессе разработки сайта.

 Все о хорошем веб-дизайне: E-commerce UI

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

Выравнивание и модульная сетка сайта

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

Хорошим началом будет, если вы используете какой-либо популярный framework для построения модульной сетки. Не только сама сетка создает структуру сайта, сайт должен быть адаптирующимся и отзывчивым (responsive) – учитывающим все реалии современных веб-разработок и мобильного интернета.

фрейморк для адаптивных модульных сеток zurb foundation

Zurb Foundation – это один из наиболее используемых (среди заслуживающих доверия) адаптивный CSS-фреймворк. Легок в использовании, работает на всех платформах и предоставляет широкие возможности для построения современного сайта. Грамотно настроив выравнивание, вы зададите для каждого элемента правильное расположение, что поможет организовать стройную структуру сайта.

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример