Your SlideShare is downloading. ×
Session On Mockups
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Session On Mockups


Published on

UI Mockup & Wireframing

UI Mockup & Wireframing

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Md. Abdul Munim Dibosh
  • 2. What we will learn today?What’s this?What tools should I make ready before starting?Is it really important?Inspirations/Examples?Who are following this procedure?Enough talk! Now show me something practical…
  • 3. PrototypingA solid start up for your software developmentproject.Clearer idea of your goals and motivations.Less development time & complexity.
  • 4. Tools you should have ;)Paper & PencilYour computerFavorite music playing onA cup of coffee/teaA peaceful mind with a clear vision
  • 5. Your software should beIntuitive :: don’t make me think!Fluid :: huh, it’s hanged!Pluggable :: whoa, I can’t update it?Scalable :: so , you say your system will fail to handlethis load?Modern :: Duh, didn’t you hear about the technologythey used?
  • 6. Your software shouldn’tbeA box of irrelevant colors :: everything has a limit!Complex :: better you said me to solve that puzzle.Static :: you need this to push it inside, but you don’thave any doors!Unmanageable :: humm, I think you can’t evenunderstand your code.
  • 7. Getting startedPaper & Pen/PencilList target usersList featuresFilter out all but the features for initial buildPlan the scenariosCreate wireframes in paperDevelop mockups and flows
  • 8. Architectures &FrameworksFrameworks help you to maintain manageable codes.Decoupled development.Common patterns should be applied.Think simple, do it simply.Never dive into development without a concrete plan.
  • 9. Start prototypingBasic sketch of the ideaFlow/Sitemap planWire-framingMockup design
  • 10. Confused?Basic sketch : Give your ideas pictorial meaning(Tools:Pen & Paper)Flow/Sitemap : Flow chart of linked screens/pages(Tools:Pen & Paper/Software)Wire-framing : Add some more details to your initialsketch, label specific parts, make moreunderstandable(Tools: Pen & Paper/Software)Mockups : More detailed, actually the look that will bedeveloped in your app(Tools: Software)
  • 11. Inspirations/Case studies?
  • 12. Let’s do somethingTitle: PhotoShopConcept: Love to see photos from professionalphotographers? Want to buy some for purpose? Thendon’t forget to check PhotoShop.Target users: Developers, Teachers, Doctors etc.Main features: Submit/Buy photosCan be a huge thing to complete, let’s focus on first 2pages.
  • 13. SitemapHome GalleryLet’s keep it simple for now…
  • 14. Wireframes-1
  • 15. Wireframes-2
  • 16. Tools for final Mockuphttp://moqups.comPencil (
  • 17. PhotoShop-Home
  • 18. PhotoShop-Gallery
  • 19. Interactive PrototypingPrototypes with event triggers.With commenting/annotations feature.Best for Professionals. (Free for 1 project)
  • 20. FeedbackYour design might not be the best one.Designing is always iterative. You needcontinuous feedback before finalizing.For easy & simple feedback mechanism:
  • 21. Who are used to this?MicrosoftAppleGooglefacebookEtc.Don’t just believe whatever I say Check their mobile dev sites on your own!They share thousands of best practicesregarding this.
  • 22. Got something to ask?Wait! I don’t guarantee I know everything! So askon your own risk! 