Md. Abdul Munim Dibosh
What we will learn today? What’s this? What tools should I make ready before starting? Is it really important? Inspiration...
Prototyping A solid start up for your software development project. Clearer idea of your goals and motivations. Less devel...
Tools you should have ;) Paper & Pencil Your computer Favorite music playing on A cup of coffee/tea A peaceful mind with a...
Your software should be Intuitive :: don’t make me think! Fluid :: huh, it’s hanged! Pluggable :: whoa, I can’t update it?...
Your software shouldn’tbe A box of irrelevant colors :: everything has a limit! Complex :: better you said me to solve tha...
Getting started Paper & Pen/Pencil List target users List features Filter out all but the features for initial build Plan ...
Architectures &Frameworks Frameworks help you to maintain manageable codes. Decoupled development. Common patterns should ...
Start prototyping Basic sketch of the idea Flow/Sitemap plan Wire-framing Mockup design
Confused? Basic sketch : Give your ideas pictorial meaning(Tools: Pen & Paper) Flow/Sitemap : Flow chart of linked screens...
Inspirations/Case studies? http://www.f-i.com/nickelodeon/kids-choice- awards/ http://www.f-i.com/google/ramayana/
Let’s do something Title: PhotoShop Concept: Love to see photos from professional photographers? Want to buy some for purp...
Sitemap      Home                     Gallery          Let’s keep it simple for now…
Wireframes-1
Wireframes-2
Tools for final Mockup http://moqups.com Pencil (http://pencil.evolus.vn/)
PhotoShop-Home
PhotoShop-Gallery
Interactive Prototyping Prototypes with event triggers. With commenting/annotations feature. Best for Professionals. http:...
FeedbackYour design might not be the best one.Designing is always iterative. You needcontinuous feedback before finalizing...
Who are used to this?  Microsoft  Apple          Don’t just believe whatever I say               Check their mobile dev s...
Got something to ask?Wait! I don’t guarantee I know everything! So ask                on your own risk! 
Session on mockups
Session on mockups
Upcoming SlideShare
Loading in...5
×

Session on mockups

524

Published on

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
524
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
3
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. Prototyping A solid start up for your software development project. Clearer idea of your goals and motivations. Less development time & complexity.
  4. 4. Tools you should have ;) Paper & Pencil Your computer Favorite music playing on A cup of coffee/tea A peaceful mind with a clear vision
  5. 5. Your software should be Intuitive :: 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 handle this load? Modern :: Duh, didn’t you hear about the technology they used?
  6. 6. Your software shouldn’tbe A 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’t have any doors! Unmanageable :: humm, I think you can’t even understand your code.
  7. 7. Getting started Paper & Pen/Pencil List target users List features Filter out all but the features for initial build Plan the scenarios Create wireframes in paper Develop mockups and flows
  8. 8. Architectures &Frameworks Frameworks 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 prototyping Basic sketch of the idea Flow/Sitemap plan Wire-framing Mockup 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 initial sketch, label specific parts, make more understandable(Tools: Pen & Paper/Software) Mockups : More detailed, actually the look that will be developed 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 something Title: PhotoShop Concept: Love to see photos from professional photographers? Want to buy some for purpose? Then don’t forget to check PhotoShop. Target users: Developers, Teachers, Doctors etc. Main features: Submit/Buy photos Can be a huge thing to complete, let’s focus on first 2 pages.
  13. 13. Sitemap Home Gallery Let’s keep it simple for now…
  14. 14. Wireframes-1
  15. 15. Wireframes-2
  16. 16. Tools for final Mockup http://moqups.com Pencil (http://pencil.evolus.vn/)
  17. 17. PhotoShop-Home
  18. 18. PhotoShop-Gallery
  19. 19. Interactive Prototyping Prototypes 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? Microsoft Apple Don’t just believe whatever I say  Check their mobile dev sites on your own! Google They share thousands of best practices regarding this. facebook Etc.
  22. 22. Got something to ask?Wait! I don’t guarantee I know everything! So ask on your own risk! 
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×