prototyping web interfaces: how it is done
TRANSCRIPT
![Page 1: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/1.jpg)
PrototypinginterfacesHow it is done
DigitalAgency nimax.pro
![Page 2: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/2.jpg)
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
![Page 3: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/3.jpg)
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.
![Page 4: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/4.jpg)
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.
![Page 5: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/5.jpg)
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.
![Page 6: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/6.jpg)
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.
![Page 7: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/7.jpg)
IA examples
Nimax Digital Agency Prototyping web interfaces May 2016
User scenarios for “Senta” car insurance aggregator
User needs for “Alliance” windows ordering service
![Page 8: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/8.jpg)
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.
![Page 9: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/9.jpg)
First prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, category“Yarmonka” online food market, home page
![Page 10: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/10.jpg)
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.
![Page 11: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/11.jpg)
Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Senta” car insurance aggregator “Yarmonka” online food market
![Page 12: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/12.jpg)
Design concept examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Bilet Online” flights booking service “YotaHub” second screen configurator
![Page 13: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/13.jpg)
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.
![Page 14: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/14.jpg)
Big prototypes examples
Nimax Digital Agency Prototyping web interfaces May 2016
“Yarmonka” online food market, full versionfull “Senta” car insurance aggregator, prototype
![Page 15: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/15.jpg)
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.
![Page 16: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/16.jpg)
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.
![Page 17: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/17.jpg)
UI guidelines example
Nimax Digital Agency Prototyping web interfaces May 2016
UI guidelines for “Dikom” online store
![Page 18: Prototyping web interfaces: How it is done](https://reader033.vdocument.in/reader033/viewer/2022051521/586e8da41a28aba0038b895d/html5/thumbnails/18.jpg)
DigitalAgency