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.

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