10 самых важных элементов для веб-дизайна (с примерами)

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


1. Пространство




Пространство делает просмотр сайта более легким и непринужденным - это точно.Помните, что пространство это не знак равенства к белому цвету. Экспериментируйте со цветом, подбирайте. Суть этого элемента - минимизировать присутствие других веб-элементов и блоков на странице.

Как это можно использовать: Начните с того, чтобы на странице присутствовали основные элементы (логотип, навигация). Смотрите, чтобы расстояние между блоками были гармоничными.

2. Простая навигация




Навигация не должна быть сложной, а напротив: понятной и интересной.

Как это можно использовать: от самого обычного однострочного меню и до интересного меню в виде каких-то ступеней или,воздушных шаров. Главное, чтобы это было читатабельно. Включайте свою фантазию.

3. О нас




Очень важный элемент для сайтов типа портфолио или компаний. Заявите как можно ярче о себе перед публикой.

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

4. Контактная информация





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

Читайте также: Страница обратной связи для блогов на платформе Blogger \ Blogspot.com

Как это можно использовать: Добавить контактную информацию для всех статических заголовков и / или нижние колонтитулы. Если у вас есть физический адрес компании, включают информацию о местоположении. Рассмотрим контактную форму, так что пользователи могут отправить прямо с сайта.

5. Призыв к действию (или Регистрация)




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

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

6. Поиск



Форма поиска обязательный элемент для веб-сайта. Наведу пример: вы читаете книгу и среди 200 страниц, Вам нужно найти главу о каком-то событии, но увы, страницу с содержанием кто-то вырвал. Ну? Так, же из сайтом. - легче ввести запрос в поисковую строку и в результатах найти, то что нужно.

Читайте также: Установка поиска для своего сайта: где искать? Часть первая.

Как это можно использовать: Размещать поисковую строку желательно вверху. С дизайном изобретать колесо не нужно - для кнопки используйте или надпись "Поиск"/"Искать" и тд., или изображение лупы.

7. Информационный подвал (футер)





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

Как это можно использовать:  Футер может вмещать в себе даже те блоки, которые уже есть выше. Например, навигация которая у Вас есть в шапке сайта. Также можно поместить ссылки на страницы с правилами использования, или на страницу где Вы расскажете подробно о сайте.

8. Стилизованные кнопки




Каждая кнопка должна быть похожа на кнопку - такую аксиому нужно запомнить раз и навсегда. Ненужно делать из кнопки медиауголок, но добавить немного эффектов визуализации - это было бы неплохо.

Как это можно использовать: Разработайте свои кнопки с их уникальными шрифтами, текстурами и цветовой гаммой.

9. Огромные изображения




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

Использование огромного количества таких изображений тоже не приветствуются. - всё хорошее в меру.

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

10. Веб-шрифты




Конечно, для заполнение сайта текстовым контентом шрифты Arial и Courier приходят на ум в первую очередь. Но сегодня уже нету ограничений для дизайнеров. Самое важное, что нужно знать о шрифтах,  это их совместимость и лицензирование. Используя веб-шрифты можете не беспокоиться о том, что Вас станут хуже индексировать поисковые системы. Да и потом, Вы сэкономите время на работе над изображением в вашем Photoshop'е!

Как это можно использовать: Начните с Google Web Fonts, который является бесплатным сервисом, чтобы использовать набор красивых и интересных шрифтов в дизайн своего сайта без необходимости тратить огромные деньги на лицензию и время на беспокойство о проблемах совместимости шрифта.

Вывод

Для каждого свой дизайн - самый лучший. Но иногда можно упустить несколько элементов и дизайн теряет смысл. Не упускайте детали, будьте уникальны.

Источники изображений: Tagxedo.com, The Tea Factory, Fixate Web & Design, Zola’s, Anet Design, bagaball, Andrew Reifman, Eight Hour Day, Spokes Pedicabs, Denise Chandler, iGivings, Karlyn, Connect Mania, Tastebook, Tennessee Vacation, The Noun Project, Rdio, Housing Works, Campaign Monitor, Dropbox, Karma Wi-Fi, Pure Fix Cycles, Rook и The Status Bureau.

АвторКэрри Казинс, designshack.net


Если вам понравиласть эта статья, то поделитесь ей с друзьями. Вам не сложно, а мне приятно ;)
Присоединяйтесь к 200+ блоггерам и получите полезный в подарок
    Blogger Comment
    Facebook Comment

1 коммент. :