Mockups & Requirements [ITdeya @ IF_IT_S]
-
Upload
andrii-lundiak -
Category
Education
-
view
194 -
download
1
description
Transcript of Mockups & Requirements [ITdeya @ IF_IT_S]
![Page 1: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/1.jpg)
Mockups & Requirements
IFITSAndrii Lundiak
LANDIKE @ GMAIL . COM2014
![Page 2: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/2.jpg)
Agenda
Requirements.UI/UX.Sketch/WireframeMockup/Prototype.
![Page 3: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/3.jpg)
![Page 4: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/4.jpg)
RequirementsShould be documented, and they should be
about:Should be detailed.Should be discussed/reworked/escalated.Should be ideal, but calm down, it will not
![Page 5: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/5.jpg)
A.K.A.бізнес-вимоги (business requirement),вимоги користувача (user requirement), вимоги до ПЗ (software requirement), функціональні вимоги (functional requirement),системні вимоги (system requirement),технологічні вимоги (technical requirement),вимоги до продукту (product requirement)
![Page 6: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/6.jpg)
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
![Page 7: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/7.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 diagramsMind-Map: List of software.
Example1 (Application planning),
![Page 8: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/8.jpg)
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.
![Page 9: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/9.jpg)
UX (user experience)URL: 10 Usability Heuristics for User Interface DesignUsability 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 designAvoid the Pains of Pagination
10 Web Design Trends in 2013Web Trends in 2014: URL1, URL2
![Page 10: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/10.jpg)
Diagram/Flow toolsSybase PowerDesigner (+Desktop, +Project,
+ReverseEngineering, -WebApp)MS Visio (+Microsft)Gliffy (+ChromeAddOn, +JiraPlugin)Lucid Chart (+ChromeAddOn, + FirefoxAddOn,
+GoogleDrive, +JiraPlugin)
Other Diagramming software.Other Online Diagramming tool.
![Page 11: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/11.jpg)
What the difference?
Diff1 (ahamashi.de), Diff2 (designmodo.com !!!), Diff3 (wireframemockups.com), Diff4 (gigamaster.blogspot.com)
![Page 12: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/12.jpg)
Sketch/WireframeTo use:Paper, Rulers, Markers, Pencils, UI Stencils [stencils, sketch pads, T-Shirts, books]
-$
To read:URL: UX Sketching – Why it’s important?
![Page 13: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/13.jpg)
Wireframe/MockupInfo: 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)
![Page 14: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/14.jpg)
Mockup/PrototypeCreate 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.
![Page 15: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/15.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.
![Page 16: Mockups & Requirements [ITdeya @ IF_IT_S]](https://reader034.fdocuments.in/reader034/viewer/2022051512/53ffd9ea8d7f724c088b4949/html5/thumbnails/16.jpg)
Special forIvano-Frankivsk IT Students CommunityAndrii Lundiak
Find me everywhere over the globe, via @landike
2014