IFITS
Andrii Lundiak
LANDIKE @ GMAIL . COM
2014
Agenda
Requirements.
UI/UX.
Sketch/Wireframe
Mockup/Prototype.
Requirements
 Should be documented, and they should be about:
 Should be detailed.
 Should be discussed/reworked/escala...
A.K.A.
 бізнес-вимоги (business requirement),
 вимоги користувача (user requirement),
 вимоги до ПЗ (software requireme...
What, what?
 Business R. – why Client need such system on high level?
 vision and scope document, project charter”
 Use...
SRS Realization [free, but …]
 MS Word with very detailed structured text.
 MS Visio diagram.
 MS Excel table with matr...
UI (user interface)
 Should be rich  and modern (caniuse.com)
 & u need to know ten things about responsive design and
...
UX (user experience)
 URL: 10 Usability Heuristics for User Interface Design
 Usability checklist: userium.com !!!
 Fro...
Diagram/Flow tools
 Sybase PowerDesigner (+Desktop, +Project,
+ReverseEngineering, -WebApp)
 MS Visio (+Microsft)
 Glif...
What the difference?
 Diff1 (ahamashi.de),
 Diff2 (designmodo.com !!!),
 Diff3 (wireframemockups.com),
 Diff4 (gigamas...
Sketch/Wireframe
To use:
 Paper, Rulers, Markers, Pencils,
 UI Stencils [stencils, sketch pads, T-Shirts, books] -$
To r...
Wireframe/Mockup
Info:
 URL: 10 Free Wireframing Tools for Designers
 URL: Free (and good) Alternatives to Balsamiq Mock...
Mockup/Prototype
Create and show your proto with:
 PSD2HTML (any similar soft you have or find).
 CSS Frameworks (Bootst...
[Conclusion]
Why all this important?
- Because of Client Orientation 
- Better to show than to write.
- As better you vis...
Special for
Ivano-Frankivsk
IT Students
Community
Andrii Lundiak
Find me everywhere over the
globe, via @landike
2014
Mockups & Requirements [ITdeya @ IF_IT_S]
Upcoming SlideShare
Loading in …5
×

Mockups & Requirements [ITdeya @ IF_IT_S]

650 views
464 views

Published on

A few words about:
- requirements, types of req., artifacats
- sketching, wireframing, mockup, prototype
- UI vs. UX with examples from own experience
- URl with info, Suggested tools.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
650
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 1)Abilities and behavior of softwareCondition of useRelations with other systems/componentsAssumptions2) Detailed as deep as it’s needed to understand for developers during development, for QA during testing and for Client during overall review
  • Mockups & Requirements [ITdeya @ IF_IT_S]

    1. 1. IFITS Andrii Lundiak LANDIKE @ GMAIL . COM 2014
    2. 2. Agenda Requirements. UI/UX. Sketch/Wireframe Mockup/Prototype.
    3. 3. Requirements  Should be documented, and they should be about:  Should be detailed.  Should be discussed/reworked/escalated.  Should be ideal, but calm down, it will not 
    4. 4. A.K.A.  бізнес-вимоги (business requirement),  вимоги користувача (user requirement),  вимоги до ПЗ (software requirement),  функціональні вимоги (functional requirement),  системні вимоги (system requirement),  технологічні вимоги (technical requirement),  вимоги до продукту (product requirement)
    5. 5. What, what?  Business R. – why Client need such system on high level?  vision and scope document, project charter”  User R. – what goals and tasks user may have/achieve using this system, what can they do exactly?  use cases, scenario descriptions, event-response tables.  Functional R. – what functionality must be developed to implement business and user R.  software requirements specification aka SRS
    6. 6. SRS Realization [free, but …]  MS Word with very detailed structured text.  MS Visio diagram.  MS Excel table with matrix definition of done.  MS Project.  Images and *.pdf files.  UML diagrams  Mind-Map: List of software.  Example1 (Application planning),
    7. 7. UI (user interface)  Should be rich  and modern (caniuse.com)  & u need to know ten things about responsive design and a few things about flat design.  & u better to follow Single Page Application (SPA) rules.  & care about Page Load Time ‘coz it’s == Money (jsperf.com, webpagetest.org, )  No wheel invention.
    8. 8. UX (user experience)  URL: 10 Usability Heuristics for User Interface Design  Usability checklist: userium.com !!!  From my experience:  Radio button and label, Default checked/selected element, Predefined hint (placeholder), Gender better to use Radio button than Dropdown  Other UX tips from goodui.org [don’t be lazy, read it for sure]  URL: Quick start to UX design  Avoid the Pains of Pagination 10 Web Design Trends in 2013 Web Trends in 2014: URL1, URL2
    9. 9. Diagram/Flow tools  Sybase PowerDesigner (+Desktop, +Project, +ReverseEngineering, -WebApp)  MS Visio (+Microsft)  Gliffy (+ChromeAddOn, +JiraPlugin)  Lucid Chart (+ChromeAddOn, + FirefoxAddOn, +GoogleDrive, +JiraPlugin)  Other Diagramming software.  Other Online Diagramming tool.
    10. 10. What the difference?  Diff1 (ahamashi.de),  Diff2 (designmodo.com !!!),  Diff3 (wireframemockups.com),  Diff4 (gigamaster.blogspot.com)
    11. 11. Sketch/Wireframe To use:  Paper, Rulers, Markers, Pencils,  UI Stencils [stencils, sketch pads, T-Shirts, books] -$ To read:  URL: UX Sketching – Why it’s important?
    12. 12. Wireframe/Mockup Info:  URL: 10 Free Wireframing Tools for Designers  URL: Free (and good) Alternatives to Balsamiq Mockups [Apr-22-2013]  URL: 7 Non-Web-Based Wireframe Tools Soft/Tools:  Balsamiq (Desktop+Web: -$, +myPrj.myBalsamiq.com, +Desktop, +ChromeAddOn, +JiraPlugin)  Info #HowTo work with: Text or Data grid or Icons or Symbols  Moqups (Web: +Free [2prj, 5mb-img-strg], +SPA, +ChromeAddOn, +GoogleDrive, +DropBox)  Pencil (Desktop: +MultiOS, ).  WireframeSketcher try it (+EclipsePlugin, +Standalone).  wireframes.org (to export, login required)
    13. 13. Mockup/Prototype Create and show your proto with:  PSD2HTML (any similar soft you have or find).  CSS Frameworks (Bootstrap, Foundation, etc).  Online Editors: codepen.io, jsfiddle.net, cssdeck.com.  Synchronized online editors: collabedit.com.  Online Slides: slid.es, prezi.com.
    14. 14. [Conclusion] Why all this important? - Because of Client Orientation  - Better to show than to write. - As better you visualize Client requirements as better you’ll implement the code. - Better to understand perfectly than misunderstand totally.
    15. 15. Special for Ivano-Frankivsk IT Students Community Andrii Lundiak Find me everywhere over the globe, via @landike 2014

    ×