layout design

Layout Design

Introduction

Layout design is the arrangement that create or plan out by using combination of multimedia element and color to perform the page to show the purpose of design with specific or unique.

Example of layout design: Facebook

Path Layout

Path layout is the direction that lead the eye flow of audiences to look on the page and design. By using path layout, audiences can understand what is the main topic of a design easily.

Path layout has three type, that is

·         Gutenberg Diagram

·         Z-pattern layout or Reverse-S-pattern

·         F-pattern layout

Each path layout has own flow or direction that place the  information in the page design.

Gutenberg Diagram

Gutenberg diagram is the direction of support in layout and component when elements are distributed and homogeneous or contain heavy use of text in  the page design (William Lidwell, Kritina Holden, Jill Butler, 2003). Gutenberg diagram also help the design that contain a lot of words to make audience easy to read and understand. It can lead direction of eye with using weight and component of element in the page. Gutenberg Diagram is not suitable to all design. Example of Gutenberg diagram are novel a newspaper.

Direction of Gutenberg Diagram

Gutenberg diagram has categories into four quadrants, that are

·         Primary optical area is located in the top left corner of page.

·         Strong fallow area is located  in the top right corner of page

·         Weak fallow area is located in the bottom left corner of page

·         Terminal area is located in the bottom right corner of page

This pattern purpose that eye sweep across and down the page with horizontal movement call axes if orientation. Sweep starts from top left corner to bottom right corner, eye movement travel from primary optical area to terminal area and the movement is call reading gravity.

This pattern focus on strong and weak fallow area that is out of reading gravity and receive minimum attention to both fallow area. Reading gravity path is use to place important element to make sure audience focus on the element. This design is harmony with natural reading gravity that can improve reading rhythm(Steven Bradley, February 2007).

Z-Pattern Layout

Z-pattern layout is the reader that follow shape of letter Z and direction start from top left corner horizontal to top right corner and diagonally to bottom left corner and finish with horizontal at bottom right corner.

Z-pattern also known as reverse-S-pattern. Similar of Gutenberg diagram and Z-pattern is both start from top left corner and end at bottom right corner and pass through the middle of the page. Gutenberg diagram is place important information an middle path while Z-pattern is good for simple design with few key element that need show to audience. Story telling aspect of design is follow the path of Letter Z(Steven Bradley, February 2007).

Zig-Zag Pattern

Z-pattern also can known as Zig-Zag pattern because Zig-Zag pattern is combination of few Z-pattern at the same page. Direction of Zig-Zag pattern is almost same with Z-pattern that start from top left corner horizontal to top right corner and diagonally to middle left corner and move to middle right corner and diagonally to bottom left corner and finish with horizontal at bottom right corner(Steven Bradley, February 2007).

Golden Triangle Pattern

Golden triangle pattern also one of the separate pattern from Z-pattern. Direction of golden triangle pattern also start from top left corner and move horizontally to top right corner and move to bottom left corner diagonally and close shape that end up to  top left corner with a right angle on top left corner. Space inside triangle area is use to place important information(Steven Bradley, February 2007).

F-Pattern Layout

F-pattern is the reader that follow letter F and direction is not same with Z-pattern or Gutenberg Diagram. The first sweep start from top left corner to top right corner, then second sweep start from middle left corner and move horizontally to middle right corner. And the second sweep is not extend as long as first sweep.

F-pattern is focus on:

·         Important information is place on top of design that general read by reader.

·         Lesser information is place on left edge of design in point form where horizontal eye movement can look to all.

·         People do not read online and they will scan.

F-pattern is look to get applied to online replace of text heavy content. F-pattern will place all the important information on top(Steven Bradley, February 2007).

Reference

William Lidwell, Kritina Holden, Jill Butler, October 2003, Universal Principles of Design. [Online] Available at http://www.studiodino.com/info/news47.htm [Accessed at 25 September 2013]

Steven Bradley, February 2007,Vanseo Design. [Online] Available at http://www.vanseodesign.com/web-design/3-design-layouts/ [Accessed at 25 September 2013]

Layout design by group6

Layout design by Hong Zhang (group 6)

Define layout design

Layout, also known as layout design, graphic design of a large branch, mainly refers to the use of modeling elements and forms of principle, the layout inside the text font, images, graphics, lines, forms, color and other factors, in accordance with certain requirements for choreography and visual arts to express way and through the presentation of these elements make the viewer feel some intuitive meaning to pass.

Layout is not only used for typesetting books among web pages, advertisements, posters and images related to the plane will be used in many areas of the layout. Good layout can better convey the author wants to convey information, or to enhance the effect of information transmission, and can enhance legibility, so after the layout is much more eye-catching and beautiful. Layout design is the art technology combined with ideas and choreography work, the unity of art and technology.

Design layout step

1) Conceive and draw sketches. There may be a number of sketches alternative.

2) Select the design draft. Select from a sketch or a few closer to the design requirements, and further depicts its details.

3) Artwork. After selection of the final design, will be starting to design, layout, drawing and others.

4) Sample. Finished the layout design should be make a sample and check the layout design. If an error occurs, it can go back previous step to continue to modify, and make sure the layout design is perfect.

Grid of Layout design

Also known As the Swiss design. Grid layout is a graphic design method and style. That is using fixed of grid layout, the style simple and neat. After World War II, This style of layout design becomes most popular and mainstream style of publication design.

Basic grid design

Two-column grids: (Most popular type)

Two-column grids are very simple and most using in magazine and newsletters.

However, in popular publications, landscape of two-column grids be too wide to reading and given reader a feeling of comfortably.

Three-column grids:

Three-column grids more agility to design the layout, because the picture can use one column, two column, or all of the column.

Four-column or above

If you have many picture, text, and graphics, this style of column more flexibility and more place to insert.

Example

The following picture is four-column grid design.
The first three-column is about the topic, and last one column is contact author
But the users can manual scroll horizontally to read the topic.

When you click the menu button, the all page will move to another page, such as flash motion.
http://melissahie.com/

This layout design is creative layout.
The author is using when your mouse move to the number or abc, the selected of project will hang in the air.
http://www.jeremylevine.com/

creative ideas. Open this website, move the mouse to black card there, the black card will auto fly away. And then click the "1561" card, some of card will fly out and some of card stand the floor. It is interesting of layout.
http://www.seymourpowell.com/flash/

References

Page Layout Design ,[online] Available at: <http://www.serif.com/appresources/ppx5/tutorials/en-gb/tutorials/design_grid.htm/>[Accessed 22rd September 2013]

Grid (graphic design)  ,[online] Available at: <http://en.wikipedia.org/wiki/Grid_(graphic_design)/>[Accessed 23rd September 2013]

Vitaly Friedman,40 creative design layouts:Getting out of the box  ,[online] Available at: <http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box//>[Accessed 24rd September 2013]

Layout Design (Rebecca Siaw - Group 5)

Introduction

There are many key factors to consider when putting together a layout. Photos, captions, body text, headlines and graphic add-ons, amongst others, are just a few things that need to be properly aligned and styled (Signature A Yearbook Production Modus Operandi, http://signature.definitelypotent.com/ld_intro.html) ^[1]. The correct use of terminology, composition, column design, proper use of white space and other elements are all part of layout design (Signature A Yearbook Production Modus Operandi, http://signature.definitelypotent.com/ld_intro.html) ^[2].

 

Layout and Design

Layout design is the development of organizing the contents and information in an orderly manner.  A layout designer will usually use it in many fields to show the information such as for designing web page, journal, newspaper or any advertisement. Some of the layout could be designed to be used for blueprint or structure designing.

 

Page Layout

Page layout is a technique of placing, organizing and rescheduling the contents on the page. For example nowadays designers use the page layout in the most suitable way possible when designing any newspaper or magazines and it could be the best example for that type of layout. A designer should design the page layout depending on the few rules to make the contents looks effective to the user. Each factor on the page will affect the other factors on the page. It is necessary to have a focal point on the balance and shape for the empty space and use grids where and when necessary.

Balancing the content

Balancing could be defined in different words. Placing the factors on the page must include the information about the article features and texture. In balancing, a designer should focus on the proportion and the size in between factors which have to be measured in establishing balance such as arranging objects.

 

Using Grid

Most of the designers use the grids when designing a layout because it is too useful to arrange the factors on a page. Grids are an unseen structure used as a guide. It also could help to set up planned unity to more pages in a Web site. 

 

Figure 1

The use of layout

The term layout is about arranging the flow of how the design will be created in the next stage. The layout principles and theories vary but it falls under two categories: grid-based and non-grid based designs. Each design is unique in its own way and they both have their advantages and disadvantages respectively. White space and proximity are something which needs to be considered when creating a layout, all of which will be discussed below.

Figure 2

Mark Boulton said “the thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines” (Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/) ^[3]. Using a grid is one of the necessary design values in the modern century. Most of the designers are now working with grids. A grid is a method that exists in produce designs but can be easily functional to web designs/applications as well. You may ask why use a grid when designing; well the answer to that question is because a “grid design is a fundamental skill of any designer” (Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/) ^[4]. It is vital for the designer to understand the proportional relationship, white space and composition to build a grid for any platform, regardless of whether is web, print or real 3D environments. A grid plays an important role in the layout and design process. a lot of of the pages we perceive daily have grid lines, as guidelines. We may not be able to see it but the grids are there on the blueprints, holding up the created design, establishing structures and guiding the factors on the page.

White Space

White space is also known as empty space or negative space. The smaller white space, also known as “micro whitespace”, is an empty space between smaller elements in a composition; for example in between list items, a caption and image or words and letters. The larger empty space is known as “macro whitespace”. White space is used for many reasons. Designers are known to use white space in brand positioning to create a sophisticated feeling and elegance for upscale brands. It has been said that “coupled with a sensitive use of typography and photography, generous white space is seen all over the luxury markets” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[5]. Cosmetics, for example, use a wide range of white space for marketing. This is done to tell the reader that they are of high quality, sophisticated and that the brand is generally expensive.  

           ^{Figure 3: Examples of direct mail vs. luxury brand design}

The content and design are the same in both pictures, yet the “two designs stand at the opposite ends of the brand spectrum” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[6]. The product can be seen as cheap if the white space is less whereas it is seen as luxurious if more white space is used. There are a lot of factors which goes into brand positioning apart from the use of white space. A white space is often used “to create a balanced, harmonious layout” (White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace) ^[7]. A white space is considered to be an “active white space” when the white space is used to attract the reader and direct them from one element to another. 

Figure 4: Text before white space is added

When a white space is added to create harmony and visual comfort in the design, it is called a “passive white space”. Margins will be added, the font type and size will be changed so that the users can easily read what the message that is directed for them.

   Figure 5: Text with passive white space is added                                          

Conclusion

Layout and design is the process of arranging contents and information in a correct manner.  Layout is used in many fields to present information such as web designing and publication, to name a few. This is done to make it look more attractive to the reader or the user and in return this will be very easy for them to read it. There are many various examples of layouts which attract readers and users respectively based on the purpose of the advertisement. The arrangement and setting of the layout and design therefore is very important. Also balancing could be another example that should be consider when designing layout such as in newspaper or magazines so the reader will not face any difficulties to read the articles.

References

• ^[1] Signature A Yearbook Production Modus Operandi http://signature.definitelypotent.com/ld_intro.html [date accessed: 21st September 2013]
• ^[2] Signature A Yearbook Production Modus Operandi http://signature.definitelypotent.com/ld_intro.html [date accessed: 21st September 2013]
• Figure 1: http://inspectelement.com/wp-content/uploads/2009/09/layout.gif [date accessed 23rd September 2013]
• Figure 2: http://www.noupe.com/design/graphic-design-theory-50-resources-and-articles.html [date accessed 23rd September 2013]
• ^[3] Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [date accessed 23^rd September 2013]
• ^[4] Designing with Grid-Based Approach http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ [date accessed 23^rd September 2013]
• ^[5] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• Figure 3: http://alistapart.com/article/whitespace [date accessed 23rd September 2013]
• ^[6] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• ^[7] White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• Figure 4 & 5: Active and Passive white space, White Space by Mark Boulton, 9^th January 2007, Graphics Design, Layout and Grids, http://alistapart.com/article/whitespace [date accessed 22nd September 2013]
• 40 Creative Design Layouts: Getting Out Of The Box http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ [date accessed: 21^st September 2013]

Layout Design - Tang Chu Jing

Layout Design

     Layout design is refer to the services that concerned in making a structurepage that have all of the part that needed in an planned and effective way (Laura Wheeler, 1997). It also means layout is a structure that containsmain content areas in a single page. In the layout design included a default set of type styles, a basic page setup, a color scheme, and an image or a background image.

     In the site design page can have only one design, but you can choose difference layout for every page. Besides, the site design can help to establish the footer appear, site menu, page title, and site title for each page. On the other hand, a page layout can identify the main content of the page will appear to control the body.

     Each pagecontains three main areas. Each of these areas is the layout arranged in a certain pattern. A page layout will include a specific page title. When set up the website, you can choosethe favorite layout of each page, beside you also can change the layout anytime (Yahoo! Inc., Anon. 2012).

     Layout view is more visually sloping view, is not the "design" view. It is a very helpful view for locale the size of controls, or executes several tasks that have an effect on the usability of the form and visual conformation. Some of the task unable to achieve in layout view and may require to exchange to design view. In some cases, Access will show a message to inform you that you must exchange to Design view and make the specific changes.

     Design view provides a more comprehensive view of the structure form. While making the design changes, you cannot see the underlying data. Yet, there are some cases can achieve more easily in the Design view rather than in Layout view (Microsoft Corporation, Anon. 2013).

     Apart from the visual design basics, you also can get the creative layout of the site design. Design was more important than some creative ideas concrete realization. In the following 22 out-of-the-box layouts showcase is the collecting samples of creative design layouts with CSS or Javascript.

Below are the example for creating the draggable functionality layout design with "jQuery UI Draggable" in javascript (The jQuery Foundation, Anon. 2013).

This is a smooth scrolling with jQuery function (Jake Rocheleau 2013).

 

This is a horizontal and vertical centering of web design by using CSS inside the HTML webpage (David Storey 2013).

16 x Getting Creative With CSS

1. Magazine cover-style layout for his one-page-site.

2. A design uses boxes in a creative way.

3. A layout design uses a text and images with five-column grid to complete form and sense of order.

4. An ordinary Apple grid-layout with intuitive and scan able.
  

5. An article design focus on visual clarity and typography with a truly different route. Below are the three different layout designs.

6. A design uses JavaScript to slide between different parts of the site that giving the secondary meaning.

7. The design with one single illustration with all elements fit completely with each other and creating a sense of closure, balance and visual harmony.

8. A design that can be seamlessly incorporated in a complete and simple layout.

9. A design uses icons to specify different navigation options.

10. A design uses vertical and horizontal layout.

11. A design uses a common 3 column layout with unique looks and resembles a folder inside out a bunch of paper.

12. A design uses asymmetric positioned in an unusual style, but blocks of content appealing.

13. An effective background image that can help a layout be obvious.

14. It is a design of good use in white space and selects the different image sizes with negative or positive space used in the sidebar. And each element have properly aligned and clearly separated.

15. This is a non-linear layout design exactly separated the boxy structure and offers a simply research with arrangement of design elements to perform striking design solutions.

16. A creative design with an attractive and elegant layout.

6 x Getting Creative With CSS+JavaScript

1. This is a design about matching the navigation block look like "hang in the air". Inside the page have two columns, one of the layout look like normal because the cow located on the background for certain purpose. The second of the layout is realized with Javascript. Due to the background, it able to show out a 2D layout design.

2. In this design, it uses scroll effect and vivid background image to allow user to rapidly jump from one to another section. Besides using 20 different pages, this layout able combines all in one single page.

3. This is horizontal layout design also known as horizontal slider navigation. It is a combination of video, navigation, background images and content create the layout distinctive and unusual.

4. On this design element certain place are clickable and draggable. This is an irregular collection which is interesting and memorable to explore.

5. This design in a different ways by using a pannable user interface, but employing in JavaScript rather than in Flash. In this design allow users to drag and clock to pan the picture, or use the links that place around the content to move around.

6. In this collection the picture of a designer works look like someway loosely located on an invisible rope. While you clicked one of the picture, all the others elements place themselves in different way that the substance which will be becomes dominant.

Above are the all example of the out-of-the-box layouts showcase with Javascript and CSS (Vitaly Friedman 2008).

Conclusion

     In conclusion, layout design is a structure page that contains the main content areas in a single page. Through the sample above, I understand that in layout design it can have the direct message design, secondary meaning design, form and graphic impact to design the layout. Direct message mean for a viewer to read the picture or text type and get the direct message. Secondary meaning is the design that consists of hidden meaning of the layout design. Normally secondary meaning is to enhance the direct message. Form designs mean using the different foreign country and the national language or alphabet to form a layout. Graphic impact is a design that able to let user to feel on it. The sample of layout design above was created by CSS or Javascript. Before we need to create a creative design, we have to get an idea what design we need to create. By viewing the sample, we can easily get an idea of how to start to do the design. 

Reflection

From this research, I understand the layout design have so many type. Beside it also can create by CSS or Javascript. When creating the layout design with CSS or Javascript must combine with HTML coding, so that the coding only can function. Most of the Javascript design is done by jQuery. From the example above, I know the layout design can be done by using column grid design, typography design, visual clarity design, intuitive and scanable design, direct meaning or secondary meaning design, form design, graphic impact design, vertical or horizontal layout design, asymmetric design, magazine cover-style design, striking design, attractive and elegant background to display a 2D design, non-linear layout design, combination of video, navigation, background image and content design, clickable or draggable layout design, pannable layout design, invisible layout design and so on. By doing this research I able to know what is the best layout design that I can use to design the layout in my assignment 2. I may discuss with my group mate to use the 2D design or the visual clarity design on the next assignment.

References

Microsoft Corporation 2013, Understand Layout view and Design view [Online] Available At : http://office.microsoft.com/en-001/access-help/which-view-should-i-use-layout-view-or-design-view-HA010286483.aspx [Accessed 14 September 2013]

Yahoo! Inc. 2012, Difference between design and layout [Online] Available At : http://help.yahoo.com/l/us/yahoo/smallbusiness/webhosting/yss/look/look-03.html [Accessed 14 September 2013]

The jQuery Foundation 2013,Draggable [Online] Available At : http://jqueryui.com/draggable/ [Accessed 24 September 2013]

Laura Wheeler 1997, Firelight Web Studio, Glossary of Terms, Layout design [Online] Available At : http://www.firelightwebstudio.com/index.php?option=com_content&view=article&id=25&Itemid=49 [Accessed 14 September 2013]

Vitaly Friedman 2008, Smashing Magazine,40 Creative Design Layouts: Getting Out Of The Box[Online] Available At : http://www.smashingmagazine.com/2008/09/03/40-creative-design-layouts-getting-out-of-the-box/ [Accessed 15 September 2013]

David Storey2013, Smashing Magazine, Designing CSS Layouts With Flexbox Is As Easy As Pie[Online] Available At : http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/[Accessed 24 September 2013]

Jake Rocheleau 2013, Design Shack, Code a Single-Page Sliding Website Layout With Fixed Navigation [Online] Available At :http://designshack.net/articles/javascript/single-page-sliding-website-layout-fixed-nav/ [Accessed 24 September 2013]