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
• Application development (like AIR)
• User Interfaces
• Making symbols like for Flash
• 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
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.

• http://www.fireonthebay.org/resources/
• http://www.fireworkszone.com/
• http://www.dmxzone.com/
• http://www.phireworx.com/
• http://www.fwkit.com/
• http://www.playingwithfire.com/
• http://www.adobe.com/support/fireworks/
• http://www.layersmagazine.com/category/tutorials/fireworks
• http://fireworks-weblog.de/
• http://speckyboy.com/2008/12/29/70-adobe-fireworks-resources-is-there-a-future-for-fireworks/
• http://bestwebdesignz.com/tips/fireworks/fireworks-cs4-tutorial/
• http://www.layersmagazine.com/category/tutorials/fireworks

Web Design: Photoshop vs Fireworks – no contest

There have been many a showdown lately about whether fireworks or Photoshop is the better tool for the web. I hate to say this, but Fireworks is the better tool to go to the web. (Let me say I am a Photoshop ACE (Adobe Certified Expert) and Certified Instructor, and have been using it since version 2.0, but it’s a matter of the right tool for the right job) I love Photoshop, I do, but hands-down Fireworks is better for many things like:

- It slices better than Photoshop hands down.
- It has Pages, which let you carry on your design to other pages with a Master page for all common elements.
- With Pages, it allows for you to start with a wireframe and have the client approve of the basic structure before you move on to full blown design. It’s called rapid prototyping.
- From that wireframe or design you can make your navigation work and post it to a site, or make a PDF to send to the client.
- It exports much better CSS without having to slice everything up, as we use background images now, and Fireworks understand that and lets you choose when something is a background image.
- It’s a vector-based drawing program, and since most people use Photoshop, you can make your page more unique, plus making vector shapes is much easier.
- Makes symbols to go into Flash if necessary. (Yes you can bring in a Photoshop file into Flash, but it’ll still be a bitmap, not vector art, thus a bigger file)
- Makes skinning application super easy, like for Flex since it also exports as MXML.

(Flash Catalyst (formally Thermo and to come in 2009) will allow the designer to design a web application in Photoshop, Illustrator or Fireworks and bring it into Catalyst and make scroll bars and buttons, and other things function, then hand that off to the developer to let Flex finish things off.)

Photoshop has many positives, and it is by far the standard for image manipulation. I will say for simple image manipulation, i.e., color correction fireworks does a fine job. I can do most things to my images right inside of Fireworks that I need.

The problem as I see it, is Fireworks was just added to the Creative Suite in 3.3 of the Design Premium. Designers haven’t had years to play with it, except for us old groupies of the Macromedia Studio collection. I won a copy of Ultra Dev (Dreamweaver) and Fireworks 3 years ago, 2000 I think. Many current designers just don’t bother learning something new. They already have Photoshop and why learn a new tool. Didn’t Photoshop take what ImageReady had and they incorporated that into it? Well the answer is yes, to a degree.

Can I slice in Photoshop and name it and even make it text? Yes
Can I export as html, and some CSS and have my images go into a folder? Yes
Can I easily make an animated GIF? Yes
Can I make rollover images easily? Whoa, ah, well, ummm, no. This is where the buck stops to a degree. If I want to make a rollover image in PS, I’d have to rename the slice and re-export it.

So, can I save time in Fireworks? Yes. Could I convince others to join me there and save time and frustration? Maybe. For every designer who has CS4, I’d say come on in, open up Fireworks and see how it can change your life by freeing up time spent making Photoshop mockups.

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.

CFUnited 09

I have been to several CFUnited’s in the past, an CFUnited Alumni if you will. I am typically there to help Fusion Authority Quarterly Update, as I am the Creative Director and weirdly enough now know more CF people then almost anyone else. I am a designer who codes, not a hardcore CF developer like Ray Camden or Sean Corfield. (I secretly would love to be, but not sure I have what it takes — a logical mind) I’ve learned a lot about CF from making sure it all looks great from inside the comfort of InDesign. I’ve also learned a lot going to the conferences and sitting in on the sessions. Sean’s last year actually made perfect sense to me. Of course, Sean is an amazing speaker, so that helped. If he can make me understand Edmund, hey, anyone will get it. 

This next year though, I finally made the speaker deadline and submitted 3 sessions and 2 BOF’s (birds of a feather). They put it up for a vote this year for the first time. As a past attendee, I really thought that was great. You can’t complain about the sessions if you helped pick them. So I submitted a Hands-on CSS session, and 2 Flash Catalyst sessions. I assumed of course that Catalyst might be out by August of next year. Ya never know though about betas and when they’ll be released. I had hoped for a public beta by then at least. I am pretty excited about Catalyst and am hoping it will do wonders for bridging the gap between designer and developer which is my current passion.

I submitted the Hands-on session for CSS because you can’t really learn something you aren’t touching, and these are developers, they need to touch some code, right? So what will they learn? Since CF developers spend a lot of time with tables, for data consumption only of course, we’ll make sure they can style a table first. Then we’ll go into how easy it is to lay out a page with pure CSS then styling navigation. If we can’t finish, we’ll end up in the bar or the pool coding CSS on napkins.

My 2 Flash Catalyst sessions aren’t picked so far, but the CSS one is. Yippee. It might take awhile for people to see the true benefit for Flash Catalyst. For me, right now, it’s a fantastic wireframing tool. Use Catalyst to lay out the page, then it can be handed to the developer in Flex to make it function, then when the artwork is ready, brought back into Catalyst then back into Flex without missing a beat. It’ll save tons of time making sure the app works correctly, and the client is happy. Since Catalyst takes a design from Photoshop Illustrator or Fireworks (not yet, but it will), the designer will feel like he/she finally gets the pixel perfect feel to their designs. Sounds great, right?

Now I have 2 BOF’s I need to decide from. My first is a Personal Brand BOF. There are a ton of things to make sure your personal brand is up to date. Why should you care? Are you kidding, in this economy, having a good personal brand can make the difference if you are hired by an employer, or if you are freelancing, it’s even more important. Are you on Facebook, LinkedIn, Twitter and more? That isn’t all to a personal brand, but that’s a part of getting your name out.

My second idea for a BOF, I’ve blogged about before. I see developers complain about designers on blogs all the time. Wondering why they don’t design properly in the first place. Many of us work or have worked where we are the last to see the approved design, making our job more difficult when it comes to implementing the design. Some designers do the craziest things expecting us to make it happen. Can’t you do anything I design? Yes, but done correctly, and in a timely fashion, maybe not.  So whar I want to do is start a checklist for designers and a standards document that can be shared on the web like Google docs, and Adobe Buzzword. Then the developer can alter to meet his/her needs and had the designer and their boss/supervisor the checklist, and ask to be brought in before the client sees the work. That way we can make sure things are done in a way to make it easier for everyone.

For instance, not all designers understand for Usability purposes that a search box should always be in the upper right corner, or at least somewhere where the user n to look for it. Hey designers, CSS is big these days, we can use background images for many things, now if they have never looked into CSS, they wouldn’t understand. Maybe a few links to some CSS sites might help them understand. Hey, CSSZenGarden at the very least.

So, it’s a current fight of mine to do all I can to bring designers and developers together.

I’m really looking forward to CFUnited 09 it seems. Another reason is I get to see all my friends. Since I am a User group manager and a Community Expert, I know a lot of the guys, and girls from our Summit in San Jose, CA. With the lay offs at Adobe recently, I am not convinced that we are having a Summit this year. We also increased the managers and co-managers to the point where logistically meeting in person might be hard as well. I just saw many at MAX NA 2008, so that was great, but Summit and other conferences like CFUnited let me see the ones I don’t see otherwise. Adam Bell always does a Mini MAX at CFUnited, and I’ve never got there early enough to see it, so looking forward to having a Manager 2 Manager meeting at CFunited this year as well.

More to come later, and congrats to all my friends whose sessions were voted on and accepted as well.

See ya soon!

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

Clipping Masks in Photoshop

A student of mine recently asked for this, so I thought I’d just throw it out there just in case anyone else was having trouble with it. As usual there are a multitude of ways to do this. I just happen to like the way of least resistance. Of course, this technique works with any shape, including text.

1. Open the file you want to be a rounded rectangle instead of a square image. .
2. Choose the rounded rectangle Shape tool. You need to make sure you put in the radius of the rectangle you want before you use it. Say 15.
3. Go ahead and draw your rectangle to the size you want inside your image. (It will make a layer so if the size isn’t right, go to Edit and Free Transform to change the size.)
4. Make sure you have the image layer chosen. You may need to double click it and give it a new name. Anything besides our locked-down default Background will do because nothing can go underneath a locked down layer.
5. Take the Shape layer and drag it under the image layer.
6. Hold down your Option/Alt key and click once you see the overlapping circle symbol when your cursor is between the 2 layers. Then you should see the an arrow in the layers panel, and your shape in the image only when looking at the image.

This is a Clipping Mask. A clipping mask is always great because it is non-destructive to the image. It also means you can apply any Layer Effect to the shape, and both the image and the shape is moveable. A non linked mask.

Being Self-Employed

I’ve been self employed again for a few months. So I wonder if I have learned anything since last time. The biggest problem I had before I still seem to have. Time-management.

I became self-employed because I am an Adobe Instructor. I train maybe 10 or so days a month. A normal job wouldn’t allow me to be a Instructor. So I fill the other part of my time with production work. This time around I paired up with a marketing firm downtown. I thought it would be good because they had nobody that did web. Well, it turns out, they don’t even have a website themselves. Wow, yep in 2008 they didn’t see a need. Amazing.

I also thought I’d be able to do some design work, but it turns out that he didn’t want to insult his print designer and I am never going to be able to design there. Her designs look like print. Plain and simple she has never cut up a page for HTML so she has no idea what it takes to make a web page and it shows. We had a bit of a fight about her designs once because I mentioned I don’t do tables. She thought I was a nut. You could hear the laughter in her voice. Amazing. She was laughing and looking down at me because I use pure CSS to lay out my web pages.

Lets say it didn’t make me want to go hang out down there. They have a client that keeps me semi-busy so I just do the work from home. Again, turns out he didn’t want me working at home and was expecting me to hang out down there so he could ask me questions and learn about the web from me. HA! Seriously thought I’d just hang out and work from there even if I wasn’t working on his stuff. No thanks, my office is much more comfortable.

I still do some production work for the guy I train for, but none of it makes up what I made at my last contract gig. That was nice making that kind of money. So the question is do I help get more training gigs? Do I just market myself better? What do I do to get my career back on track without having to go back to work for someone?

The biggest issue I have is time-management. I tend to get up early with our 3 dogs, work for awhile, then take a nap. Then I get back up and do a few chores around the house. I get back to work and then get dinner ready. It seems that after 8 o’clock is when I really like to dig in and work. I sometimes work until 2 or 3 in the morning.

So I have decisions to make. Can I actually learn time-management? Can I be more productive? I like working for myself. I’ve become tainted over the last few years. Only getting a job at somewhere like Adobe would give me enough incentive to stay happy at a job. I do miss working with a team. I’m a pretty social creature. I look for my UGM and Community Expert friends online and I couldn’t do that in a regular job, so I guess I’d better make it work is my conclusion.

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

Countdown to MacWorld

It’s Sunday morning and I am trying to remember why I didn’t start packing yesterday. At least make a list of items. I don’t think I even have Lisa’s cell number. what a drag. I do know she is, we are suppose to be staying at the Holiday Inn. I need to write down all the numbers today.

My goal is to make sure I get there soon enough, at the registration, to get my pass and hopefully they won’t be out of passses to the Power Tools conference, which has FlashForward. I’ll cross my fingers and hopefully get into the Apple User groups University which already starts before I get there. I just couldn’t get a flight sooner. Oh, well. Wish me luck!

I’ll be taking pictures, conducting interviews, and of course blogging all week. Fun stuff to come.

Dee

Practical Web Design magazine

Lately I’ve been reading a new magazine, Practical Web Design. It’s a magazine out of the UK, and I just love it. It’s not for the hard core developer, but it is a nice blend of knowledge that not everyone will have. It comes with a CD wich has some really great stuff on it. Both Mac and PC solutions are used, which I love.

There are articles for designers and developers (well… developer to be) alike. Design, CSS, Flash, PHP and more are not only talked about but they have tutorials on things you’d use all the time. I think their intended audience is for the part time web person. Not necessarily for someone who does it for a living, but I’d say there is something there for you either way. For instance, there have been some great articles on RSS feeds, building a Flash aggregator and PHP lists.

I also came across the podcast from the magazine. The CD has it on there, but you can subscribe via iTunes as well. They are from Paul Boag, a designer who has his own design business in the UK and gives some great tips. I think they are bi monthly, but are usually about 45 minutes long. He also has some great podcasts at BoagWorld, as well as some fantastic book buying advice. I agree with pretty much all his favorite books.

There is a great section of 20 sites he finds interesting, and they are. Go take a look. I recently took a trip and listened to the podcasts on my way home. I was tired after my long drive, but couldn’t stop thinking of ideas I’d gotton from these podcasts. Can’t say everyone will gleen something from every single one, but I bet it’ll get the creative juices flowing, which can be a wonderful thing.

Dee
KCWebCore manager