Разработка макетов веб-интерфейса Killer с помощью халявы – Ultimate Guide

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

Практика с полными шаблонами

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

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

Вот пример PSD под названием «AppCivilization», разработанный Мартин Фабрициус, Макет предназначен для творческой студии, которая разрабатывает мобильные приложения и, возможно, веб-сайты. Внизу вы найдете небольшую панель значков приложений, представленных в портфолио. Вы также заметите, что весь дизайн разбит по горизонтали на заголовок, верхнее слайд-шоу, основной контент и затемненный нижний колонтитул.

Первоначальный источникСкачать

AppCivilization бесплатный PSD

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

Первоначальный источник – Скачать

халява веб-дизайн, целевая страница

Но лучшая часть его дизайна в том, что он очень гибкий для начинающих. В заголовке по-прежнему используется небольшая верхняя навигация с большим изображением, но, в частности, ожидаемые действия пользователя отличаются. У него есть большое «Купи это!» Кнопка, которая стоит прямо над сгибом. На целевой странице продукта это привлекло бы больше внимания, чем слайд-шоу jQuery.

Еще одна замечательная техника пользовательского интерфейса – маленький экран iPhone в середине страницы. Мартин включает в себя предварительный снимок iPhone, кнопку App Store и небольшой список ключевых функций. Когда посетители ищут информацию о продукте, вы не можете сделать вещи проще, чем через отформатированный список.
Больше шаблонов:
Вот несколько бесплатных PSD-шаблонов, которые мы выпустили в проходе:

Вы также можете быть заинтересованы в следующем:

Главная навигация по сайту

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

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

Первоначальный источник – Скачать

Прошитое навигационное меню PSD

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

Первоначальный источник – Скачать

Текстурированный заголовок веб-навигации PSD

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

Возьмите, например, меню халявы ниже, разработанное веб-сайтом. Icojam,

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

Первоначальный источник – Скачать

Складное веб-меню PSD

Навигационные советы / Уроки:

Чистые веб-формы

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

Мы должны рассмотреть только несколько примеров того, как вы можете создавать аккуратные формы для ввода и кнопок. Дизайн ваших элементов может иметь большое значение для приглашения ваших посетителей на самом деле их использовать. А это, в свою очередь, повышает доверие к вашему сайту и дает больше просмотров страниц.
Поля входа
Есть несколько отличных примеров PSD для входа в систему. это логин халява через WP Scientist есть все ваши стандартные элементы. Два поля ввода для логина / пароля, кнопка отправки и флажки для управления сессионными куки.

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

Первоначальный источникСкачать

Форма бесплатного входа PSD

Форма ниже бесплатно скачать благодаря дизайнеру Гилу Хюйбрехту. Он использовал похожий рисунок с зернистым фоном и текстурой бумаги. Что мне особенно нравится в дизайне Джила, так это «негабаритные» элементы. Намного удобнее попасть в форму входа, которая заполняет всю страницу. Пользователи могут легко видеть то, что они печатают, и меньше помех.

Первоначальный источникСкачать

Чистый бумажный бланк авторизации PSD

Если вы являетесь опытным разработчиком внешнего интерфейса, использующим CSS3, то перевести эту графику в код очень просто. Вы даже можете реализовать выбранный внешний эффект свечения и закругленные углы для кнопки и полей ввода.
контакты
Другая форма, которую вы найдете практически на каждом веб-сайте, – это контактная форма. Обычно сюда входят поля для имени отправителя, электронной почты и содержимого сообщения.

Халява ниже – отличный пример использования пользовательских текстур и иконок.

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

Первоначальный источникСкачать

Зеленая электронная почта контактная форма PSD

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

Первоначальный источникСкачать

Контактная форма с вкладками PSD

Учебники по контактным формам:

Ленты и баннеры

Всего 6 или 7 лет назад закругленные углы начали расти в популярных тенденциях дизайна. Теперь мы продвинулись еще дальше с тенями и угловыми лентами.

Первоначальный источник – Скачать

Найми меня! Угловая лента PSD

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

Эти крошечные эффекты страницы значительно улучшают ваш макет. Посетители заметят и полюбят эти эстетические шутки. Но учтите, что небольшие угловые ленты являются лишь частью этой дизайнерской тенденции.

Первоначальный источникСкачать

Популярная баннерная лента PSD

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

Приведенный ниже дизайн на 100% бесплатный для скачивания и может быть использован для ваших собственных идей проекта. Вы можете видеть, как это привлекло бы внимание посетителей и почему эта тенденция превратилась в такое безумие. Будьте осторожны, чтобы не злоупотреблять баннерами. В целом, они могут стать очень раздражающими, как старые “глянцевые / зеркальные” эффекты web 2.0.

Первоначальный источникСкачать

Угловая лента PSD freebie download

Проектирование с помощью кнопок

Помимо гиперссылок, вы получите наибольшее взаимодействие с посетителями с помощью кнопок. Эти элементы страницы могут выполнять что угодно с помощью вызовов jQuery и Ajax, за исключением того, что вы также можете использовать кнопки для ссылки на статический контент, например, для бесплатной загрузки!

В приведенном ниже наборе пользовательского интерфейса, разработанном Мэттом Джентиле, есть нечто большее, чем просто кнопки. Его набор PSD отлично подходит для начинающих, которые хотят подобрать градиенты и текстуры для создания похожих форм. Часто в наборах пользовательского интерфейса вы найдете гораздо более качественные кнопки, чем в отдельных PSD.

Первоначальный источникСкачать

Легкий набор кнопок UI FreeBie PSD

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

Первоисточник – Скачать

Набор молочных кнопок скачать PSD

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

Первоначальный источник – Скачать

Бесплатные Funky UI кнопки PSD / PNG

Текстуры дерева + бумаги

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

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

Первоначальный источникСкачать

PSD текстуры блокнота скачать

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

28 деревянных текстур высокого разрешения

Вывод

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *