djangocon 2013 - rapid prototyping and communicating with clients
DESCRIPTION
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
![Page 1: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/1.jpg)
RAPID PROTOTYPING AND COMMUNICATING WITH CLIENTS KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL [email protected]
Talk given at DjangoCon2013 – 9/4/2013
1
![Page 2: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/2.jpg)
ABOUT ME
Talk given at DjangoCon2013 – 9/4/2013 2
Once upon a time…
![Page 3: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/3.jpg)
http://pyladies.com
Talk given at DjangoCon2013 – 9/4/2013 3
NYC PYLADIES
![Page 4: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/4.jpg)
http://pydata.org
Talk given at DjangoCon2013 – 9/4/2013 4
PYDATA
![Page 5: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/5.jpg)
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
![Page 6: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/6.jpg)
Talk given at DjangoCon2013 – 9/4/2013 6
10 KINDS OF PEOPLE
![Page 7: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/7.jpg)
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
![Page 8: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/8.jpg)
A DESIGN AID
Talk given at DjangoCon2013 – 9/4/2013 8
![Page 9: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/9.jpg)
IMPLEMENTATION
Talk given at DjangoCon2013 – 9/4/2013 9
![Page 10: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/10.jpg)
INTERACTION DESIGN 1. Wireframing (blueprints)
2. Design pattern libraries
3. Screen sizes and responsive design
Talk given at DjangoCon2013 – 9/4/2013 10
![Page 11: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/11.jpg)
WIREFRAMES = BLUEPRINTS
Talk given at DjangoCon2013 – 9/4/2013 11
![Page 12: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/12.jpg)
EXPLAINING FUNCTIONS
Talk given at DjangoCon2013 – 9/4/2013 12
![Page 13: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/13.jpg)
ADVANTAGE: STRUCTURED CONVERSATION
Talk given at DjangoCon2013 – 9/4/2013 13
![Page 14: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/14.jpg)
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
![Page 15: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/15.jpg)
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
![Page 16: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/16.jpg)
Smartphone 320px Tablet 768px Netbook 1024px Desktop 1600px
Talk given at DjangoCon2013 – 9/4/2013 16
SCREEN SIZES
![Page 17: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/17.jpg)
Talk given at DjangoCon2013 – 9/4/2013 17
DATA INPUT
![Page 18: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/18.jpg)
DJANGO TEMPLATES Common template elements
Tips on structuring templates
DRY Principle: “Don’t repeat yourself”
Talk given at DjangoCon2013 – 9/4/2013 18
![Page 19: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/19.jpg)
SPATIAL REPRESENTATION
Talk given at DjangoCon2013 – 9/4/2013 19
![Page 20: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/20.jpg)
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 %}
![Page 21: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/21.jpg)
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
![Page 22: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/22.jpg)
ABSTRACT VIEW Data Flow Diagrams (DFD)
Server-Client Architecture
The User Interface (UI)
Organizing templates
Talk given at DjangoCon2013 – 9/4/2013 22
![Page 23: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/23.jpg)
DATA FLOW DIAGRAM
Talk given at DjangoCon2013 – 9/4/2013 23
![Page 24: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/24.jpg)
SERVER-CLIENT ARCHITECTURE
Talk given at DjangoCon2013 – 9/4/2013 24
<Web framework goes here: python>
<User Interface: html/css/javascript>
<Database Queries>
![Page 25: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/25.jpg)
PATHS
Talk given at DjangoCon2013 – 9/4/2013 25
![Page 26: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/26.jpg)
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
![Page 27: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/27.jpg)
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
![Page 28: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/28.jpg)
DOCUMENT OBJECT MODEL
Talk given at DjangoCon2013 – 9/4/2013 28
This is what the computer understands.
![Page 29: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/29.jpg)
PICTURE DICTIONARY
Talk given at DjangoCon2013 – 9/4/2013 29
No database; 1 html file with if/else logic
![Page 30: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/30.jpg)
D3 MAP
Talk given at DjangoCon2013 – 9/4/2013 30
No database; 1 html file with if/else logic
![Page 31: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/31.jpg)
MULTI PAGES
Talk given at DjangoCon2013 – 9/4/2013 31
Multiple pages (url based):
Home page | Multiple columns | Large Map
![Page 32: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/32.jpg)
• 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
![Page 33: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/33.jpg)
Talk given at DjangoCon2013 – 9/4/2013 33
PYDATA
![Page 34: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/34.jpg)
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
![Page 35: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/35.jpg)
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
![Page 36: DjangoCon 2013 - Rapid prototyping and communicating with clients](https://reader036.vdocuments.site/reader036/viewer/2022081907/54c684e84a7959481f8b456b/html5/thumbnails/36.jpg)
THANK YOU.
KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL [email protected]
36
Talk given at DjangoCon2013 – 9/4/2013