Шаблоны мобильных приложений для Sketch, UI Sounds — Design Files

Статьи по дизайну

Создавайте удивительные проекты быстрее и точнее с помощью шаблонов, звуков и других файлов, сделанных Great Simple Studio.

Получить неограниченный доступ

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

Загрузить еще

Коллекция наиболее полезных файлов для дизайна пользовательского интерфейса процесс.

Веб-дизайн, веб-разработка, UI и UX: В чем разница и что вам нужно?

Статьи по дизайну

В чем разница между веб-дизайном и разработкой? А как насчет UI против UX? Что означают эти дивизии? Почему так много акронимов? Не технологические люди хотят, чтобы все было удобнее для пользователя!

Пример веб-дизайна «width =" 1700 "height =" 1498 "/> <figcaption> Дизайн гибридной травы на основе BryanMaxim </figcaption></figure> <p> Если вы новичок в создании веб-сайта , пришедшая через терминологию технической индустрии, может чувствовать себя как слушание иностранного языка, за исключением того, что большинство иностранных языков имеют рифму и разум. Но работать с веб-профессионалом — это то, что каждый бизнес должен делать в какой-то момент, если вы хотите добиться успеха веб-сайт, вам может понадобиться переводчик. </p> <p> Вот для чего предназначена эта статья. Если вы создаете свой первый веб-сайт или просто хотите лучше понять отрасль, здесь мы объясняем и анализируем четыре из наиболее часто используемых и самых сложных терминов в технологиях сегодня: UI, UX, веб-дизайн и веб-разработку. Прочитав это, вы не только узнаете, что делает каждое поле, но и какой из них вам нужен ваш бизнес, чтобы сосредоточиться на большинстве. </p> <h2> Азбука IT <br /> — <b> <br /> </b><br /> </h2> <figure data-id= Веб-дизайн ноутбука рядом с iPhone «width =« 940 »height =« 627 »/> <figcaption> Каркас нового дизайна веб-сайта через Pexels </figcaption></figure> <p> Давайте начнем с некоторые базовые определения, чтобы облегчить вашу первоначальную путаницу и дать вам некоторый контекст, прежде чем погрузиться глубже: </p> <ul> <li> <strong> Веб-дизайн </strong> — Широкая категория зонтиков для всего, что связано с проектированием визуальных эффектов и удобством использования веб-сайта. Дизайн UI и UX, а также многие другие области включены в веб-дизайн. </li> <li> <strong> Веб-разработка </strong> — Техническая часть создания веб-сайта с упором на код. Веб-разработка далее подразделяется на «front-end» и «back-end», объясненные ниже. </li> <li> <strong> Пользовательский интерфейс (UI) </strong> — Специализация веб-дизайна, которая касается элементов управления, которые люди используют для взаимодействия с веб-сайтом или приложением, включая кнопки и элементы управления жестов. </li> <li> <strong> Пользовательский опыт (UX) </strong> — Еще одна специализация веб-дизайна, в которой речь идет о поведении и ощущении пользователя при использовании сайта или приложения. Дизайн UX инкапсулирует многие другие области, но просматривает их с точки зрения пользователя. </li> </ul> <p> Как вы уже видите, ни одна из этих областей не является эксклюзивной, и есть тонны перекрытия. Веб-дизайн и разработка — это всего лишь две стороны одной и той же монеты, дизайн пользовательского интерфейса влияет на дизайн UX, веб-разработка поддерживает их все … меньше о том, какие поля обрабатывают эти задачи, и больше о том, как каждое поле рассматривает одну и ту же задачу из другой точки -view. </p> <p> Например, давайте посмотрим на <em> время загрузки </em>что является общей проблемой для каждого веб-сайта. Как каждый раз загружается адрес полевого адреса: </p> <ul> <li> <strong> Веб-дизайн </strong>: если страница занимает слишком много времени для загрузки, слишком много контента или контента слишком сложны. Файлы изображений могут быть сжаты, активы могут быть отрегулированы и реэкспортированы, а страницы могут быть обрезаны из-за избыточного содержимого. </li> <li> <strong> Веб-разработка </strong>. Чтобы ускорить загрузку контента, мы можем попытаться улучшить сжатие файлов, чтобы уменьшить размер файла содержимого, спрайты CSS для экономии полосы пропускания или сети доставки контента, чтобы увеличить время загрузки в определенных географических регионах. </li> <li> <strong> UI </strong>: Элементы управления должны быть максимально реагирующими, поэтому интерфейс должен быть достаточно простым, чтобы интерактивность была мгновенной. </strong></p> <li> <strong> UX </strong>: вероятность того, что пользователь «отскочит» (покинет ваш сайт через несколько секунд), увеличивается с каждой секундой времени загрузки, поэтому мы должны уделять первоочередное внимание уменьшению времени загрузки на домашней и целевой странице раньше решение проблемы на всей территории страны. </li> </ul> <div class='code-block code-block-3 ai-viewport-1 ai-viewport-2' style='margin: 8px 0; clear: both;'> <!-- Yandex.RTB R-A-268541-2 --> <div id=

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

Иногда вы найдете того, кто утверждает, что все это делает:

  • Дизайнеры, которые могут кодировать, иногда называют себя пакетом «все-в-одном», но на самом деле они более ограничены, чем два отдельных специалиста (хотя иногда это может быть умный прокат, если у вас есть простой сайт) .
  • У дизайнеров пользовательского интерфейса есть много совпадающих навыков с веб-дизайнерами, поэтому некоторые люди будут использовать эти названия взаимозаменяемо.
  • UX и UI часто объединяются вместе, учитывая, что они оба являются субспециализациями.
  • UX часто рассматривается как навык других профессий, даже вне дизайна, таких как управление продуктом.

. Такие люди могут быть полезны в крайнем случае, но просто помните, что валет всех профессий — хозяин никого — они могут знать основы нескольких полей, но они, вероятно, будут только экспертом в одном, если есть.

Вы также хотите сделать различия между веб-сайтами и приложениями, а также рабочим столом и мобильным телефоном. У каждого работника есть свои индивидуальные особенности — у некоторых разработчиков больше опыта в создании мобильных сайтов; некоторые дизайнеры придерживаются исключительно приложений и никогда не делают веб-сайтов. Опять же, есть много перекрытий, но если вы нанимаете для конкретного проекта, убедитесь, что ваши кандидаты могут справиться с особенностями.

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

Веб-дизайн
—

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

Главная страница Figgy & Plum "width =" 1400 "height =" 887 "/> <figcaption> Дизайн страницы Figgy & Plum от DSKY </figcaption></figure> <p> Подкатегории веб-дизайна включают в себя как UI, так и UX, но также и другие забавные акронимы, такие как IA (информационная архитектура, работа с картографированием сайта и навигацией) и CRO (оптимизация скорости конвертации, тонкая настройка дизайна сайта для увеличения продаж, регистрации или других конкретных действий). десятки этих подкатегорий, с новыми, создаваемыми каждый день, когда дизайнеры пытаются получить лучшие рабочие места на конкурентном рынке. </p> <p> Вообще говоря, веб-дизайн связан с визуальными эффектами и функциональностью веб-сайта. Это поле, неотъемлемо связанное с графическим дизайном на каждом уровне, и имеет те же принципы проектирования визуальной коммуникации. </p> <figure data-id= Целевая страница для приложения шеф-повара «ширина =» 1121 «height =» 863 »/> <figcaption> Дизайн страницы шеф-повара Мозг Валлентина </figcaption></figure> <p> Но веб-дизайн больше, чем просто работайте с веб-сайтами или приложениями, дизайнеры должны знать функциональность, технические ограничения, цифровые тенденции и ожидания пользователей, которые часто меняются. </p> <p>. В веб-дизайне также есть ряд бизнес-ноу-хау: дизайнеры должны понимать тактику цифровых продаж, например, как поместить кнопку «призыв к действию» (CTA) для выявления продаж и регистрации электронной почты. Макет сайта сильно влияет на поведение пользователя, но поскольку он настолько нюансирован, некоторые дизайнеры лучше в нем, чем другие. </p> <p> Веб-дизайнер справляется с традиционными проблемами графического дизайна, такими как цвет и типография, а также цифровые проблемы, такие как выбор лучшей эстетики для разных размеров экрана. Они также требуют понимания бизнес-концепций, таких как управление и закрытие, для создания макетов, которые делают призыв к действию более привлекательным. В конце концов, обязанности дизайнера иногда включают в себя создание значков, графических или интерфейсных кнопок с нуля, что опирается на опыт всех трех. </p> <p> Что касается конкретных обязанностей по работе, процесс проектирования в основном зависит от дизайнера, если они работают в рамках существующих правил бренда. Обычно процесс включает в себя проектировщик, создающий прототипы дизайна, а затем тестирование этих прототипов как с фактическими пользователями, так и с заинтересованными сторонами, а затем включение обратной связи в будущие проекты. </p> <p> Дизайнеры также могут сделать каркасы <em> </em>макеты голой кости дизайна для подготовки к прототипу или макет <em> </em>идеальное изображение с изображением того, как будет выглядеть экран за исключением без интерактивности. </p> <p> Как только прототип одобрен, он отправляется разработчику для кодирования. </p> <h3> Что нужно искать при найме веб-дизайнера … </h3> <ul> <li> Более того, вам нужно знать, чего вы хотите, прежде чем вы сможете найти лучшего веб-дизайнера для вас. Из-за большого количества специализаций речь идет не о том, хороший или плохой дизайнер, но подходит ли он для вас. </li> <li> Обратите внимание на их портфолио. С уделением особого внимания графическому дизайну веб-дизайнеры имеют свои уникальные художественные стили. </li> <li> Ищите мастерство тех аспектов, которые вы цените. Если у вас есть сайт с тяжелым текстом, посмотрите, как они обрабатывают типографику, читаемость и макет страницы. Если вы строите магазин электронной торговли, посмотрите, знают ли они, что делает хорошую страницу продукта. </li> <li> Является ли их предпочтительное программное обеспечение совместимым с тем, что использует ваша команда? Существует множество различных дизайнерских программ: Adobe Photoshop, Illustrator, InDesign и Sketch, а также программное обеспечение для создания прототипов, например UXPin или Balsamiq. Проконсультируйтесь с вашим другим персоналом, чтобы узнать, какие у вас варианты. </li> <li> Спросите своего дизайнера об их процессе проектирования и его сроках. Дизайнеры имеют свои собственные методы и циклы проектирования, поэтому дважды проверьте, что вы нанимаете кого-то, что подходит для вашей корпоративной культуры, а также ее расписания. </li> </ul> <h2> Веб-разработка <br /> — </h2> <p> Веб-дизайн и разработка отличаются использованием кода. Развитие — это то, где вещи становятся техническими, но хорошая новость заключается в том, что вам не нужно знать, что говорят ваши разработчики, пока они это делают (хотя это, безусловно, полезно для изучения основ). </p> <p> Веб-разработка разделена на две основные категории: </p> <p> <strong> Front-end </strong> (a.k.a. <em> на стороне клиента </em>): код для отображения веб-сайта (или приложения) на экране. Передний разработчик отвечает за то, чтобы оживить видение веб-дизайнера, как правило, используя компьютерные языки, такие как HTML, CSS и JavaScript. Естественно, не все, что планировал дизайнер, реалистично выполнимо, поэтому разработчик интерфейса часто работает с дизайнером. </p> <p> <strong> Back-end </strong> (a.k.a. <em> серверная сторона </em>): «front-end» извлекает из цифровой системы ресурсов, размещенных на сервере. Внутренний разработчик управляет этими за кадром ресурсами, кодирует данные в базе данных и оптимизирует доставку этих данных. Они используют языки, такие как PHP, Ruby, Python, Java или .Net. </p> <p> Аналогичным образом, разработчик <strong> full-stack </strong> — это тот, кто может работать как с интерфейсом, так и с внутренним интерфейсом. Иногда они являются умным вариантом для стартапов, которые не могут позволить себе больше, чем один найм, но в идеале у вас будет целая команда разработчиков с различными специализациями. </p> <h3> Что нужно искать при найме веб-разработчика … </h3> <ul> <li> Обязательно убедитесь, что они свободно владеют необходимыми языками. Если вы не можете сказать разницу, сообщите им, что вы хотели бы сделать с вашим сайтом, и послушайте их рекомендации. </li> <li> Хотя это и не требуется, разработчик может быть вовлечен в процесс проектирования. Например, разработчик может превентивно рассказать разработчику, если их выбор возможен, и сэкономить время на пересмотры в долгосрочной перспективе. Вы можете посмотреть, насколько хорошо ваш разработчик работает с командой, поскольку некоторые предпочитают работать автономно. </li> <li> Просмотрите свои предыдущие сайты с помощью объектива функциональности. Все работает так, как должно? Появляются все флаги? Вы можете не знать достаточно о развитии, чтобы понять, как это работает, но вы, конечно, знаете, каково это быть нормальным человеком, использующим сайт. </li> </ul> <h2> Пользовательский интерфейс (UI) <br /> — </h2> <p> Теперь, когда мы объяснили веб-дизайн и разработку, мы можем обсудить более специализированные поля, начиная с дизайна пользовательского интерфейса. Пользовательские интерфейсы — это то, что каждый использует, не задумываясь, — вам не нужно знать историю значка гамбургера, чтобы знать, что кнопка с тремя строками — ваше меню. </p> <figure data-id= Дизайн иконок Jeeves Information Systems "width =" 900 "height =" 692 "/> <figcaption> Дизайн иконок от tongal </figcaption></figure> <p> И это постоянный принцип в большинстве областей веб-дизайна : если их работа выполнена хорошо, вы даже не заметите их. Это наиболее распространено в дизайне интерфейса: с действительно интуитивно понятным интерфейсом пользователь не должен думать об этом, чтобы использовать его. </p> <p> Если вам нужно активно думать о том, как использовать элементы управления, это считается плохим дизайном пользовательского интерфейса. Поиск нужной вам кнопки или потратить несколько секунд на то, чтобы выяснить, какая кнопка отвлекает вас от общего опыта использования сайта. Цель дизайна пользовательского интерфейса заключается не только в том, чтобы предоставить все элементы управления, которые пользователь может захотеть, но и для создания понятных элементов управления, которые пользователи понимают с первого взгляда. </p> <p> Еще одна проблема — управление пространством. Разработчики пользовательского интерфейса должны найти счастливую среду между предоставлением пользователям множества опций и сохранением пространства на экране. Вот как появились методы, такие как управление наведением и вытаскивание меню. Разработчик пользовательского интерфейса должен решить, какие элементы управления необходимо предъявлять в любое время и которые достаточно пренебрежимо малы, чтобы полностью скрывать или игнорировать. </p> <figure data-id= 4Links Icon design "width =" 1500 "height =" 918 "/> <figcaption> Дизайн иконок Meileelogo </figcaption></figure> <p> Дизайн пользовательского интерфейса часто совпадает с другим полем под названием <em> дизайн </em> с аббревиатурой «IxD». Дизайн взаимодействия специализируется на всех способах взаимодействия пользователя с системой, в том числе с интерфейсом, а также в таких областях, как всплывающие окна, чаты и окна ошибок. Поскольку дизайн взаимодействия так сильно подчеркивает поведение пользователей, это похоже на промежуточную точку между UI и UX-дизайном. </p> <h3> Что нужно искать, когда нанимает дизайнер пользовательского интерфейса … </h3> <ul> <li> Портфель дизайнера пользовательского интерфейса должен рассказать вам все, что вам нужно знать. Протестируйте предыдущие сайты вашего кандидата и посмотрите, насколько это просто. Можете ли вы найти все, что вам нужно? Использовал сайт / приложение разочарование или легко? </li> <li> Больше, чем другие категории, ищите прошлую работу в конкретном типе проекта, который вы нанимаете. Самый лучший в мире разработчик интерфейса веб-сайта может быть ужасен в создании интерфейса для игрового приложения. Наймите того, кто имеет правильный опыт. </li> </ul> <h2> Пользовательский опыт (UX) <br /> — </h2> <p> Во многих отношениях UX похож на поле веб-дизайна с точки зрения пользователя. Как макет веб-страницы влияет на пользователя? Как пользовательский интерфейс влияет на пользователя? Когда вы переходите на продвинутые этапы, UX становится гораздо более стратегическим, как в «как мы создаем страницу, чтобы пользователь хотел зарегистрироваться?» </p> <figure data-id= GIF для значков в социальных сетях «width =« 800 »height =« 800 »/> <figcaption> Дизайн баннера GIF от Maryia Dziadziulia </figcaption></figure> <p> Как вы можете себе представить, дизайн UX также включает в себя множество других областей в веб-дизайне. Многие говорят о «UI vs UX», но правда в том, что они работают вместе, а не конкурируют. Фактически, существует так много перекрытий, что все виды веб-дизайнеров могут извлечь выгоду из знания немного о UX. Именно так UX стал отдельной дисциплиной: нанимая отдельного специалиста UX, он освобождает кучу других обязанностей от остальной части команды. </p> <p> Хотя сначала это может показаться излишним, на самом деле существует прямая корреляция между дизайном UX и целями бизнеса, такими как продажи или конверсии. Учитывая, что большая часть принятия решений человеком исходит из эмоций и инстинктов кишки, имеет смысл, что оптимизация дизайна веб-сайта может способствовать определенному поведению и создать атмосферу, более благоприятную для этих поведений. </p> <p> По этой причине дизайнеры UX также много рисуют по принципам графического дизайна: привлекают внимание размерами, вызывают правильные эмоции с цветами, создают предсказуемый визуальный поток по экрану и размещают CTA в правильных местах. Однако, в отличие от традиционного графического дизайна, специалисты UX также должны учитывать дополнительные проблемы, такие как интерактивность и синхронизацию, что делает его дисциплиной, полностью отделенной от всех остальных, одновременно связанной с ними всеми. </p> <h3> Что нужно искать при найме дизайнера UX … </h3> <ul> <li> Как и в случае с дизайнами пользовательского интерфейса, вы хотите «проверить диск» на предыдущих сайтах или приложениях у вашего кандидата. Легко ли они использовать? Вы наслаждаетесь опытом использования своего сайта? </li> <li> Если у вас нет бюджета, чтобы нанять отдельного дизайнера UX, попросите кандидатов в других областях об их опыте UX. Эти обязанности иногда могут обрабатываться как кроссовер от разных команд; менеджер по продуктам или маркетолог могут объяснить, что они хотят UX, а затем команда разработчиков обрабатывает визуальный дизайн и реализацию. </li> </ul> <h2> Как насчет сайтов с шаблонами? <br /> — </h2> <p> Как насчет того, используете ли вы сайт шаблонов, например WordPress, Squarespace или Wix? Вам все еще нужна полная команда? Вам нужен кто-то еще? </p> <figure data-id= Дизайн темы для WordPress для Virginia Vape Co. "width =" 1998 "height =" 1609 "/> <figcaption> Дизайн темы WordPress Майком Барнсом </figcaption></figure> <p> Шаблонные сайты отслеживают большинство те же правила, с некоторым большим исключением: </p> <ul> <li> Если вы используете сайт шаблона, вам не нужно беспокоиться о развитии бэкэнд. </li> <li> Сайты шаблонов обычно имеют ограниченные и фиксированные параметры для пользовательского интерфейса. </li> <li> Удостоверьтесь, что у кандидатов есть опыт работы на любом сайте, на котором вы размещаете свой. Быть хорошим в WordPress не обязательно означает быть хорошим в Squarespace. </li> </ul> <p> Помимо этих исключений, использование сайта шаблона аналогично любому другому сайту. Выберите своих дизайнеров в соответствии с тем, что вам больше всего нужно. </p> <h2> Какой вам больше всего нужен? <br /> — </h2> <p> К настоящему моменту вы должны быть в состоянии рассказать обо всем, что касается веб-дизайна и разработки, и вы знаете, что «UI vs UX» не так точна, как «UI + UX». Вопрос в том, какой из них вам следует уделять первоочередное внимание, если вы можете «Нанимать специалистов для всех?» </p> <p> Нет универсального ответа для этого. Поскольку эти поля имеют дело с разными областями, все зависит от уникальных потребностей вашей компании. Учитывая ваши собственные цели и недостатки, вам может понадобиться один специалист больше, чем другие. </p> <p> Чтобы помочь вам понять, какой из них вам больше всего нужен, вот краткий список проблем, которые каждое поле специализируется на решении. Найдите свои самые большие препятствия ниже и посмотрите на соответствующее поле для решения. Если у вас уже есть существующий сайт, заранее проверите некоторые пользовательские тесты, чтобы узнать, какие жалобы имеют фактические пользователи. </p> <p> <strong> Веб-дизайн </strong> </p> <ul> <li> сайт не <em> отзывчивый </em> (что означает, что на мобильных устройствах сайт не выглядит хорошо) </li> <li> сайт выглядит устаревшим </li> <li> низкокачественная графика </li> <li> клиенты не отправляются на страницы, которые вы хотите, чтобы они </li> <li> время на странице слишком короткое </li> </ul> <p> <strong> Веб-разработка </strong> </p> <ul> <li> ошибок (функции сайта не работают должным образом) </li> <li> безопасность в Интернете и предотвращение взлома </li> <li> слишком много ошибок 404 </li> <li> слишком много неудачных поисков DNS </li> <li> сайт в оффлайне </li> <li> определенный контент не загружается </li> </ul> <p> <strong> UI </strong> </p> <ul> <li> Плохая навигация </li> <li> Отсутствие вариантов настройки </li> <li> отсутствие вариантов социального обмена </li> <li> жалобы на «как это сделать» или «где я могу найти это» </li> </ul> <p> <strong> УБ </strong> </p> <ul> <li> плохой коэффициент конверсии (много трафика, но мало конверсий) </li> <li> высокий показатель отказов (посетители уходят через несколько секунд) </li> <li> пользователи не заканчивают контент (видео или блоги) </li> <li> фрагментированные посещения, т. Е. Пользователь уходит после одной страницы и вместо того, чтобы оставаться и исследовать </li> </ul> <p> Конечно, некоторые проблемы могут быть устранены различными методами, как мы объясняли на примере медленных нагрузок выше. Вот почему важно знать, какие аспекты вы хотите определить по приоритетам, так что любое решение, которое вы выбираете, наиболее соответствует вашим приоритетам. </p> <div class=

Хотите нанять веб-дизайнера или специалиста по UI / UX?
Найдите наше сообщество профессиональных дизайнеров для вашего идеального матча.