What is a website layout?

A website layout is a pattern (or framework) that defines a website’s structure. It has the role of structuring the information present on a site both for the website’s owner and for users. It provides clear paths for navigation within web pages and puts the most important elements of a website front and center.

Website layouts define the content hierarchy, regardless of whether or not you’re learning how to start a blog or building a simple website for your small business. Content will guide visitors around the website, and it must convey your message as well as possible to them.

To put it short,  website layouts are critical elements that make a website a success, or a failure.

Why should you choose one layout over another?

You should carefully make a selection. This is why:

• A good layout keeps users on the site because it makes important information easily accessible and intuitive to find. A bad layout frustrates users which then quickly leave the site because they can’t find what they are looking for.

For this reason, it’s best to take as long as you need to find a good layout because users won’t give you more than a few seconds of their time.

• There’s a strong relationship between the layout and the engagement of users with the website. It determines how long they dwell on the website pages, how many pages they browse, and how often they come back to the website.

So, besides overcoming the problem of split-second choice, a good layout comes with additional benefits. Engaging visitors can be a rewarding effort.

• When selecting a layout, it might be useful to also consider the Gestalt law of closure. It says that, even if an image shape is not complete, the human eye tends to fill in the visual gaps and recognize the image as a whole. How can this be of use to you?
  • You won’t pay attention to details, rather focusing on the global view of the pages forming the website; users will find themselves the meaning path.
  • You pay attention to details, using some additional seconds to grow the engagement exponentially.
  • You intentionally won’t pay attention to details, letting originality speak for itself; users will find themselves the meaning path, and they will keep a strong memory of your website.

Example of how the Gestalt law of closure works

Getting familiar with the layout design best practices

To spend a fruitful time selecting a layout design, it’s important to get familiar with some basic notions related to website layouts. We’ve gathered a bunch of concepts that’ll help you get oriented into the abundance of predefined website layouts.

Visual weight and negative space

Visual weight is perceived by people when some objects on the website carry a stronger visual force. This visual force can be induced in specific elements through different techniques. Amongst them, negative space is the one that interests us directly here.

Negative space (space that is devoid of any elements) drives the attention towards elements outweighing the rest through visual force concentrated on them.

Example of visual weight created through negative space

The space between the black square and the white squares directs the eyes to the left-hand element. But the left-hand element is outweighed by the 4 smaller white squares. The black square carries a stronger visual force.

Balanced website layouts

In balanced web design, the elements that make up the layout are supporting one another so that the user sees the text content with equal importance. In addition, the elements are easily scannable in a layout that efficiently presents them all. The design gives the impression of stability, and it feels really pleasing, from the aesthetic point of view.

One of the most popular balanced designs is symmetrical balance, where, similar to a mirror image, a visual element will look the same on either side of the center. Symmetry evokes balance, elegance, and pleasure. You’ve probably felt it too when looking at the architecture of some buildings, gardens, and even at the wings of a butterfly.

Sections for specific audiences or features

Arrangements of elements that can be changed meaning that users can easily switch to other website sections. To help you figure out how this is possible, we suggest you think about fashion websites addressing both men and women.

The layout supports 2 distinctive sections within the website, one dedicated to apparel for men, the other dedicated to apparel for women. The layout split serves functional content, highly useful for the 2 distinctive target audiences.

Go outside the standard layouts

Whereas some layouts follow the traditional path, with an aim at serving functionality at its best, other layouts use daring designs and structures, with the purpose of making an impact on the user. Breaking the mold means unexpected arrangements of the elements within the web page, and the experiences it triggers stand out in a sea of standard websites, that a user can’t help but remember your website.

Source: Schweppes.ca

Remember though that UX beats design. Always think of the end-user. Make tests before releasing anything.

Create Visual Tension for Eye-Catching Stimulating Layouts

In web design, visual tension strains the users’ attention by focusing it on key points of the website. Visual tension comes out by contrasts of space, color or luminosity, and it is easily noticeable if interwoven in a perfect overall balance of elements.

Its role is to visually stimulate the users to break off the web surfer routine and process the information on the website in a brand-new light.

Visual tension in a website layout, through the unexpected placement of some elements – Source: Stripe

Use focal points to draw attention to certain elements

A call-to-action button can be a focal point. An image can be a focal point. Headings can also be focal points. It all depends on how they integrate into the website layout, so they become the biggest points of interest on a website, that capture a user’s attention.

Source: Tesla.com

Due to focal points, you’ll have your users half-way to conversion (whatever “conversion” might be for your particular website) – users will concentrate their attention on those focal points and are more inclined to take the action you want them to take.

Design layouts that accomplish website goals

It’s a best practice that, before starting to design a layout/to browse through layout templates, you should define what the website goals are. They might be to sell products, gather traffic, or simply enchant users with some piece of art. The website layout should be chosen based on the website goals. It will trigger certain users’ behaviors that lead to completing those goals.

Source: Unbounce

Layouts that tell a story

Design the layout/search for a layout so that it molds onto the message you have to transmit. Section areas should come together to tell a complete story. Each element in this chain is another chapter in your story.

Layout made up of features sections, saying much about the app’s value

Best Website Layouts with Proven Success

Below you’ll find the most popular and effective website layouts that designers the world over use to make their websites.

1. The Zig-Zag Layout

Research revealed how users use to scan a webpage content: the eyes move along the page following a Z-letter direction.

• First, the eye goes from left to right
• Next, the eye goes down, and to the left
• Last, their eyes move back across to the right again

As it is intricately connected to some common web surfer behavior, the zig-zag layout is applicable to a wide range of websites, in different activity areas.

Restaurant Website Demo – created with Mesmerize Theme

2. The F Layout

The F-shape layout follows another widely-known scanning behavior, where the eyes move across a page in an F-letter pattern.
Due to its connection with a widely known user behavior, this layout is suitable for a wide range of websites, from e-commerce websites to portfolio websites.

Source: Patagonia.com

3. Full-Screen Photo

In this case, the layout implies spreading up content upon a full-screen photo/image. Thus, text sections or menu sections are there to support the “living” image. Good to use for websites that want to immediately anchor the subject of a site in the mind of a visitor. 

Source: Netflix

4. Grid Layout

Information is organized into grids, making it easy to browse., and people can stop to specific topics of interest. Grid layouts allow for an equal distribution of text, photos, videos onto the webpages, letting users decide upon the importance of each unit. Good to use for newspapers, vlogs, etc.

Source: Ikea

Source: iHeartRadio

5. One-Column Layout

This layout organizes information into one single column, and it’s one of the simplest layouts to put in place. The content (text, photos, videos) is easy to follow, and the need to scan is nothing more than identifying key points of interest into that single column. Good to use for research papers and long-form articles.

Also, single-column layouts are a perfect match for mobile experiences.

Source: Medium

6. Featured Image Layout

One of the most frequent layouts nowadays implies setting up a featured image representative of each page in the website. The image serves to concentrate attention and interest to a focal point expressive of the page topic. Also, the image stands as the source of meaning that radiates from this very focal point. Good to use for niche blogs, freelancers and professionals. 

Designer Portfolio Website Demo – created with Mesmerize Theme

7. Asymmetrical Layout

The asymmetrical layout plays with the rules of symmetry to the point of bending them in favour of a unique promise: there is more we have to offer than perfection. The trick is to create active space, and to make white space livelier.

Good to use for this very category of web design websites, for unusual portfolio presentations, and innovative business websites.

Source: Kiwi.com

8. Split Screen Layout

This type of layout refers both to vertical split-screen and to horizontal split-screen. Generally, a vertical split-screen plays a major role in conveying dual importance to 2 or more distinct areas. The purpose here is to favor quick choices, for better engagement with the website right off the bat.

The example below is somehow different, in that it contains both vertical split and horizontal split, on one and the same page. Looking only at the vertical split, it does not invite to making a choice, but rather to enhance one experience through the other.

The split-screen layout is recommended for online stores (e.g. selling to men & women), or creative websites “selling wellness” all through the web presentations (like in the case below).

Source: RedLight.dev

9. Headline and Thumbnails Gallery Layout

In a more and more visually-focused online world, this layout may work wonders. It is made up of image miniatures leading to full descriptions of those topics, and headlines (+ short presentations) that serve as a guide through the image album.

Suitable for travel websites, blogs, and magazines.

Source: wepresent.wetransfer.com

10. Modular Layout (also known as Card Layout / Block Layout)

This layout is tightly related to Material Design, the design protocol launched by Google. It’s becoming increasingly popular, due to its flexibility and responsiveness. The modular layout means each unit of content (text, images, videos, buttons) is included in a card, or module, having its own dedicated space.

When applying modular layouts to websites, the effect is a streamlined look and a highly coherent composition of items in a webpage.

Good to use for business websites, where clear and coherent presentations are fundamental to a professional online presence.

Source: UXPin

Source: thefutur.com

11. Magazine Layout

The magazine layout, as it is encountered nowadays, tends to be a mishmash of some other layouts, all serving to give a splendor aura to the news.
The example below combines headline + thumbnail gallery layout, and featured image layout, plus a solid F-shaped layout, to keep the glamour of the magazine up to par.

Such combinations are good for, but not limited to, online magazines.

12. Single Page Layout

Although not so widely spread among common website layouts, we wanted to list this layout here due to its fairly interesting characteristics. It combines multiple actions into one page (e.g. Gmail). Content is loaded dynamically, using JavaScript. And it is built so that it generates unique URLs for each viewpoint.

13. Radial Symmetry Layout

Another less common layout type refers to radial symmetry. There’s a central point from which radiate correlated items, in a rounded form:

It’s a wrap

Now, that you’ve got familiarized with the different website layouts, it’s time you consider what particular layout is the best fit for your website. Is it a multi-purpose layout, or a layout adapted to a certain niche?

To do this, you should know your audience, their behavior, needs, and expectations, and built the appropriate message that molds perfectly on a layout. The layout will have the role to let the message shine and be so convincing for the users, that they cannot but accept it.

[sibwp_form id=1]

The post 19+ Website Layouts Users Won’t Forget (UPDATE 2021) appeared first on ColibriWP Blog.

Exactly, the header.

If that’s not appealing enough, if it doesn’t bring clarity, your users might just go away, and maybe never come back.

We don’t want that, do we?

Website headers are a central part of designing a website. They play a key role in grabbing the users’ attention and establishing a connection with the website’s visitors.

This is why, in the following lines, we’ll tackle some header design principles you should be aware of when designing a website header.

Header Design Principles to Follow

Research studies have found that the users’ eyes move on a webpage by following one of the 3 patterns:

• The Gutenberg pattern

Image Source: https://vanseodesign.comThe Gutenberg pattern can be applied to text-heavy content. It suggests the readers’ eyes sweep across and down the page in a series of horizontal movements.

Example:

• The Z-shaped pattern

Image Source: https://vanseodesign.com

The Z-pattern defines the path the users’ eyes follow when scanning a page, a path that takes the shape of a Z letter. It is recommended for the design of landing pages, that readers quickly scan.

Example:

• The F-shaped pattern

Image Source: https://vanseodesign.com

This pattern describes the most commonly used style of reading blocks of content in the online medium. Users quickly scan a webpage, and their eyes follow an F-pattern.

Example:

Without going into further details about these patterns, we’d like to strengthen that for any of these models, the upper horizontal line is where the visitors begin scanning a page.

What to integrate into a website header?

These patterns show why a web designer must carefully decide what users should see first. The header should serve as a hook that will catch their attention and invite them to explore the rest of the page.

There’s no chance to make a second impression. So, you should think twice about what to include in the header:

• Strong hero image

A hero image is a very large banner image that is shown above the fold on a webpage. It is included in the header section and is the first thing the users see when arriving on a website. Hero images also have the purpose of attracting visitors’ attention to the unique selling point (USP) of the business. A best-case practice states that using faces of real people in the hero images can help visitors relate better to the brand. Communication gets more humane and personal.

Source: Drift.com

• Unique selling point (USP)

The USP is a phrase that explains the reason a business exists. It should reveal what the business does, why, and for whom. It should also emphasize unique features and benefits, that make the brand stand out among its competitors. A strong USP is vital in conveying the right message to the website visitors, and, ultimately, in converting them into customers.

Source: miro.com

• Brand name

The brand name gets people accustomed to the site identity or reinforces the image people have of your business identity.

The image should reflect your brand personality and ensure your brand voice is consistent throughout the whole website. It should be easily recognizable even if cut out from the website header. And when placed into the website header, it should play a key role in establishing a personal connection with every user.

Source: carolinaherrera.com

• Product video

Because it only takes 50 milliseconds for users to form an opinion about a website, it means that you should have the most important messages in the header. This is why many businesses don’t wait for their users to scroll down and get to the features of their product/service, but they’re using the power of video marketing to convey their message better. Also, let’s not forget that 78% of people watch online videos every week, and 55% view online videos every day.

Source: wistia.com

• Call to action (CTA)

A CTA is a message (usually on a button), that triggers a certain response from the website visitors. The Call-to-action should be clearly defined and easy to understand by the website visitors. Naturally, a CTA placed in the header, right where visitors start their journey into the website, increases the chances to get the wanted action from the respective users.

Source: creatopy.com

• Product featuring 

In case you run an eCommerce store, you will want to emphasize the quality and convenience of a certain product, and the best way to do it is to include that product in the header. The users’ attention will be driven towards that best deal, and they will be prone to step into the buying process.

Source: amazon.com

In any of the above cases, the general rule of thumb is: keep it simple, keep it clear, make the header engaging! Research shows that “the average difference in how users treat info above vs. below the fold is 84%.” So, it is best to focus your efforts on reducing those numbers as much as possible. And you’ll do it best if you’ve set yourself some goals as to what you want to transmit.

Large websites, like www.youtube.com, limit the space dedicated to the header to only a small amount. This is done on purpose, as the intention is to let the users’ attention be directed to something of more importance, like products, or services, or videos (e.g. YouTube).

Sometimes you don’t even need a header, or if you do, you need just a small one.

It all depends on the website’s particularities. Think about it and give your website the personality it needs, no matter what the web design trends are “telling” you now and then.

What Does Your Website Header Inspire?

Besides transmitting certain messages, you can also consider instilling certain emotions in the readers. Depending on the purpose you give to the header, it may inspire in the readers one of the following:

• Curiosity

For certain websites, it would be suitable to set up a header that inspires curiosity in the readers. They will want to find out more, they will long for more, they will rush into exploring the rest of the story.

It’s how I feel about this header from Canva. They make a huge promise right there: “Design anything”. And you’re invited to test this. Can you resist?

• Action

In some cases, it’s better to stir action directly from the header. With a call-to-action, you can invite users to click on a button, or perform some other interaction with the website, right off the bat. In the case of Planable, their USP is directly connected to the CTA below. also, if you’re not quite ready to buy, there’s an option to schedule a demo as well.

• Trust

It might be useful to start by inspiring trust in your visitors. You want them to take some action later on, and for doing that, they have to feel fully confident that they make the right decision.

Let’s see how Salesforce does it. They state that they are the world’s largest CRM. Okay, you might say that 99% of the companies out there aren’t the first in their field. And you’d be right. But, if you read below, there’s definitely something that you can use. There’s a case study that shows how efficient the product is. You can leverage such a case study yourself.

• Pain

Why on earth would you want to inspire pain in the readers, especially from the header? Well, many companies have their marketing based on the FUD principle (Fear, Uncertainty, Doubt). At an early stage of the conversion process, fear/pain will trigger the decision to immediately apply a solution and make that pain fade out.

This can be an approach for cybersecurity services, physical security services, but also in healthcare or pension funds.

Such an approach can be leveraged in campaigns that want to make people aware that you need to vaccinate against COVID, or to wear a seatbelt.

• Laughter

Maybe you want to emotionally connect with the visitors, from the very beginning. And there’s no better way to do this than make them laugh. And laugh loud. A sense of complicity is being formed and you’ll have your users stand by your side, while they’re exploring the website.

• Familiarity

Connecting the users’ situation with a similar situation presented in the header can create a certain degree of familiarity.

Types of Headers for Different Types of Websites

Depending on the website specificities, a header will fit better the overall design than another. Accordingly, you should have a clear idea of what type of header will best suit your own website (be it eCommerce, blog, portfolio, online newspaper, etc.).

• CTA-focused header

In the case of Blue Apron, the website header uses a large video, instead of a large hero image. It transmits a sense of coziness, familiarity, appetite.

Next, we have a CTA that invites the user to take action to benefit from the same cozy and yummy experience.

The CrazyEgg website comes with a header that invites users to take their product for a live demonstration. Their product is just a perfect fit for such real-time demonstrations. And it proves instantly the benefits of the product. Their are also using a visual cue, pointing out to the CTA: the hand of the man in the balloon is directing the eye towards the button.

• Brand-focused header

This is a beautiful example of a website with a header focusing on brand identity and branding elements. It includes the logo, a replication of the brand logo colors in the upper part, as well as their slogan.

• Content-focused header

This is very suitable for blogs, and magazines, which promote articles and stories.

But, I also found some exceptions.

Patagonia is not promoting their shop on the homepage, but, they push stories that show their commitment to making a change in the world. This current story, featured in the website’s header, is about slavery and activism.

In the case of Ikea, the left-hand side of the screen prompts visitors to one of the online stores, while the other half prompts users to read the story of Ikea.

• Video background-focused header

BUKWILD integrated 3 different videos in the website header. Each of the videos can be played by placing the mouse over the corresponding section. What’s interesting in this is the creative way they use videos as parts of a bigger “picture”, one that represents their brand.

• Product-focused header

In the case of Cropp, an online fashion store, the latest collections are being featured in the header.

Threadless.com puts wall-art in a context and features a CMYK Squad. The header also includes a clear CTA, for all those who feel they belong in a way to that scenario presented in the header by the “squad”.

• Personal branding-focused header

In the case of the travel blog Alex in Wanderland, in the website header, apart from a photo of Alex, users can see the beginning of a story in this header: “Five years and counting on the road…”. This is an invitation for the readers to want to explore more stories.

To wrap up…

Headers greatly contribute to a website’s success or failure. Technically speaking, this upper part is naturally the first thing on the website that people interact with.

[sibwp_form id=1]

The post 15+ Beautiful Website Headers and Why They Work So Well (UPDATE 2021) appeared first on ColibriWP Blog.

Probably because oftentimes people are not really sure about their business voice, their vision, unique identity, and so on.

The thing is, when someone lands on this particular page, it’s because they’re pretty interested in you.

So, you’d better tell a compelling story there.

Now that this is clear, let’s dig a bit deeper into the topic and find some inspiring “About Us” pages as well.

The role of an about us page

It’s like that because they play a certain role within a website, a role that’s often underestimated. An about us page has the potential to not only attract users, but even to convert them to clients/customers. It plays a role in simplifying the decision making. According to studies, consumers were 86% more likely to choose companies with a higher decision simplicity score.
That being said, do all companies need a strong about us page? Chances are few people visit the about us page of ebay.com, but a lot more visit the about us page of a lesser known company, such as a web design agency. In the latter case, the about page contributes to gaining trust, and pushing clients forward into the buying cycle.

About Us – What Information to Integrate in the Page

This subchapter is intended to help you complete the creation of your website with a thoroughly designed about us page. Or, if you want to make improvements to your existing about us page, the information below should help you get the most out of it.

Carefully balance the use of “we” and “you”.

As the about us page tells from its name, the content should concern me, my company and my mission. However, there’s a key component to take into account: while introducing yourself, you also have to interconnect with the reader, and address his/her personal needs. The “we” and “you” need to become one and the same referral. “We” empathise with the readers, and “you” find yourself front and center into the company’s presentation.

Address the readers’ pain point.

This is the problem that your company manages to fade out, making their lives better; do not necessarily state exactly how you do it, rather just let readers peek behind the scenes. You are in the market for a reason. That main reason is to make a problem disappear or improve people’s lives. In the example below, the title is suggestive of how good food finds its place into a more comfortable life:

Give away the secret of the company’s existence.

Tell WHY it came to birth and WHY its story found its path into the market. If you’re about to customize a personal blog, let readers in on WHY you thought it useful to start a blog and speak to them. The reason behind the company’s existence should be blended together with how, where, when, who, altogether elements that set the scenes for telling more about the company. Which brings us to the next point…

Tell the company’s story.

Specify what the problem people faced before the company came into existence. Mention the climax, that is how you entered in conflict with that issue and what made you react. Speak about the solution you found for that issue, and how the company got its legitimate role on the market.

Add context to the story.

Add context to the story (speak about the company’s history – years, figures, endeavours; tell some words about the present – current positioning of the company; and picture the company’s future – plans, objectives, forecast).

Present the characters that play a role in the company’s story (employees, CEO, founders, clients’ testimonials).

Introducing the team members not only helps give shape to the brand story, but also helps telling the human story behind the brand. How every member has struggled to keep the company up, and how those members form a tessellated team, worthy of the readers’ attention. In the example below, the team members change their look depending on who you put the mouse on, all watching in that direction.

Include the company’s mission, vision and values.

These shape the brand identity in an about us page. As the brand’s identity is shared by all characters involved in the company’s story, the mission, vision and values are an underlying flow that has been driving the team into the wanted direction.
In most cases, the about us page integrates with the company mission through branding. But it can also be supporting a social cause: for instance, an about us page for a HIV charity might serve to link to studies on HIV and its impact. In this case, the about us page helps define the mission of the organization.
In other cases, the about us page is just a functionality-driven page, which brings together some important aspects of a website. E.g. a newspaper might use the about us page to show a list of its journalists, editors, etc.

Add authentic images and/or videos to the about us page.

Photos of team members should add authenticity to the presentation. A video featuring the CEO should give a clear sense of what the company is all about. A photo of the entire team should cast some light on the human side of the company.
Avoid using stock photos, choose instead some real pictures of what’s inside the company. It explains far better the personality of the group and what the brand stands for.

Add contact information for building trust in your company’s real presence, and for giving directions.

When it comes to proofs in favour of your business credibility, nothing is too much. Profit from the about us page “real estate” to include contact information that will help readers get oriented towards your business. In some cases, the contact information will be present in a site-wide footer, so there’s no more need to reiterate it specifically on the about us page.

Optional: add lead magnets (something you give for free, in exchange of email addresses for future follow-up).

In case you want to make the most out of the about us page, and profit from readers’ attention to lead them towards a certain path of conversion, you might include some lead magnets: a white paper, a downloadable guide, a professional checklist, etc.

Optional: add calls-to-action, for mapping the users’ road to taking action on the website.

Similarly to lead magnets, calls-to-action serve for conversion purposes. In case you want to take conversion benefits from the about us page and use the website potential to the maximum for generating such conversions, it’s good to include a call-to-action button into the page.

Include links to social media profiles. And not only that.

For gaining a user’s trust, use social proofs such as certifications, memberships, investors, regulatory compliance, in some cases, maybe even a hint of a portfolio. Most times, this information will be part of a site-wide footer, so you don’t need to reiterate the items specifically in the about us page. However, if it isn’t part of a site-wide footer, you should consider including them in the about us page, they really add value to your presentation: trust and credibility in the eyes of your readers.

Include your unique selling proposition.

Gives this the greatest visual weight to this information on the page. It’s your major chance to state your uniqueness in a crowded market of goods and services that level up quality.

Style to Present the Information You Include in the About Us Page

All the information listed above should be presented in an enticing way, to get users engaged with the content and keep them so even after they have finished to explore the about us page of the website.
Here’s what you should consider when putting text content on the about us page:

1. Know your audience, their way of speaking, their pain points, the reason why they search for you on the internet, their habits and how you can improve their lives. Putting yourself in the readers’ shoes helps gaining a lot more authenticity in your presentation, and you can easily connect with them through an adequate tone of voice.
2. Be empathetic. This means you understand your audience a lot better than other competitors, and you can speak with them directly, letting them in on how to find the exact solution they expect – to the issues they face.
3. Be authentic. Bring the most of yourself in your writing. You shouldn’t shy away from speaking about your true self, even with vulnerabilities. Use a conversational tone of voice and speak as if you were engaged in a discussion with the readers, right from the first line of text on the page.
4. Be conversational, establishing an emotional connection with the readers. Use words in a way that shows you understand them, and you have something in common with them: you care for their lives, their worries, their comfort.
5. Avoid being fluffy, and don’t fill in the about us page with blabla text. Stray away from clichés and hype, reduce them to the minimum, if none at all. People don’t really care about your boastful presentation, they will decide whether your company plays a role for them if you identify their problems, and show you understand them well.
6. Be personal, be evocative, be you. You yourself, and you in the shoes of clients/customers. Use the first person (singular/plural) to present your business, from a human point of view. Show the audience you are like them, and they should trust you for the better.
7. Be honest. Above all, use sincerity as an appropriate medium of communicating with your audience. Don’t ever lie to them, embellish the truth or complicate the discourse. Stick to facts, if necessary, include figures that support your statements, and stand by the truth, as it is.
8. Be original. You can do this. You really are unique, and your business brings added value to clients/customers. So, why not include some original copy into the about us page, and show people how you can play an important role for them? Originality can make you go the extra mile and stand out from the market, by getting closer to the audience.
9. Build trust. This will ensue as a result of all of the above. If you apply these writing techniques, you will surely gain the readers’ trust and they will decide sooner to get into business with your company. It’s a win-win. You got the audience’s trust, and they’ll get better services/products values by closing the deal with you.

Templates of ideal about us pages

Although breaking the norm is the new norm, when it comes to about us pages, here’s a starting point you can inspire yourself from, when designing one:

ABOUT US PAGE MODEL 1 (generic model)
[OWNERS] started [COMPANY] because [EXPLAIN ISSUE PEOPLE FACED].
That’s why [YOUR PATH TO CREATING A SOLUTION].
Along the way, [X, Y, Z].
We want to be [WHAT’S THE TARGET OF YOUR COMPANY .

Add meaningful context to the presentation:

• introduce the company,
• set the stage where it intervened to solve a problem,
• mention the solution you found for that problem
• tell where you aim to drive the business in the future.

ABOUT US PAGE MODEL 2 (e.g. digital banking)
[WHAT WE DO AND WHY THIS IS SPECIAL].
[FACTS AND FIGURES] supporting the viability of the business model over [X] time.
[Y] community sustains the project and the whole business.
[A, B, C] team members and their short intro.
All these form [COMPANY].

Flesh out the company’s identity starting from the necessity in the market:

• set yourself apart from the rest, by what you do differently,
• support the “difference” with facts and figures stating the business model success,
• state the strength of the business by speaking about the community surrounding it,
• name the company, as it’s already got some people’s share of mind.

ABOUT US PAGE MODEL 2 (e.g. artist)
[ARTIST NAME] became interested in [ART FIELD].
Short explanation of his/her [WORK’S PARTICULARITIES] and why he/she should gain the attention of the public.
[EDUCATION] of [ARTIST].
[DETAILS] about his/her form of art, the way he/she creates.
[PRIZES] and [AWARDS] forming the local/national/international public recognition.

Disclose to the public your innermost powerful self:

• shortly present yourself and the activity field you’re active in,
• speak a little about the educational background that helped you form into who you are at present,
• state what is special in your artwork,
• share awards and certifications with the public.

Examples of About Us Pages and Why We Like Them

In the following lines, we chose to share with you some successful about us pages and identify what makes them unique:

Periscope.com
A mix of imagery that showcases the company’s clear mission, summed up in several memorable words:
“We do things people love”.
These words are well included into the whole company’s presentation, serving as the backbones for the entire company structure and activity.

Puravidabracelets.com
This about us page has authenticity ingrained in every element: real pictures and hand-drawn images sustain a true story, that began in 2010 and keeps on sustaining a lifestyle: “pura vida”, or “living life to the fullest”.

Teehan + Lax
This is the about us page of a company that’s closing its doors. They don’t forget, however, to thank everybody who helped the company grow. And they are proud to present their next move, or “next act”. This tells a lot about the professional ethics of the team, and their respect towards visitors of the website.

Wildapricot.com
Plenty of text that tells a story of the present: the wild apricots are team members, and the organization follows an unusual business model that is hard to pass over. So, wherever your eyes land on the text, there will be signs the whole presentation is worth reading, as wild apricots have really something to say.

Citrix.com
A whole bunch of pages dedicated to the presentation of the company. With Citrix.com, there’s not one single page dedicated to telling the story of the brand. Moreover, it’s a section in the website dedicated to different sides of the brand’s personality: executives, citizenship, sustainability, initiatives, etc.

We hope these will serve you as inspiration for a perfect about us page. Although you might tend to neglect this aspect of the website, please keep in mind that it’s as important as your online business card.

The post About Us Pages Earn Trust. Here’s How (to Write Yours) appeared first on ColibriWP Blog.

You can apply this to website design as well.

Don’t start from scratch, you can get overwhelmed.

Find inspiration. It’s plenty of it out there.

I did some heavy lifting for you and made some research for nicely crafted websites (and what’s the thing that makes them tick).

Check them out below.

How to make a creative website

Below you’ll find the 6 main ingredients for creative web design. Let them be named theory. And, as well-done things start from theory, let’s speak creativity techniques.

1. Organize the website differently, but still focus on usability

People are used to reasoning in a certain way, by following proven, widely-acknowledged thinking paths. Thus, best practices in web design formed their expectations as to where they can find what in a website. Online, their expectations are met by traditional website elements assembled in traditional manners.

Somehow, this phenomenon numbs their attention and they might ignore important parts of your message.
This is where breaking conventional logic comes in. Surprise people, shock them if needed.

A peek into theory, by way of example:

Rivercliff Ranch – vertical menu leaving room for pictures showcase

Rivercliff Ranch worked its way through the rigors of web design:

• placing the menu vertically
• the menu is set on transparent background
• Visitors just let themselves wander across the photo gallery
• At changing the page, a slight zoom-out/zoom-in effect preserves a registry of elegance for the vertical menu.

2. Use lateral thinking to make unusual associations

Lateral thinking is a creative technique that involves reasoning that is not immediately obvious and makes use of unusual associations. This reasoning does not follow traditional step-by-step logic. And the results may be gorgeous.

Another peek into theory, by way of example:

Bamfieldmsc – connecting marine sciences center with a watered footer

Everybody expects a Marine Sciences Center to speak about… marine ecosystems. But to bring the marine ecosystem into the website, this is unusual:

• website pages are literally flooded
• There is some bottom-line information that they drowned into waters
• the website manager makes good use of suggestive, marine-related background images.

3. Pretend you don’t have to code it

Great ideas can seem hard to put into practice, due to the limitations of HTML, CSS, JavaScript, etc. However, a good creative technique says that you leave code aside and let your mind frolic in search of the best website design. Think instead there’s no idea that code cannot bend to.
How the “Pretend that you don’t have to code it” theory took form (an example):

Perficientdigitallabs – creative web design blowing up code limitations

• All of this site defies the coding laws and strikes the eyes.
• scrolling itself is completely reinvented.
• Portfolio work is presented in balls that are mouse-sensitive.
• the transition from Work to About page describes a fade-out/zoom-in effect.

The website seems to have bent all code to its own design rules.

4.  Add contrast, use of black and white, light and dark, etc.

Another creativity technique good to know for web design is to add contrast to a website. Contrast breaks the monotony of color uniformity and helps transmitting a creative message.
A peek into the “Adding contrast” technique powers

TheGreat.Agency – Spot the contrast

• First, it’s a contrast of luminosity and shadow. The spotlight is mouse-sensitive, as the cursor moves, the spotlight moves, too.
• Second, it’s a contrast of white and dark blue; The impression is of “physically” turning the pages of a catalogue.
• the website exhibits the logo almost organically, in the form of liquid ink.

5. Intentionally add imperfections

This technique helps to establish a more authentic connection with the readers. Nobody is perfect, but anybody is sensitive to nice little imperfections. The imperfection in a website makes it more real, more credible, by adding authenticity and truth to it.
A quick look into using imperfection for a creative website

Myeverafterevents – a play on perfection/imperfection

• The primary color is pink, sprinkled into the homepage everywhere
• This coherence in color is pervading perfection, while allowing for attempts at giving the page a more “handcrafted” look
• The imperfection lays in titles typography
• pink is painted on irregular parallels, giving the impression of a vintage events album.

6. Go out of a pre-described layout and try some creative layouts

What if you choose to start a web design adventure and go out of a pre-described layout?
It might sound challenging, but we bet you’ll be more than content with applying this technique to a truly creative website.

A quick look into theory, by way of example:

Thegoodstory – displacement of the conventional layout

• conventional elements give you the illusion of two-layered dimensions
• Section images interlock
• If the header is melt in diluted color, another section is delimited from the upper one with pebbles.
• a video looks like being presented from behind the scenes after the homepage canvas was torn to pieces.

Mingling the ingredients…

Mingling the above-mentioned ingredients will result in a mix of elements ready to form a creative website. However, a disproportionate mix, depending on the percentage of newness or traditionalism it covers. We’ll further look into how this mix gives 2 different types of creative websites: immersive and expressive.

Immersive design

There are websites that seem to have found the perfect blend of ingredients. The perfect techniques that made web designers achieve the perfection rules and go beyond them afterward.
They are creators of experiences. A visitor simply cannot stay away. Any new visit is a new opportunity to create your own story.
For such websites, designers go unconventional and use coding just to explode imagery into unique website design. Unique designs through the discrepancy from all that has already been on the web, and unique through the experiences that cannot be shared, but only felt individually.
These are called immersive websites. Let’s see how some of them look:

Nurturedigital

The website takes you on a road to exploring. The transitions from one page to another, from one section to another, are nothing but a surprise. If you let yourself led by the intuitive navigation, you will be mesmerized by how much Nurturedigital has to show.

Lanapapier

Lanapapier.fr combines style, elegance and innovation in a highly creative way. The immersive experience begins with the header, and the rest of the pages do not fall behind. The navigation within the website is smooth, ensuring a perfect coherence of the message throughout the pages.

Carbone.Ink

This online magazine does everything differently. It has a form of expression of its own. The unusual strikes the eye from the very menu categories. Images accompany the articles, making them catchy for the curious reader. The transition from one page to another is done with a blinking graphic that stirs impatience into the already impatient reader keen on reading more.

Melville Design

Melville Design has a website that impresses through the images and unique layout of its pages. The decoration objects are exhibited at their ultimate peak of beauty, letting the reader mentally construct an interior of his/her own, those objects included.

Danielspatzek

This website blows up all the laws of web design, presenting the information in a pretty unusual way.

The attention is retained by a succession of graphics in the middle of the homepage, delimitated from the rest by geometrical yellow lines. Motion is added to this succession of graphics, which deconstructs the images in a funny and interesting way. The website also makes good use of typography styles, that go from the norm towards unconventional writing.

Bonnemarque

This website is another good example of immersive design. The play on words is very creative, and it announces the beginning of any user’s journey into the website pages. When scrolling, wonderful images unfold, as they stem from several couples of letters.

BearIdeas

BearIdeas is creative right from the concept they use. Depending on the mood of the day, the visitor is invited to choose a polar bear or a black bear. Further, visitors will be taken on a journey that is nothing but fascinating.

Giampiero Bodino

This website presents a stunning exhibition of decorations and art. It is structured in the form of a book (with chapters), or an art album. The explosion of artefacts pleases the eye and makes the reader want to further explore the website, in order to complete their experience with the Giampiero Bodino’s creations.

Expressive design

In the case of expressive design, there is a similar mix of creative ingredients. However, the mix is disproportionate, as the percentage of traditional elements is greater.
Unlike the immersive design, where the users form their own story from what they see on the website, expressive websites are somehow tributary to collective stories: the website designers do at least one thing different, and visitors adhere to a special community, following a red line. The changing experience happens in real-world, being just a promise for more – on the website.

Let’s see some examples of expressive design:

Alpskomleko

The originality resides in what the homepage displays when people scroll to see more. Different headers replace each other, at a scroll. Every header presents new images of the alpine area. As a result, the reader will be more inclined to drink that Alpine milk and start indulging in an experience that promises to expand itself once the habits settle down.

Mesmerize Theme – Agency Website Template

This is a demo from the Mesmerize theme, and where the header image is a dynamic element that constantly changes the copy of the text from “ranking” to “optimization” and so on. Since it’s an agency website, our designers for a calming blue, for its effects on increasing user trust, stylized cartoons of serious stuff such as charts and analytics, remind the user that this is a professional company at ease with complex problems.

Andrevv

This simplistic design lets the reader wanting for more information to discover. Hence, the user will scroll down the page, in search of bits of information filtered through a blue ball that continuously changes its hues, texture or color, in a never-ending story.

La peau de l’ours

This website uses magnificently unusual typography styles and contrasting transitions from one image to another, and from one page to another. It really expresses the power of artwork and invites the readers to discover more. As a result, the website pages invite the visitors to join a community of artists and art influences, for the sake of creative artistry.

Mesmerize Theme – Resume  Website Template

This is a demo from our Mesmerize theme. Our designers set out to make a resume website for a prospective employee that was at once professional, to the point, and friendly. In the browser, the header image takes up the whole above-the-fold space and allows the candidate to warm up the visitor with an image of him before visitors scroll down to their actual skills and professional experience.

Cirque Gruss

The website is creative through the use of suggestive images/videos in the background. Their presence on the homepage gives a user the impression he/she is watching a show. The circus experience is brought to the screen, where the website offers a glimpse into what their shows mean.

Huys Nyc

The website uses creativity in making navigation start from a sidebar table of contents. Categories in the menu appear on the left hand of the screen, whereas a suggestive image displays on the right hand of the screen.
Mesmerize Theme – Sports Website Template

Going to the gym or doing exercise can be a real pain, that requires one to have a good motivation. “Just do it” as Nike would have it. When creating this demo website for a gym, our designers wanted to instantly give a visitor a mental pump, to go out and improve their fitness levels. For this reason, they opted for a fade-to-white image of an athlete, which then emphasizes the powerful copy that pushes people to action.

To wrap up

Immersive or expressive, the websites should first be judged from the point of view of their value for the visitors. Sometimes, creative websites might be a solution of value to the users, some other times, they might be not. It all depends on their success in terms of traffic, or conversions, time on page, etc.

Considering its value for the readers, what type of website would you choose to develop: one that follows the principles of immersive design or expressive design?

[sibwp_form id=1]

The post 20+ Creative Websites that make users go WOW! appeared first on ColibriWP Blog.

The role of a logo is to help sustain public recognition. Wherever it is seen, the company and the brand are associated with that logo, and all communication is tracked back to its source. That is why creating a successful logo is no easy task. It involves a lot of responsibility, professionalism, and inspiration. A good logo presentation can help create an identity for any business – no matter how unique its product line might be, If you want to make your logo presentation unique and eye-catching, just check out this google slides brand presentation theme

That is why creating a successful logo is no easy task. It involves a lot of responsibility, professionalism plus a great dose of inspiration.

Analysis of the circle

Contrasting with other shapes, the circle expresses perfection, and continuity through its infinitely going line.
Some of the psychological implications of circles are:

• Wholesomeness
• Connection with the earth; it goes hand in hand with earthy symbols
• Minimalism and refinement
• Perfection
• Wellness
• Completeness
• Order
• Infinity
• Oneness
• Universal
• Partnership
• Positive emotions
• Femininity.

Circles differ widely from angular shapes, triangles, rectangles, etc. in that they lack toughness, straight directions and shape blockings. Angular shapes convey a sense of security, traditionalism, strength, etc. Circles transmit a sense of power in another way. And this way is detailed below.

Circular logos are usually combined with other elements, that give them personality and consistency. Some of them are well-known, which makes them come over the basic shape and color. This means the brand identity has had the desired effect on people’s minds, and that they have been long prepared to assimilate it the right way.

Circular logos combined with different elements

There are several tools for creating brands, each of them giving you possibilities to play with the logo components, in different formats.
Some examples of playing with form, color, and concepts:

• Abstract logo

Unlike the other types of logos, the abstract logo is made up of geometric shapes. They can be iconic or combined marks, in that they have only graphics or combine graphics and letters. They are truly unique and are pretty recognizable as distinct for the brand they represent.

• Mascot logo

A mascot logo has a central character depicted in vivid colors, and that is charismatic. It appeals to young people, families, and children.

• Emblem logo

Name and symbol are included in the form of an emblem. It is a logotype preferred by schools, colleges, institutions, but also other businesses.
As you can see, the latter two examples have circular forms. They have certain implications of the circle and its iconic style.
Next, we’ll accompany you through an adventure of contemplating logos in the form of circles with different elements added to it.

Circular logos with stars

  
The European Union’s logo – flag is a circle made up of stars. The stars represent the countries that are part of the organization.

Another example is of a logo with a circle of stars used in a wider set of an emblem. It is appropriate for educational institutions.

This might be a logo for sports, like in the example below. It is, in fact, an emblem logo with a circular frame with stars around it enclosing a ball and crossed bats.

The ring of stars is the uttermost expression of perfection, met standards of excellence and brilliance. Moreover, it is representative of infinity in what it has as limitless, aspirations, and high expectations.

Circular logos with fonts

   
The first is a combined logo, where the circle is continued with the circularity of the brand name. Together, the geometric form and typography, enclose the initials of the brand name.

The second is a logo for an event: the Olympic games of 2020. It incorporates the traditional Olympics logo, the event name and an added circle made up of small geometrical shapes:

Silver Tree Events defines its identity through the brand name and, on top of it, a circle enclosing a growing tree.
The latter is a good example of a circular logo with a name, whose circle is full of consistency challenging the mind to interpret it.
 
In some cases, the text itself can be the circle. It is written in a circular form and encloses the graphics that also contain rounded shapes.
Starbucks also has such a logo with circular text. It encloses the mermaid in a whirl of text that is memorable all the more it is associated with that particular graphics.

 Black and White Circular Logos

There’s no better example that comes in handy, than the logo for WordPress. It’s designed in black and white and it’s a circular logo encompassing the big initial letter that starts the name of the brand.

Another great example of a back and white circular logo is that of Mercedes Benz.

BMW, another car brand, has a circular logo where black and white are predominant.

Circular logos with colors

       
There’s no better way to give consistency to a circle than to fill it with color. Above is an example of a logo that makes use of vivid, fleshy colors, thus being easy to remember – the logo for Firefox.

Vodafone also has a circular logo that is filled in with one single vivid color. It is iconic, abstract and most of all, widely accepted as the symbol of the phone company.
        

The Sony Eriksson logo is an abstract one, designed in a circular form where the green color prevails. It is widely recognized as it became the distinctive mark of Sony Eriksson.

Xbox also has a circular logo that’s made its way to people’s minds. It uses green wiped out in 4 parts by white stripes.
Spotify applies shapes in the form of radio waves onto a green circle. It is suggestive of what Spotify represents and is easy to remember by people who are exposed to this logo.
 
A good example of a yellow circular logo is the logo of Tide. It is made up of concentric circles with yellow alternating with orange. In the middle, the name of the brand stands out in a completely different color.

The Atlas circular logo has a very simple design. It combines white with orange, text with shape and gives the form of a company that should be taken seriously.

However, the orange circle conveys a sense of youthfulness and optimism, and dynamism as well.
Another example of a circular orange logo is that of Via Delivers, a translations company. The orange circle wraps the text in a playful color. The text itself plays upon the suggestions of a V and a reversed V (A). Turned upside down, the logo will keep the same meaning.

Circular logos with dots

 
In the form of molecules, the logo of Mozzaika transforms the circular shape into a bigger molecule. It connects shape and text through the use of particular colors, thus offering coherence between the circular form and the text.

Another form of circular logo includes familiarity and ease of access in its connotations. It is a logo taken from the Etsy shop, and it wonderfully expresses friendliness in a circular logo that looks like an invitation to a teacup.

Circular rainbow logos

  
A rainbow in a circular form? Yes, there are circular logos that adopt this way. This is the case with the first example above, where the rainbow is circled in a whirlpool of color.

Another example presents multiple circles so arranged that they form a larger circle (or round flower). The circles are filled with color, and convey a sense of joy and optimism.

The Google Chrome logo makes use of complementary colors and mixes them in a filled circle having the form of a wheel.

Minimalist circular logos

 
The first logo above exemplifies the use of minimal graphics for creating elaborate forms made up of shape and text, and initials. It also proves that, although the inner and the outer circles are incomplete, people will tend to fill in the gaps and perceive a circular logo.

The example below shows that simple is not always less, in terms of logo design. A simple circle does nothing else but showcase the brand name, which is written in a trendy font.

The anatomy of a logo

Let’s break down the examples above, by identifying the 4 components every logo has. It is all about professionalism here, as professionalism is the basis on which to build with creativity and inspiration.
So, if we were to keep ourselves on the side of professionalism, there are several components that a logo includes:

• The heart (mission, vision, values, core concepts)

A concept will take form from analyzing the fundamental values associated with the brand. They are found in the company’s vision and mission and trace its identity back to the reason why it actually exists.

• The brandmark (the visual graphics of the brand’s heart)

The brandmark is the visual representation of the logo’s heart, precisely the form the core concept eventually takes. It will serve as the passport to people’s attention, and hence, to the audience’s mind.

• The voice (the font used in logos)

Different fonts are associated with different tonalities a message can be wrapped in. The chosen font for the logo will be the tone of voice a company says to people “We are…”.

• The accessories (the colors used for the logo)

Certainly, colors have some psychological implications and they have to be carefully selected for the logo. However, they are not central to a brand’s logo, which comes to say that they fall into the accessories category.

Important to note! A logo’s effectiveness is judged first by its legibility. It has to be easily read by consumers, it has to be recognizable in any type of format, and even in black and white.

Tools for creating circular logos

If you are in search of the perfect logo for your brand, you should check the suggestions some tools like Canva or Tailor Brands have to offer you.
You can make comparisons among different shapes and graphical representations and select what best suits your company.

Note that:
! Our brains are inclined to fill in the gaps, whenever we see an incomplete shape. Think of the 2 “circles” in Chanel’s logo:

! When choosing to create a circular logo, think of ways to intensify the circle, make it more prominent and visually obvious to the audience. It will have a bigger impact and will be easier remembered.

! As you intensify a circle for your future circular logo, also think of creating a visual hierarchy. As a result, some elements will be more noticeable than others, and they will serve as the spearhead of the brand’s identity.

! If you have already given a visual hierarchy of the items in a circular logo, chances are you will be successful in priming the desired concept in people’s minds. For instance, in the Burger King’s logo, the graphics are suggestive of a feast with… burgers. The colors are vivid and leave no room for interpreting the logo otherwise than related to this food company.

A closing word

Circular logos are widely used, and widely recognized through their force of impact. However, it implies a lot of creativity to give life to a simple circle in branding design.

Starting from the association of an inner circle with an outer circle, and going towards giving complexity, intensity, elaborate shapes and color to the logo, all belongs to the process of circular logo design. Professionalism, as already stated, makes a good part of the job, but circular logos design also involves inspiration and freedom of imagination to be successful. Ready to get started?

The post How These Rounded Logos Capture Your Attention appeared first on ColibriWP Blog.

First of all, what are background graphics?

Background graphics are a type of background that gives contours to a website design.

They stand next to background images, animations and videos, and have their role in site design, when wisely used.

So, the more comprehensive question should be: what is a website background, or what are web page backgrounds?

We’ll start the explanation of website backgrounds with an example:

This example shows a combination of graphics that completes the design and gives it fine contours.

What is a website background?

Actually, the background of a website holds the theme of the site together. Inspired backgrounds help to create an overall theme, or better customize it, so it gives the pages more personality.

Our web design experts recommend using background graphics if they answer important questions related to branding, advertising, marketing, or some other promotional material.

The background creates a general feel of a website. This heavily contributes to shaping the brand and imposing its expressiveness in front of visitors. It might be part of the ways the brand exposes its values and transmits specific emotions.

Through layered effects, backgrounds give depth to web pages. They create perspective and help web surfers better get the brand message.

A modern form of website background refers to parallax:

You’ll see that, if you scroll down the page, the image in the background stays in place, while the foreground moves to the next section.

Here’s a definition of the parallax effect:

“Parallax scrolling is a website trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.”

Why should I need background graphics for my website?

Before finding the answer to this question, you need to be aware of the 2 main types of backgrounds:

• Body background
• Content background

Body background is the “distant” background, and users will see it covering the whole body of the pages. It can be represented by graphics, an image, an illustration, a pattern, a video, etc.

Content background is the particular background for the page content elements, such as text, images, and videos. It can cover the whole page, or it can be set individually, for page sections.

With these in mind, you can determine if you need background graphics for your website, either at page body level or page content level.

But why should you need one?

You might need a website background to:

• Give your company’s story a good start. As you already know, images, and graphics, as well as videos help a lot in telling a story. And when it’s about the company’s story, you might want to use them for a plus of expressiveness and emotion, or for setting the frame…

• Anchor your content and message onto graphical elements. Your site might focus on the pages content and message, but they’ll find a good anchor in a well-chosen graphic element or image, even color…

In case of graphics

and at this stage of web design, you’re free to experiment and innovate, but choose the graphics wisely. That is, your selection should be based on facts and data, or some A/B tests that have proved the choice to be a good one.

Example:

Source

In case of images

it seems there’s the widest range of choices, due to the vast amount of resources you find online. However, there are specific rules you should consider when setting an image as your website background, as well.

Example:

Source

And in case of videos

you should be careful. Videos can be used as backgrounds for presentation sites, and for sites that aren’t content-heavy. They add interactivity, but using them can be somehow tricky. You should consider using short videos, and looping videos.

Example:

Source

Also, in case of colors, it’s simpler. It can be more effective, as well. The color(s) have to fit well into the branding scheme. And the contrast ratio (contrast between background color and content color) should be a reasonable one, so the content elements are easy to read. Even white (if you have a white background) should be selected after some time of consideration, and not just because you forgot to set the website background.

Example:

Source

What effects do background graphics have in websites?

If you choose to go with background graphics, you should consider your choice and be aware you selected them for a reason. Graphics in website backgrounds have certain effects that you have to know about before making the actual selection:

• They give depth to the website pages.

Using graphics into the background can give depth to the web pages and make them look better. Users will be more inclined to analyse those pages content, as those pages have captured their attention and “told” them to stay for more.

• They create perspective into the website pages.

Background graphics, when used wisely, can create perspective. The text message and other content in the pages can be seen through a specific angle, as the entire design (background graphics included) suggests users to do.

• Graphics give personality to a website.

Together with the brand name and the logo, as well as domain name, the background graphics contribute to giving personality to a website. They add up to its expressiveness and are a good anchor of well-written, inspired content.

• Also, graphics serve to branding.

At an extended level, background graphics can serve to branding. Apart from giving the website personality, they attach Certain features to the brand. Features that you want them to show.

• They serve to giving contours to the design

Simply put, background graphics serve to giving contours to the design. They are an easy way of completing the design with essential ingredients that make it shine.

Here are some more examples of graphics in website backgrounds:

Source

Source

Source

Free background generators

If you want to find something similar, or your own style for the background of your website, you should try one of the following tools:

• Kennethcachia
• Msurguy
• ink
• io
• Codegena
• Btmills
• wagerfield

Best practices for background graphics in websites

Before having the background graphics done, you should keep in mind several best practices that’ll ensure your design success.

Here they are:

• First and foremost, don’t let the background outshine the content of your website.

If you focus too much on the background graphics, you might lose sight of the importance of your content. As a result, your site background might look better than your site content. As a rule of thumb, don’t let the background outshine the content of your website, no matter how interesting or evoking you find it to be. If the background graphics are highly interesting, then the content should be all the more so.

• You should focus on the graphics at the top of the page. However, don’t cut them abruptly.

Studies show that people focus more on the space above the fold in a web page. So should you, in designing the graphics for your web pages background. Consider placing them rather at the top of the page than down the page, before users start scrolling. Also, if your background graphics are limited to the top of the page, you shouldn’t cut them abruptly. The design above the fold has to merge with the design of the page below the fold.

• Don’t try to make the graphics too obvious in the page.

If the background graphics are too visible in the page, they might fail to meet their purpose: bringing your content forward. Remember their unique role is to give contours and make the content more expressive. So, you shouldn’t design anything that counters this goal. Let the content shine by itself, and have its full effect upon the website readers.

• Sometimes, it’s better to have background graphics only in the Hero header.

In certain situations, having a white background for your page sections is better than to overload the page with any background graphics. If you deem it necessary, you might include them in the Hero header, and limit them to this very section. It’s the first section people will see when they land on your website, so they might impress from the very beginning. Your content in the page will do the rest.

• Remember that videos can be heavy and slow.

If you find it more useful to include videos for the website background, please take note they can be heavy and increase the site loading time. If you choose videos, you should choose short ones, or use loop videos and limit the number of times the video plays. In case you reduce the video size, and lose its quality, an overlay (even a patterned one) will do the trick. However, in terms of site speed, it’s better to have background graphics than a background video, so choose wisely. Graphics are much easier to handle, and they don’t overload the page.

How to add background graphics in a website?

Background graphics have to be added in a .jpg or .png format. So choose one of the previously mentioned image formats, even for graphics.

In Colibri, you have t go to the Customizer, at the General Settings section. Click on that section and expand the settings, where you’ll find the Background Image subsection. Click on Background Image in the Customizer, and upload the graphics as a .jpg or .png format.

You can set the display of the background graphics by adjusting the image size: Fill Screen/Fit to Screen/Custom, etc.

Also, you’ll see additional settings for your background, in Colibri.

How to remove background graphics from websites?

For websites built with Colibri, to remove background graphics is as simple as to remove a background image.

You need to open the Customizer, go to General Settings, and then to the Background Image subsection.

You’ll expand the settings for your background, and you have to press Remove under your image/graphics, to suppress the element from your website.

After removal, you can select new background graphics, or you can leave this field blank.

How to change the background in a website?

In a Colibri website, you can replace the existing background with a new one, from the same sections as indicated above.

In the Customizer, scroll down to the General Settings section, then click on the Background Image subsection.

You’re supposed to already have background graphics uploaded, so you need to replace them with another background. Under the graphics (uploaded as a .jpg or .png format), press the Change image button and select the new graphics/image you want to upload. The new image will display under Background Image:

To save your changes, you need to hit Publish. The new background will display onto your website.

How to edit your background graphics in the site?

To edit the background graphics in a Colibri website, you have the following options:

When uploading your .jpg or .png format of your graphics, you can click on Edit image and adjust its dimension, orientation, etc.

You can also:

• Attach an alternate text to the graphics/image
• Customize its title
• Create a caption for the graphics
• Fill in the blank space with a specific description of the graphics
• Reposition the image/graphics
• Check the graphics/image to scroll with the Page
• Choose to repeat the background graphics/image, and test how it looks

With Colibri, you have freedom to adapt your selected graphics to the design you want to configure for your site.

To sum up…

Background graphics can enliven the site and give it more expressiveness. However, if not handled correctly, they might do more harm than good. This article is intended to give you the needed guidelines to use them appropriately, so you make the most of their use. A set of best practices, some examples that’ll serve as starting point, as well as a collection of tools to create your own backgrounds should contribute to an advanced use of background graphics.

We’d love to hear about your experiences with background graphics, and we’d like to see your websites, on their way to success.

The post Background Graphics You Can Get from a Few Inspirational Tips appeared first on ColibriWP Blog.

What to integrate in a website footer?

First, let’s see what elements should be integrated in a website footer. Consider one or more items from the ones listed below, and carefully decide what to include in your website footer. Research has found that improving the website footer can lead to as much as a 23.77 percent increase in conversions.
We’ll take these elements one by one:

• Copyright

The copyright notice, although not mandatory, is still a must-have for any website. It is a notice that helps to prevent copyright infringement. In case someone copies elements of your website, those persons can’t claim ignorance. Footers containing only the copyright notice have a simple, yet elegant presentation.

The copyright notice usually includes the © symbol (copyright symbol), the year of publication, and the name of the copyright owner.

• Terms of service

As the copyright notice, the terms of service are not mandatory, but they should be included in the website footer. They refer to the general rules and guidelines people are deemed to follow when using your website. They may be named as such (“Terms of Service”) or “Terms of Use” or “Conditions of Use”, like in the example of Amazon:

Terms of service can be enforceable, through the browsewrap and clickwrap methods. The browsewrap method refers to the inclusion of the Terms of Service through a link in the website footer. The clickwrap method, however, refers to the placement of the terms of service in forms, i.e. when users try to create an account. When they click “Submit”, they also have to agree to the terms of service of that site.

• Contact, address and business hours

One of the most important elements in a website footer is contact information. If people like what they see on the page, they will want to further get in touch with you. Leaving a phone number, email address and physical address in the footer will help them a lot.

Sometimes, it is also recommended to include a map for simple geo-localization as well as what business hours a company operates.

All you need to do is transmit that you are findable through some points of contact, easy to be identified in the website footer.

The footer below was created with the Mesmerize theme, for the Pizza restaurant demo.

Mesmerize Theme Footer

• Social media buttons

It is a best practice that you should place social media icons in the footer of your webpages. You want your visitors to stay as long as possible on the site. And you will want to direct them to other places/groups only after they have taken into consideration the whole information presented on the website.

That is why putting social media icons in the header or body of the page is not quite recommended. However, when placed in the website footer, they make your visitors dwell longer with your business (even if somewhere else online).

• Widgets

Widgets are small applications that can help you insert different pieces of content into the website footer. Some examples include Calendar, Archives, Categories, Recent Posts, Recent Comments… and the list continues.

Below is an example of footer with widgets included:

• Description

Some might want to include a description in their website footer. Or some links with short presentations of what characterizes the business. The above example is representative of a website presentation placed in the footer. Here is another example – with links to short presentations of a business:

• Search box

It might be useful to include a search box in the website footer. Users might not have found what they were looking for in the page body; when they hit the page bottom, you offer them the possibility to perform a specific search for the item they are searching for. This is a sign that, although they reached the end of a page, they have not reached the end of the website. They might navigate further into the website and consult the needed information.

• Subscription option

It’s common practice to put an email signup form in the website footer. Users that find helpful the information in the website will be inclined to subscribe to a newsletter, when they find this option in the footer.

Footer built with Mesmerize Theme

• Call-to-action

It is recommended that you include a clear CTA in your website footer. Now it’s time for you to take action. Don’t let this moment pass by, and invite users to further exploration, like in the example below. CTAs might well increase conversion rates, by helping undecided users to make up their mind, in favour of a product/piece of information/service, etc.

What inspires your website footer?

With the elements listed above, you can make a mix of visual and writing that leaves the users with certain impressions about your website.
So, what does a website footer inspire in the readers?

• Reviewing the website

A quick glimpse back into the website can trigger stronger connections of the users with that website. An overview of the most important pages/information, in the form of a shortlist of links, can go a long way in further engaging the users.

Source: https://www.awwwards.com/

• Continue navigation within the website

Sometimes, the footer can be so intriguing, that it doesn’t let the user go. It invites him/her to continue navigating within the website, and find the answer to a key question: is this website appealing to me? What do you think about this:

Source: https://www.awwwards.com/

• Action (contact, CTA)

An encouragement to take action (be it directly or indirectly) can well find its way into a website footer. Shell invites users to perform a certain action, based on their profile and in a very elegant manner:

The centered column briefly asks “Can we help?” and gives the list of possibilities to act upon the situation that best describes a certain user.

• A sense of belonging to a community

There are different ways a website owner can design their footer to express this feeling. In the example below, the designer does this visually, by expressing in several colourful graphic elements the atmosphere in a certain geo-location, at a given time.

Source: https://www.awwwards.com/

• Cleanness

By respecting a certain hierarchy of information, and grouping links accordingly, a website footer can give the impression of being organized, neat and clean, and ready to be explored. This is what the example below conveys when being scanned by users already reaching the website footer:

Footer built with Mesmerize Theme

• Professionalism

A good-looking footer has all chances to look professional and transmit that there are no superfluous items in the dedicated space. No items are redundant, and everything is well placed to transmit the values inherent to the organization.

Most popular types of website footers

Below you can find the most popular types of website footers, learn when to use them, and what they do for your website.

Fat footers

There is a general trend in web design that encourages the creation of footers with plenty of elements and information. Why this?

A study revealed that, although the most-viewed space of the page is placed above the fold, the most-engaged users are those that spend more time and engage with the website more at the bottom of the website. The below the fold space is thus viewed for nearly 3 times longer than the above the fold space.

Joulefinancial.com offers plenty of information in its footer, making it easy for visitors to find contact data and plunge into more educational info provided by the site.

Sub-footers

Sub-footers let website owners add a secondary level to a webpage footer. Information that is necessary, but which website owners do not want to showcase in a specific way, can be placed into a sub-footer.

Copyright, social media icons or subscribe buttons can be arranged under some useful site links and any other valuable information.

CTA-focused footer

Demicreative.com has a plain call-to-action, when inviting users to “Give us a shout”. The invitation is followed by the mail address and the phone number, facilitating people to “give a shout” regarding their brand.  The blue background is reassuring and professional, smoothing the way these people can enter a collaboration with Demicreative.

Bluestag.co.uk also has a clear call-to-action, “Hire Us”, followed by the contact details. The phone number and the email address are clickable and ease the contact process for all who are inclined to “hire” Bluestag.co.uk.

Socialtriggers.com has a more obvious call-to-action. The traditional CTA button is outstanding – in the website footer, by its placement and its salient color.

Emaildesign.beefree.io is another example of CTA-focused footer. After having consulted the webpage, people are more inclined to select the services the company provides. That is why the button saying “Take me to the Bee Mail Editor” invites people to try the service of the company, even from the website footer.

“About Company”-focused footer

Social Fresh only has a link in the menu, towards an “About us” page. The rest of the homepage is filled with articles that consolidate their competencies, so the need to find out more about the company might arise when reaching the page bottom. As a result, they included a short description of the company on the left side of the footer, for people that are more interested in their activity.

Wpbeginner.com has a similar footer, with some space dedicated to a description of the company. It addresses people who have been interested in one article, and who are afterwards interested in finding out more about Wpbeginner.com. Based on how convincing the description is, people decide whether they mark the website as a point of reference for future related searches.

Sitemap and links at the center of the footer

This footer example for our Mesmerize Fashion website demo  was designed to be rich in links, presenting the organization and the latest posts published on the blog. They are structured according to a simple hierarchy, to meet the standards for cleanness and avoid clutter.

Footer built with Mesmerize Theme

Nytimes.com has a footer that lists all the categories and subcategories of the journal. A great part of it is filled with links towards those categories. After people consulted some articles directly from the homepage, they can easily switch, from the footer, to a different section and browse the articles corresponding to it.

Product-focused footer

Webflow.com/ecommerce lists a wide range of products/services destined to designing online stores.  You only have to choose from the different segments of offerings, and you will be taken to the page presenting those offerings in detail.

Copyright and usage-focused footer

There might be such a thing as a simple footer. It only includes the copyright notice, with no other information added.

Chobani.com includes links to the Terms & Conditions, as well as the Privacy Policy valid for the website. So, in this case, the footer is the place to fill with necessary, but not such interesting information.

Architecturaldigest.com has a more descriptive paragraph about the User Agreement and Privacy Policy. The placement of information accounts for a two-layered footer, as the rules of the website are presented in a sort of sub-footer.

Contact-focused website footer

Bluefountainmedia.com has a footer which is rich in contact information: maps for geolocalisation, offices addresses and headquarters address are included. In the background, a suggestive image seems to invite people to get in touch with the company’s team.

Social media-focused website footer

As obvious as the space for newsletter subscription, social media icons invite users to follow “Guerlain” in social media and contribute to the company’s community.

Footer that keeps people wandering in the website pages

The footer of the Ebay website offers links that urge people to stay on site and wander about, exploring for more.

No footer at all

The idea of inexistent footer is correlated with infinite scrolling. It suits some websites with lots of user-generated content or newspapers where new articles are presented one group after another, endlessly.

A good example of this is Mashable.com:

To put it all together

The website footer is not to be neglected. According to research and different studies, it is a favourable place to capitalize on to increase conversions. Depending on the website type and the objectives of each page, the footer might include different elements of use for the visitors. The only thing you have to do is choose the RIGHT elements to put in the website footer, and organize them according to a clean structure, easy to browse and take benefit from.
[sibwp_form id=1]

The post 29+ Website Footer Examples and Why They Work So Well appeared first on ColibriWP Blog.

It’s time for spring, it’s time for discounts. You have special Easter offers that might take you a long way in your website(s) creation or ampler web design projects.

It’s your chance to grab up to 40% discount on whatever tool you want for designing your beautiful websites.

Whatever you need, from a simple WordPress theme to the new generation Colibri website builder, you get them now at a lower price.

Show me the Easter discounts for Colibri

Show me the Easter discounts for WP themes

You should hurry…

The offers are available until April 22^nd.

Until the expiration date, you should give your decision a form: get a popular, five stars-rated tool for building an outstanding website.

If it’s simple to take a decision, it’s simpler to use our site building tools.

Give yourself the chance to succeed. Give your project(s) an exclusive opportunity to shine.

The post Special Easter Offers for Your Future Website Building Tools appeared first on ColibriWP Blog.

A soft color palette is pleasant to look at. It creates harmony in a website design, making it enjoyable and worth visiting. But a soft color scheme offers something more: it brings content forward, and makes it more important than design. It lets website content speak by itself, and the color scheme takes its place in the background.

We gathered some soft color combinations, to inspire you. Here they are:

Example no. 1

Source

This soft color palette is good for completely obscuring the background to the advantage of a website content. It has nuances of pink, blue, green and grey, but in very low concentrations, which makes them soft. Actually, it mutes color to the benefit of content. So if you have great content to display, don’t hesitate to use this color palette.

You can use the less obvious color in the combination for placing important content in the page. It will let it shine with expressiveness. Therefore, the content to place in such places has to be carefully selected and formulated. Also, use the blue nuance as accent color, and reserve it to CTA buttons and other areas you want to emphasize.

Example no. 2

Source

This is a soft color palette you can use for business websites. It has 3 (out of 5) colors that can be used as accent colors. It’s up to you whether the background will have more of the dark nuances or of the light ones. The opposite will be a good selection to accentuate CTA buttons, items in menu, etc. As an example, you have the “Vintage Sundown” color placed on a light-colored background. The combination also incudes variations of grey, which soften the two best-contrasting colors. The passage from pink to brown is soft, slightly perceptible. One soft pink nuance meets a grey nuance somewhere onto the color range.

Example no. 3

Source

This chromatic combination is part of an article on color schemes for wellness or yoga websites. We’ll say the color combo is suitable for a wide range of feminine websites. This time, the contrast between the pink and grey is more visible and better perceived. The middle nuances are far lighter and by this, softer. Here, you can play with two accent colors for different CTA buttons, and keep the in-between hues for backgrounds. The color scheme includes some white (FCF1EF is perceived as white) and colors with much white within their composition, as opposed to clearly visible colors. You can use the color scheme as such or you can experiment, starting from its suggestions of nuances.

Example no. 4

Source

This is a soft color palette that’s similar to the one above. This has the same basic colors: pink, grey, white, but the saturation is somehow different. Also, it suggests a new arrangement of colors in your color scheme, with dark grey for CTA buttons. Or you can use dark grey for pages background, and choose the most contrasting color (near-white) for Call-to-Action buttons. It’s a color scheme that fits business and personal sites alike.

Example no. 5

The above color palette reiterates to a certain degree some other color combos already presented in the article. The difference resides in color saturation, and how light or dark are the best-contrasting colors. The combination includes variations of pink and nuances of grey, more nuances pf grey than of pink. This makes the above color scheme almost neutral, so it fits a wide variety of niche websites. It lacks in accent color that should be applicable to CTA buttons or other items to be emphasized. Therefore, you should find an extra color that fulfils this role of accent color in the website.

Bonus:

Source

As the background suggests, this soft color scheme is best suited for wedding, wedding photography websites. Also, it has a wide range of applications for feminine websites (beauty, lifestyle, fashion, make-up, etc.). It has 5 containing colors, 3 are more pronounced, while the other 2 are almost imperceptible. In this case, you should better use the darker colors for CTA buttons, as there is not enough contrast between light and dark nuances to place “Vanilla” hues onto the “Lavender fields” color. You can innovate by including a gradient for one of the colors, as suggested in the above screenshot. It’s up to you.

Source

Last, but not least, a color palette that’s a good fit for a remarkable website design. It has more pronounced colors, including orange and violet. Its creative color scheme invites you to experiment with the different hues and nuances until you find the best option for your brand. /You have about 3 colors in the combination to select from and use an accent color. It depends on you how you distribute the colors on your website and make it appealing enough for visitors to come and return to it. As a creative color scheme, it’s recommended for innovative websites or companies that want to stand out through a unique design.

Source: Depositphotos

You could even try some reverse engineering when trying to identify the right color palette. Try picking a palette not based on colors but on a place or a phenomenon.
For example, your business is related to hotel vacations and oceanfront recreation. It’s a clear sky and water, sand, and forest.
Blue has been proven to be associated with comfort, clarity, honesty, loyalty, reliability;
Green – freshness, tranquility, relaxation, trust, peace, hope;
Yellow – youthfulness, freshness, optimism.
Indeed, these colors suggest the tranquility and relaxation that oceanfront hotel vacation offers! Depositphotos has lots of such examples that can inspire you.

These are the top 7 recommendations of soft color palettes that you can use for your website. Read about them, select one or two of them and use them. You can use them as such, or you can modify them according to your branding guidelines, to best represent your company or personal website. If you have other soft color palette suggestions or want to share your work with us, don’t hesitate to leave a comment and tell us about your experience with such color schemes.

The post 7 Examples of Soft Color Palettes to Use in Websites appeared first on ColibriWP Blog.

Colibri Charity is a demo developed for non-profit, charity organizations who need a solid presence in the online medium. In this medium, well-designed charity websites could be the means to reach a broader audience and collect funds at a larger level.

More than that, having a charity website is the main condition for online fundraising.

Get .org domains for charity websites

ORG comes from organization. These extensions are specific to organizations and such domains have higher authority in Google. A .org domain for your website ensures you have a good start with your organization, and tells people what your website is about, right off the bat.

The platform you choose has to be easy to work with

Before you sit down and deploy extensive work for creating a new website for your non-profit organization: be sure you’ve done the right choice, regarding the platform you build the website with.

Colibri is such a platform. All setup is in the Customizer, from components to pre-defined blocks to even a dedicated template: the charity website template.

Here’s what you’ll work with, for your Colibri charity website:

Structure of charity websites

Such a website needs a clear structure, and the message should be direct and touching. No extra words, no promotional material should stay in the way of clearly making the call for people to donate for a good cause.

The charity website template has a few key items in the main menu, and that’s all users need to navigate its pages. Some items are associated to the same page (the homepage). These are sections of presentation that are brought forward in the main menu. Hence, these sections are visible enough and susceptible of being clicked more and gaining trust for the organization website.

The multiple items of the homepage included in the demo menu are: Testimonials section, Projects section and Donate section. That is, the most important ones, beyond an organization overview.

Color scheme with predominant white

The color scheme for the Colibri charity template has white as predominant color. White is used both as accent color (e.g. CTA buttons) and for negative space. In fact, white is a non-color which is meant not to influence through emotions, in any way. Users are free to donate or not, depending on how trustful they judge the website and its content.

Thus, it’s of much more importance to have relevant and trustful content than a lively color scheme, for your non-profit organization. The color combination in the template is neutral, and leaves visitors judge the website by its words.

Hero of charity websites – an impactful image

Whereas the color scheme is neutral, you can add power to words by using images. And the Hero is the first and most important place where an image can really make an impact. This is what the Colibri charity template teaches you: how to use a photo being worth 1,000 words.

Actually, it’s the beginning of your story…

Replace the default with a more than equally impactful image, and the first impression will be a good one. Thus, you make sure visitors continue to explore the website.

Title and subtitle (put your story into words)

The title and subtitle of the homepage “translate” the Hero image into meaningful words. Keep in mind it’s a new story for those who land on the page and want to donate. So, be concise, be expressive, be convincing, be touching and be authentic.

The title and adjacent phrase supporting it should be at least as eloquent as the one suggested by the Colibri template:

Use this example as a source of inspiration, and write your own message.

As components, you only need a Heading and a text element. The graphics and text color are easy to adjust, from the Typography, Text color and Text Shadow options.

It’s time to add a Call-to-Action

This means, for your users: “It’s time to donate now”. And it means you need a CTA button after the title and subtitle of your website. You have everything set up in the Colibri template:

By default, the button has a white background, and on purpose. On hover, the button takes the color of the heading and subheading text. And it signals users they are on the point of taking action. You can change this, or you can leave it as such, if convenient.

A Donate Now button in the website Hero starts a donation funnel right into the homepage. People who already know of your organization or are familiar with its name/activity can proceed directly to donating.

Current and ongoing activities

This section ties the organization with its audience. It tells people what activities you organize, and what events they can take part to. It also encompasses the organization vision: it’s an expressive way of telling users what you do, and how you do it right now.

Also, it’s an invitation of new users to join the community and participate to fundraising.

You’ll find a grid layout for this section, and it includes: a representative image, a title and a short description for each activity:

Obviously, if you need another format for presenting your activities calendar, you can use different components and a different layout, in Colibri. Or you can keep the same format as in the charity website template. In this latter case, you only need to replace the photos and text with your own.

Show past projects and reinforce trust

This is one of the homepage sections with related item in the menu. It’s a section destined to present past projects the organization was involved in. And it’s a section meant to reinforce trust.

Your non-profit organization needs a history. And this history unfolds in a masonry gallery like this:

The gallery includes multiple photos of different dimensions. By default, the images are set to open in a lightbox. You can change this and choose to link to media file or link to attachment page.

Please note that a trustful organization has a history. Even if a minimal one, and your activities are of recent dates. Gather all you can include in this section, and try not to omit it in designing your own charity website.

Future events section in charity websites

As important as the organization history is its events calendar. What will you do in the near future, when and how? This tells a bit more of your direction, and your charity activities plan.

It’s essential for users who donate to know what they donate for. Also, it’s an invite for website visitors to join the community and take part in future charitable events.

As a key section, this couldn’t miss from the Colibri template:

Remember the importance of using impactful images? Colibri shows it all along the website pages and sections, and guides you to take it into account when inserting your own photos.

You can, and are encouraged to give details about the events, such as: where they take place, what hour they are set for, who the team leader is and who will manage the good run of the event.

You can add as many sections as you need, according to your activities calendar. And the Colibri options to customize them don’t limit you in designing these sections as best you want.

For instance, you can add CTA buttons or add some interactivity, to increase commitment to participate.

Icons related to charity activities

Last, but not least, you can customize icons. This amounts to customizing every detail in the website to pixel-perfection.

The tool gives you the right options when you need them, at every stage in the design process. You’ll see you have them at hand, when you need them for your site design. This is the case with icons. You can choose icons that fit a charity organization, like shown in the template:

You have 8+ icons libraries. From them, you can select the most appropriate ones, and include them in your lists. Or you can use the already existing icons in the template.

As a conclusion

If you start building charity websites, you should remember this: Colibri is just the right tool to simplify the process and lets you focus on activities that count most for the organization. In designing the website, you’ll see the appropriate options at hand, ready to support you in quickly and professionally presenting your non-profit organization. Consider the advice in this article and the website-building process will be simple and fast. And so will increase your chances to be visible to a large audience that’s willing to help.

The post It’s Easy to Build Charity Websites with Colibri appeared first on ColibriWP Blog.