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.
DjangoCon 2013 - Rapid prototyping and communicating with clients
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
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
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
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
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
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