Archive | Graphic Media RSS feed for this section

User Experience Videos That Are Worth Your Time (Re-blog)

9 Jan UX

User Experience Videos That Are Worth Your Time (Re-Blog)

Get a refresher course list (or learn new) – these are a great place to focus on UX-User Experience development..

Rub Link: User Experience Videos That Are Worth Your Time

Get a refresher course list (or learn new) – these are a great place to focus on UX-User Experience development..
presenting here phenomenal videos and related resources on the topic of user experience (UX) by different presenters at different events. We have focused on current content but have included some older videos that are still relevant. It will take you more than 16 hours to watch all of these videos. So, make some popcorn, turn off the lights and enjoy.


BONUS! RUB PIC FOR> 32 UX Posts to Hit Your Conversion Targets

BONUS LINK: 32 UX Posts to Hit Your Conversion Targets


User Design for Emotional “Flow” (SlideShow)

9 Sep

Design Tips | Design for Emotion and Flow (Design Slides)

“I believe Mihaly Csikszentmihalyi’s concept of “Flow” in order to create an emotional feeling within the End User is very important within design.

I like to design &/or lead my design team always keeping mindful to funnel the End User’s ‘psychological state’ or ’emotional flow’ within all online branding.

Often leading to the seamless emotional state that will also charge the EndUser with an identifiable positive energy feeling worth embracing AND that urges for return.

Many Wise designers and Information Architects are now embracing this view with me when it comes to FLOW and of psychological state pushed by design and it’s importance in the design process..” – BlotterMonkey

Designing with users in mind can be a tricky undertaking. Not only does it require of a sound understanding of who your users are, but the actual act of translating what you know about them into a well-designed target strategy is not always an obvious or easy path.

So along with the slides above here is some help getting started with the FLOW formula:

UPDATED! BlotterMonkey’s Facebook Timeline Cover Art Design Template

2 Jul

UPDATED Template Design (Built After the April 26-Facebook Page & Profile re-sizing)

Facebook has made some minor tweaks to the size of profile pictures which has thrown off a lot of people’s and brand’s custom designs for their personal profiles and now YOUR Facebook Pages.

Before the Fb Tweak & After!

So I went ahead and did the research for us and have an updated Photoshop template to get you started HERE:
Get the new UPDATED Fb Cover Template in Zip form – 

After company designers have meticulously created custom designs for their Facebook Page cover photo to cleverly connect with their profile picture, (Just like this example)  as have individuals for their page, Facebook has updated the size since April 26, of the profile picture on all Pages to 160 x 160 pixels to site 23 pixels from the left and 210 pixels from the top of the page.

The change has messed-up the appearance of many pages, as seen below, rendering once beautiful and custom pages and profiles into a mess:

Before & After

Before And After!

Has all of that cleverness gone down the drain? NO WAY! And I bring you the answer – an Updated Photoshop Facebook Cover Template (a beautifully rebuilt re-mix template: into new better, easy to use for nearly every stage of Photoshop user.. it’s a very well thought-out Template that’s been re-sized perfectly for the latest sizes(After Facebook’s April 2012’s Update!)..

So you can get your creative juices flowing again and get your Page &/or Profile back to its once glorious design or bring an entirely new idea into reality.

Learn more and get the NEW template below:

UPDATED Sizes!- Facebook Timeline Cover Art Template | Download the Template NOW:

OK my second round of Fb Cover Art Templates is ready.
I really hope I thought of everything to make it a Fun & easy process using and in case you are wondering,
This Template works for both Pages AND Profiles (since last updates)

Get the new Template in Zip form –

Download the Template Here!

Rub Here to Download the Template for your Fb Cover Here!

List of new dimensions summery:

There are important dimensions that you should know:

Cover photo size for Pages and Profiles: 850 pixels wide, 315 pixels tall.
New profile picture size: 160 pixels wide, 160 pixels tall.
New profile picture arrangement: 23 pixels from the left, 210 pixels from the top.
Cover photo size for Groups (which has no profile picture featured): 800 pixels wide, 250 pixels tall.

Detailed measurements when working on your own or for tweaking creatively:

  • Official Facebook cover photo size: 851 pixels wide by 315 pixels tall
  • Official minimum image dimension: 720 pixels wide
  • Profile icon cut-out: 133 168 pixels wide by 74 103 pixels tall, spaced 24 pixels from the left edge of the cover photo
  • Profile icon size: 160 x 160 pixels, with a minimum image upload size of 180 x 180 pixels

Important tips:

  • Facebook will overlay a 1-pixel transparent gray border on top of your image.
  • If you upload an image smaller than 851 x 315, it will be stretched to fit. This will make your image quality appear slightly grainy or distorted. The best practice is to upload an image that’s sized to Facebook’s dimensions.
  • Screenshot measurements reveal that only 314 pixels are displayed from a 315-pixel image upload. The top edge appears to be covered by the Facebook header bar. A test with a 314-pixel tall image became distorted when uploaded, so do upload a 315-pixel tall image even though only the bottom 314 pixels will be displayed.

So Get your hands on my Facebook template now Download the Template NOW: 

and let me know what you think!

Here is my tips for Fb Page Size Hacks – Tips for Successful Facebook Timeline Fan Page Design 

Need I mention my Template? UPDATED Sizes!- Facebook Timeline Cover Art Template | Download the Template Zip file NOW:

Don’t forget to enter your new url to the public

23 Mar

New Website, Blog, Feed, Micro-site, Name tag or Landing page?

Here is the much forgotten To-Do list for new URL’s you want public traffic to know about.

 This is mostly for DIY’ers that overlook this because, well lets face it, like many DIY’ers, you thought you could do it all yourself cheaper, well that’s not the best choice unless you do it for a living already, but I cant tell you any different– even with numbers showing that said & done you will more likely spend more in the long run…(that’s a whole other subject)
But I always try to list my help & tips for the noobs to you’re in luck with me around ;0)
I strongly believe Information is power and liberating as many people as I can until someone pays me enough to do otherwise.

OK Back to it shall we?, A few things DIY’s may forget to do after creating websites, micro-sites, new blogs-profiles, pages, feeds, etc..

Google FeedBurner  Don’t forget to Submit URL’s & RSS feeds to the public for traffic:  
Summed up one-stop micro-list for non-noobs:

Now we go onto the reminders/tips: 

If you haven’t then here is a list of things that YOU need to remember after setting up a new Website, Micro-site, Blog, Public Profiles-Landing pages…

  1. After you decide if you would like’  or a custom domain name  and set-up the site/blog:
  2. If you can: Add your selected domain name into Google webmaster tools.(  )
  3. Grab the webmaster tools verification meta data, add it to the head of your Meta Tags/SiteCoding …or ‘Blog’s/Posterous theme’ and adapt to what yours said is best to do in the help.

 You will want to tell the search engines about your new site or page.

Submit RSS Feed URL’s into FeedBurner! 

REMEMBER, it is worth it to set up a Google Webmaster & Analytics Account: 

Don’t forget to add Meta tag‘s for the search engine spiders! 

  • Here is a generator and how to for Un-Coders-
  • For Blogs or WCMS(Web Content Management Service’s like WordPress, Tumbler etc..)
    If you are using a blog site then search google with keywords “how to add meta search tags & keywords to ‘blogs name Here’ ” OR [and always do this first] Check out your blogs site’s help & How-to sections and you will often find the best easy answers to save time for their particular proprietary operation and how THEY set it up for YOU to do all this to serve the REAL webmasters wanting to add goodies for REAL companies to stay competitive w other CMS sites.

For any more I may have missed on the subject, feel free to ask me what I missed or add what you think is important.
I tried to start this with a small important part easy enough for anybody, but I’m looking forward to what you all find important and what subjects are worth going into more details about.

Blottermonkey’s FaceBook Cover Art Ps Template

15 Mar

Blottermonkey’s FaceBook Cover Art Ps Template



I put together a simplified Fb cover art template for Ps from other parts that I use for myself and tweaked it for sharing with others and so now i’m sharing it with all of you — This one should be easy enough for just about any level of Ps user to handle.

I endowed it with self revealing directions and steps where possible.
…plus I added the “Profile pic hack” Tips for help if you want interaction with your profile picture and the cover art, along with size tips along to help.
Here is the Folders:

I did what I could to simplify it for people of all (Ps) PhotoShop levels and set up slices, rulers and even place layers w instructions..

So hopefully it will make it fast and easy for you…
After opening choose to File/ ‘Place’ whatever picture you want into the template and size the area you want to show in the cover art layer to match size and shape that you desire, then select the correct slice to save for web and you will have your cover art.

  TIP: [Remember the slices tool] be sure to select the cover art slice before ‘save for web’, and ‘Selected Slices only‘ option to save time getting the artwork slice only, then repeat for the profile pic if want.. At worse you will save all parts & grab the one you want later. no biggie even for all levels of users.

  I put the slices in place but you can remake them if want to cover shape(cover area is self evident), you just have to select the correct slices before saving to get the right size and not end up saving everything else.

Here are some links for inspiration and tips: [Never forget to google 4tips or sizes whn lost]

UPDATE! FaceBook Pages: If you’re starting, revamping, or just thinking about a Fb Page for a Company, Fans, or anything crazy..
You’ll be interested in my Must Have Tips for Facebook Pages!

Make sure you drop by ‘Tips for Successful Facebook Timeline Fan Page Design'(Try to Say that fast!)

Back to Original Post!

I hope this helps.. For Pro Designers, Novice Art lovers, Do-It-Yourself-rs, anyone who wants more power over Fb design choices..


What the hell is Adobe CQ5?

19 Jan

What is Adobe CQ5 & how can it help me?

OK here is the quick skinny on Adobe CQ5 and how web content management system applications may be able to help you.

Adobe Communique 5, or CQ5, is a large-scale Web Content Management System or (WCM or WCMS) that is currently available from Adobe Systems (the makers of the well known Photoshop, Flash, Illustrator & the new Edge).

CQ was originally developed by Swiss company Day Software, the CQ platform changed hands when Adobe acquired Day in October 2010…and you will still some job requirements or boss shopping lists asking for experience in ‘Day CQ’ , if not the latest Adobe CQ5.

Adobe CQ5 is geared specifically for large companies and corporations with substantial -and often global- infrastructures. It combines web content management, digital asset management, and the social collaboration to deliver a solution that allows large companies to manage incredible amounts of information, multiple internal and external websites, a myriad of media assets, and detailed workflow.

Several of CQ5′s key benefits include:

  • Significant control over brand presentation
  • The reuse of templates and components while maintaining a unique look & feel(one of my favorites when doing  WCM myself)
  • Substantial reduction in organizational training costs
  • Adobe also contributes significant resources to the open source community, with over 12 Apache and 25 open source projects currently underway.
  • Some notable companies that use the Adobe CQ5 platform include General Motors, McDonald’s, Kodak, Volkswagen, Audi, and NBC Universal.

Here is a video with some quick answers about Adobe CQ5:

more info & sites about CQ5:

BlotterMonkey Bonus Whitepaper!

The 21st-century CMO: How digital marketing is driving organization transformation

Taking full ownership of customer experience management

“Today’s 21st-century CMOs are pursuing digital marketing across a large number of channels simultaneously.
As they do, they leverage the capabilities inherent in next-generation web content management (WCM)
This paper highlights the advances in closed-loop marketing that enable measurement and optimization of
digital marketing efforts. It also describes the challenges that CMOs face when pursuing digital marketing
strategies and how next-generation WCM solutions help CMOs overcome those challenges.

CQ5 Web Content Management from Adobe White Paper: 12112_Day_21st_Century_WP_ue_v6.pdf

Please leave your tips and more in the comments below,

Feel free to contact me if you would like to personally learn more about how WCM & I can help you & your content management.
Don’t forget to find me & connect starting with &

Can I Use HTML5 Now?

21 Sep

Using HTML5 Now

One of the fundamental principles underlying HTML5 is
that it is backwards compatible. With only a small number
of exceptions—such as <font> tags and frames—valid code
written according to the HTML 4.01 or XHTML 1.0 specifications
is also valid HTML5. Simply replace your existing
DOCTYPE declaration with the shorter HTML5 one:


That’s all there is to it! One of the reasons this “DOCTYPE” was
chosen is that it’s the shortest string that reliably prevents
browsers from rendering pages in quirks mode.
Of course, HTML5 introduces many new tags and attributes,
but there’s no obligation to use them unless you
need to—just as you probably never used every tag and
attribute in HTML 4 You also need to be aware of the
capabilities of the browsers your target audience is likely to
use. This is a constantly changing scenario, so it’s impossible
to lay down hard-and-fast rules in a book. In addition
to your own testing, a website like  is
more likely to provide up-to-date information on what you
can use and what’s best to avoid.

Much of the discussion about HTML5 has focused on the
new semantic elements, such as <section>, <header>, <footer>,
and <nav>. The idea behind the introduction of these tags
is to give page markup greater meaning. Up to now, the
only way of grouping related elements on a page has been
with <div> tags. On its own, a <div> has no meaning, so
it’s common to indicate its role through an ID or class.
Rather than using <div id=”nav”>, it’s more logical (and
less code) to use <nav>—as long as your target browser supports
the new tag.

Figure 1.0 shows the level of support for HTML5 semantic
elements as reported by in April 2011. Light
green shows full support; darker green shows partial support;
and pink shows no support. ( Figure 1.0 – )

 Figure 1.0 Support for HTML5 elements depends on the browser version.

If you’re in the fortunate position of being able to target
only the most recent browsers, you can forge ahead immediately
with the new semantic tags. (Semantic Notepad) However, most designers
need to cater to IE 6–8, which still represent a significant
proportion of the browser market and are likely to do so
for some time, even though I personally have never meet anyone
using such old browsers the numbers are scary enough.
*Browser Statistics Link  & *Browser Trends Link  & *How the Disabled use the web Link

Figure 2.0: Shows the the blog structure using the HTML5 ‘semantic’ markup. and a list of the new tags can be found here:

HTML5 Glog Demo 1 (The blog structure using HTML5 semantic markup)

Figure 2 : The blog structure using HTML5 semantic markup

Supporting HTML5 Semantic Tags

Dealing with browsers listed in Figure 1.0 that offer only
partial support for HTML5 semantic tags is easy. All that’s
needed is to add the following rule to your style sheet:

article, aside, hgroup, header, footer, figure,

figcaption, nav, section {

display: block;


You can apply other styles to these elements in exactly the
same way as you would to paragraphs or other HTML elements.
For example, the following rule applies the same
font family and size to both <p> and <article> elements:

article, p {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;


Unfortunately, IE 8 and earlier require an extra jolt of
encouragement to recognize the new HTML5 tags. You
need to use JavaScript to create a dummy element for each
type of semantic tag you want to use. For example, if you
want to use the <header>, <footer>, and <nav> tags, you
need to add the following in the <head> of each page:






Or as my Favorite tip to use:
Alternatively, you can load a tiny script from the Google
content distribution network (CDN) by adding the following
just before the closing </head> tag:

<!–[if lt IE 9]>

<script src=”

Ê trunk/html5.js”></script>


This is a 2 KB file of JavaScript wizardry devised by Remy Sharp that forces earlier versions
of IE to recognize the new HTML5 tags and apply CSS to
them. It creates dummy elements for all semantic tags,
saving you the bother of using createElement() for each
one. Although the file is small enough to host on your own
site, the advantage of using Google’s CDN is that the file
most likely will already be in the user’s browser cache after visiting
other sites, so it doesn’t need to be downloaded again, and again. Get it here & learn more)

( Read more about why to use Google for your jQuery Scripts & Google’s AJAX Libraries CDN here.  and learn more about jQuery here)

The predefined HTML5 CSS layouts in Dreamweaver
CS5.5 (File > New > Blank Document) use Remy Sharp’s
script in combination with a style rule to display the semantic
tags as block-level elements, ensuring almost universal
support for them in the future.

But What if they have JavaScript disabled?

Well now here is the problem: It’s not 100% foolproof.
If JavaScript is disabled in the browser, like IE leaves the
HTML5 tags completely unstyled. This wouldn’t be such
a big problem if the whole page was unstyled and would revert to the original unstyled,
but you end up with a crazy ugly mix of styled and unstyled elements!

In HTML5 Now (New Riders, 2010), Tantek Çelik  advocates a  smart approach.
He recommends wrapping HTML5 semantic tags in a

<div> and assigning it a class named after the tag like this:

<div class=”header”>


<!– header content goes here –>



This is undoubtedly the safest way to implement HTML5
semantic tags in a website, but it duplicates markup needlessly.
Although IE 9, Firefox 6, and other modern browsers support
the HTML5 tags.
Websites tend to need to be redesigned on
a regular basis, so there’s a strong argument in favor of
waiting for broader support when using for semantic tags.

But as we focus on all the backward compatibility we sometimes forget the point, and though it’s sometimes overlooked and is showing more & more important in our work as both designer & developer today, and that is ‘Forward Compatibility’.
Keeping that in mind, you will decide the balance of your projects needs individually for now.  The variables of each project themselves are the true determining factor in whether or not you are ready to start using HTML5 fully and using HTML5’s semantic tags and setting yourself up for multi-device-online-compatibility or not.

Sometimes even finding, (usually during your larger projects) that HTML5 can even solve some problems that only Flash could once answer. So it really is up to you the individual and the problems you want to solve,  your users, and your size of the project.

But I do recommend getting started on learning how to use HTML5 /CSS3 and taking advantage of the gifts they brings us even now, and I think having to tweak a few copy & paste backwards compatibility hacks until everyone is caught up is a small price to pay to get started…

I hope you enjoyed this topic as much as I did. I cant help but run a search on the subject and see it is a big hot topic right now. There is no shortage of opinions on the subject, both grumpy “I fear change” to “it will solve everything” attitudes, so please go keep your mind open to learning new things and enjoy the journey as you find what works for you.

-Robert (BlotterMonkey)

end. (updated)