Website Guidelines

Professional Design

When you only have milliseconds to make a first impression, a professional design will help you stand out. Having an up-to-date, modern design communicates the quality of your business to your user and starts the trust-building process. A professional design means your website is easy to understand, has logical organization, and is visually pleasing.

The design should stand out and be unique from others, while keeping consistent uniformity among elements (like the location of navigation, white spacing, and typography styles) throughout the site. Plugins or elements that break the cohesiveness of the design will stick out and make your site look lower quality. Your website should look professional and clean, without theme watermarks and advertisements from web builders like Weebly, Wix, Squarespace, & GoDaddy.

	It takes about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your Business from your website that determines whether they like your site or not, whether they’ll stay or leave.
	57% of internet users say they won’t recommend a business with a website that is poorly designed.

Brand Consistency

Brand consistency is one of the main pillars of recognition for brand identity – otherwise known as ‘what sets you apart from your competitors’. Repeatedly exposing your target audience to your core messages, values, and visual branding helps solidify brand recognition. Create a solid brand guide to follow that outlines typographic styles, logo styles, types of imagery, style of brand voice, and color codes.

Your brand visuals, copy, and tone should be seamlessly integrated into all aspects of your website, marketing, and social media. Any inconsistencies on any platforms – like images, phrases, or elements that don’t match the rest of your branding – can break the user's immersion and tarnish the image of your business.

	Consistent brand presentation across all platforms increases revenue on an average of 23%.
	Consistently presented brands are 3.5 times more likely to receive excellent brand visibility than those with an inconsistent presentation

Brand Voice

Your brand voice is the style of writing and verbiage used consistently throughout your website, blog, marketing, and social media. The personality of your business should be determined by and directed to your target audience. Your voice can have any style, as long as it feels true to your brand values and persona—be it authoritative, playful, intellectual, ominous, kind, or fun.

Developing brand recognition and trust requires consistency and repetition. If your personality or messaging appears to change frequently, it’s harder for audiences to know exactly what you’re all about. Even more importantly, it can make you seem untrustworthy.

	The most enduring companies have a strong personality and clear sense of purpose. Their message is delivered consistently everywhere they have a presence with an established brand voice.
	81% of consumers said that they need to be able to trust a brand in order to buy from them – your brand voice helps establish that trust.

Scannability

Scannability means that your website copy is easy to scan, and users can quickly find what they're searching for. When you have large blocks of text or text isn't broken up into smaller, easier to comprehend sections, you will lose the user's attention quickly. The copy on your website needs to be concise, and formatted in a way that's easy for a user to scan through information.

Users won’t sit through and read every sentence on every page of your website. Important information should be easily accessible and quickly scannable without large walls of text. Headings should describe the content in a specific section, and then other text styles can be used - like bold, or bulleted lists - to make large amounts of information more easily scannable.

	On average, users have time to read at most 28% of the words during an average visit; 20% is more likely.
	79% of users scan any new webpages they came across; only 16% read word-by-word.

Responsiveness

When over half of users are browsing your website on a mobile device, it’s vital that it looks professional and functions adequately on all resolutions. The layout should be fully responsive; all features are fully usable and accessible on all popular devices (smartphones to large monitors). Furthermore, your site needs to have cross-browser compatibility, as browsers (primarily Chrome, Firefox, and Safari) can render web elements differently.

You especially want to pay attention to text sizes on smaller devices, so users don’t have to zoom in on your site in order to read it which will quickly have them browsing elsewhere. Other common pitfalls are spacing issues, overlapping elements which hides navigation or prevents users from scrolling, or text illegibly running off the edge of the page.

	Sites that haven’t been optimized experience decreased visibility in search engines, and a loss of rankings.
	85% of people think that a mobile site should be as good or better than its desktop version.
	57% of internet users say they won’t recommend a business with a poorly designed website on mobile.

Media

Your website needs to use high-quality images, videos, and graphics that relevantly support your content. All media should help your users get an immediate impression of what your business is about, and further help brand consistency and messaging.

Although stock media can work in some circumstances, you want to avoid overly-posed or fake-looking images. Media should be used in the proper formats – typically .png for graphics, .jpg for photos, and .svg for logos and icons – without being overly compressed or pixelated. Videos should ideally be embedded from a third-party rather then hosted on-site to avoid negatively impacting site load time.

	People prefer images over text – 65% of the population are visual learners.
	Studies show that people remember 80% what they see and only 20% what they read.

Spacing

Margin and padding are very important aspects of web design that help make your website appear professional. Otherwise known as the ‘white space’, this design element helps create visual organization and emphasis. Without correct implementation of this vital element, your website will appear crowded, visually overwhelming, and confusing to navigate.

Your website should have consistent spacing site-wide that matches your design style. Elements shouldn’t overlap each other or have spacing issues that cause visual breaks in content.

	The correct use of white space in text can increase readability by up to 20%.
	Effective use of white space creates a design that’s enjoyable, comfortable, and easy to interact with.

Dummy Text

When designing and developing your website, dummy (or placeholder) text (commonly seen as ‘Lorem Ipsum’) can be used to layout design elements. Unfortunately, this dummy text can go easily missed on remote pages or areas such as a message that appears after a form is submitted.

You don’t want users to see ‘Lorem ipsum’ instead of a phone number or another piece of important information. Users will think the website isn’t finished and may believe you are not ready for business.

It’s all-too-common to find Lorem Ipsum text in the final version of a newly-launched website.

404 Page

404 errors are displayed when a user attempts to access a page that doesn’t exist. It will inevitably happen, and can be annoying to the user when they reach a confusing default error page. You should use this error as an opportunity to put valuable site navigation (and maybe even some brand personality or a call to action) in front of your users.

Your website should have a custom 404 page that fits your brand’s style which offers an explanation to the user of why they aren’t accessing the content they intended to. Ideally, you should also include navigation to direct them to valuable pages throughout the site.

	Broken links on your website website only account for about 17% of the 404 errors people encounter when trying to access your website.
	73% of people who reach a traditional 404 error page will leave your website and not return.

Version 2.2.1

by Carefree Creative

In-depth website guidelines to help build, refine, or audit your own website to modern professional standards.

User Experience

Professional Design

Further Reading

Professional Design

Further Reading

Brand Consistency

Further Reading

Brand Voice

Further Reading

Scannability

Further Reading

Responsiveness

Further Reading

User Friendly Navigation

Further Reading

Media

Further Reading

Spacing

Further Reading

Dummy Text

Further Reading

404 Page

Further Reading

Your website, but better.

	94% of users say ‘easy navigation features’ should be companies top priority when creating a new design.
	44% of people struggle to navigate on smaller devices – which means your navigation needs to adapt to fit all screen sizes.