mockups & requirements [itdeya @ if_it_s]

Mockups & Requirements

IFITSAndrii Lundiak

LANDIKE @ GMAIL . COM2014

Agenda

Requirements.UI/UX.Sketch/WireframeMockup/Prototype.

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

A.K.A.бізнес-вимоги (business requirement),вимоги користувача (user requirement), вимоги до ПЗ (software requirement), функціональні вимоги (functional requirement),системні вимоги (system requirement),технологічні вимоги (technical requirement),вимоги до продукту (product requirement)

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

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),

http://en.wikipedia.org/wiki/List_of_concept-_and_mind-mapping_software

http://www.mind-mapping.co.uk/_images/_Images/EXAMPLES/BUSINESS/Planning-and-Analysis/App_Plan550pix.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.

http://caniuse.com/

http://www.adobe.com/devnet/html5/articles/ten-things-you-need-to-know-about-responsive-design.html

http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/

http://jsperf.com/

http://www.webpagetest.org/

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

http://www.nngroup.com/articles/ten-usability-heuristics/

http://userium.com/

http://goodui.org/

http://theultralinx.com/2013/07/start-guide-ux-design-infographic.html

http://uxmovement.com/navigation/avoid-the-pains-of-pagination/

http://www.awwwards.com/10-web-design-trends-for-2013.html

http://www.awwwards.com/10-web-design-trends-for-2013.html

http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/

http://webdesignledger.com/trends-2/web-design-trends-for-2014

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.

http://www.gliffy.com/

https://www.lucidchart.com/

http://en.wikipedia.org/wiki/Diagramming_software

http://en.wikipedia.org/wiki/Online_diagramming

What the difference?

Diff1 (ahamashi.de), Diff2 (designmodo.com !!!), Diff3 (wireframemockups.com), Diff4 (gigamaster.blogspot.com)

http://ahamashi.de/2011/11/rapid-prototyping-and-the-design-process/

http://designmodo.com/wireframing-prototyping-mockuping/

http://www.wireframemockups.com/sketchesmockups-vs-wireframe-vs-prototype

http://gigamaster.blogspot.com/2012/07/wireframe-mockup-prototype.html

Sketch/WireframeTo use:Paper, Rulers, Markers, Pencils, UI Stencils [stencils, sketch pads, T-Shirts, books]

-$

To read:URL: UX Sketching – Why it’s important?

http://www.uistencils.com/

https://medium.com/ux-ui-design/4deda906c915

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)

http://mashable.com/2010/07/15/wireframing-tools/

http://uifundamentals.com/tools/free-and-good-alternatives-to-balsamiq-mockups/

http://www.onextrapixel.com/2012/05/11/7-non-web-based-wireframe-tools/

http://balsamiq.com/

http://support.balsamiq.com/customer/portal/articles/110121

http://support.balsamiq.com/customer/portal/articles/110188-working-with-data-grids-tables

http://support.balsamiq.com/customer/portal/articles/110202-working-with-icons

http://support.balsamiq.com/customer/portal/articles/110439

https://moqups.com/

http://pencil.evolus.vn/Downloads.html

http://wireframesketcher.com/download.html

https://www.wireframes.org/

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.

http://codepen.io/

http://jsfiddle.net/

http://cssdeck.com/

http://collabedit.com/

https://slid.es/

http://prezi.com/

[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.

Special forIvano-Frankivsk IT Students CommunityAndrii Lundiak

Find me everywhere over the globe, via @landike

2014

mockups & requirements [itdeya @ if_it_s]

Education

radio button

web

system

url

desktop

show

amp

important