This is a fascinating subject that doesn’t always get discussed in the realm of web design. Photographers are probably familiar with the rule of thirds related to photo composition. But how can interface designers use the rule of thirds to create interesting digital designs?
In this post I want to explain the rule of thirds and share a few tips on applying the rule into a website layout. Not everyone will find this helpful and it’s often better to stick with a regiment that expedites the process. Yet the rule of thirds is such a basic concept that it’s definitely worth learning about how it works and how it applies to website layouts.
You may be asking yourself why the 3-way split is such a good idea? And where does this even come from anyway? Well you’ll be glad to know there isn’t a whole lot of math involved – at least not with absolute practical application. We could sit around the math club circle and talk about the magic of Fibonacci numbers but that’s not really necessary.
The rule of thirds comes from traditional art, especially photography, where a piece of work can be divided into 9 even squares. This is made with two vertical and two horizontal lines cutting through the composition. The rule states that eye-catching items should line up near the intersections of these lines for the most impactful results.
You can find a great example in this post on WDD. This is where art becomes real artsy-fartsy because the idea of asymmetry is usually more interesting than symmetry. But sometimes a photo with a little symmetry can be interesting – the rule of thirds plays a small part in this.
The ideal goal is to capture something in a unique way that draws attention into some part of the photograph. You want inequality because this forces some elements to appear more significant than others(even if it’s just clever photography).
Now we get to the question of web design. Well that wasn’t phrased like a question… so how does the rule of thirds relate to web design? It relates in the same way that you would draw attention to certain pieces of a photograph, you can also get people focused on important parts of a website.
Understanding The Grid
This technique breaks down into 9 squares with 4 crucial intersecting points. Most users have been known to scan websites in an F or Z pattern. So the eye will follow in the pattern of the letter F or Z from top to bottom. The top-left corner of a website is one of the first areas to grab attention.
This also means the top-left intersecting point should fall on or near an important part of the page. The intersecting point doesn’t need to be on top of a link or a photo(although it could be). It should be more like a marker to distinguish an important piece of the layout. For example the page heading might align somewhere near the first horizontal line and underneath this you may have a photo slideshow.
If you try out this technique I would recommend taking a screenshot above-the-fold in your browser. If you only have a mockup design crop the exact dimensions of a typical monitor display and use that as a screenshot. Full website mockups don’t present the most helpful results because they’re often much taller than they are wide. Also the rule of thirds is meant to be a UX concept, not a full design principle.
When a user first lands on your webpage they’re only seeing the interface elements located above the fold. This principle is used to analyze the canvas and determine sections of the page that naturally draw attention. Use it properly and you might find the 3×3 grid to be a pleasantly enlightening experience.
Everyone loves a gooв story. Knowing that fact, why not to use it for promotion your own brand online? Designing a site does not mean you have to create static experience only, websites are not printed products. You may do almost what you want.
With HTML5 it became easier to add animations and videos to a website background. Video as a website background dramatically changes the whole visual experience of the viewer. Some sites use videos to create a cool atmosphere, while the others show their products or services in action to tell a story. So, to give you some inspiration, I made a collection of fresh video background sites worth your attention. Feel free to open each site to see the videos.
You can’t deny the fact that a good looking infographic will attract your attention. This is bound to happen as these charts usually serve up a lot of information in the most creative way possible. How many times have you clicked on an infographic that is eye-catching, even though you might not need the info it provides?
If you’re an upcoming web designer, then you will have to learn how to design infographics as soon as possible. Don’t be surprised if clients ask you to design one for them, sooner or later. If you’re a Pinterest user, then a quick search will bring up some interesting infographics to browse through. This is a good way to start your self-tutorial on how to create a fantastic graphics.
Social media is a way of life for a lot of people. For creatives, it’s a great way to get your work out there and potentially gain a following.
There was a time (before the internets), when artists showed their work in these big, black folders/books called an artist’s portfolio. It was one of the very few ways an artist was able to show off their work to clients or employers. Today, artists still show off their portfolios. However, there are now literally hundreds of new ways to show off your work online. Some of the most accessible is through social media where fans and supporters can not only show their appreciation but also easily spread the word about you and your work. Depending on what kind of work you do and how well people respond to it, social media can be a very effective self-marketing tool for many creatives.
Therefore, it’s important that your work looks the best that it can look online.
Since social media platforms over the last decade have been continually evolving and optimizing, it has not always been clear how best to display your work on these platforms. Often your work was either scaled up or down to size if you didn’t know what dimensions a certain social media platform was using to display your work. Luckily, we’ve managed to do a bit of research on how different social media platforms display images so that others can see your work in the best possible way.
As these platforms continue to evolve, we will also update this post to reflect any changes including any information we find about how images are displayed on mobile devices and apps.
Of course Facebook started out as a sort of “friend catalog” very similar to very popular services such as Friendster and Myspace from the late 90′s and early 2000′s. Today, however, Facebook is so much more than just a glorified address book. It has become a platform for sharing what you do and what you like on and offline. Having a Facebook Page for your work is not only a good idea, it can also be very effective in getting your work out there and engaging with your followers. Despite the fact that it is probably the most mainstream social network (given that even your 80 year-old grandparents are probably on it), Facebook is still a great place to display and engage with fans and supporters of your work.
- 851 x 315 pixels
- Image loads fastest if it is less than 100 kilobytes.
- sRGB colorspace