Archive | Tutorial 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.

How To Get Your Plus Profile’s Vanity Name

15 Mar

How To: Get Your Google Plus Profile’s Vanity Name/URL:

(This Social Media Tip is beneficial for many Social Media Marketers, Brand Identity Companies, and of course the everyday Personal Users as well) 

Hi Kids. If you’re like me, you may have been a little disappointed about your G Plus profile’s link/URL.
And even maybe a little confused as to how to share your profile with all those ugly numbers for your URL and no place telling you how to identify you in the url on the profile settings.
So I did some research and found out some nice answers to help this problem.

This is especially annoying if you are a company or self brand because you most definitely want to use your Identity Brand Name or even your Personal Identity for your URL like Facebook has allowed and website name-servers.

In short, you want a ‘Vanity Name for your Plus Profile’. One that will to fit nicely into your Brand’s Identity to share what or who you are. I thought about making my own original URL myself on a web server and just making a fast redirect to my Google profile  that I could share with others, one that is nice & simple….and then I thought about maybe starting it as a service for others I know with the same desire…BUT then I found that someone already has! Thank Glob I dont have to do it myself! And so I thought it was about time since I was taking the day off, to share this tip with people who may not know about this.

So I am going to help a brother(or sister) out and tell you how you can easily claim your google plus profile vanity URL. UN-Like Facebook, Google plus currently does not support vanity urls. Just like pic below shows below:

In Facebook, we had an option to choose our own custom usernames.Google Plus currently shows a long numeric string of digits as our Plus profile URL which looks very ugly and our friends can’t even track us with that lengthy mash of numbers for a URL.
( Rub Here! on how to get your name in Facebook if you haven’t already)

So now there’s a crapload of applications for just this problem. Is “Crapload” one word? idk? doesn’t really matter I guess. Anyways, Yes, since the release of Google+ many apps have been setup and are competing over which of them can manage to register the most number of your G+ URL’s. So I’ve listed here the main ones.

Ok, I bet your ready to get started so here I go with the goods:

So here’s the list of services for you to choose from, just pick any url changing service. The only thing difference  about these options is their name’s, they all do the same thing.

The deal is simple. Simply visit your preferred site from the list above, enter your Google+ ID i.e. (JUST the numeric string of numbers) and then type in your Brand Name (or nickname for personal users) that you wish to assign as your google plus profile’s vanity URL. And then click Add.

Finally you get a nice looking URL that you can be proud of & share with you clients, colleagues, and friends. When your clients or friends click that link, they will ‘instantaneously’ get redirected to your google profile page and no one else is the wiser!

Sweet!, now you have your own sweet looking(or professional) Plus Profile Vanity URL right?!
Just like mine right here:

As you may notice I happen to use but they all do the same thing, I just happen to like their name for my URL most. So take a minute and decide which company’s URL/name you would like best for YOUR URL Vanity name before your own?! if that made any sense. 

TIP:  if you ever forget your URL later they have the option to find it again for you, but more than likely it’s just your nickname added to the end of the company’s URL you used like example:  ” Blottermonkey” to would be 

BTW: These services are not a product from Google. They are third-party applications that allows you to set a custom Google+/ Plus username/Vanity URL. Google+ will soon bring the vanity URL feature so keep your eye out when it comes. But until then, you now have options.


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..