Attending 2 conferences in 1 week is plenty, let alone speaking at both, and on different topics. Phew.
At 360|Flex I spoke on Logical Design for Developers – Design isn’t a 4 letter word, and At the Adobe Camp in Columbia MO, it was on Flash Catalyst. I have my slides up online of course, but also had some links I wanted to share with people who attended the sessions.
Flash Catalyst: http://portal.sliderocket.com/AKEGI/RealWorld_FC
and the Design for Developers one is here: http://portal.sliderocket.com/AKEGI/Logical-Design-for-developers
So below are some random notes I took while creating the slides, and the slides themselves are here –
Why design? Something that isn’t logical -at – all; empathy. Designers try and put themselves in the shoes of the user. Trying to understand how they think, how they navigate a site or an application for instance, thus the UX designer. Which is why we’ll be talking about the logistics of design, the rules, but this is an important fact we need to keep in mind.
Avoid graphical applications, except ones you are already familiar with. On twitter I see tons of devs curse Photoshop. I almost never hear them talking about Fireworks however. I know more devs who use that than anything else, which is why we’ll be using it for the majority of what we do today. If you can design with code, do so. There is nothing wrong without that, just remember some of the rules we’ll talk about here.
Play it safe. Follow the logic of design, make it usable
5 major areas
Typography
Color
Imagery
grids
whitespace
Design is just a process with rules, patterns and conventions
Acronyms – UI – UX
UI is what the user sees and controls,
UX is what the user feels (wait times, steps in a process, shifts in attention
It is important to understand the audience, who will consume the data. What do they expect?
If you aren’t sure which to pick, maybe white. grey and a color, or black and a color.
Great icons are a must – tons out there. bitbox, dryicons.com etc.
Selecting imagery can be tricky but here are a few suggestions that will point you in the right direction…
• Avoid animation.
• Choose images with a strong foreground element.
• Compress your imagery but not too much!
• Use faces, people are naturally drawn to them.
• Avoid clipart illustrations
eyedropper for color — keep colors minimal — an all grey web page/ application can be interesting if a splash of color is thrown in.
http://960.gs/
We know when something is attractive, it is the Why we don’t always understand
Google vs Yahoo or MSN
Create an inspiration folder, just like you probably do for devs you admire
Rules for what not to do, and what to do — line height! Let your users read your text.
If we were talking we, I’d tell you 1.4 – 2.0 ems depending on your text hight of course.
Rules of thumb. column width – 2 alphabets wide
2 – 3 TOPS for type faces on a page/application/site
San serif looks better on the web for any body copy, Georgia works great as a header
http://www.otokomusic.com/web/main.html — why people hate flash sites. Good looking enough, but a very short loop guitar lick and just repeats. Obviously they want you to turn it off. I get the idea, I am at a music site. The grunge type for the navigate just doesn’t make sense. Neither does all the tape, and the fact it is a notebook, which makes me believe it was a bought Flash site.
Type faces:
Legibility
Generous spacing
Readability
Aesthetics
Mood
Personal Choice (You just like it)
Plan your hierarchy
What have others done? http://fontsinuse.com/
Avoid Anachronisms
Avoid trite correlations
• Don’t use Papyrus just because your topic is “ancient” in some way, especially if it’s about Ancient Egypt. (Better yet, don’t use Papyrus at all)
• Don’t use Comic Sans just because your topic is humorous. (Better yet, don’t use Comic Sans at all)
• Don’t use Lithos just because your topic is about Greek restaurants.
• Don’t use Futura just because your topic deals with “the future”.
Stick with the classics
Golden Ratio
Fibonacci number
A Fibonacci spiral created by drawing arcs connecting the opposite corners of squares in the Fibonacci tiling; this one uses squares of sizes 1, 1, 2, 3, 5, 8, 13, 21, and 34; see Golden spiral
The ratio of 3:5 (or 5:3) is special to professional designers. This ratio is known as the Golden Proportion
http://goldenratiocalculator.com/
http://mobile-patterns.com/
http://www.paul-rand.com/
More links
http://webdesignledger.com/resources/8-cheat-sheet-wallpapers-for-designers-and-developers
http://www.artofthetitle.com/2011/03/14/a-brief-history-of-title-design/
http://blog.echoenduring.com/2011/03/16/usability-and-css3-columns/
Geeky design sites
http://www.logodesignlove.com/
http://www.designmeltdown.com
http://www.mobileawesomeness.com
http://patterntap.com
http://quince.infragistics.com
http://www.designupdate.com
http://www.paper-leaf.com/blog/2010/01/color-theory-quick-reference-poster/
http://webdesignledger.com/tips/getting-started-in-ios-user-interface-designhttp://www.underconsideration.com/brandnew/
http://speckyboy.com/2010/10/27/30-fresh-web-ui-mobile-ui-and-wireframe-kits/
http://www.emazekraker.biz/projects/webWireframeKit/
designingfortheweb.co.uk/book/index.php
Color theory is a lot like math – harmony, complementary (blue and orange), monochromatic, tetrad,
Additive, subtractive primaries, split complementary
colorlovers.com
kuler.adobe.com
Hope that helps someone.
Dee
