When it comes to creating a consistent personal brand, it is absolutely essential that your website is a professional extension of that. As the blogging industry (more specifically the fashion blogging industry) becomes more and more saturated, the level of competition will continue to rise along with it. How are you and your website going to stand out?
The Answer: You're going to do everything better than your competition.
Well duh Marie, isn't that the whole point of competition? To do it better?
Yes smart a** it is.
Just kidding, I love you. But not everyone knows HOW to do it better. There are more big name fashion bloggers out there with amateur looking websites than one would think.
While I'm sure all of us would love to hire a custom web developer to build us a beautiful, professional looking, custom blog from scratch, we don't all have the luxury of spending thousands of dollars on a website right now.
Before we dive into the 17 specific ways to make your blog look expensive, I want to cover a few general concepts that will also help you in your quest for a beautiful blog:
- Keep It Clean and Simple - When it comes to designing an expensive looking website, less is more.
- Make Sure All Elements Serve a Specific Purpose - Do not add any features or design elements on your website that don't serve a definitive purpose. Clutter = wasted space, and a cheap looking website.
- Stop Copying Other People - It is fine to take inspiration from other beautiful websites that you admire, but it is extremely important to stand out with your own unique layout, design, and branding! For example, I remember the trend a few years ago was to name your blog Blank and Blank. Such as (I'm spit balling here) Glitter and Cupcakes or Cashmere and Couture. While this isn't necessarily a bad thing, it just doesn't stand out like a really unique blog name might. The Bottom Line: Stay as unique and true to your own style as possible.
1 . A Clean Sidebar
I see so many bloggers making the mistake of having a cluttered sidebar. Not only are you wasting precious real estate on useless junk when it could be making you money, it's just down right fugly and anxiety inducing.
Make one or two goals (max) that you want your sidebar to achieve. Are you seeking to make additional income with commission based ad banners (ex. rewardStyle ads)? Are you wanting to increase your Pinterest following? Are you trying to build your email list? Select a couple of goals and stick to them!
Make sure that every element in your sidebar directly contributes to achieving the goals that you have set. Note - that isn't to say that you can literally only have one to two things in your sidebar. Just make sure that the elements that you choose are aligned with your goals.
These are examples of some simple, clean looking elements that are not only aesthetically pleasing, but serve an actual purpose for your business:
Emily from Life With Emily, does a beautiful job with her sidebar elements. Each feature is framed with a simple white box, including the few advertisements that she does choose to display. This creates a polished look and has a nice effect on the overall aesthetics of her site.
Her category images feature the same transparent title box that can be seen on her "About Me" image above. Tying in design elements used in other parts of your website will create a cohesive look.
...AND THE BAD
In addition to being strategic about the elements that you DO place in your sidebar, I have compiled a list of elements that should NOT have a place in your sidebar:
Note - While, the Facebook Like Box Widget is probably the least awful out of these four, I still wouldn't recommend featuring one anymore. Yes it's still good to have likes on your Facebook page, but what are you actually going to do with all of those likes? It would be much more practical to use that space to promote your Facebook GROUP for example.
While the elements mentioned above are just examples, they should give you a better idea of the look that you should try and avoid.
2. Branded Post Cover Images and Collages
When I first started my blog, I made the mistake of not creating a blog post cover "template." Instead of focusing on creating my brand's signature look, I focused on what looked good from blog post to blog post. Had I initially taken the time to set these design rules up front, I could have been building my brand's exposure and brand recognition the entire time.
Some things to consider when designing your blog post cover look:
- Keeping a consistent font and/or font size throughout all covers
- Text placement - Ex. directly over the image, in an opaque box on top of the image, in a transparent box over the image, etc.
- How to Make It Unique - Play around with image placement, how you incorporate your branding and logo, etc.
Using consistent brand imagery not only builds brand recognition on social media platforms such as Pinterest, it makes a clean, professional, and (expensive looking) impression on your actual website visitors.
Here are some of my favorite blog post covers and branded collage examples:
3. Creative Use of Images
If computer coding isn't your strong suit, hyperlinked images just became your new best friends.
Essentially what I'm talking about is turning images into clickable links that will take you to another page of your website or an external URL. This makes creating custom looking buttons and interactive elements on your site much easier than coding them in manually.
DISCLAIMER: If you know someone that can actually code and is willing to make you custom buttons, graphic elements, etc. then do it. This is a bootleg way of obtaining a similar look in the event that you don't have the actual skills to do it the professional (correct) way.
SO WHAT EXACTLY AM I REFERRING TO?
Take a look at my blog sidebar. Do you see the category and archive buttons under the photo of me at the top? Those are examples of the buttons that can make your website look more professional. While mine are actually coded in the right way (thank you Squarespace), you can easily create the same look by making an actual image and hyperlinking it to the page that you want the button to take the user to. I demonstrated a few of the many ways that you can use image hyperlinking to your advantage in the examples below:
Note: All of the darker boxes are hyperlinked image "buttons" that a user can click on to take them to another page of your site.
Useful Tip - If you aren't a member of rewardStyle or ShopStyle yet, you can mimic the look of their shoppable widgets by featuring a single product image in your sidebar with a short description and a custom button underneath that takes you to that website or another page on your own site.
HOW DO I MAKE BUTTONS AND GRAPHICS?
I use Adobe Illustrator to make all of my blog and website graphics. Ya'll I'm not kidding when I say that I avoided using this program for years. You better believe that I am kicking myself now for not biting the bullet and learning how to use this AMAZING tool. The learning curve wasn't nearly as bad as I thought it would be, and I am SO happy with the results that I am getting from this program. I used to use other programs to make my custom buttons, but because Adobe Illustrator works in vector mode, the results are much crisper and more professional looking!
Note: Let me know in the comments below if you would be interested in a Adobe Illustrator walk-through and tutorial of the main features that I use daily for my own website.
I MADE THE BUTTONS - SO NOW WHAT?
Now that you have your image ready, it's time to link it to the page or website you are wanting to connect it to. Copy and paste this simple code below and replace the parts in CAPS with your image URL (found by going to your platform's media library and clicking the image) and destination URL.
<a href="DESTINATION URL GOES HERE"><img src="IMAGE URL GOES HERE" </a>
4. Wisely Chosen Fonts
Choosing a cheap looking font is like wearing flare jeans with mom sneakers. Just - don't. When in doubt, keep it clean, sans-serif, and simple! Once you have picked your font for the main body of your website, choose two more fonts to use for your website graphics. I usually go for a sleek, modern, sans- serif and a contrasting serif or handwriting font. These contrasting fonts pair nicely together and provide a sense of visual balance.
K. And you're done.
Only three fonts now exist in your world. Please don't be tempted to just throw random ones in willy-nilly because you think you're suddenly a graphic design goddess or something. ;)
Keeping it to three fonts will do WONDERS for the overall aesthetic of your website, pinky swear.
5. A Standard Photo Width
You may be starting to notice a trend here. Make a decision and stick to it darn it! My NUMBER ONE blogging pet peeve is when bloggers have images that are all different widths. Choose a standard image width that works for your theme and stick to it! Call me judgmental, but when I see bloggers with a hodge podge of different sized photos, I definitely knock them down a few rungs in my mental blogger ranking that I have going. Not even kidding.
The frustrating thing about this design rule is that it limits your selection of photos that you can use on your website. Example - let's say that you're doing an interior design post about grey sofas. You head on over to Pinterest for some inspiring images to include in your post and quickly find a favorite. However, when you get to your blog you quickly realize that the image is too small to be blown up into a crisp image that will fit your standard image width/size.
Find. A. New. Picture.
Yes it's annoying.
Yes you really love the image and you don't even recall asking your readers' opinions on your blog imagery in the first place... #M.Y.O.B
Just find a new one.
DO IT FOR THE BLOG YO. It's worth the extra work I promise!
6. A Comprehensive Theme
For all my WordPress ladies out there, this is for you! Stop screwing around with underwhelming WordPress themes because you don't want to spend the extra $50-$100 on a non-crappy theme. I saw you spend that much on lattes last month so don't even...
Below is a list of some of my favorite themes that are catered to fashion and lifestyle bloggers:
Helen $29.00 - Features a custom slider and tons of home layout options
Valentina $29.00 - Slider feature has several design options
BlueChic Themes - $80.00 - I have used one of their themes before and really liked it! However, I will say that I was not too crazy about the mobile version of the website.
Etsy - They have a TON of really neat WordPress themes at all price points. Definitely worth checking out.
7. Your Own Domain
Nothing says I have a cheap website (and I don't take my business seriously) faster than a blahblahblah2731.blogspot.com website. It is absolutely necessary to own your own domain. Not only does it look 100x more professional, Bluehost (my favorite web hosting platform) has tons of bonus features that make the switch more than worth it.
At only $4.95 p/month Blue Host is my absolute go to for simple, reliable web hosting with amazing customer service to boot. They also have a really handy analytics system built right in that is useful for tracking your blog's web traffic, bounce rate, and more!
8. Attention to Detail
Adding simple visual effects such as a professional looking post signature, a mouse over effect on your buttons that you have created (see #3), and a custom pin it hover button will add to the expensive effect that we are trying to create.
CREATING A POST SIGNATURE
Creating your own blog post signature is extremely easy to do using Adobe Illustrator or a free program such as Canva.
Simply create a new document in the size that you would like your signature to be. Select the font that you would like to use (I use a hand writing font that looks similar to my own) and type your name. Save the image as a jpeg or png, and you are good to go! Now all you have to do is insert the image at the end of each blog post.
CREATING A BUTTON MOUSEOVER EFFECT
Check out this really simple tutorial from Carrie Loves that will teach you how to create a mouse over effect on social media icons (which you can easily apply to your custom made buttons or images). Note - In the tutorial she mentions uploading your photos to Photobucket so that you can obtain the URL to use in the HTML code that she provides you. This isn't necessary because you can just upload the images to Blogger or Wordpress and use the URL given to you in your media library.
CREATING A CUSTOM PIN IT HOVER BUTTON
While you can manually code this effect into your website, using a Wordpress plugin to do this (sorry Blogspot ladies) is MUCH easier. jQuery Pin It Button for Images is the plugin that I use on my own website. I love it!
All you have to do is install the plug in, create the image that you are going to use as your pin it button in Adobe Illustrator or Canva and save it with a transparent background. Upload your image using the plug in and you are in business!
9. Blog Post Previews
Adding a preview button to each post on your blog home page is such an easy way to de-clutter your website.This simple change will clean up the look of your home page as well as raise the chances of visitors seeing more of your content at one time.
Jess from The Golden Girl, has a simple button featured that users can click to read the full version of the post.
ADDING A 'READ MORE' BUTTON TO YOUR POST
Quick Note - I am explaining how to add a 'Read More' button on Wordpress. Other blogging platforms are going to differ. Additionally, each Wordpress theme is going to have a different looking 'Read More' button. To specifically customize your own, you will need to find someone that is proficient with CSS and coding to help you make one.
Okay, now on to the helpful part.
Open a new blog post and type the first paragraph or two (depending on how long you want the preview to be). Click the button that I circled below, and you will see a dashed line appear. This is where the button will appear on your post once you save it. Voila! All finished.
10. Professional Photography
These days, it is absolutely essential that you have professional photography on your website if you want to be taken seriously as a blogger. There are several options that you can choose from to achieve this look, so don't panic!
Stock Photography - There are so many websites with gorgeous (often FREE) stock photography that you can use on your website. The only issue that I have run into with this is that because it is stock photography, you are running the risk that a ton of other bloggers are using the same images as you. Remember, we want your website to be as unique to you and your brand as possible! For this reason, I would use stock photography sparingly.
Hire a Photographer or Shoot It Yourself - As a life and style blogger you are more than likely going to need to have custom photos done of your content. You can achieve this by either hiring a professional photographer or shooting them yourself. For a detailed breakdown on the pros and cons of each, make sure to read my post on DIY photography vs. Hiring a Professional Photographer.
11. A Unique Blog Layout
As the pioneer fashion bloggers that paved the way in our industry continue to evolve, so do the layouts of their blogs (and the price tag it takes to create their web design). While there is nothing wrong with having a basic blog layout (typically with a right hand side bar and some sort of banner element at the top of the page), mixing it up a bit will do wonders for the aesthetics of your site.
Because more advanced layouts are more difficult to create, web designers charge a premium for a custom look. You can mimic the look of an expensive custom looking website by investing in a Wordpress theme that pushes the boundaries a bit.
Look for themes that have a lot of different layouts and versatility. The more control that you have over visual features and layout of your site, the easier it is to create an expensive, custom look.
12. Wider Margins
You might be wondering how using wider margins will make your blog and website look more expensive... When it comes to pre-packaged blog themes, a lot of them use narrower margins for text. Creating wider margins on your website will remove any connotation that the reader might have with an amateur looking blog theme, as well as make it easier to read the text itself.
13. A Top of the Page Button
Nothing is more annoying to me than viewing a blog or website that has a long page, or god forbid, infinite scroll, and no way to easily navigate back up to the top of the page. Adding a simple "Top of the Page Arrow" is a quick feature to add, and one that will contribute to the overall professionalism of your website.
Here is a comprehensive tutorial that will walk you through the process of creating and implementing this useful button on your website. Trust me, I'm not coding wizard, and while this tutorial may look intimidating, they do a great job of providing detailed step-by-step instruction to guide you through the exact process. I encourage you to at least give it a go!
14. A High Quality "Avatar"
It is important that users see what you physically look like quickly after navigating to your website. Being able to put a face to your work and writing will dramatically boost your relatability factor and increase the chances of forming a real connection with your blog reader.
Here is one of my favorite examples of a professional looking head shot/avatar (for lack of a technical term) created by Jess Keys of the Golden Girl.
15. An Organized Menu
When it comes to choosing the items that will be linked in your main menu bar, it's important to get organized In addition to listing the essentials such as About Me, Contact/Partner, etc. it is important to list your post categories and extra content in an intuitive way for your readers to navigate.
Brighton's drop down menu is a great example of this. Instead of just making an "outfits" category, she breaks down the content further into individual seasons. This simple detail makes it so much easier to navigate her website and subsequently purchase the products that she is recommending.
16. An Effective 'About Me' Page
Your 'About Me' page isn't a page for you to talk about yourself and list meaningless facts, that face it, no one really gives a shit about. Treat your about me page as the prime piece of website real estate that it is.
The focus of this page needs to be on selling your brand and your product. If you don't sell physical or digital products on your site (most people don't) then use this area to sell your brand. Aka you.
Of course in order to sell your brand (you) you are going to have to talk about yourself. That's fine. Just be strategic with the information and personality that you are conveying to your audience.
For example, if you focus on being the relatable down to earth girl that everyone wants to go get a drink with, then make sure to convey that on your 'About Me' page. Talk about yourself in a way that strengthens your personal brand.
17. An Organized Archive Page
You can do a lot with a properly organized archive page. Kate from Lonestar Southern does a great job of this with her "Shop the Post" archive page. This allows users to shop the post directly via rewardStyle without having to navigate to the post itself. (Note this is an advanced archive page that would require someone proficient at coding to create, but it serves as a wonderful example of what can be done).
A simpler, DIY Wordpress archive page could be different headings labeled for each month and year linked to a tag page with that month's posts. You can create this by adding a month and year specific tag to all posts from that month and then linking the headings below to each subsequent tag page.
You could further jazz up the page by adding other sections to the page with your blog's post categories and top five most popular posts. Add a professional quality image of you or something relevant at the top of the page, and you have yourself a functioning archive page that your users can navigate your content with! This easy hack requires no coding experience and effectively mimics the look of an advanced archive page.
By taking these small manageable actions, you can create a professional looking website without paying the professional quality price tag. I would love to hear YOUR favorite tips and tricks to making your website look expensive below!