prototyping web interfaces: how it is done
TRANSCRIPT
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