Picture
I have to admit, I'm not a programmer nor a web developer. I don't know much about framework schemes and databases. But I know just enough Cascading Style Sheet (CSS) form and Hypertext Markup Language (HTML) to make my print design function for the Web.

Facebook offers their own language too: Facebook Markup Language (FBML). It is a great branding tool for any business. I still don't understand the language completely, but I was pretty much able to make it work by adding <fb:fbml> and </fb:fbml> tags to my HTML code. There are a few resources online that explain FBML in detail. As a print designer, I prefer to leave the details to trained programmers.


5 Tips:

Luckily for us print designers, imitating print design on the web is becoming increasingly popular. Here are a few tips I can offer to other transitioning print-to-web designers like myself.
  • Add the Static FBML application to your Facebook Fan Page. (Static FBML is not available for personal pages). I believe Facebook recommends the app for most fan page categories. If it is not in your apps or recommended apps, type "Static FBML" into your Facebook search bar to add the application to your page. Once you can access the app, you will see the field to enter the a tab title and a field to enter your FBML code.
  • Use tables. Purely by observation, I noticed that FBML ignores my spacer.gif images that Photoshop renders for in-between slices. So instead of using <td> cells throughout the code, I bypassed the limited HTML help that Photoshop could offer and used CSS for a background image and simple tables to position my Design Gallery images. The maximum canvas width is 760 px.
  • Photoshop your background. The key to producing a branded look is to carefully design your background image. I didn't really take a lot of time to plan out this example. In fact, I was so eager to try FBML that I quickly took a stock photo and superimposed my face just to create an effective image for the purpose of my tab "All about d*." And it's not even me. Ah, the beauty of photo manipulation.

Picture
  • Minimize code. FBML does not read relative links, so store your images on a low-character server name. You might also have noticed that I didn't space out the gallery images. This is because I am under the impression that pages created using FBML have a maximum character limit. Again, I'm not completely sure of a limit, but it is good practice anyway to keep your codes as short as possible without sacrificing load time. Of course, if spacing is a priority in your design, go ahead and put spaces.
Picture
  • Lastly, consider your audience. Chances are, you are using a Facebook Page as a feed to your real website, so you want to use your custom tab as an opt-in initiative to your primary site rather than some confusing visual for your brand. You can also change your wall settings to default to your new FBML custom tab as a landing page. There's nothing like making a first impression with a snazzy opening.
Take it or leave it, but these are my novice tips on FBML. I will explore iFrames, Javacript, and Flash soon, so I will have more to shed on the topic later. Also check out some useful tools on www.vegasproeditors.com.

Me ke aloha,
~d*




 
 
Picture
Receiving a critique or usability test is probably one of the hardest things designers do in our work. But detached opinions are what we need after days, if not months, of our own revisions. I mentally work with design critiques written into my process in order to tune into my overall goals, but I rarely have the luxury of conducting them. So I created a Facebook Page to provide another inlet for critiques.

While the model isn’t perfect, I value the opinions of the typical Facebook user. Both the perspective of the potential customer and viewpoint of other designers (albeit for different purposes) are invaluable to a successful design.

It is great to receive a personal opinion, but this should not be confused with the perception of what a customer needs or wants. If you must offer your personal view, just express that distinction. Beware of buzz terms like “clean lines” “retro” “old” technological” and “friendly,” since they may have a different meaning to you as they do to me. If you have trouble putting your thoughts to words, talk about the impressions and feelings a design leaves you with.

My hope is for critics to ask questions (rather than making single recommendations).

“Instead of saying, ‘While I think those flyout menus are slick, I recommend you nuke them and put the links in the center of the page,’ the critic might ask, ‘What alternatives did you consider for the flyout menus?’ By moving the conversation to talk about the bigger picture, everyone can discuss how this element (the flyout menus) is contributing to the total experience.” ~Jared M. Spool, User Interface Engineering


Here are questions as a guideline for a critique:
  1. Did you understand what the design was trying to communicate, or did it leave you feeling confused?
  2. Can you suggest alternative examples?
  3. What stands out the most when you first look at the design?
  4. What leads your eye around from place to place?
  5. What is interesting about the design?
  6. What could the artist revise to have a more successful composition, flow, character development, etc.?
  7. Would you purchase this product?

As always, I will provide data and research to help everyone agree on the likely customer perspective on different ideas. Remember that there are many factors involved in a design, some of which I have little or no control over.

Click on 'Become a Fan' to start a critique. Facebook Page: http://www.facebook.com/dsinelab

Me ke aloha,
~d*

Bookmark and Share
 
 
Perhaps one of the most telling aspects about your online presence is not so much the website as a whole, but the URL you use to advertise it. In a marketer's point of view, the URL is really the first thing people will see –- maybe on a handbill or poster, or on television or heard in a radio commercial.

It has been quite a feat for me to distinguish myself as a freelancer. I no longer represent the philosophy of a larger model or report to higher-up who ultimately publishes (or doesn't publish) my work. When I started freelancing in 2005, I actually hid under my family's company name, Inman Productions, LLC., hoping to replicate the corporate atmosphere I was so accustomed to.

But my design philosophy has matured over the last two years. After working in three different creative services departments, then on my own, I have come to learn a lot about business solutions -- clear communication, efficiency, and reliance on customer feedback -- rather than approaching designs with idea that I'm going to give them a little bit of "d*'s art."


art-vs-science
Diagram courtesy of ArchLED'09

I am no longer the artist's artist. All my life, I have been surrounded by art, but I realize that "art" can only go as far as the translation. "Design" goes much further, incorporating specified market appeal, call to action, and time in history. If you want to criticize a newcomer's use of Photoshop Elements or SwishMax, then ask yourself if you want to design for business, or design for yourself. Both have their purpose, but designing for business must take YOUR market into consideration. Microsoft Word IS a better format for letterhead design than InDesign, and Adobe Acrobat IS a better presentation tool than Microsoft PowerPoint. I will elablorate in future tutorial posts.

In 2010, I will post QUICK GUIDES on various desktop publishing software that may change the definition of design, especially for those of you who want to become more than the artist's artist.

To make my site easier to access, I finally changed my URL to reflect my break from Inman Productions to my own philosophy that art is math with d*Sine Lab - www.dsinelab.com.

Me ke aloha,
~d*

Bookmark and Share
 
 
No one really wants to pick up a phone in this texting era. But a voice system is sometimes necessary.

It's been over three years of freelancing for me. And in that time, only two clients have actually required my cell number. In fact I was face-to-face with a steady client yesterday, and our conversation went something like, "...sure, I'm available next week to work on your project. Do you have my number?" He said, "I'll email you."

Ha. In any case, I'm happy to announce my official d*Sine Lab office phone number for those moments in a project which an email address does not suffice. Oh, and while on the topic, a P.O. Box address is coming soon, for the maybe three people left on Earth who use snail mail. Call me!! If I don't pick up, leave a voice message and the system will send an audio file to my email. And...curtain.

d*Sine Lab
Website: dsinelab.com
Email: donya@dsinelab.com
Office: (213) 5-dSine-0
           (213) 537-4630

Me ke aloha,
~d*
Bookmark and Share
 
    Follow  Donya on Facebook Donya on Twitter Donya on MySpace Donya on LinkedIn d*Sine Lab RSS

    The Designer

    I am Donya -- my friends call me "d." I'm 30 years old, and from the suburbs of Southern California. I used to want an office on the 42nd floor somewhere in Midtown East. After graduating and working at three multi-national corporations, I got laid off in 2008 like everyone else did. I then started d*Sine Lab as my freelance alter ego. It's has been an eye-opening four years for me, including having  two kids and moving from California to North Carolina...far, far away from NYC.

    Categories

    All
    Contracts
    Free Downloads
    Inspiration
    Tutorials

    Archives

    December 2011
    January 2011
    March 2010
    February 2010
    October 2009
    September 2009

    Picture
    Picture
    Picture

Copyright © 2008-2011 by d*Sine Lab. All rights reserved.