Blue Shrapnel on iliam

Reading a great book on designing templates for WordPress… http://www.packtpub.com/wordpress-theme-design/book

You can use any fonts you want as long as you think there’s a really good chance that
others will have the same font on their computers. Here is a list of the basic fonts I
mix and match from and why:

San-Serif Fonts:

These fonts don’t contain ’serifs’ (hence the name san-serif).  Serifs are the little ‘feet’ you see on the appendages of type faces. San-Serif fonts are usually considered more new and modern.

• Verdana: This font is common on every platform and was specifically designed for web reading at smaller web sizes. When you really want to use a san-serif font for your body text, this is your best bet. (There was a great article in The New Yorker in 2007 about the designer of this font.)
• Arial and Helvetica: Common on every platform. A little tame. Great for clean headlines, but a bit hard to read at smaller font sizes.
• Trebuchet: Fairly common nowadays, and a pretty popular font on the ‘web 2.0′ styled sites. Clean like Arial with a lot more character. It reads a little better at smaller sizes than Arial. This was originally a Microsoft font, so sometimes it doesn’t appear in older Mac or Linux OSs (Verdana is a MS font too, originally released with IE 3, but its design for screen readability got it opted quickly by other OSs).
• Century Gothic: Fairly common. Clean and round, a nice break from the norm. Reads terribly at small sizes though. Use for headings only.
• Comic Sans Serif: Another MS font, but common on all platforms. Fun and friendly, based on traditional comic book hand lettering. I’ve never been able to use it in a design (I do try from time to time, and feel it’s ‘hokey’), but I always admire when it’s used well in site design.

Serif Fonts:

These fonts are considered more traditional, or ‘bookish’, as serif fonts were designed specifically to read well in print. The serifs (those ‘little feet’) on the appendages of the letters form subtle lines for your eyesto follow.

• Times New Roman and Times: Very common on all platforms; one of the most common serif fonts. Comes off very traditional, professional, and/or serious.
• Georgia: Pretty common, again predominately a Microsoft font. I feel it has a lot of character, nice serifs, and a big and fat body. Like Verdana, Georgia was specifically designed for on-screen reading for any size. Comes off professional, but not quite as serious as Times New Roman.
• Century Schoolbook: Pretty common. Similar to Georgia, just not as ‘fat’.
• Courier New: This is a mono-spaced font, based on the old typewriter and often what your HTML and text editor prefers to display (the point of mono-type is that the characters don’t merge together, so it’s easier to see your syntax). As a result of that association, I usually reserve this font for presenting code snippets or technical definitions within my designs.

1. 1. Sketch It: Napkins are great! I usually use the other side of a recycled piece of photocopied paper—the more basic the better. No fine artist skills required! Perk: Using this sketch you can not only get your graphic interface ideas down, but you can already start to think about how the user will interact with your theme design and re-sketch any new ideas or
   changes accordingly.
2. Start with the Structure: I create an ideal, un-styled semantic XHTML document structure and attach a bare bones CSS sheet to it.
3. Add the Text: Lots of text, the more the better! A sample of actual content is best, but Lorem Ipsum is fine too.
4. CSS Typography: Think of your Typography and assign your decisions to the stylesheet. Review! Don’t like how the formatted text looks in-line? Being separated into columns with fancy background graphics won’t make it any better. Get your text to look nice and read well now before moving on to layout.
5. CSS Layout: Set up the Layout—this is where you’ll see upfront if your layout idea from your sketch will even work. Any problems here and you can re-think the design’s layout into something more realistic (and usually more clean and elegant). Perk: Your client will never see, much less become attached to, a layout that would cause you problems down the road in CSS.
6. CSS Color Scheme: Assign your color scheme basics to the CSS. We’re close to needing Photoshop anyway, so you might as well open it up. I sometimes find it useful to use Photoshop to help me come up with a color scheme and get the hex numbers for the stylesheet.
7. Take a Screenshot: Time for Photoshop! Paste the screenshot of your basic layout into your Photoshop file.
8. Photoshop: Have fun creating the graphical interface elements that will be applied to this layout over your screenshot.
9. Send for Approval: Export a .jpg or .png format of the layout and send it to the client. Perk: If the client has text changes, just make them in your CSS (which will update your text globally—no layer hunting for all your headers or links, etc.) and resnap a screenshot to place back in the Photoshop file with the graphic elements. If they have a graphical interface change, well that’s what Photoshop does best! Make the changes and resend for approval.
   10. Production: Here’s the best part; you’re more than halfway there! Slice and export the interface elements you created over (or under) your screenshot and apply them with the background image rules in your CSS. Because you worked directly over a screenshot of the layout, slicing the images to the correct size is easier and you won’t discover that you need to tweak the layout of the CSS as much to accommodate the graphic elements.

Reading through a book about creating a WordPress theme…. Typically there are a few types of bloigs… which have a particular style of target audience.  Here’s a summary….

• Professional Expert Blog – theme design type can be diverse depending on sector of expert, options for rich media.
• Corporate Blog – company attempting to reach customers and encourage closer relationships.  Oftne a content searcher, looking for specific information about products and services.
• Online News / Magazine – often funded by ads, users tend to be drawn in by bleeding-edge technically adept work.
• Campaings Blog – non-profit blogs rn by charities.  Information needs to win people over to the cuase.

aviary is a great image manipulation / creation / everything else tool.  Perfect for people who don’t want to pay for adobe software.  It’s free to use.  So for clients who need to crop images, etc…. we should prepare a few guides, etc….