Archive for January, 2013

Five reasons to use dashed or dotted lines in web design

Tuesday, 8 January, 2013

By now, it is clear for everybody that the design of a webpage should be as simple as possible, in order to transmit the right message, to make the user feel comfortable and to offer great experiences for everybody. However, this doesn’t mean that everything should be boring and devoid of interesting elements, just to display this effect of simplicity. This article will tell you more about the dashed and dotted line trend and will offer you a few reasons why one should pick this path. Therefore, you should have a look at this article, and you should learn more about the advantages that this current could bring to you.

But, in order to begin with the right foot, I will tell you what this trend represents. Well, as its name implies it, this is a dashed or dotted line that will beautifully decorate your website, while giving some direction to your visitors as well. Thus, having a decorative element that also fulfills an important role in your webpage seems quite nice, doesn’t it?

1. Divide space

It is normal for your website to have more than one focal point. However, when arranging these points on your webpage, you should divide the space in such a manner that the visitor will not get confused. For instance, one could focus on two items and then divide them, by placing a line between these features. Well, as you can see, the dashed or dotted line will definitely help you succeed in this task. Just, pay attention at your important matters and then divide them wisely, using this technique.

2. Emphasize certain points

Putting emphasis on the things that are crucial for your website is so interesting and appealing now, thanks to this trend. As you perfectly are aware of, it is quite important to create a visual hierarchy, so that your audience will find things easier on your website. Well, if you wanted to realize this process in a more beautiful manner, then you should definitely make use of lines on your webpage.

3. Give directions

It is very easy for your visitors to lose their ways, in case you don’t have some pointers or elements that will give them directions. But, this matter could be easily solved, if you will decide to include some features that will take care of your users. And, if you would like something that would keep your page from appearing overcrowded, then you should rely on this trend. The dashed and dotted lines will take your readers where they want to get, if you will place them right. As a result, study the placement of these items thoroughly, because if you will fail this test, then everybody will get confused. In order to get things right, you should think about the main purpose of your website, and then you should make sure that your lines will either guide the people visiting you towards some products or towards the most important information.

4. Informs viewers about changes

Redesigning a webpage is quite a natural process, because things must be updated and modernized. However, although change is good, it doesn’t mean that your visitors will respond well to it. But, once again you have the solution to this problem in your own hands. What you need to do is take some dashed lines and place them on your website, in order to show them where certain objects moved or where they could find additional information about certain steps. This will show that you are a professional and therefore your visitors will appreciate your work and will trust you. So, do not fear the change; just don’t forget to make use of objects that will ease your visitors’ experience on your website.

5. Decorative elements

Although these lines could have so many uses, they may also be placed just to decorate the page. Elements that embellish websites are welcomed because they help at balancing things around. However, one shouldn’t see these lines as something plain and boring, because the truth is that these could take numerous shapes. For instance, if your website deals with weddings, then some dotted lines could get together, in order to create a wedding bouquet. Anyway, the options are limitless. You just need to understand, that no matter what, this trend could definitely help you beautify the aspect of your webpage.

The importance of this trend

Web designers are always thinking about methods of introducing simple yet helpful devices on their webpages that will help at increasing the traffic and at improving the image of the website. What makes this trend so important and worthy of being taken into consideration is the fact that it combines the simplicity and efficiency in one “pill”. Therefore, designers appreciate and make use of the dashed lines simply because they do not give the impression that they just fill in the space. On the contrary, these lines show that the creator is talented and serious about his or her job, fact that will make the visitors come back again.

So, in other words, this trend is important because it improves the appearance, it helps at creating an easy to use interface and it also brings simplicity, all these resulting in increasing the website traffic. The number of the audience will grow because people will get what they want: directions, beauty and clarity. Not to mention that, you, the web designer, will achieve your goal of creating a modern website that everybody will appreciate, precisely because it lacks those complex details that only caused the page to load slowly.


In the end, as you can see there are many reasons why a designer should go for this idea. But, the thing is that the dashed lines will definitely bring a nice effect and a modern appearance, without too much effort from your part. So, analyze these reasons and you will see that these lines could definitely bring that certain special item that will totally complete and turn your website into something fantastic and extremely impressive.

This guest post was written by Adrian, who is a passionate blogger and chief of the team behind DesignModo website. This blog is a great resource where you can find tons of tutorials, freebies and Big collection of Web UI Kits and Icons; Professional and pixel perfect User Interface packs for Designers and Web Developers.

Mascot to give a makeover to your old and boring website

Saturday, 5 January, 2013

So, you have been trying your level best to make your website stand out from the rest by tweaking the color combination of your website, making changes in the structure or playing with the position of the logo. But even after hours of hard work, the design looks pretty much the same. Yeah, I know how frustrating it. So, rather than treading the same route over and over again, you can try something new if you are hell bent on giving your website a complete makeover like designing a Mascot. Yeah, you have seen them in Olympics and even in football world cup, and believe me, these mascots have a role to play in the sphere of website design. In fact, an increasing number of website designers are using them to make their website look different from the rest of the others.

Why you should be Using mascot

Valid question. Ok, the answer is, mascots are memorable and they help people to connect with your brand on an emotional and personal level. However, as the mascot is going to represent the brand name of your company, you simply cannot make your company a laughing stock of others by coming up with something boring and uninteresting. Designing a mascot needs more than simple designing sense; it needs an eye for detail, imagination and sometimes, it may require a sudden moment of illumination. Moreover, of course, it is time consuming and you also need some sort of inspirations to unfurl your creative wings. To make your tryst with this new thing a little bit easier, here I am going to give a roundup of some popular mascots associated with some leading brand.

Fork CMS:

This website has got an interesting figure as mascot. At the first look, you may take the mascot as an ordinary old man entrusted with the responsibility of promoting the brand of a company. But take a close look and you will find weird similarities between that old man with the mythical Poseidon. The mascot has got trident, has white beard and lol he has got mermaid tail as well. These things will surely make you take him as Poseidon. And the designer has done a commendable job by making the Call To Action button floating above the screen, thereby grabbing your attention all the time.


Ok, I think that you have already goofed it with the leading web browser – Firefox. I assume that Foxtie was aware of this issue for long and for that reason, they had come up with a brilliant mascot that represents their brand precisely and make them separate from the rest of the others. To seize the attention, Foxtie has chosen a large vectored mascot that represents exactly what they do. Since the website does almost everything, the mascot is seen juggling with balls symbolizing the fact that it is always busy, active and agile. However, recently this has given way to a poised and cute look. Thanks to the use of gradients and vector graphics, the mascot looks impressive and stands out perfectly against the dark backdrop.


You may find strange to have a chef representing a coding website. But take a look at the tag line – “fresh baked forms for your website” and you will get it right. Yes, the mascot represents the tag line or the business ethos of the company and not the company itself and this is what makes this mascot different from the rest of the others. The design looks eye-candy with dark color background with white-based mascot shinning bright. Mascot does not make huge deviation from real life chef and the Call To Action button is placed just underneath it giving it the maximum exposure, it required.

Mail Chimp:

You simply cannot miss out on Mail Chimp mascot. It stands tall in the backdrop and grabs all the attention without being spoilsport in the conversion process. I have a liking for this mascot because the mascot has been designed with the name of the website in mind. The positioning of mascot is great. Mascot is looking straight at the “Sign Up” button and therefore, the attention of the visitors will be automatically drawn to it. But lately, it appears the website is making some experiments with the positions of the mascot. And the idea of using a chimpanzee as a mailman is cool and works really well for the company.


If you love superheroes, you will simply love the mascot of Informant. Yes, this website has got a superhero, not the traditional one, for the branding purpose. The mascot has got a rocket launcher strapped to his back and compared to his skinny physique, he has got a large head that makes the mascot appear a bit funny. Headlines are skewed a bit in line with the mascot appearance just to add some energy to otherwise simple design. And the best part about this design is that the mascot does not go vanished in the inner pages; a small version appears in all inner pages, which is very cool.

Solid Giant:

If you hate to see the mascot in the same way all the year round, Solid Giant’s cool mascot is certainly going to put a smile on your face because the mascot changes its figures throughout the website. This is a nice attempt by designers to put some life into this mascot by making him appear in different shapes and thereby giving an interesting twist to the whole concept of designing mascot.