Web Design Changes and Updates in 2015

2014 was a year of new design decisions.

iOS7 and Windows 8 tablets helped popularize flat design and websites became far more visual. Publications began organizing articles and content in new and fun ways. Simultaneously, websites with large landing page designs became the staple for businesses selling digital goods and services.

Seriously. Think about all of the websites with gigantic images and simple call-to-actions that you saw this year.

Going forward can we expect a major shift or change in the web design landscape? We doubt it, but here are some serious considerations to think about when designing on the new web. Your website must build trust and speak to your customer’s pain points to increase sales.” Gabriel Bertolo, Founder of Radiant Elephant.

Responsive Design in 2015

There is a constant battle over the importance of “responsive design” and it’s importance in conveying the theme of a website.

In the past year, mobile devices and tablets made up 16.36% of our website traffic. It does not sound like a lot, but consider that last year mobile only accounted for 7.25% of that traffic. That is OVER A 100% increase in mobile device usage year over year.

You can expect this trend to continue to increase as people embrace larger mobile devices for everyday use like the iPad Mini, iPhone 6 Plus, and Samsung Galaxy S5. If you expect to continue to get away with a website that requires your customer to pinch and zoom or search a small screen for answers to their questions, you are wrong. Plain and simple.

Solution: Make sure your website and/or WordPress theme is responsive out of the gate.

Selecting The Right Web Font

In an article by Derek Halpern of Social Triggers, the entrepreneur talks about the importance of legibility of text.

At this point in the web game, I don’t think I have to write an epic “500 reasons to NOT use Comic Sans” post,  but the principles of legibility extend beyond the much despised font.

Our pro themes give you the option to pick fonts like Montserrat, Lato, Average Sans, and Muli as these are simple for easy reading. Additionally we provide Quattrocento Sans for those who want to use something a bit fancier to display eloquence yet simplicity.

Change font size using CSS

Changing the font size of headings and general text is also fairly simple with a little bit of CSS chops. Don’t have em’ yet? That’s okay, here is a CSS freebie:

CSS for paragraph text:

p {
font-size: 12px;
}

/*Replace 12 with whatever you would like*/

CSS for header text:

h1 {
font-size: 12px;
}

/*Replace h1 with other header tags as necessary with whatever you would like*/

You can place this code right within your child theme to make the changes to font size. Here is a screenshot showing this CSS placed in the editor of a child theme created within a WordPress install.

Pinterest Website Layout and Organization of Content

The layout of a website is also changing. With a lot of content in publications and digital newspapers in lots of different categories, the display of this content is changing to be unique. Take a look at a site like The New Yorker, which was created entirely using WordPress. Content is displayed by category using the power of a content system like WordPress.

Custom layouts of content will be more and more requested as we enter 2015. Much like landing pages bring focus to call to action buttons, periodicals and blogs will continue to increase attention to featured content and division of content to make navigating — especially on mobile devices — an easier experience.

Button Styling

As you look at the buttons on the New Yorker website, you will also notice the buttons have a very “Empty Style”. Basically buttons, are simply white space, with a thin border, upon highlighting them, the button highlights and a white or other fill color is generated.

Buttons seem to change year after year to convince people it is cool to highlight and click buttons to do things like purchase products.

This year’s trend in button design is specifically titled the Ghost Button. Ghost buttons can be achieved by creating a CSS button (with typically rounded corners) and a thin border and creating a hover state that fills color and changes the font of the text to mimic the font of the background color.

It’s the Little Things

Our team also believes that you will notice a trend in creating little experiences on the site to create a fresh face to your brand. You might notice that when you try to scroll off someone’s page, you get a box the wiggles and asks you to subscribe. With tools like Opt-in Monster, this has become easier than ever before.

With these tools, you can drive people to subscribe to your email newsletter so that you can keep in communication even after the person leaves the site.

Try to add smaller elements that make someone remember your site like a fun 404 page, an in-your-face opt-in campaign, or perhaps a GIF to help people remember who you are. Remember, a person has so many options on the web these days, so there needs to be a compelling reason for them to come back or at the very least something compelling that they remember about the site.

Big Landing Pages

You also may have noticed that increased trend in landing page with large images to tell a story. While words are still what will get you ranking on an organic search, images help to grab the user once they are on the website.

For digital products and services, consider an open concept design with large images that are sort of a tutorial of the product in itself. Notice Square’s landing page, which puts necessary information on top of a large quasi-tutorial statement.

For digital business with lots of services or for brick-and-mortar stores that want a better web presence, consider web design like one of our newer WordPress themes, Journal Pro. With the ability to upload a large background image and keep the sidebar in a fixed position on browsers, there is a focus on what matters in the landing page. This keeps people focused on the brand, the major landing pages in the navigation and the large image.

Did we miss anything?

Are there other design tips that we forgot to mention as we provided some insight into the coming trends of 2015? Please let us know in the comments below as you get started.