As a child, I was fascinated by watercolors, but with studies taking higher priority, I never got around to trying my hand at it. However recently I just gathered all the supplies, and started playing around with watercolors. Really, it so much fun, a great creative outlet. One of my favorite things to do with watercolor is lettering. The combination of calligraphy + watercolor creates something that is so intricately beautiful. 

And as with everything, watercolor has its digital counterpart too. You can see a variety of tools that imitate watercolor effects using a computer. You don't need physical brushes and paints now, every possible effect can be created on your computer. A few weeks ago on ALO, I shared my favorite watercolor brushes for Photoshop, so head over here to download and use them - 5 beautiful watercolor brush sets for photoshop.

Are you a fan of watercolor art?
Share Share to Facebook Share to Facebook Share to Facebook Share to Twitter Share to Facebook Pin This Share to Facebook 0



I am super excited to kick off this blogging series Blogging building blocks (#bbb) with my friend, Holly from Bloomin' Rouge. We thought it would be a great idea to share little things we have learnt over the course of our blogging journey that may be of help to our blogger friends out there. This is going to be a weekly series and will be on for 4 weeks starting today. Today we are discussing blog design and here are 15 resources to aid your blog design process.

Gathering Inspiration

Gathering ideas and inspiration is the first step towards a new design. This is the most exciting and important part, and spending a good chunk of time here would make the rest of the process a lot easier. While gathering ideas, it is good to keep in mind the mission, voice and aesthetic of your blog.

Pinterest is one of the best places to find visual inspiration. Create a secret inspiration board to pin all the images that inspire your design in terms of color, fonts, patterns, layouts and themes. 

Behance is an awesome platform created by Adobe to showcase creative design and art work. You can find a blast of inspiration in the work created by designers all over the world.

Evernote web clipper: Many times while browsing other websites, you may come across features that you might like for your own design. You can collect these in Evernote by using the web clipper add-on for your browser. Just clip the webpage and it will be stored for you to reference later.

Sketchbook Express: I love the idea of sketching the layout and other design elements like headers, icons etc. on paper to create a mock up of the design. Paper and pencil are great, but if you are on the go, Sketchbook Express is a great app to sketch a design on your phone.

Choosing Design Elements

Adobe Color: If you want to put together an effective color palette for your design, Adobe Color is the place to go. It makes the whole process easy by providing pre-made color palettes that you can choose from and also an interface to create your own custom palettes.

DaFont is a reservoir of free fonts that you can download and use for your design. From beautiful script fonts to funky to formal, you can always find a font to suit your design needs.  

Google Fonts is another wonderful, free font resource for your blog design. It is super easy to integrate with any blogging platform and you can set it up for use in seconds. 

Font awesome: Do you struggle to find the right icons for your blog design, for eg. social media icons, navigation icons etc.? Font awesome consists of a huge collection of icons that you can easily use in your design. 

Creating Graphics

Adobe Illustrator is a great tool to create graphics like headers, patterns, buttons, signatures for your design. Though it has a learning curve, the possibilities that it offers are endless.

Canva is a great free alternative to Adobe Illustrator. It makes it super easy for even non-designers to create awesome graphics within minutes. It has a huge library of fonts, textures and images to choose from, and is a very user-friendly platform.

Creative Market: If you want to avoid the hassle of creating graphics for your blog, Creative market is an awesome place to find pre-made logos, headers and other graphic elements for the design. 

Learning Software & Coding

Learning to code is easy, all it takes is a bit of patience and some time. Here are a few places to help you develop the skills required for designing your blog.

Skillshare for creating graphics for your design (Using Adobe Illustrator, typography, color usage etc.)

Lynda for learning HTML, CSS, Javascript, PHP - required for coding the design.

Code Academy, an interactive platform to learn and practice web design coding.

Stack overflow, the best place to find answers to any technical questions that you may have. 

Ah, that was a long list of resources. But I am sure, these gems will go a long way in helping you create a great and effective design for your blog. 

Are you excited for this series? Me and holly definitely are, and next week we will be discussing blog photography. Head over to Holly's blog to read about 5 steps to creating a great blog design.

And if you have any questions related to blogging that you'd like for us to discuss in this series: 
Tweet us your questions with the hashtag #bbb :) 

We'd love to hear your tips  for a great blog design!
Share Share to Facebook Share to Facebook Share to Facebook Share to Twitter Share to Facebook Pin This Share to Facebook 8


A couple of weeks ago, I tried my hand at baking brownies and it turned out to be a pretty pleasant experience considering this was my first time at it. Beginner's luck you say? Maybe!

I am more of a cake and pastry person, but these brownies just got me with a perfect mix of the softness of a cake and the crunchiness of a cookie. This is a pretty easy recipe and you can whip up your own delicious brownies quickly, here's how:


  • 1/2 cup chocolate chunks 
  • 6 Oz. milk / dark chocolate chips 
  • 3 large eggs 1/3rd cup vegetable oil 
  • 10-12 crushed walnuts 
  • 1 Tbsp. almond butter 
  • 1 Tsp. vanilla extract 
  • 1 cup all-purpose flour 
  • 5 Tbsp. raw cocoa powder (Rich in anti-oxidants) 
  • 1 cup brown sugar

  • Pre-heat the oven to 350 F, prepare the baking pan by lightly greasing it with a cooking spray. 
  • In a saucepan, melt the chocolate and almond butter together slowly. Once it begins to cool down, stir in the raw cocoa powder. 
  • To this, add flour, sugar, vanilla extract, eggs and oil and stir till they mix well together. When the mixture is almost ready, stir in the chocolate chips and crushed walnuts. 
  • Pour the mix into the baking pan and bake for a good 30-35 min.

I absolutely loved baking these brownies, they are super easy to make and are mouth-watering delicious. In the mood to indulge? Look no further - these brownies are a real treat!

So will you be trying this recipe? Happy hump day folks!
Share Share to Facebook Share to Facebook Share to Facebook Share to Twitter Share to Facebook Pin This Share to Facebook 10


I love circular profile pictures; they are compact, cute and simple. But that is not the only reason why you see circular profile pictures on many popular websites. 

What are the benefits?

Have you ever wondered why Twitter, Google+, Instagram etc. all have circular profile pictures? This definitely has something to do with User Experience (UX) design. You can read about it in details here but the main reasons are:

  • Sharper edges take the focus out of the image
  • The human mind is conditioned to think of sharper edges as harmful and rounded edges as safe
  • Rounded edges are considered to be easy on the eyes as they are better for visual information processing

Then, why not use these benefits for your blog's profile picture? However, I think this entirely depends on the aesthetic of a person, so there is no right or wrong when it comes to this choice. 

5 simple steps to a round profile picture:

If you are the one for circular profile pictures, then here is an easy way to create one from a square or rectangle photograph in Photoshop. 

Step 1 : Open your photo in Photoshop by going to File > Open > Browse your file location. If your layers panel isn't open, locate it by opening Windows > Layers (select). If your Tools panel isn't open, locate it by opening Windows > Tools (select). 

Step 2 : Select the Marquee Tool from the tools panel. Right click on the icon and select the Elliptical Marquee tool

Please click on the picture to enlarge

Step 3 : Using the Marquee tool, mark the region of the photo that you want in your profile picture. Since the tool is elliptical in shape, you can carve out a circle easily and you can adjust the size and shape by just playing around a bit. 

Please click on the picture to enlarge

Step 4 : Once you have the circular dotted outline, right-click and select Layer Via copy. This creates a new layer in the layers panel. Now just click on the eye icon next to the Background layer  to make it invisible which leaves you with the circular picture that you just created.

Please click on the picture to enlarge

Step 5 : If you need to, just crop out the edges and adjust the position of the circle. To save the image, Click File > Save for Web > Name the file and click save. That's it, you are done :)

Circular cropping is best for images that are not too zoomed in, as it gives you a nice boundary around the face without cutting into it. I am currently just waiting to take a better headshot for a round profile picture for my blog ;)

What about you, you like round or square?
Share Share to Facebook Share to Facebook Share to Facebook Share to Twitter Share to Facebook Pin This Share to Facebook 17


Did you know that a significant number of internet users now surf the web through mobile devices? Have you ever wondered how many visitors view your website on their smart phones and tablets? If you are curious, you can check your mobile stats through your Google Analytics dash board.

To do this,
Sign-in to GA > Reporting Tab at top > Audience tab on the left sidebar > Mobile > Overview

What is responsive design?

Responsive websites respond to their environment by adapting the design to the device they are being viewed on. So basically they are easy to use and look great on all devices - smartphones, laptops, tablets and desktops.

Why is it important?

1. Responsive design provides a better user experience: It offers optimal viewing experience to the user by making reading, navigating, resizing, scrolling and panning much easier than non-responsive designs.

2. Responsive design helps with SEO:

Google emphasizes the importance of mobile responsive design.

Firstly, you might have already observed that a "Mobile-friendly" tag  is added in the search results to sites that have responsive designs.

Secondly,  and most importantly, Google recently announced that starting April 21st, search engine rankings will take into consideration the mobile friendliness of a website. This change will significantly impact the visibility of your website in the google search results. So if you care about the SEO of your site, this is definitely something you want to consider.

Is your blog mobile-friendly?

So the first step is to find out if your blog is mobile friendly or not. To do this, google has created a handy tool and you can take the responsive design test here.

How to make your blog design responsive?

If you are on the blogger platform, there are two options:

1. Enable the mobile template for your blog:

To do this,
Go to Blogger dashboard > Template > Click on the wheel icon under Mobile > Choose the option: Yes. Show mobile template on mobile devices.  > Click save
This solution is automatically provided to all blogger users and is an easy way of making your blog mobile-friendly.

However, the disadvantage is that blogger replaces your template with its own default mobile templates, which erases all the customizations of your site when viewed on mobile devices. So the mobile template is basically not customized for your blog.

2. Add responsive design code to your template:

In order to make your template responsive, you can edit your CSS in a way that will adapt your design to the device its being viewed on. Now the way you edit the CSS is entirely dependent on the layout, design and your template code. There is no ONE code that will make your blog instantly responsive. 

If you are good at coding CSS, here are the steps that will guide you through writing code that will make your design responsive.

a) Step 1: Add this code to the <head> section of your template:

b) Step 2: Search for ]]></b:skin> in your template and add the following code just before this:

Like I said before, what CSS code goes in each of these sections is entirely dependent on layout, design and your template code. This is different for each blog and if you are comfortable with CSS, you can do this!

Else, don't worry, I am here to help. I am currently offering a Responsive design add-on in my Etsy design shop through which I will be working with you to make your blog design responsive. 

If you have a lot of visitors viewing your blog on mobile devices, it is definitely important to consider getting a responsive design now! If you have any questions about this, I am happy to answer.

Is your blog design responsive? 

Share Share to Facebook Share to Facebook Share to Facebook Share to Twitter Share to Facebook Pin This Share to Facebook 17