• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Session On Mockups
 

Session On Mockups

on

  • 456 views

UI Mockup & Wireframing

UI Mockup & Wireframing

Statistics

Views

Total Views
456
Views on SlideShare
456
Embed Views
0

Actions

Likes
2
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Session On Mockups Session On Mockups Presentation Transcript

    • 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/Examples?Who are following this procedure?Enough talk! Now show me something practical…
    • PrototypingA solid start up for your software developmentproject.Clearer idea of your goals and motivations.Less development time & complexity.
    • Tools you should have ;)Paper & PencilYour computerFavorite music playing onA cup of coffee/teaA peaceful mind with a clear vision
    • 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?
    • 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.
    • Getting startedPaper & Pen/PencilList target usersList featuresFilter out all but the features for initial buildPlan the scenariosCreate wireframes in paperDevelop mockups and flows
    • 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.
    • 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/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)
    • 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? 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.
    • 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://invisionapp.com (Free for 1 project)
    • 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/
    • 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.
    • Got something to ask?Wait! I don’t guarantee I know everything! So askon your own risk! 