Назир Хасавов "Рецепт приготовления идеального...

27
РЕЦЕПТ ИДЕАЛЬНОГО ИНТЕРФЕЙСА НАЗИР ХАСАВОВ ОСНОВАТЕЛЬ АРТ-ДИРЕКТОР

Upload: pnpdag

Post on 16-Jun-2015

189 views

Category:

Documents


2 download

DESCRIPTION

Презентация Назира Хасавова о главны составляющих идеального веб-интерфейса

TRANSCRIPT

Page 1: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

РЕЦЕПТИДЕАЛЬНОГО ИНТЕРФЕЙСА

НАЗИРХАСАВОВОСНОВАТЕЛЬАРТ-ДИРЕКТОР

Page 2: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

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

ЧТОТАКОЕ

ВЕБИНТЕРФЕЙС

Page 3: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ИНГРЕДИЕНТЫ

Page 4: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ОСНОВАСОУССПЕЦИИ

Page 5: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

Информация

Структура

Логотип и элементы фирменного стиля

ОСНОВА

Page 6: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

Единство

Отказ от повторений

Интерактив

Адаптивность

СОУС

Page 7: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ЕДИНСТВОЕдинство в дизайне создает сильную взаимосвязь между элементами интерфейса, так что пользователь будет воспринимать их как одно целое.

Page 8: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ОТКАЗ ОТ ПОВТОРЕНИЙПОРТФОЛИО ПОРТФОЛИОМОЯ РАБОТА 1 МОЯ РАБОТА 1

МОЯ РАБОТА 1

МОЯ РАБОТА 2

МОЯ РАБОТА 2

МОЯ РАБОТА 2

Page 9: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ИНТЕРАКТИВНОСТЬИнтерактивность (от англ. interaction — «взаимодействие») — понятие, которое раскрывает характер и степень взаимодействия между пользователем и интерфейсом.

Page 10: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

Это интерфейс обеспечивающий наилучшее отображение сайта на различных устройствах

АДАПТИВ-НОСТЬ

Page 11: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

Цвета

Типографика

Пиктограммы

Эффекты

СПЕЦИИ

Page 12: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ЦВЕТАИспользуйте ограниченный набор цветов и оттенков, чтобы избежать визуальной перегруженности.

Page 13: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ТИПО-ГРАФИ-КАДизайнер обязан иметь хорошую подготовку в основной дисциплине — в формировании текстовой информации, другими словами — в типографике.

color-looks.ru

Page 14: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ПИКТОГРАММЫ

svyaznoybank.ru/trip

Page 15: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ЭФФЕК-ТЫАнимация или другие подобные эффекты — добавляют динамики интерфейсу, показывают преимущества в новом свете или помогают понять принцип работы какой-нибудь детали.

millicano.jacobstogether.ru

Page 16: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ПРИГОТОВЛЕНИЕ

Page 17: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ДИЗАЙН — ЭТО НЕ ТОЛЬКО ТО, КАК ВЫГЛЯДИТ, НО И ТО, КАК РАБОТАЕТ.

СТИВ ДЖОБС

Page 18: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

СТРУКТУРА.ВИЗУАЛЬНЫЙ ИНТЕРЕС. ОТКАЗ ОТ ПОВТОРЕНИЙ.

ЭФФЕКТЫ.

Page 19: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

АСИММЕТРИЧНЫЙИНТЕРФЕЙС

Z-ОБРАЗНЫЙИНТЕРФЕЙС

F-ОБРАЗНЫЙИНТЕРФЕЙС

СИММЕТРИЧНЫЙИНТЕРФЕЙС

Page 20: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

СИММЕТРИЧНЫЙИНТЕРФЕЙС

Симметричный дизайн опирается на принципы равновесия, ритма, пропорции и единства.

Виды симметрии:— двусторонняя — радиальная— трансляционная

Page 21: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

АСИММЕТРИЧНЫЙИНТЕРФЕЙС

Асимметричный интерфейс имеет высокую степень визуальной иерархии.

Page 22: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

F-ОБРАЗНЫЙИНТЕРФЕЙС

F-интерфейс полагается на различные исследования движения глаз и поэтому считается наиболее естественным для пользователя.

Page 23: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

Z-ОБРАЗНЫЙИНТЕРФЕЙС

Z-интерфейс базируется на 4-х больших принципах эффективного дизайна:— Брендинг— Иерархия— Структура— Призыв к действию

Page 24: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

КРЕАТИВНЫЙ ПРОЦЕСС

Началоработ

Пофигу Паника

Ужерыдает

Дедлайн

Page 25: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

ДОСТИЖЕНИЕ ПОНИМАНИЯ ТОГО, КАК РАЗЛИЧНЫЕ ВЕБ-ИНТЕРФЕЙСЫ МОГУТ ВЛИЯТЬ НА ПОВЕДЕНИЕ ПОЛЬЗОВАТЕЛЯ, ЯВЛЯЕТСЯ ОДНИМ ИЗ ОСНОВНЫХ ПРИНЦИПОВ СОЗДАНИЯ ЭФФЕКТИВНОГО ВЗАИМОДЕЙСТВИЯ С ПОЛЬЗОВАТЕЛЕМ.

Page 26: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

В ЭТОЙ ПРЕЗЕНТАЦИИ НЕ ПОСТРАДАЛО, НИ ОДНО АВТОРСКОЕ ПРАВО

ВСЕ РАБОТЫ СДЕЛАНЫ МНОЙ В РАЗНЫЕ ПЕРИОДЫ.

Page 27: Назир Хасавов "Рецепт приготовления идеального Веб-интерфейса"

W W W . N K H S T U D I O . R U

N A Z I R @ N K H S T U D I O . R U

N K HV I S U A L

C O M M U N I C A T I O N S

S T U D I O

СПАСИБОЗА ВНИМАНИЕ