Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Transcript of Website Composition
When designing your website there are many principles you have to take into consideration in your composition.
Composition is the leading cause of either creating a good user experience or a bad user experience.
Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.
The different types of layouts
that we will cover are:
• Single Visual
• Rule of Thirds
• The Grid
This is quite simple
really - it’s where
there is one major
aspect of a design, which acts as the single visual focus. For example, you might create a design with a large photograph in the background, with plenty of whitespace and simple typography overlaid.
This is sometimes seen on single-page websites, or more commonly in print design.
is where a single visual image is used as the basis of the design.
The single visual
method of composition
The key here is to make sure that other elements of your design support and reinforce the main visual, and don’t try to compete with it.
The single visual pattern is the easiest composition to successfully achieve.
Pick a strong image and let it do the bulk of the work for you.
Single Image Composition
A design principle used in photography and film-making (and much more), the rule of thirds is a good compositional layout for designing for the web.
Rule of Thirds
The “sweet spots” – intersecting points along the grid – are flexible in size and easy to find and align.
This is particularly useful in web design, as it can help us create better proportions and layouts in our designs.
The rule of thirds is a guideline, which proposes
that an image should be split into nine equal parts
(three across, three down) with elements of that image or design aligning to the edges of each of these parts.
The rule of thirds is a great compositional tool and layout. While not something that should always strictly be followed, it can be a great aid in designing with more balance.
Rule of Thirds
Most designers see an invisible grid running through all their designs. In modern web design, clean grid lines have become popular and almost impossible to avoid.
Grids bring organization not
only to the design, but to the
process of creating design.
Instant consistency and less
time updating and adjusting.
Grid design is probably one
of the most familiar design patterns for many graphic and web designers.
Grids add structure and order to designs, and can be a useful method for achieving good proportion among elements in your work. It also allows you the freedom to utilize multiple compositions in one.
The F-Layout relies upon various eye tracking studies for it's foundational concept. These scientific studies show that web surfers read the screen in an "F" pattern - seeing the top, upper left corner and left sides of the screen most... only occasionally taking glances towards the right side of the screen.
“F” PATTERN DESIGN
• Visitors start at the top left of the page.
• Then they scan the top of the site (navigation, subscription, search, etc.)
• Next they move down, reading the next full row of content... all the way to the sidebar.
• Last, surfers enter a "scanning pattern" once they hit the bulk of the site content.
Allow me to walk you through the general behavior pattern:
Take a moment to notice a few key behavioral patterns; Reading is largely done the same way that a book is read: top to bottom, left to right; Sidebar content is often dismissed below the "fold", and usually is only scanned briefly. The bulk of the attention stays within the main content column.
• The brand-mark and navigation occupy the visitor's attention first and foremost.
• Within the contest structure, images receive the greatest level of attention.
• Headlines come next.
• Text appears to be scanned, not read thoroughly.
A close inspection reveals a visual hierarchy that you might logically expect:
Applying The F-Layout to a Design
As an exercise, let's walk through the creation of a design using the F-Layout. First, let's sketch out the rough placement of our main content elements using a wireframe method:
Notice that we're trying to make our primary "mission statement" as near to the top of the page as possible in an attempt to communicate the site's purpose quickly. We're also giving in to the visitors desire to "scan" content by breaking our design into two main columns... one for our primary content, the other for extra information (the sidebar).
What happens when you want to break the surfer out of the "scanning pattern" though? You certainly don't benefit from a bored user if they begin to dull everything out, so let's add one "awkward" element within the scanning area to keep the user interested.
This technique of "breaking the expectations" of the layout can be useful when you have really long vertical spans of content that feel dull or boring once you scroll past the first couple headlines. By throwing the viewer a curve ball, you can keep the users moving around your site by providing visually interesting elements 1000, 2000, even 3000 pixels below the fold.
If you need to say something, you absolutely must say it at the top, because...
Users aren't going to read each and every word on the page. In fact, most readers won't really even bother reading the excerpt of an article.
Anything past a headline is probably only going to be there for SEO purposes.
Images and Headlines are only reliable if they are interesting and engaging.
Why it Works
The F-Layout works because it allows web-surfers to scan content naturally. The layout feels comfortable because people have been reading top to bottom, left to right for their entire lives. The implications of this behavioral pattern are something of a double-edged sword though:
Composition is also about space.
This doesn’t mean that you leave vast, empty areas in your designs, but is instead about being clever with the space that you have available to you.
Harnessing whitespace is as much about providing focus for your content, as leaving empty areas.
That said, use padding and whitespace to your advantage - nobody will find it easy to navigate a website that is cluttered, has little hierarchy and where the elements are cramped and have no breathing room. Instead, introduce space into places that you can to allow for a better overall experience for your designers.
Let’s get the basic stuff out of the way first.
Instead, think of it more like structural “empty” space, where no extra elements, embellishments or other parts to your design are placed.
Whitespace isn’t simply a block of space in your design that has to be white.
Why Should We Care
Imagine you’re browsing a website and, everywhere you look, you’re unsure if you’ve found what it was you were looking for. That, and it’s also hard to read; the text is cramped, it’s too close to the next block of text and there’s no sensible divider (or even just enough space) to differentiate between the blocks. It’s annoying, isn’t it?
In all likelihood, the users of the websites you design will feel the same way. If anything, they’ll be less patient than you are; we understand that it takes time, talent and a lot of knowledge to create a good website, but most users don’t care and will often just expect a good
website, a good experience, and be frustrated when they don’t
Which one would you use?
We should know by now that having more whitespace in our designs gives every different item on the page more breathing room. This creates balance, as it means we can lend more weight to the elements that we want to focus on.
Advantages of Whitespace
In-keeping with hierarchy, whitespace can also help guide users around the website properly and as we intend them to.
With more space around our elements, we can also hope to speed up interactions between our user and the website. This means that our users should be able to find what they are looking for as quickly as possible, only helping to improve their experience on your website.
How to Use Whitespace in Your Designs
Understanding that whitespace is good for your designs is one thing, but you need to know how to put it into practice.
KISS (Keep It Simple, Stupid)
Keep everything simple.
Often, there’s no need to complicate your design by stuffing bits of information in every nook and cranny. What you want to do instead is use all of your other compositional techniques (whitespace, colour, size, typography, etc) to draw attention to the areas in your design that need that extra bit of focus.
This doesn’t mean that you end up with a silly amount of completely empty space, where no parts of your design seem to have any relationship with each other. Instead, use the space that you have cleverly, and improve the usability of your design through spacing that is consistent and ensures that your design is clear and easy to understand and follow.
Keeping your design simple doesn't only help to make your life as a designer and a developer easier, but it makes things easier for your users too. Keep things simple by stripping out absolutely anything that isn’t necessary or important, or that the user doesn’t need to know.
In conclusion, composition of a website takes conscience effort.
Understanding what is important will help you with the composition.
Whatever you do, don't forget