SlideShare a Scribd company logo
1 of 18
Download to read offline
Prototyping
interfaces
How it is done
Digital
Agency nimax.pro
00. Table of contents
01.
02.
03.
04.
05.
06.
07.
08.
09.
Nimax Digital Agency Prototyping web interfaces May 2016
What can be prototyped?
Stage 1. Getting to know you
Stage 2. Research part
Stage 3. Information architecture
Stage 4. First prototypes
Stage 5. Design concept
Stage 6. Hardcore prototyping
Stage 7. Testing prototypes
Stage 8. Design and UI guidelines
01. What can be prototyped?
Nimax Digital Agency Prototyping web interfaces May 2016
● Web services
● Corporate portals
● Online configurators
● File storage systems
● E-commerce solutions
● Mobile applications
Take a look at our portfolio on nimax.pro or behance.net.
The main question will be: “Why?”.
Before starting anything we spend
time talking about the subject, diving
into things and trying to figure out
the best way to implement your goal.
Stage 1. Getting to know you
Nimax Digital Agency Prototyping web interfaces May 2016
● Reasons, problems, wishes.
● Company, product, services.
● Audience, market, competitors.
● Processes behind the scenes.
● Launch and promotion plan.
● Technical requirements.
Stage 2. Research part
Nimax Digital Agency Prototyping web interfaces May 2016
There are always things to double-
check and gaps to fill in. If anything
is not obvious, we would start with
specifying user needs, processes
behind the interface, and its functions.
● Surveys.
● Website audit.
● User interview.
● Product testing.
● Content analysis.
● Web analytics.
Stage 3. Information architecture
Nimax Digital Agency Prototyping web interfaces May 2016
Here all the magic happens. At this
stage we define project future, its
organization and main functions. We
describe next steps thoroughly, so you
know what to expect after that.
● User scenarios.
● Structure and functions.
● Navigation system.
● Content organization.
● Iterative development plan.
IA examples
Nimax Digital Agency Prototyping web interfaces May 2016
User scenarios for “Senta” car insurance
aggregator
User needs for “Alliance” windows ordering
service
Stage 4. First prototypes
Nimax Digital Agency Prototyping web interfaces May 2016
Combining all the data found
on previous steps into pages. Usually
you get a home page and one inner
page. All based on a real content.
● Two black-and white pages.
● Very neat, close to future colored mock-ups.
● Worded idea of the service or product.
● Descriptions of icons, illustrations, photos
or videos needed.
First prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, category“Yarmonka” online food market, home page
Stage 5. Design concept
Nimax Digital Agency Prototyping web interfaces May 2016
Adopting corporate style given
or creating one by ourselves. Considering
how it may look on mobile screens. Always
making it unique and flawless.
● How do elements interact.
● Typefaces, colours and graphics.
● Elements animation when needed.
Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Senta” car insurance aggregator “Yarmonka” online food market
Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Bilet Online” flights booking service “YotaHub” second screen configurator
Stage 6. Hardcore prototyping
Nimax Digital Agency Prototyping web interfaces May 2016
Making all the pages and functions
usable. In the end of the stage you
get fully functioning interactive
prototype of your future product.
Ready to be discussed and tested.
● Every single detail thought out.
● All the hypotheses applied.
● All the texts written.
● Place for future iterations left.
Big prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, full versionfull “Senta” car insurance aggregator, prototype
Stage 7. Testing
Nimax Digital Agency Prototyping web interfaces May 2016
This is the first moment of truth:
we have done a lot already, now it is
time to find out how we did. The proto
can be tested among the team (yours
and ours) or we can invite potential
users. The format depends on a project.
● Things to fix right away.
● Things to be proud of right away.
● Tricky functions or descriptions.
● Ideas for future development.
Stage 8. Design and UI guidelines
Nimax Digital Agency Prototyping web interfaces May 2016
This is what is coupled with frontend
stage. Usually design happens slightly
before or simultaneously with frontend
development.
● Style guides done.
● All the resolutions designed.
● Page building principals defined.
UI guidelines example
Nimax Digital Agency Prototyping web interfaces May 2016
UI guidelines for “Dikom” online store
Digital
Agency

More Related Content

Viewers also liked

UX в интерфейсе и в жизни
UX в интерфейсе и в жизниUX в интерфейсе и в жизни
UX в интерфейсе и в жизниNimax
 
Враг мой: анализ конкурентов в социальных сетях
Враг мой: анализ конкурентов в социальных сетяхВраг мой: анализ конкурентов в социальных сетях
Враг мой: анализ конкурентов в социальных сетяхNimax
 
Роль контента во взаимодействии c клиентами
Роль контента во взаимодействии c клиентамиРоль контента во взаимодействии c клиентами
Роль контента во взаимодействии c клиентамиNimax
 
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPort
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPortТри кита эффективной контекстной рекламы для Ecommerce. Кейс iPort
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPortNimax
 
Iterate it! Итерационная работа над проектами
Iterate it! Итерационная работа над проектамиIterate it! Итерационная работа над проектами
Iterate it! Итерационная работа над проектамиNimax
 
Спецпроекты как инструменты решения задач НКО
Спецпроекты как инструменты решения задач НКОСпецпроекты как инструменты решения задач НКО
Спецпроекты как инструменты решения задач НКОNimax
 
PM. Back to basics: Ответить всем
PM. Back to basics: Ответить всемPM. Back to basics: Ответить всем
PM. Back to basics: Ответить всемNimax
 
Что надо знать при заказе SEO в 2017
Что надо знать при заказе SEO в 2017 Что надо знать при заказе SEO в 2017
Что надо знать при заказе SEO в 2017 Nimax
 
World Market или неудавшийся крестовый поход
World Market или неудавшийся крестовый походWorld Market или неудавшийся крестовый поход
World Market или неудавшийся крестовый походNimax
 
Исследование интересов аудитории: Обзор инструментов
Исследование интересов аудитории: Обзор инструментовИсследование интересов аудитории: Обзор инструментов
Исследование интересов аудитории: Обзор инструментовNimax
 
Iterate it! Вступление
Iterate it! ВступлениеIterate it! Вступление
Iterate it! ВступлениеNimax
 
Digital-маркетинг для банков. Курс на инновации
Digital-маркетинг для банков. Курс на инновацииDigital-маркетинг для банков. Курс на инновации
Digital-маркетинг для банков. Курс на инновацииNimax
 
7 ошибок при работе с контентом, которые испортят ваш сайт
7 ошибок при работе с контентом, которые испортят ваш сайт7 ошибок при работе с контентом, которые испортят ваш сайт
7 ошибок при работе с контентом, которые испортят ваш сайтNimax
 
Лояльность к банку через интерфейс
Лояльность к банку через интерфейсЛояльность к банку через интерфейс
Лояльность к банку через интерфейсNimax
 
Back to basics: как ставить задачи?
Back to basics: как ставить задачи?Back to basics: как ставить задачи?
Back to basics: как ставить задачи?Nimax
 
Чек-лист для контентных проектов
Чек-лист для контентных проектовЧек-лист для контентных проектов
Чек-лист для контентных проектовNimax
 
Информационная архитектура проектов
Информационная архитектура проектовИнформационная архитектура проектов
Информационная архитектура проектовNimax
 
Производство контента
Производство контентаПроизводство контента
Производство контентаNimax
 
Fuck Apple! SMM для нормального бизнеса
Fuck Apple! SMM для нормального бизнесаFuck Apple! SMM для нормального бизнеса
Fuck Apple! SMM для нормального бизнесаNimax
 
SEO-проектирование при создании ecommerce-площадок.
SEO-проектирование при создании ecommerce-площадок.SEO-проектирование при создании ecommerce-площадок.
SEO-проектирование при создании ecommerce-площадок.Nimax
 

Viewers also liked (20)

UX в интерфейсе и в жизни
UX в интерфейсе и в жизниUX в интерфейсе и в жизни
UX в интерфейсе и в жизни
 
Враг мой: анализ конкурентов в социальных сетях
Враг мой: анализ конкурентов в социальных сетяхВраг мой: анализ конкурентов в социальных сетях
Враг мой: анализ конкурентов в социальных сетях
 
Роль контента во взаимодействии c клиентами
Роль контента во взаимодействии c клиентамиРоль контента во взаимодействии c клиентами
Роль контента во взаимодействии c клиентами
 
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPort
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPortТри кита эффективной контекстной рекламы для Ecommerce. Кейс iPort
Три кита эффективной контекстной рекламы для Ecommerce. Кейс iPort
 
Iterate it! Итерационная работа над проектами
Iterate it! Итерационная работа над проектамиIterate it! Итерационная работа над проектами
Iterate it! Итерационная работа над проектами
 
Спецпроекты как инструменты решения задач НКО
Спецпроекты как инструменты решения задач НКОСпецпроекты как инструменты решения задач НКО
Спецпроекты как инструменты решения задач НКО
 
PM. Back to basics: Ответить всем
PM. Back to basics: Ответить всемPM. Back to basics: Ответить всем
PM. Back to basics: Ответить всем
 
Что надо знать при заказе SEO в 2017
Что надо знать при заказе SEO в 2017 Что надо знать при заказе SEO в 2017
Что надо знать при заказе SEO в 2017
 
World Market или неудавшийся крестовый поход
World Market или неудавшийся крестовый походWorld Market или неудавшийся крестовый поход
World Market или неудавшийся крестовый поход
 
Исследование интересов аудитории: Обзор инструментов
Исследование интересов аудитории: Обзор инструментовИсследование интересов аудитории: Обзор инструментов
Исследование интересов аудитории: Обзор инструментов
 
Iterate it! Вступление
Iterate it! ВступлениеIterate it! Вступление
Iterate it! Вступление
 
Digital-маркетинг для банков. Курс на инновации
Digital-маркетинг для банков. Курс на инновацииDigital-маркетинг для банков. Курс на инновации
Digital-маркетинг для банков. Курс на инновации
 
7 ошибок при работе с контентом, которые испортят ваш сайт
7 ошибок при работе с контентом, которые испортят ваш сайт7 ошибок при работе с контентом, которые испортят ваш сайт
7 ошибок при работе с контентом, которые испортят ваш сайт
 
Лояльность к банку через интерфейс
Лояльность к банку через интерфейсЛояльность к банку через интерфейс
Лояльность к банку через интерфейс
 
Back to basics: как ставить задачи?
Back to basics: как ставить задачи?Back to basics: как ставить задачи?
Back to basics: как ставить задачи?
 
Чек-лист для контентных проектов
Чек-лист для контентных проектовЧек-лист для контентных проектов
Чек-лист для контентных проектов
 
Информационная архитектура проектов
Информационная архитектура проектовИнформационная архитектура проектов
Информационная архитектура проектов
 
Производство контента
Производство контентаПроизводство контента
Производство контента
 
Fuck Apple! SMM для нормального бизнеса
Fuck Apple! SMM для нормального бизнесаFuck Apple! SMM для нормального бизнеса
Fuck Apple! SMM для нормального бизнеса
 
SEO-проектирование при создании ecommerce-площадок.
SEO-проектирование при создании ecommerce-площадок.SEO-проектирование при создании ecommerce-площадок.
SEO-проектирование при создании ecommerce-площадок.
 

Similar to Prototyping web interfaces: How it is done

Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia
 
Portfolio Nicole Lobia
Portfolio Nicole Lobia Portfolio Nicole Lobia
Portfolio Nicole Lobia Nicole Lobia
 
Digital Product Development Process for Resilient Products
Digital Product Development Process for Resilient ProductsDigital Product Development Process for Resilient Products
Digital Product Development Process for Resilient ProductsFibonalabs
 
7 Phases of Web Design Process
7 Phases of Web Design Process7 Phases of Web Design Process
7 Phases of Web Design ProcessNiswey
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningPaul Crimi
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016Idean France
 
BitCraft 2017 general presentation
BitCraft 2017 general presentationBitCraft 2017 general presentation
BitCraft 2017 general presentationMichal Wasilewski
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationDivante
 
Sfd labs service offerings
Sfd labs service offeringsSfd labs service offerings
Sfd labs service offeringssfdlabs
 
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdfHow to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdfMarie Weaver
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save TimeBeMyApp
 
INTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxINTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxDevChaudhari15
 
Reimagining User Experiences/User Interfaces
Reimagining User Experiences/User InterfacesReimagining User Experiences/User Interfaces
Reimagining User Experiences/User InterfacesEbtihaj khan
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019zainabkashim
 
UX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentUX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentTrieu Nguyen
 
Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDianaGray10
 

Similar to Prototyping web interfaces: How it is done (20)

Magnolia 6 release walkthrough
Magnolia 6 release walkthroughMagnolia 6 release walkthrough
Magnolia 6 release walkthrough
 
8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech
 
Portfolio Nicole Lobia
Portfolio Nicole Lobia Portfolio Nicole Lobia
Portfolio Nicole Lobia
 
Digital Product Development Process for Resilient Products
Digital Product Development Process for Resilient ProductsDigital Product Development Process for Resilient Products
Digital Product Development Process for Resilient Products
 
Resume
ResumeResume
Resume
 
7 Phases of Web Design Process
7 Phases of Web Design Process7 Phases of Web Design Process
7 Phases of Web Design Process
 
HTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & PlanningHTML5 Meetup | Back to Basics: Wireframing & Planning
HTML5 Meetup | Back to Basics: Wireframing & Planning
 
The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016The Top 10 UX Trends for 2016
The Top 10 UX Trends for 2016
 
BitCraft 2017 general presentation
BitCraft 2017 general presentationBitCraft 2017 general presentation
BitCraft 2017 general presentation
 
Khartik.m.b
Khartik.m.bKhartik.m.b
Khartik.m.b
 
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentationvue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
vue-storefront - PWA eCommerce for Magento2 MM17NYC presentation
 
Sfd labs service offerings
Sfd labs service offeringsSfd labs service offerings
Sfd labs service offerings
 
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdfHow to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
How to Create Wireframes For Mobile Apps and Why It’s Good for Apps.pdf
 
Tools to Save Time
Tools to Save TimeTools to Save Time
Tools to Save Time
 
INTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxINTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptx
 
216170316007.pptx
216170316007.pptx216170316007.pptx
216170316007.pptx
 
Reimagining User Experiences/User Interfaces
Reimagining User Experiences/User InterfacesReimagining User Experiences/User Interfaces
Reimagining User Experiences/User Interfaces
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019
 
UX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product DevelopmentUX Analytics for Data-driven Product Development
UX Analytics for Data-driven Product Development
 
Design Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX WireframesDesign Dynamics: Elevating UiPath Apps with UX Wireframes
Design Dynamics: Elevating UiPath Apps with UX Wireframes
 

More from Nimax

HR-брендинг: борьба за IT-таланты с гигантами
HR-брендинг: борьба за IT-таланты с гигантамиHR-брендинг: борьба за IT-таланты с гигантами
HR-брендинг: борьба за IT-таланты с гигантамиNimax
 
Стратегия компании: общее движение к цели
Стратегия компании: общее движение к целиСтратегия компании: общее движение к цели
Стратегия компании: общее движение к целиNimax
 
Сервис-дизайн в премиальном банкинге
Сервис-дизайн в премиальном банкингеСервис-дизайн в премиальном банкинге
Сервис-дизайн в премиальном банкингеNimax
 
Стратегия — продажа воздуха или средство первой необходимости
Стратегия — продажа воздуха или средство первой необходимости Стратегия — продажа воздуха или средство первой необходимости
Стратегия — продажа воздуха или средство первой необходимости Nimax
 
Воркшоп про виды маркетинговых стратегий
Воркшоп про виды маркетинговых стратегийВоркшоп про виды маркетинговых стратегий
Воркшоп про виды маркетинговых стратегийNimax
 
Ксения Абакумова: Бизнес-процессы. Инструкция для каждого
Ксения Абакумова: Бизнес-процессы. Инструкция для каждогоКсения Абакумова: Бизнес-процессы. Инструкция для каждого
Ксения Абакумова: Бизнес-процессы. Инструкция для каждогоNimax
 
100 слайдов про брендинг
100 слайдов про брендинг100 слайдов про брендинг
100 слайдов про брендингNimax
 
14 ошибок клиентов при работе с агентствами
14 ошибок клиентов при работе с агентствами14 ошибок клиентов при работе с агентствами
14 ошибок клиентов при работе с агентствамиNimax
 
СПИК 2017. Эффективность контент-маркетинга
СПИК 2017. Эффективность контент-маркетингаСПИК 2017. Эффективность контент-маркетинга
СПИК 2017. Эффективность контент-маркетингаNimax
 
СПИК 2017. Монолитность и адаптивность брендов
СПИК 2017. Монолитность и адаптивность брендовСПИК 2017. Монолитность и адаптивность брендов
СПИК 2017. Монолитность и адаптивность брендовNimax
 
СПИК 2017. Бизнес студии/агентства
СПИК 2017. Бизнес студии/агентстваСПИК 2017. Бизнес студии/агентства
СПИК 2017. Бизнес студии/агентстваNimax
 
CПИК 2017: Итерационный подход и аналитика
CПИК 2017: Итерационный подход и аналитикаCПИК 2017: Итерационный подход и аналитика
CПИК 2017: Итерационный подход и аналитикаNimax
 
Коммуникационная стратегия в Нимаксе
Коммуникационная стратегия в НимаксеКоммуникационная стратегия в Нимаксе
Коммуникационная стратегия в НимаксеNimax
 
Рекламная стратегия в Нимаксе
Рекламная стратегия в НимаксеРекламная стратегия в Нимаксе
Рекламная стратегия в НимаксеNimax
 
Контентная стратегия в Нимаксе
Контентная стратегия в НимаксеКонтентная стратегия в Нимаксе
Контентная стратегия в НимаксеNimax
 
Cервисная стратегия в Нимаксе
Cервисная стратегия в НимаксеCервисная стратегия в Нимаксе
Cервисная стратегия в НимаксеNimax
 
Продуктовая стратегия в Нимаксе
Продуктовая стратегия в НимаксеПродуктовая стратегия в Нимаксе
Продуктовая стратегия в НимаксеNimax
 
Стратегия в Нимаксе
Стратегия в НимаксеСтратегия в Нимаксе
Стратегия в НимаксеNimax
 

More from Nimax (18)

HR-брендинг: борьба за IT-таланты с гигантами
HR-брендинг: борьба за IT-таланты с гигантамиHR-брендинг: борьба за IT-таланты с гигантами
HR-брендинг: борьба за IT-таланты с гигантами
 
Стратегия компании: общее движение к цели
Стратегия компании: общее движение к целиСтратегия компании: общее движение к цели
Стратегия компании: общее движение к цели
 
Сервис-дизайн в премиальном банкинге
Сервис-дизайн в премиальном банкингеСервис-дизайн в премиальном банкинге
Сервис-дизайн в премиальном банкинге
 
Стратегия — продажа воздуха или средство первой необходимости
Стратегия — продажа воздуха или средство первой необходимости Стратегия — продажа воздуха или средство первой необходимости
Стратегия — продажа воздуха или средство первой необходимости
 
Воркшоп про виды маркетинговых стратегий
Воркшоп про виды маркетинговых стратегийВоркшоп про виды маркетинговых стратегий
Воркшоп про виды маркетинговых стратегий
 
Ксения Абакумова: Бизнес-процессы. Инструкция для каждого
Ксения Абакумова: Бизнес-процессы. Инструкция для каждогоКсения Абакумова: Бизнес-процессы. Инструкция для каждого
Ксения Абакумова: Бизнес-процессы. Инструкция для каждого
 
100 слайдов про брендинг
100 слайдов про брендинг100 слайдов про брендинг
100 слайдов про брендинг
 
14 ошибок клиентов при работе с агентствами
14 ошибок клиентов при работе с агентствами14 ошибок клиентов при работе с агентствами
14 ошибок клиентов при работе с агентствами
 
СПИК 2017. Эффективность контент-маркетинга
СПИК 2017. Эффективность контент-маркетингаСПИК 2017. Эффективность контент-маркетинга
СПИК 2017. Эффективность контент-маркетинга
 
СПИК 2017. Монолитность и адаптивность брендов
СПИК 2017. Монолитность и адаптивность брендовСПИК 2017. Монолитность и адаптивность брендов
СПИК 2017. Монолитность и адаптивность брендов
 
СПИК 2017. Бизнес студии/агентства
СПИК 2017. Бизнес студии/агентстваСПИК 2017. Бизнес студии/агентства
СПИК 2017. Бизнес студии/агентства
 
CПИК 2017: Итерационный подход и аналитика
CПИК 2017: Итерационный подход и аналитикаCПИК 2017: Итерационный подход и аналитика
CПИК 2017: Итерационный подход и аналитика
 
Коммуникационная стратегия в Нимаксе
Коммуникационная стратегия в НимаксеКоммуникационная стратегия в Нимаксе
Коммуникационная стратегия в Нимаксе
 
Рекламная стратегия в Нимаксе
Рекламная стратегия в НимаксеРекламная стратегия в Нимаксе
Рекламная стратегия в Нимаксе
 
Контентная стратегия в Нимаксе
Контентная стратегия в НимаксеКонтентная стратегия в Нимаксе
Контентная стратегия в Нимаксе
 
Cервисная стратегия в Нимаксе
Cервисная стратегия в НимаксеCервисная стратегия в Нимаксе
Cервисная стратегия в Нимаксе
 
Продуктовая стратегия в Нимаксе
Продуктовая стратегия в НимаксеПродуктовая стратегия в Нимаксе
Продуктовая стратегия в Нимаксе
 
Стратегия в Нимаксе
Стратегия в НимаксеСтратегия в Нимаксе
Стратегия в Нимаксе
 

Recently uploaded

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 

Recently uploaded (19)

WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 

Prototyping web interfaces: How it is done

  • 1. Prototyping interfaces How it is done Digital Agency nimax.pro
  • 2. 00. Table of contents 01. 02. 03. 04. 05. 06. 07. 08. 09. Nimax Digital Agency Prototyping web interfaces May 2016 What can be prototyped? Stage 1. Getting to know you Stage 2. Research part Stage 3. Information architecture Stage 4. First prototypes Stage 5. Design concept Stage 6. Hardcore prototyping Stage 7. Testing prototypes Stage 8. Design and UI guidelines
  • 3. 01. What can be prototyped? Nimax Digital Agency Prototyping web interfaces May 2016 ● Web services ● Corporate portals ● Online configurators ● File storage systems ● E-commerce solutions ● Mobile applications Take a look at our portfolio on nimax.pro or behance.net.
  • 4. The main question will be: “Why?”. Before starting anything we spend time talking about the subject, diving into things and trying to figure out the best way to implement your goal. Stage 1. Getting to know you Nimax Digital Agency Prototyping web interfaces May 2016 ● Reasons, problems, wishes. ● Company, product, services. ● Audience, market, competitors. ● Processes behind the scenes. ● Launch and promotion plan. ● Technical requirements.
  • 5. Stage 2. Research part Nimax Digital Agency Prototyping web interfaces May 2016 There are always things to double- check and gaps to fill in. If anything is not obvious, we would start with specifying user needs, processes behind the interface, and its functions. ● Surveys. ● Website audit. ● User interview. ● Product testing. ● Content analysis. ● Web analytics.
  • 6. Stage 3. Information architecture Nimax Digital Agency Prototyping web interfaces May 2016 Here all the magic happens. At this stage we define project future, its organization and main functions. We describe next steps thoroughly, so you know what to expect after that. ● User scenarios. ● Structure and functions. ● Navigation system. ● Content organization. ● Iterative development plan.
  • 7. IA examples Nimax Digital Agency Prototyping web interfaces May 2016 User scenarios for “Senta” car insurance aggregator User needs for “Alliance” windows ordering service
  • 8. Stage 4. First prototypes Nimax Digital Agency Prototyping web interfaces May 2016 Combining all the data found on previous steps into pages. Usually you get a home page and one inner page. All based on a real content. ● Two black-and white pages. ● Very neat, close to future colored mock-ups. ● Worded idea of the service or product. ● Descriptions of icons, illustrations, photos or videos needed.
  • 9. First prototypes examples Nimax Digital Agency Prototyping web interfaces May 2016 “Yarmonka” online food market, category“Yarmonka” online food market, home page
  • 10. Stage 5. Design concept Nimax Digital Agency Prototyping web interfaces May 2016 Adopting corporate style given or creating one by ourselves. Considering how it may look on mobile screens. Always making it unique and flawless. ● How do elements interact. ● Typefaces, colours and graphics. ● Elements animation when needed.
  • 11. Design concept examples Nimax Digital Agency Prototyping web interfaces May 2016 “Senta” car insurance aggregator “Yarmonka” online food market
  • 12. Design concept examples Nimax Digital Agency Prototyping web interfaces May 2016 “Bilet Online” flights booking service “YotaHub” second screen configurator
  • 13. Stage 6. Hardcore prototyping Nimax Digital Agency Prototyping web interfaces May 2016 Making all the pages and functions usable. In the end of the stage you get fully functioning interactive prototype of your future product. Ready to be discussed and tested. ● Every single detail thought out. ● All the hypotheses applied. ● All the texts written. ● Place for future iterations left.
  • 14. Big prototypes examples Nimax Digital Agency Prototyping web interfaces May 2016 “Yarmonka” online food market, full versionfull “Senta” car insurance aggregator, prototype
  • 15. Stage 7. Testing Nimax Digital Agency Prototyping web interfaces May 2016 This is the first moment of truth: we have done a lot already, now it is time to find out how we did. The proto can be tested among the team (yours and ours) or we can invite potential users. The format depends on a project. ● Things to fix right away. ● Things to be proud of right away. ● Tricky functions or descriptions. ● Ideas for future development.
  • 16. Stage 8. Design and UI guidelines Nimax Digital Agency Prototyping web interfaces May 2016 This is what is coupled with frontend stage. Usually design happens slightly before or simultaneously with frontend development. ● Style guides done. ● All the resolutions designed. ● Page building principals defined.
  • 17. UI guidelines example Nimax Digital Agency Prototyping web interfaces May 2016 UI guidelines for “Dikom” online store