Our clients typically get a 200% increase in the number of sales through their new website.
Persuade & Engage More Customers Online
Your website is your professional front for your company online – your international business card, the 24-hour salesman who never sleeps and works tirelessly for you. In the Internet age, a mobile-friendly website that markets your business is the key to online success. We make it happen for you.
The quickest route for a business to generate qualified leads online is to advertise and we help you do just that. Set up, manage, and optimize your online advertising campaigns to drive QUALIFIED traffic that CONVERTS better to your website. Generate paid, targeted traffic from search engines like Google to your website by paying for valuable keywords that convert to business growth.
Convince your website visitors to become your customers and once you do that, you can refine that process to increase the number of visitors that convert to customers. Let us analyze your web presence to drive engagement and turn visitors to customer!
Grow Your Brand & Establish Your Social Media Presence
Our social media strategic management is designed to grow your brand and establish a strong online presence. We support your brand, establish mutual trust and create relationships with potential online buyers.
2Stallions revamped our old website to become mobile-friendly and optimized for search.
Besides getting compliments from customers about our new modern website, we also get many more visitors and more leads via our website than we ever did before, and at a very affordable price. The value we received from 2Stallions was worth more than we paid!
As children, our parents used storytelling to put some colour on simple life lessons. As a result, we remembered these lessons well and kept them in our hearts and mind.
Content marketing professionals also use storytelling to bring life to a brand and consider it as one of the main components of a content marketing approach.
Often, they tell stories focused on a company’s rise as a prominent industry icon and what motivates it to pursue its goals. Brand stories will allow your target audience to see you as an actual organization of people rather than a boring corporate figure. They prefer connecting with humans who are why brand storytelling is the yellow brick road for marketers.
Creating a good brand story requires a more emotional approach. Don’t make it solely about your company; go personal and beyond mere publicity. Here are the five must do’s for a great brand story.
1. Make It Personal
The most amazing stories in the world are uplifting, exciting, and even terrifying, if all the details in the story are condensed into a human struggle.
One great example of making it personal is Nike’s “Equality” Campaign. It features a 90-second commercial starring LeBron James, Michael Jordan, Victor Cruz, Dalilah Muhammad, and others sharing a strong personal stance on equality.
A behind-the-scenes video was also released to show what equality means for them. LeBron James said, “At the end of the day, we’re always just trying to find a way that we can all feel equal, we can all be equal, have the same rights, have the same feelings, being able to be in the same place no matter the color.”
A storytelling campaign should focus on the person, not on selling the product or service. A personal story can be a consumer’s positive experience using the product or service.
2. Create Relatable Characters
Characters act and respond, making them the force that drives the narrative. Making audiences empathize with his or her struggles makes the story more compelling and memorable, and can coincide with the reasoning of a particular target market.
Jollibee’s 2017 Valentines Ad Campaign did this, plus more. The Filipino fast food chain released a series of video each telling a different story that put viewers into a whirlwind of relatable emotions all ending with the conclusion that love comes in many forms.
One of the videos titled “Vow,” tells the story of a guy who met “the one” in one of the Jollibee branches he frequents. He and the girl spent plenty of time together and fell madly in love. He vowed to make her happy no matter what it takes. However, there was a heartbreaking twist at the end. The video instantly became viral and currently has more than 15 million views.
The whole ad series raked more than 30 million views on Facebook and the fast-food chain’s burger sales quadrupled after the ads were released.
The brand became more trustworthy because the values the character exhibited guarantee the quality of the products or services the business offers.
3. Be Honest
Stories become famous because they are unique or tell a story that mirrors that of their audience. However, going for a fresh story that could be exaggerated can be entertaining, but it will lack the strong emotions that make brand storytelling inspiring and memorable.
Another way to introduce honesty is not to take the brand too seriously. Self-deprecation, if it suits the brand, is helpful because it is entertaining and funny to audiences. It also helps introduce a casual and approachable identity. Adweek listed Apple’s 2007 “Stuffed” advertisement for being a hilarious but concise way to promote their new product, and it still does its job.
The ad was built on two funny archetypal characters (Justin Long as the Mac and John Hodgman as the PC) where the bumbling PC always complain to Mac about being slowed down by so many pre-installed trials.
Showing the positive and negative aspects of a specific character makes them human and removes the “super” quality that makes them just a simple protagonist or inspiring figure. And in the case of Apple, they did it in a very funny and memorable way.
4. Make a Flowing Story
In an advertising video’s 30 seconds, brands can tell their stories in chapters as long as they introduce an amazing narrative with characters that audiences can empathize and care for.
The best way to do this is to use the three-part scenario of most storylines: the beginning, middle, and end.
The beginning shows the characters and introduces them and their current predicaments. In this scenario, building up the character’s appeal and the audience’s empathy for them is important.
In the next scene, problems arise. Here’s why this section is special: brands can promote their products or services as a solution to resolve the character’s conflict. If the story is compelling enough, audiences will look past the product and just want to see the resolution.
The last scene will show whether the character’s efforts in the middle had worked out with the help of the product or service. In the resolution, brands can inject emotion and an exceptional resolution that will encourage audiences to share the story over and over again to others who may be interested.
Just take a look at Tiger Beer’s “3890 Project.” The main character of the campaign are the tigers left in the wild, which is estimated to be just a measly 3,890. Together with WWF and six street artists, the Asian beer brand made 6 documentaries exposing the illegal tiger trade and what people can do to help.
5. Tease Your Audience
Teasing is a great way to gain attention; if you’ve ever watched your favourite series, the last scene in the episode is another problem that needs to be solved in the consequent episode. This is a “page-turning” device in novel or story writing.
Hooked audiences will want to know more about the events in the next part of the story. In advertisements, stories can use a narrative technique: foreshadowing, which shows an event that will be clarified in the middle or the last scene.
In a world of fast-paced competition, companies lose their appeal to who matters most: their customers. Connecting with customers in a personal, human way helps them remove the stigma of an “official” or “big company,” and it helps them show that they understand and empathize with the struggles of their audiences.
Television advertisements in the past have done so well to elicit emotions and empathy from consumers. Today, the Internet still uses video to tell stories that inspire, entertain, or make audiences laugh and push forward their business’ personality as something akin to the advertisements. If you are not sure which emotions to focus on, the Harvard Business Review has a great article on the emotions that drive straight into any audiences’ heart.
However, certain target markets like to read up on solutions. Blogs are a great answer to these audiences. Social media is also a great network to incorporate narratives. By using all these mediums together, a solid brand storytelling campaign can guarantee great results.
You, me, and billions of other people rely on the Internet as the first source of information. Despite the sheer number of people who go online every day, websites are still in a fierce competition for traffic. Website owners try to remain at the top by producing quality content, developing cut-edge marketing strategies, and of course, dishing out a stunning website.
Although content is still the king, no one wants to read anything on a poorly designed website. As business owners gunning for online presence, keep in mind that the overall visual appeal of a website also contributes to capturing a reader’s attention, and should not be taken lightly.
A website’s layout is crucial in making sure that your content is received well. As a website owner who wants to reach the top, you must take note of the flow of information, layout, graphics, and structure of your site. By doing so, you ease readers into the information on offer without overwhelming them, thereby keeping interested to continue reading.
Smart and efficient web design is more relevant now that the universal display or resolution no longer exists. Mobile phones and computers now come in a myriad of screen sizes, making it important to optimize your website to look good and function well on any device, i.e. to be responsive. Research shows that 57 percent of mobile users will close a website if it takes too long to load while Adobe claims that 8 in 10 consumers will stop viewing content if it isn’t displayed properly on their device. Evidently, there is power in effective website design and optimization for page speed.
“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”
—Jeffery Veen, The Art and Science of Web Design
Visual hierarchy, one of the most important principles behind good web design, is the difference between a site that strategically influences user flow and decisions and a site that just “looks nice.” It refers to the order in which the human eye perceives what it sees.
In basic terms, visual hierarchy describes which elements capture your user’s attention and draw their eyes most. But there’s no right way to build a concrete hierarchy, and competitive designers must have perfectly unique methods – or invent new ones – to stay on top of the game.
Let’s describe the most basic elements, the essential building blocks, necessary to support simple or complex hierarchies.
1. Scanning Patterns: The Predictability of The Human Eye
There are two predominant reading patterns for cultures who read left to right.
Typically for text-heavy websites like blogs, the F-Pattern is prevalent amongst readers.
First scanning a vertical line down the left side of the text looking for keywords or points of interest in a paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. As shown, readers on CNN and NY Times both use the F-Pattern to read the content.
Jakob Nielsen of The Nielsen Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:
Users will rarely read every word of your text.
The first two paragraphs are the most important and should contain your hook
Start paragraphs, subheads, and bullet points with enticing keywords.
You can see in the left image that the most important content can be seen in a few seconds, with more detailed content (and a Call-To-Action or CTA) presented immediately below for quick scanning. The pattern can be very helpful for sites that want to embed advertising or CTAs in a way that doesn’t overwhelm the content.
Just remember that content is always king, and the sidebar exists to get users involved on a deeper level.
As with all patterns, the F-Pattern is a guideline, rather than a template. It can begin to feel boring after the top rows of the “F.” As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels.
Z-Pattern scanning occurs on pages that are not focused on the text. If you were to access a Z-Pattern website, tendency is that your eyes would wander horizontally over the top. It’s possible that your attention is drawn to the menu bar at first or simply because you’re used to reading from left-to-right. When you reach the end, your attention shifts down and left (again based on reading habit), and repeats a horizontal search on the lower part of the page.
The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and Calls-To-Action. The Z-Pattern is perfect for interfaces where simplicity is a priority and the CTA is the main takeaway. Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here are a few best practices to keep in mind based on the image above:
Background: Separate the background to keep the user’s sight within your framework
Point #1: This is a prime location for your logo
Point #2: Adding a colorful secondary CTA can help guide users along the Z-pattern
Center of the page: A featured image slider in the center of the page will separate the top and bottom sections and guide the eyes along the Z path.
Point #3: Adding icons that start here and move along the bottom axis can guide the users to the final CTA at point #4.
Point #4: This is the finish line and an ideal place for your primary CTA.
Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most over the least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions.
Bigger is more eye-catching, but it’s not always better. The simplest way to explain it is that your most important element should be the one that is standing out, but it’s when we get into the details that it becomes a little more complicated. The user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go. Of course, that’s not to say that it’s as simple as making your “DOWNLOAD NOW” call-to-action 10x larger for more conversions. Subtlety and harmony between elements is the key.
All the principles of size are visible in this screenshot from Huge Inc. The first thing you notice is the biggest, the stylistic H that serves as their logo. Next is “Nike Making,” whose large typeface and bold style create immediate weight. Next is the line of text directly beneath it, written in a smaller font size so as not to steal attention from the key visuals. If your eyes are still interested enough to wander, they’ll eventually notice the tiny logo and hamburger menu in the corners, or the navigation bar to the right.
The hierarchy makes sense here. First, the large colorful H catches your eye. Soon afterward, you’ll seek context for the unorthodox visual, which is immediately accessible with the hyperlinked “Nike Making” headline and secondary sentence. Visual hierarchy lays out the user path, while size hierarchy simplifies interaction by making the entire chunk of copy clickable and in close proximity to its related visual.
Without even thinking about it, you end up clicking exactly where the designer wants you to go. It goes without saying that balance and moderation is key. The design should not
be overpowered with an overly large focal point or
compromise user usability with secondary content that ends up being too small.
We’re visually drawn to color, especially when it’s used strategically to highlight important information or imagery. A bright splash of a color like red or yellow, for example, is hard to miss — whether it’s on a traffic sign on the side of the road, or a flyer hanging in your local coffee shop. Clever use of color can be one of the most visually interesting ways to differentiate elements on a page and draw attention where you want it. Your brain’s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in color in relation to the surrounding objects. Consider the following example:
Fitbit’s use of color in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the color of the “Get Active” button — subconsciously signaling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).
One of the most straightforward ways to control your website’s visual hierarchy is through its interface. By placing a focus element front and center, you can then follow up the visual hierarchy with the use of rows and columns for a more organized and structured layout. This can help keep the chaos at bay and also leaves some space at the end for CTAs or other chosen content. It can be a tedious and fiddly balance, but crucial if you want to avoid overcrowding your website with too many elements. The visual hierarchy can flatten and very little will stand out on the design.
In web design, these are, amongst others, the corners and border of the screen. As “throwing” the cursor to sides requires less mouse control than a fixed point in the middle. While you’ll probably focus primarily on the center of the screen (given its size and contrasting black lines), the stagnant clickable links remain easily accessible in the corner and at the bottom. Scrolling up and down changes what’s displayed in the middle. However, the site logo, hamburger menu, contact information, and social media links stay firmly in their prime locations.
Of course, your layout certainly affects the visual hierarchy, not to mention usability. The Gestalt principles (described below) dictate that objects in a line create momentum to propel eyesight forward, even dominating the effects of color. Rows and columns, then, aside from supporting an organized structure to keep the chaos at bay, also create some prime real estate when they end – perfect for CTAs or other preferred content.
As you can see, Huncwot keeps the options for its homepage organized in a straight horizontal line (with an animation behind whichever selection you’re hovering over). It’s a tricky balance, but mandatory for every single website. Otherwise, if you crowd your website with too many interface elements, your visual hierarchy flattens, and nothing stands out for the user.
One of the most important yet often ignored design principles is the use of White or blank space and spacing. Failing to allow some amount of blank space can leave your design looking overcrowded and confusing, ultimately drowning viewers with too much information. White space is your number one go-to for separating and organizing the elements in your design. No one wants to spend time making sense of a design. What you want is a site that is easy on the eyes, orderly, and well balanced. Always plan for unused space. It’s essential for things like:
Giving the viewer’s eyes a place to rest and a path to travel through the design
Separating your layout into sections (the flip side of this is proximity – reducing space to place related items close together – also an aspect of good spacing)
Isolating focal points
David Salgado and Mariana Perfeito’s editorial design does both of the above, leaving plenty of white space between and around each section of the layout, while grouping related items together. The result is a clean and balanced design.
When typesetting, there are other aspects to take into consideration other than just Typographic hierarchy. Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, width of the strokes, etc.
Notice how typeface affects the hierarchy order of the words in web design below for The Tea Factory. “The perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.
Another way of drawing attention is to give content ample room to breathe. A site that looks crowded will render your visitors lost and later asking themselves “what am I supposed to do here?” Ultimately, they click away, absorbing no information about your brand at all. If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers. Not everyone will know where to click next, as a website owner, it is your job to guide them to the behavior you desire.
As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.
When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page. This example by Bright Pink illustrates the concept nicely:
In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent. Thanks to a black rectangle that highlights “badminton” and sets it into its own space.
In the third image, a background scribble interrupts the space of “Sports” but not “badminton.” Consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”
Source: Posters “Bright Pink” via Smashing Magazine
Using some of the techniques in the article can help guide visitors to your website through your design and layout. Think of it as a first impression. At first glance, does your website leave a pleasant impression? Or will it scare visitors away because elements are all over the place?
Overall, most designs will greatly benefit from putting in place an overall structure, more commonly known as the composition, which is made up of Implied Movement:
The Rule of Thirds
Following the rule of thirds is one way of creating a dynamic composition. This is where your focal point isn’t predictably placed at the center.
Instead, this rule divides a layout into a grid (three equally spaced horizontal lines and three vertical lines). The focal point is placed either on one of the lines, or ideally, on one of the four points where the lines intersect.
Source: Cover Design Studio
The Rule of Odds
The rule of odds often involves threes as well. The idea behind this one is that an odd number of objects (perhaps the focal point surrounded by two other items — or four, as below) is always more interesting and pleasing to the eye than an even number.
Source: Charlotte Cheetham (many stuff)
Failed Hierarchy – Brandon Jones (Web Designer Speaker, Author, Former editor for Tuts+)
“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.”
As suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. the web has been plagued with for years! While these ads succeed in grabbing attention, they ultimately fail the site owner. They also fail the viewer by breaking the visual hierarchy within a site.
Similarly, if a designer builds a visual hierarchy with certain key pieces of information nearly impossible to find, the designer will have failed at his task. Brandon Jones put it best when he states that good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.