Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping web interfaces: How it is done

2,950 views

Published on

Google Drive link: ow.ly/t2CT302JaFJ
The stages of prototyping interfaces at Nimax with artifacts examples: from first interview with a client to design and UI guidelines.

Published in: Design
  • Be the first to comment

Prototyping web interfaces: How it is done

  1. 1. Prototyping interfaces How it is done Digital Agency nimax.pro
  2. 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. 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. 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. 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. 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. 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. 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. 9. First prototypes examples Nimax Digital Agency Prototyping web interfaces May 2016 “Yarmonka” online food market, category“Yarmonka” online food market, home page
  10. 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. 11. Design concept examples Nimax Digital Agency Prototyping web interfaces May 2016 “Senta” car insurance aggregator “Yarmonka” online food market
  12. 12. Design concept examples Nimax Digital Agency Prototyping web interfaces May 2016 “Bilet Online” flights booking service “YotaHub” second screen configurator
  13. 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. 14. Big prototypes examples Nimax Digital Agency Prototyping web interfaces May 2016 “Yarmonka” online food market, full versionfull “Senta” car insurance aggregator, prototype
  15. 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. 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. 17. UI guidelines example Nimax Digital Agency Prototyping web interfaces May 2016 UI guidelines for “Dikom” online store
  18. 18. Digital Agency

×