Mockups & Requirements [ITdeya @ IF_IT_S]
Download as PPTX, PDF0 likes872 views
The document outlines the essential requirements and best practices for UI/UX design, covering business, user, functional, software, system, technical, and product requirements. It emphasizes the importance of clear documentation and various tools such as wireframing, diagramming software, and prototyping methods to enhance client communication and effective implementation. Additionally, it provides various resources and links to improve design understanding and execution.
![Mockups & Requirements [ITdeya @ IF_IT_S]](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-3-320.jpg)
![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),](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-7-320.jpg)
![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](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-9-320.jpg)
![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?](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-12-320.jpg)
![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)](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-13-320.jpg)
![[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.](https://image.slidesharecdn.com/mockups-20-26-20requirements-20-5bitdeya-20-40-20ifits-5d-20v1-1-140317164727-phpapp02/85/Mockups-Requirements-ITdeya-IF_IT_S-15-320.jpg)
Mockups & Requirements [ITdeya @ IF_IT_S]
- 1. IFITS Andrii Lundiak LANDIKE @ GMAIL . COM 2014
- 4. 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
- 5. A.K.A. бізнес-вимоги (business requirement), вимоги користувача (user requirement), вимоги до ПЗ (software requirement), функціональні вимоги (functional requirement), системні вимоги (system requirement), технологічні вимоги (technical requirement), вимоги до продукту (product requirement)
- 6. 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
- 7. 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),
- 8. 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.
- 9. 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
- 10. 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.
- 11. What the difference? Diff1 (ahamashi.de), Diff2 (designmodo.com !!!), Diff3 (wireframemockups.com), Diff4 (gigamaster.blogspot.com)
- 12. 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?
- 13. 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)
- 14. 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.
- 15. [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.
- 16. Special for Ivano-Frankivsk IT Students Community Andrii Lundiak Find me everywhere over the globe, via @landike 2014
Editor's Notes
- #5: 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