SkeuoVsFlatBanner

As a business trying to keep up with the constantly changing internet, it can be hard to decide which trends to follow and what works best for your business. It is important to have a modern and up-to-date website, but if you chase every trend you’ll often end up falling behind and adopting practices that don’t suit your own business.

The biggest decision many web designers and business owners have had to make in recent history is whether or not they should adopt the flat design craze that has swept the web over the past year, or whether they should be using more traditional skeuomorphic design practices for their brand. As the flat design style has become a staple of many big businesses, many brands are also forced whether they run the risk of becoming cliche by picking up flat design or if they will fall behind the times with the older style.

If you aren’t familiar with the whole flat design vs. skeuomorphism debate, there has been a major shift in popular web design trends that really gained steam in 2013. Chances are, your web design has relied on skeuomorphic design principles at some point, even if you’ve never heard the word.

Skeuomorphic designs rely on recreating objects and visual styles from the three-dimensional world in order to make web design more easily relatable to users. By using stylistic cues and layouts from things such as calenders or notepads, users are immediately able to feel familiar with a website or application.

However, as computers, tablets, and smartphones have made technology a constant part of day-to-day life, flat design proponents have pushed for designs that are created “for the screen.” As a guiding principle that is understandable, but flat design activists have translated that mantra into strict stylistic principles as grounded in minimalism as they are web design.

Flat designs use simple elements and a strict two-dimensional approach that eschews all added effects such as drop shadows, bevels, and embossing. Flat design has also been heavily associated with the flourishing popularity of more complex typography.

The loudest voices for flat design have made it sound as if the new design style is a revolution in how we design, and on some levels it is. The basic guiding principles of “designing for the screen” can open up many new ways of thinking about web design which are fertile for innovation. As a style based on minimalism and strict stylistic rules however, flat design is a trend with more lasting power than some of the more fleeting crazes.

It is more important as a business owner to decide what design styles benefit your brand the most, rather than which trends are the most popular at the moment. There are numerous benefits of flat design, but skeuomorphism has been a long standing way of making products and web designs the most usable and familiar they can be for their audience. Plus, as Apple has shown, you can make your designs more flat to benefit usability without entirely going to Flat Design.

To help you understand which design style benefits your brand and business the most, WebdesignerDepot released an infographic highlighting the biggest advantages and drawbacks to skeuomorphism and flat design. It may help you find which style works for you.

New Image

Over the past year Google has been pushing to streamline the look and functionality of many of their products. They have redesigned several of their products, and replaced many tools webmasters rely on with new tools with better performance. AdWords is the next tool on their list for an overhaul, as Google announced earlier this week while highlighting “more screen real estate to the tools and reports you love.”

Their announcement also assures you, “By updating AdWords to the look and feel that we use across Google, you’ll spend less time getting where you want to go in your account, and more time focusing on growing your business.”

The redesigned AdWords will be implementing several stylistic and functional aspects from Google’s broader network, such as moving navigation links like billing, help, and account setting into the gear icon.

adwords-menu

They have also shifted key campaign information above the fold in the dashboard, so you won’t have to scroll to get to the information you’re looking for. You can also quickly see who is signed in for accounts with multiple users

On the purely aesthetic side, Google has brought more white space into the page, especially within charts and tables. They also softened their color palette to make AdWords “easier on the eyes.”

adwords-charts

You can expect to see the changes appear within the next couple of weeks. In the meantime you can acclimate yourself to the updates with a short video Google released focused on navigating the redesigned AdWords.

2014The New Year is here and many are already looking forward, making resolutions and formulating predictions about the year to come. But, we can’t know what is going to look for in the future without looking back at 2013. The past year brought big changes to online marketing thanks to some big revisions in Google’s policies and the ever-changing world of design.

Whether you spent the past year doing the Harlem Shake or actively following all the notable blogs to keep your site up to the latest standards, you might want to refresh yourself on the big events and articles from the past year. With that in mind, we thought we would share our most popular posts from 2013. You can remind yourself what mattered in 2013, and see what might be important in 2014.

Our Most Viewed Posts

Pantone Radiant OrchidWhile most people outside of designers don’t tend to follow color trends, it can be surprising how much they affect what you see every day. Most consumers would be surprised to hear that colors come in and out of favor in design on a regular basis, and those trends affect marketing, purchasing decisions, and your perception of a brand or object.

One of the leading influencers in color studies and usage is the Pantone Color Institute, known for their widely used color system. Not only do they provide an organized way to communicate about color in exact terms, they also regularly analyze media, socio-political events, and technological advances to help decide the Color of the Year.

In 2014, you can expect to see a lot more “Radiant Orchid”, as the purplish-pink color has been chosen as the color of the year, as reported by Web Designer Depot.

Portlandia EmeraldLast year’s chosen color was the more recognizable Emerald, though the specific hue wasn’t what most actually associate with emerald. It was a bold but relaxing color of green “symbolizing growth, renewal, and prosperity”, which then became extraordinarily popular among the fashion and design world.

“Radiant Orchid reaches across the color wheel to intrigue the eye and spark the imagination,” says Leatrice Eiseman, executive director of the Institute. “An invitation to innovation, Radiant Orchid encourages expanded creativity and originality, which is increasingly valued in today’s society.”

It is hard to tell whether the analysis is so accurate that the team can predict a color that will become popular on its own, or whether Pantone’s influence is the primary factor making these colors so ubiquitous for a year. But, it is almost guaranteed 2014 is going to have its fair share of Radiant Orchid.

Web design changes all the time. New trends come and old trends go as quickly as the crowd catches up to them. Some of these trends can be long lasting and have a huge impact on how we interact with the internet like responsive design, others can be more fluid and fleeting like flat design. The design community has made its name by always pushing to create the most visually exciting and effective user experience the technology allows, but that means we also have to let go of bad habits as we grow.

As the new year draws closer, designers are reflecting on the changes web design has undergone in the past year. While many are using this reflection to predict what is going to be popular next year, Maryam Taheri looks at what we need to get rid of to improve looking forward.

Homepage Sliding Banners

Rotating Banners

The sliding banners have become a hallmark of news and culture websites across the web, as well as many retailers. But, the banners are becoming dangerously close to cliche and users seem to be mixed in their response. Many find them to be distracting and annoying. While there may be ways to make these sliding banners more enjoyable for users, it could very well be in our best interests to instead turn to more interactive design methods such as single-page scrolling.

Extensive Fill-Out Forms

While we will always have to fill out lengthy forms for legitimate purposes like online shopping (at least the first time!), there is no need to make users fill out a full length form for optional areas of your site. Chances are, they will just avoid that area of your site to avoid giving personal information, and it could severely hurt your trust with many of your online customers. Asking for an e-mail address is fine. Asking for their life story isn’t. Thankfully, the majority have already realized this.

Overuse of Fonts

Sketchbook Typography

It works in a sketchbook, not on your site.
Source: Carolyn Sewell

Typography is enjoying a new wave of interest in all areas of design, but it has its limits. A good designer can match a select number of fonts (no more than three) to create a pleasing website. But, it is far to common for less experienced designers to choose the “more is better” approach to diminishing returns. A mish-mash of fonts only makes a site look cluttered and schizophrenic. If you want to make your header or your copy pop but don’t know much about fonts and typfaces and kerning, it is wise to limit yourself to two fonts. If you can make two fonts compliment each other, you’re design won’t need any more.

Complicated Design

If there is one thing the favored trends of the past year have shown us, it is that users want their web experience simple. This seems like common sense for the large number of mobile users accessing the web while out and about, but it also stands true for desktop users. You don’t have to choose flat design or convert to the church of minimalism, but successful websites are increasingly focused on creating the best experience for users. If your website confuses or overwhelms, you’re doing it wrong.

The best websites are all designed with the unique needs of a business and their customers in mind, but don’t think there isn’t some common ground between them. Web designers have their own process and plan when it comes to making a new site, but they all share some web design elements that simply can’t be left out.

These elements make a site go from boring to exciting and they ensure users are always happy with their online experience. Today, Carrie Cousins shared 10 different parts of a website you can’t neglect if you’re hoping for success.

1. Space

Beatbox Academy

Beatbox Academy

Space is the basis for all web design. Space dictates the flow, readability, mood, and style before you’ve even begun to consider the details of your site. The best designers all have a solid grasp on how to use space and they experiment with space in ways no one else is. Whether designers are playing with the idea of wide open space or creating a more clustered environment, you have to take the time to actively decide how you want to manage space if you want a successful design.

Space also plays a strong role in determining the focus of your page. Any image or text surrounded by open space will automatically seem more important and even larger than a design element crammed next to other aspects fighting for attention.

2. Simple Navigation

Visitors can’t actually use your site if they can’t easily navigate it. Every website should have obvious, easy to use, easily identifiable navigation. Even the most complex sites should be able to be fully explored from a set of five to ten menu items.

Navigation doesn’t always have to come in the form of a menu up at the top. Navigation can also be simply telling your visitors how to use your site, such as adding arrows to a parallax scrolling website.

3. About Us

While it may not be the most exciting part of web design, including an ‘About Us’ page is indescribably important for a smaller business or site owner to tell visitors who they are and what they offer. While it may not be as essential for major companies, you will notice even they tend to include one of these pages.

The trick is to keep it simple. You want to tell visitors enough about your brand and what you bring to the table to interest users, but you don’t want to bore them. This shouldn’t be just a simple template page. It should be kind of like a long-form business card. Short and sweet, but informative, and visually interesting enough to help you stand out without distracting.

4. Contact Information

Without contact information, how are you expecting to get feedback from visitors? Contact information is important for letting your visitors reach out to you, but it also helps validate that you are who you say you are. Nothing makes a site seem sketchy like not being able to find a way to contact a business easily.

To make it easier for users to find and reach out to you, you want your contact information to be highly visible and contain all of the modern ways users might want to connect. A phone number and physical address are absolute musts, but you should consider including social media profiles of yours such as Twitter and obviously an email address is expected for any website.

5. Call to Action

Most websites are created with an objective in mind. Whether you want to make a sale, educate the public, or gather contact information to more thoroughly connect with your audience, there is some goal you are hoping to achieve. A call to action is how you get your users to fulfill your goal, and it should be obvious and strong.

You wan to start out by determining exactly what your objective is, then design it so that action is immediately obvious. Color, contrast, and space are all useful tools for drawing users to the buttons and pages you want.

Even a common signup form is an example of a call to action in web design. The best way to use one of these sigup forms is to place it in a prominent location on the page and make it simple enough to not disuade users from filling it out.

6. Search

It is absolutely shocking how many sites feel they don’t need a search function. Think about all the times you wanted to look up some older information but you weren’t able. Chances are, if you use a site regularly, you will eventually want to search for something, and being stonewalled by a negligent designer can be a real problem.

Implementing search bars is rather common practice, and you all have to do is design that box to be unobtrusive but available. If you want to use an icon, the magnifying glass is accepted shorthand for search, using something else can be confusing.

7. Informational Footer

Many sites use the footer area as a dumping ground for all the information that would otherwise clutter up their site. These unorganized blocks of links aren’t entirely wrong, but they fails to take advantage of the space. Instead, you should try to use the area to communicate a short message or important information in a condensed form, while including those important links in a clear and organized form.

The footer should be simple and streamlined, but it is a good place to include contact information, a small site map, and a selection of important other information. Make it easy to use and understand.

8. Obvious Buttons

It should seem pretty obvious, but every button should look like a button. Pick a visual cue for your site and stick with it so every button is clearly available to users. Not only do you encourage user to click around your site more, but you’ll avoid frustrated users who can’t navigate your page. Using a consistent style is important for web design and branding.

9. High Quality Images

Consider how people are accessing the internet. Smartphones, tablets, and even gaming consoles are all used to browse the web, and most of these have high resolution screens which leave little to the imagination. Users want images to create a visual interest, but you can’t skimp. Low quality images are going to look awful on a ‘Retina’ display. However, with just a few high quality custom images, you can make your site stand out from the crowd.

10. Web Fonts

Just a few years ago, the internet ran on just a few typefaces for everything. They were considered to be the most readable and they solved the issue of making sure every visitor could see text. But, those limitations no longer exist. You can use almost any font you want and you won’t have too many problems.

However there are two reasons web fonts are still important: compatibility and licensing. When you use a web font service, you ensure your search engine optimization won’t be hurt and your site will look consistent on every platform.

The gradual remodeling going on over at Google has made its way to AdSense. After subtly redoing their homepage and their logo, as well as those for select other Google products, the search engine is testing a new home page design for the AdSense publisher console.

The new design can be seen immediately by logging into google.com/adsense. You will be presented with an option to try out the design or continue using the older style for the moment. They also clarify that you can return to the original home page if you decide you aren’t enjoying the new layout, which intends to help you “focus on key day-to-day information.”

This is what you will see when you login:

AdSense Layout Prompt

Here is a screenshot of the new layout:

AdSense Layout Screenshot

All of the big design trends of the year have settled in to the point where they no longer seem new. Responsive design, flat design, responsive typography, and even longshadow design have all reached wide awareness in design. So, obviously that means it is time to find the next big thing. Last week, Paula Borowska asserted that is going to be responsive icons.

What is It?

Responsive icons aren’t what you probably imagine. These days, responsive usually indicates a design element that responds to screen size, but responsive icons are only based on the size they are presented in. Because they can be shown in different sizes multiple times on the same page, screensize is irrelevant to determining the appearance of the icons. It is all about the actual size of the icon itself.

Source: Designmodo

Source: Designmodo

The difference between icons is the level of detail. When you’re gifted with a huge icon (500px by 500px), you’re able to squeeze in a lot of detail. But, as you shrink it, you will want to take away a bit of that detail at a time without losing the intended message. At 250px by 250px, you want to keep the general form, but cut some decoration, while a 25px by 25px icon needs to be as simple as possible to keep the message clear.

Why Does This Matter?

With the rise of incredibly high detail screens on all of our devices, it is necessary to make sure every aspect of our pages maintain uniformity while also working in every size. While a responsive icon doesn’t always respond to screen size, a responsive site with responsive icons may resize the icons as it needs while keeping everything looking great.

Font icons, responsive websites, and minimalistic designs have not only raised the popularity of using icons in design, but it has changed how we use them entirely. This gives us the opportunity to take our icons a step further and improve the entire experience of your site.

Borowska offers some deeper analysis on the icons as well as discussing groups attempting to make responsive icons easier to create; right now they are pretty tricky. It may seem like a small unnoticeable flourish, but in web design the details matter most. I’d keep your eyes on these icons going into the next year.

cssCSS has so many measurement units that it can be difficult to keep everything straight. Each measurement system has its own benefits, and it is easy to find yourself wondering which one is correct. Many designers just decide to use a single unit for everything, but you are limiting yourself by not putting some thought into the units you decide to use in CSS. Thankfully, demosthenes.info put together a great list of guidelines to help you pick the best measurement unit for the task.

Pixels (px)

Pixels are best used for hairline borders and general elements when creating fixed-width designs. It is also a good choice for CSS shadow displacement. But, when using pixels as your unit you need to avoid @media breakpoints, because they break pages when zooming – use rem or em instead.
Don’t use for: typography, except when setting a base font-size in a CSS reset.

Percentage (%)

This is great for making responsive images and containers, as well as setting height on the body in certain situations.
Don’t use for: typography, except in a font-size CSS reset.

em, ex

Use em or ex or typography and elements related to it, such as margins. However, as the guidelines point out, em and ex have subtle “gotchas” when used in complex layout. In this case, rem should be substituted.

Points and picas

These are only good for print stylesheets. Seriously, don’t use them for anything else.

rem

This is a more capable and predictable replacement for em and ex, that is best used for the same purposes, as well as @media query breakpoints.

Viewport units (vh & vw)

These are best for responsive typography and so-called “perfect” responsive containers.

Character (ch)

Use this for sizing and adjusting monospaced fonts, though browsers do have some issues with this unit.

A few weeks ago, select Firefox users noticed a new “card” layout in the About page for local listings. Beginning Tuesday, it appears the layout has begun to roll out world wide. Mike Blumenthal explained the new layout, saying:

The big difference is that the page now can be displayed in either a single, two or three column layouts depending on browser window width as opposed to the current fixed two column display. Reviews will now follow the same columnar structure as the rest of the page and will not be limited to a current one column display. While this view is not yet visible in mobile, one assumes that if the view were to become universal it would likely push to mobile as well.

The page adds three iconic based calls to action near the top; review, directions & photos. The review summary has been moved up the page and photos have been moved down the page. Geo information including street address, category, hours, description and map are now consolidated into a single card near the top titled “Contact Information. “Similar Places” from around the web no longer show and “reviews from around the web” have been moved up the page to be nearer the top.

But, with the change has come an issue with reviews, at least temporarily. As of Tuesday, the number of reviews listed in the information for local businesses has dropped or begun to show wildly inaccurate review counts. It is unclear whether the actual reviews have disappeared or whether the counts are the only aspect to be affected, but users are reporting as much as a 30 review count drop. It is safe to assume the issue will be resolved quickly as the new layout is ironed out.

You can see the new layout below:

New Local Layout

Source: Mike Blumenthal