Ср, 3/05/17 – 1:15 | 4 комментария

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь впечатляющее портфолио. Создатели сайта-портфолио сталкиваются с задачами более сложными чем …

Читать статью »
Веб маркетинг

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

Дизайн

О создании веб-дизайна с примерами сайтов

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 сайта в пример