Blog

The 7 Elements of Modern Web Design

7 Top Web Chef Design Elements in 2015

×
  • Name*full name
    0
  • Email*a valid email address
    1
  • Comments*something more
    2
  • 3

Like the best cooking competition shows that have become must-watch genres on television, each year we hear about the latest “new” website design elements that we should be using on our websites. But, which of these new web design technologies should you use for your particular business in 2015?

DigitalOne “Web Chefs” have reviewed, summarized and highlighted the potential usefulness of 7 key web design elements that we believe will be very impactful in 2015. Even though it may not be necessary to implement all of them, the more you can incorporate these ideas into your next redesign, the better your website will be in 2015.

kids

Element #1: Unique Typography

There are numerous blogs exclusively devoted to debating the advantages and disadvantages of various fonts. Even the exact origin of the word “font” isn’t entirely clear. It’s mostly believed to have originated in France, where the idea of a spring of water (fontaine) was thought to be close to the ideas that spring from words. You may have strong opinions about your favorite font in these “font wars.” You also want your brand and message to be clear and strong. Where web pages are concerned, the range of fonts that webmasters can select for their pages are not as wide as you may think. Even if you were to have a million fonts installed on your computer, you are mostly limited by what your website users have installed on their computers. Unfortunately, you may not be able to use your favorite font. User-friendliness is the key.

The New Yorker’s typography is recognized by consumers around the world because of its unique style and appearance.

ny

Why is it useful?

Typography uses one design trend across the website. For instance, the New Yorker website leads visitors from one section to another based on the typography and font sizes.

When creating your company’s brand, it is important to consider the typography. This allows readers to immediately identify your website and brand.

Element #2: Flat Design

Flat design is a minimalist UI Design Genre that refers to a style of interface design which removes the illusion of three-dimensions (such as drop shadows, gradients, textures, or other tools that add depth). Minimalism is a big part of this design idea. Flat website design is a brilliant concept because it allows the viewer to focus solely on your content.

Let’s take Wistia’s website for example. As you can see, there is a minimalistic look to it that focuses on the content instead of the design. However, the flat design makes the site look clean and slick.

wistia

Why is it useful?

Flat design focuses on a company’s content. It allows the website visitors to get right to the point by putting an emphasis on the content over other design features that make a website “fancy.”

Additionally, flat design uses a minimalistic style making the website appear cleaner with more white space. More designers are creating websites with more whitespace to keep the focus on the content and “meat” of the website instead of overloading websites with design elements.

Element #3: Hover Effects

Hover effects help you identify where you are on a page. When you place your cursor over a part of a website that has a hover effect, it usually changes colors or highlights letting you know where you are looking.

Let’s take a look at an example with the AmeriFirst Home Mortgage website. When you scroll over the navigation bar or even some of the buttons below, the different buttons change colors letting you know where you are on the site. In this case, when I put my cursor over “Buying a Home,” it changed to a lighter color.

af

Why is it useful?

Hover effects are a great tool to help with a user’s experience. The design isn’t intrusive, yet it helps website visitors keep track of where they are looking on a page.

Element #4: Scroll to Page Sections

Some websites have a feature where you click a link and it brings you to a different part of the page. For instance, UrbanBound uses this technique on their website. Let’s take a look.

The navigation on UrbandBound’s website links to the most important information that they want their website visitors to look at. Let’s say you are interested in their success stories. When you click that link, it slowly scrolls you down to the section of the page that discusses success stories.

rg

When you are on the Success Stories part of the page, it also highlights the text in the navigation so that you know where you are. It also keeps the navigation the same so you have the option to scroll to other parts of the page.

ss

Why is it useful?

Scrolling is a better option for a visitor’s usability.

First, instead of clicking from one page to another to get all of the information, you have everything on one page. That means there is no need for multiple pages to load to get the content you are looking for, and usually the content is in the order that makes the most sense for the website visitor. So all you have to do is scroll from section to section to gather all of the information you need.

It’s also advantageous for visitors who have come to the website before. They may be looking for one piece of information they saw previously, and with scrolling, they can get to the section of the website page where it exists easier and quicker.

Element #5: Giant Product Images

You may have noticed that many B2B websites are starting to display large product images on their sites to highlight different features or parts of their product. This element is another important design tactic that we are seeing more and more.

Let’s take a look at HubSpot’s product page on the Content Optimization System (COS) for instance. As you can see in the three examples below, there are large images of different parts of the product on this page. The images are also responsive which is important for viewers coming from different devices. We’ll go over the importance of responsiveness in a later element.

graph

Why is it useful?

Larger product images help designers highlight different features of a product in a more efficient and effective way.

First, it reinforces the benefits of a feature by having the opportunity to point out valuable pieces. For instance, in the second image, you will notice that there are numbers on the image corresponding with benefits of certain features.

It also keeps the visitor thinking about the product with the visuals. We are bound to skim over a lot of text, but with the large product images, we are able to get a solid idea of what the different product features do and convey it through images instead of words.

Element #6: In-Depth Product Videos

In addition to large product images, companies are also beginning to use in-depth product videos to talk about the benefits of their products as well as new features that come out.

A prime example: General Electric uses numerous videos on their homepage to give information about their products.

play

Why is it useful?

According to Inc. Magazine, 92% of B2B customers watch online video and 43% of B2B customers watch online video when researching products and services for their business. B2B companies, therefore, need to create videos that explain their products in detail because it is influential in the buyer’s decision-marketing process.

In-depth product videos also allow B2B companies to take the reigns on the parts of the product that they think their prospects will value the most. By showing step-by-step videos that walk through the process of how to use their products, they will also be able to easily explain how to use their products. There are benefits to customer service as well as usability in the product videos.

Element #7: Large, Responsive Images

In the up-and-coming design trends post, we also discussed having large photo backgrounds. But what we didn’t discuss was the importance of making these images responsive.

Large responsive images conform to any screen size whether you are viewing the image from your desktop, tablet, or mobile device. That means that you will be able to view the image clearly without scrolling up and down and side to side.

Uber’s website uses the trend of a large photo background as well as the design element of making it responsive. Let’s check out the website on a desktop computer and mobile device.

Desktop:

uber

Mobile:

uber2

Why is it useful?

Your customers are coming from all over the place. You may not be sure if they are finding your website from their phone, tablet, or desktop computer. The image that Uber uses above is extremely powerful, but if it was only visible from desktop computers, many people may miss it.

Ensuring your images are responsive makes for a good user experience. Website visitors can look at different images whether they are the background or product images on a page and be able to get the same experience no matter what device they are coming from. This is extremely important, as more and more people aren’t using desktop computers to find out information about different companies.