RAPID PROTOTYPING
AND COMMUNICATING
WITH CLIENTS
KAT CHUANG, PH.D. 
TWITTER @KATYCHUANG
GITHUB @KATYCHUANG
EMAIL KATYCHUAN...
ABOUT ME
Talk given at DjangoCon2013 – 9/4/2013
2
Once upon a time…
http://pyladies.com
Talk given at DjangoCon2013 – 9/4/2013
3
NYC PYLADIES
http://pydata.org
Talk given at DjangoCon2013 – 9/4/2013
4
PYDATA
OUTLINE
1.  Communication problems
2.  Interaction Design
3.  Django Templates
4.  Abstracting the problem
5.  Demo
6.  Re...
Talk given at DjangoCon2013 – 9/4/2013
6
10 KINDS OF PEOPLE
COMMUNICATION PROBLEMS
Designs are difficult to describe
•  “I want big, colorful fonts.”
•  Single color or multi colors?...
A DESIGN AID
Talk given at DjangoCon2013 – 9/4/2013
8
IMPLEMENTATION
Talk given at DjangoCon2013 – 9/4/2013
9
INTERACTION DESIGN
1.  Wireframing (blueprints)
2.  Design pattern libraries
3.  Screen sizes and responsive design
Talk g...
WIREFRAMES = BLUEPRINTS
Talk given at DjangoCon2013 – 9/4/2013
11
EXPLAINING FUNCTIONS
Talk given at DjangoCon2013 – 9/4/2013
12
ADVANTAGE:
STRUCTURED CONVERSATION
Talk given at DjangoCon2013 – 9/4/2013
13
Patterns are optimal
solutions to common
problems.
Libraries:
http://ui-patterns.com/patterns
http://developer.yahoo.com/
...
RESPONSIVE DESIGN
•  “The practice of using fluid grids, flexible images, and media
queries to progressively enhance a web...
Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px
Talk given at DjangoCon2013 – 9/4/2013
16
SCREEN SIZES
Talk given at DjangoCon2013 – 9/4/2013
17
DATA INPUT
DJANGO TEMPLATES
Common template elements
Tips on structuring templates
DRY Principle: “Don’t repeat yourself”
Talk given ...
SPATIAL REPRESENTATION
Talk given at DjangoCon2013 – 9/4/2013
19
CONSISTENCY à USE INCLUDE
CODE
<div	
  class=”logo">	
  
<a	
  href="/”><img	
  src="{{STATIC_URL}}/
pydatalogo.png”	
  >...
TILING à USE LOOPS
CODE
{%	
  for	
  i	
  in	
  news	
  %}	
  
<div	
  class="news_item”>	
  
	
  	
  	
  	
  <a	
  href=...
ABSTRACT VIEW
Data Flow Diagrams (DFD)
Server-Client Architecture
The User Interface (UI)
Organizing templates
Talk given ...
DATA FLOW DIAGRAM
Talk given at DjangoCon2013 – 9/4/2013
23
SERVER-CLIENT ARCHITECTURE
Talk given at DjangoCon2013 – 9/4/2013
24
<Web framework goes here: python>
<User Interface: ht...
PATHS
Talk given at DjangoCon2013 – 9/4/2013
25
ORGANIZING
Project (settings and urls)
Apps
(individual
apps)
Models / Admin /
Urls / Utils
Templates
Structure Pages
Incl...
TEMPLATE SYSTEM IS A NESTED
HIERARCHY (DOM)
Page
Head
Stylesheets
Fonts
Header
Container
Banners
News Section
News Item
Ne...
DOCUMENT OBJECT MODEL
Talk given at DjangoCon2013 – 9/4/2013
28
This is what
the computer
understands.
PICTURE DICTIONARY
Talk given at DjangoCon2013 – 9/4/2013
29
No database; 1 html file with if/else logic
D3 MAP
Talk given at DjangoCon2013 – 9/4/2013
30
No database; 1 html file with if/else logic
MULTI PAGES
Talk given at DjangoCon2013 – 9/4/2013
31
Multiple pages (url based):
Home page | Multiple columns | Large Map
•  PyData.org Community Site
•  Convert image file to templates
About PyData:
PyData is a community for developers
and use...
Talk given at DjangoCon2013 – 9/4/2013
33
PYDATA
PREVIEW, PREVIEW, PREVIEW
Run a local version:
$	
  python	
  manage.py	
  
runserver	
  
View the site at:
http://localho...
RECAP
Idea != Execution
Blue print your ideas
Design pattern libraries
Spatial representations of code
Don’t repeat yourse...
THANK YOU.
KAT CHUANG, PH.D. 
TWITTER @KATYCHUANG
GITHUB @KATYCHUANG
EMAIL KATYCHUANG@GMAIL.COM
36
Talk given at DjangoCon...
Upcoming SlideShare
Loading in …5
×

DjangoCon 2013 - Rapid prototyping and communicating with clients

670
-1

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
670
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×