Md. Abdul Munim Dibosh
What we will learn today?What’s this?What tools should I make ready before starting?Is it really important?Inspirations/Ex...
PrototypingA solid start up for your software developmentproject.Clearer idea of your goals and motivations.Less developme...
Tools you should have ;)Paper & PencilYour computerFavorite music playing onA cup of coffee/teaA peaceful mind with a clea...
Your software should beIntuitive :: don’t make me think!Fluid :: huh, it’s hanged!Pluggable :: whoa, I can’t update it?Sca...
Your software shouldn’tbeA box of irrelevant colors :: everything has a limit!Complex :: better you said me to solve that ...
Getting startedPaper & Pen/PencilList target usersList featuresFilter out all but the features for initial buildPlan the s...
Architectures &FrameworksFrameworks help you to maintain manageable codes.Decoupled development.Common patterns should be ...
Start prototypingBasic sketch of the ideaFlow/Sitemap planWire-framingMockup design
Confused?Basic sketch : Give your ideas pictorial meaning(Tools:Pen & Paper)Flow/Sitemap : Flow chart of linked screens/pa...
Inspirations/Case studies?http://www.f-i.com/nickelodeon/kids-choice-awards/http://www.f-i.com/google/ramayana/
Let’s do somethingTitle: PhotoShopConcept: Love to see photos from professionalphotographers? Want to buy some for purpose...
SitemapHome GalleryLet’s keep it simple for now…
Wireframes-1
Wireframes-2
Tools for final Mockuphttp://moqups.comPencil (http://pencil.evolus.vn/)
PhotoShop-Home
PhotoShop-Gallery
Interactive PrototypingPrototypes with event triggers.With commenting/annotations feature.Best for Professionals.http://in...
FeedbackYour design might not be the best one.Designing is always iterative. You needcontinuous feedback before finalizing...
Who are used to this?MicrosoftAppleGooglefacebookEtc.Don’t just believe whatever I say Check their mobile dev sites on yo...
Got something to ask?Wait! I don’t guarantee I know everything! So askon your own risk! 
Session On Mockups
Session On Mockups
Upcoming SlideShare
Loading in …5
×

Session On Mockups

686 views

Published on

UI Mockup & Wireframing

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
686
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Session On Mockups

  1. 1. Md. Abdul Munim Dibosh
  2. 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. 3. PrototypingA solid start up for your software developmentproject.Clearer idea of your goals and motivations.Less development time & complexity.
  4. 4. Tools you should have ;)Paper & PencilYour computerFavorite music playing onA cup of coffee/teaA peaceful mind with a clear vision
  5. 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. 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. 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. 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. 9. Start prototypingBasic sketch of the ideaFlow/Sitemap planWire-framingMockup design
  10. 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. 11. Inspirations/Case studies?http://www.f-i.com/nickelodeon/kids-choice-awards/http://www.f-i.com/google/ramayana/
  12. 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. 13. SitemapHome GalleryLet’s keep it simple for now…
  14. 14. Wireframes-1
  15. 15. Wireframes-2
  16. 16. Tools for final Mockuphttp://moqups.comPencil (http://pencil.evolus.vn/)
  17. 17. PhotoShop-Home
  18. 18. PhotoShop-Gallery
  19. 19. Interactive PrototypingPrototypes with event triggers.With commenting/annotations feature.Best for Professionals.http://invisionapp.com (Free for 1 project)
  20. 20. FeedbackYour design might not be the best one.Designing is always iterative. You needcontinuous feedback before finalizing.For easy & simple feedback mechanism:http://www.useapollo.com/
  21. 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. 22. Got something to ask?Wait! I don’t guarantee I know everything! So askon your own risk! 

×