DjangoCon 2013 - Rapid prototyping and communicating with clients

This talk will focus on the conversations around rapid prototyping. Miscommunication between developers and clients can occur because of different perspectives and work styles. In this talk I'll introduce interaction design concepts and templating with Django to show how easy it is to set up a minimally viable UI and explain the value in letting users feel that they have creative control.

Transcript

1. RAPID PROTOTYPING AND COMMUNICATING WITH CLIENTS KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL KATYCHUANG@GMAIL.COM Talk given at DjangoCon2013 – 9/4/2013 1
2. ABOUT ME Talk given at DjangoCon2013 – 9/4/2013 2 Once upon a time…
3. http://pyladies.com Talk given at DjangoCon2013 – 9/4/2013 3 NYC PYLADIES
4. http://pydata.org Talk given at DjangoCon2013 – 9/4/2013 4 PYDATA
5. OUTLINE 1.  Communication problems 2.  Interaction Design 3.  Django Templates 4.  Abstracting the problem 5.  Demo 6.  Recap Talk given at DjangoCon2013 – 9/4/2013 5
6. Talk given at DjangoCon2013 – 9/4/2013 6 10 KINDS OF PEOPLE
7. COMMUNICATION PROBLEMS Designs are difficult to describe •  “I want big, colorful fonts.” •  Single color or multi colors? • 32pt or 40pt ? • Sans serif or Serif? •  “When you click here, this should appear.” The client may want to see something in production before making a final decision. Talk given at DjangoCon2013 – 9/4/2013 7
8. A DESIGN AID Talk given at DjangoCon2013 – 9/4/2013 8
9. IMPLEMENTATION Talk given at DjangoCon2013 – 9/4/2013 9
10. INTERACTION DESIGN 1.  Wireframing (blueprints) 2.  Design pattern libraries 3.  Screen sizes and responsive design Talk given at DjangoCon2013 – 9/4/2013 10
11. WIREFRAMES = BLUEPRINTS Talk given at DjangoCon2013 – 9/4/2013 11
12. EXPLAINING FUNCTIONS Talk given at DjangoCon2013 – 9/4/2013 12
13. ADVANTAGE: STRUCTURED CONVERSATION Talk given at DjangoCon2013 – 9/4/2013 13
14. Patterns are optimal solutions to common problems. Libraries: http://ui-patterns.com/patterns http://developer.yahoo.com/ ypatterns/ http://www.welie.com/ patterns/ Talk given at DjangoCon2013 – 9/4/2013 14 DESIGN PATTERNS
15. RESPONSIVE DESIGN •  “The practice of using fluid grids, flexible images, and media queries to progressively enhance a web page for different viewing contexts.” - http://mediaqueri.es/about/ Talk given at DjangoCon2013 – 9/4/2013 15
16. Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px Talk given at DjangoCon2013 – 9/4/2013 16 SCREEN SIZES
17. Talk given at DjangoCon2013 – 9/4/2013 17 DATA INPUT
18. DJANGO TEMPLATES Common template elements Tips on structuring templates DRY Principle: “Don’t repeat yourself” Talk given at DjangoCon2013 – 9/4/2013 18
19. SPATIAL REPRESENTATION Talk given at DjangoCon2013 – 9/4/2013 19
20. CONSISTENCY à USE INCLUDE CODE <div  class=”logo">   <a  href="/”><img  src="{{STATIC_URL}}/ pydatalogo.png”  ></a></div>   {%  if  user.is_authenticated  %}   <a  class="btn"  href="/logout”>Log  Out</a>         You  are  logged  in  as  <em><a  href="/ profile">{{  user.username  }}</a></em>   {%  else  %}   <a  class="btn"  href="/login”>Log  In</a>   New  to  PyData?  <a  href="/ register">Register</a>   {%  endif  %}   <div  class="menu">          {%  include  navmenu  %}   </div>   EVERY PAGE Talk given at DjangoCon2013 – 9/4/2013 20 {%  include  header  %}  
21. TILING à USE LOOPS CODE {%  for  i  in  news  %}   <div  class="news_item”>          <a  href="/{{  i.conf  }}/ {{  i.id  }}">          [{{  i.conf  }}]  {{  i.title  }}          </a>   <div  class="pub_date”>          {{  i.date|date:'M  d,  Y'  }}   </div>   {{  i.content|striptags|truncatechars: 180  }}   </div>   {%  endfor  %}     LIST OF ARTICLES Talk given at DjangoCon2013 – 9/4/2013 21
22. ABSTRACT VIEW Data Flow Diagrams (DFD) Server-Client Architecture The User Interface (UI) Organizing templates Talk given at DjangoCon2013 – 9/4/2013 22
23. DATA FLOW DIAGRAM Talk given at DjangoCon2013 – 9/4/2013 23
24. SERVER-CLIENT ARCHITECTURE Talk given at DjangoCon2013 – 9/4/2013 24 <Web framework goes here: python> <User Interface: html/css/javascript> <Database Queries>
25. PATHS Talk given at DjangoCon2013 – 9/4/2013 25
26. ORGANIZING Project (settings and urls) Apps (individual apps) Models / Admin / Urls / Utils Templates Structure Pages Includes snippets Static JS, CSS, Image files Talk given at DjangoCon2013 – 9/4/2013 26
27. TEMPLATE SYSTEM IS A NESTED HIERARCHY (DOM) Page Head Stylesheets Fonts Header Container Banners News Section News Item News Item … Footer Javascripts Analytics Talk given at DjangoCon2013 – 9/4/2013 27
28. DOCUMENT OBJECT MODEL Talk given at DjangoCon2013 – 9/4/2013 28 This is what the computer understands.
29. PICTURE DICTIONARY Talk given at DjangoCon2013 – 9/4/2013 29 No database; 1 html file with if/else logic
30. D3 MAP Talk given at DjangoCon2013 – 9/4/2013 30 No database; 1 html file with if/else logic
31. MULTI PAGES Talk given at DjangoCon2013 – 9/4/2013 31 Multiple pages (url based): Home page | Multiple columns | Large Map
32. •  PyData.org Community Site •  Convert image file to templates About PyData: PyData is a community for developers and users of Python data tools. You can join at pydata.org Talk given at DjangoCon2013 – 9/4/2013 32 EXAMPLE
33. Talk given at DjangoCon2013 – 9/4/2013 33 PYDATA
34. PREVIEW, PREVIEW, PREVIEW Run a local version: $  python  manage.py   runserver   View the site at: http://localhost:8000   Talk given at DjangoCon2013 – 9/4/2013 34
35. RECAP Idea != Execution Blue print your ideas Design pattern libraries Spatial representations of code Don’t repeat yourself Talk given at DjangoCon2013 – 9/4/2013 35
36. THANK YOU. KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL KATYCHUANG@GMAIL.COM 36 Talk given at DjangoCon2013 – 9/4/2013