Дизайн
Aleksandr Popov
4116

7 отличий веб-дизайна от графического дизайна

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

В закладки
Дизайн​ https://skillbox.ru/

1. Веб-дизайн – это динамичная среда

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

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

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

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

Терминология:

Графический дизайнер - он же UI дизайнер

UI дизайнер — это интерфейс пользователя, он же пользовательский интерфейс (от английского user interface)

Веб-дизайнер - он же UX дизайнер

UX в переводе означает «опыт взаимодействия» (User eXperience) и включает в себя различные компоненты: информационную архитектуру, проектирование взаимодействия.

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

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

Профессионалам веб - дизайна , как правило , UI дизайнеры и дизайнеры UX в одном лице.Но как часто вы встречали таких профессионалов?

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

2. Веб-дизайнеры заботятся о времени загрузки и размерах файлов

IxPixar мог бы заполнить свой сайт анимацией (отмеченной наградами) в полном разрешении , но они сохраняют ее с минимальным размером для быстрой загрузки.

Чудовищные размеры файлов - вот что не дает спать по ночам веб-дизайнерам.

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

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

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

3. У веб-дизайнеров есть барьеры, в использовании типографики

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

Веб-дизайнерам, однако, необходимо учитывать, как текст будет отображаться на разных экранах и в разных браузерах.

К счастью, добавление правила @font-face в CSS позволяет расширить выбор шрифтов. А такие приложения, как Adobe Typekit и Google Fonts, дают веб-дизайнерам более широкую палитру типографики для творчества.

4. Веб-дизайнеры думают о широком применении своего дизайна

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

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

Посмотрите какое огромное количество сайтов в интернете не адаптированы под мобильное устройство. А это потери потенциальных посетителей и клиентов.

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

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

5. Веб-дизайнеры всегда при работе

Веб-сайт – это что-то живое, которое постоянно меняется.

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

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

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

В то время как графический дизайнер фокусируется на творчестве, веб-дизайнер занимается тем, как все части дизайна функционируют вместе как система.

Графические дизайнеры – это художники. Этот прекрасный набор аватаров Райана Путнэма, созданный для Comcast, креативен и детален.

6. У веб-дизайнеров постоянное взаимодействие с аудиторией.

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

Когда что-то на сайте работает не так, как должно, или когда пользователи ненавидят дизайн, веб-дизайнеры знаютоб этом!

Интернет — это сеть для мнений и отзывов. Просто читаем комментарии к любой статье и все становится понятно.

Возьмем, к примеру, рекламный щит: конечно, лозунг может не нравиться, а цветовая гамма — дурацкой, но мало кто позвонит в агенство и скажет: "Этот баннер мне не нравится!". Человек в воздух выразил свое недовольство и все... На этом все и заканчивается (Ну обычно.)

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

7. Веб-дизайнеры тесно сотрудничают с разработчиками

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

Каждый проект имеет свой набор определенных действий.

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

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

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

И чтобы не получилось, как в детской игре "Испорченный телефон" - видение веб-дизайнера изменяется, поскольку дизайн превращается в код.

Графические дизайнеры — художник в одном лице, стоящим за их работой. Они одиноки в реализации творческого замысла.

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

Поэтому только тесное взаимодействие всех специалистов приведет к успеху.

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

Заключение:

Веб-дизайн и графический дизайн — это все ВИЗУАЛ. И сейчас много курсов, которые "готовят" сразу UI/UX дизайнеров в одном флаконе. Как мне кажется каждый человек должен быть хорош в одной дисциплине.

А как вы считаете? Что еще отделяет или объединяет графический и веб-дизайн? Хотел бы увидеть ваши дополнения в комментариях.

► Автор англоязычной версии статьи и фанат дизайна Jeff Cardello

► Источник для перевода и обсуждения - "7 ways web design is different than graphic design"

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Aleksandr Popov", "author_type": "self", "tags": [], "comments": 5, "likes": 1, "favorites": 47, "is_advertisement": false, "subsite_label": "design", "id": 89842, "is_wide": false, "is_ugc": true, "date": "Sat, 26 Oct 2019 23:51:04 +0300", "is_special": false }
0
{ "id": 89842, "author_id": 275019, "diff_limit": 1000, "urls": {"diff":"\/comments\/89842\/get","add":"\/comments\/89842\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/89842"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
5 комментариев
Популярные
По порядку
9

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

Ответить
4

Графический дизайнер - это не ui, это графический дизайнер. А ux специалист - это вообще не дизайнер.

Ответить
3

Графический дизайнер - он же UI дизайнер

Лол

Полиграфия? Не не слышали 

Ответить
1

Причём в оригинале автор четко разделяет граф дизайнеров и веб дизайнеров UI / UX.
In a sense, graphic designers, like web designers, are concerned with UX, user experience. But they're largely exempt from worrying about UI, how the user interacts with their work.

Перевод вполне адекватный
В некотором смысле, графические дизайнеры, как и веб-дизайнеры, заинтересованы в пользовательском интерфейсе UX. Но они не так сильно беспокоятся по поводу пользовательского интерфейса UI

Но автор данной статьи с какого-то хуя решил заявить что графический дизайнер - это UI. Выдумал нелепую терминологию.

Ответить
0

7 "отличий" а похоже на 7 превосходств веб диз над граф дизом...

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }