Anchor objects

When making a layout are working with objects: headlines, text, images, links and videos. When making the page you are working also with a perception of the person: how they will read the content, what will be important and what the client should concentrate on.

All layouts are built out of rectangular. They are called modules. The screen is holding objects like a frame. To build hierarchy we use anchor objects to draws attention to the information.

Anchor objects should be close or in a corner or in the visual centre of it’s rectangular.

An example from life can be a placement of the furniture in a room. Tables go to the centre, cabinets and whiteboards on the side. And additional objects like chairs or plans are positioned at the edge of the tables or shelves, respectively.

Points for anchor objects

Anchor objects will work the best by placed in corners or the centre with space around it. Space can be on the left, right, bottom or top. It can be achieved with margins or paddings. Space around the object should be bigger or equal to the size of the object. More can be read in the tip about proximity. (soon)

Layout creation

Ancher objects should be connected to their point. Space around the object helps to make this feeling. In real life we working with more information. It can be attached to the main object by putting it nearby: phone number can be added to address, links can be added to menu and sub-headlines to headlines.

Objects stack on each other like Lego blocks. The layout will be working if objects are aligned and keeps being a rectangular shape. Placemnt of object in random places will break the layout. Each achor should be it it’s point.

Objects can be tangled to the side. This gives a calm look.

A good layout is using edges and sides of the canvas.

Anchor points are building hierarchy: first people notice illustrations and images, then big headlines, next logotypes, facts and numbers, and after that text.

Examples

Please, have a look at some examples and analize how the ahcner object is making a layout.