4. What do I do?
Co-founder silverorange, creative dir. Digg, co-founder Pownce, dir. of design Tiny Speck
5.
6.
7.
8.
9.
10.
11.
12.
13. What’s a web designer?
UX, IA, Interaction designer, Creative Dir, Prod. manager, Designer, Webmaster
14. What do you do?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
15. What do you do?
Designer, developer, product, entrepreneur, something else?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
16. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
17. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Big, medium, little, lone gun?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
18. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Big, medium, little, lone gun?
Love it, like it, hate it, or meh?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
19. Ground rules
Ask questions anytime... yell out if I don’t see your hand
It’s more important to elaborate than to cover everything
@reply me @dburka with things to cover if you’re not an out loud person
22. A. Get the basics out of the way
1. Starting simple, staying simple
23. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
24. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
25. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
4. Simple code: PHP+CSS and CSS3 today
26. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
4. Simple code: PHP+CSS and CSS3 today
What else do you want to discuss?
27. 1. Starting simple, staying simple.
2. Techniques for masking complexity.
3. Easing people into complex systems
4. Writing simpler CSS with basic logic.
Credit: Flickr user ‘Swamibu’
37. “What’s the right approach to new
products? Pick three key attributes
or features, get those things very,
very right, and then forget about
everything else. Those
three attributes define the
fundamental
Paul Buchheit
essence and Creator, Gmail
value of the Co-founder, Friendfeed
product — the rest is noise.”
Credit: Flickr user ‘Thomas Hawk’
http://paulbuchheit.blogspot.com/2010/02/if-your-product-is-great-it-doesnt-need.html
38.
39. Pave the cowpaths
Start simple, watch how people actually use your app
Don’t even try to predict everything
Credit: Phil Gyford
40. Point Reyes Station, California, April 2009
Not a failure... a perfect opportunity
41. Point Reyes Station, California, April 2009
Not a failure... a perfect opportunity
42. Point Reyes Station, California, April 2009
Not a failure... a perfect opportunity
43. Point Reyes Station, California, April 2009
Not a failure... a perfect opportunity
44.
45.
46.
47.
48. Focus on THE thing
Why are people REALLY on your site or this page?
Credit: Flickr user ‘ihtatho’
74. Hide what you can’t remove
Contextual links and secondary content are candidates
Credit: Flickr user ‘aftab’
75.
76.
77.
78.
79.
80.
81.
82.
83. The MEGA dropdown
Bigger is better in this instance
Credit: Flickr user ‘ /mrpunto’
84.
85.
86.
87.
88.
89.
90.
91.
92.
93. Give options in sequence
Only an option for logical sequences – handy sometimes
Credit: Flickr user ‘ r o s e n d a h l’
94.
95.
96.
97.
98.
99.
100.
101.
102. Strongly consider flow
You don’t need eye-tracking software to remove impediments
Credit: Flickr user ‘Mister V’
103. by dburka 20 minutes ago
Of course, what McCain is trying to avoid anyone noticing is that the problem isn't regulators failing to do
their job; it's that that man he tapped to write his economic policy - Phil Gramm - removed oversight of the
instruments that are laying waste to the finance sector from the regulators' job descriptions.
Reply to this comment
by marktrammell 16 minutes ago
We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out the
finance sector. You would think they would have brought in someone with substance when Phil hit the road.
5 Replies to this comment
by dburka 14 minutes ago
We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out the
finance sector. You would think they would have brought in someone with substance when Phil hit the road.
5 Replies to this comment
by kurtwilms 12 minutes ago
We all know McCain is incompetent when it comes to the economy, and that Phil Gramm sold out
the finance sector. You would think they would have brought in someone with substance when
Phil hit the road.
123. Date a little bit before committing
Credit: Flickr user ‘Ben Haisch’
124. Date a little bit before committing
Get your users invested before you propose
Credit: Flickr user ‘Ben Haisch’
125.
126.
127.
128.
129.
130.
131.
132.
133.
134. What kind of commitment are you looking for?
Credit: Flickr user ‘Voxphoto’
135. What kind of commitment are you looking for?
Maybe you don’t need to go all the way on your first date.
Credit: Flickr user ‘Voxphoto’
136. What kind of commitment are you looking for?
Maybe you don’t need to go all the way on your first date.
Simplify sign-up by having less of it!
Credit: Flickr user ‘Voxphoto’
154. 1. Starting simple, staying simple.
2. Techniques for masking complexity.
3. Easing people into complex systems.
4. Writing simpler CSS with basic logic.
Credit: Flickr user ‘Swamibu’
155. PHP + CSS = True love
Credit: Flickr user ‘Buttersweet’
156. PHP + CSS = True love
(Almost) everything you’ve always wanted to do with CSS
Credit: Flickr user ‘Buttersweet’
157. How is this simpler?
Set base variables for colors, widths, fonts, etc.
Write complex properties once and repeat
Use basic arithmetic
Logically separate files yet one http request
In short, avoid creating a mess
158.
159. Getting started 1 of 2
First task is to turn your css files into php files
<?php
header("Content-type: text/css");
?>
body {
background: #efefef;
color: #333;
}
.content {
border: 1px solid #6f6f6f;
padding: 15px;
width 900px;
padding: 30px;
color: #333;
margin: 0 auto;
}
160. Getting started 2 of 2
Link to your new php stylesheet
<?php ?>
<!DOCTYPE html>
<html lang="eng">
<head>
! <meta charset="utf-8">
! <title>Test</title>
! <meta name="description" content="" />
! <meta name="keywords" content="" />
! <link rel="stylesheet" type="text/css" media="all" href="base-css.php">
</head>
<body>
! <div class="content">
! ! I'm going to type stuff into here.
! </div>
</body>
</html>
<?php ?>
172. One file to rule them all...
Consolidate in any order in a central file.
<?php
header("Content-type: text/css");
include 'base-css.php';
include 'text-css.php';
include 'template-css.php';
?>
180. RGBA
Alpha != opacity
Lack of IE and Firefox 2 support means it needs backup
But... backup is pretty easy!
Especially great for prototyping and lightening the load
div.section {
background: rgba(255,255,255,0.3);
}
181.
182. RGBA
Keep it simple, one png and one rgba background
div.section {
background: url(/img/light.png);
background: rgba(255,255,255,0.3);
}
Or just go solid... (not quite as good, imo)
div.section {
background: rgb(180,180,180);
background: rgba(255,255,255,0.3);
}
189. What do I do?
Co-founder silverorange, creative dir. Digg, co-founder Pownce, dir. of design Tiny Speck
190.
191.
192.
193.
194.
195.
196.
197.
198. What’s a web designer?
UX, IA, Interaction designer, Creative Dir, Prod. manager, Designer, Webmaster
199. What do you do?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
200. What do you do?
Designer, developer, product, entrepreneur, something else?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
201. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
202. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Big, medium, little, lone gun?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
203. What do you do?
Designer, developer, product, entrepreneur, something else?
In-house or freelance?
Big, medium, little, lone gun?
Love it, like it, hate it, or meh?
Credit: “The 56 Geeks” by Scott Johnson, myextralife.com
204. Ground rules
Ask questions anytime... yell out if I don’t see your hand
It’s more important to elaborate than to cover everything
@reply me @dburka with things to cover if you’re not an out loud person
207. A. Get the basics out of the way
1. Starting simple, staying simple
208. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
209. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
210. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
4. Simple code: PHP+CSS and CSS3 today
211. A. Get the basics out of the way
1. Starting simple, staying simple
2. Techniques for masking complexity
3. Easing people into complex systems
4. Simple code: PHP+CSS and CSS3 today
What else do you want to discuss?