How To Design A Blog And Make It Look Pretty

149
SHARES

How to design a blog

“How do I design my blog?” is one of the most frequently asked questions from new bloggers. Design of your blog is very important as the better looking your site is, the more memorable it will be for your visitors. More of them will stick to it, subscribe, return back and share it with their friends in social media. Let’s have a quick look at some of the important design elements you will have to consider during the design process.

Having a great header section is important as that is the first thing people see when entering your site. Always make sure to take your time to create a great looking header and navigation. Thinking of usability is another key thing to consider on your way to a great looking blog. You have to consider the font you are using, the size of the font, the colors, what you present in the sidebar and much more. Your visitors should enjoy not only the aesthetics of your site but also the ease of use, page speed and user-friendliness.

An increasing number of visitors browse the web from their tablets and mobile devices so having a design that looks great on smaller screens or touch based screens is another key consideration. First things first though. Let us take a look at how you start your own blog.

First step in designing your blog

First step is to pick the right content publishing platform that allows you a wide range of design possibilities. WordPress is my platform of choice. It is an open-source platform that powers more than 60 million sites. Using WordPress you will have plenty of choice for design templates as there are 2,500 free designs available. There are also many premium options like the one I am using on my blog. WordPress makes the process of finding a design less stressful as it is easy to switch and test different designs and find one that fits your needs best. I love it and run all my sites on it.

WordPress needs a domain name and a web server space to work. A domain name is the address people will type to access your site and a server space is where your content and files are hosted online. I recommend Bluehost. It is simple to use, offers a free domain name, an affordable hosting account with unlimited space and WordPress officially recommends it. Click on the image below to get the quick setup process started:

Choose your domain name

If you need help, you can find detailed instructions on how to install WordPress here.

Disclosure: I do earn a commission if you signup to Bluehost using my link at no additional cost to you. Please know that I only recommend products and services that I find helpful and useful. If you do choose to purchase through my affiliate link, thank you for your support!

Now that you have your WordPress up and running, let’s take a look at the different customization opportunities.

Things to consider when choosing a WordPress design theme

The ability to customize your design with a simple and easy interface varies a lot from one WordPress theme to another. Some have drag-and-drop, user friendly interface, some can only be edited and customized by CSS and coding. If you don’t have a coding or design background it is best to pick a template that allows customization without the need of coding skills. Or simply pick a theme that you really love as it is and have no need to customize. These are the things to think about when choosing a design for your site:

How to modernize your design infographic

  • Header section brands your site and is the thing the visitors see first. Consider how the header of the design looks like and consider how easy it is to change and customize it.
  • Layout options. Would you like to have one sidebar or two sidebars or maybe none? Would you like sidebars on the left or on the right or on both sides of the content?
  • The look of the front page. Does your theme support teasers for example? Do you have a magazine style front page option? A prominent subscribe and call-to-action position?
  • Which font and font sizes would you like on your blog? How easy it it to change the font, size and color? Font, font size, spacing between letters and line height all have a big impact on how your visitors feels when reading online. Screen resolutions are increasing which means that you need to make your content more readable for these new screens. Larger font makes your site more clear and easy to look at. Sans-Serif Fonts are best suited for digital content while you want your font size to be a 16pt at a minimum and should go even more to 20pt+ for best results.
  • Flexibility and enhanced features. If you’re not comfortable with CSS and coding, how many customization options and inbuilt features does the theme give you?
  • Simplicity rules in modern web design. Simplicity gives your visitors a better experience when browsing your content, it puts more emphasis on the content itself and makes your site load faster. How simple is the design by default? This also means you should think twice before adding too many animations, before adding extra banners ads or pop-up windows and before putting more things in your sidebar. Consider how this will affect your visitors and the user experience.
  • Support is important as the web and WordPress itself are continuously changing and your theme needs upgrades and latest bug fixes to continue serving you and your visitors.
  • Load time it takes to display your site. Aim for your site to be loaded within a couple of seconds at most. See here how.
  • Search engines are important when building traffic to your site. Your design’s code has to be clean and search engine friendly for traffic to start coming in.
  • Mobile and tablets. How does the design look on these devices? Smartphone sales have overtaken computer sales. Tablet sales are also growing and are soon expected to overtake computer sales. Mobile and tablet devices account for a growing number of global internet traffic (28% in January 2014). Mobile traffic has surpassed desktop traffic in many of Asian (India 60%) and African (Egypt 70%) countries where PC penetration is low. Sites that I run vary from 25% to 45% visitors coming in from mobiles and tablets.
  • Mobile responsive design is a smart design that adapts itself to the screen size of the device the user is browsing with. It works on everything from large desktop monitors to small screens on mobile devices. Responsive design provides optimal viewing experience for visitors, as the design elements are consistent with the standard design while there is no more need to zoom out, or zoom in or scroll too much around finding what you need. Google recommends responsive design as the best way to configure your site design because it is easier for the user and there is no need for redirection like on other mobile solutions. Try it now if you are reading this article on a desktop browser – shrink the browser size and see how the content resizes itself to fit your browser size. The images, header and content column will shrink, the sidebar will be moved underneath the content as the layout switches from two columns to one column. The layout switches depending on the screen size you are viewing my site on and it works equally well on any device. If you want to check how your site looks on mobile devices use a tool like this.
  • Fixed navigation bar. Many sites now fix their navigation menus to the top of your browser window so the navigation follows you as you scroll down the page. This helps the visitor easily navigate your site at any time and gets them to explore your content deeper. For this to work best you should think about what pages or posts you want to put into your navigation in order to best present your site.
  • Fixed widget. Traditionally when scrolling through a post you would have the sidebar towards the top but the more you scroll down the more emptiness and white space there would as the sidebar is finished. This is a waste of valuable space. Put in a sticky widget in your sidebar so it scrolls through with the visitor. You could have a subscription widget sticky in order to increase number of subscribers or social media followers. Or you can fix your popular posts in order to get more clicks and help people discover more of your content. Q2W3 Fixed Widget plugin allows you to do this.
  • Live search. This is very much like Facebook or Google search works. Upon starting to type a search query your visitor will get a drop down of different options and search results. It is a faster way to search than the default WordPress search. Couple of simple plugins are available to get this functionality: Ajaxy Live Search which looks and works pretty much like Facebook search does. The other option is Dave’s WordPress Live Search.
  • Infinite scrolling. Instead of splitting your pages with pagination you can just allow your visitors to keep scrolling continuously while your site loads more and more of your articles. You see this in action in your Facebook newsfeed, in Twitter feed and in Google image search results. As usual there is a WordPress plugin for this: Infinite-Scroll.
  • Single page sites. If you don’t have much information and want to present something in a very quick, simple, visually appealing and user friendly way consider using a single page site. The user just needs to scroll down the page to get all the information they need. This works well for landing pages in case you have a product, a webinar or an event you want to present.

5 most impressive free WordPress themes

So how do you pick a great design? The open-source community behind WordPress has created a large number of themes that are great looking and responsive out of the box. Free themes are a good place to start for any blogger so I recommend that you go into your new WordPress admin, go into “Appearance” and click “Themes”. Then click “Install Themes” where you can look through many themes and test them. Try for example and browse through “Featured” or through “Newest” or “Recently Updated”. Or use the tag filter to find some other themes. Simply click on Preview to see how the theme looks. Choose something that you like and activate it to put the new design live on your blog.

Another simple way to find a design is to go to your favorite blogs and see what design they use. When you browse blogs you love it is pretty simple to see what design they use. In many cases there will be a template name or link in the footer of the blog, or you can right click in your browser and click “View Source”. If you take a closer look at all the coding you will see lines of code with /wp-content/themes/something/ in them and the folder after /themes/ will be the name of the theme. When you have the name either search for it in Google or in your WordPress admin to learn more and to test it out on your own blog.

This is the list of five of the most impressive free WordPress themes for your inspiration. Have a look around the themes section, give some a try and see which one fits you best.

Responsive:

Responsive

Hueman:

Hueman

Attitude:

Attitude

Vantage:

Vantage

Twenty Fourteen:

Twenty Fourteen

There are also premium themes

There are also many premium options. I personally use premium theme Genesis, a theme that is responsive straight out of the box. Premium themes you have to pay to use (usually in the range of $20-$50) but they are more exclusive and more unique as they are used least frequently.

They are in many cases more flexible and customizable for people who have no design skills. They allow you to create a professional and unique looking blog without needing to code or use Photoshop. You can change columns, sidebars, fonts, font sizes, colors, header and many other design elements through a simple interface. With a premium theme you have better control of the look of your blog.

Premium themes are constantly developed, upgraded to the latest standards and have the full customer support in case you have some questions or need some help. For example HTML5 is the now and the future of web development. It is the new standard for coding. It is very good at cross browser compatibility and very mobile friendly. It is cleaner and smarter than the other markup languages and gives you a better experience and faster loading time. Premium theme like Genesis runs HTML5. Also when there is a WordPress upgrade you can count that the theme is compatible and is functioning correctly. Same is not always the case with the free themes that may have been a side project and were not upgraded which means that they might break in most recent versions of the main software.

Whatever you do just don’t spend too much time thinking about your theme. No matter how beautiful and pretty your site is, it will never grow without you spending time on creating great content and attracting visitors. So do pick a design and start blogging!

Share this infographic on your own site

Copy and paste the code below into your own site to inspire other to modernize their own projects:

<a href="http://howtomakemyblog.com/how-to-design-a-blog/"><img src="http://makemyblog1.how2make.netdna-cdn.com/wp-content/uploads/modernize-design-infographic.jpg" alt="10 Excellent Design Essentials To Modernize Your Site [Infographic]" title="10 Excellent Design Essentials To Modernize Your Site [Infographic]" width="772" height="2420"/></a><br/><small>Like this infographic? Get more blog design inspiration at <a href="http://howtomakemyblog.com/">HowToMakeMyBlog.com</a>.</small>

149
SHARES