What is the Rule of Thirds?

The Rule of Thirds web design technique is used for creating pleasing aesthetics and balance in images. It basically says that placing items of interest on the “thirds” of an image is more pleasing to the eye than centering or more other symmetrical approaches. These thirds are created by dividing an image (or working space) into nine equal parts, with two equally spaced horizontal lines and two equally spaced vertical lines.

Like so:

Each line runs along a “third” of the image. Placing your most critical elements on these thirds (and especially where they intersect) will create a pleasing, balanced design. Though most often mentioned in photography (that is why the grid appears every time you use cropping tool in photo editors, like Photoshop or Luminar), the Rule of Thirds is used in everything from films and paintings to websites and posters—just about anything that desires a positive visual impact.

Using the Rule of Thirds Web Design

The Rule of Thirds web design principle is most often used to determine where the most important elements will sit on a page, where the negative space should be, and at what ratio your images should be set. If you’re already working with a grid design, so much the better. The Rule of Thirds will help you choose what dimensions each grid element should have. It can also be a factor in conversion optimization, as the more pleasing the experience for the viewer, the more likely they’ll stick around to actually read your calls to action.

Where to Place Important Elements

One of the first questions in a site layout is where to place your most important elements (i.e. site logo, calls to action, etc.). The answer is generally to place them where the viewer will look first. But where’s that? When using the Rule of Thirds web design, the answer’s pretty simple: on the intersections. Why? Well, the viewer’s eye path is not random—unless otherwise directed it travels a predictable route, starting at the upper left of an image (or website), moving down to the bottom left, moving onto the upper right and then ending at the bottom right. It just so happens that these “sweet spots” of a viewer’s gaze land right on the intersections of the lines in the Rule of Thirds grid. Here’s where the eyes land first:

This means that if you place your most important element on or near the upper-left grid point, you’ll be more likely to make sure your viewer sees it first.  Here’s an example:

Here, TechValidate chooses to put their important text close to the #1 spot, closely followed by a call to action near the #2 point. Remember, you don’t have to place things exactly on the points—just near them. This is especially true with responsive web design, as different mobile devices will change where things sit.

Determining Negative Space

If you’re opting for a clean, minimalist design, then the Rule of Thirds will not only help determine where to set your images, it can also help you decide where the negative space should be. Negative space is the space around and between the elements of a site, where there is no image, text, or distracting background. It’s a crucial design element for creating a high-readability factor and a pleasing user experience, allowing the mind to better put into context the images it sees.

In the image below, design firm Staak.co.uk chooses a sleek, minimalist design with plenty of negative space and a clear focus on its defining element:

Staak’s design ensures that the viewers’ eyes hit first and linger on their defining element. Remember, the eyes scan predictably when not otherwise directed. Here, they’ve been directed to the right-hand third of the screen. In the lower left-hand sweet spot, they have the link they want users to click on. Contrary, to popular “sweet spot” design, the upper left is negative space, but since Staak directs the eyes clearly to the right, it works just fine.

Here’s another from the Austin Children’s Shelter:

Here, the negative space is in the middle, and the Rule of Thirds is used to guide the placement of the image on the right and the text on the left, with the call to action near the bottom left “sweet spot.”

Here’s another example from the French site UZIK. Notice how the negative space on the right-hand side really draws the eyes to the sweet spot on the left-hand side.

Using the Rule of Thirds to Arrange Your Images

Another main use of the Rule of Thirds web design is determining how to space your images on the screen. Say you have a site that speaks predominantly through its images—how should you space them? Well, the Rule of Thirds would have you place them directly in thirds on the page. Build in Amsterdam, featured below, uses the Rule of Thirds both for their image placement and for their text:

While you don’t need to take the rule quite so literally as this, following it even roughly will help you find the best place to set your images.

The Golden Ratio

While the Rule of Thirds has been around roughly two hundred years, it’s based off an even older design element: The Golden Ratio. The root of countless mysteries, the Golden Ratio is a geometric ratio that has been heralded as a timeless blueprint for beautiful and effective proportionality. Also known as the Golden Mean, the Divine Proportion, the Golden Section, and Phi, the golden ratio is the visual representation of a + b over a = a over b = 1.61803….

First defined by Euclid as a simple matter of geometry around 300 BCE, the golden ratio has had centuries of mathematicians, scientists, philosophers, architects, and even mystics pondering and debating over its ubiquity and appeal. Phi enthusiasts claim the golden ratio has been used in everything from the construction of the Egyptian pyramids to the Mona Lisa, and since the Renaissance many artists have proportioned their work in accordance with the golden ratio, particularly in the form of the “golden rectangle” (a rectangle with a length roughly one and a half times its width).

How does it work in web design? Well, the Golden Ratio applies most strongly to rectangles, and let’s face it—from computer screen to our mobile phones—we live in a world of rectangles. And while the Golden Ratio can be a bit problematic to apply in its entirety to a website (you can’t change the ratio, and therefore you can’t compress or expand it to “make it fit”), it can show you the best places to set your important elements. It can be particularly helpful if your site has a lot of information, providing a guide as to where to place the most important elements.

Twitter and National Geographic are two of the bigger names that have used the Golden Ratio in their design.

Summing up Rule of Thirds Web Design Secrets

One thing note, is that you don’t have to use the entire formula of the Golden Ratio at any given point. You could just use sections of it. For example, if you’re wondering at what spacing to place two vertical columns, the Golden Ration has an easy template for that—the first two rectangles/squares.

The result is somewhat subtler than using the Rule of Thirds and yet in most cases, more pleasing to the eye. That being said, if using this form seems challenging to you, you can always default to the Rule of Thirds. The proportions will still yield eye-pleasing results. Whichever you choose, both techniques will provide invaluable direction in where to place your design elements for the best user experience. And as we know, a better user experience equals longer staying time and more conversions.

The post Rule of Thirds Web Design: Using Layout Secrets appeared first on DesignWebKit.

Today’s app users have roughly two million apps to choose from. With a list of options so long, and attention spans shorter than a child’s, it is hard to retain your users unless your app offers them an unmatched user experience. Aside from solving the user’s problem and giving them what they want, your app must also be very easy to use and understand. So minimizing cognitive load must be a top priority for UX designers. Here are 5 ways to make sure your app is easy to use, without sacrificing quality

How to Cognitive Overload

1. Stick to the Basic UX Design Conventions To Avoid Cognitive Overload

Predictable might mean boring in the world of movies, music or art, but in the world of UX design, it means ease of access. An ‘x’ means close, a backward arrow means go back, an envelope means messages and so on. The ‘go back’ functions usually sit on the left and the ‘move forward’ functions are on the right. Feels familiar?

There are some design patterns that have just cemented themselves into the human psyche so well that they seem like nature. Sure you want to break the rules and think out of the box but you also want to appeal to millions of users – users who have busy lives and too much work to do anyway. Your app shouldn’t be another ‘learning experience’ to them. They want a simple means to an end, a shortcut to get something done. So don’t reinvent the wheel and try to adhere to commonly accepted UX design conventions as much as possible.

2. Avoid Visual Clutter

Even if it looks great or augments your message, too much imagery and graphics can be a major distraction. Not only do they make the app sluggish but also add to the user’s cognitive load. That is why it is crucial to keep your interface clean. Don’t use too many flashy images, moving text and large graphics in UX design.Since mobile screens are small, use images very carefully.

• Few large and clear images are always better than many tiny unclear ones.
•  If you have clickable images, don’t mix them with plain images.
• Optimize images to adapt to different screen sizes.
• Use effective and easy scrolling methods. Avoid complicated carousels or filmstrips unless you really need them.
• Use the right font that is clear and legible across platforms and devices.

3. Minimize the User’s Work

Clicking and typing add to the amount of work a user needs to do, so do everything you can to minimize it.

• Use smart defaults and form autofill to minimize typing in forms.
• Auto-detect city and state from the zip code, when asking for address.
• Use placeholder text and examples to help users understand what to enter. This will help minimize errors.
• Use autocorrect to rectify simple errors.
• Keep forms short and ask only what you absolutely need. Eliminate any non-essential form fields.
• Minimize the amount of reading a user has to do. Avoid using large chunks of text for explanations. Use pictures, animations and video tutorials. Try to stay away from text tutorials.
  

  4. Help Users Make Choices

There’s a reason that successful people like Barack Obama and Mark Zuckerberg stick to a few limited choices of outfits for everyday clothing. Too many options confuse people and lead to decision fatigue. This is a paradox as it may seem like plenty of options is a good thing but in reality, it’s the other way round. So make sure your users don’t find themselves in a state of confusion.

• Use smart analytics to understand user behavior and present only the relevant choices to each user.
• Categorize options and use collapsible menus to make the interface look clean.

5. Understand How People Read Webpages

An eye-tracking study by the Nielsen Norman Group observed that users follow the F-Pattern when reading online. This means that users read the headline, do a quick downward scan and then read the sub-heading horizontally, before proceeding to quickly scan the remaining content vertically. This information points to a sweet spot in page design. You should put your best information in the areas that users look at the most, to grab their attention.

•  Use an informative, catchy, medium length headline.
• Use short sentences and quality sub-headings.
• Make paragraph openings attractive

Wrapping Up

The above 5 steps should serve as a guide to UX designers who want to keep their apps lean, mean and powerful. The idea is to make sure users can get from point A to point B with as little trouble as possible, so you don’t make your website design cognitive overload. Users shouldn’t have to read through a user manual. The UX must be as self explanatory as possible because your users have limited attention spans and let’s face it, limited time. They will simply uninstall an app that is difficult to use, and switch to a simpler alternative. You can successfully avoid that by keeping your UX design simple, light and engaging. These tips will help you cut out cognitive load and keep your users happy.

The post Cognitive Overload – Biggest Enemy of UX Design and How to Fight It appeared first on DesignWebKit.

WordPress is a very popular name on the World Wide Web. Launched on May 27, 2003, as a blogging platform, it has been developed a lot. Now, It is widely used by a large number of tech-savvy people and big brands for a number of purposes. More and more people are joining the WordPress 2017 bandwagon each passing day. With WordPress, anyone can easily create appealing and professional looking websites/blogs without editing any code or seeking the help of web developers. Today, in this article, we will discuss some essential facts about WordPress that will surprise you. Let’s get started.

1. WordPress Is Free for All – But Not Absolutely Free

It would consume a lot of money to get a custom CMS developed by professional web developers. Why waste your hard-earned money when the same thing is done with any user-friendly CMS at your choice? WordPress seems to be free and versatile content management system which you can download and use totally free of cost. Based on your specific needs, easily create all types of WordPress sites/blogs using themes and plugins & can customize them as per your needs.

However, while operating WordPress sites, you will have to pay for the domain, hosting, premium themes and plugins (if you choose) and customization & support that you get from professional WordPress development companies or individual developers.

2. WordPress 2017 Powers 27% Of All Websites On The Web

There are millions of websites on the World Wide Web. Several new websites go online every day. The use of WordPress is so rampant that now its powers around 27% of all websites available on the web. It shows the growing popularity of WordPress 2017 as well.

3. 50,313+ Plugins

WordPress plugins are one of the main reasons why people both tech-savvy or non-technical- use this CMS increasingly. With the help of WordPress plugins, you can easily add new features to your website and increase its functionalities to meet the growing needs of your audience.

Currently, there are approximately 50,313 plugins available on WordPress 2017 directory and their numbers are increasing rapidly. You can easily get the appropriate plugins for almost all functions of your website. WooCommerce, Yoast, Akismet, etc, are some of the most downloaded WordPress plugins. Depending on your specific needs, you can install and configure the necessary plugins on your site and use them freely.

4. A Boon For Non-Technical Persons

There are numerous entrepreneurs and professionals who want to have their online presence with professionally designed websites and blogs, but they fail to do so because of the lack of technical knowledge.

On the other hand, you need to hire a team of expert web developers, IT security experts, SEO professionals and content writers, if you want to run a traditional website successfully and generate business through it. All these can make a big hole in your budget and your investment may go in vain if your website doesn’t create enough business opportunities.

But, WordPress is a boon for non-technical persons, as well as simple website builder like MotoCMS. Anyone with a basic knowledge of computer and Internet can easily create appealing, professional, and customer-centric WordPress 2017 sites without writing any code.

5. Run Multiple WordPress Sites With One Backend:

When your web-based business grows, you start to feel the need of creating various sites to expand your business in all directions, reach out a large number of people, and increase ROI. It is very difficult and tedious job to run and maintain multiple sites and address the growing needs of your customers.

However, with WordPress, you can easily run multiple sites using its built-in multisite feature. Yes! It’s true. WordPress 2017 allows you to create and run several sites with the same backend.

This helps you in many ways. Have a look at some main benefits that are given here below.

A. Great Ease In Website Operation And Administration:

While operating multiple sites, you face lots of problems to manage all of them properly. Nevertheless, you can run multiple sites on WordPress 2017 and the most interesting fact is that all sites share the same hosting server, themes, and plugins. It helps you to save your precious time and energy & manage multiple sites easily.

B. Upgrade All Websites Once

One of the main benefits of operating sites through one backend is that you can easily upgrade WordPress sites once. This eliminates the need of updating themes, plugins, and software of different sites separately which saves your precious time. You can use those times to better manage your site.

C. Cost-Effective

If you run Multiple WordPress sites separately, you will have to spend a lot of money for that. The WordPress 2017 multisite feature helps you to run multiple sites with a little investment.

These were top 5 facts about the WordPress which manifest the main reasons of its growing use and popularity in 2017.

Stay tuned to learn more about other systems that allow you to build your website easily!

The post 5 Facts About WordPress You Should Know in 2017 appeared first on DesignWebKit.