prototyping web interfaces: how it is done

PrototypinginterfacesHow it is done

DigitalAgency 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 spendtime talking about the subject, divinginto things and trying to figure outthe 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 anythingis not obvious, we would start with specifying user needs, processesbehind 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 thisstage we define project future, itsorganization and main functions. We describe next steps thoroughly, so youknow 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 foundon previous steps into pages. Usuallyyou get a home page and one innerpage. 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 givenor creating one by ourselves. Considering how it may look on mobile screens. Alwaysmaking 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 functionsusable. In the end of the stage youget fully functioning interactiveprototype 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 istime to find out how we did. The protocan be tested among the team (yoursand ours) or we can invite potentialusers. 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 frontendstage. Usually design happens slightlybefore or simultaneously with frontenddevelopment.

● 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

DigitalAgency