Layout, Layout | Basics

Web layouts with unusual shapes and geometry

Starting with the CSS3 techniques, the ordinary squares from web designs layout elements started to be transformed in circles, triangles, hexagons or rhombuses. But, the 2012 bring in our attention a new trend what appear to be the main web design trend of the 2013 year what consist in a more unique visual flow of the website, and what can help a web designer more then the geometrical shapes?

View.

Image

Standard
Layout | Basics

Page layout tips

Page layout or page composition is the process of placing and arranging and rearranging text and graphics on the page. A good composition is one that is not only pleasing to look at but also effectively conveys the message of the text and graphics to the intended audience. There are certain tried and true elements of page composition that can help insure a successful layout. You may notice that these page composition tips are closely tied to the principles of design. Continue reading

Standard
Layout | Basics

Ratios and com­plex grids

In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to cre­ate a sym­met­rical grid on which to cre­ate your designs. This, the second part in the series, will deal with other ratios and how they can be com­bined to cre­ate more com­plex grid systems.

Relat­ing to grid systems
I’ve talked a few times about using the Golden, or ‘Divine’, Sec­tion in the grid sys­tems you design. The Golden Sec­tion is a ratio which is evid­ent through­out the uni­verse as the num­ber Phi. You can use this ratio to good effect in design by mak­ing sure that ele­ments of your grid con­form to this ratio. Using the Golden Sec­tion can ensure a nat­ural sense of cor­rect com­pos­i­tion, even though it is based in math­em­at­ics it will ‘feel’ right. Continue reading

Standard
Layout | Basics

Designing a grid systems

Ratios are at the core of any well designed grid sys­tem. Some­times those ratios are rational, such as 1:2 or 2:3, oth­ers are irra­tional such as the 1:1.414 (the pro­por­tion of A4). This first part is about how to com­bine those ratios to cre­ate simple, bal­anced grids which in turn will help you cre­ate har­mo­ni­ous compositions.

Start­ing with a blank canvas
It’s always easier in these kinds of tutori­als to put the example in con­text, in some kind of real world scen­ario. So, this is it. You’ve got to design a pro­gramme for a gal­lery exhib­i­tion. You know you want the size to be A4. You also know that there are going to be pho­to­graphs and text, and the pho­to­graphs will be of vary­ing size. There you have it — your blank canvas. Continue reading

Standard
Layout | Basics

Grid system

Think of the grid as a plan — a plan for your page layout
Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.

A grid is an invisible structure used to guide the placement of elements on your page. Grids don’t appear on the printed piece but their influence may be evident in the widths of column texts, the uniformity of space around photographs, or the consistent placement of repeating elements from page to page in a magazine. They are a series of guidelines that determine the margins of the piece, space between page elements (headlines, body text, photographs, etc.), and let you know where to put things on the blank page. Continue reading

Standard
Layout | Basics

What is page layout?

Page layout (verb) also known as page design, page composition, document design, desktop publishing is the process of placing and arranging and rearranging text and graphics on the page to produce documents such as newsletters, brochures, books, etc. Page layout (noun) refers to the actual document page and its composition. The primary software programs for desktop publishing are called page layout applications.

Before designers had desktop publishing software, page layout was often done by pasting blocks of typed or typeset text and images cut from special ‘clip art’ books onto sheets of paper. Adobe PageMaker was the first desktop publishing or page layout program that made it easy to arrange and rearrange text and graphics on screen — no more scissors or messy glue.
Standard