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
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