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

282

Published on

UI Mockup & Wireframing

UI Mockup & Wireframing

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

No Downloads
Views
Total Views
282
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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?http://www.f-i.com/nickelodeon/kids-choice-awards/http://www.f-i.com/google/ramayana/
  • 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 (http://pencil.evolus.vn/)
  • 17. PhotoShop-Home
  • 18. PhotoShop-Gallery
  • 19. Interactive PrototypingPrototypes with event triggers.With commenting/annotations feature.Best for Professionals.http://invisionapp.com (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:http://www.useapollo.com/
  • 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! 

×