Author: peri@apisproductions.com

The experts have weighed in on website design trends for 2019 and we’ve compiled our list of the ones we feel will be most relevant for our clients below. If you’re planning a new design project, please consider some of these ideas.

1. Vibrant Saturated Color Schemes

Vibrant saturated color schemes are capable of seeking user’s attention, with a high-end visual appeal. The vibrant color schemes and electric hues that defined the 80s and 90s continue to make a bold comeback in web design. Designers are abandoning the color safety nets of the past and taking risks with contrasting colors to create memorable visual experiences.

2. Negative Space

We are all used to full-width responsive websites crammed full of text and images and call-to-actions. More and more, white (or content-negative) spaces are taking over the field of view. It’s like an anti-space domination phenomenon. What we are seeing are text & images surrounded by lots of space, whether it be white, black, and all of the colors in between. This allows for these minimal texts and bold graphics to pop off the page. There is digitally nothing else to look at. It also produces a calming effect, allowing the viewer to easily digest the information on the screen right in front of them. The urge to scroll down becomes less so, and the idea of time suddenly feels like it might be on your side.

3. Big Bold Typography

Bigger is better — at least when it comes to header font sizes. Jumbo sized fonts are replacing images as a creative way to get your attention. Web designers are opting for super large header fonts as a succinct way to get their message across. Font styles already carry so many meanings, whether it be classic or modern or silly or romantic. And when they are amplified into mega huge characters, and layered on a negative space with nothing but space to make your eyes look at it — well, no wonder this is a good idea.

4. Lightweight Moving Backgrounds

Over the last few years we have seen an explosion of video backgrounds in web design. The problem this has can cause slow down in a site’s load time. And because it takes only a few seconds for you to lose 40% of your traffic (3.8 seconds, to be precise), this has become a real big problem. Particle backgrounds are great alternative. With animations in javascript, the movement is created as a natural part of the background, making it lightweight and fast. Light as a feather (or as a particle, as it were).

5. Micro-interactions

Micro-interactions are events with one purpose: to surprise the user and create an event that is inviting and human. Every time you take a small action on a website or app and there is a specific response to it, this is a micro-interaction. When you refresh a Twitter page and hear a beep, this is a micro-interaction. Or when you check Facebook, the red icon displaying your message count is—you guessed it— a micro-interaction.

These have been the most common uses of them, but in 2019, web pages will heavily feature their more interactive incarnations. Hover and scrolling animations, chimes, and much more. All in all, this is a way to involve your audience in your website, to subtly transmit information to the users about their actions and usage, and make web pages feel a little smarter.

6. More Video content

We’ve been talking about the value of adding video to your website over the past couple of years now. Video not only diversifies the page but caters to an on-the-go audience who don’t have the time to scan through a lot of text. What is new is the move Google has made toward mixed search page results, featuring video content above standard web pages. This has led websites to prioritize video production in order to make themselves easily searchable and offer content in the most efficient, shareable way.

7. Minimalism

Perhaps one of the most classic and timeless web design trends, minimalism is often the go-to aesthetic of choice. The fewer elements and content on a website, the less your audience will have to think. If a website is designed in the right way, it will show the user exactly what she is looking for. Minimalism will continue to dominate the digital landscape in 2019. Animations and fade-in effects that make scrolling more engaging will give web pages freedom to space out their content and thus result in more whitespace, contrast and clear typography without too many distracting elements.

8. Thumb Friendly Navigation

With mobile browsing having firmly overtaken desktop, design overall is becoming increasingly thumb-friendly. More and more now, users will encounter navigation tailored to the thumb, such as the hamburger menu.

9. 3D

3D has proved itself as a quite stable and persistent trend for the last few years, so we are definitely going to see a lot of it in 2019. Luckily for all of us, technologies are evolving quite quickly allowing graphic designers to create amazing 3D masterpieces which make the viewer the almost immerse into the design. Typography will be definitely not bypassed by any of the graphic trends 2019 including 3D. Often created as the main visual element of the design, 3D typography gives designers freedom to improvise. Even by using 3D typography alone, graphic designers in 2019 will be able to make us immerse into a whole new world.

10. Good Writing

As the saying goes, Content is King. With a more technology-aware modern day user, the user experience (UX) is largely driven by the content. Gone are the days when UX and content worked differently. To provide the user with the right kind of desired experience, the influx of Content and UX is very important. This has led to the content centered UX, where a UX has more to do with what content is the website catering to the end user.

We think 2019 will be the year of great writing. The year of great storytelling and narratives. Strip away the colors, animations, grids, and illustrations from a website and what you are left with is mostly words. Words are what really matter in a website.

Whether you are starting a brand new website, considering a redesign, or have a shift in your overall business, it’s helpful to take a step back and create a website strategy to serve as a road map. Take the time to consider these seven essential questions that will shed light on how your website should be designed and how to position content. Just like building a house, you wouldn’t just start nailing boards together, right?

1. What are the main objectives you want to achieve?`
Do you want to just keep your current users happy and continue to offer a great rich site with fresh content that keeps them coming back? Or are you more interested in expanding your market – maybe a new segment of potential customers that you want to attract? Or a combination? Identifying this key objective will set the stage for the decisions you make about your website.

2. Who are the primary visitors, and who do you want to attract?
This is key information that needs to be at the heart of your decisions as to what your website experience is and how you position your content.  Here’s an example. One of our clients took a survey of their advisors about their website and upon reviewing the results, identified that the advisors weren’t the ones using their website, the advisors’ staff was. And they are looking for much different information.

3. Where are they going for information?
Review Google Analytics. Know what content is most often viewed as well as the pathways users are taking to get there. Do you have important information that users are not finding? If so, consider re-positioning it on the site.

4. What makes you unique?
What do you differently than your competitors? Do you have a specific niche that sets you apart? That is what you emphasize.

5. What are the competitors doing?
It’s just good business practice to keep tabs on your competitors. Identify key messaging they may be using and be sure to set your company apart in a unique way.

6. What messages are you eager to communicate?
Recognize this can change frequently, but it’s really important to be clear in your message and also identify relevant calls to action. If you are very focused on a particular product or marketing concept, give it the most dominant place visually and be sure to assign a call to action to it – a button to contact you or learn more.

7. What is your plan to create new content and how will you manage it?
Will you manage your content yourself? Do you have staff to manage it for you? Perhaps you will need to outsource your content management? Identify how often and who will take the lead on this important aspect of your website.

Creating good content for your website takes valuable time and effort – wouldn’t it be nice to know how effectively you are reaching your audience?  We are super excited to be able to offer our hosted clients a mechanism to provide in-depth analysis.  WPEngine’s Content Performance plugin takes Google Analytics and integrates it right into your WordPress  dashboard with an interface that is easy to read and analyze. Quickly filter reports to evaluate which topics are driving the highest engagement, which content is worth promoting, or evaluate your publication trends over time. Simplify your analysis and start building a smarter content strategy.

Below are a few key ways teams have utilized this tool.

Example Uses

• Optimize content relevance to increase audience engagement, conversion, and revenue partnerships.
• Plan your content calendar by understanding which topics are getting traction or require a refresh.
• Improve call to action for high-performing content to drive signups or conversions.
• Repurpose popular content and categories into ebooks or whitepapers.
• Improve content for posts with high bounce rates.
• Adjust author assignments based on user page views or engagement levels.
• Track overall performance/growth of your publication over time.

MOST POPULAR CONTENT

Select “Posts” or “Pages” in the top navigation, then “Unique Page Views” from the dropdown menu to see which content is receiving the most traffic from unique visitors to your site. This is a good gauge of how popular your posts and pages are with real users.

CONTENT WITH LOWEST BOUNCE RATE

Select “Posts” or “Pages” in the top navigation, then “Bounce Rate (%)” from the dropdown menu to see which content has the lowest bounce rate, indicating the content is fast and engaging.

AUTHORS WITH MOST SUCCESSFUL CONTENT

Choose “Authors” in the top navigation, then “Unique Page Views,” “Sessions,” or “Bounce Rate (%)” from the dropdown menu to see which authors are creating the most content or drive the most engagement for your users.

MOST USEFUL TAGS

Choose “Tags” in the top navigation, then “Unique Page Views” to see which tags used on pages are driving more views, or which content topics are most popular.

For each report you run, you can download the report as a CSV to generate your own graphs and integrate into your own data as needed.

CUSTOM POST TYPES

Choose the type of post you would like to view from the “Type” dropdown menu if you would like to view aggregate performance data for posts classified as a “custom post type.” To view only standard posts, choose “Posts” (default).

VIEW TRAFFIC SOURCES

Select the “Traffic Sources” checkbox to view the origin of the traffic to each post on your site. This feature sorts traffic into four categories: Organic, Referral, Direct, and Other.

Organic: This refers to search engine traffic, indicating users are getting to this page by clicking a link on a search results page.

Referral: This refers to traffic referred from other websites. This includes social media sites like Facebook, Pinterest, LinkedIn, and Twitter.

Direct: This refers to traffic that came from users typing the URL in their web browser, going to the site via a bookmark, or clicking an external link from an email, text message, or a PDF.

Other: This refers to traffic from paid advertising and custom campaign channels, as well as unidentified channels

This feature can help your team identify the success ratio of various campaigns, and how to effectively invest marketing funds. Since Traffic Sources identifies the sources of traffic to your site, this additional insight is invaluable to marketers to better understand their audience.

COMPARE SECONDARY METRIC

Choose to compare two metrics side-by-side. Simply click the “+” sign next to the first metric drop-down menu, and select a second metric to compare. Once you make a selection, it will show your results for both metrics.

WEEKLY TRENDS

Select the “Trends” tab to view a graph showing week-over-week performance for metrics. Sort by Unique Page Views, Page Views, Users, New Users, and Sessions.

CONTENT PERFORMANCE TERM GLOSSARY

The terms below are used in the charts and menus of the Content Performance Dashboard. This glossary will help you understand which metrics relate to which data found within Google Analytics, for a better understanding of how the data in the dashboard is being generated.

Ready to get started? If you are an Apis hosting client, just let us know and we’ll be happy to install this plugin on your website.

Sometime this year a major WordPress upgrade will be available which will drastically change the default WYSIWYG interface. The new editor, called Gutenberg, will be part of the WordPress 5.0 release. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. The concept behind Gutenberg is not new, it draws its inspiration from how old printing presses used a galley and chase to create reusable templates that could consistently reproduce the same layout. With its introduction comes the concept of composing content with blocks. Gutenberg Blocks function similar to the way most page-builder plugins currently work–by providing a way for users to visualize the layout and appearance of their content.

Gutenberg takes it a step further, built with React and Redux, it integrates deeply into WordPress to provide a rich and powerful new editor experience for authors. Its also friendly to plugin authors, exposing many APIs that make it easy to extend and create custom blocks. The current visual editor requires a lot of us to utilize shortcodes and HTML to make things work.  Essentially, Gutenberg replaces the single edit field of the current WordPress TinyMCE editor with lots of individual “blocks”.

These blocks then allow you to build more complex designs than those allowed in the current WordPress editor. So what’s a block? Well, a block can be pretty much anything. For example, you can have blocks for:

• Regular text
• Images
• Video embeds
• Buttons
• Widgets (yes, those same widgets you use in your sidebar)
• Tables

And because each block is “separate”, you can also add things like custom backgrounds just for specific blocks. In general, it gives you more flexibility and in-depth control. The theory is that Gutenberg will eventually replace the common layout builders.

Have a look at the current editor vs. Gutenberg here:

Interested in poking around in this new editor to get a feel for it? We’ve got it installed on a staging site and will be happy to give you access to try it out. Just let us know!

We recently started creating branding boards (aka Style Guides) for clients as part of website design projects and have realized what an indispensable tool they are. The overall end result is a very cohesive branding image that extends well beyond the website. The branding board is essentially a design guide that identifies the company’s key branding ingredients. These guides can be distributed to anyone involved in creating materials for the company – from business cards to social media imagery.

Key elements of the branding board include:

• Color palette: should incorporate 1-3 primary colors plus 2 or more secondary colors
• Typefaces: Headings, Body and Accent font families as well as bold or italic variations
• Logo variations: vertical or horizontal options, social media variations, black and white version

Other optional elements:

• Icon sets
• Button: style (squared, rounded, etc.) and color
• Tone of Voice: a descriptive definition like playful, conservative, etc.

Need one? Let us know!

As we kick off this new year, the predictions for design trends have been unveiled. Here are the ones we think are going to be most important:

1. Custom Illustrations: Illustrations can be very powerful in bringing more abstract concepts to vivid life. And, it’s worth noting that illustrations can also nicely address some of the representational challenges posed by photography. We all build our online presence for a staggeringly diverse array of human beings — but the moment you capture a photo of a real human being and pop that photo into your website, that human being personifies your user. And leaves all other users unrepresented. Here’s a good example.
2. More adventurous colors: vibrant, saturated colors are expected to be the big trend in 2018. While in the past many brands and designers were stuck with web-safe colors, more designers are becoming courageous in their approach to color—including super-saturation and vibrant shades.
3. More organic and oblique shapes: Now, every app from Google Now to Twitter to Facebook boasts almost aggressively rounded corners on their cards, input boxes, profile avatars, and more. But designers aren’t just turning to organic curves in their never-ending search for a way out of the box. Many simply give those boxes a twist out of their usual 90° angles, freshening up their designs with a simple change of perspective.
4. Pervasive interactions & animations: Increasingly, as you scroll through the web, information isn’t just presented for your approval, but slides up into your awareness, calling attention to itself piece by piece. Done right, even a subtle animation can direct the visitor’s attention to the right content at the right time, helping ensure they don’t miss vital lines of copy, or a conversion-driving form. Here’s a good example.
5. Page transitions: In a web full of beautiful animations with the potential to clearly tell us “something has changed on this page,” it’s always felt a little odd that moving from one page to another feels pretty much the same, no matter what website you’re on. A state-change animation might sweep you away from one page, and another greet you on the new page, but those are discreet, with nothing necessarily linking them. The transition itself looks like any other switch from page to page: things go blank for a sec, then the new page loads in. Nothing fancy. But we’re starting to see more and more sites make that change in state something beautiful to behold. Here’s a good example.
6. Bottom menus and sticky elements: Fixed navigation has become a mainstay of sites. It’s a nice way to simplify the experience of a site by keeping navigational controls constantly at the user’s fingertips. Lately, we’re seeing designers take the idea a step further by visually detaching the navigation from the rest of the site design, and moving it a bit below the browser’s chrome. This reinforces the feeling that the navigation is a global object, not necessarily a part of any one page, but there to follow you reassuringly through the site.
7. Asymmetrical and broken grids: One big change in 2017 was the introduction of asymmetrical and unconventional ‘broken’ layouts, and this web trend will still be going strong in 2018. The appeal of the asymmetrical layout is that it is unique, distinctive and sometimes experimental.