Category Archives: Website Redesign

BrainShape gets a fresh look, and a new domain for 2021

As time progresses and your business shifts, we make changes to our websites to meet business needs.  But after a while many small changes can add up to a look that isn’t as cohesive as we’d like!  For long time client BrainShape, a refresh was in order.  We did a quick turnaround refresh project that included a fresh look, updates to functionality, and minor fixes and improvements, and also updated the domain name.  If you’re in Northern Virginia and in need of neurofeedback or hypnosis, check out the new!

Drag the slider below to see the before and after of the home page! 2021 refresh


Before and After: Provenance Rehabilitation

This recent redesign was one of my favorites.  It’s always fun to take a dated website and turn it into something usable and beautiful.  You’ll notice that not only did we update the logo to something that reflected their core brand in a more modern way, we also changed the feel and the focus of the site from cold and clinical, to warm and vibrant—moving the focus to the desired outcome versus the procedures themselves.  Check out more in our Portfolio, or visit Provenance Rehab to see the whole site.

Move the slider on the image below to see the before and after!

Make your posts look good on Facebook: Open Graph tags

wordpressfunYour Open Graph tags determine how your website looks when people post a link to it on Facebook.  It also determines how the site looks when you display your blog/news posts on your Facebook page.  I have mixed feelings on whether a Facebook page for your business is really worth it (hint, it totally depends on what type of business you have) but as part of the redesign I set up a new Facebook page for Dabbled Studios, and blog posts here will show up there.  So when they show up, they’d better look good, right?

If you want to be sure how your site pages/posts look to Facebook, you can use the Facebook Debugger.  Just paste the URL to a post, or a page, and click the Debug button, and you can see your site the way facebook sees it.  If you have a WordPress site, it generally won’t look too bad by default, by I wanted to make sure my featured image was the image shown (rather than whatever FB picks!), and generally make sure my posts and pages looked how I wanted them to look.

As part of the site redesign, I pulled all my Open Graph settings into a function.  The code I used is commented below.  You can put this in your functions.php file, or in a plugin, if you’d like to use it.

function insert_opengraph() {

	$current_category = single_cat_title("", false);  //get the category name if it's a category page

	global $post;
	setup_postdata( $post );  //get the excerpt function to work outside the loop

echo '<meta property="og:site_name" content="'. get_bloginfo ( 'name' ).'"/>'; //set the site name

//treat the front page, post/pages, and archive pages differently
	if ( is_front_page( )  ) {    

    $excerpt  = get_bloginfo('description');
	 echo '<meta property="og:title" content="' . get_bloginfo ( 'name' ) . '"/>';
        echo '<meta property="og:type" content="website"/>'; 

} elseif (is_singular() ){ 
    $excerpt = get_the_excerpt();
	 echo '<meta property="og:title" content="' . get_the_title() . '"/>';
     echo '<meta property="og:type" content="article"/>';
     echo '<meta property="og:url" content="' . get_permalink() . '"/>';
} else { 
    $excerpt  = get_bloginfo('description');
	echo '<meta property="og:title" content="' . $current_category . ' Archives"/>';
	echo '<meta property="og:type" content="website"/>';

		echo '<meta property="og:description" content="'.$excerpt.'"/>';

//get the featured image, and if not, then get a default image. be sure to set the url.
		if(!has_post_thumbnail( $post->ID )) { 
		$default_image=""; //default
		echo '<meta property="og:image" content="' . $default_image . '"/>';
			$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
			echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';

add_action( 'wp_head', 'insert_opengraph', 5 );  //insert into the header

I used snippets from several sources for this code.

Website Redesign: The new logo

One of the first things we wanted to do with the redesign was fix up the logo.

The old logo had basically just evolved from a pure text logo; it wasn’t something that I’d spent a great deal of time on.

Some old iterations:



So the new logo needed to look a little more intentional, plus it needed to fit with the new website.  I wanted to keep the dandelion, but I’d never really liked the way it was just stuck in the middle of the words.  The other thing I wanted to do was to have a small logo that could sit at the top of the website, and this one did not really work well at a small format.

I’m still playing around with this, as I need to work a bit on how it functions in pure black and white, but rather than let perfect be the enemy of good, it’s being released to the wild with this redesign launch.  I like that the box (shown in a sea blue here) can be done in any color in my website palette.

So by itself (the transparent background is indicated by the grey and white check):


With the name:


Wide Full text version:


Black and White only version:


Designing the new DS website for 2014…

What do they say about the cobbler’s kids having no shoes?  Well, the Dabbled Studios website was looking a bit dated, and wasn’t as easy to keep updated as it should have been, so it was definitely time to squeeze in an upgrade and a bit of a facelift.

Some requirements:

  • Freshen the Logo – the old logo was difficult to read a small sizes, and was basically a text logo with a dash of dandelion.
  • Keep the Dandelion – The dandelion photo (used as a site background) and the dandelion image was definitely branding that we wanted to keep.
  • Have a little fun with the design – we do web design, not corporate accounting.  There was no reason not to be a little creative.   Related: have some fun with CSS3.
  • Be responsive – The old site was not mobile friendly or responsive… that just wasn’t on the radar several years ago when it was designed.
  • Make it easier to update the portfolio with new projects.  Business would get busy and maybe all we’d have time to do was stick up a blog post about a new project completion.  But that project wasn’t making it to our recent projects page.
  • Include some case studies, or at least more extensive writeups, on some featured projects.
  • Create a new Facebook page.

In the next several posts, I’ll talk about what we’ve done, and where we still need to go.