Category Archives: Web Design

Should You Know About Design Trends In February 2017

An interesting visual presence above the scroll is the first impression a user gets of a website. Whether that user continues to click can depend on a number of things, including imagery, readability and overall interest in the content.
This month we are looking at three trends that make a distinct first impression—dark color overlays on images, brutalism and hollow lettering styles. Here’s what’s trending in design this month:

1) DARK OVERLAY ON IMAGES
It doesn’t matter if the hero image is still or moving, a dark color overlay can help even colors in a way that makes it easier to add text and other elements to a layer on top of the image. While this might sound like a shortcut at first, there’s a lot of value in this technique.

The primary reason to opt for a color overlay is to enhance readability. Most images contain light and dark color variances, making it a challenge to add lettering that is readable on every device. Even if there’s a perfect placement for desktop wide screens, the same image and text combination may render undecipherable on a mobile screen.

That’s where a color overlay helps. The semitransparent wash of color over an image or video should amp up the contrast. Then white or light-colored lettering has a place and will remain readable.
Dark color overlays are visually interesting for other reasons as well. Don’t get stuck in the trap that dark means black or gray. A dark overlay can be any color, such as the green used by Internetum, below. A fun or unusual color choice can help draw users into the design.

A dark overlay can do one more thing: it can help camouflage an image or video that you don’t want to be at the forefront of the design. This could be because the image is a little old, a little soft in terms of composition or just one that falls a little flat. A color overlay can change the mood of the image, make it a little less prominent and help the design focus more on other content, such as text, calls to action buttons or other graphic elements.
Overlays can be really dark, such as Digital Werk or can provide a subtle darkening in the manner of Lytton Living. You know you have the right balance when you can still see the image and all layered elements are easy to read.
2. BRUTALISM
Ugly. Harsh. Sharp. Busy.
These are just a few of the words that some have used to describe the brutalism website design trend. But just because a designer experiments with brutalism does not mean the design is a hot mess. It’s quite the opposite.
This style employs a different style and sensibility that includes things you see and things you can’t. Ben McNicholl described it this way in a post for Envato: “’Brutalism’ comes from the French word for ‘raw,’ so keep that in mind when you’re writing your code.

“A website doesn’t have to be a horror show of unordered images and clashing font colors; the way the code has been written is also symbolic of the style. Embedded CSS, untabbed code, HTML tables, the list goes on.”
There are enough examples of brutalism that there’s a whole website gallery devoted to these designs. In the introduction, the website refers to brutalism in this way: “In its ruggedness and lack of concern to look comfortable or easy, brutalism can be seen as a reaction by a younger generation to the lightness, optimism and frivolity of today’s web design.”

What’s particularly interesting about brutalism is that the design looks so different from all the flat and minimal styles that have been so prevalent. If you come across one of these designs, you can’t help but stop, look and explore. Whether you think it is beautiful or ugly or something in between, that’s the ultimate goal of any website design.
3. HOLLOW LETTERING
Letters with interesting fills are beginning to pop up all over the place. What’s interesting about this trend is that it has two distinctly different looks:
Hollow lettering over an image or colored background, such as C&C Coffee.
Lettering filled with an image on a plain background, such as The London Loom, with an alternative version where you can almost see the image with a background with subtle transparency, such as My Mother Before Me.
While this trend has a lot of visual impact and is a lot of fun, it can be somewhat difficult to execute.

When it comes to hollow lettering over a photo, there aren’t always that many typeface options to choose from and designers can get stuck using the same few fonts. This is not an ideal situation for web projects at all. There’s more flexibility for non-web projects where you don’t have to worry about font integration and rendering.
When it comes to filled lettering, the trick to making it work is that the images inside letters need to be discernable. If users can’t tell what the image is, then the design won’t be effective. To help, most designers opt for thick block letters here so there is more room for images to show through.
Images are often more abstract, or textiles or landscapes because the human brain tends to fill in the blanks of the image and it still works for them. It’s much more difficult to use images with faces or objects that you need to see in a certain way because they have to be positioned perfectly within characters.
Despite being somewhat challenging, both lettering styles can be visually interesting and fun to create.

Learn More About 6 CSS Tools

CSS3 gives designers more control over page layout and the behavior of different page elements. With its new coding options, CSS3 now has the capability to create image effects with code, giving more control over the look and feel of layouts. These effects—which include gradients, text and box shadows and border-radius, for rounded corners on boxes—let you create image effects on the fly, without building each effect using image-creation programs. It’s also worth noting that CSS3 is backwards compatible and will work with pages designed with CSS2.
Cascading Style Sheets are an essential element of Web pages, since they control page layout, fonts, positioning and so much more. While CSS does offer a great deal of page control, some aspects can be cumbersome. This in part is why CSS is going through another revision, currently version CSS3.

Here are six programs that will make your life easier when designing pages with CSS. Some will help you accomplish a single CSS programming task, while others are more robust and will help you go a long way toward building a fully functioning small business website.

Adobe Dreamweaver CS6

When working with CSS—and, in fact, when doing all types of Web design—the program of choice for many is Adobe Dreamweaver CS6.

One particularly useful feature is Fluid Grid Layouts (shown below), which is a must for creating multiple layouts for desktop, tablet and mobile versions of a site at the same time. Note that the document type defaults to HTML5. As a result, Dreamweaver CS6 lets you build a mobile site quickly, then output the layout using the mobile development framework PhoneGap.

There is also improved support for the HTML5-based user interface system jQuery Mobile.

Adobe Dreamweaver Mobile
Additional Dreamweaver CS6 features include an updated Multiscreen Preview panel, which lets you see how HTML5 content renders, as well as integration with the Adobe Business Catalyst website hosting platform and a wider range of Web fonts that you can incorporate into your projects.

Adobe offers several pricing models based on its Creative Cloud package, which offers software components to businesses beginning at $19.95 per month.

TopStyle 5

The HTML5 and CSS3 editor TopStyle 5 includes several helpful features:

While CSS3 offers a wide range of possibilities, it doesn’t display properly in all browsers. Plus, since it hasn’t reached the final release stage, you need to use CSS vendor prefixes to make sure there aren’t any conflicts among browsers. There are many settings, though, and it’s difficult to remember them. Luckily, TopStyle 5 ensures cross-browser compatibility through its Prefixr, which adds those vendor prefixes to your code.
The iWebKit 5 framework lets you create website or app compatible with the iPhone, iPod Touch and iPad.
Image Maps let you create “hotspots” that, when clicked, take the user to another Web page.
Finally, the CSS Gradient Generator (shown below) lets you create vertical, horizontal and diagonal gradients with pure CSS3, without having to create images. The Reverse button will reverse the gradient—from top to bottom, for example, to bottom to top. Note that you can see the code in a preview box at the bottom of the dialog box.
TopStyle 5 CSS Gradient Generator
TopStyle 5 is available as a single-user download for $79.95. Existing Topstyle 4 users can upgrade for $29.95.

Rapid CSS Editor

The Rapid CSS Editor lets you write website code manually or use a wizard. When it comes to creating CSS or HTML layouts, using the wizard is a snap, and it includes tutorials for the CSS beginner. Choose a font, font size and link color, then click “OK” and you’ll get the CSS code shown at the right.

The New Form Template option, meanwhile, lets you choose from several pre-defined layouts or create and save your own. As you create a new template, as seen below, it’s easy to preview the results.

Rapid CSS Editor New From Template

The open source Firebug for Firefox add-on editor lets you inspect the code on a Web page without making any changes to that code. You can experiment with turning items off or adding code, for example, then copy your settings for use with other projects. Among other things, Firebug offers a great way to learn HTML code and use non-destructive editing to change the style and layout of a page.

Ads by Kiosked
Let’s say you’ve built a layout, but you’re not satisfied with how it looks in the browser. To see what’s going on, click on the “Inspect” button, then hover your mouse over different elements on your page. When you do this, that section will open in Firebug and you’ll see what’s going on with your code.

Additional Firebug features include the capability to use a JavaScript debugger and a robust set of extensions that add more power to the program.

One task that can eat up a lot of time when building a new site is menu creation. To address this, CSS Menu 3.3 lets you create both horizontal and vertical navigations.

As you’ll see when you look at the default interface for CSS3 Menu 3.3, everything you need is on this one screen. This makes the program simple to use.

CSS3 Menu Interface
At the top left are the controls for opening, saving, publishing adding and subtracting menu items. Directly below that is the menu where you can choose to create either a horizontal or vertical menu, both complete with flyouts and multiple levels. Below the menu section, you’ll find the item properties that let you to set the text, link, target and alt text, as well as add an icon to your menu items if you wish.

At the top right, meanwhile, are the templates and icons section. Templates give you horizontal and vertical options for building menus, while the icons tab gives you various icons to display alongside menu items.

Finally, at the bottom right are the font, color, hover and box controls. These give you a lot of flexibility for styling the menu and the text. For example, you can choose from up to 15 different fonts, including different fonts for the main menu and sub-menu.

CSS Menu 3.3 has two pricing models. A single website license for both Windows and Mac users is $59, while and an unlimited website license is $79.

CSS3 Button Generator

Another time-consuming task when building a website is creating buttons. The Web-based CSS3 Button Generator offers you a solution by letting you create custom buttons for your layouts. (Be aware, though, that these buttons will work only with browsers that support CSS3; otherwise, the buttons might not render correctly.)

The CSS3 Button Generator consists of several sections: Font/Text, Box, Border, Background, Hover and CSS Code. When you visit this site you’ll see a button in place at the top of the screen; meanwhile, several settings are already enabled.

When setting the font, you’ll encounter some limitations, as your only choices are Arial, Georgia and Courier New. Also, there aren’t any controls such as underline, left, right, center, italic or bold, though you can control the position of the text by adjusting the box properties.

Tips To Optimise Image For Website

As WordPress web designers, one of the biggest challenges we see when handing over a new website to our clients is getting them to understand how to optimise their images for their website or blog. Below is a step by step video tutorial that demonstrates how to optimise your images so you can work them into your new content without compromising page load time or server space.

SUITABLE IMAGE EDITING PROGRAMS
The most commonly used and probably the best programs to use for saving your images for your website are

1 – Photoshop: You no longer have to pay a high price tag for this program anymore as it’s available for a reasonable monthly subscription fee and you can download it to more than once computer at time. It’s compatible with Mac and PC.

2 – Gimp: This is a widely used open source program which is a fantastic for editing images and optimising images for the web, you will also need to install the save for web plugin

Easy Steps to Add Social Media to Web Design

Many companies think of their Website as being the center of their online brand’s universe. But more and more consumers use social media sites as a starting point for accessing information about products and promotions, gathering customer feedback, voicing opinions and seeking customer service,” he says.

Should you ditch your Website? Not necessarily. But if you want your Web or ecommerce site to truly engage and convert visitors, you should take some lessons from–if not fully embrace–the popular social media sites.

Following are six simple ways to incorporate social media into your Web design and strategy.

1. Let Customers Know What Social Media Sites You’re On

“Make sure visitors [to your Website] are able to see the social networks you are on and can socially share your products and content,” says Erica Tevis, the owner of LittleThingsFavors.com, an online wedding ecommerce site, and LittleThingsBaby.com.

As for where to place social media icons (for Facebook, Twitter, Google+, Pinterest, YouTube, etc.), “a good rule of thumb is that the more visible your social buttons are, the more users will interact with them,” says Jessie Jenkins, social media and content specialist at Thrive Internet Marketing.

“‘Follow’ icons should be included within the header/footer of your Website, preferably every page, as your social media profiles are an important source of information to users and an easy way to stay connected.” Similarly, Jenkins says, include “‘share’ and ‘like’ icons on every blog post, as well as any Web pages that possess valuable, share-worthy information.”

Also, include a call to action. “Ask your Web visitors to ‘like’ your Facebook page, ‘follow’ your brand on Twitter, or ‘Join the discussion’ on LinkedIn,” says Alessandra Ceresa, director of Marketing and Social Network Management at GreenRope, a developer of business marketing software. Why? “Everyone has social icons on their Websites these days,” she says. But people are more inclined to click on them if you tell them to. In addition, it’s important to “design your social media icons to match the style and feel of your Website. These details catch the eye of the viewer, making it more likely that they will click on your social links.”

2. Allow Social Logins to Make It Easier to Connect With You

With social logins, “now sites don’t have to set up their own individual login unless they want to, but they can have their visitors login with a Facebook or Twitter account,” says John Roa, the CEO of ÄKTA, a product design studio specializing in user experience. “This allows sites to create an internal community–and can be a great opportunity for organizations to share specialized content and connect with their users.”

Moreover, giving people “the option to register/login via Facebook, Twitter, etc. instead of filling out forms shortens the registration process, which tends to lead to an increase in the conversation rate for user registrations,” says Adam Kirkwood, designer/developer, Viralheat, a social media management, publishing and engagement service.

3. Make Your Web Design Social Media Friendly

“Companies and organizations should design Websites, from code to content to commerce, in ways that complement the social media user experience, and vice versa,” says Dino Baskovic, a digital marketing consultant.

For example, on many homepages, “static content has largely been replaced with variable content that feeds from various sources, such as social media feeds, blog feeds, category driven areas of the site, news feeds, etc.,” notes Brian Compton, creative director, Lewis PR. “As a result, homepage layouts–such as this one for Google Ventures–have changed to include somewhat modular panels that can house any given type of variable (feed) content.”

Adds David Carrillo, manager, Earned Media, The Search Agency: “Implementing Facebook Open Graph and Twitter cards on a Website is the best way to control the presentation of your Website on social networks. And it’s a lot easier to implement from the beginning than to have to go back once the site is already built out.”

4. Make Content Shareable

“What good is it if a consumer or prospect finds something they like but it’s too difficult to ‘like’ it or ‘tweet’ it [or ‘pin’ it] right from that page?” asks Daniel K. Lobring, senior director of Public Relations at rEvolution, a sports marketing and media agency. “Embedding the ability to share on all pages of content is now essential.”

social media share buttons
“Your product and content pages should have social sharing buttons right by the item picture, making it easier for your customers to instantly share your items,” says Tevis.

5. Incorporate Facebook Reviews Into Your Website.

To increase conversion rates on its Websites, Costa Rican Vacations & Panama Luxury Vacations integrated Facebook customer reviews.

“We created a ‘Testimonials’ tab on Facebook and asked customers after completing our survey if they’d be willing to share their feedback on Facebook,” says Casey Halloran, the cofounder and chief marketing officer. “It worked way better than we’d planned. We received 100 testimonials within four months.”

The only problem: “We got a few negative comments.” But even that, Halloran says, was not a bad thing as it helped the company improve its customer service, “which created more positive feedback, which improved our Website conversion and boosted sales.”

6. Embed YouTube Videos When Appropriate

“Many pages with quality YouTube videos rank better in search engines, especially if there are more video views,” says Brian Coughlin, an SEO specialist at OpticsPlanet.com. “Videos also increase a visitor’s time on page and improve conversion rates.”

The bottom line regarding Web design and social media: “It no longer makes sense to create a Website if it’s not going to be integrated [with your] social networks,” says Marko Z. Muellner, vice president of Marketing, ShopIgniter. “Not only do you increase the challenge of driving awareness and traffic [when you ignore social media], you eliminate the potential for sharing and earned amplification.

“Website designers have become great strategic anthropologists, understanding how and why people use their sites while keeping focused on business needs,” he says. “Now they must understand how their target audiences use social media so that they can incorporate liking, sharing, commenting, pinning, etc. in new ways that meet expectations and surprise and delight.”

Some Reasons Should Update The WordPress

You know the story, you’ve spent time and money to get your website launched, it’s been a long road and now that it’s up you just want to focus on adding your content to get your business off the ground. However after a while when you login you noticed that pesky little ‘update’ notification. You decide to ignore it and hopes it will go away.

EYES WIDE OPEN
Unfortunately that pesky little notification is vital to your business. It lets you know that the security and performance of your website will be compromised if the update is ignored. Without regular updates, just like your computer, your site runs the risk of being attacked by viruses, being taken offline by hackers or not working properly.

Updates are also very important for your Google ranking. If your website goes down due to hackers or malware, your website can quickly lose it’s ranking and all that search engine optimisation goes out the window. Running regular updates also helps you have a better experience managing your site and ensures your site stays secure.

SHOULD I RUN THE UPDATES MYSELF?
The answer is NO…. running updates is tricky so it’s best to leave it to the professionals. If you try to update yourself, the site can crash or vital information get lost which without a backup can cause many tears of frustration.

Stick to building your business and let us do the dirty work. We’re experienced WordPress developers and can manage your updates for you, and you won’t even know they’re running. We offer yearly maintenance plans that include a range of options including regular backups, security scans, WordPress and plugin updates.

I’LL LEAVE THE UPDATES UNTIL SOMETHING GOES WRONG
Um….sure you can do that, but when something goes wrong, chances are you won’t have a backup and imagine losing those countless hours of work, plus the money you’ve invested. Often the site starts misbehaving when you most need it, say during an important marketing campaign, pitch or when you’re just launching a new product. Ensuring regular updates are run minimises the chances of big crashes, plus we always backup your site so can restore it if there’s any issues.

WHAT DOES OUR MAINTENANCE MEAN TO YOU?

IT KEEPS YOUR SITE SAFE AND SECURE
Your website runs on software, and just like any software, security vulnerabilities can emerge so WordPress puts out security ‘patches’ that fix known vulnerabilities. All the updates we run include these patches so your site can be 99% sure to be protected and up online for your business. We also run regular security scans to monitor your site to pick up any suspicious activity. Lately there have been spates of brute force attacks. Our scans let us know in real time if there’s suspicious activity so we can do something about it straight away.

ENSURE GOOD PERFORMANCE
It’s the way of the digital world, when things age they stop working properly, and this is the same for your website. Keeping WordPress updated means that things continue to work well and you benefit from the newer more fandangled features included in later versions of WordPress and other plugins.

REGULAR BACKUPS
Last but not least, our maintenance means regular backups so that you can be sure regular copies of your site are stored in case anything does go wrong.

Tips To Write A Killer Web Design Brief

Are you looking to embark on a web design project? Make sure you nail the design brief upfront, and cover off any important design requirements before the designer starts work.

A web design brief is a document that guides the entire web design process. It should be as comprehensive and detailed as possible, and serve as a common point of reference for all parties involved. Clearly communicating your requirements is critical to getting a website you love. It will help the designer understand your website vision, quote accurately, and avoid miscommunication and costly re-iterations.

ESSENTIAL COMPONENTS OF A WEB DESIGN BRIEF

1. YOUR BUSINESS
Give the designer an understanding of who you are, what your business does, where you are heading, and how your brand should be portrayed.

What do you do?
What are your products and services?
How long you have been around?
What is the size of your business?
What is your vision?
Where do you want to be in 3 – 5 years time?
How do you want to be perceived in the marketplace?
Who are your ideal customers?
Who are your top 3 competitors?

2. YOUR WEBSITE
Explain what drove the need for a new website, and describe what a successful website looks like to you.

A. Why do you need a new website?
B. What do you like about your old website?
C. What don’t you like about your old website?
D. Describe your ideal website
E. How many sections will it have & what are they?
F. What features and functions do you require (examples below)

Search box
Sliders
Social media
Google maps
Blog
Ecommerce
Gallery
Forms
Newsletters
Membership
Integrations to existing systems
How will you measure the success of the website?

3. YOUR USERS
Provide details about who your website users are, so that the design, features and functionality can be tailored accordingly.

A. Who will be using the website?

Public, trade, staff
Age group
Language requirements
Country/ localisation requirements
Male/ female
B. Why are they visiting your website?

Research
Information
Entertainment
News
Look up pricing
Download
Make a purchase
Get contact details
C. Who will be updating the website?
4. YOUR DESIGN
Describe how your new website should look, the impression you want to give, and any brand and style guidelines that need to be met.

A. Values to communicate with your design – e.g.

Masculine vs feminine
Traditional vs contemporary
Professional vs personal
Serious vs friendly
Strong vs soft
Exclusive vs inclusive
B. Websites you like & specifics about what you like
C. Your brand colours, fonts, icons & any style guidelines
D. Is a rebrand required?
E. Example images or materials

5. YOUR BUDGET & TIMELINE
Providing an indication of budget and timeframes will help your web designer manage your expectations of what is realistically achievable.

– How much do you have to spend?
– When are you looking to get started?
– Do you have a hard deadline to be live by?

Communication is a vital component of all projects – and in web design, it all starts with a detailed design brief. Taking the time to document your website requirements will ensure that you have a common brief for obtaining quotes, and once you get started with the project it will serve as the point of reference for desired outcomes and deliverables.

Design Also About Solving Business Problems

We love designing. It’s true, we love spending hours in front of Photoshop, and nights coding to our heart’s content. But design to us isn’t just about making things look & work great, it’s about finding a way to solve problems.

As designers our job is to ask questions, to uncover the hidden issues that prevent companies and organisations from reaching their full potential. So when we meet with clients to discuss a new project, we’re not just looking for a list of requirements or features, what we’re really looking for are their challenges, their achilles heel. We want to know why things aren’t working, and what is preventing these organisations from utilising the power of being online.

Good designers want to know what the roadblocks to potential are, so we can reach ours, which is to design solutions. This is where we can do our best work.

HOW DESIGN SOLUTIONS HELPS BUSINESS
When we design something, we’re not just designing a new interface, a website or a brand identity, we’re designing a way to solve an existing problem. This problem could be old, new, or one that our client didn’t even know they had yet.

Regardless, here are some common problems that we wrestle with regularly:

1. Make a digital identity speak better to diverse audiences

Some of the biggest issues many organisations face is that their audience segmentation is diverse and their digital strategy or website only targets one segment at the expense of the others.

For example, many of our non profit clients only target their public consumers/customers, but also need to target funding bodies, key stakeholders and partners/sponsors for continual financial support and for the strategic growth of the company. With competing needs, the message for each of these audiences can become diluted and risk excluding some audiences who are vital to the sustainability of the company.

In these situations we carefully research and ask questions to uncover all the different goals for each of the different users and then match these to tangible outcomes for the digital strategy. To refine this, our process often involves mapping user personas and workflows to ensure that the new website design addresses the needs of all the users.

2. Resolving issues on an existing site so systems work properly

This is a huge priority for many of our clients, often their sites are outdated, or running old versions of software so the site’s performance is suboptimal which has a huge impact on usability and negatively effects brand perception amongst their users.

We very carefully identify what these performance issues are and look for strategies to resolve these. For example, one of our client’s had huge issues with their membership site’s load time which was impacting on conversion, so we ran diagnostics and provided recommendations around site software, hosting and coding best practice to vastly improve speed and performance which were implemented as part of a redesign process.

3. Moving common tasks online to minimise administration time for teams

We pay attention to how our clients are currently using their website, and look for gaps so they can utilise it better. With technology pushing ahead at lighting speed, we can often recommend new and easier ways for administration tasks to be automated.

Online systems and website integrations such as:

website ecommerce & invoicing integration for Xero or Quickbooks
automate the generation of email campaigns via RSS using Mailchimp, Campaign Monitor or AWeber
website forms to CRM’s for lead tracking such as Zoho, Base CRM or Salesforce
website forms to support ticketing systems such as Zendesk or Bugheard
creating online forums so teams can communicate with their customers better
setting up online resource repositories so customers can be directed to this, reducing admin time for staff

4. Find new types of revenue online to help diversify income streams

Some of our clients, particularly those who are from Not for Profit organisations, want to diversify their revenue so they can be less dependant on funding, or sponsors and have more self generated income. We work with them to find alternative ways to generate income from their website and find new revenue streams through:

online stores selling educational resources or service packages
content marketing
automatic advertising systems to gain revenue through the website
online donation systems for special programs
membership systems that require subscriptions to gain access to certain areas of the site

LISTENING IS KEY TO IDEATING A SOLUTION
Designing solutions takes time and the most important part of this process is listening….yes….good old fashioned listening. This is key, because sometimes our client won’t even know exactly what the problem is, they may feel it intuitively but not quite understand the root of it. So we have to listen, to read between the lines to get to the core of the issues.

Before we even pick up a drawing pen, write code or start designing mockups, we set aside time to meet and listen to our clients…. we listen to what is being said, the way it’s said (tones and non verbals) and also listen to what hasn’t been said. The space between. Here we often discover more of the story and really uncover some of the underlying issues that motivate our clients to make contact with us in the first place.

Often we pick up cues that the issues are not just about a broken website, but find that there has been broken trust between the organisation and their previous web designers, leaving them cynical about a positive outcome. Or that there has been a culture of fear around using digital technology in a company and opinions and policies are very polarised.

Therefore our solutions need to consider deeper business issues around staff cohesion, staff morale and education as well as address their target users needs.

TAKING TIME TO THINK IS OUR JOB
Design thinking requires space to think, to research and consider options. Many tech companies big and small, including LinkedIn and Facebook allow staff 20% of their time to explore and experiment. Spending time exploring helps the brain discover ideas that are less obvious during the noise and clutter of the everyday, and can lead to innovation.

This informs much of our internal philosophy. The first part of any of our projects is spent collecting information from our clients, their users/stakeholders, the industry and competitors to help us fully understand the breadth of the issues so we can design a solution that works best. Here we tinker, test and explore. We then distill this information into strategy which builds the substance and direction for the project, so we can address all the issues and design the best possible solution.

Know More About User Experience

User Experience Design (UXD or UED or XD) is the process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product.

So what exactly leads us to a successful user experience? And why is it so important for your website? Let’s explore the critical components.

User Experience Design

1. VISUAL DESIGN
The visuals not only represent your brand, or the look and feel of your online space, they are extremely important when it comes to determining the user experience of your website. Beyond visuals, such as colours, visuals and logos, there’s a deeper element which involves effective visual communication. Your graphic treatment must help you drive business, and must of course, encourage ease of use, and clicking in all the right places. A User Experience Designer has the edge on a Graphic Designer in this department. Although they may be somewhat similar, there are some definitive differences in skill-set. Engaging with a User Experience Designer will give you the confidence that your designer really understands the needs of your users, your business and also the technology that is being used for your site (or app).

2. INFORMATION ARCHITECTURE
The layout of your content is key to a smooth user experience. Create a flow for which you would ideally like your visitors to take, by mapping out a journey for them. Links, find-ability and usability of your site all come into play here. Don’t confuse people or take them to random places, maintain consistency throughout your site map and focus on the features and information which are important to your user.

3. CONTENT STRATEGY & STRUCTURE
Not the same as architecture, structure focuses on the all important clarity of your messaging. Make sure your content is clear from the get go i.e. what you do, what you are offering, and how people can access your service, or purchase your product. Adapt to your market with the right tone, and research, research, research! Be mindful of what works for you when you visit a site. You will notice the difference between a site with structure, to one that fights with its own messaging. Read our post about writing good content for your website.

4. SEARCH-ABILITY & FUNCTIONALITY
It’s not exactly shocking, but impatient users do exist, and if you don’t have what they are looking for easily either on your homepage or in your navigation, make sure you have an easy to find search option. This means you need to do the background work to ensure that all of your items are infact searchable, but it will be worth it to engage those quick clickers! Functionality is key – if your site isn’t functioning optimally, you’re likely to lose clients and sales.

5. CUSTOMER JOURNEY MAPPING & INTERACTION
Mapping your customer’s journey – this process really allows you to explore the design interactivity, as opposed to a graphic specialist who will be looking at the look and feel. Interactivity should be assessed for usability of the design, and will allow you to pin point any road blocks or issues that a user may face on your site – like the nasty ones that may steer them away. This also helps you design your website for optimum conversion. By implementing smooth transitions and a clearly directed flow from page to page, design blueprints (created by your UX designer) will help you understand exactly how your users are using your website – and how to improve the experience further.

Want to know more about Customer Journey Mapping? Smashing magazine do a great job of summarising it here.

WHAT ABOUT SEO & UX?
Remember our recent blog on SEO? We touched on “chasing the algorithm” pitfalls and writing for your clients and not Google. This stands strong when it comes to the UX, as we know Google measures your site quality. Another hot tip, is that Google can understand page layout, and may penalise you for pages with very light content. Most recently, Google has been looking into user engagement data, and on page content analysis.

Should Know About 5 Psychology Rules

Experience-based design…if that’s how you define your work as a designer, it might be a good time to reevaluate your approach.
Now, there’s nothing wrong with being an experienced designer; your experience could be an asset! However, it is essential to realize that there are many moving parts in a working design. For example, do you know that you shouldn’t just drastically redesign a website? Or that the color that works on the exact same website (featuring the same thing and in the same niche) will differ if the audience was predominantly male compared to if the audience was predominantly female?
There’s a psychological approach to web design—based on decades of studies and psychology experiments. Below are five psychology-backed UX tips for your next redesign:

1) WEBER’S LAW OF JUST NOTICEABLE DIFFERENCE
Anyone who’s used Facebook over the last 5 years knows that not much has changed in that time. Facebook is a mega corporation worth over $350 billion, so you might expect a lot to have changed in three years. Why is Facebook retaining every key element of its design? The answer to this same question explains why every major website—including Google, Twitter and Amazon, despite their large budgets—do not make drastic redesigns.

It is explained by Weber’s law of just noticeable difference, which states that the slightest change in things won’t result in a noticeable difference; if you’re looking at a bulb, for example, and the light dims or brightens just a bit, you’re unlikely to notice the change—if it brightens significantly, however, you will notice the change. In the same way, if you’re carrying a weight of 100kg, removing 1kg from it is unlikely to make much of a difference in the weight, you’re unlikely to notice it. If you were to remove 10kg from the 100kg weight, however, the difference in weight becomes instantly apparent.
Research shows that we dislike a massive change in existing structures and systems, even if those changes will benefit us, and there is ample evidence that show protests when major websites make massive changes and redesign.

Simply put, Weber’s law coupled with our natural averseness to change shows that the best way to approach a redesign is subtly; make your redesign slow and subtle, changing a little here and there gradually—in such a way that most people won’t even know you’re doing a redesign—until you’ve completely revamped the redesign. Not only will this ensure your design is well accepted by the majority, but a good portion of your audience would have gotten used to your redesign before it is completed and very few will complain.

2) UNDERSTAND THAT WE RESPOND TO COLOR DIFFERENTLY
While we often deeply trust our instinct and experience, it is another thing for them to stand science’s test. For example, do you know that the same design that works for an audience of male readers often won’t work for an audience of female readers—even if it’s for the same website selling the very same products?

One of the most important factors you should consider when redesigning a website is the audience. Are the audience predominantly male or female? This matters a great deal!
Research has found that people will form an opinion about things within 90 seconds, and that color influences up to 90 percent of the opinion people form. The color you use for your design alone can make it a failure or success.
That said, it is important to realize that men and women see colors differently. The graphics below show the colors both men and women like as well as the colors they dislike the most:

COLORS THEY LIKE
5-17-fav-colors
COLORS THEY DISLIKE
5-17-least-fav-colors
Image Credit: HelpScout
When doing your next redesign, consider the audience of the website that will be using the design. Are they primarily male or female? Let their gender influence the color you use.

3) THE SENSORY ADAPTATION PHENOMENON
Have you ever wondered about why you don’t feel your clothes or shoes? Ever wondered about why, even though you were initially irritated by it, you no longer notice your neighbor’s dog’s constant barking?

This is explained by a psychological phenomenon called “sensory adaptation.” It states that we tend to tune out stimulus if we get repeatedly exposed to it—initially, we find it annoying, but later we just don’t notice it.
Now, how does this relate to web design? It’s simple: you design a website and use the very same color scheme and button color for important parts that you want the user to take action on. Due to the fact that these essential parts blend in with the design color scheme, and that people have been seeing the same color all over your design, people are naturally wired to tune them out—they don’t see the key elements on your page, and you lose out on conversions.

When designing or redesigning a website, it is essential to make your CTAs stand out; if the whole design color scheme is blue, you must not use the color blue for the CTA or to highlight the most important action on the page. Most people believe the color red or orange is the most effective for boosting conversions; it isn’t. A color red button used on a page with red color scheme will convert awfully, but a color green button on the same page will convert much better.

Use something that stands out for essential elements; this way, it doesn’t activate people’s sensory adaptation, and your conversion doesn’t suffer.

4) TYPE: BIGGER IS BETTER!
When it comes to text, designers often obsess over look and appeal: “Wow, should I use a serif?” “That new font looks dope! Let me give it a shot!” Except that psychology shows that, when it comes to design, most of the things we designers give importance to are not what the end users really care about. Why we care about aesthetics and how appealing the latest typeface will make our design appear, the average user cares about basic things like usability.
In essence, the average user cares a lot more about font size than about font type. In fact, research has shown that people want type to be bigger and simpler, and that larger type elicits a strong emotional connection in readers.

In essence, people want simple, large type. Based on data from available research, experts advise not using a font-size lesser than 16px.

5) PERCEPTUAL SET

What you see will differ depending on your experiences; as with the image of the “vase or two faces,” if you’re an artist, especially if you just finished working on a vase, you’re likely to see a vase in the image. If you just left a gathering of lots of people, and if you’ve not seen a vase in months, you’re likely to see two faces.
This phenomenon is explained by the “perceptual set theory,” which explains our tendency to perceive information based on our expectations, existing information and experiences. In essence, people from different cultures are likely to perceive the very same thing differently.

The implication for web designers is that people have certain expectations of web design—some general and some based on certain industries. For example, most people have a certain expectation for where a site’s navigation bar will be (in the header), putting it elsewhere (in the footer, for example) will confuse a lot of users and lead to bad user experience. The same goes for every element of your site design.

It’s good to be innovative. When you’re going to be innovative, however, make sure you include clues to guide people about the new elements. Most importantly, test people’s response to the new elements and readily change anything people do not respond well to.

Simple ways effective UI design promotes

A user experience is something that every website offers to those who visit it. However, the experience will differ from website to website in a wide variety of ways. Some are easy to navigate, some are a joy to use, some are clunky but you can still plod your way to where you want to go, and some are so difficult to understand that you just hit the back arrow on your browser.

One of the biggest influences on user experience is the user interface—the actual design that users will interact with—there are several factors that make up an interface, such as how easy it is to navigate through a website or how easy it is to read content. Users will also form their opinions based on the website’s perceived value and usefulness. The better it helps them accomplish their goals, the more useful it will be perceived to be.

The emotions that users feel while using your website, will end up having an impact on the associated business. If users can easily find what they are looking for on the website and feel satisfied, they are more likely to purchase from it, meanwhile, if they feel frustrated or confused, it is quite likely they will move along and purchase from someone else that offers them a better user experience. Lackluster user experiences hold many businesses back from their full potential, leaving their websites underperforming, and wasting valuable advertising dollars when visitors are not converted into customers.
Below are 5 simple, but potent, ways in which clever user interface design promotes successful user experience:

1. IMPROVING PAGE LOAD SPEED
The page load speed of your website is an extremely important element of user experience. While designers often get caught up in trying to show off their visual design skills, the truth of the matter is that website visitors generally care more about page load speed than gaudy adornments.

According to a recent study by Kissmetrics, nearly half (47%) of all consumers expect a web page to load in 2 seconds or less; if your page takes longer than that to load, it is reducing the quality of the user experience. If your page takes more than three seconds to load, you will have, on average, 40% of visitors abandon your website; that will increase by 7% for each additional second it takes your website to load. A slow website translates into lost opportunities and lost sales.
Additionally, while slow load times cut down on the number of conversions your website generates, slow load times also work to reduce the number of opportunities your website will give rise to by having a negative impact on its search engine ranking. The effect is small, but you certainly want to do everything you can to improve your website’s search engine ranking.

To help keep your pages loading in under 3 seconds, try utilizing the following tips: first, opt for a simpler design style avoiding unnecessary items and flashy decorations (in A/B tests, simpler designs generally outperform ornate designs anyway); second, optimize your images in a graphics program, you don’t want to use html to resize them; third, avoid using too many plugins, they slow down the experience for site visitors; fourth, if your site is popular, consider utilizing a content delivery network to improve server response time.

2. LEVERAGING WHITE SPACE
White space is often overlooked but it is a very important part of effective user interface design. I am sure you have been in the same situation as most designers where clients view white space as empty space and rush to fill it, thinking white space is a waste. In fact, the opposite is the case; white space is one of the most important parts of a website.

If used properly, white space can dramatically improve the user experience of a website. White space helps make a user interface easy on the eye, which helps retain visitors and keeps them reading. It does this by making content more legible. The white space around website text and images helps people improve comprehension and creates a better user experience.

White space also helps improve the appearance of your website, giving it a nice, clean professional look. White space helps reduce confusion on the part of visitors as websites lacking in white space often look disorganized. You want to create a nice balanced look for your website using white space to separate different blocks of content.
White space is also effective to highlight something important such as your call to action. The proper use of white space in your design helps guide your visitors’ attention to key parts of your website and without it, visitors may overlook important items.
A wonderful example of this is the Chanel website. It is a beautiful, clean site that uses white space well to draw your attention to key areas of the site.
chanel

3. CUTTING DOWN THE AMOUNT OF TEXT
Website visitors will generally just skim your web pages looking for important keywords, significant headings, and scannable lists. Visitors are typically in a hurry to find the information they’re looking for and will skip over content that appears to be inconvenient or irrelevant. Because of this, you should understand that visitors will most likely not read your content if it is not formatted to this pattern of behavior. Avoid creating long blocks of text that appear uninviting to users wanting to quickly scan your website. When it comes to the modern web, less is definitely more.

You also want to avoid over-indulging in promotional writing, as customers will quickly see through fluff and stop reading. Having the correct tone is important. According to the Nielsen Norman Group, objective copywriting in a concise, scannable style results in 124% better usability.

When and where it is possible, utilize visuals as people tend to be better engaged by visual content. Utilize icons, attention grabbing images, video clips and infographics to help get your message across rather than relying on large blocks of text.
Bellroy illustrates this concept well on their website as they keep text down to a minimum amount and showcase their products with big, easy to view images.
bellroy

4. REDUCING VISUAL CLUTTER
Treat your website visitors’ attention as a precious resource. As visitors arrive at your website, remember that they will be quickly scanning for pertinent information and not paying full attention to everything on the page. If you clutter up your user interface, it will overload website visitors with too much information, make your website seem complicated and reduce the quality of the user experience.

Start by removing items that are not essential. By getting rid of anything that isn’t necessary to the user completing their intended actions, you will reduce the clutter and improve visitors’ ability to focus on and comprehend essential information.
ETQ’s website shows how by eliminating clutter you are able to focus on the products themselves.
etq

5. PROVIDING A CLEAR CALL TO ACTION
You should have a clear goal for visitors who arrive at your website. You want this to be obvious to visitors and easy for them to complete. Perhaps you want visitors to make a purchase, request a quote, or just to call you, let them know what to do to keep them moving forward after landing on your website.

Your call to action is how you tell visitors what action they should take while on your website. We regularly see websites with no clear call to action and it is no surprise when we find out they are not performing the way their owners’ hope. Your call to action should stand out and make it easy for the visitors to take the desired action.

Before deciding on your website’s call to action it is best to understand your visitors’ reasons for coming to your website. Having a call to action that runs counter to visitors’ intentions will reduce its effectiveness. If visitors just want to make a purchase but you push them to ask for a quote it can cut down on the effectiveness of your call to action.

Dollar Shave Club’s buttons just beg to be pushed. Their website illustrates how clear calls to action can draw your attention and promote forward movement.