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
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. Recap
Talk given at DjangoCon2013 – 9/4/2013 5
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?
• 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
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 given at DjangoCon2013 – 9/4/2013 10
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/ypatterns/
http://www.welie.com/patterns/
Talk given at DjangoCon2013 – 9/4/2013 14
DESIGN PATTERNS
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
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 at DjangoCon2013 – 9/4/2013 18
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” ></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 %}
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
ABSTRACT VIEW Data Flow Diagrams (DFD)
Server-Client Architecture
The User Interface (UI)
Organizing templates
Talk given at DjangoCon2013 – 9/4/2013 22
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: html/css/javascript>
<Database Queries>
PATHS
Talk given at DjangoCon2013 – 9/4/2013 25
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
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
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 users of Python data tools. You can join at pydata.org
Talk given at DjangoCon2013 – 9/4/2013
32
EXAMPLE
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://localhost:8000
Talk given at DjangoCon2013 – 9/4/2013 34
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
THANK YOU.
KAT CHUANG, PH.D. TWITTER @KATYCHUANG GITHUB @KATYCHUANG EMAIL [email protected]
36
Talk given at DjangoCon2013 – 9/4/2013
