360|Flex and MO Adobe Camp aftermath

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s