7 Web Design Trends for 2019

It’s that time of year again when we in the web design industry look back on the previous year and marvel at all the breakthroughs that occurred while looking forward with Nostradamus-like accuracy to all the predictions, trends, buzz and ill-guided persuasion attempts the new year will bring to web design best practices. I’ve come to view my annual article about web design trends as obligatory as my New Year’s resolutions, which never last past February. Anyway, 2018 was a good year for steady evolutionary increments in web design, such as the further standardization of responsive web design, chatbots, microinteractions, asymmetry, tactile design and font personalization. So what can we expect in 2019? Here are 7 trends that you should consider for your website.

More Focus on UX

web-design-trends

UX, or User Experience, is a central tenet to all modern web design. I like to define UX by pairing it with UI (User Interface) and then making an analogy that has nothing to do with the web design industry. Let’s consider rental cars. If you are like me and travel constantly from airport to airport you have become very familiar with the exercise of de-boarding, dashing to grab your luggage and making a beeline to the car rental center. Rarely do I get the same type of vehicle twice, and I want my experience to be as painless as possible. I honestly don’t care if I get a compact, a sub-compact, a micro-compact, or a nano-compact as long as it gets me where I need to go. My issue has always been with the damn gas cap as I never seem to be able to find where the button is, whether on the dash, on the door, or (literally) hidden under the seat. Nothing frustrates me more than being stuck at a gas station and crawling through the entire car to find it. I always wonder why the engineers that designed the layout simply could not place the gas cap release some place that would be intuitive for all drivers, especially since these models constitute the majority of car rental fleets. I describe this as a very poor User Interface (UI), and because of this I have an equally poor User Experience (UX). You see, the design interface has a direct impact on the overall experience as a user of a product. Poor UI leads to poor UX. The same applies in web design. Make sure that your site is designed with the customer in mind.

More White Space

2019-web-design-trends
Apple started it, and we all followed. Then every website began to look like an Apple wannabe, so we all got away from it. Now it’s back, and not necessarily because Apple is no longer creating innovative products. For good design that translates well for desktop, tablets and smartphones (RWD), use less clutter and more white space. The proper use of white space amplifies the important calls to action on the page that you want your users follow. When it comes to web design, less is certainly more. Do not accept any design that has everything and the kitchen sink thrown into it. This is not expert design but rather an indication of of a designer that is aesthetically-challenged and is attempting to cover up deficiencies by continuing to add more and more to a page. Don’t fall for it. Keep it clean.

More Videos

2019 web design trends

For those of us old enough to remember when computers used to connect to the Internet using a phone line we can all commiserate with the excruciating experience of watching streaming videos on our CRT screens. Thankfully, those days are long gone as the Web is now a safe place for using video as content for your website. Videos are a fantastic way to tell your story and capture the interest of your target audience in a convenient snippet. More and more, you will see videos replacing static images for the hero section of websites, which is the main focal point of the home page. Using a CMS such as WordPress, it is extremely easy for site administrators to add videos on a daily basis. But make sure that the videos are relevant and of high quality. We recommend working only with reputable video production agencies that will help you craft your story, define your narrative and deliver your message on point. Also, you probably want to set up a premium account on a video platform such as Vimeo or YouTube to ensure that they run ad free.

More Bold Colors

2019 web design trends

Approximately 1 in 12 men and 1 in 200 women in the world are color blind. They do not care about which colors you choose for your website. The rest of us do. Color evokes emotion. Color defines the tone, theme and attitude of a website, and bold colors used correctly can provide that extra ‘pop’ you need to really grab someone’s attention and pull them in. Eye tracking studies have shown that the proper use and balance of color can make a difference between bounce rates and conversions. Contrasting color within site elements make appropriate callouts more apparent and recognizable, which will help you craft a site that encourages them to take particular actions and more predictive outcomes. Modern computers can display 16,777,216 different colors, so there’s really no excuse to be drab and boring.

More Creative Fonts

2019 web design trends

Steve Jobs loved fonts. He hated the standard suite used for Windows PC’s (Arial, Helvetica, Sans-Serif) and was the first to insist that his Macs gave us a real choice and ability to express ourselves with personality and creativity using fontography. Fonts are a pillar of good web design that is often and shamelessly overlooked. More than anything, fonts establish attitude and individuality. One of the best ways to make your website stand out is to get creative with your use of fonts. Always ask your web designer what fonts they like to use and how they can help you establish a font profile for your website that is fresh and appealing.

More Gradients

2019 web design trends

Wait a second… did I just write that? For years, I HATED gradients. They were the bane of my very existence. I perceived any use of gradients as a cheap conjuring of poor web design used by designers that simply did not have a clue about good web design philosophy. And worst, they looked HORRIBLE on those older CRT monitors and low quality graphics chips. But as those old menthol ads used to say, You’ve Come a Long Way, Baby. Today, modern chips and screen technologies have the processing power and higher resolution necessary to display gradients as they were initially intended and look fantastic on a website. Gradients provide a subtlety to a design that will allow your colors to shine and your use of fonts to pop. They serve as a conduit from one graphical element to another, allowing your users to transition seamlessly from one section of a page to another. Look for gradients to be a popular choice in 2019.

More Responsive Web Design

web-design-web-standards

Yes, Responsive Design was a top trend for 2018 and 2017 and 2016 and 2015, etc. Need I say more? Responsive Web Design, which is an approach to designing web pages using fluid-based proportion grids, media queries and scalable images, has completely revolutionized the web design industry. In the era of the mobile web, it is imperative that web design place equal emphasis on desktop, tablet and smartphone devices. Responsive websites are easy to maintain and do not require developing a separate mobile site, plus they are compliant with modern web standards, ensuring browser compatibility and search engine optimization. Do not ever consider working with a web design agency that has not adopted responsive web design as its development standard.

Conclusion

This is where I remind you of how important your website is to your brand and marketing strategies and how keeping up with web design trends in 2019 will help you maintain a competitive advantage, yaddi, yaddi, yaddi. Just keep in mind that trends are just that… trends. What’s hot sauce today is cold soup tomorrow, so always approach trends in web design with a modicum of salt. Regardless of how things change with technology and social preference, the fundamentals of marketing remain. Always present yourself with confidence.

We are recognized as a top Magento Development Company on DesignRush.

Antje Knott

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

Responsive Web Design: The New Standard in Web Design

Responsive web design emerged in 2014 as the new standard in website development, but it is shocking that as we head into 2019 there are still millions of websites out there that are not responsive and therefore ignoring upwards of 50% of their customers that use tablets and smartphones. So, what is responsive web design and why is it important? We’ll start with the “what”.

What is Responsive Web Design?

responsive web design

Responsive web design is an approach to website development that aims to address the rapidly changing landscape of screen sizes and devices capable of displaying the world wide web. A website built using a responsive framework will automatically adjust its content and simplify the navigation structure in order to optimize the user experience, regardless of screen size or device. Responsive websites are created using existing technologies, it is an approach to website development as opposed to being a new technology onto itself.

Responsive Web Design

Responsive sites adapt content using fluid, proportion-based grids, flexible images based upon percentile rather than fixed width and CSS3 media queries.

What Are The Advantages of Responsive Web Design?

  • A responsive website greatly enhances the user experience across all platforms (desktop, tablet and smartphone)
    Gone are the eye-straining days of having to zoom in and scroll around in order to find what you are looking for. Plus, responsive sites are more uniform on all platforms and tend to have a more simplified navigation structure. With responsive design, simplicity is key.
  • A responsive website eliminates the need to build a separate, mobile-friendly version of the website
    Mobile-friendly websites were the stop gap measure used by web designers after the emergence of smartphones and prior to responsive frameworks. Many are still in use today. This required building and maintaining two separate websites, which could be sniffed out by the type of browser your devices uses and displayed accordingly. The added design and development cost of these sites plus the general frustration of having to maintain two sites made the practice cost-prohibitive. Lastly, mobile-friendly sites were basically watered-down versions of your desktop site, resulting in content duplication which will get you penalized by Google.
  • A responsive website increases your search engine optimization
    Responsive sites greatly increase the usability of a website, resulting in longer times spent on the website, a significant metric for Google in determining overall site quality. Responsive sites also tend to load more quickly, especially on mobile devices that are dependent on wireless networks. This is another significant metric for Google. Lastly, a responsive website tends to have a much lower bounce rate as users are spending more time on the site.
  • A responsive website is web standards compliant
    It is important to build your website in compliance with modern web standards, including the World Wide Web Consortium (W3C) and 508c3 government standards for accessibility compliance. A W3C-compliant website will ensure that your site performance is optimized for download speed, cross-browser and cross-device compatibility and usage on older browsers.
  • A responsive website leads to greater conversions and customer acquisition
    All of the aforementioned advantages contribute to what is likely the most important purpose of your website. A site that is search engine-friendly, accessible, intuitive, easy to read and fast to load will naturally generate more conversions, which will lead to more customers and growth for a business.

Indeed, responsive web design is the new standard in web design. It has revolutionized the web design industry and has created a consistent user experience that is finally worthy of the multi-platform world we live in today.

DEEPBLUE is recognized as a top Creative Agency on DesignRush.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

7 Web Design Best Practices

What Your Web Design Agency Should Know

Although web design best practices have evolved over the years, some things have not. In this article we will discuss the 7 web design best practices that your web design agency should know.

1. Know Your Business

web-design-know-your-business

Your web design agency does not need to know how to modify your software architecture, increase efficiencies in your manufacturing process or develop new service lines. However, your web design agency does need to understand your business fundamentals: who you are, your core values, what you do, who you do it for and how you differentiate yourself from your competition. Your web design agency should also understand your culture. A tech startup in San Francisco, for example, will have a vastly different culture than a manufacturer in Waco, Texas.

2. Know Your Target Audience

web-design-target-audience

As mentioned above, your web design agency needs to know your target audience. Most organizations have multiple audiences, so your web design agency needs to know how to structure your website architecture to cater to each specific audience.

3. Content & Information Architecture

web-design-information-architecture

They say on the web that content is king, and this is true. But content left unchecked can quickly become a vast wasteland of dead, scrolling pages that customers will either ignore or become so frustrated with that they leave the website. Whether your new website is using re-purposed content or you are creating fresh content, it needs to be well organized. Information architecture is the process in which your web design agency will effectively organize your content. This includes creating navigation schemas, page wireframes and search systems that will provide the blueprint for a well organized website.

4. Design, Design, Design

web-design-information-architecture

Content defines information architecture, information architecture defines design, design defines how successful your new website will be in the eyes of your customer. I describe information architecture as the UI (user interface) and design as the UX (user experience). The design of your website will represent you in the most practical sense, and it needs to be a true representative of your business. Your web design agency should create a custom design based on collaboration and focused on UX on both desktop and mobile views. The process of building a website that adapts itself according to screen size and device is called responsive web design, which is an absolute standard in 2018. If your web design agency does not use responsive web design on its own site or client examples run away. Don’t look back, just run away. A good tool to test for responsive web design can be found at Responsinator: https://www.responsinator.com/.

5. Content Management System

web-design-content-management-system

Your web design agency should build your website using a content management system, or CMS, that is intuitive, robust, scalable, flexible and open source (non proprietary). WordPress is the most popular open source CMS in the world and is our recommended CMS of choice. With WordPress, you get all of the advantages of using a content management system without any of the drawbacks, including ease of use for non-programmers, a large online community of add-on developers, security and perhaps most importantly for small business owners, no license fees. If your web design agency is pushing you towards a licensed platform ask them how it has any advantage over WordPress in regards to these factors.

6. Calls to Action

web-design-calls-to-action

Calls to action are the most important psychological drivers on your website. They drive users to desirable outcomes you have already identified during the planning stages of your website. Your web design agency should work with you to help determine the calls to action and make certain that they take priority in the overall flow and structure of your website. Calls to action can include filling out a request form, signing up for a newsletter, register as a customer, make a purchase or join your social networks. The flow of the website in regards to calls to action should be designed during the information architecture and design phase of the project. All calls to action should be measurable via analytics.

7. Web Standards

web-design-web-standards

Web standards are invisible, but critical to the overall success of your website. Web standards ensure that with compliance your website will be optimized for search engine optimization (SEO), cross browser compatibility, mobile device compatibility, site performance and accessibility. The most popular web standards are the World Wide Web Consortium (W3C), the “Living Standard” created by the Web Hypertext Application Technology Working Group (WHATWG) and 508c3 government standards for accessibility compliance. To test your website for W3C compliance go to https://validator.w3.org/. Ask your web design agency about web standards. Have them place a web standards compliance guarantee in their service and maintenance agreements.

Conclusion

This list of web design best practices is just the tip of the iceberg and I will be adding more components in more blogs to come. The purpose of this article is to help you determine which web design agency is best for you. After all, you are the last word on whether or not it fails or succeeds.

We are recognized as a top Logo Design Company on DesignRush.

Antje Knott

More Posts - Website

Posted in Design, Development, Strategy | Leave a reply

7 Typography Trends in Web Design

Typography (n): the style, arrangement, or appearance of printed letters on a page.

And perhaps the most important design element of 2018.

The purpose of your site is to be read — and what you’re saying matters just as much as how you’re saying it. In 2018, text in web design continues to thrive under the helm of content-first design enthusiasts. We’ve rounded up the typography trends we’re seeing this year, many of which place text front and center — or, all over the page.

In 2006, Oliver Reichenstein published “Web Design is 95% Typography”, the second-most controversial artifact of that year — runner up to Borat. Reichenstein says, “Web design is not about picking great typefaces, it is how we use them.”

Let’s take a look at how we are using them.

1. Behold the bold hero

Big, bold, condensed, and unmistakably dramatic text is perhaps the most obvious use of text as a primary web design element. This year, we’re seeing hero images replaced by bold headlines that anchor homepages with brand names or messages.

The effect? A site’s typography becomes the site’s design. CreativeDoc, for example, masterfully creates a loud design out of six bold, white letters on a strong black background.

‍Font used: Dharma Gothic Heavy

 

Souffl, a European design and innovation company, employs condensed, bold, white text on a black background, then adds character with pops of animated color.

‍Font used: Custom (Souffl Web)

2. Put your best foot forward

Serifs continue their footed rise to the top of the font kingdom since we first nodded to this trend earlier this year.

Elegant titles and sophisticated headlines outfitted in popular serif fonts like Calluna and Minion are warding off serif naysayers. So, what are designers doing with their newfound love for … feet?

The designers behind Cobble Hill and Gin Lane are using them to infuse otherwise minimalist sites with a serif-induced elegance:

‍Fonts used: Arno Pro and Proxima Nova
‍Font used: Miller Disp, Lt

3. Captivate with plain ole text

The visual revolution that dominates journalism, among other industries, has yet to tarnish the importance and prominence of text in web design.

Justin Jackson’s site Words has been around for ages and it demonstrates how text alone can speak volumes on the web:

‍Font used: browser default

 

Now, in 2018, we’re seeing designers embrace words —what Jackson names the “most powerful tool on the web” — in their designs. It is no small feat to design a web page exclusively with text. But done well, we don’t even notice the lack of images.

We are recognized as a top Branding Agency on DesignRush.

 

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design, Strategy | Leave a reply

5 Reasons Why Your Website Is Not Converting


How do you measure the success of a site? Conversion.

You could have a lot of traffic going to your site, but those visits don’t really matter if you aren’t converting them into customers. The only visitors that matter are those that are adding to your bottom-line. All other traffic is essentially wasted.

Are you finding yourself with a lot of traffic, selling the right products at competitive prices, yet not with many paying customers? Then read on to find out why your site isn’t converting and what you can do about it.

Check Your Current Conversion Rate

First things first, you should know your current conversion rate. Whether you measure your conversions by product purchases, brochure downloads or email newsletter signups: you need to be measuring and tracking those conversions regularly. You can track your conversion rate using Goals in Google Analytics or through any other analytics platform of your choosing.

So what’s considered a good conversion rate? The ideal rate is between 2 to 3 percent. This rate could be higher or lower based on the value of the conversion (e.g. you’d have more difficulty converting customers if you’re selling products or services worth $10,000+). But if you’re having less than 2 percent conversion and your conversion value isn’t very high, then you might have a problem on your hands.

Here are five reasons why your site may be underperforming.

#1. You’re Providing a Bad Mobile Experience

If your website isn’t mobile-friendly, there is no way it will survive in these times. It isn’t enough for your site to be responsive, it has to be designed specifically for mobile in terms of content and structure. Failure to do so would mean marginalizing a substantial portion of your customer base and in turn decreasing your conversion rate.

But what does designing for mobile entail?

  • Using large and easily legible text
  • Using short paragraphs
  • Making sure that every key feature is just a tap away
  • Having just a single call-to-action

The key is to keep testing your mobile site. Perhaps you should even ask customers and family members for feedback on your site’s mobile experience. Afterwards, you should review what is working and what is not – and address those issues.

As long as you do not ignore the importance of having a good mobile experience for your site, you can easily hone in on the reason(s) your site is not converting.

#2. No Call to Action

Your website could be user-friendly with engaging and quality content, but without a clear and concise call-to-action, you simply won’t convert. Users may want to convert but just don’t have the opportunity or means to do so. Because you haven’t provided it.

Make your call-to-action clear, concise, prominent, specific and compelling. Provide all the information users need so they know exactly what you want them to do next. Create calls-to-action that are relevant and specific; and place them in a prominent place on every page of your site.

Whatever you do, make sure it is very easy for the user to convert when they are ready to.

#3. Your Users Are Annoyed with Your Website

You may be missing out on conversion opportunities if there is something off-putting about your site. Look at your bounce rate: if it is high, then you know there is something that is not appealing to users.

In such a case, you need to find out what the problem is – directly from the user. You may use heat maps and look at your user journeys via Google Analytics, but perhaps it will make your job easier to ask users directly (e.g. via a quick survey).

A few common annoyances on websites:

  • You do not offer any useful information
  • Navigation is too difficult
  • You have too many ads or popups
  • Your site doesn’t look good

These are all problems with a rather easy fix. Take your time investigating them and fix the errors as soon as you can.

#4. You’re Off-Target

Your website should be anything but general. A lot of website owners aim to please everyone – but they can’t – and end up isolating their entire audience.

Perhaps you’re writing for the wrong audience, perhaps you’re writing for a larger demographic than you should be; whatever the case, inaccurate targeting could negatively impact your conversion rate. Your copy, branding, marketing and site design should speak directly to a niche demographic.

Conduct market research to properly define and know your audience.

#5. You Have a Slow Site

When your website doesn’t load fast, your visitors leave and are unlikely to visit again in the near future.

There are many factors that can slow down your site, such as:

  • A site that isn’t optimized for mobile
  • Broken links
  • Not using caching
  • Messy code
  • Images that aren’t optimized
  • Flash and Java
  • Average web hosting

If your site is taking longer than 3 seconds to load, you need to work on it. Studies show that most users quickly exit sites that take longer than 3 seconds to load.

Measure, Measure and Measure

This is actually a sixth reason why your site may not be converting. Measure, measure and keep measuring. If you’re not measuring, you’re guessing, and in turn, not really making any strides.

The problem most website owners encounter is that they are either not tracking their website traffic or that they are tracking but not reviewing their metrics. Some do know they should be tracking, but just aren’t sure what to look for or what to make of the results.

Well, you should always start with your goals in mind. Then you can identify which key metrics will help you to measure your progress towards those goals.

Once you start measuring, you can improve on those metrics; figure out what is working, what isn’t, and then fine-tune and optimize.

Wrapping Up

These five reasons are just a starting point to help boost your conversion rates. There are many other reasons why your site may not be converting. However, these are fairly common in under-converting sites.

If you find that any of these reasons apply to your business, simply make the changes and you’ll see a big difference or improvement in your conversion rates and bottom line.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Strategy | Leave a reply

Web Design Trends for 2018

New year, new you, same website? You’re no longer good to go if your website simply boasts functionality in a conventional design layout. It’s not enough to make something that just looks pretty anymore.

Ever-expanding tools make web design a constantly changing digital medium that can and should be regularly updated to remain relevant.

As always, visuals are the first thing that will draw someone into your site. Your homepage and landing pages need to grab users’ attention with striking visuals.

Font choice has always been important for good design, and that’s not changing in 2018. However, the rise of typography, typeface design, and custom fonts will continue to take center stage.

Except for Internet Explorer (crossing my fingers for its death), most browsers can support CSS-enabled custom typefaces. Contrasting sans serif with serif fonts for large lettered headings is newly popular, as well as color and variable fonts.

Bold, vibrant, and saturated color schemes are on the rise as well since advances in monitors mean designers are no longer stuck with web-safe color palettes.

Custom illustration is another growing trend, with product and marketing design prominently featuring tailored illustration to match brand tone.

Broken grid and asymmetry have become more popular too, shaking up more traditional layouts. Just make sure to keep the layout clean, or you risk offending your viewer’s delicate design sensibilities.

Speaking of design sensibilities, gradient is making a comeback. But like, in a cool way with subtle fading and complimentary color. Shout out to this fun original web throwback revival.

However, looks aren’t everything. If your site is not offering user-friendly, updated functionality, you’ll fall behind the curve.

Augmented Reality (AR) and Virtual Reality (VR) elements aren’t new tech, but their rise in popularity due to their rapid progress can’t be ignored. While these are more relevant to mobile apps, elements can be incorporated into site design as well.

Mobile-first design still dominates (duh) as mobile browsing continues to overtake desktop use, so make sure your site plays nice on-the-go too or risk alienating mobile users.

Using speech as search tool came into play as devices like Alexa and Google Home have people searching using full sentences instead of keywords. Optimizing your site’s content to allow search with speech can put you ahead of the game as the world of SEO evolves.

Artificial Intelligence (AI) is all the rage too, with more sites implementing smart chatbots to handle customer service and frequently asked questions. AI can also help with voice-based search using natural language processing technology.

As animation and micro-interactions become more advanced, combining form and function for delightful surprises are another rising trend in 2018

Particle backgrounds solve performance issues with video backgrounds by utilizing Javascript to create movement without taking forever to load. The animations make movement a natural part of the background, enticing viewers with motion graphics that don’t affect loading time.

Integrated animation engages users too, using smaller animations and graphics for abstract or concrete concepts. Your site could feature graphics that animate during a load page, or appear when users hover over a link, scroll, or as the main focus of the page.

Micro-interactions can set your website apart from others using more complex visuals, skilled animation, and seamless data transfer. Implementing fun on/off toggles, load status indicators, and light animation when like buttons are pressed can delight users and keep them engaged with your site.

Try out some of these trending changes on your site for 2018 and watch the users roll in.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design | Leave a reply

How Social Media Impacts Your SEO

Nowadays, Social Media platforms have become essential to every marketer’s strategy and are used to effectively get your brand in front of your target audience; but do they directly impact your SEO and search ranking? Correlation is not causation, but there’s no doubt social media impacts search engine optimization.

Search engines like Google do not allow signals from social media sites to directly affect ranking. Yet social media gives marketing professionals many ways to put their businesses front and center on search engine results pages.

Consider these five ways social media impacts SEO:

1. Social sharing drives traffic to websites

Posting links to quality content can garner shares, likes and comments. It also encourages social media users to migrate to official business websites.

Links pointing to your content, even from social, make you lok good to search engines.

Engaging with prospective clients via social media helps you keep your brand top of mind. By driving social traffic back to official websites, you’re able to increase organic search ranking. This lends greater authority to your site in the eyes of search engines.

TIP: Regularly share links to website content on appropriate social media sites. Some platforms, such as LinkedIn, lend themselves to posting long-form content directly.

2. Social media profiles rank in search engines

If you type the name of a business in a search engine, its social media profiles will likely pop up along with its official website.

If a company is able to rank not only its website, but its social profiles as well, it will take up valuable real estate at the top of SERPs. This can help businesses beat out potential competitors in terms of visibility.

TIP: Make sure all pertinent social profiles are active and consistently engaging with audiences. What’s most important is targeting the platforms that resonate most with your prospective customers.

Even if only indirectly, the billions of users on social media impact SEO.

When your social profiles align with your site, you’ll be more visible in SERPs.

3. Capturing external links is easier with social media

External links, and the authority of the websites doing the linking, comprise the most important factor for achieving high rankings in Google, according to Moz.

You can use social media platforms to share and promote your content. This increases the likelihood of other websites referring and linking back to it.

TIP: Craft high-quality content to post on social media. People are more likely to link to content they want to read and share themselves.

4. Social media boosts brand awareness

Facebook had 1.71 billion monthly active users during the second quarter of 2016, and there were 317 million monthly active users on Twitter as of the third quarter. Both these figures, supplied by Statista, illustrate just how important social media has become for generating brand awareness.

It's hard for Google to ignore 1.71 billion Facebook users.

TIP: Consistently engage with social audiences by asking questions, starting discussions and commenting on news and trends.

5. Local SEO relies on social media

Google, Ipsos Media and Purchased reported 80 percent of smartphone users perform mobile searches to find businesses near them. In short, geography plays a major role in user experience, and search engines are paying attention.

Social websites such as Yelp make it simple for businesses to leverage locality. These sites offer an opportunity to show geographic placement and provide an arena for customers to discuss the business. The more people review or engage with your business online, the more likely it is search engines will take notice and incorporate you into local SERPs.

TIP: Ensure the geographic information for your business matches across all platforms and websites. Differences in address, phone number or other information could lead to a lower SERP ranking.

While social media may not have a direct connection to SEO, it certainly influences online marketing success. As the number of social media users continues to rise, it’s likely social signals will become more powerful in terms of ranking. By producing content worth sharing and taking advantage of the platforms available, you can maximize the benefits you receive from social media.

 

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Strategy | Leave a reply

8 Dos and Don’ts for Creating Effective Infographics

Infographic_Creation

Data is everywhere around us, and yet, it is generally difficult for us to comprehend and remember isolated numbers.

When put into a story, however, data becomes much more relatable. (The human brain can process images 60,000 times faster than words.) For this reason, infographics have become increasingly popular among marketers around the world. But with this surge in usage, it’s important to make sure your infographic does the job it’s supposed to do: drive traffic, build awareness, and generate leads for your business.

Below we’ve compiled some of the best tips for creating effective infographics to help your brand devise a strategy that resonates with your audience.

The Dos and Don’ts of Infographic Creation

1) DO: Keep it simple and to the point.

Try to break down your message into one, strong sentence. From here, you can use data to support what you’re trying to say. But remember: Less is more.

Energy-recovery-desalination-1

This simple chart tells a big story. Thanks to the contrasting colors, it easy for the reader to immediately understand just how scarce fresh water is. This is an approach you’ll want to make note of if you want your readers to focus on a specific data point.

2) DON’T: Try to say too much with one chart.

Poorly formatted, unorganized data won’t get you very far. To create more effective charts, stay focused on categories that help you make your point. Arrange the data from those categories in a way that is easy to grasp to avoid something that looks like this:

what-really-fosters-innovation

3) DO: Surprise the reader with an unexpected twist.

Have some unusual information on your hands? Use surprise as a means of increasing alertness and focus.

If you can make the reader question their previous beliefs, open their minds to new ideas, and then fill the gap with your information, you’ll find that it’s much easier to hold their attention. Check out the chart below for an example of how to present uncommon knowledge that may surprise the reader.

12

4) DON’T: Use boring titles that tell everything in the first sentence.

In the image below, the headline leaves nothing to the imagination. The main argument of this chart is known to most people. That said, why would they want to read more?

infographic2

Instead, focus on creating an enticing headline that leads with the promise of new, valuable information.

columnfive

5) DO: Use concrete visual metaphors. 

Show data to support your point. Detailed, data-driven arguments convince the reader faster and are much more likely to be remembered, recognised, and shared.

The chart below visualizes the most popular pets in the US in a very clear way: Dogs make up 37%. Cats make up 31%, and so on. Thanks to the use of the animal icons and shading, it’s easy to understand this sequence with just a quick glance.

PetInfographic3

6) DON’T: Use weird formatting to visualize data. 

Be careful with funky data visualization formats, as they’re not as easy to read as traditional formats.

While the following chart is certainly creative, we’d argue that a simple bar chart would convey the information in a way that makes more sense to everyone.

22-death_probabilities

7) DO: Make your message believable.

Make your message believable by using customer quotes, testimonials, expert support, and of course, good data. The following quotes from happy customers serve as a great example of how social proof lends credibility to the infographic.

SocialProofGraphicv4

8) DON’T: Show dry numbers without context.

As we’ve mentioned before, good stories are emotional. In fact, it almost doesn’t matter what emotion your message arouses, as long as it makes them feel something.

Data can be used to start conversations and incite curiosity, when used correctly. However, the data in the following chart lacks both emotion and context. This leaves the reader wondering if the sales figures shown should be perceived in a positive or negative light.

wus-palm06-01001115

An effective use of charts and infographics can dramatically improve the performance of your marketing content, as well as the persuasive character of your business presentations.

pie

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design | Leave a reply

8 Effective Web Design Principles You Should Know

minimalism-241876_1280

The design of your website is more important for conversions than you think. You can implement any conversion boosting tactic in the world, but if it looks like crap, it won’t do you much good.

Design is not just something designers do. Design is marketing. Design is your product and how it works. The more I’ve learned about design, the better results I’ve gotten.

Here are 8 effective web design principles you should know and follow.

Effective Web Design Principle #1: Visual Hierarchy

Squeaky wheels get the grease and prominent visuals get the attention. Visual hierarchy is one of the most important principles behind good web design. It’s the order in which the human eye perceives what it sees.

Exercise. Please rank the circles in the order of importance:

Without knowing ANYTHING about these circles, you were easily able to rank them. That’s visual hierarchy.

Certain parts of your website are more important than others (forms, calls to action, value proposition etc), and you want those to get more attention than the less important parts. If you website menu has 10 items, are all of them equally important? Where do you want the user to click? Make important links more prominent.

Hierarchy does not only come from size. Amazon makes the ‘Add to cart’ call to action button more prominent by using color:

Start with the business objective

You should rank elements on your website based on your business objective. If you don’t have a specific goal, you can’t know what to prioritize.

Here’s an example, it’s a screenshot of the Williams Sonoma website. They want to sell outdoor cookware.

The biggest eye catcher is the huge piece of meat (make me want it), followed by the headline (say what it is) and call to action button (get it!). Fourth place goes to  a paragraph of text under the headline, fifth is the free shipping banner and the top navigation is last. This is visual hierarchy well done.

Exercise. Surf the web and consciously rank the elements in the visual hierarchy. Then go look at your own site. Is there something important (key information points that visitors are likely seeking) that is not high enough in the hierarchy? Change that.

Effective Web Design Principle #2: Divine Proportions

The golden ratio is a magical number 1.618 that makes all things proportioned to it aesthetically pleasing (or so it is believed).

Then there is also the Fibonacci sequence where each term is defined as the sum of the two previous terms: 0, 1, 1, 2, 3, 5, 8, 13, 21 and so on. The interesting thing is that we have two seemingly unrelated topics producing the same exact number.

Here’s what the golden ratio looks like:

Many artists and architects have proportioned their works to approximate the golden ratio. A famous example is Pantheon built in Ancient Greece:

Can it be used for web design? You betcha. Here’s Twitter:

Here’s a comment by Twitter’s creative director:

To anyone curious about #NewTwitter proportions, know that we didn’t leave those ratios to chance.

This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.

So, if your layout width is 960px, divide it by 1.618 (=593px). Now you know that the content area should be 593px and sidebar 367px. If the website height is 760px tall, you can split it into 470px and 290px chunks (760/1.618=~470).

Effective Web Design Principle #3: Hick’s Law

Hick’s law says that with every additional choice increases the time required to take a decision.

You’ve experienced this countless times at restaurants. Menus with huge options make it difficult to choose your dinner. If it just offered 2 options, taking a decision would take much less time. This is similar to Paradox of Choice – the more choice you give people, the easier it is to choose nothing.

The more options a user has when using your website, the more difficult it will be to use (or won’t be used at all). So in order to provide a more enjoyable experience, we need to eliminate choices. To make a better web design, the process of eliminating distracting options has to be continous throughout the design process.

In the era of infinite choice, people need better filters! If you sell a huge amount of products, add better filters for easier decision making.

Effective Web Design Principle #4: Fitt’s Law

Fitt’s Law stipulates that the time required to move to a target area (e.g. click a button) is a function of the distance to the target and the size of the target. In other words, the bigger an object and the closer it is to us, the easier it is to use it.

Spotify makes it easier to hit ‘Play’ than other buttons:

They also place it (on the fullscreen Desktop app) in the bottom left corner, which is considered the most valuable real estate since the corners are technically the most accessible. This does not, however, apply to web design (due to scrolling and the way operating systems are).

It doesn’t mean that bigger is always better. A button that takes up half the screen is not a good idea, and we don’t need a mathematical study to know this. Even so, Fitts’ law is a binary logarithm. This means that the predicted results of the usability of an object runs along a curve, not a straight line.

A tiny button will become much easier to click when given a 20% size increase, while a very large object will not share the same benefits in usability when given the same 20% boost in size.

This is similar to rule of target size.

The size of a button should be proportional to its expected frequency of use. You can check your stats for which buttons people use the most, and make popular buttons bigger (easier to hit).

Let’s imagine there’s a form you want people to fill. At the end of the form, there are two buttons: “Submit” and “Reset” (clear fields).

99.9999% want to hit ‘submit’. Hence the button should be much bigger than ‘reset’.

Effective Web Design Principle #5: Rule of Thirds

It’s a good idea to use images in your design. A visual communicates your ideas much faster than any text.

The best images follow the rule of thirds: an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections.

Using beautiful, big images contributes to design as it is (not withstanding the growth of Pinterest), following this rule will make them more interesting and thus your website more appealing.

Effective Web Design Principle #6: Gestalt Design Laws

Gestalt psychology is a theory of mind and brain. Its principle is that the human eye sees objects in their entirety before perceiving their individual parts.

Here’s what I mean:

Notice how you could see the dog without focusing on each black spot that the dog consists of?

The key takeaway here is that people see the whole before they see the parts. People always see the whole of your website first, before they distinguish the header, menu, footer and so on. As one of the founders of gestaltism Kurt Koffka said: the whole exists independently from the parts.

There are 8 so-called gestalt design laws that allow us to predict how people will perceive something. Here they are:

1. Law of Proximity 

People group things together that are close together in space. They become a single perceived object.

With effective web design, you need to make sure things that do NOT go together, are not perceived as one. Similarly, you want to group certain design elements together (navigation menu, footer etc) to communicate that they form a whole.

Craigslist uses this law to make it easy to understand which sub-categories fall under “for sale”:

2. Law of Similarity

We group similar things together. This similarity can occur in the form of shape, colour, shading or other qualities.

Here we group black dots into one group and whites into another one, because – well, the black dots look kind of similar to each other.

3. Law of Closure

We seek completeness. With shapes that aren’t closed, when parts of a whole picture are missing, our perception fills in the visual gap. We see two squares overlaid on four circles even though none of these shapes actually exist in the graphic.

Without the law of closure we would just see different lines with different lengths, but with the law of closure, we combine the lines into whole shapes.

Using the law of closure can make logos or design elemets more interesting. A good example of this is the World Wide Fund For Nature designed by Sir Peter Scott in 1961:

4. Law of Symmetry

The mind perceives objects as being symmetrical and forming around a center point. It is perceptually pleasing to be able to divide objects into an even number of symmetrical parts.

When we see two symmetrical elements that are unconnected, the mind perceptually connects them to form a coherent shape.

When we look at the image above, we tend to observe three pairs of symmetrical brackets rather than six individual brackets.

5. Law of Common Fate

We tend to perceive objects as lines that move along a path. We group together of objects that have the same trend of motion and are therefore on the same path.

People mentally group together sticks or raised hands pointing somewhere, because they all point in the same direction. You can use this to guide the user’s attention to something (e.g. a signup form, value proposition etc).

For example, if there is an array of dots and half the dots are moving upward while the other half are moving downward, we would perceive the upward moving dots and the downward moving dots as two distinct units.

6. Law of Continuity

People have a tendency to perceive a line as continuing its established direction. In cases where there is an intersection between objects (e.g. lines), we tend to perceive the two lines as two single uninterrupted entities. Stimuli remains distinct even with overlap.

Effective Web Design Principle #7: White space and clean design

White space (also called ‘negative space’) is the portion of a page left “empty”. It’s the space between graphics, margins, gutters, space between columns, space between lines of type or visuals.

It should not be considered merely ‘blank’ space — it is an important element of design. It enables the objects in it to exist at all. White space is all about the use of hierarchy. The hierarchy of information, be it type, colour or images.

A page without white space, crammed full of text or graphics, runs the risk of appearing busy, cluttered, and is typically difficult to read (people won’t even bother). This is why simple websites are scientifically better.

Enough white space makes a website look ‘clean’. While clean design is crucial to communicating a clear message, it doesn’t just mean less content. Clean design means a design that makes the best use of the space it is in. To make a clean design, you have to know how to communicate clearly by using white space wisely.

Made.com does white space well:

The fine use of white space makes it easy to focus on the main message and visuals, and the body copy easy to read.

White spaces promotes elegance and sophistication, improves legibility and drives focus.

Effective Web Design Principle #8: Occam’s Razor

Occam’s razor is a principle urging one to select among competing hypotheses that which makes the fewest assumptions and thereby offers the simplest explanation of the effect. To put it in the design context, Occam’s Razor states that the simplest solution is usually best.

In a post about their Angelpad experience, Pipedrive guys say the following:

The Angelpad team and mentors challenged us in many ways. “You have too many things on your home page” was something we didn’t agree with at first, but we’re happy to test. And it turned out we had been wrong indeed. We removed 80% of the content, and left one sign-up button and one Learn More link on the home page. Conversion to sign up increased by 300%.

It’s not just about the looks, but also about ‘how it works’. Some companies – like 37Signals – have turned ‘simple’ into a business model.

Simple, minimal design does not automatically mean the design works, or is effective. But in my experience simple is always better than the opposite – and hence we should strive to simplify.

Conclusion

Effective web design and art are not the same.

You should design for the user and by having a business objective in mind. Using these web design principles you can get to aesthetically and financially rewarding results.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design | Leave a reply

Web design trends we can expect to see in 2017

It’s that time of year where we look at the year that was and the year that will be. We’ve seen a lot of amazing website designs this year, and I’m eager to see what 2017 has in store for website and website design.

2017 is sure to bring some amazing website designs, but if we look hard enough, we can already start seeing some trends that are sure to dominate websites in 2017.

Let’s take a look at the 10 website design trends we can expect to see in 2017.

Emphasis on the content

 

We’ve spent years adding things to our websites such as sidebars, headers, banner ads, sidebar ads, calls to action, comments, popups, social media buttons, signup boxes, etc. All of these things have ended up cluttering our websites and taking up more and more real estate, taking the attention away from the entire point of a web page: the content.

In 2017, websites are likely to start moving back to basics and placing more emphasis on content. Whether that means we remove all of the other distractions we’ve spent years adding, or just making them take up less real estate is yet to be determined. Getting back to the heart of a website — the content — will be prevalent moving forward.

The end of flat design

 

I think we’ve reached the point in flat web design where everything is starting to look the same, and we’ve lost our personality and creativity in design. When you strip everything away, you’re left with what everyone else has: the basics that look just like each other.

From my standpoint, flat design has turned from a modern update of skeuomorphic design to a set of design aesthetics that everyone applies (think Google’s Material). Because of this, sites are starting to look the same, and not much differentiates sites from one another. Designers feel that the creativity is gone, and with the desire to create something great, I see flat design ending for the most part in favor of layouts and designs that are more imaginative and unique.

Geometric shapes, lines, and patterns

It seems as though the use of geometric shapes, lines, and patterns have really taken off in the late part of 2016, and I anticipate this continuing through 2017. There are various ways in which geometric shapes have made their way into websites. Be it the use of circles around images, photos that are geometric heavy, or the overall design of the site relies heavily on the use of lines and patterns.

There is nearly infinite amount of ways in which you an integrate geometric shapes, lines, and patterns into your website, and this could be one way in which designers take fat design to a new level (and even add some personality, as mentioned above). Overall, expect to see these types of design styles more throughout 2017.

Imaginative heading styles

 

We’re starting to move away from the basic heading style seen on websites (san serif, all caps, centered heading) and moving more toward imaginative or creative headings. Changing up the heading style is a welcomed way to be unique in your design.

Changing up the justification and layout of the heading, adding unique elements to the heading, or even going without a heading (at least above the fold) are all ways in which designers are starting to experiment with changing up the typical heading style on websites.

Duotone gradient imagery

 

In the pursuit of staying more on brand, more brands are using duotone imagery and graphics for their websites. Even TNW has got the duotone down right, and it isn’t even 2017 yet.

Not strictly duotones, but some designs are even experimenting with two or three colors and using the duotone effect. Think Instagram. While flat design helped us get rid of (most) gradients, using duotone imagery that combines a couple of colors together has proven to be a nice update to the old and tired gradients and solid color areas.

Increased use of animations and GIFs

 

Animations are starting to be used more heavily on websites as they are often a great way to show how something works, how to do something, or otherwise reveal meaningful content. GIFs have been used for this purpose, but now we are seeng GIFs becoming more sophisticated and animations using SVG and CSS to achieve some pretty unique design elements.

I anticipate in 2017 the use of animations will become more prevalent, as more content types are shared and animation helps communicate things easier and quicker than text and video can. Plus, when done right, can often be even more lightweight than several images or even a video.

Navigation diets

 

As being a mobile society, I believe that because most of us access the web through our phones more than our computers, the overall trend to make things easier to navigate has taken over and reformed our navigation on websites.

Instead of overly complicated and long navigations, more and more sites are starting to simplify their navigation down to about four to five items. Keeping navigation to a minimum also helps visitors to focus on the intent at hand, instead of trying to find a way off the page.

Microinteractions

Microinteractions are the subtle, but powerful ways to interact with a website. They are often found in hovers, click animations, scrolling effects, etc. While we’ve always had these types of design elements, designers are spending more time on them, making them are informative and more refined.

Probably the most used integration is the hover/rollover, where a visitor can simply move their cursor over parts of the site to see these microinteractions and interact with the site in that way.

Increased use of hand-drawn elements

Perhaps a different type of web design trend is the increased use of hand drawn elements. These elements include fonts, icons, graphics, buttons and other elements that bring a nice unique touch to websites.

Websites have never been a medium that most would associate with drawing out, but the introduction and the subsequent takeoff of these hand drawn elements have been a nice change from using standard design elements.

More emphasis on landing pages, less on a home page

As we refine content and opt to market and share it more, in 2017 we will likely see a rise in landing page designs instead of a home page design. While every website needs a home page, I think that as content marketing spreads, marketers will want to direct traffic to dedicated landing pages to better target their visitors and their needs.

It makes sense: The idea of content marketing is to increase awareness and conversions, and what better way to increase conversions than to have visitors land on a page strictly made for them. These pages will be as well designed and thought out as others on the site, but target the visitor much more.

Conclusion

2017 is sure to see some great websites, and these design trends will most definitely be seen on some of the best website designs yet to come.

From hand drawn elements to duotone images, imaginative headings to more focused content layouts, to microinteractions to animations, these design trends will dominate web design in 2017.

Frank Farris

Frank Farris is Founder and CEO of DeepBlue. He has been an active thought leader in the application of emerging web technologies since 1998 and is a champion of the movement to make the Responsive Web Design approach the new industry standard.

More Posts - Website

Posted in Design | Leave a reply