Разработка макетов веб-интерфейса Killer с помощью халявы
Сфера веб-дизайна взяла свое дыхание всего за несколько коротких лет. Сейчас в мире больше активных дизайнеров, чем когда-либо прежде, и все они работают над инновационными проектными идеями. И концепции, лежащие в основе многих из этих тенденций, были разработаны профессиональными графическими дизайнерами..
Могут пройти месяцы или даже годы, прежде чем вы полностью поймете технические аспекты создания пользовательского интерфейса. Необходимо учитывать размеры и расположение элементов страницы, а также читабельность текста и надписей. С небольшим количеством свободного времени вы можете найти минималистский подход для создания веб-сайтов с меньшими затратами и уменьшения путаницы. И даже тогда, есть десятки других методов проектирования, чтобы рассмотреть.
Для этого руководства я спарил некоторые современные методы проектирования пользовательского интерфейса с халява вы можете скачать и играть с. Я надеюсь, что это даст некоторую мотивацию тем, кто заинтересован в карьере в построении графики / веб-дизайна. Даже профессиональные веб-дизайнеры могут найти некоторые из этих тенденций полезными для вашего следующего проекта.
Практика с полными шаблонами
Если у вас есть навыки для создания собственного макета с нуля, нет необходимости начинать с шаблонов. Начинающим, с другой стороны, может быть удобнее начинать с полного дизайна и прорабатывать мелкие детали.
Есть несколько отличных бесплатных загрузок полных шаблонов сайтов PSD для портфолио, домашних страниц, блогов и многих других категорий. Это идеальный дизайн, с которого можно начать знакомство с “генеральный” веб-макет. Каждый сайт будет иметь разные потребности в элементах страницы, и вам придется определить, какие элементы важны.
Вот пример PSD под названием «AppCivilization», разработанный Мартином Фабрициусом. Макет предназначен для творческой студии, которая разрабатывает мобильные приложения и, возможно, веб-сайты. Внизу вы найдете небольшую панель значков приложений, представленных в портфолио. Вы также заметите, что весь дизайн разбит по горизонтали на заголовок, верхнее слайд-шоу, основной контент и затемненный нижний колонтитул..
Первоисточник - Скачать
Проектирование целевых страниц
Давайте посмотрим на другую халяву, также разработанную Мартином. Следующий пример - это целевая страница, которую вы можете использовать для продажи товаров любого типа. Обычно это цифровые товары, которые могут быть загружены пользователем, то есть приложения, фотографии, значки, шаблоны и т. Д..
Первоисточник - Скачать
Но лучшая часть его дизайна в том, что он очень гибкий для начинающих. В заголовке по-прежнему используется небольшая верхняя навигация с большим изображением, но, в частности, ожидаемые действия пользователя отличаются. У него большой “Купить его!” Кнопка, которая стоит прямо над сгибом. На целевой странице продукта это привлекло бы больше внимания, чем слайд-шоу в jQuery..
Еще одна замечательная техника пользовательского интерфейса - маленький экран iPhone в середине страницы. Мартин включает в себя предварительный просмотр iPhone, кнопку App Store и небольшой список ключевых функций. Когда посетители ищут информацию о продукте, вы не можете сделать вещи проще, чем через отформатированный список.
Больше шаблонов:
Вот пара бесплатных PSD-шаблонов, которые мы выпустили в проходе:
- PSD шаблоны бизнес-сайтов "БиЗ"
- PSD шаблон сайта "ThinkJuice"
- PSD шаблон сайта профессионального бизнеса
- PSD шаблон сайта "Polo360"
Вы также можете быть заинтересованы в следующем:
- Шаблоны бизнес-сайтов
- «Скоро» учебные пособия + шаблоны
Главная навигация по сайту
Меню и кнопки - это всего лишь инструменты для создания более крупных элементов страницы. Нельзя отрицать, что основная навигация вашего сайта имеет очень важное значение. Он нужен для того, чтобы ваш сайт был легко доступен с возможными альтернативными методами для мобильных пользователей..
Ниже классная панель навигации с эффектом сшивания текстур. Стиль выделения может быть представлен в виде затемненной рамки или в виде нисходящей подсказки, указывающей на содержимое страницы. Этот стиль был заметен на протяжении многих лет и отлично смотрится в правильной обстановке..
Первоисточник - Скачать
Еще одна аналогичная халява - это текстурированная навигация заголовка, разработанная Эди Гил. Мне очень нравится, как эта вторая навигационная панель включает в себя как список ссылок, так и некоторые дополнительные кнопки на странице. Вы хотите предложить вторичные ссылки для посетителей, где они могут найти ваши профили в Интернете.
Первоисточник - Скачать
Альтернативные стили меню
Помимо типичной горизонтальной навигационной панели есть и другие стили дизайна, которые следует учитывать. Вертикальные ссылки могут быть разбиты на различные подзаголовки, что оставляет больше места для содержимого страницы.
Возьмите, к примеру, бесплатное меню ниже, разработанное веб-сайтом Icojam..
Каждый заголовок построен, чтобы разворачиваться и сворачиваться на основе выбранного объекта. Кроме того, дизайн позволяет небольшому количеству счетчика сидеть справа от каждой категории. Это лучше всего заполнить как блог навигации, чтобы подсчитать, сколько сообщений подано по каждой теме.
Первоисточник - Скачать
Навигационные советы / Уроки:
- Более 50 чистых CSS-скриптов для навигации
- Лучшая практика и примеры навигации Breadcrumb
- Создание мобильной навигации с помощью jQuery
- Кодирование навигации Breadcrumb в CSS3
- Проектирование навигации с помощью LESS CSS
Чистые веб-формы
Современная эпоха Интернета далека от статичного места встречи. Пользователи постоянно обмениваются информацией и ежедневно общаются друг с другом. Большая часть этого обмена текстами и медиа управляется через веб-формы.
Мы должны рассмотреть только несколько примеров того, как вы можете создавать аккуратные формы для ввода и кнопок. Дизайн ваших элементов может иметь большое значение для приглашения ваших посетителей на самом деле их использовать. А это, в свою очередь, повышает доверие к вашему сайту и дает больше просмотров страниц.
Поля входа
Есть несколько отличных примеров PSD формы входа в систему, чтобы проверить. Этот логин халява через WP Scientist имеет все ваши стандартные элементы. Два поля ввода для логина / пароля, кнопки отправки и флажков для управления файлами cookie сеанса.
Эта модель дизайна идеально подходит, если вы можете реализовать эффекты через jQuery. Верхняя правая стрелка заставляет задуматься о настройке всплывающего окна. Это прекрасный способ сэкономить место на вашем сайте, сохраняя форму скрытой до тех пор, пока пользователь не щелкнет ссылку регистрации..
Первоисточник - Скачать
Форма ниже бесплатно скачать благодаря дизайнеру Гил Хайбрехт. Он использовал похожий рисунок с зернистым фоном и текстурой бумаги. Что мне особенно нравится в дизайне Джила, так это «негабаритные» элементы. Гораздо удобнее попасть на форму входа, которая заполняет всю страницу. Пользователи могут легко видеть то, что они печатают, и меньше шума.
Первоисточник - Скачать
Если вы являетесь опытным разработчиком внешнего интерфейса с использованием CSS3, то перевести эту графику в код очень просто. Вы даже можете реализовать выбранный внешний эффект свечения и закругленные углы для кнопки и полей ввода.
контакты
Еще одна форма, которую вы найдете практически на каждом сайте, - это контактная форма. Обычно сюда входят поля для имени отправителя, электронной почты и содержимого сообщения..
Халява ниже - отличный пример использования пользовательских текстур и иконок.
Дизайн также использует текст заполнителя вместо ярлыков. Это означает, что при первой загрузке формы каждому полю присваивается значение по умолчанию (например, ваше имя). Но затем, когда вы начинаете печатать, заполнитель очищается, и вместо этого отображается ваш контент. Все совместимые со стандартами браузеры будут поддерживать этот эффект, и это поможет вам сэкономить место на странице.
Первоисточник - Скачать
Еще одна замечательная бесплатная вещь для захвата - это контактная форма с вкладками, разработанная талантливым Джонно Риквел. Этот дизайн намного проще и имеет метки над каждым входом. Это отличное решение для крупных компаний или стартапов, которым необходимо отправлять сообщения через различные отделы компании..
Первоисточник - Скачать
Учебники по контактным формам:
- Форма входа / регистрации: идеи и красивые примеры
- Создать форму входа с эффектом стопки бумаги
- Создать основанную на Ajax HTML5 / CSS3 форму обратной связи
Ленты и баннеры
Всего 6 или 7 лет назад закругленные углы начали расти в популярных тенденциях дизайна. Теперь мы пошли еще дальше с тенями и угловыми лентами.
Первоисточник - Скачать
Некоторые из этих элементов могут быть использованы в качестве основных моментов дизайна, таких как счетчик комментариев или дата публикации блога. Сшитая лента выше идеально подходит для портфолио или страниц проекта, где вы хотите привлечь внимание вашего посетителя. Вы также можете попробовать подобную вертикальную ленту, где дизайн падает сверху.
Эти крошечные эффекты страницы значительно улучшают ваш макет. Посетители заметят и полюбят эти эстетические шутки. Но учтите, что небольшие угловые ленты являются лишь частью этой дизайнерской тенденции.
Первоисточник - Скачать
Кроме того, полнофункциональный дизайн баннера стал безумно популярным для повышения узнаваемости бренда. Вы можете использовать их в своем логотипе, навигации, домашней странице или даже в избранных записях блога. Последствия практически безграничны с хорошими возможностями дизайна.
Обертывание угла
Еще один очень специфический эффект баннера на ленте выполняется, оборачивая дизайн вокруг угла вашей страницы. Это создает иллюзию того, что ваша страница трехмерная, а лента оборачивается вокруг верхней части вашего сайта..
Дизайн ниже на 100% бесплатный для скачивания и может быть использован для ваших собственных идей проекта. Вы можете видеть, как это привлекло бы внимание посетителей и почему эта тенденция превратилась в такое безумие. Будьте осторожны, чтобы не злоупотреблять баннерами. В целом, они могут стать очень раздражающими, как старые "глянцевые / зеркальные" эффекты Web 2.0..
Первоисточник - Скачать
Проектирование с помощью кнопок
Помимо гиперссылок, вы получите наибольшее взаимодействие с посетителями с помощью кнопок. Эти элементы страницы могут выполнять что угодно с помощью вызовов jQuery и Ajax, за исключением того, что вы также можете использовать кнопки для ссылки на статический контент, например, для бесплатных загрузок, например!
Комплект пользовательского интерфейса ниже, разработанный Мэтт Джентиле имеет гораздо больше, чем просто кнопки. Его набор PSD отлично подходит для начинающих, которые хотят подобрать градиенты и текстуры для создания похожих форм. Часто вы найдете гораздо более качественные кнопки в наборах пользовательского интерфейса, чем с единичными PSD.
Первоисточник - Скачать
Как создать вариации
Практикуя эти приемы, вы захотите со временем создать много разных стилей. Это может привести к переключению одинаковых кнопок между различными проектами и макетами. Хорошим примером является набор молочных кнопок, предлагаемый дизайнером Роберт ван Клинкен.
Первоисточник - Скачать
Каждая из трех оригинальных кнопок имеет свой стиль градиента, за исключением состояния наведения и активного состояния, которые выглядят одинаково. При работе в Photoshop вам придется подбирать цвета между градиентами или перемещать цвета на слой эффектов. С этим пониманием вы можете даже создать свой собственный бесплатный набор кнопок для скачивания!
Первоисточник - Скачать
Текстуры дерева + бумаги
Когда вам нужно усовершенствовать свои основные макеты, вам придется перейти к более хитрым методам. Текстуры всегда приветствуются, если вы можете правильно их реализовать с помощью CSS-фонов или содержимого установленной ширины. И две из самых популярных текстур, которые я видел, это дерево и чистые листы бумаги..
Идея блокнота действительно проста, но она может превратиться в крутой дизайн бренда как часть элемента пользовательского интерфейса или встроена во весь макет. Но сама по себе бумага не всегда выглядит лучше, и другая текстура может помочь стилю гармонировать. Именно здесь могут вступить в игру более детальные текстуры дерева..
Первоисточник - Скачать
Изображения будут выделяться и прекрасно смотреться, завернутые во внешнюю оболочку. Вся концепция текстуры заключается в том, чтобы придать вашему сайту особые чувства или эмоции. Деревянные темы могут вызвать чувство дома и природы. Джереми Вингетт (Jeremiah Wingett) даже предлагает потрясающий набор деревянных веб-интерфейсов. Если вы чувствуете себя креативно, попробуйте собрать свои собственные текстуры и посмотреть, как они работают в веб-среде..
28 текстур дерева высокого разрешения
Заключение
Лучшие веб-дизайнеры - это те, кто практикуется ежедневно и никогда не позволяет своим неудачам удерживаться от своих конечных целей. Вы должны быть отзывчивыми и быстро приходить в себя как от успешных, так и неудачных попыток. Советы и бесплатные материалы в этом руководстве должны стать хорошей отправной точкой для начала изучения того, как создавать различные концепции страниц для веб-проекта. И мы хотели бы прочитать ваши мысли по этому вопросу в области пост-обсуждения.
