1 / 37

Design techniques

Design techniques. Design Techniques. Sketching Scenarios Stroyboards. Sketching Designs. Draw your ideas By hand, not by drawing program Paper or whiteboard Generate many ideas Design in a group. Examples of Design Sketches. Examples of Design Sketches. Examples of Design Sketches.

ottj
Download Presentation

Design techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Design techniques

  2. Design Techniques • Sketching • Scenarios • Stroyboards

  3. Sketching Designs • Draw your ideas • By hand, not by drawing program • Paper or whiteboard • Generate many ideas • Design in a group

  4. Examples of Design Sketches

  5. Examples of Design Sketches

  6. Examples of Design Sketches

  7. Scenarios • Scenarios is a story about a user using the system • Concrete and realistic • Involves a user with a goal • Follows how the user achieves the goal

  8. Scenarios … • What will users want to do? • Step-by-step walkthrough • What can they see (sketches, screen shots) • What do they do (keyboard, mouse etc.) • What are they thinking? • Use and reuse throughout design

  9. Scenario

  10. Storyboards • Sequence of sketches illustrating a scenario • First prototype of a design • Shows how the design can actually be used to satisfy a goal

  11. Example-Story Board

  12. Example-Story Board

  13. screen design and layout

  14. Basic principles • Ask • What is the user doing? • Think • What information, comparisons, order • Design • Form follows function

  15. Available tools • Grouping of items • Order of items • Decoration - fonts, boxes etc. • Alignment of items • white space between items

  16. Billing details: Name Address: … Credit card no Delivery details: Name Address: … Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 3.71 25.97 …… … … … Grouping and structure logically together  physically together

  17. Order of groups and items • think! - what is natural order • should match screen order! • use boxes, space etc. • set up tabbing right! • instructions • beware the cake recipie syndrome!… mix milk and flour, add the fruit after beating them

  18. ABCDEFGHIJKLM NOPQRSTUVWXYZ Decoration • use boxes to group logical items • use fonts for emphasis, headings • but not too many!!

  19. Alignment - text • you read from left to right (English and European)  align left hand side boring but readable! Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan

  20. Alignment - names • Usually scanning for surnames  make it easy!   Jayaraman , Umarani V, Masilamani Mahammad, Noor N, Sadagopan B, Sivaselvan Umarani Jayaraman Masilamani V Noor Mahammad Sadagopan N Sivaselvan B  Umarani Jayaraman Masilamani V Noor Mahammad Sadagopan N Sivaselvan B

  21. Alignment - numbers think purpose! which is biggest? 532.56179.3256.3171573.94810353.142497.6256

  22. Alignment - numbers visually: long number = big number align decimal points or right align integers 627.865 1.005763 382.583 2502.56 432.935 2.0175 652.87 56.34

  23. Multiple columns • scanning across gaps hard:(often hard to avoid with large data base fields) sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

  24. sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85 multiple columns - 2 • use leaders

  25. Multiple columns - 3 • or greying (vertical too) sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

  26. Multiple columns - 4 • or even (with care!) ‘bad’ alignment sherbert 75 toffee 120 chocolate 35 fruit gums 27 coconut dreams 85

  27. white space - the counter WHAT YOU SEE

  28. THE GAPS BETWEEN white space - the counter WHAT YOU SEE

  29. space to separate

  30. space to structure

  31. space to highlight

  32. defrost settings type of food time to cook Physical controls • grouping of items • defrost settings • type of food • time to cook

  33. 1) type of heating 1 2) temperature 3) time to cook 2 4) start 3 4 Physical controls • grouping of items • order of items • type of heating • temperature • time to cook • start

  34. different colours for different functions lines around related buttons (temp up/down) Physical controls • grouping of items • order of items • decoration • different coloursfor different functions • lines around relatedbuttons

  35. centred text in buttons Physical controls • grouping of items • order of items • decoration • alignment • centered text in buttons? easy to scan ? ? easy to scan ?

  36. gaps to aid grouping Physical controls • grouping of items • order of items • decoration • alignment • white space • gaps to aid grouping

More Related