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

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

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

11 Web Design Trends for 2016

Reposted from designmodo.com.

Are you ready for 2016? Let’s bring on the web design trends.

The new year will come with plenty of new techniques and trends, but the dominant theme is likely to be a continuation of things we have started to see at the end of 2015. More video, vertical patterns, Material Design-inspired interfaces and slide-style sites will grow in popularity.

And it’s not hard for you to make the most of these concepts. Here, we’ll ring in the new year with 11 web design trends (and plenty of great examples) that designers will be seeing a lot of in 2016. (Make sure to click the links as well and play around with some of these sites to really get a feel for them. Many of the trends are just as much in the user interface as the visuals.)

Vertical Patterns and Scrolling

A bigger leaning toward mobile – with some thinking mobile traffic could equal desktop traffic this year – means more sites are being designed with vertical user flows.

A few years ago, we were all debating the end of the scroll in web design only to find it roaring back as an important interaction tool. Smaller screens lead users to scroll more and designers to create user interfaces that are much more vertical in nature.

Web Design Trends for 2016
 Vertical Patterns and Scrolling

More Card-Style Interfaces

One of the biggest elements to spring from Material Design has been the emergence of card-style interfaces. They are in everything from apps to websites to printed pieces. Cards are fun to create, keep information organized in a user-friendly container and are engaging for users. The other bonus is that they work almost seamlessly across devices because cards can “stack” across or down the screen (or both).

Web Design Trends
Oyya

Hero Video Headers (Think Movie-Style Sites)

Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.

Hero Video Headers
Christmas exp
Younusabdalla

Tiny Animations

Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size. Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surprise.

The most important factor when it comes to animation is to make sure it serves a purpose: Why are you creating the effect and what exactly is it supposed to do?

Tiny Animations
True digital

Focus on Interactions

Going hand-in-hand with animation is interaction. As the staple of apps and mobile interfaces, interactions create links between users and devices. Good interactions are often small – even micro in nature – and provide value to the user. From the simplest of alarms to a text message to a blip that it is your turn in a game, these small interactions shape how people interact with devices (and how loyal they are to associated websites and apps).

Focus on Interactions
My united

Even More Beautiful Typography

Streamlined interfaces have paved the way for the emergence of beautiful typography. (As has the addition of more usable web type tools such as Google Fonts and Adobe Typekit as mainstream options for creating expansive type libraries online.)

Big, bold typefaces will continue to rule because they work well with other trendy elements. This simple concept of lettering gives more room to other elements, while communicating the message with a highly readable display. The must-try trick is a simple pairing of a readable typeface and fun novelty option.

Even More Beautiful Typography
Haw

Illustrations and Sketches

Illustrations and sketches bring a fun element of whimsy to a site design. They can work for sites of all types and aren’t just for children anymore. The illustration style has also started to grow in popularity when it comes to some of the smaller pieces of website design as well, such as icons and other user interface elements. What’s nice about this trend is that illustrations make a site feel a little more personal. Because an illustration or sketch style icon appears to be hand-drawn, it looks and feels personal for users. That can go a long way into creating a connection with them.

Illustrations and Sketches
Climate under pressure

Bolder, Brighter Color (With an 80s Vibe)

Big, bright color really started to emerge with the flat design trend and has continued to gain momentum. Google’s Material Design documentation furthers that conversation. And just take a look around Dribbble, where color is everywhere. These are key indicators that color will stay big in the coming year. Some of the change to the big color trend is in the type of colors used. While 2015 used more monotone big color designs, usage is starting to shift to larger and brighter color palettes with an almost 1980s vibe to them.

Bolder, Brighter Color (With an 80s Vibe)
Inlayinsights
Rightcolours

More Hamburgers and Iconography

Icons, icons, icons! From the debated hamburger icon to divots through design projects, iconography is big. More designers are releasing fun UI and icon kits that are easy to use, making icons easier than ever to work with. (And pretty affordable.) One of the other big things designers are experimenting with is oversized icons thanks to SVG formats.

More Hamburgers and Iconography
Iqor

Reality-Imagination Blur

Is that site real or animated? Is the path predetermined or can I make choices along the way? The next step of gamification and design is emerging with a blurred line between what’s real and what’s created (or imaginary) in web design projects. And the results are pretty stunning.

From virtual reality to websites that let you make choices to find new content, this type of customization is personal and users seem to really like it. This trend also includes creating imagery that looks real, but you know that it is not.

Reality-Imagination Blur
Coleman

Websites with Slides

First there were sliders, so that websites could move images within a frame to showcase content. The next part of that evolution includes full-screen slides. Each slide refreshes the entire screen with new content; it can work with a click, scroll or timed effect. Users can navigate forward and backward for an experience that is almost physical. Expect to see plenty – and we mean a lot – of sites using this concept in the coming months.

 Websites with Slides
Apple
Crisis

Conclusion

Looking through the examples above it’s easy to see that there’s not just one web design trend that designers will focus on in the coming year. It’s a combination (and culmination) of multiple trends from the past few years. Look even closer and you’ll see that many of these sites use multiple trending elements from this list to create interactive and engaging websites.

What trends are you most excited about in 2016? Are there any we missed on this list? Join the conversation in the comments below.

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 to Convert a Non-Responsive Website into a Responsive Website

 
Author’s note: There are many articles and blogs floating around the InterWeb today that provide a technical response to this matter. These postings deal heavily with grid-based frameworks, breakpoints, media queries, CSS3, HTML5, etc. and are intended for a professional web industry audience. I will attempt to explain the process from a more practical, customer-centric and non-technical perspective. If you are a marketing manager or small business owner and find yourself tasked with taking your existing website and making it responsive I hope that this article will be useful.

The Coming of Responsive Web Design.

In 2013, Responsive Web Design became the defacto industry standard in web development. Responsive Web Design represents a new approach to building websites that optimizes the user experience across all platforms and mobile devices. If you own or manage a website it is imperative that you invest in the mobile user experience, and Responsive Web Design is the most complete solution to this complex problem. A typical business updates its web presence on a fairly predictable cycle. On average, a corporate website will last between 2-5 years before it’s time for an overhaul. In the market now? No problem. Any web developer worth its salt will propose that the new site be built using a responsive framework. If you are currently in discussions with a web agency and this is not the case I have only one thing to say to you: RUN, Forrest! RUN!

Houston, we have a problem.

All is well for site managers that fit within this cycle and are ready to build their new site from scratch using Responsive Web Design. Ideally, a responsive site should be built from scratch as the design and the framework both strongly influence how well the site adapts to different devices and screen sizes. But what about those poor unfortunate souls that somehow missed out on the responsive coronation? You have a shiny, new  (and most likely expensive) website that you took great pride in – at least prior to hearing about this new ‘responsive thingy’. You find yourself stuck with a web presence that was outdated and uncompetitive prior to it ever going live. And, perhaps worst of all, you did not plan for budgeting to fix the problem. What to do, what to do?

First off, DO NOT PANIC. Take solace in the fact that you are not alone. I receive several requests each week from managers in organizations large and small that are in this spot. There is a timely and cost-effective solution.

Transitioning into Responsive Design.

Let’s begin with the basic question that defines the problem: How can we convert an existing, non-responsive website into a responsive website?

Before we can begin to answer this question, we must determine what kind of website you currently have. Is your website driven dynamically by a content management system (CMS), such as WordPress, or is it a compilation of static, HTML pages? If you do not know the answer you will need to check with your IT staff or the original site developer as this is critical to the conversion process.

Now, to transition to a responsive design, we must:

    1. Assessment. To begin with the conversion process, we must first review the site design, layout and structure to ensure that it can fit within the responsive framework. This may require some tweaking of the original designs and layout, and not all sites are compatible for conversion.
    2. Information Architecture. Once we can confirm compatibility we will create interactive HTML wireframes that will demonstrate how the existing content will display for desktop, tablet and smartphones. The number of wireframes will vary by project and an understanding of user behavior via analytics will help us determine the types of mobile devices current site visitors are using. If, for whatever reason, you have a lot of users on Kindle Fire coming to your site (not that THIS will ever happen), we will need to ensure that the conversion takes this particular device into account.
    3. Design for Responsive. Next, we will rebuild the original design PSD’s templates to demonstrate the updated designs (based upon content and layout modifications required fro responsive conversion). As with the wireframes that precedes this step, we will provide design mockups for desktop, tablet and smartphone views. At this point, you will truly begin to see how your site will look and feel as a responsive website.
    4. HTML Prototypes. Once the design templates are approved, we go through the process of PSD2HTML, built upon a responsive framework (such as Bootstrap or Foundation).
    5. Convert the Code. We will then go through the tedious task of converting everything that was once fixed-with into a fluid, responsive layout. When moving from fixed layout to responsive design, we must establish “break points” that will trigger CSS style rules for different devices and screen sizes. Text is only one component of responsiveness. Due to the ever-increasing use of infographics, photos, and videos, images are also significant aspects of the responsive experience.
    6. Template Integration. As I have stated previously in this post, we must determine whether the existing site is static or dynamic. If the site is static, we will create responsive HTML template pages, which can be used in HTML editors such as Dreamweaver. Once these responsive templates have been introduced, the task of manually copying and pasting the existing content from each individual static page will begin. Based upon the number of pages the site has, this can either be a quick fix or a major headache. For dynamic sites, however, the solution is much more elegant. For website that use a CMS we need only replace the existing non-responsive HTML templates with the responsive HTML templates.
    7. Site Testing & QA. Finally, we will then test the converted site on multiple devices to ensure that everything is responding accordingly. The more you test your responsive site, the better the user experience will be in the end.

Although the solution is technical, the process of converting an existing non-responsive website to a responsive website, in practice, is more art than science. Each website is different and has its own unique challenges during the conversion process. For site owners like you, however, this means you no longer have to create a separate site for mobile users or make them suffer through an inferior mobile experience.

Have something to say? Leave A Comment Below.

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