Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 36

DjangoCon 2013 - Rapid prototyping and communicating with clients

4

Share

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

DjangoCon 2013 - Rapid prototyping and communicating with clients

  1. 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. 2. ABOUT ME Talk given at DjangoCon2013 – 9/4/2013 2 Once upon a time…
  3. 3. http://pyladies.com Talk given at DjangoCon2013 – 9/4/2013 3 NYC PYLADIES
  4. 4. http://pydata.org Talk given at DjangoCon2013 – 9/4/2013 4 PYDATA
  5. 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. 6. Talk given at DjangoCon2013 – 9/4/2013 6 10 KINDS OF PEOPLE
  7. 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. 8. A DESIGN AID Talk given at DjangoCon2013 – 9/4/2013 8
  9. 9. IMPLEMENTATION Talk given at DjangoCon2013 – 9/4/2013 9
  10. 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. 11. WIREFRAMES = BLUEPRINTS Talk given at DjangoCon2013 – 9/4/2013 11
  12. 12. EXPLAINING FUNCTIONS Talk given at DjangoCon2013 – 9/4/2013 12
  13. 13. ADVANTAGE: STRUCTURED CONVERSATION Talk given at DjangoCon2013 – 9/4/2013 13
  14. 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. 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. 16. Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px Talk given at DjangoCon2013 – 9/4/2013 16 SCREEN SIZES
  17. 17. Talk given at DjangoCon2013 – 9/4/2013 17 DATA INPUT
  18. 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. 19. SPATIAL REPRESENTATION Talk given at DjangoCon2013 – 9/4/2013 19
  20. 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. 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. 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. 23. DATA FLOW DIAGRAM Talk given at DjangoCon2013 – 9/4/2013 23
  24. 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. 25. PATHS Talk given at DjangoCon2013 – 9/4/2013 25
  26. 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. 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. 28. DOCUMENT OBJECT MODEL Talk given at DjangoCon2013 – 9/4/2013 28 This is what the computer understands.
  29. 29. PICTURE DICTIONARY Talk given at DjangoCon2013 – 9/4/2013 29 No database; 1 html file with if/else logic
  30. 30. D3 MAP Talk given at DjangoCon2013 – 9/4/2013 30 No database; 1 html file with if/else logic
  31. 31. MULTI PAGES Talk given at DjangoCon2013 – 9/4/2013 31 Multiple pages (url based): Home page | Multiple columns | Large Map
  32. 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. 33. Talk given at DjangoCon2013 – 9/4/2013 33 PYDATA
  34. 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. 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. 36. THANK YOU. KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL KATYCHUANG@GMAIL.COM 36 Talk given at DjangoCon2013 – 9/4/2013

×