Hi everyone! Today I bring you this post which is a little bit different and with lots of utility to improve your site and turn it into one of the best blogs or websites of your sector.

In first place, I’m sorry to tell you that we don’t bring a magical solution to achieve that. However, what I’ve proposed myself today is to bring you some thoughts about how we can maximize our site’s content to meet our targets through an easy and creative task: by boosting our site’s design to turn it into something unique and beautiful.

best blogs and web design

There’s a statement which in first sight seems obvious: web design is important. However, if we take a look at some blogs and websites we can realize that in so many cases the design is neglected. All of this makes us think about if we give to design the importance that it deserves.

Well then, today our goal is understanding in an objective way the importance of your site’s design and how we can improve it. Let’s go then!

 

Best blogs and websites tips: Design, your cover letter

Before we decide which is the best design for our site we should understand why it’s so important and for that we are going to explain it by showing you some examples.

Sure that so many times you’ve heard the comparison that Google search engine is like a big commercial zone, and also that being in Google first page is like being in its best street with the best shops, with more affluence of people and therefore, the most prestigious. Let’s think for a moment in these shops. I’m sure that they have excellent products with lots of quality. But hey, wait a sec. These shops, how do they look like? Can we imagine these exquisite products placed in a careless and scruffy environment?

Setting aside that we have to work in our site’s SEO for being in that Google first page (we can’t neglect it!) we have concluded in a good affirmation: we must achieve that the site where our content is placed shines equal to it.

best blogs and websites in google

Your site with quality products

At least it’s like this at my point of view. However, both of them are important (good content and site design) and if they exist jointly, we’ll assure our success to a large degree. Let me explain myself: imagine for a while that we’ve just read an amazing book. Besides that, it didn’t caught our attention for its author or recommendations, but it did because it had a beautiful cover which made us stop in front of it. Then, probably we’d never pay attention to it if it hadn’t had that cover; on the other hand, even though a book has a beautiful cover, we’ll never pass from the first chapter if it isn’t good.

Well then, both factors are fundamental. Design is the first thing that our visitors see in our site and, if it’s good, makes our visitor feel more comfortable in what he (or she) is seeing, increasing the chances to grow his/her interest on your site. Good design gives, in some way, more “quality” on what we offer.

 

Showing to the world what you’d like discover

Indeed, this is the starting point that we should take when we start to trace the main lines which will compose our design (or redesign) of our website: we should show to our visitors what we’d like to see. However, when we affirm this we don’t want to say that we should focus in the content we’re going to show, but what we’re going to do to highlight it and capture our visitors’ attention.

 

Structuring the content

The structure is a fundamental point that we should consider before anything else. Nowadays, there exist some trends that we can see in some of the best blogs and websites which presents the content of the site in a beautiful and efficient way. Also the advantage of using this trendier structures make your visitors feel familiarized on what they are seeing but no lost or overwhelmed. Who had never thought the typical “oh wow, so nice, but where should I click”?

Some of the most used structures in this days and that we should know are the following:

For websites

  • The One Page: these have been protagonists in these last years and are the ones which shows all their content in one only page, differencing its sections by inserting fixed contents/full width content. This structures are perfect for companies who launch one single product, freelancers offering his/her services, presentations for web complements, etc.
  • We could say that the opposite of One Page structure are the pages which segments their content in different pages, like: about us, shop, blog, etc. We have here in Anmar Studio a good example of that kind of structure. These structures are more “classical” than the previous ones and they are ideal for websites with lots of content as could be magazines, creative teams, online shops, freelancers with portfolio, etc. If we choose this structure for our site, we have to think about how to organize these pages through the navigation menu:
    • Main top menu: This is the most used menu as it has more accessibility, especially if it’s always located at the top of the page, regardless of the user scrolls the page or not.
    • Top menus: A good option, especially for online shops, is disposing two top menus, in which the pages or actions that the user can do are even more segmented, e. g.: login, register, shopping cart, search bar, etc.
    • Responsive menu: Are the ones which remain hidden and only appear when you hit a specific button or text. This kind of menus are much more dynamic and also they look great in mobiles and tablets, but also they can create confusion to someone who visit your site. We always have to think about the kind of public our content is addressed to, and if we decide to incorporate this kind of menus, we have to assure that the button which calls the menu action is well visible and accessible.
  • A final structure that we can also see in some sites with fresh designs is the “Slideshows”. This pages are the ones which shows their content in different slides which fill the 100% height and width of your browser window. They are perfect for the presentation of creative projects or, definitely, websites which biggest attraction are their images or clips that are displayed foreground.

For blogs

  • When we talk about blogs, there’s nothing like what we could say “the lifelong classical blog”. This one, which is the one that we have here in our web, is the one which shows its posts chronologically, one by one and which has a sidebar (two at most), in where we can find widgets to social networks, site advertising, etc. This structure is with no doubt the most known in the whole Internet.
  • The Grid: This kind of design is the one that shows its posts in some kind of “boxes” which are showed chronologically too but, as they are narrower than the other conventional structures, they are placed one next to another.

Although some of this things seem obvious and even with limited importance for our site’s design, it’s very important to have in mind these factors before we start shaping the visual design, as the structure is what is going to define the organization of your site’s content.

 

Visual appearance

Once we know how we are going to structure our site, it’s important to dedicate some time to think about the visual appearance of our blog or website.

 

Variety is the spice of life: the baggage

To achieve that, it’s essential to know last trends in front-end design and gather information to adapt the knowledge to our site, having always in mind if they are compatible with the kind of content that we are going to offer. However, I always say that it’s interesting to have a good baggage of web design and graphic arts that we can find online, for though we can’t adapt it directly to our project, I’m sure that it’d inspire us to create amazing things for our project or in a future ;).

 

Identity: the colors

An important matter are the colors of your website or blog. It’s important to have a good logo which identifies your brand, but it’s also important to have colors in which your site associates with and which are consistent which each other.

We know that the clean design has been trending the web design concept for the last years, in which we find clean backgrounds and never overly bright colors in big areas. Clean design is a good option as it’s stylish and also its focus is to show your site’s purpose in a clear way.

 

Typography, say it your way!

Although this is maybe more personal, the typography of your site is very important, as it wouldn’t be so nice to read an epic post with Comic Sans… is it?

Typography is a great way to establish visual hierarchy in a clearly way, by transmitting priority in your site’s elements, combining different kind of fonts, sizes and colors.

Anyway, we are lucky to count on beautiful and different fonts that we can also add easily in our website with some useful tools like Google Fonts. There we can also take a look at some interesting information about the fonts we like, e.g. possible combinations with other fonts, most used cases, etc. As you can see, it’s a must have tool!

 

Efficient tools: icons

It’s an obviousness that doesn’t need an exhaustive analysis: Icons have invaded Internet. And honestly, there’s a reason for that. Icons avoid us to show excessive content by synthetizing it in small images which also shine in our site, even if it’s for showing our social networks, sections, menu categories, etc.

About this point, here you have some resources that are very useful to add nice icons into your site:

  • FontAwesome – it’s a text font that we can add in our site’s code and which has a big variety of icons that is frequently updated.
  • Flaticon – an amazing repository where we can find a huge quantity of different kind of icons that we can also download in various formats or just implement in our website.

 

Flat design

If you’ve searched some information about trends in web design the past months sure that you’ve heard something about flat design. This just shows us the elements in a plain design without shadows, even if they’re icons, vector images, backgrounds, etc.

Definitely if you’re going to design or redesign your website or blog, you’ve to have in mind flat design if you want to have an attractive and fresh design, as it’s going to be in front-end designs this 2016.

 

Don’t lower your guard

At this point, is great to know that we have prepared a good design project which can compete with the best blogs and websites of the moment. However, the truth is that our mission of having a trendy site doesn’t end here, as keeping your site updated is as important as its initial approach and development.

It’s not necessary to make big changes, but I always recommend having updated your site in things like new section presentations, new images or vectors, etc. Through this little changes we keep the freshness of our site’s design, but also it’s a great way to transmit to your visitors that you’re active on it.

Infography for best blogs

 

 

Some inspiration

In the Visual appearance section I’ve mentioned that it’s always good to have good references before you start drawing the main lines of your site’s design. If you need some inspiration, you can take a look at some of this pages in which you’ll find a lot of creative ideas about front-end development (these are the ones I use most!):

  • Awwwards: It’s great to see the pages which are most appreciated by the users, as the ones that you can see in Awwwards are the ones that have more votes.
  • Behance: It’s a social network from Adobe which is a must visit, as it’s like an online portfolio where designers and developers upload their creative projects (even if they are finished or WIP) in which we can find web and blog designs among other things.
  • The Webby Awards: It’s similar to Awwwards, where we can find some trends in web design and we can search by year or categories.

 

Conclusions

Well then, with this post we’ve learned the importance that our web design deserves, as we have to share a good content in a good bundle.

If you are the main responsible for designing your site, all this tips will be useful as they’ll save your time in the future; if you’ve a developer or designer instead, it’d be useful too as you’ll be able to mark the guidelines more clearly and you’ll avoid that your project turns into something that doesn’t identify you.

Hope that this Guide-Post is useful to you! 🙂

Do you like it? Share!

Tags

What do you think?


Fields marked (*) are reguired.


*