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


Credit: Vice

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


Credit: Dansk Design Center

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


Credit: Sequence

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 flat 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


Credit: Rehab Studio

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


Credit: Lois Jeans

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


Credit: Cool Club

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


Credit: Nacache Design

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


Credit: Buck Design

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


Credit: Anyways

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.

Mobile Web Navigation Best Practices

Smartphones are not simply phones, but users’ favorite devices for checking destinations, locations, schedules, and bank balances.

Internet browsing is almost completely transferred to handheld devices, knowing how much time busy people spend on the go, and all the situations in which they’d grab their phone and surf the internet.
 

Image source: Basov Design
 
Still, the biggest problem of handheld devices is their limited screen space, which often obstructs visibility while multi-tasking forcing users to surf with a single finger.

That puts navigation quite high on the list of web development and design priorities. Both developers and designers know a good site is worth nothing if it confuses users, and doesn’t let them find what they are looking for. In most such cases, users leave never to return.

Image source: Rosie

But how to be absolutely sure you’ve handled navigation well? Let us share the mobile web navigation best practices that can be useful to you:

A SUITABLE NAVIGATION MENU FOR SMALL SCREENS

One fact designers always consider is that the behavior of users when accessing a website from their phone is different than accessing the same website from their desktops. Including a comprehensive menu on a small screen is a tricky task, but it is perfectly feasible if planned carefully.

THE MOST IMPORTANT PAGES GO FIRST


Image source: VisualRocks.co

Before you release your own mobile version, take a look at the ones that are already there. Which pages are displayed first? Better yet, have you developed your own strategy for outlining top category pages?

If not, think about the most common actions you expect users to perform, and in particular those that can satisfy their mobile needs.

In the world of mobile browsing, speed is a top notch priority. Users don’t want to list categories for ages in order to perform something simple, and the best way to improve their experience and to invite them to stay is to keep paths simple.

YOU DON’T NEED A LOT OF MENU BUTTONS


Image source: Olia Gozha

Remember that you’re designing a mobile menu which will be displayed on a small screen. Your real estate in the case is fairly limited, so don’t experiment with too much clutter. Keep only the most important fields.

For instance, try to figure out which links can be your users’ priority, and which are the elements that are not really relevant in a mobile environment.


Image source: Anthony Lagoon

Of course, this is not going to be easy at all, but if you want your website to be really mobile friendly, you must stick to a more limited framework than the desktop one, and have a maximum of five menu buttons.

CONSIDER NESTED NAVIGATION

Nested navigation is a three-line button which can be invaluable for mobile websites. The tool allows covering options in drop-down menus so that they won’t occupy the front page space when not needed.

THE FEWER TAPS THE BETTER


Image source: Vilém Ries

Everybody wants to make his website more productive, but tenths of taps are not that likely to help. If you want a successful site, keep tapes and minimum, and let the user choose from a very basic menu.

This strategy eliminates the risk of errors, especially because the user can go back quite easily, and he won’t be frustrated.

BEWARE OF FONTS AND CONTRASTS


Image source: Greg Christian

Due the fact that you’re working on a small screen, try to keep text readable without zooming. This is one of the most important mobile-friendliness priorities.

Navigation, in particular, has to be easy to read, so you should choose a clean font and make it taller with some extra space between the letters. Most commonly, designers opt for Times New Roman, Helvetica, Arial, Georgia, Courier, and Trebuchet MS, because none of them has overdone ornamentation.

INCLUDE SCROLLING NAVIGATION


Image source: Simon Robinson

Be careful when placing categories in your navigation menus, and think of their hierarchical order: Is there a category that is more important than the others? Are there any subcategories? All of these aspects have to be considered in order to ensure each category has its own place.

For instance, the most important categories should come highest in the menu, while the user should scroll down to find the less important ones.

STACKABLE BUTTONS


Image source: Roma Datsyuk

Remember that what mobile users see on their device is a portrait rather than a landscape, so try to present your web design vertically. The text that was originally read across should be read down, assuming that you have no more than 5 categories.

TOUCH DESIGN

Both smartphones and tablets are handled with touch, which is why you need to consider the average space required by fingertips when deciding on the size of your elements. Ideally, when selecting items in tight spaces, users should rely on at least 44 pixels (left to right and up to down) space to tap on the exact item they want to see.


Image source: Nashatwork

As you probably know from personal experience, leaving less target space than 40 pixels leads to taping on the category above or below the desired one – a thing that is very likely to confuse or even disappoint users.


Image source: Marko Prljic

OPTIMIZATION TIPS

  • Place menus on the top/bottom of the screen, depending on what users intend to do on your website. If their aim is to scroll down and to look for content, your bottom menu is likely to inspire them to continue browsing instead of leaving your site to check the competitor’s one.
  • Hide a part of the menu to free space for other content, or make it visible only when users deliberately click on it. In such way the menu will stay up front, and will still be visible without obliterating more useful content.
  • Include a link to the menu on top of the screen in case the menu link is at the bottom.
  • Short and wide are your best bets when designing mobile navigation, since you’re making sure that category titles are visible and look better.
  • Try to decrease header images, or replace them with a smaller logo to leave more space for navigation.
  • Remember to keep your design and branding elements consistent with color, typography and style, and keep all navigation buttons similar instead of wasting valuable space to add large images and graphics.
  • Keep text as short as possible, especially when designing the menus and the buttons. Sometimes, it will be extremely difficult to limit what you have to say to a couple of words, but this is the best way to save space and to keep users interested.
  • Whatever can be made simpler, make it simpler. This matters especially to the homepage, where users should focus exclusively on the top items and the elements that are most relevant to them.


Image source: Rahul Bhadauria

THINGS TO AVOID IN MOBILE NAVIGATION OPTIMIZATION

As counterintuitive as it sounds, users don’t like too much choice. You need to keep them satisfied with only few buttons, and to avoid the following mistakes:

  • Offering too many choices
  • Relying only on horizontal scrolling
  • Hovering
  • Including slider menus
  • Oversimplifying and boring users
  • Making navigation unintuitive
  • Complicating access to important information


Image source: Damien Da Costa

FINAL THOUGHTS

Mobile web design changed almost every basic design rule and principle and imposed a whole new set of practices to adopt. It was a drastic change of interface requirements and a turnover in standards, and like it or not, we had to jump on the bandwagon and surpass the learning curve to know what is best for our mobile users.

Design is no longer traditional, and that’s fine because we live in a user-focused world where creativity matters less than satisfying customer needs. Before designing whatever, we have to ask ourselves:


Image source: Clément Pavageau

What is it that the user came to do on our website? How can we make that easier for him? Does our budget allow it? These are the answers that will help you develop a great mobile navigation strategy to attract and keep users on board.

Basically, all that needs to be done is to meet their needs – that will make them happy, and it will inspire them to come back and to recommend your website.

Building Blocks for a Successful Website Redesign

Do I Need a New Website?

Architects work with construction developers to build spaces. Graphic designers work with coders to build websites. The “brain” draws up a visionary blueprint and the “brawn” ensures that vision is realized to its fullest potential.

For architects, understanding the intricacies of laying bricks can greatly impact the outcome of a wall design. We consider bricks as modular building blocks, yet time and again we’ve seen beautiful, surprising and impactful end products made out of this simple baked clay.

responsive web design

The process of developing a website shares this sensibility. Even though every website is built in standard HTML codes, a visionary graphic designer working with a seasoned Web developer can create a one of a kind user experience that is equal parts beautiful, functional and sustainable for years to come.

Aligning your vision with a team of graphic designers and Web developers at the outset of a website revamp project is key to a successful collaboration.

Below are a few lessons learned to help plan your website makeover project.

You need a new website if:

1. Your clients don’t award you projects because of what they’ve seen on your website.

2. You get complaints from people trying to get information or view your work on the website.

3. Your website is not responsive chances are your website is more than four years old. Instead of buying into “mobile optimization” projects, or “deflashing” your website, you may as well reimagine your website with today’s user behavior in mind. Call it a complete website revamp instead.

4. Your website loads slowly and images not very on today’s larger screens.

5. Updating the website feels like a big personal project due to a poor content management system (CMS) or the absence of one.

6. Your business model has changed and the website can’t be easily updated to reflect this.

Starting a Website Revamp Project

webdesign makeover

To start a website revamp project, first consider the following:

1. The primary stakeholders are on board usually partners or marketing director of your firm.

2. Someone in your company is ready and available to be the point contact person with the designers and Web developer.

3. You can allocate some time and resources to the website revamp, i.e. preparing images, proofing/editing texts, testing the website prototype, managing review and approval process internally.

BASIC TECHNICAL REQUIREMENTS

Your new website should fulfill the following technical requirements for today’s Web standards.

Don’t settle for anything less:

1. Responsive design. Your website must be fully optimized for tablets and mobile phones in addition to desktops.

2. Don’t use proprietary tools that require users to install special plugins to view your website (hint: don’t use flash) no one is patient enough to go through hoops just to access a website.

3. Search engine optimization (SEO). Make sure your website is ready for SEO. This usually takes time to nail depending on your business’ focus. Hiring an SEO specialist can greatly expedite increasing the rank of your website on popular search engines.

4. Content management system (CMS). Always ask for a CMS tool that allows you, or someone internal, to manage the website content on your own without having to contact the web developer for updates. The waiting game will cost you missed opportunities in no time.

5. Ongoing relationship. You may not need to work with the web developers regularly, but you want to make sure the company you’ve selected to work with has a good track record in responding to existing clients when they’re in need of technical help, regular maintenance, of feature updates.

DEFINING THE SCOPE OF WORK

web designer
Answering these questions will help you define a project brief and begin conversations with web designers:

1. What are your business goals?

2. What are your aesthetic values?

3. Can you identify problems with the existing website, both technically and aesthetically?

4. Do you need new branding/logo? Are you open to ideas? If you are, be prepared for a longer process working with the graphic designer. It’s also a good idea to work with a web designer who understands branding.

5. Who will be involved in the decision making process for design and technical build? Can they be involved in the early design and planning steps?

6. Do you have login information to the existing web hosting, domain registrar, and the CMS?

7. What visual assets do you have? Is it worth photographing key projects for the revamp project? If no photography is available, will you be showcasing renderings, sketches, or drawn up plans?

8. Do you need to rewrite or edit descriptions and specifications for each project? If so, make sure to schedule this properly accounting for the internal review and approval process.

Website DO’s and DONT’S

These great tips will certainly help to increase your website traffic and have your visitors stay longer.
As a Social Media marketer, you want people to stay on your website, love what they see and either contact you or buy. Right? Oh, you think you’re not a marketer? Well if you have a business you need to think of not only your creative business hat on, but your sales and marketing hat on too. Social Media marketing is more important than ever.

It’s not just about putting up a Facebook Page or a Pinterest account. Nor is it about having create a website and forgetting about it. Even if you delegate the work you need to have a grasp of the facts that it takes all the components of Social Media marketing working together to create a successful business.

So as we’re talking about how to get more traffic to your website here, just think of one word – ease. Ease is the name of the game these days. Ease of navigation, easy to read and relevant content, easy to find what you want on the site and easy ways to contact the business owner. Users expect more and more. A fast load time for your website is also important. If things are too confusing, take too long and all too hard they’ll never hang around to see, hear or read your Social Media marketing message. These ease elements apply to all your marketing but if you keep them top of mind for your website that’s a great start.

aabdesigninc.com

5 Psychology Secrets for Interaction Design

It’s becoming more important every day for your designs to connect more with users and include a “human element.” Website and user experience design needs to feel real, from aesthetics to interactions to motion (perceived and real) to emotional connection.

The problem designers most often encounter when thinking about users is not thinking about them as actual people. It sounds a little crazy, right? But we are not talking about designing robots here. As described in Interaction Design Best Practices, humanistic design creates an engaging experience that users can connect with physically and emotionally.

Here are a few ways to do it.

1.Your Mantra: “Humans Come First”

The first step is saying it out loud: “Humans come first.”

Now repeat it until you hear this phrase echo in your head before and during the design and planning phases of every project. And the way to do that is to actually be more human. Be intentional in actions, interactions and design. Most of all, empathize with your users.

Screen Shot 2015-09-03 at 09.40.14

Photo credit: Reebok

One way to ensure that you’re designing for humans is to create a user persona. You can use fictional identities composed from researching your users. This will help eliminate you guessing about your users and will allow to design with their needs in mind.

For example, the persona process we follow at UXPin looks like this:

  • Review usage data in our app, segmenting users based on overall engagement. For example, these segments might include people who started a trial but didn’t buy, people who started a trial and bought, etc. Once we’ve defined the segments, we look at behavior based on events created in KISSMetrics.
  • For qualitative data, we interview ~30 users total from all segments to try to understand the “why” behind the data.
  • Based on quantitative data and interviews, we can start plotting out patterns that eventually form our user personas.

Screen Shot 2015-09-03 at 09.40.45

Photo credit: UXPin

You need to create things people want. Step back and evaluate every website or app you frequent. Do you feel like you are part of the design? Is it personal? It is intuitive and easy? That’s human.

2. Design for Comfort and Predictability

There are a few elements in the design process that you just can’t change, like device type and screen size. But you can affect how things render and how comfortable your designs are to use in different environments.

For a design to “feel right”, it must be comfortable to use.

Screen Shot 2015-09-03 at 09.41.21

Photo Credit: Rosenfeld Media, Creative Commons 2.0

  • Thumb patterns on mobile devices need to be reachable and accessible. Think about different phone, and hand, sizes when considering element such as buttons or swipe actions.
  • Think about typeface size. Users should not squint to read the copy.
  • Provide contrast that will stand up in varying conditions. While desktop users are most likely to view a website indoors, users might look at a screen in other lighting conditions with their various devices.

Screen Shot 2015-09-03 at 09.41.51

Photo Credit: Bugaboo Strollers

  • Motions and movement should mirror real-life. (Look at the 360-degree rotation of the stroller above.) Think about the physics of a ball rolling. Now imagine that ball on a mobile phone screen: which way should it roll? (To the lowest point of gravity as the phone is moved because balls always roll downhill.) As outlined in Interaction Design Best Practices, perfecting these microinteractions go a long way towards creating a delightful experience.

The more comfortable users feel, the more likely they’ll continue to interact with your product.

3. Connect Emotionally

Focus on the one emotion your project should convey. Don’t get wrapped up in trying to create multiple emotional experiences. Do one exceptionally well.

The emotional connection is two-pronged:

  1. Your design should create a relationship between users and your product.
  2. Your design should create relationships between users.

Screen Shot 2015-09-03 at 09.42.18

There are a variety of ways to create an emotional connection with your users. As outlined in Web UI Design for the Human Eye, color is a good way to stir emotions in people. Contrast, complementary colors and vibrancy all tug at the heartstrings in different ways. Colors evoke different moods in people as well. For example:

  • Red: Conjures up passion, and gets the blood pumping with excitement. 
  • Orange: Gives a whimsy lightheartedness to a design.
  • Green: Promote prosperity, both physically and financially.
  • Purple: Conveys the lap of luxury.

Screen Shot 2015-09-03 at 09.43.26

Photo credit: Felt App

But color is but one aspect that goes into nurturing an emotional bond. Copywriting and visuals also play a role. Felt App’s marketing site has light copy with a conversational tone. The photos are all moments that one might experience in life — mementos of the past. The colors are earth tone, mostly browns with a splash of red from the one envelope. All of these elements alone don’t add up to an emotion, but together these all craft the feeling of nostalgia.

Emotional connections are established in a variety of ways. Brand loyalty, for example, stems from emotional connection. The type of emotion is determined by the tone, message and design choices you make. For example, a photo of people crying can cause concern for users – why are the people in the photo upset and how can they be helped?

4. Design with Mental Triggers

Understanding a little human psychology goes a long way when it comes to design.

But you don’t have to enroll in college again to use those tools. Spencer Lanoue broke down “ Psychological Triggers That Make UX Design Persuasive” from an academic research standpoint for you.

Screen Shot 2015-09-03 at 09.44.21

Photo credit: Laerepenger

Here’s what the concepts look like (and how they relate to design):

  1. Do something for other people. And they will return the favor. Look at the example above, take the quiz and you can save money.
  2. People look at the behavior of others. Especially when they are not sure how to act. Include a social stream in your design to make users feel like part of a bigger group.
  3. Users want what they can’t have. The scarcity principle is why limited-time deals work so effectively.
  4. Users tend to fall in the middle when it comes to making choices. Most people will be drawn to the center. As recommended by Hick’s Law, more choices leads to decision paralysis, so choose carefully.
  5. People are drawn to what is relevant to them right now. Consider beacons, notifications or check in tools to be in the moment.
  6. People remember elements that stand out. Use contrast to create focus.
  7. People require timely feedback. Know the “Power of 10” when it comes to interaction design. As Jakob Nielsen stated, users need feedback within 0.1 seconds to feel like they still control the experience. If it takes longer than 1 second for your interface to respond, the feeling of control quickly disintegrates. Whether the feedback is purely visual or text-based (like a modal window), make sure it’s clearly understood and uses a conversational tone.

Screen Shot 2015-09-03 at 09.45.24

Photo credit: Bose

Bose is a good example. The site takes a few seconds to load, but the smooth loading animations makes the wait feel less tedious. As you hover over each product, the smoothly triggered animations makes the user feel like they’re playfully browsing through a rolodex. The interface also features contrasting bars of colors to capture the user’s attention, drawing them immediately to the products.

Take a look at the animated prototype we built below in UXPin. Notice how the menu loads immediately after tapping, but transitions a bit slower (so that it’s not jarring). Again, we use bright colors here to quickly grab the user’s attention.

Sep 03, 2015 09:47

Photo credit: UXPin

While it may feel manipulative, the use of psychological trigger allows you to further your ability to reach out to the human on the other end of the screen.

5. Design With Simplicity

A wise man once said, “the design is in the details.” Simplicity always strengthens the details.

Websites such as Facebook, Twitter and Instagram thrive on this human factor. People are sharing their lives with other people. The design and interface is simply the vehicle that gets them there. Now think about the designs of each of these websites. All of these platforms started with simple tools for sharing and while they have grown in complexity over the years, the core usability is still easy to learn.

Screen Shot 2015-09-03 at 09.48.03

Photo credit: The University of Sydney

Start with simple visual elements:

  • Color: Stick to one or two colors that are high in contrast. Keep cultural considerations in mind, especially if your website is designed for an international audience.
  • Typography: The first rule of typography is that it must be legible (letters are easy to discern) and readable (words and sentences are easy to understand). All main body copy should be set at a level that is comfortable for the eye. Start with a sans serif style and include plenty of space between lines. For the best visual comfort, consider size and the number of characters per line.
  • Space: More space makes a design feel open and inviting. Cramped lettering or elements that are too close together feel chaotic and jarring. It’s a tricky balance though, because wide open spaces can sometimes create the feeling that something is missing. A good approach is to subtract elements from your design until it breaks, then working your way back over the threshold.
  • Micro-interactions: Design interactions and notifications work in an almost invisible way. Like a simple hover animation, they add visual polish while giving users instant feedback. Follow the 12 principles of animation.

Prototyping your design is a good way to see if these visual elements work or not. While doing so, look for where you can trim because as the old adage goes, “less is more.”

Takeaways

Designs with a human touch just feel right. It might be intangible, but it’s undeniably powerful.

Think of interactions between people. Most communication happens using common languages, such as speech or even posture or gestures. It’s usable communication.

It’s the very same thing when it comes to designing a website or app. The most stripped-down purpose is to communicate something with users. Creating a simple, easy-to-understand method for this communication is always the quickest route to success.

How Can you Tell if your Website Needs a Redesign?

One of the biggest failures of any business today is neglecting its digital presence. Many companies erroneously believe that in order to be successful they simply need to have a Facebook page, but that is no longer enough. If you want your business to prosper, it’s imperative to have a great company website.

Perhaps the most important feature of website design is a little element I like to call, timeliness. You can easily figure out whether or not your site is timely by asking a single question. Does your website look like it would fit in the modern world, or does it look like something from the early 90s? Here is an of examples of the latter category:

website redesign
Does your website look like this?

old sample website

A common misconception when it comes to website design, is that it only involves visual aesthetics and style. While visuals are certainly a huge factor in a website’s timeliness, they are not the only concern.

Do you remember what old school websites actually looked like? Do you remember how clumsy and sluggish they were in terms of usability? Stop for a moment and picture them. They had huge, oversized buttons, solid and very bland colors and lots and lots of text. That’s mostly because website design and HTML code hadn’t progressed far enough to support advanced techniques.

Fortunately, all that has changed considerably over the years. Now, you can build an entire website with just images if you really wanted, stripping text from the design completely. But, a good user experience isn’t just about appearance it involves so much more. Mechanics, navigation, and accessibility are all equally, if not more important. For instance, you don’t want your mobile users to have a terrible online experience because the shopping cart system doesn’t work on smaller screens.

So, how do you truly know if your website is acceptable in the modern world? Let’s break each component and find out if your site is “timely” or not.

Can you browse the site efficiently on a mobile device or tablet?

Does your website support mobile browsing and is it optimized to provide an enjoyable experience on mobile platforms? If the answer to this question is no, then you’ve most certainly failed at providing a timely website.

Customers now expect the same online experience on a mobile device as they get on traditional desktop computers. Thanks to all the recent advancements in responsive design, it’s easier than ever to create a website that looks great on mobile.

Here are a couple of examples of what your site can look like from a smart phone. See how easy it is to view and access everything? website redesign The benefit of responsive design, is that you no longer need to create a dedicated mobile website. You can simply optimize it to accommodate smaller screens and touch based navigation.

mobile website

Browse your own website with a mobile device. If you run into complications or experience visual bugs (images that are too large, ads jutting out of the wrong places), then there’s a good chance your customers will encounter the same problems.

Pro tip: Ensure your website can be easily navigated using mobile devices.

Are the images healthy and fresh?

You’re probably wondering how could an image look healthy? Have you ever seen an old picture that’s been worn and disfigured because of age? They turn a yellowish color and lose their vibrancy and saturation. The retro theme is great in certain places, but your business website is not one of them.

website redesign For crying out loud, we now carry devices capable of HD visuals in our pockets. Take advantage of that. Don’t use clipart, poorly cropped images and lower resolution photos on your website. Not only does it look bad It looks bad sure, but it’s also considered unprofessional.

Your website is a statement, one that says your brand is fresh. Using poor quality images is not a good way to do that. In the example above, you can see only one picture on an old looking background that doesn’t fit the words on the page. Is this how you’d want your website to look to potential customers?

aab design

Pro tip: Always use clear images that are of a high resolution.

 

Have you put the most important information at the front?

There’s nothing wrong with clicking through a couple of menus and adding interactive dialogue buttons. That’s part of website design. However, the most important information needs to be displayed right up front for potential customers and visitors. website redesign Do your potential customers know about your business or brand? Do they know what you sell or what kind of services you provide? Don’t make it a chore for people to figure out the important information. We browse the internet because it’s convenient, readily available and incredibly easy to access. Don’t make your website the hurdle in making a sale.

sample site

Is your website showing up in search results?

Before anyone comes to your website, they are likely to search for something using a search engine. So, the best way to get noticed on the web is to be one of the first few results they see when the perform a search, say on Google.com. However with hundreds of similar companies competing for the same bit of search real-estate, it’s increasingly difficult to have a high enough ranking to be noticed.

A cottage industry (known as “Search Engine Optimization” or SEO for short) has evolved around search engine ranking and it’s imperative for all modern websites to embrace some of its key principles. Broadly, SEO has three steps you need to follow when creating a website:

Research: Find out what are the keywords you want to target for your business. Also look at what your competitors are targeting. Use this information to set your goals.
Set your goals: All websites have three main goals: drive traffic, gain exposure, and build revenue. Good SEO helps bring in traffic, it’s up to you to figure out what to do with it to convert them.
Marketing: When you’ve figured out what you want to do, you can start optimizing your website, building links, networking, and creating great content that spreads your relevant keywords around.
Unfortunately, SEO is not something that can be implemented at a later date. Your website actually needs to be designed from the ground up with SEO in mind. The same holds true for mobile design though, so if your website is not optimized for either of these elements the initial design process is the best place to start.

sample seo

A lot more than simple design goes into a successful website. If you follow these simple points however, you’ll be well on your way to providing a timely website.

Five Reasons Why Responsive Design is a Big Deal Indeed

So Long Desktop

…in 2014, mobile usage surpassed desktop usage. If people are using their phones to access your website even when they have a desktop at hand, you need to make it easy for them.

98%

…of people age 30 and under own a cell phone. Without responsive design, you’re pretty much ignoring the entire younger generation.

Google 

…announced that effective April, 2015 it is scoring mobile-friendly websites higher in mobile search results. Why is this important? A whopping 46% of searchers now use mobile devices exclusively to find information.

Device Mayhem 

…with thousands of device types to optimize for with varying screen sizes and resolutions, responsive design is the only way to ensure your website looks as good on a mobile device as it does on a desktop. Since half of all web visitors will never return to a website they’ve had trouble viewing in the past, better make that first mobile experience a good one.

More Than 18% 

…of companies have already implemented responsive website designs giving them a leg up over your company if yours isn’t one of them.

We Can Help

Is your organization one of the 82% that don’t have responsive design yet? It may seem like a daunting and time consuming task, but our web content and experience makes it easy to go responsive quickly and effortlessly. 

We’ve helped countless customers. If your web content management system isn’t mobile-friendly, why not take a look at ours?

10 Benefits of Having a WordPress Website for your Small Business

WP logo

 

1. Ease of Use

WordPress is very easy to use and has an intuitive interface.  Adding new pages, blog posts, images, etc. on a regular basis is a breeze and can be done quickly.  Because the technology is so simple, time spent on formatting is greatly reduced.

2. Manage Your Website from Any Computer

WordPress is browser-based. You can login from any Internet connected computer and manage your site.

3. No HTML Editing or FTP Software Required

WordPress is a self-contained system and does not require HTML editing software (such as Adobe Contribute or Dreamweaver). You can create a new page or blog post, format text, upload images (and edit them), upload documents, video files, image galleries, etc. all without the need for additional HTML or FTP software.

4. Search Engines Love WordPress Sites

The code behind WordPress is very clean and simple, making it easy for search engines to read and index a site’s content. In addition, each page, post, and image can have its own meta tag keywords, description, and title, and be optimized for specific keywords, allowing for very precise search engine optimization.  You can also use tags to further enhance your search engine optimization efforts.

5. You Have Control of Your Site

No more waiting for your web designer to make simple updates to your site. With WordPress, you have control of nearly every aspect of your site and can easily make those simple updates yourself.

6. The Design of Your Website is 100% Customizable

WordPress acts as the engine for your website. The look and feel of the site can be 100% customized so your brand can shine through on your site and provide a unique experience to your visitors.

7. A Blog is Built-in and Ready to Go

Since WordPress was originally created as a blogging platform, blogging capabilities are built-in and are easy to integrate, if desired. Setting up RSS / email subscriptions to your blog, commenting capabilities, and automatically adding the most recent blog posts to other pages of the site (your home page, for example) are also very simple to set-up, and help to extend your company’s reach and make your site more dynamic and interactive.

8. Extend the Functionality of Your Site with Plugins

Want to add an event calendar, video gallery, Twitter Feed, Facebook Fan Box, and more to your site? WordPress makes this possible with plugins, most of which are free or very reasonably priced.

9. Your Site Can Grow as Your Business Grows

WordPress sites are very scalable. You can have hundreds of thousands of pages or blog posts on your site and the performance of the site will not be compromised in the least.

10. Have Multiple Users

As an administrator of a WordPress site, you can set-up multiple users for the website and assign access levels and capabilities to each user.

8 Web Design Mistakes Small Business Should Avoid

aab design

“ai chi wa wa, I didn’t know that!”

Small Business need good website to grow their business. As a small business owner you are depending on your website to drive customers for your business. Business owners become serious and more consider about their website.  It’s not always easy to drive visitors to your business. Some web design mistakes occur more frequently than you may think. If you avoid those mistakes you can drive customers for your website. In this post I have listed some mistakes which you can avoid for long run.

Ignore Mobile Optimization

In the recent research revealed that 80% of the smart phones users prefer to access internet from their mobile. More over Google ignore the websites which is not mobile compatibility. So you can’t close your eyes on the mobile compatibility. Mobile optimization is not an expensive or unmanageable operation. There are web designers out there who know the tools to make sure your website is accessible from any device.

Insignificant Graphics

Using more images in your website may be fun for you. But please note it will slow down your website speed. Website. Website loading speed also playing important role when you design your website. For mobile make sure your images are well optimized for the devices.

Poor Font

When you use a font for your website you have to select proper font which has the good readability. The size and type of font is probably one of the most under-stressed aspects of a website. Fonts less than 12pt have been regarded as too small to read comfortably.  Font is playing big role to keep the visitors read your content.

Poor Focus and Implementation of SEO

SEO may sound like old chapter to you, but how much attention have you been paying to it? As you design your website, it is important to have SEO in mind, right from the start. A website that looks great but cannot be found is as good as dead. No one will listen to you if you don’t talk loud enough to capture their attention. So SEO is inevitable.

Broken Links

Customers are not happy to see the 404 error page often.  Nothing can be more annoying than clicking a page and find the link broken. Most of the visitors will not come again if they see broken link in the website. You must check your links on a regular basis to ensure that they are correctly lead the users to the right page.

No Calls-to-Action

“Research shows that you have just three seconds to communicate your message on a web page to visitors before they’ll click away,” Do you know what feature distinguished Facebook from other social media sites in the early race to domination? It was the “Like” button. Before Facebook introduced the “Like” button in 2009, users comment to show interaction with a post. The “Like” button is a simple call to action, but gets highly responsive results. Calls to action may be an anchored text link, an image button link with text, or a sentence including a quick link.

Consider Writing For Search Engines Instead Of Customers

Marketers think that their site can be positioned high in the search engines by stuffing more keywords on the web page. However, this is one of the ways to get blacklisted by Google. It is recommended to use a few keywords and write for your users. Create relevant, fresh and unique content, which is of great interest to your audience.

Out-of-Date Content

Always post updated content so users visit your website believe that you are in the business.
Providing website visitors with out-of-date content is one of the worst pitfalls for marketing your company image and value. Many websites avoid dating content at all. Others regularly date items such as blog posts, news releases, and more.

In Conclusion

For small business owners, a website is a crucial piece of their branding and marketing efforts. People visit your site for some specific reason. As you design your website, it is important to note that it is never about you when it comes to your business or your website. It’s always been about the customer. So, ensure that you provide them what they are looking for and use your site to promote your products & services.

9 tips on using landing pages for your social ads

landingpageimage

Landing pages are an inseparable part of the web browsing experience: we have all visited one at some point, whether or not we were conscious of the fact. Whenever you click on an online ad, register for a webinar, download a survey or a white paper, it’s likely that a landing page facilitated your experience. It’s not surprising, then, that these types of pages are an essential tool for a marketer, as they help move the potential lead down the sales funnel, converting a visitor into a customer.

What is a landing page?

In the realms of marketing and advertising, landing pages are the web pages which are accessible exclusively through a link or a button, and built to serve a specific objective. Social media landing pages, which we will focus on in this post, are commonly accessible by call-to-action buttons on paid social advertising, among other times of digital ads.

Elements of landing pages include a brief description of the offer, a call to action, and a preview of the product or service. In an ideal landing page, both the copy and the page design converge on a single purpose: to drive the customer to a specific action, such as downloading a white paper or registering for a webinar.

Almost as important as knowing the definition of a landing page is knowing what the landing page is not. A landing page should not just be the homepage of your website—there are too many buttons to click, options to choose from, and products and services offered. If the goal of your social ad is to increase traffic to your domain, consider other options and leave landing pages for what they do best—help acquire sales leads.

Landing pages help businesses increase conversions on the social media ads by honing in on the juicy details of the offer. This helps make the ads more effective, since most of them are limited by character and image size on the host social network—the landing page helps elaborate more on the value of the initially advertised offer. It also segments the value proposition into several easy-to-understand parts: for example, your social ad may contain a call-to-action button that simply says “Learn more,” which takes the user to a landing page with an added offer of a free trial. However, it’s important to be consistent with your offers across the advertisements and landing pages, even if the offer is segmented into two or three parts.

Landing pages also provide a better social advertising user experience: a user who noticed your ad while browsing their Facebook News Feed will have a dozen distractions—friends’ updates, photos, birthday and event notifications, etc. By taking the user to a dedicated page, you are removing all the extra noise and helping them focus exclusively on your offer.

Another advantage of using landing pages for social media ads is their increased capacity to capture leads. Major social media networks offer ad analytics for businesses, which include the user’s location, gender, and age group. But capturing the specifics, such as their name, occupation, and email address is a different story. This is where landing pages come in: most of them include a lead capture form that encourages users to fill out their first and last names, email address, company they work for, and their job title. Not only does this help marketers get a better picture of their potential customers, but it also presents an opportunity to contact these customers with similar offers in the future. However, be careful about how much you ask of your customers—the general consensus among conversion experts is that the more information you ask to disclose, the lower your conversion rate will be.

9 tips on using landing pages for your social ads

There are many elements to a landing page, and the best way to find out what helps your business achieve the best conversion rates is to test, test and test. Keep this in mind when you consider implementing any of the following tips—these practices have been effective for other businesses, but your product or service may call for something completely different. Don’t be afraid to trust your instinct, but make sure it’s always backed by conversion data.

1. Keep your copy consistent across ads and landing pages

The last thing you want to do is mislead a potential customer with inconsistent offers. Since the landing page works best as an extension of your advertising, make sure the copy is consistent in both the ad and the landing page. For example, if you’re drawing people in with a 2-for-1 offer in the social media ad, your landing page should give more details on how the customer can get the 2 items for the price of 1.

This social media ad popped up in my News Feed, and lead me to the shop’s homepage—but the offer is site-wide, which makes one of the few exceptions to the “no homepages as landing pages” rule.
landing pages for social media ads

2. Acknowledge the social media referral on the landing page

The way brands communicate with customers on social media is often different from any other communication line—there’s room to show off personality, have a sense of humour, and stray off the beaten path for different approaches to interaction. Thus, it’s advantageous for brands to address the referral source on the landing page, especially if you know the customer will be arriving there from a social network. This can be done by including the brand’s official Twitter handle or Facebook page in the body of the landing page copy, or simply open with a line that mentions the network.

This is especially helpful for brands involved in social media marketing or e-commerce, since they know their customers will also likely to look for profit from social channels. Take a look at the way Shopify frames their landing page originating from a Facebook ad:

Shopify’s Facebook ad
social media ad Shopify – examples of landing pages
Shopify’s landing page originating from the Facebook ad
In addition to directly addressing the way the Shopify app can be helpful for Facebook marketing, the landing page also contains clever design cues that tailor it to the network. The page’s colour palette is congruent with Facebook’s colour, and the header is designed to look similar to a Facebook search bar.

3. Place essential page elements above the fold

The central part of the landing page is the call to action button—whether you’re encouraging the customer to start a trial, download an asset, or sign up for a webinar, all the design and copy are designed with the single purpose of driving the user to click the button. In order to accomplish this, design your page to have all important elements “above the fold,” or in the portion of the page that is visible in a browser window when the page first loads. If you’re not sure if your landing page presents the information right away, look at the portion above the fold and ask the following questions, from a user’s perspective:

Where am I? What’s the purpose of this page?
Do I know what they’re offering?
Does this page explain what I have to do in order to get the offer?
The first question might seem a bit silly, but you’d be surprised at how many landing pages fail to identify their brand association. Whether it’s a logo, recognizable brand colours, or a headline that mentions your company, your ownership of the page should be explicit. Take a look at the ‘above the fold’ portion of the landing page for our latest white paper on Social Governments:

landing page for social media ads

Once the page first loads, I can see that this is a Hootsuite property, I know it’s about social media strategies for government bodies, I can glean that it offers a white paper from the little icon underneath the headline, and I can read the first couple of lines of its description. While I can’t see the call to action button, I see an arrow that shows me how I can access the advertised resource, and the top of the lead capture form. These directional cues are a great trick to draw the user’s eyes to the important elements, even if they end up below the fold.

4. Don’t reuse copy for multiple ads or landing pages

Since landing pages are such an important part of the lead conversion process, your company needs to pay special attention to the text on the page—which can be a challenge if you don’t have a dedicated copywriter. Thankfully, there are plenty of online resources that can help you optimize copy for the purposes of your landing page. Plus, if done right, your word count for landing page copy shouldn’t be that high anyway.

The main thing to remember is to tailor each landing page to the value prop of social media ads that refer to it, as well as the offer. Don’t reuse copy from other landing pages, even if the chances of the same customers seeing the copy twice are low. Not only does it appear lazy, but it can also hurt your conversion rates, especially if the copy is inconsistent with the offer from the social media ad.

5. Focus your landing page on the value add for the customer

The purpose of landing pages is to gather more leads, but all elements of the page need to focus solely on how the offer can help the visitor, not your business. As such, it’s important to highlight the value of the asset or the offer every step of the way—whether it’s done by cleaning up the copy and removing any jargon-heavy parts, using more possessive pronouns, or including customer testimony. James Scherer of Wishpond advises marketers to “[h]ome in on what the visitor gets, not what they should do.”

For example, if you are designing a CTA button for an offer concerning a cleaning product, encourage customers to “Clean up my kitchen!” instead of “Buy now.”

6. Optimize your call to action button

The CTA button is the crown jewel of your landing page: it’s what the user will be looking for when they first arrive on the page, because it’s what gets them the asset or offer promised in the social media ad. So make sure your CTA button is clearly visible, ideally above the fold, and the copy is consistent with the offer. For example, if the purpose of the landing page is to get users to download a white paper, your CTA button copy should have a variation of “Download now” or “Read now.”

When it comes to the landing page’s CTA buttons, the testing rule is more important than anywhere else on the page. Test the colours of the button, the font of the letters, the actual call to action text, and directional cues around the button itself. You might be surprised what gets you that three-digit spike in conversions—sometimes, it’s something as little as changing a possessive pronoun!

7. Consider trust badges

If the conditions of receiving an offer ask the user to disclose personal information, it’s important that the customer feels safe to do so. In landing page design, this means including trust badges and displaying them in a prominent spot. Ideally, you want these badges to be close to the call to action button, so the customer is reminded of your trustworthiness as a final motivation to consider your offer.

You can also mention your partners or clients that belong to an industry that may be similar to the visitor’s occupation (especially if you target your social advertising to a certain demographic), as a way to show off recommendations from professionals in that field.

landing page for social media ads

Be aware of the design of these badges: you want to follow brand standards of security brands, as well as your clients and partners, but avoid piling in too many logos or conflicting colours. This might actually take away from the overall impression of your landing page, and that’s the opposite of the effect you want to achieve.

8. Optimize your design assets

In the same vein as the text on the landing page, all design assets should show off your offer in the best light without being too excessive. Follow a simple colour palette, don’t add too many images or videos, and don’t overdo it on the directional cues. With landing pages, less is more—try to include as little extra elements as possible, but make sure all of them contribute to the main purpose of the landing page.

9. Test, test, test

Remember how I said that testing is the most effective strategy to increase conversion rates? Before you implement changes based on any of the tips above, run an A/B test to see if these factors actually influence conversion on your brand’s landing pages. At the very least, test two different versions of the landing page to see how the different changes affect your numbers. However, according to WordStream founder and CTO Larry Kim, if you want to break the top 10% of winning landing pages, the more pages you test, the better are your chances of drastically increasing conversion rates. Kim recommends testing ten (!) landing pages with different offers, messaging and flow to find the winning combination for your business. So, suffice to say, designing landing pages is not for the faint of heart—but if it helps you gather more high-quality leads, these efforts will surely pay off.

landing-page-optimization-2