Developer/Designer work flow

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

Year 2 for D2W conference

I put on my first conference this year. It almost didn’t happen. I had a lot of people against me, although not sure why. Aren’t you suppose to be happy for and support your friends? It was also people like Hallmark, and Garmin who didn’t want to send their people to a first year conference. Their loss, for sure. I could still almost cry remembering how amazing the content was for the conference. I have a lot of amazing friends, but the combination of designer and developer at the conference was incredible. I beam every time I see the speakers talking to each other on twitter. Designers and developers talking… who knew I’d be so emotional at that. Every session seemed to compliment each other. The attendees were in rapt attention and followed the speakers out of the room. Have rarely seen that at conferences.

So we are doing it again this year. We had 3 tracks this year, designer, developer and hybrid. Instead of hybrid for D2W v2, we’ll be changing it to mobile. I work for Sprint now, so it seemed only fitting to add mobile to the line up. It is still about workflow, and that will continue to be the unifying factor for the entire conference. Doug Winnie, James Polanco and Aaron Pedersen wrote a book about workflow called Adobe Flash Platform from Start to Finish. Doug and I had been of the same mind about workflow when I first met him at a Community Summit. Then I introduced myself to him again at Adobe MAX 3 years ago. Luckily Scott Fegette was there to solidify I wasn’t a stalker, and Doug and I became friends. Now the 4 of us put on D2WPodcast together and they all spoke at the first D2W with Doug as the keynote speaker. It certainly wasn’t a coincidence Doug was the keynote speaker with workflow being his passion.

This year we already have a great lineup of speakers. As today is the last day for submissions, I expect things to change a bit but here is a sampling. Returning speakers: Doug Winnie, James Polanco, Aaron Pedersen, JP Revel,  Andy Matthews, Paul Trani, Vince Vaughan (no not the actor), Tom Green,  Chad Udell, Ben Stucki, Chris Griffith, Kevin Stohlmeyer, Rob Huddleston, John Farrar. New speakers to D2W: David Ortinau, Jim Babbage, Rob Rusher, Kai Koenig (who is coming the furthest, New Zealand), Michele Yaiser, Justin Seeley, Dave Hogue, Steve Withington, Sean Schroeder (with our sponsor MuraCMS), Elad Elrom and more to come. I have accepted a few more, but haven’t added them to the Lanyard site yet. I am hoping for a return of Pariah Burke but haven’t solidified the detail of that yet. If he does return, he’ll be doing a day long class.

Which brings me to what we are doing different this year. We will be doing pre-conference hands-on classes. The thing about workflow is it is hard to talk about it in 60 minutes. So we have also extended our sessions to 90 minutes, and have added another room. We’ve got such great content, that we’ll be doing some sessions online only also. We’ll still have the sessions live and recorded for the normal sessions, but adding more as well.

Now, we are still looking for sponsors. For me, that is probably my most difficult task. I am not good at asking for money, but I really want it to be mutually beneficial for both of us. I need sponsors, but sponsors that the attendees will want to visit and be interested in their product. O’Reilly and Peachpit always come though. Balsamiq gave us several licenses of their wireframing product and that is the perfect example of something attendees would be excited about. What would a workflow conference be with wireframing tools.

The cost has been increased a bit more also. Well, we have that much more going on, so I had to increase the cost to offset the increase in cost to put it on. It is still cheaper than most conferences, and where else do you get this kind of content… no where. I am really looking forward to 2011 and D2W version 2.

New conference in Kansas City

Last year was a great year for conferences. I even spoke at several. I am a user group manager so I speak to my group a lot, but also to other groups around the country via connect, which I love. I am a social butterfly, an instructor and apparently you can’t shut me up, so I like speaking. No, seriously, I really like sharing. I spoke at CFUnited in August of 09 and had 2 sessions, and even was one of the repeats for the Saturday crew. It was exhausting but a very rewarding experience. I did a hands-on CSS class as well as a Flash Catalyst session. Unfortunately, the Flash Catalyst session was the first thing in the AM after the Adobe pool party the night before. Luckily, I did the session again 2 months later for the St. Louis Flash Camp. That was a great conference. Thanks JP.

The next month was Adobe MAX. I had a few friends who were speaking so I volunteered to TA (teaching assistant) for them. Apparently I know too many people because next thing I know, I am a TA for 8 sessions. Craziness. Last day of MAX I TA’d 4 sessions and then was a speaker for the local LA group fro their Mini MAX that night. I was so tired, but what a great experience MAX was for me. My only regret was I wasn’t able to see anyone else’s sessions but the ones I assisted at. Only spent a while in the Community lounge, and if you happen to know me, that was torture. I am known for taking tons of pictures, and my networking. I wasn’t able to do any of that. I did meet a few new folks and of course I organized an evening event while I was there. It’s what I do after all. I am the social director of our Adobe community. I make sure people connect with each other. I’m Julie from Love Boat.

I went on to other conferences like BFlex|BFusion and didn’t plan on it, but TA’d the 2nd day for 2 all day sessions. OK, that isn’t physically possible, I did one on the morning, and the other in the afternoon. I wasn’t suppose to TA, there just wasn’t enough people to do so. I still had a blast and meet some fellow geeks whom I had only known online previously. You know, people you follow on Twitter and when you walk into the room you say, I know them, and them, and them, and them… but you’ve never actually met them in public before. Isn’t social media great! Finally I ended up at Brian Rinaldi’s RIA Unleashed. A 1 day event in Boston.

At this point, I realize to myself that I was finally, finally in a position to put my own conference on in Kansas City. I had been studying other conferences all year, and I had the technical network to pull together some of the best and brightest for a conference. But what kind of conference would I attempt? Developer, designer, workflow, what? That’s it! A designer/developer workflow conference. It’s what I had been talking about for 2 years. It’s basically the theme of my life. I am a hybrid. A designer who codes. I want nothing more than to have a better workflow between them, so why not center a conference around that premise.

If you’ve been around for awhile, you know there was a HUGE conference planned a few year back from Lynda.com. I can’t remember the name but it was something very similar to mine. It didn’t happen. Not enough registration I think. So why do I think mine will be OK? For one it’s several years into the future. We’ve had some hard economic times since then. People have been forced to be more than just whatever they were before. Designer have to code more, developers are expected to do some design. If you don’t believe me take a look at a job description there days. They want the person to be an expert at Photoshop, Illustrator, print work, able to draw logos and branding, know PHP, Flash, AS 3.0, .NET, jQuery, ColdFusion and some Flex but would love if they also knew 3D and video. OK, so be an expert at everything apparently. Sorry, that isn’t how most of us were trained.

So in June, Kansas City will have the first conference we’ve had for years. We get passed up for everything. Concerts, tech conferences, you name it. Well, no more. For gosh sake, we have companies like Garmin, Sprint, Hallmark and 4 international Ad agencies here. We have some very talented folks in Kansas City.

The name of this conference is D2W and the URL is D2WC.com and 200 designer, developer and hybrids will ascend upon downtown KC the 19-20 of June, 2010. I can’t tell you how exciting this is. I have a post on the site, so if you might be interested being a speaker or volunteer, fill out a form there. I have an advisory board and a speaker board and will be deciding speakers soon. I’ll be sure and update this post when we have some selections.

I know that in as of itself isn’t the least bit remarkable, but I had a bigger purpose in mind than just attending.

Update for why Fireworks is better than Photoshop

Designers being designers have used Photoshop forever. It is sad to see that they also seem to use it for web design. Right tool for the right job I say. So, if you use Photoshop for web, or even Ilustrator, listen up.

Since I wrote the last post about PS vs FW, I’ve seen a few other posts and none of them go into specifics. So, here is a list. There is 1 thing people forget the easiest though when comparing, which is why they can’t fully be compared. Photoshop is pixel based, while Fireworks is vector. Fireworks can also manipulate bitmaps, but Photoshop only uses the term vector to certain objects while working in Photoshop. Once exported, they are no longer vector, which is HUGE. Anywho, here you go.

Things they do similar:

  • They both have a similar layout, thanks to Owl panels in CS4.
  • They both have styles (layer styles in Photoshop)
  • They both have layers and layer groups
  • Some similar tools (clone stamp, tragic wand…)
  • Export jpg, gifs, png (8, 24, 32), psd, tiff, flat png, swf, etc
  • Same type engine – hmmm (personal note, would love more control over text)
  • They can both put text on a path
  • They both can mask, select bitmaps, clone, pen tool, paint (though not anywhere near the same)

Now these are similar remember not exactly alike, but many of the tools are called the same thing. For instance they both can have layer effects. Fireworks calls it Photoshop Live Effects, but has the same options. Photoshop has Adjustment layers, but both can use levels, curves, hue and saturation and others.

So some major differences are:

  • Animated .gifs
  • Gradients – they both have them, but Fireworks 
does it better
  • They both integrate well with Dreamweaver and Flash, 
except vector shapes in Photoshop end up being 
bitmaps still when brought into Flash.
  • Text – They supposedly have the same font engine, but there is room for
improvement in Fireworks
  • Export slices

They both have animated .gifs, but do it very differently. Gradients goes to Fireworks because it is on a vector object, plus you see the start and stop points and it’s super easy to manipulate. Again the difference between when something is vector or not goes to Fireworks. If I am going to Flash, which is a vector program btw, why would I use something pixel based unless I am manipulating an image? I wouldn’t. But technically, Photoshop can go to Flash. I can open a PSD in Flash and make a symbol. The big difference here is Fireworks can make symbols. It’s more similar to Illustrator at this level than Photoshop. Exporting. I won’t go into some rant here. Photshop simply doesn’t have the same control over exporting as Fireworks does. Plus it makes a smaller file if optimizing. Thanks to fellow Fireworks geeks like Matt Stow and David Hogue, we have enhanced Exports that actually export nice CSS. At least to the point where it makes it easy to manipulate and I have a nice starting point. OK, onward we go.

  • Filters – you can bring in Photoshop filters inside Fireworks
  • They both export PDF’s, except Fireworks can make interactive ones, but Photoshop has more typical PDF options. Unfortunately, Fireworks does not embed fonts.
  • They both can make an *almost* instant web gallery (just a minute or 2 depending on how many images)
  • Define is a slice as an image or html (Fireworks can do a background image, PS can’t)
  • They both export CSS, but PS and AI use Absolute positioning
  • They both have align features,  
but FW can align to the stage/canvas but PS can auto-align layers.
  • They can both do a slideshow, although Photoshop
does one via a PDF presentation, and FW can do one
 of all document pages and ends up a swf.

So what does Photoshop do better?

  • Image Manipulation
  • Defining and selection areas of a bitmap using a variety of means, such as… Alpha channels, Quick Select tool, Quick Mask mode
  • Rubber stamp, yes they both have one, but there is NO contest as to which one is better and can do more.
  • Healing brush and similar tools
  • Brushes (so many to choose from)
  • Defining your own brush and/or pattern
  • Color management and CMYK, which FW does not do
  • Zoomify
  • Actions (Fireworks can be scripted, but this is just something I’ve done for so long that it’s a presonal thing. I can make an action and a droplet to do most repetitive tasks  in Photoshop so fast and I couldn’t make a script that fast.)
  • Batch commands and droplets
  • Even through Photoshop is a bitmap program, you can open/place something as a smart object. Allows for resizing bitmaps, and can update an Illustrator document later and the ability to make an image a Smart Object so it can be re-sized without degradation to the image. (smaller back to normal size, not bigger)
  • Content-aware scaling (amazing feature)
  • 3D
  • video manipulation
  • vanishing point

So what can Fireworks do?

  • Vector…everything
  • Pages and Master pages
  • Shared Layers between Pages
  • Application development (like AIR)
  • User Interfaces
  • Common Library of commonly used items like HTML, Flex components, and custom symbols I can make myself
  • Making symbols like for Flash – Drag and Drop from FW to Flash (try that with PS. FW retains them as vector)
  • Exporting MXML and other options
  • Interactive alignments like Flash
  • Rollovers and States
  • The ability to make wireframes and then make
them working html or an interactive PDF
 (with hotspots liked to Pages) and get client approval on layout before time
is wasted on a design
  • Background slices, foreground etc.
  • 9-slice scaling
  • CSS Export – Matt Stow’s better CSS Export
  • Pathfinder (Illustrator’s Pathfinder, but on crack)
  • Auto shapes including some 3D
  • Special Characters panel (but will it be there next version?)
  • Commands unique to web
  • A preview of rollovers etc. without having to open a Save for Web window
  • Send to email
  • Vector shapes, real vector shapes
  • Ability to easily make a hotspot, new button, etc
  • Via property inspector, manipulate a variety of fills types, patterns, stroke options and more
  • Someone is making a new
plug-in every day

Quite a list, huh? I have seen the most amazing logos, drawings, etc. come from Fireworks. People use it in the most amazing ways daily. I have been using Photoshop since version 1. I’ve been certified in it for years and years. I’ve taught it for over 12 now. But I use the right tool for the right job, and for me, anything, anything at all for the web, I use Fireworks. I can make a site 10 times faster in Fireworks than Photoshop any day of the week.

But, like other web geeks, I am not always the designer as well. Often I am given a PSD file. What then? Not a problem. In CS4 they make that process much less painful. I can not only bring in a Photoshop file, but I can export back out of Fireworks as one as well if needed.  Sometimes, some things don’t always come across exactly the same. Masks sometimes need to be re-linked, but all in all, it works pretty well. All layers are 100% opacity so that would also need to be changed. Fonts can have different spacing at times as well. All-in-all though, it can be pretty seamless.

Once you dig in, find how useful Pages can be, do a wireframe or 2 you’ll be just as hooked as the rest of us who consider themselves to be Fireworks Evangelists.A shout to guru Jim Babbage (http://www.communitymx.com/author.cfm?cid=1036) Who is the nicest guy, and knows his stuff in Fireworks.

Here are some helpful links, though not remotely a complete list.

Developers and designers – can they co-exist?

I see blogs all the time from a developer who is complaining about designers. I am both a designer and a developer. Many times I am the everything person, design, develop etc., but many times I have to deal with another designers file. Then I have to make it a live XHTML/CSS page. When I am working with some designers files, I often wonder if they’ve even seen a website.

So I get why it’s so frustrating. Why can’t designers and developers talk before-hand so the correct decisions are made before client sees it.

Common mistakes I personally see (some) designers make:
– Aliased fonts
– Strange fonts used in bad places. There are 11 common fonts for both platforms. Only use those when designing body copy and many other things. Logos don’t count.
– Tracking on fonts that interact with other important elements, like inside pods etc.
– No idea about CSS, so text ends up being on a curve. I can’t make that happen without it being an image. My rule #1: If it’s text, it’s live html text. Logos being an exception.
– Since many designers have rarely made a page live, they don’t understand the concept of structure on a page. Think in terms of background images for design elements. Text still needs a structure. 2 column, 3 column etc. for text layout. Keep the users eye in a logical flow for the text.
– Navigation – I’d prefer to make the text live too with navigation. Design a great-looking button, but leave the text live. Don’t use some crazy font. It makes it easier to change navigation when the client changes their mind, or adds another page. I and many others use a bulleted list to design the navigation in CSS.
– Don’t just think about the interior of the page, also think about the background. Is it a plain color, or does it have a texture.
– Is the page going to be a liquid layout (move with the browser width) or is it going to be a fixed width. Many designers have a hard time with this concept because they want things to be pixel perfect. It could also be a combination of liquid and ems.

Bottom line: bring the develop in sooner. Ask the developer if your page will work well. Yes, you care because if you didn’t design a page that is easy to make live, it’ll take the developer much longer to figure out how to do your crazy design. The developer shouldn’t be the last one to see a design, they should be the first before the client ever sees it so they can make sure it can be done in a manner that’s best for the design.

So lets find a way for designers and developers to work together. I think we should start a standards document, and a checklist somewhere like Buzzword and/or Google docs where developers can add to the list and distribute to their designers so they do have a clue.

The designer doesn’t know they are doing something wrong if we don’t tell them. OK, so I hear some of you saying, why should we go out of our way? Why don’t they take the time to learn html, or CSS or what we need? I agree to a point. I was one of those designers and I wanted to know more. But, many feel like all they want to do is design, and since no one is telling them they are doing anything wrong, they are going to continue to plow ahead and design things that make us want to throttle them.

I often work with a designer who when they put the designs on the table, I think to myself, they are showing me the print ad first, right? No, it’s always the web piece and you’d think by now I’d learn. She even took one of my Dreamweaver classes and learned that tables were no longer the standard. She had assumed that since she had learned how to do tables 10 years ago, they were still the standard. She even snidely put me down for using pure CSS. She thought I was incompetent for not using tables to lay out her designs. Wow!

At the class, she commented how different things were and how she now understood how she could design for the web better. Now we can’t educate all designers like that, but it is up to us to do something about it because it will only help us out in the end, or do you like complaining about designs and taking more time to figure out how to make it work for you?

The choice is yours.

Flex/AIR/Flash Catalyst – Things designers should care about

By now you know I am a designer, but you may wonder why I would even care about Flex and AIR. I do classify myself as a designer who codes, but still, I am indeed not a full fledged developer. When it comes to needing CF on my sites, I can do some coding, but not in any other language like PHP, or any what I call heavy lifting on the back end of my sites. Would I like to be a developer? Only if I can still design.

So I made a big deal about Flex to our members (KCWebCore), because Flex and AIR and eventually Flash Catalyst can literally change our lives. With an increase my skill set, I’ll be more marketable, and with an increase in my worth, it’ll change my quality of living. Why wouldn’t I want to learn this?

We’ll start with Flex and why us designers should care.

With every Flex application built, someone will need to make it look presentable and have the look of it fit in with the clients web site. This is where we come in with Flex skinning. Adobe has made Flex skinning easy to do with some downloadable (is that a word?) extensions on http://labs.adobe.com. They have one for Flash (which makes sense) Illustrator and Fireworks (which is awesome). As a matter of fact, if you don’t already, you should have Labs bookmarked for all the great information they have on there.

Flash Catalyst (formally code named Thermo) is a bridge between the design world and Flex. You can either design inside of Flash Catalyst or bring in a Photoshop/Illustrator/Fireworks file. Once you bring in, lets just use a layered Photoshop file for an example, you can target specific layers and turn them into working Flex elements and components. Plus, it isn’t like Contribute or some program that doesn’t let you touch the code, it’s more like a WYSIWYG, Dreamweaver like program that lets you design, but also lets you see the code you have just created. What it allows you to create is working sliders, visually wiring together events and bindings, and much more. Wow! Flash Catalyst isn’t even public yet, so we have to be patient for a bit unless you were lucky enough to be at MAX NA 2008. They gave out a ton of DVD’s with Gumbo on it as well. Gumbo is Flex 4’s code name. MAX also had a ton of  sessions and hands-on sessions. Maybe I’ll add a tutorial for those who have the MAX build very soon. Anyway, once the designer gets done, he hands it over to the develop in Flex 4 who takes the file and finishes up the functionality of the application. You can even round-trip back and forth from Flex 4 back to Catalyst, back to whatever design progam you used. Lots of new features to be added soon, so stay tuned. Visit Flash Catalyst’s page at Labs for more info.

There will be plenty of opportunities for us designers there, but what about AIR? So lets say Actionscript 3.0 is still a bit mystical for you just yet. (I know you are trying to learn it) Even for us Flash designers, turning to AS 3.0 for our code, even the simple stuff, has a learning curve. Even for AS developers, making the switch to Flex has been… shall we say, at times frustrating. (Flash Catalyst can also make AIR applications, or will when released.) You can also make AIR applications out of Dreamweaver and now Flash CS4. WooHoo! With Dreamweaver CS3 and CS4 and Javascript, you can make AIR applications. Yep, no kidding. So first thing, you go and download the Adobe AIR extension for Dreamweaver CS3. There is a ton of good support info, so don’t worry, I won’t explain it all in one blog entry. Just know that it is an amazing opportunity for us Dreamweaver geeks to explore something as cool as AIR.

Flex allows you to use either AS 3.0, or MXML. If that means nothing to you, that’s OK too. Just know that there are some subtle difference between Flex AS 3.0, and Flash 3.0. What this info makes me do besides turn to Colin Mook’s AS book from O’Reily is make me understand that only really good developers will be embracing Flex, AND that they will need a good designer to make their Flex apps look good.

So have I given you enough reason to lean more about these new Adobe technologies? I hope so.

See ya later

Dee

Design for non-designers and developers

Alright, last time on KCWebCore.org/blog I went on a bit of a tangent. I started talking about fireworks for design elements, and ended up talking about CSS. It’s hard though, because CSS is such an important part of design these days, it’s hard to talk about one without the other. For this edition, we will just focus on design elements.

Fonts:
I want to start with fonts because there are too many designers out there using weird fonts for their mock ups. This throws developers off. I got an email from one today asking if non-standard fonts were the norm these days. NO, they are not! To many print designers are designing web pages these days. Designers who have never made HTML from one of their designs. To them… STOP IT. So I might as well start from the top and talk to designers and developers alike.

Everything that is text besides the company logo, and maybe some headers should be live. So, when someone puts together a mock up of what the page will look like, they should be using one of the 11 fonts that that are common to both a PC and Mac. Another thing to consider here, and this is indeed for the developers, is that all text should be included in your mock up. Why? So you can see how to design the page for more text. It could be greek text if you don’t have real content, but the most important thing is not to have any anti-alias. For those who don’t know what anti-alias is, it’s where the program fills in the pixels to make it look like it’s smooth. In a program like Photoshop, there is a setting in the Control bar to change it from Smooth, to either Crisp or none. That will make the text more like the text in XHTML.

Colors:
Colors are something us designers don’t think anything about, but seems to be something developers find to be a foreign concept. My
suggestion is to spend some time with Kuler. Kuler lets you easily pick from their favorites, or create on your own 5 colors that go together. So, you can have your main color and accent colors for your site super fast. No fuss, no muss. Of course, you will likely base those colors off a logo. Just think in terms of what will compliment the logo. Plus, all gray doesn’t cut it. I’ve seen my share of sites that are just shades of gray. There are other colors you can use, not that an occasional gray doesn’t work, just not all the time.

Backgrounds:
We’ll start with a super simple background that looks great with fixed width sites. Take a look at MacCORE and you’ll see a site that was made to go with a fixed width and has a background image that is 2100 pixels wide, by 20 pixels tall. In the CSS, the slice is first centered, then given a repeat of Y. We’ll look at the CSS later.
This is a scaled down example of of a background color, with a white box centered. The box gets a drop shadow with zero distance, and about a 9 pixel size to make it stand out.

I’d like to take a second here and talk about other types of sites, and looks. We could have chosen an elastic or liquid layout for the page. Many developers like the look because the page expands with the browser. Sprint’s site is designed like this. It is possible to make a site look good, and be liquid at the same time, but a little harder then a fixed width site. In my opinion, it’s all in the content. If a site doesn’t have a ton of content, but more graphics, a fixed width works best. It keeps the text from re-wrapping around graphics in an odd manner.

If a site has a ton of content, liquid works best. It is nice to use when a 1024X768 size is the target. For those with large monitors, they can decide how much text in on a line at a time. The design would be much different, so we can explore that next time.

Headers:
Some times, a header is just that, a header for the page with the logo in it. The one thing you want to avoid if possible is for the header to overwhelm the page. Not that you won’t see many pages where it was a design element for the header to take lots of room, like on Pownce’s site. It works for them because the login is also in the header and it’s more important then the content to regular visitors. The initial pages information should always be visible above the page fold. That’s when the page is viewed at the target size (800X600, 1024X768) in the browser.

On our sample site, MacCORE (a local Mac user group), I wasn’t sure when I made it if we were going to put a login in the header, or on a specific page, so I know it was going to be a background image. The plus of that would mean I could use text over top of the image, have just the logo be on the page itself. That could allow for a better printed page because the logo would be the only graphic that prints. Keeping ink to a minimum.

Navigation:
This site called for a 2-column page with header and footer. Because I didn’t want to take precious room for navigation on the side, our navigation is under the header. The main objective with the navigation was to make 1 button with an up, and an over state. The client wasn’t sure what the wording would be, so it was important that the text be live text that could be changed at any time.

So I made them all the way across the page and experimented with width and text until I thought it looked good. The plan was to have the over state visible when the user was on that page to show them visually what page they were on. A easy bit of CSS makes that happen, which we’ll show later in the series.

Breadcrumbs and secondary navigation:
With a set number of menu links, there needed to be secondary navigation on this site. I used a simple gradient for this. This could have been used for breadcrumbs instead of secondary navigation.

Content area:
For the content area the client wanted something more than just a white background. So, we had to include a gradient that went to white, which is our background color. This is a very important concept in design; allowing for longer pages. So we took a gradient and went from that color to white in a distance that would allow for a short page, or longer page. Our gradient here was just 350 pixels tall and 10 pixels wide. It was just a repeat of X, and not Y. We could have made it the same width as the page, but it would have been a much larger image, and the goal is always a fast loading page.

For the side pod this is just a colored box, so no graphic was used here. It is purely a CSS element, but next time I’ll show how to make a good pod with rounded corners.

Footer:
The footer on this site is 100% CSS. No graphics here either. We decided on this just because we knew Apple needed certain legal information, and wasn’t sure what else we might need in there.

Next time:
We’ll look at some design choices for liquid layouts, and how to make pods. See ya next time.

Dee